/* ==========================================================
   TECH INDONESIA NEWS
   STYLE.CSS v2.0
========================================================== */

:root{

--primary:#0B84F3;
--primary-dark:#1565C0;

--bg:#F4F7FB;
--surface:#FFFFFF;

--text:#1E293B;
--text-light:#64748B;

--border:#E2E8F0;

--success:#16A34A;
--warning:#F59E0B;
--danger:#DC2626;

--radius:18px;

--shadow:
0 10px 30px rgba(15,23,42,.08);

--transition:.3s ease;

}

body.dark{

--bg:#0F172A;

--surface:#1E293B;

--text:#F8FAFC;

--text-light:#CBD5E1;

--border:#334155;

--shadow:
0 15px 35px rgba(0,0,0,.45);

}

/* ================================= */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.8;

transition:
background .3s,
color .3s;

}

/* ================================= */

img{

display:block;

max-width:100%;

height:auto;

}

a{

color:var(--primary);

text-decoration:none;

transition:.25s;

}

a:hover{

color:var(--primary-dark);

}

.container{

max-width:960px;

margin:auto;

padding:30px;

}

/* ================================= */

.progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(
90deg,
#0B84F3,
#4FC3F7
);

z-index:999999;

}

/* ================================= */

header{

position:relative;

background:var(--surface);

padding:45px;

border-radius:22px;

box-shadow:var(--shadow);

margin-top:35px;

transition:.3s;

}

.category{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:#E3F2FD;

color:#0B84F3;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

margin-bottom:20px;

}

body.dark .category{

background:#123A60;

color:#90CAF9;

}

h1{

font-size:46px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

color:var(--text);

}

.subtitle{

font-size:22px;

color:var(--text-light);

margin-bottom:30px;

}

/* ================================= */

.author{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:20px;

border-top:1px solid var(--border);

color:var(--text-light);

font-size:15px;

}

/* ================================= */

#dark-mode-toggle{

display:flex;

align-items:center;

justify-content:center;

}

#dark-mode-toggle svg{

width:22px;

height:22px;

transition:.35s;

}

#dark-mode-toggle:hover svg{

transform:rotate(180deg);

}

/* ================================= */

.hero{

margin-top:40px;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

}

.hero img{

width:100%;

height:520px;

object-fit:cover;

transition:.6s;

}

.hero:hover img{

transform:scale(1.04);

}

/* ==========================================================
   ARTICLE
========================================================== */

article{

background:var(--surface);

padding:50px;

margin-top:35px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.3s;

}

article h2{

font-size:36px;

margin-top:55px;

margin-bottom:22px;

font-weight:800;

line-height:1.3;

color:var(--text);

}

article h3{

font-size:28px;

margin-top:35px;

margin-bottom:18px;

font-weight:700;

color:var(--text);

}

article p{

font-size:20px;

margin-bottom:24px;

line-height:1.9;

text-align:justify;

color:var(--text);

}

article strong{

font-weight:700;

color:var(--text);

}

article em{

font-style:italic;

}

/* ==========================================================
   HERO IMAGE
========================================================== */

.hero{

margin:40px 0;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

}

.hero img{

display:block;

width:100%;

height:auto;

}

/* ==========================================================
   IMAGE CAPTION
========================================================== */

figure{

margin:40px 0;

}

figcaption{

font-size:14px;

text-align:center;

margin-top:12px;

color:var(--text-light);

}

/* ==========================================================
   TABLE OF CONTENTS
========================================================== */

.toc{

background:var(--surface);

margin:40px 0;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

}

.toc h2{

margin:0 0 20px;

font-size:28px;

}

.toc ul{

list-style:none;

padding:0;

}

.toc li{

margin-bottom:14px;

}

.toc a{

display:block;

padding:10px 14px;

border-radius:10px;

color:var(--text);

transition:.25s;

}

.toc a:hover{

background:rgba(11,132,243,.08);

padding-left:20px;

color:var(--primary);

}

/* ==========================================================
   BLOCKQUOTE
========================================================== */

blockquote{

margin:40px 0;

padding:28px;

border-left:6px solid var(--primary);

background:rgba(11,132,243,.08);

border-radius:16px;

font-size:22px;

font-weight:600;

line-height:1.7;

}

/* ==========================================================
   LIST
========================================================== */

article ul{

padding-left:25px;

margin-bottom:25px;

}

article ol{

padding-left:25px;

margin-bottom:25px;

}

article li{

margin-bottom:14px;

line-height:1.8;

}

/* ==========================================================
   TABLE
========================================================== */

table{

width:100%;

margin:35px 0;

border-collapse:collapse;

overflow:hidden;

border-radius:16px;

}

thead{

background:var(--primary);

color:#fff;

}

th{

padding:18px;

text-align:left;

}

td{

padding:18px;

border-bottom:1px solid var(--border);

background:var(--surface);

}

tbody tr:hover{

background:rgba(11,132,243,.04);

}

/* ==========================================================
   SHARE
========================================================== */

.share{

display:flex;

align-items:center;

gap:12px;

margin:45px 0;

flex-wrap:wrap;

}

