/* ═══════════════════════════════════════════════════════════════
   FRONTEND — InfoKini  ·  Dark Theme
   Hanya class yang masih dipakai index.php
   ═══════════════════════════════════════════════════════════════ */

:root {
    --border: #30363d;
    /* Teks: t9 paling terang, t05 paling gelap (terbalik dari light) */
    --t9: #e6edf3; --t8: #c9d1d9; --t7: #b1bac4; --t6: #8b949e;
    --t5: #6e7681; --t4: #484f58; --t3: #30363d; --t2: #21262d;
    --t1: #161b22; --t05: #0d1117;
    /* Aksen utama: merah */
    --b7: #a81c1c; --b6: #da3633; --b5: #f85149;
    --b4: #ff7b72; --b3: #ffa198; --b2: #ffc1ba;
    --b1: #ffe1de; --b05: #fff1f0;
    /* Aksen sekunder (dipadankan untuk dark) */
    --i6: #a371f7; --v6: #d2a8ff; --ro6: #ff7b72;
    --em6: #3fb950; --cy6: #58a6ff; --or6: #d29922;
    --rd6: #da3633; --rd5: #f85149;
    /* Radius */
    --rs: 6px; --rm: 10px; --rl: 14px; --r2: 24px; --r3: 32px;
    /* Shadow untuk dark */
    --sx: 0 1px 2px rgba(0,0,0,.3);
    --sm: 0 4px 12px -2px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.3);
    --sl: 0 12px 32px -6px rgba(0,0,0,.5), 0 4px 8px -2px rgba(0,0,0,.3);
    --sxl: 0 20px 48px -8px rgba(0,0,0,.6), 0 8px 16px -4px rgba(0,0,0,.3);
}

/* Base dark */
body { background: var(--t05); color: var(--t9); }
::selection { background: rgba(218,54,51,.3); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--t05); }
::-webkit-scrollbar-thumb { background: var(--t3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t4); }

/* ═══ Trending ═══ */
.trend { display: flex; align-items: center; gap: 14px; padding: 18px 0; margin-bottom: 4px; overflow: hidden }
.trend-l { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--t6); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0 }
.trend-l iconify-icon { font-size: 17px; color: var(--rd5) }
.trend-i { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 }
.trend-i::-webkit-scrollbar { display: none }
.trend-i a { white-space: nowrap; padding: 5px 14px; background: var(--t1); border: 1px solid var(--t3); border-radius: 100px; font-size: 12px; font-weight: 500; color: var(--t7); cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 4px; flex-shrink: 0 }
.trend-i a:hover { background: var(--b6); color: #fff; border-color: var(--b6) }
.trend-i a .h { color: var(--b5); font-weight: 700 }
.trend-i a:hover .h { color: rgba(255,255,255,.7) }

/* ═══ Section Header ═══ */
.sh { display: flex; align-items: center; gap: 12px; margin-bottom: 20px }
.sh-i { width: 32px; height: 32px; border-radius: var(--rs); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; flex-shrink: 0 }
.sh h2 { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 700; color: var(--t9) }
.sh-l { flex: 1; height: 1px; background: var(--t3) }
.sh-a { font-size: 10.5px; font-weight: 700; color: var(--b5); text-transform: uppercase; letter-spacing: .7px; display: flex; align-items: center; gap: 3px; flex-shrink: 0; transition: gap .2s }
.sh-a:hover { gap: 6px }

/* ═══ Bento Hero ═══ */
.bento { display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: auto auto auto; gap: 10px; margin-bottom: 32px }
.bento-main { grid-column: 1/8; grid-row: 1/3; position: relative; border-radius: var(--r3); overflow: hidden; cursor: pointer; min-height: 380px }
.bento-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.25,.46,.45,.94) }
.bento-main:hover img { transform: scale(1.04) }
.bento-main .ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,17,23,.88) 0%, rgba(13,17,23,.15) 50%, rgba(13,17,23,.02) 100%) }
.bento-main .bd { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 24px }
.bento-main .cat { display: inline-flex; align-items: center; gap: 5px; background: var(--b6); color: #fff; font-size: 9px; font-weight: 800; padding: 4px 11px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px }
.bento-main h1 { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 8px; letter-spacing: -.3px }
.bento-main p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px }
.bento-main .meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: rgba(255,255,255,.4) }
.bento-main .meta span { display: flex; align-items: center; gap: 4px }
.bento-main .meta iconify-icon { font-size: 12px }

