/* =====================================================
   GBAK — enhance.css (dimuat PALING AKHIR di semua halaman)
   Isi: fix layer, kartu baru, struktur organisasi, doodles, animasi
   ===================================================== */
:root { --ease: cubic-bezier(.22, .9, .24, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); }

/* ---------- 1. FIX: search & dropdown tidak lagi tertutup ---------- */
.hero-home { position: relative; z-index: 20; }
.search { position: relative; z-index: 50; }
.search-results { z-index: 60; }
.tab-buttons { position: relative; z-index: 50; }
.tab-dropdown { z-index: 55; }
.dropdown-menu { z-index: 70; transform-origin: top left; }

/* ---------- 2. Animasi halus (hanya transform & opacity) ---------- */
.category-card, .document-card, .info-card, .komisi-box, .org-node, .tab-button, .hero-button, .go {
    transition: transform .55s var(--ease), box-shadow .45s var(--ease-soft), border-color .4s var(--ease-soft), background .4s var(--ease-soft), opacity .5s var(--ease-soft);
}
.fx { opacity: 0; transform: translateY(26px) scale(.98); }
.fx.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -16px; rotate: 8deg; } }
@keyframes spin-slow { to { rotate: 360deg; } }
@keyframes flow { to { background-position: 0 -40px; } }
@keyframes sheen { to { transform: translateX(260%) skewX(-18deg); } }

/* ---------- 3. Doodles latar ---------- */
.doodles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dd { position: absolute; color: var(--gold); opacity: .34; will-change: transform; }
.dd svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: drift var(--t, 9s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.dd.ink { color: var(--ink); opacity: .1; }
.dd.fill svg { fill: currentColor; stroke: none; }
.dd.spin svg { animation: spin-slow 40s linear infinite; }

/* ---------- 4. Kartu beranda (kategori + dokumen) ---------- */
.category-card { counter-increment: cc; overflow: hidden; isolation: isolate; border-radius: 30px; }
.category-grid { counter-reset: cc; }
.category-card::after {
    content: "0" counter(cc); position: absolute; right: 22px; top: 8px; z-index: -1;
    font-size: 96px; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: currentColor; opacity: .06;
    transition: transform .7s var(--ease), opacity .4s;
}
.category-card:hover::after { transform: translate(-8px, 6px) scale(1.08); opacity: .11; }
.category-card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.category-card .card-icon { transition: transform .6s var(--ease); }
.category-card:hover .card-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.category-card:not(.is-dark)::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(244, 207, 90, .34), transparent 48%); }
.category-card:hover .card-icon::after, .card-icon { position: relative; overflow: hidden; }
.card-icon::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: rgba(255, 255, 255, .55); transform: skewX(-18deg); }
.category-card:hover .card-icon::after { animation: sheen .9s var(--ease) 1; }

.document-card { overflow: hidden; isolation: isolate; }
.document-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(244, 207, 90, .34), transparent 55%);
}
.document-card::after { content: "↗"; position: absolute; right: 22px; top: 20px; font-size: 18px; font-weight: 800; color: var(--gold-deep); opacity: 0; transform: translate(-6px, 6px); transition: .5s var(--ease); }
.document-card:hover { transform: translateY(-8px) rotate(-.4deg); border-color: rgba(214, 163, 25, .6); box-shadow: var(--sh-2); }
.document-card:hover::before { opacity: 1; }
.document-card:hover::after { opacity: 1; transform: none; }
.document-card:hover .doc-icon { transform: scale(1.1) rotate(-6deg); background: var(--grad-gold); color: var(--ink); }
.doc-icon { transition: transform .5s var(--ease), background .4s; }

/* ---------- 5. Kartu Seksi Bidang / Komisi ---------- */
.komisi-grid, .bph-grid { counter-reset: kb; }
.komisi-box {
    counter-increment: kb; isolation: isolate; border-radius: 28px; border-color: rgba(214, 163, 25, .26);
    background: radial-gradient(420px 220px at 100% 0%, rgba(244, 207, 90, .2), transparent 62%), linear-gradient(165deg, #fff 0%, #fffaf0 100%);
}
.komisi-box::before { content: ""; position: absolute; left: 26px; top: 0; width: 56px; height: 5px; border-radius: 0 0 6px 6px; background: var(--grad-gold); z-index: 3; transition: width .6s var(--ease); }
.komisi-box::after {
    content: counter(kb, decimal-leading-zero); position: absolute; right: 18px; bottom: -14px; z-index: -1;
    font-size: 150px; font-weight: 800; letter-spacing: -.07em; line-height: 1; color: var(--gold); opacity: .09; transition: transform .8s var(--ease), opacity .4s;
}
.komisi-box:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: rgba(214, 163, 25, .6); }
.komisi-box:hover::before { width: calc(100% - 52px); }
.komisi-box:hover::after { transform: translate(-10px, -8px) rotate(-4deg); opacity: .15; }
.komisi-box h3 { background: rgba(255, 255, 255, .72); }
.komisi-box p {
    position: relative; margin: 20px 22px; padding: 22px 20px 22px 60px; border-radius: 18px; font-size: 14px; line-height: 1.6; color: var(--mute);
    border: 1.5px dashed rgba(214, 163, 25, .45); background: rgba(255, 250, 240, .7);
}
.komisi-box p::before {
    content: "✎"; position: absolute; left: 18px; top: 20px; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 10px; font-size: 15px; color: var(--ink); background: var(--grad-gold);
}