.share button{

border:none;

padding:12px 20px;

border-radius:999px;

cursor:pointer;

font-size:15px;

font-weight:600;

background:var(--primary);

color:white;

transition:.3s;

}

.share button:hover{

transform:translateY(-2px);

background:var(--primary-dark);

}

/* ==========================================================
   TAGS
========================================================== */

.tags{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:40px 0;

}

.tag{

padding:8px 18px;

border-radius:999px;

background:rgba(11,132,243,.08);

color:var(--primary);

font-size:14px;

font-weight:600;

transition:.25s;

}

.tag:hover{

background:var(--primary);

color:#fff;

}

/* ==========================================================
   HORIZONTAL LINE
========================================================== */

hr{

border:none;

height:1px;

background:var(--border);

margin:45px 0;

}

/* ==========================================================
   RELATED ARTICLES
========================================================== */

.related{

margin-top:60px;

}

.related h2{

margin-bottom:25px;

font-size:34px;

}

.related-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:24px;

}

.related-card{

background:var(--surface);

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:all .35s ease;

}

.related-card:hover{

transform:translateY(-8px);

}

.related-card img{

width:100%;

height:200px;

object-fit:cover;

transition:.4s;

}

.related-card:hover img{

transform:scale(1.08);

}

.related-card-content{

padding:22px;

}

.related-card h3{

font-size:21px;

margin-bottom:12px;

line-height:1.4;

}

.related-card p{

font-size:15px;

color:var(--text-light);

margin:0;

}

/* ==========================================================
   AUTHOR BOX
========================================================== */

.author-box{

display:flex;

gap:24px;

margin-top:60px;

padding:30px;

background:var(--surface);

border-radius:20px;

box-shadow:var(--shadow);

align-items:center;

}

.author-avatar{

width:90px;

height:90px;

border-radius:50%;

background:#d6d6d6;

overflow:hidden;

flex-shrink:0;

}

.author-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.author-info h3{

margin-bottom:10px;

font-size:24px;

}

.author-info p{

margin:0;

color:var(--text-light);

font-size:16px;

}

/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

margin-top:70px;

padding:45px;

border-radius:24px;

background:linear-gradient(
135deg,
#0B84F3,
#1565C0
);

color:#fff;

text-align:center;

}

.newsletter h2{

font-size:34px;

margin-bottom:15px;

color:#fff;

}

.newsletter p{

color:rgba(255,255,255,.9);

margin-bottom:30px;

}

.newsletter form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter input{

width:360px;

padding:16px;

border:none;

border-radius:12px;

font-size:16px;

}

.newsletter button{

padding:16px 28px;

border:none;

border-radius:12px;

cursor:pointer;

background:#fff;

color:#1565C0;

font-weight:700;

transition:.3s;

}

.newsletter button:hover{

transform:translateY(-3px);

}

/* ==========================================================
   FAQ
========================================================== */

.faq{

margin-top:60px;

}

.faq-item{

background:var(--surface);

border-radius:16px;

margin-bottom:18px;

box-shadow:var(--shadow);

overflow:hidden;

}

.faq-question{

padding:22px;

cursor:pointer;

font-weight:700;

font-size:18px;

user-select:none;

}

.faq-answer{

display:none;

padding:0 22px 22px;

line-height:1.8;

color:var(--text-light);

}

.faq-item.active .faq-answer{

display:block;

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

margin-top:70px;

padding:45px;

background:var(--surface);

border-radius:22px;

box-shadow:var(--shadow);

text-align:center;

}

footer h3{

margin-bottom:18px;

}

footer p{

color:var(--text-light);

margin-bottom:12px;

}

footer small{

display:block;

margin-top:20px;

color:var(--text-light);

}

/* ==========================================================
   BACK TO TOP
========================================================== */

.back-top{

position:fixed;

right:30px;

bottom:30px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:22px;

cursor:pointer;

display:none;

box-shadow:var(--shadow);

transition:.3s;

z-index:999;

}

.back-top:hover{

transform:translateY(-4px);

background:var(--primary-dark);

}

/* ==========================================================
   FADE ANIMATION
========================================================== */

.fade{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade.show{

opacity:1;

transform:none;

}

/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media(max-width:992px){

.container{

padding:22px;

}

header{

padding:35px;

}

article{

padding:35px;

}

h1{

font-size:38px;

}

.hero img{

height:400px;

}

}

/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media(max-width:768px){

.container{

padding:15px;

}

header{

padding:22px;

}

h1{

font-size:30px;

}

.subtitle{

font-size:18px;

}

.author{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

article{

padding:22px;

}

article h2{

font-size:28px;

}

article h3{

font-size:23px;

}

article p{

font-size:17px;

text-align:left;

}

.hero img{

height:230px;

}

.author-box{

flex-direction:column;

text-align:center;

}

.newsletter{

padding:30px;

}

.newsletter input{

width:100%;

}

.newsletter button{

width:100%;

}

.related-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

.progress,

.back-top,

.newsletter,

.share{

display:none !important;

}

body{

background:#fff;

color:#000;

}

article,

header,

footer{

box-shadow:none;

}

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}