.bento-tr { grid-column: 8/13; grid-row: 1/2; position: relative; border-radius: var(--r2); overflow: hidden; cursor: pointer; min-height: 185px }
.bento-tr img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.25,.46,.45,.94) }
.bento-tr:hover img { transform: scale(1.06) }
.bento-tr .ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,17,23,.85) 0%, rgba(13,17,23,.1) 55%, transparent 100%) }
.bento-tr .bd { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px }
.bento-tr .cat { display: inline-block; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--or6); background: rgba(255,255,255,.1); backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 3px; margin-bottom: 7px }
.bento-tr h3 { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

.bento-br1 { grid-column: 8/10; grid-row: 2/3; position: relative; border-radius: var(--r2); overflow: hidden; cursor: pointer; min-height: 185px }
.bento-br2 { grid-column: 10/13; grid-row: 2/3; position: relative; border-radius: var(--r2); overflow: hidden; cursor: pointer; min-height: 185px }
.bento-br1 img, .bento-br2 img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s }
.bento-br1:hover img, .bento-br2:hover img { transform: scale(1.06) }
.bento-br1 .ov, .bento-br2 .ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,17,23,.85) 0%, rgba(13,17,23,.1) 60%, transparent 100%) }
.bento-br1 .bd, .bento-br2 .bd { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px }
.bento-br1 .cat, .bento-br2 .cat { display: inline-block; font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 5px }
.bento-br1 .cat { color: var(--em6) }
.bento-br2 .cat { color: #d97706 }
.bento-br1 h3, .bento-br2 h3 { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

.bento-strip { grid-column: 1/13; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px }
.bento-mini { display: flex; gap: 12px; padding: 14px 16px; background: var(--t1); border: 1px solid var(--t3); border-radius: var(--rl); cursor: pointer; transition: all .25s; align-items: center }
.bento-mini:hover { background: var(--t2); border-color: var(--t4); box-shadow: var(--sm); transform: translateY(-2px) }
.bento-mini:hover .bm-t { color: var(--b5) }
.bm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.bento-mini:nth-child(1) .bm-dot { background: var(--b6) }
.bento-mini:nth-child(2) .bm-dot { background: var(--i6) }
.bento-mini:nth-child(3) .bm-dot { background: var(--v6) }
.bento-mini:nth-child(4) .bm-dot { background: var(--ro6) }
.bm-t { font-size: 12px; font-weight: 600; color: var(--t9); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s }
.bm-m { font-size: 9.5px; color: var(--t5); margin-top: 4px; display: flex; gap: 8px }
.bm-m span { display: flex; align-items: center; gap: 2px }

/* ═══ Card Grid (Terbaru) ═══ */
.cg { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 34px }
.cd { background: var(--t1); border: 1px solid var(--t2); border-radius: var(--rl); overflow: hidden; transition: all .3s cubic-bezier(.25,.46,.45,.94); cursor: pointer }
.cd:hover { box-shadow: var(--sl); transform: translateY(-4px); border-color: var(--t4) }
.cd .iw { position: relative; overflow: hidden }
.cd .iw img { width: 100%; height: 175px; object-fit: cover; transition: transform .5s }
.cd:hover .iw img { transform: scale(1.06) }
.cd .iw::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, rgba(22,27,34,.6)); pointer-events: none }
.cd .cb { position: absolute; top: 10px; left: 10px; background: rgba(13,17,23,.85); backdrop-filter: blur(6px); color: #fff; font-size: 8.5px; font-weight: 700; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: .7px }
.cd .bdy { padding: 16px }
.cd h3 { font-size: 14px; font-weight: 700; color: var(--t9); line-height: 1.4; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s }
.cd:hover h3 { color: var(--b5) }
.cd .ex { font-size: 12px; color: var(--t5); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px }
.cd .ft { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--t2) }
.cd .au { display: flex; align-items: center; gap: 7px }
.cd .au img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover }
.cd .au span { font-size: 11px; font-weight: 600; color: var(--t7) }
.cd .tm { font-size: 10.5px; color: var(--t5); display: flex; align-items: center; gap: 3px }
.cd .tm iconify-icon { font-size: 11px }