/* ---------- 6. Struktur organisasi ---------- */
.org-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 0 auto 34px; }
.org-search { position: relative; width: min(100%, 320px); }
.org-search input { width: 100%; padding: 13px 18px 13px 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; box-shadow: var(--sh-1); outline: none; transition: .3s var(--ease-soft); }
.org-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(214, 163, 25, .18), var(--sh-1); }
.org-search::before { content: "⌕"; position: absolute; left: 17px; top: 50%; translate: 0 -52%; font-size: 20px; color: var(--gold-deep); }
.org-btn { padding: 12px 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 13px var(--font); cursor: pointer; box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6); transition: transform .35s var(--ease), filter .3s; }
.org-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.org-hint { text-align: center; min-height: 26px; margin-bottom: 20px; font-size: 13.5px; font-weight: 600; color: var(--gold-deep); transition: opacity .4s; }

.org-node { position: relative; cursor: pointer; border-radius: 18px; background: linear-gradient(180deg, #fff, #fffaf0); border: 1px solid rgba(214, 163, 25, .3); user-select: none; }
.org-node.dark { background: linear-gradient(160deg, #2d281d, #0d0c0a); border-color: #0d0c0a; box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.org-node.dark::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 40%, rgba(244, 207, 90, .25), transparent 60%); background-size: 250% 100%; opacity: 0; transition: opacity .4s; }
.org-node:hover { transform: translateY(-3px) scale(1.03); border-color: var(--gold); }
.org-node.dark:hover::after { opacity: 1; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.org-line { background: repeating-linear-gradient(0deg, var(--gold) 0 8px, var(--gold-hi) 8px 14px); background-size: 100% 40px; animation: flow 1.6s linear infinite; }
.org-label { letter-spacing: .18em; }

.org.has-focus .org-node, .org.has-focus .org-seksi { opacity: .22; filter: saturate(.4); }
.org.has-focus .org-node.hit, .org.has-focus .org-node.chain, .org.has-focus .org-seksi.hit { opacity: 1; filter: none; }
.org-node.chain { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214, 163, 25, .22), var(--sh-2); }
.org-node.hit { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(214, 163, 25, .35), var(--sh-2); }

.org-seksi { border-radius: 20px; padding: 8px; background: rgba(255, 250, 240, .8); border: 1px solid rgba(214, 163, 25, .25); transition: opacity .5s, filter .5s, box-shadow .4s; }
.org-seksi h4 { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 14px; padding: 10px 14px; cursor: pointer; background: linear-gradient(160deg, #2d281d, #0d0c0a); transition: transform .35s var(--ease); }
.org-seksi h4::after { content: "+"; color: var(--gold-hi); font-size: 17px; transition: transform .4s var(--ease); }
.org-seksi.open h4::after { transform: rotate(135deg); }
.org-seksi h4:hover { transform: translateY(-2px); }
.org-members { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.org-seksi.open .org-members { grid-template-rows: 1fr; }
.org-members > div { overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.org-seksi.open .org-members > div { padding-top: 8px; }

/* ---------- 6b. Kartu Ketentuan Umum (gelap) + layout baru ---------- */
.komisi-umum, .bph-umum { counter-increment: none; color: #fff; border-color: transparent; background: radial-gradient(420px 220px at 100% 0%, rgba(244, 207, 90, .3), transparent 65%), linear-gradient(160deg, #26221a, #0d0c0a); }
.komisi-umum h3, .bph-umum h3 { color: #fff; background: rgba(20, 18, 14, .85); border-color: rgba(255, 255, 255, .1); }
.komisi-umum p, .bph-umum p { color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .05); border-color: rgba(244, 207, 90, .45); padding-left: 22px; }
.komisi-umum p::before, .bph-umum p::before, .komisi-umum::after, .bph-umum::after { content: none; }
.bph-ketua-wakil { grid-column: 1 / -1; grid-row-start: 2; height: 480px; }
.komisi-box h4.sub { margin: 20px 26px -6px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.box-lebar { grid-column: 1 / -1; height: auto; }
.seksi-box { counter-increment: sb; height: auto; }
.seksi-box::after { content: counter(sb, decimal-leading-zero); }
.komisi-grid { counter-reset: kb sb; }
.seksi-box .workflow-table td:nth-child(2) { font-weight: 700; }
.tbl-tools:has(+ [data-nosearch]) { display: none; }
@media (max-width: 960px) { .bph-ketua-wakil, .box-lebar { grid-column: auto; grid-row-start: auto; height: auto; max-height: 540px; } }

/* ---------- 7. Template etika chat: teks terbaca jelas ---------- */
.tpl p, .tpl #tpl, .rule-box .tpl p { color: #fff7dc !important; font-weight: 500; text-shadow: none; }
.tpl { background: radial-gradient(420px 200px at 100% 0%, rgba(244, 207, 90, .22), transparent 60%), linear-gradient(160deg, #2d281d, #0d0c0a) !important; }

/* ---------- 8. Aksesibilitas gerak ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx { opacity: 1; transform: none; }
    .dd svg, .org-line, .org-node::after { animation: none !important; }
}
@media (max-width: 680px) { .dd:nth-child(n+9) { display: none; } .komisi-box::after { font-size: 110px; } }

/* ---------- 9. Etika chat: panel info visual ---------- */
.case-info h3 { font-size: 24px; line-height: 1.3; margin: 16px 0 0; }
.case-info .badge { animation: pop .6s var(--ease) both; }
.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.ptiles li {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 20px; border-radius: 24px;
    background: linear-gradient(165deg, #fff, var(--tint)); border: 1px solid var(--edge); box-shadow: var(--sh-1);
    animation: rise-in .7s var(--ease) both; animation-delay: calc(var(--i) * .09s + .1s);
    transition: transform .5s var(--ease), box-shadow .4s var(--ease-soft);
}
.ptiles li:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--sh-2); }
.ptiles.bad { --tint: #fff1f0; --edge: #ffd3cf; --c1: #ff9a8f; --c2: #e5484d; }
.ptiles.ok { --tint: #effbf2; --edge: #c6ecd1; --c1: #6ee79a; --c2: #1f9d55; }
.pt-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .55), 0 12px 18px -10px var(--c2); transition: transform .6s var(--ease); }
.ptiles li:hover .pt-ic { transform: rotate(-10deg) scale(1.1); }
.pt-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ptiles b { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ptiles li, .case-info .badge { animation: none; } }

/* ---------- 10. Kartu kategori homepage: setara + identitas doodle ---------- */
.category-card::after { content: none; }
@media (min-width: 961px) {
    .category-card:nth-child(1), .category-card:nth-child(2) { grid-column: span 3; }
    .category-card:nth-child(3) { grid-column: span 4; }
    .category-card:nth-child(4) { grid-column: span 2; }
}
.category-card { --d1: #d6a319; --d2: rgba(18, 17, 16, .32); }
.category-card.is-dark { --d1: #f4cf5a; --d2: rgba(255, 255, 255, .5); }
.category-card.is-dark:nth-child(2) { background: radial-gradient(480px 260px at 0% 0%, rgba(244, 207, 90, .4), transparent 65%), linear-gradient(210deg, #26221a, #0d0c0a); }
.category-card p { max-width: min(46ch, 62%); }
.category-card h3 { max-width: 62%; }
.card-art { position: absolute; right: 24px; top: 50%; translate: 0 -50%; width: clamp(96px, 30%, 180px); aspect-ratio: 200 / 160; z-index: -1; pointer-events: none; transition: rotate .7s var(--ease), scale .7s var(--ease); }
.card-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-width: 2.4; animation: drift 10s ease-in-out infinite; }
.card-art .a { stroke: var(--d1); }
.card-art .b { stroke: var(--d2); }
.card-art .f { fill: var(--d1); stroke: none; }
.card-art .ring { stroke-dasharray: 3 8; transform-origin: 100px 80px; animation: spin-slow 50s linear infinite; }
.card-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 50px; line-height: 1; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25)); animation: drift 7s ease-in-out infinite; }
.category-card:nth-child(n+3) .card-emoji { font-size: 44px; }
.category-card:hover .card-art { rotate: -4deg; scale: 1.07; }
.category-card:hover .card-art .dr { animation: draw .9s var(--ease) both; }
@keyframes draw { from { stroke-dasharray: 0 1.02; } to { stroke-dasharray: 1.02 0; } }
.category-card:nth-child(4) .card-icon { background: linear-gradient(145deg, #f3eee2, #e4dac3); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8), 0 8px 14px -8px rgba(120, 100, 40, .4); }
@media (prefers-reduced-motion: reduce) { .card-art svg, .card-emoji, .card-art .ring { animation: none; } }

/* ===================== RESPONSIVE HP ===================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* cegah browser HP membesarkan teks sendiri */
html, body { overflow-x: clip; }                                     /* cegah halaman goyang ke samping */

@media (max-width: 680px) {          /* semua aturan di dalam { } hanya berlaku kalau layar <= 680px */
    :root { --wrap: calc(100% - 32px); }                             /* jarak kiri-kanan jadi 16px */

    /* --- Navbar: 1 baris tipis --- */
    .navbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; top: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; }
    .logo h2 { font-size: 0; gap: 0; }                               /* sembunyikan teks logo yang panjang */
    .logo h2::before { width: 26px; height: 26px; border-radius: 9px; }
    .logo h2::after { content: "GBAK"; margin-left: 8px; font-size: 14px; }   /* diganti singkatan */
    .nav-menu { min-width: 0; flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; }
    .nav-menu::-webkit-scrollbar { display: none; }
    .nav-menu a { flex: none; padding: 8px 10px; font-size: 12.5px; }

    /* --- Hero --- */
    .hero { margin-top: 12px; padding: 26px 20px 24px; border-radius: 24px; }
    .hero h1 { font-size: clamp(32px, 10.5vw, 42px); line-height: 1.05; }
    .hero-description { font-size: 14.5px; line-height: 1.6; }
    .hero-button { padding: 11px 18px; font-size: 13.5px; }
    .hero::before { width: 96px; right: -26px; opacity: .45; }       /* bola emas lebih kecil */
    .hero-home .scene { height: 270px; }
    .hero-home .stack { scale: .82; }

    /* --- Jarak antar bagian & kartu --- */
    .guide-section { padding-top: 34px; }
    .category-grid, .document-grid, .info-grid, .workflow-grid { gap: 12px; }
    .category-card:nth-child(n) { min-height: 0; padding: 20px 18px 18px; border-radius: 24px; }
    .category-card h3 { max-width: 100%; font-size: 20px; }
    .category-card p { max-width: 100%; margin-bottom: 14px; font-size: 13.5px; }
    .category-card .card-icon { width: 46px; height: 46px; border-radius: 15px; margin-bottom: 14px; }
    .card-art { top: 16px; right: 14px; translate: none; width: 84px; }      /* doodle pindah ke pojok kanan atas */
    .card-emoji, .category-card:nth-child(n+3) .card-emoji { font-size: 32px; }
    .document-card, .info-card { min-height: 0; padding: 18px; border-radius: 20px; }

    /* --- Kotak isi: tinggi mengikuti isi, tidak ada scroll di dalam --- */
    .komisi-box, .komisi-grid .komisi-umum, .bph-umum, .bph-ketua-wakil, .box-lebar, .seksi-box, .box-tengah {
        height: auto !important; max-height: none !important; overflow: hidden; border-radius: 22px;
    }
    .komisi-box h3 { position: static; padding: 16px 18px; font-size: 16px; }
    .komisi-box p { margin: 14px; padding: 16px 14px 16px 52px; font-size: 13.5px; }
    .komisi-umum p, .bph-umum p { padding-left: 16px; }
    .komisi-box p::before { left: 12px; top: 14px; width: 28px; height: 28px; }
    .komisi-box::after { right: 10px; bottom: -8px; font-size: 84px; }
    .komisi-box h4.sub { margin: 14px 18px -4px; }
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .workflow-table th, .workflow-table td { padding: 10px; font-size: 13px; }
    .workflow-table ul { margin: 0; padding-left: 16px; }

    /* --- Struktur organisasi: tersusun ke bawah, tanpa scroll samping --- */
    .org { overflow: visible; align-items: stretch; }
    .org-row { flex-wrap: wrap; gap: 8px; }
    .org-row > .org-node { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .org-node { min-width: 0; padding: 9px 12px; font-size: 13px; border-radius: 14px; }
    .org-core { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
    .org-mid { order: -1; }                                          /* Ketua & Wakil tampil duluan */
    .org-side { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .org-seksi { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .org > .org-node { align-self: center; }

    /* --- Etika chat: layar HP tidak melar lagi --- */
    .chat-layout { gap: 22px; }
    .phone-wrap { width: min(340px, 100%); }
    .phone { width: 100% !important; height: auto !important; aspect-ratio: 340 / 640; }   /* kunci perbandingan lebar:tinggi */
    .case-info { max-width: 100%; }
    .case-info h3 { font-size: 21px; }

    footer { padding: 30px 20px; border-radius: 24px; }
}

@media (max-width: 400px) {          /* HP kecil */
    .nav-menu a { padding: 8px 7px; font-size: 12px; }
    .ptiles { grid-template-columns: 1fr; gap: 10px; }
    .ptiles li { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; }
    .card-art { width: 72px; }
}