/* =============================================================
   Central Cat's — assets/css/main.css  (shared base, percobaan TAHAP 3-B)
   HANYA rule identik di 7/7 halaman. @media dibiarkan inline per halaman dulu.
   Dipakai oleh: karir.html, kerjasama.html (percobaan).
============================================================= */
:root{--primary:#1e3a8a;--accent:#d4af37;--light:#f3f4f6;--text:#111;--drawer-w:50%;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
html{scroll-behavior:smooth;}
.header-inner{width:100%;max-width:1200px;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;}
.logo-area{display:flex;align-items:center;}
.logo-link{display:flex;align-items:center;background:white;padding:0 4px;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.10);}
.logo-link:hover .logo-img{transform:scale(1.06);filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}
nav.desktop-nav{display:flex;align-items:center;}
.mobile-nav{display:none;z-index:1500;}
.hamburger{display:none;}
nav a{color:white;text-decoration:none;margin-left:20px;font-weight:500;transition:.3s ease;position:relative;font-size:12px;padding:6px 0;display:flex;align-items:center;}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .25s ease;border-radius:2px;}
nav a.active::after{width:100%;}
nav a:hover::after{width:100%;}
nav a:hover{color:var(--accent);}
.nav-item{position:relative;}
.nav-dropdown a{color:#111;margin:0;padding:10px 14px;font-size:12px;}
.nav-dropdown a:hover{background:#f3f4f6;color:var(--primary);}
.nav-item:hover .nav-dropdown{display:flex;}
.footer-container{max-width:1100px;width:100%;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:60px;align-items:flex-start;}
.footer-brand .logo-link{display:inline-flex;width:fit-content;padding:6px 10px;}
.footer-brand .logo-img{height:46px;width:auto;}
.footer-social{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;align-items:center;max-width:440px;padding-left:6px;}
.footer-social-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#fff;text-decoration:none;white-space:nowrap;}
.footer-social-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.footer-social-item:hover .footer-social-icon{background:var(--accent);box-shadow:0 0 10px rgba(212,175,55,.55);}
.footer-social-item:hover{opacity:.8;}
.footer-bottom{text-align:center;margin-top:50px;font-size:10px;opacity:.85;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;}
/* footer kontak: 4 class ekstrak dari inline footer (nilai copy byte). Hanya elemen footer; ikon FAQ emas TETAP inline (varian beda). */
.footer-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;}
.footer-divider{border:none;border-top:1px solid rgba(255,255,255,.25);margin:10px 0 10px 46px;}
.footer-label{font-size:13px;opacity:.85;}
.footer-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.footer-contact svg{transition:transform .2s ease;}
.footer-contact div:hover svg{transform:scale(1.15);}
.faq-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:2000;backdrop-filter:blur(3px);}
.faq-overlay.show{display:block;}
.faq-popup.show{display:flex;}
@keyframes popUp{from{opacity:0;transform:translateY(20px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.faq-popup-header{background:linear-gradient(135deg,#1e3a8a,#1e5fa8);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.faq-chat-agent{display:flex;align-items:center;gap:10px;}
.faq-agent-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid rgba(255,255,255,.4);}
.faq-agent-name{color:#fff;font-size:13px;font-weight:700;}
.faq-agent-status{color:rgba(255,255,255,.75);font-size:11px;margin-top:1px;}
.faq-popup-close{background:rgba(255,255,255,.15);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:white;font-size:14px;transition:background .2s;}
.faq-popup-close:hover{background:rgba(255,255,255,.3);}
.faq-date-divider{text-align:center;margin:4px 0 8px;}
.faq-msg-bot{display:flex;align-items:flex-end;gap:6px;align-self:flex-start;max-width:88%;}
.faq-msg-bot-avatar{width:28px;height:28px;border-radius:50%;background:#1e3a8a;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-bottom:2px;}
.faq-bubble-bot a{color:#1e3a8a;font-weight:600;text-decoration:none;}
.faq-bubble-bot strong{color:#1e3a8a;}
.faq-bubble-time{font-size:10px;color:#8696a0;text-align:right;margin-top:3px;}
.faq-msg-user{display:flex;justify-content:flex-end;align-self:flex-end;max-width:88%;}
.faq-typing span{width:7px;height:7px;border-radius:50%;background:#90a4ae;animation:typing 1.2s infinite;}
.faq-typing span:nth-child(2){animation-delay:.2s;}
.faq-typing span:nth-child(3){animation-delay:.4s;}
@keyframes typing{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}
.faq-quick-replies{background:white;padding:10px 10px 12px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #e5e7eb;flex-shrink:0;}
.faq-chip{background:#f0f4ff;border:1px solid #c7d2fe;color:#1e3a8a;padding:7px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .2s ease;white-space:nowrap;}
.faq-chip:hover{background:#1e3a8a;color:white;border-color:#1e3a8a;transform:translateY(-1px);}
/* FAQ top-level (diangkat dari inline index = sumber tunggal 7/7; @media tetap inline per halaman) */
.faq-popup{display:none;position:fixed;bottom:28px;right:28px;width:360px;height:520px;background:#ece5dd;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.22);z-index:2100;flex-direction:column;overflow:hidden;animation:popUp .3s cubic-bezier(.34,1.56,.64,1);}
.faq-chat-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:6px;background:#dfe7ec url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8d5da' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.faq-chat-body::-webkit-scrollbar{width:4px;}
.faq-chat-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}
.faq-date-divider span{background:rgba(225,245,254,.85);color:#546e7a;font-size:11px;padding:3px 10px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.08);}
.faq-bubble-bot{background:white;color:#111;padding:8px 12px;border-radius:0 12px 12px 12px;font-size:13px;line-height:1.6;box-shadow:0 1px 3px rgba(0,0,0,.1);position:relative;}
.faq-bubble-bot::before{content:"";position:absolute;left:-6px;top:0;border-top:6px solid white;border-left:6px solid transparent;}
.faq-bubble-bot a:hover{text-decoration:underline;}
.faq-bubble-user{background:#d9fdd3;color:#111;padding:8px 12px;border-radius:12px 0 12px 12px;font-size:13px;line-height:1.6;box-shadow:0 1px 3px rgba(0,0,0,.1);position:relative;}
.faq-bubble-user::after{content:"";position:absolute;right:-6px;top:0;border-top:6px solid #d9fdd3;border-right:6px solid transparent;}
.faq-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:white;border-radius:0 12px 12px 12px;width:fit-content;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.faq-chip:active{transform:translateY(0);}
#faqTrigger:hover > div:first-child{background:rgba(212,175,55,.4) !important;}
/* entrance animation: fade + slide-up. opacity:0 di-scope ke .js (di-set main.js) -> tanpa JS konten tampil normal (no LCP/SEO risk). Hanya transform+opacity -> no CLS. Tambah class "fade-section" ke elemen BELOW-FOLD; JANGAN ke hero/h1 (LCP). */
.js .fade-section{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease;}
.js .fade-section.show{opacity:1;transform:none;}
/* mobile drawer overlay (di-toggle main.js bersama .mobile-nav.open). top:68px = di bawah header mobile; z-index 990 < header(1000); right:var(--drawer-w) = overlay hanya di area halaman, drawer bebas. */
.mobile-overlay{position:fixed;top:68px;left:0;right:var(--drawer-w);bottom:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .35s ease;z-index:990;}
.mobile-overlay.show{opacity:1;visibility:visible;}