/* ═══ Politik Layout ═══ */
.pl { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-bottom: 34px }
.pf { position: relative; border-radius: var(--r2); overflow: hidden; cursor: pointer; min-height: 360px }
.pf img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s }
.pf:hover img { transform: scale(1.05) }
.pf .ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.2) 55%, transparent 100%) }
.pf .bd { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px }
.pf .bd h3 { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 8px }
.pf .bd p { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px }
.pf .hm { display: flex; gap: 10px; font-size: 10.5px; color: rgba(255,255,255,.4) }
.pf .hm span { display: flex; align-items: center; gap: 3px }
.pls { display: flex; flex-direction: column }
.pli { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--t2); cursor: pointer; transition: all .15s }
.pli:first-child { padding-top: 0 }
.pli:last-child { border-bottom: none }
.pli:hover h4 { color: var(--b5) }
.pli:hover img { box-shadow: var(--sm) }
.pli img { width: 110px; height: 80px; object-fit: cover; border-radius: var(--rs); flex-shrink: 0; transition: all .3s }
.pli .pc { flex: 1; display: flex; flex-direction: column; justify-content: center }
.pli .pca { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--b5); margin-bottom: 4px }
.pli h4 { font-size: 13px; font-weight: 700; color: var(--t9); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s }
.pli .pm { font-size: 10px; color: var(--t5); margin-top: 5px; display: flex; gap: 8px }
.pli .pm span { display: flex; align-items: center; gap: 3px }

/* ═══ Teknologi Layout ═══ */
.tl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 34px }
.tb { position: relative; border-radius: var(--r2); overflow: hidden; cursor: pointer; min-height: 320px }
.tb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s }
.tb:hover img { transform: scale(1.05) }
.tb .ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,17,23,.9) 0%, rgba(13,17,23,.1) 50%, transparent 100%) }
.tb .bd { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px }
.tb .bd h3 { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 6px }
.tb .bd p { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.tst { display: flex; flex-direction: column; gap: 14px }
.tsi { display: flex; gap: 14px; padding: 14px; background: var(--t1); border: 1px solid var(--t2); border-radius: var(--rl); cursor: pointer; transition: all .25s }
.tsi:hover { background: var(--t2); box-shadow: var(--sm); border-color: var(--t4) }
.tsi:hover h4 { color: var(--v6) }
.tsi img { width: 100px; height: 80px; object-fit: cover; border-radius: var(--rs); flex-shrink: 0 }
.tsi .tc { flex: 1; display: flex; flex-direction: column; justify-content: center }
.tsi .tca { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--cy6); margin-bottom: 4px }
.tsi h4 { font-size: 12.5px; font-weight: 700; color: var(--t9); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s }
.tsi .tcm { font-size: 10px; color: var(--t5); margin-top: 5px }

/* ═══ Olahraga Grid ═══ */
.sr { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 34px }
.sc { position: relative; border-radius: var(--rl); overflow: hidden; cursor: pointer; aspect-ratio: 4/5 }
.sc img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s }
.sc:hover img { transform: scale(1.08) }
.sc .ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,17,23,.92) 0%, rgba(13,17,23,.1) 45%, transparent 100%) }
.sc .bd { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px }
.sc .sca { display: inline-block; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--or6); margin-bottom: 6px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); padding: 2px 8px; border-radius: 3px }
.sc h3 { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sc .scm { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 8px; display: flex; gap: 8px }
.sc .scm span { display: flex; align-items: center; gap: 3px }

/* ═══ Lifestyle Zigzag ═══ */
.zg { margin-bottom: 34px }
.zi { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--t2); cursor: pointer; transition: all .15s }
.zi:first-child { padding-top: 0 }
.zi:last-child { border-bottom: none }
.zi:hover .zti { color: var(--ro6) }
.zi:hover img { box-shadow: var(--sl) }
.zi.rev { grid-template-columns: 1fr 280px }
.zi.rev img { order: 2 }
.zi img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--rl); transition: all .4s }
.zi .zc { display: flex; flex-direction: column; justify-content: center }
.zi .zca { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--ro6); margin-bottom: 6px; display: flex; align-items: center; gap: 4px }
.zi .zca iconify-icon { font-size: 11px }
.zi .zti { font-size: 17px; font-weight: 700; color: var(--t9); line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s }
.zi .zex { font-size: 13px; color: var(--t5); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px }
.zi .zm { font-size: 11px; color: var(--t5); display: flex; gap: 12px }
.zi .zm span { display: flex; align-items: center; gap: 4px }
.zi .zm iconify-icon { font-size: 12px }

/* ═══ Pendidikan Numbered ═══ */
.el { margin-bottom: 34px }
.ei { display: flex; gap: 18px; padding: 18px 20px; border: 1px solid var(--t2); border-radius: var(--rl); margin-bottom: 10px; cursor: pointer; transition: all .25s; background: var(--t1) }
.ei:last-child { margin-bottom: 0 }
.ei:hover { border-color: var(--cy6); background: rgba(88,166,255,.06); box-shadow: var(--sx) }
.ei:hover .et { color: var(--cy6) }
.en { font-family: 'Oswald', sans-serif; font-size: 32px; font-weight: 800; color: var(--t3); line-height: 1; min-width: 40px; transition: color .25s }
.ei:hover .en { color: var(--b4) }
.ec { flex: 1; display: flex; flex-direction: column; justify-content: center }
.eca { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--cy6); margin-bottom: 4px; display: flex; align-items: center; gap: 4px }
.eca iconify-icon { font-size: 10px }
.et { font-size: 14.5px; font-weight: 700; color: var(--t9); line-height: 1.4; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s }
.eex { font-size: 12px; color: var(--t5); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.em { font-size: 10px; color: var(--t5); margin-top: 6px; display: flex; gap: 10px }
.em span { display: flex; align-items: center; gap: 3px }

/* ═══ Responsive ═══ */
@media (max-width: 1100px) {
    .cg { grid-template-columns: 1fr 1fr }
}
@media (max-width: 900px) {
    .pl { grid-template-columns: 1fr }
    .pf { min-height: 280px }
    .tl { grid-template-columns: 1fr }
    .tb { min-height: 280px }
    .sr { grid-template-columns: repeat(2, 1fr) }
    .zi, .zi.rev { grid-template-columns: 1fr }
    .zi.rev img { order: 0 }
    .zi img { height: 180px }
}
@media (max-width: 768px) {
    .bento { grid-template-columns: 1fr; grid-template-rows: auto }
    .bento-main { grid-column: 1/-1; grid-row: auto; min-height: 260px }
    .bento-main h1 { font-size: 20px }
    .bento-tr { grid-column: 1/-1; grid-row: auto; min-height: 180px }
    .bento-br1, .bento-br2 { grid-column: 1/-1; grid-row: auto; min-height: 160px }
    .bento-strip { grid-column: 1/-1; grid-template-columns: 1fr }
    .cg { grid-template-columns: 1fr }
    .trend { flex-direction: column; align-items: flex-start; gap: 8px }
    .trend-i { width: 100% }
}
@media (max-width: 480px) {
    .sr { grid-template-columns: 1fr }
    .sc { aspect-ratio: 16/9 }
}