/* ============================================================ Portal DPRD Toraja Utara — Stylesheet (Simulasi/Mockup) Palet : Pine #0A3C43 · Teal teduh #2E7D6B · Emas kusam #C5A059 · Krem #F5F5F2 · Teks #23302C Font : Lato (body) + Playfair Display (judul) ============================================================ */ :root{ --pine:#0A3C43; /* utama: header, hero, footer — Deep Teal */ --pine-deep:#072d33; /* lebih gelap untuk gradien */ --teal:#2E7D6B; /* aksen interaktif */ --teal-dark:#246257; --gold:#C5A059; /* emas redup (muted gold), dipakai hemat */ --gold-soft:#d8be8f; --paper:#F5F5F2; /* latar halaman, krem netral */ --paper-2:#ECECE6; /* surface lembut */ --line:#dcdcd4; /* garis tepi */ --ink:#23302C; /* teks utama */ --muted:#6c7975; /* teks sekunder */ --white:#ffffff; /* alias kompatibilitas dengan kelas lama */ --navy:var(--pine); --navy-2:var(--pine-deep); --yellow:var(--gold); --mint:var(--teal); /* ── Token radius (skala seragam) ── */ --r-sm:10px; /* input, badge, tombol kecil */ --r-md:14px; /* kartu, widget, panel */ --r-lg:18px; /* hero, panel besar, feature card */ /* ── Token shadow (skala seragam) ── */ --sh-sm:0 2px 12px rgba(31,58,52,.06); /* kartu diam, nav */ --sh-md:0 12px 30px rgba(31,58,52,.13); /* hover kartu */ /* ── Token GLASS (gaya macOS Tahoe — clear/glassy) ── */ --glass-light:rgba(245,245,242,.72); /* panel terang (navbar, dropdown) */ --glass-light-2:rgba(255,255,255,.55); /* kartu terang tembus */ --glass-dark:rgba(31,58,52,.55); /* panel gelap (bottom nav, hero cap) */ --glass-dark-2:rgba(22,48,42,.72); /* lebih pekat */ --glass-blur:blur(16px) saturate(1.4); /* efek kabur utama */ --glass-blur-lg:blur(22px) saturate(1.5); /* untuk modal */ --glass-edge:inset 0 1px 0 rgba(255,255,255,.55); /* sorotan tepi atas */ --glass-border:.5px solid rgba(255,255,255,.18); /* tepi kaca pd gelap */ --glass-border-d:.5px solid rgba(31,58,52,.12); /* tepi kaca pd terang */ --sh-lg:0 16px 40px rgba(31,58,52,.18); /* hero, panel menonjol */ --sh-focus:0 0 0 3px rgba(46,125,107,.13);/* input fokus */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Plus Jakarta Sans',-apple-system,sans-serif; background:var(--paper); color:var(--ink); line-height:1.65; } .wrap{max-width:1200px;margin:0 auto;padding:0 26px} a{color:inherit} /* ---- Demo flag ---- */ .demo-flag{ position:fixed;bottom:18px;right:18px;z-index:999; background:var(--navy);color:var(--yellow); font-size:.72rem;font-weight:700;letter-spacing:.05em; padding:9px 15px;border-radius:999px; box-shadow:0 6px 22px rgba(0,0,0,.3);text-transform:uppercase; } /* ---- Utility bar ---- */ .util{background:var(--pine);color:#a9bdb5;font-size:.79rem} .util .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 26px} .util a{text-decoration:none;margin-left:18px;color:#a9bdb5;transition:color .15s} .util a:hover{color:var(--mint)} /* ikon sosial media di masthead (kanan atas) */ .mast-social{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;position:relative;z-index:2} .mast-social .ms-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);font-weight:700} .mast-social .ms-icons{display:flex;gap:8px} .mast-social .ms-icons a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.1);color:#fff;transition:background .15s,transform .15s} .mast-social .ms-icons a:hover{background:var(--gold);color:var(--pine-deep);transform:translateY(-2px)} .mast-social .ms-icons svg{display:block} @media(max-width:680px){ .mast-social{display:none} } /* ---- Masthead ---- */ .mast{ background:linear-gradient(100deg,var(--pine),var(--pine-deep)); color:#fff;border-bottom:4px solid var(--gold);position:relative;overflow:hidden; } .mast::after{ content:"";position:absolute;right:-60px;top:-40px;width:280px;height:280px; background:radial-gradient(circle,rgba(46,125,107,.28),transparent 70%);pointer-events:none; } /* Motif ukiran Toraja (belah ketupat + titik) — sangat samar, sebagai tekstur latar */ .mast::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cpath d='M0 17 L15 2 L30 17 L15 32 Z M30 17 L45 2 L60 17 L45 32 Z' fill='none' stroke='%23C5A059' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='%23C5A059'/%3E%3Ccircle cx='45' cy='17' r='2.5' fill='%23C5A059'/%3E%3C/svg%3E"); background-repeat:repeat; } /* Pastikan logo + judul tetap di atas motif & glow */ .mast .wrap{position:relative;z-index:1} .mast::after, .mast::before{z-index:0} .mast .wrap{display:flex;align-items:center;gap:20px;padding:20px 26px} .mast img{height:74px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))} .mast-logo-link{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer} .mast .titles h1{font-family:'Fraunces',serif;font-weight:800;font-size:1.62rem;line-height:1.12;letter-spacing:.01em} .mast .titles p{font-size:.82rem;color:var(--gold-soft);letter-spacing:.14em;text-transform:uppercase;margin-top:3px} /* ---- Nav ---- */ nav{background:var(--glass-light);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:var(--glass-border-d);position:sticky;top:0;z-index:60;box-shadow:var(--sh-sm),var(--glass-edge)} .nav-burger{display:none;align-items:center;gap:9px;width:100%;padding:14px 26px;background:none;border:0;border-bottom:1px solid var(--line);font-size:1rem;font-weight:700;color:var(--pine);cursor:pointer;font-family:inherit} .nav-burger .bars{font-size:1.3rem;line-height:1} nav .wrap{display:flex;gap:4px;padding:0 26px} nav a{ font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase; color:var(--ink);text-decoration:none;padding:16px 22px;position:relative;transition:color .15s,background .15s; border-radius:9px 9px 0 0; } nav a:hover{color:var(--teal);background:transparent} nav a.active{color:var(--pine);background:transparent} nav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--pine);border-radius:2px} /* ---- Dropdown Layanan ---- */ .has-drop{position:relative;display:flex;align-items:stretch} .has-drop .drop-toggle{display:flex;align-items:center} .has-drop .caret{font-size:.7rem;margin-left:5px} .has-drop .dropdown{position:absolute;top:100%;left:0;min-width:290px;background:var(--white);border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:70;overflow:hidden} .has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)} .has-drop .dropdown a{display:block;padding:13px 20px;font-size:.82rem;letter-spacing:.03em;text-transform:none;color:var(--ink);background:none;border-radius:0;border-bottom:1px solid var(--paper-2);white-space:nowrap} .has-drop .dropdown a::after{display:none} .has-drop .dropdown a:last-child{border-bottom:0} .has-drop .dropdown a:hover{background:var(--paper);color:var(--teal)} @media(max-width:920px){ .has-drop{display:block} .has-drop .dropdown{position:static;transform:none;box-shadow:none;border:0;min-width:0;border-radius:0;background:var(--paper)} .has-drop .dropdown a{padding-left:40px;white-space:normal} } /* ---- Layout ---- */ .layout{display:grid;grid-template-columns:1fr 330px;gap:40px;padding:44px 26px;max-width:1200px;margin:0 auto;align-items:start} /* ---- Hero ---- */ /* ---- Hero slider (banner bergantian) ---- */ .hero-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:38px;box-shadow:var(--sh-lg)} .hero-slider .slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)} .hero-slider .slide{flex:0 0 100%;line-height:0;display:block} .hero-slider .slide img{width:100%;aspect-ratio:1800/562;height:auto;object-fit:cover;display:block} .slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,26,39,.45);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s;z-index:3} .slider-arrow:hover{background:rgba(0,26,39,.78)} .slider-arrow.prev{left:16px} .slider-arrow.next{right:16px} .slider-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:3} .slider-dots .dot{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;transition:background .2s,width .2s;padding:0} .slider-dots .dot.active{background:#fff;width:26px;border-radius:var(--r-sm)} @media(max-width:560px){ .slider-arrow{width:34px;height:34px;font-size:1.2rem} } /* Ponsel: perkecil masthead (logo + judul) agar tidak makan banyak ruang. */ @media(max-width:600px){ .mast .wrap{gap:13px;padding:13px 18px} .mast img{height:50px} .mast .titles h1{font-size:1.18rem;line-height:1.1} .mast .titles p{font-size:.66rem;letter-spacing:.1em;margin-top:2px} } @media(max-width:380px){ .mast img{height:42px} .mast .titles h1{font-size:1.04rem} .mast .titles p{font-size:.6rem} } /* ---- Section head ---- */ .shead{display:flex;align-items:center;gap:14px;margin-bottom:24px} .shead h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.5rem;color:var(--navy);white-space:nowrap} .shead .line{flex:1;height:2px;background:linear-gradient(90deg,var(--yellow),transparent)} .shead a{font-size:.8rem;font-weight:700;color:var(--teal);text-decoration:none;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} /* ---- News ---- */ .news{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .18s,box-shadow .18s} .card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)} .card .ph{height:172px;background:var(--paper-2) center/cover no-repeat;position:relative} .card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,26,39,.18))} .card .body{padding:18px 21px} .card .date{display:inline-block;font-size:.7rem;color:var(--teal-dark);background:#e8f3ee;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 11px;border-radius:999px} .card h4{font-weight:700;font-size:1.06rem;margin:10px 0 8px;line-height:1.32;color:var(--ink);transition:color .15s;text-transform:capitalize} .card:hover h4{color:var(--teal-dark)} .card p{font-size:.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .card .selengkapnya{display:inline-block;margin-top:9px;font-size:.8rem;font-weight:700;color:var(--teal);letter-spacing:.02em;border-bottom:1.5px solid transparent;transition:border-color .15s} .card:hover .selengkapnya{border-bottom-color:var(--teal)} /* ---- Sidebar ---- */ .side{position:sticky;top:82px;display:flex;flex-direction:column;gap:22px} /* ---- Feature cards (logo Kinawa & Rampo Mo') ---- */ .feature{border-radius:var(--r-lg);overflow:hidden;position:relative;text-decoration:none;display:block;border:1px solid var(--line);transition:transform .18s,box-shadow .18s} .feat-pair{display:flex;flex-direction:column;gap:22px} .feature:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} .feat-logo{padding:8px 24px 18px;display:flex;justify-content:center} .feat-logo img{width:100%;max-width:200px;height:auto;display:block} .feature p{font-size:.96rem;font-weight:700;line-height:1.45;padding:24px 24px 4px;margin:0;text-align:center} .feat-kinawa p{color:#0A3C43} .feat-rampo p{color:#0A3C43} .feature .arr{display:block;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:14px 24px 22px;text-align:center} .feat-kinawa{background:linear-gradient(165deg,#ffffff,#f0f2ee)} .feat-kinawa .arr{color:var(--teal)} .feat-rampo{background:linear-gradient(165deg,#ffffff,#eef1ee)} .feat-rampo .arr{color:var(--teal)} .widget{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .widget h4{font-family:'Fraunces',serif;font-weight:800;font-size:1.15rem;color:var(--navy);margin-bottom:16px} .agenda{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)} .agenda:last-child{border:0;padding-bottom:0} .agenda .d{flex-shrink:0;width:50px;text-align:center;background:var(--paper-2);border-radius:var(--r-sm);padding:7px 0} .agenda .d b{display:block;font-family:'Fraunces',serif;font-size:1.25rem;color:var(--teal);line-height:1} .agenda .d small{font-size:.64rem;text-transform:uppercase;color:var(--muted);letter-spacing:.04em} .agenda .t{font-size:.85rem;font-weight:500;align-self:center} /* ---- Live status widget (Rampo Mo') ---- */ .live-widget{border-left:4px solid var(--teal)} .live-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .live-head h4{margin:0} .live-dot{font-size:.7rem;font-weight:700;color:#c0392b;letter-spacing:.03em;animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .live-title{font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:8px} .live-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:8px} .live-bar{height:7px;background:var(--paper-2);border-radius:var(--r-sm);overflow:hidden;margin-bottom:14px} .live-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--mint));border-radius:var(--r-sm)} .live-link{font-size:.82rem;font-weight:700;color:var(--teal);text-decoration:none;letter-spacing:.02em} .live-link:hover{text-decoration:underline} /* ---- Footer ---- */ /* ===== Footer baru (2 kolom seimbang) ===== */ .ft{background:var(--pine);color:#cdded7;margin-top:34px;position:relative;overflow:hidden} /* Motif ukiran Toraja samar di footer — membingkai situs bersama masthead */ .ft::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cpath d='M0 17 L15 2 L30 17 L15 32 Z M30 17 L45 2 L60 17 L45 32 Z' fill='none' stroke='%23C5A059' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='%23C5A059'/%3E%3Ccircle cx='45' cy='17' r='2.5' fill='%23C5A059'/%3E%3C/svg%3E"); background-repeat:repeat; } .ft-inner,.ft-copy{position:relative;z-index:1} .ft-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:3fr 2fr;gap:0;padding:24px 48px} .ft-col-l{padding-right:48px} .ft-col-r{padding-left:80px} .ft-col h5{color:#fff;font-family:'Fraunces',serif;font-size:1.1rem;margin-bottom:10px} .ft-logo{height:46px;width:auto;margin-bottom:8px;display:block} .ft-brand h5{font-size:1.02rem;margin-bottom:10px;line-height:1.3} .ft-kontak{list-style:none;padding:0;margin:0 0 10px} .ft-kontak li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.45;margin-bottom:7px;color:#cdded7} .ft-kontak a{color:#cdded7;text-decoration:none;transition:color .15s} .ft-kontak a:hover{color:var(--gold)} .ft-ic{flex-shrink:0;opacity:.9} /* Ikon SVG footer (pengganti emoji) — ukuran & warna konsisten */ .ft-ic .fi{width:15px;height:15px;display:block;color:var(--gold-soft)} .ft-kontak .ft-ic{margin-top:2px} .ft-kontak .ft-ic .fi{width:16px;height:16px} .ft-stat .ft-ic .fi{width:15px;height:15px} .ft-sosmed{display:flex;gap:10px;margin-top:12px} .ft-sosmed a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .15s,transform .15s} .ft-sosmed a:hover{background:var(--gold);color:var(--pine-deep);transform:translateY(-2px)} .ft-sosmed svg{width:16px;height:16px} .ft-links{display:flex;flex-direction:column} .ft-links a{color:#cdded7;text-decoration:none;display:block;font-size:.88rem;padding:4px 0;transition:color .15s,padding-left .15s} .ft-links a:last-child{border-bottom:none} .ft-links a:hover{color:var(--gold);padding-left:6px} /* Statistik tampil mendatar (sebaris) agar footer tidak menjulur tinggi */ .ft-stat{margin-top:14px;display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px 12px;align-items:center} .ft-stat div{font-size:.72rem;color:#cdded7;display:flex;gap:5px;align-items:center;white-space:nowrap} .ft-stat .ft-ic .fi{width:13px;height:13px} .ft-stat b{color:#fff;font-weight:700} .ft-copy{text-align:center;padding:12px;font-size:.8rem;color:#9fb3ac} @media(max-width:920px){ .layout{grid-template-columns:1fr} .news{grid-template-columns:1fr} .hero h2{font-size:2rem} .side{position:static} /* Tombol hamburger tampil; menu tersembunyi sampai dibuka */ .nav-burger{display:flex} nav .wrap{flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease} nav .wrap.buka{max-height:2000px} nav .wrap > a, nav .has-drop > a{display:block;width:100%;padding:13px 26px;border-bottom:1px solid var(--line)} /* Submenu accordion: tersembunyi sampai induknya dibuka */ .has-drop .dropdown{max-height:0;overflow:hidden;transition:max-height .3s ease} .has-drop.buka .dropdown{max-height:800px} .ft-inner{grid-template-columns:1fr} } /* ============================================================ Halaman Kinawa — Formulir Aspirasi ============================================================ */ .kinawa-head{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;padding:18px 26px 16px;text-align:center;position:relative;overflow:hidden;border-bottom:4px solid var(--gold)} .kinawa-head::after{content:"";position:absolute;right:-60px;top:-50px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(46,125,107,.35),transparent 70%);pointer-events:none} /* ── Motif ukiran Toraja menyebar penuh di header halaman ── */ .kinawa-head,.berita-head,.lacak-head,.rampo-head{position:relative;overflow:hidden} .kinawa-head::before,.berita-head::before,.lacak-head::before,.rampo-head::before{ content:"";position:absolute;inset:0; pointer-events:none;opacity:.11; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cpath d='M0 17 L15 2 L30 17 L15 32 Z M30 17 L45 2 L60 17 L45 32 Z' fill='none' stroke='%23C5A059' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='%23C5A059'/%3E%3Ccircle cx='45' cy='17' r='2.5' fill='%23C5A059'/%3E%3C/svg%3E"); background-repeat:repeat; } /* Konten header tetap di atas motif */ .kinawa-head>*,.berita-head>*,.lacak-head>*,.rampo-head>*{position:relative;z-index:1} .kinawa-head .kinawa-logo{width:66px;height:auto;margin:0 auto 8px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))} .kinawa-head h2{font-family:'Fraunces',serif;font-weight:800;font-size:1.7rem;color:#fff;margin-bottom:5px} .kinawa-head p{max-width:600px;margin:0 auto;color:#d7e3de;font-size:.92rem} .form-wrap{max-width:760px;margin:36px auto 50px;padding:0 26px} .aspirasi-form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 30px 30px;box-shadow:var(--sh-md)} .fs{border:0;padding:26px 0;border-bottom:1px solid var(--line)} .fs:last-of-type{border-bottom:0} .fs legend{font-family:'Fraunces',serif;font-weight:800;font-size:1.18rem;color:var(--pine);display:flex;align-items:center;gap:11px;margin-bottom:6px} .fs legend .num{width:30px;height:30px;border-radius:50%;background:var(--pine);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;font-weight:700;display:grid;place-items:center;flex-shrink:0} .field{margin-top:18px} .field label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:7px} .field .req{color:#b4632a} .field .opt{color:var(--muted);font-weight:400;font-size:.82rem} .field input,.field select,.field textarea{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:.96rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal);box-shadow:var(--sh-focus);background:#fff} .field textarea{resize:vertical;min-height:110px} .field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#c0492b;box-shadow:0 0 0 3px rgba(192,73,43,.1)} .field .hint{display:block;font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.45} .field .hint .lock{margin-right:3px} .field .err{display:block;font-size:.8rem;color:#c0492b;margin-top:6px;font-weight:700;min-height:0} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;cursor:pointer;border:2px dashed var(--line);border-radius:var(--r-md);padding:26px 20px;background:var(--paper);transition:border-color .15s,background .15s} .upload:hover{border-color:var(--teal);background:#f0f5f3} .upload.has-file{border-color:var(--teal);border-style:solid;background:#eef5f2} .upload .up-icon{font-size:1.6rem} .upload .up-text{font-weight:700;font-size:.9rem;color:var(--ink)} .upload .up-hint{font-size:.78rem;color:var(--muted)} .filename{display:block;margin-top:10px;font-size:.85rem;color:var(--teal);font-weight:700} .upload .up-ico{font-size:1.8rem} .upload .up-sub{font-size:.78rem;color:var(--muted)} .filelist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .filelist li{font-size:.85rem;color:var(--teal-dark);font-weight:700;background:#eef5f2;border:1px solid #d6e7e0;border-radius:var(--r-sm);padding:7px 12px} .form-actions{margin-top:26px;text-align:center} .btn-submit{display:inline-block;background:var(--pine);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.98rem;border:0;border-radius:var(--r-sm);padding:14px 38px;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s} .btn-submit:hover{background:var(--pine-deep);transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,58,52,.25)} .form-note{font-size:.8rem;color:var(--muted);margin-top:14px;max-width:440px;margin-left:auto;margin-right:auto} .btn-outline{display:inline-block;background:transparent;color:var(--pine);font-weight:700;font-size:.98rem;border:1.5px solid var(--pine);border-radius:var(--r-sm);padding:13px 30px;cursor:pointer;text-decoration:none;transition:background .15s} .btn-outline:hover{background:var(--paper-2)} /* Success screen */ .success{padding:54px 26px 70px} .success-inner{max-width:560px;margin:0 auto;text-align:center} .success .check{width:78px;height:78px;border-radius:50%;background:#2E7D6B;color:#fff;font-size:2.6rem;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 10px 28px rgba(46,125,107,.35)} .success h2{font-family:'Fraunces',serif;font-weight:800;font-size:1.8rem;color:var(--pine);margin-bottom:10px} .success>.success-inner>p{color:var(--muted);font-size:.98rem;margin-bottom:26px} .ticket{background:var(--paper-2);border:1px dashed var(--teal);border-radius:var(--r-lg);padding:24px;margin-bottom:26px} .ticket-label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:8px} .ticket-no{display:block;font-family:'Fraunces',serif;font-weight:800;font-size:2rem;color:var(--pine);letter-spacing:.04em;margin-bottom:10px} .ticket-hint{display:block;font-size:.82rem;color:var(--muted);line-height:1.5} .success-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media(max-width:600px){ .grid-2{grid-template-columns:1fr} .aspirasi-form{padding:10px 18px 24px} .kinawa-head{padding:18px 18px 16px} .kinawa-head .kinawa-logo{width:58px;margin-bottom:7px} .kinawa-head h2{font-size:1.25rem} .kinawa-head p{font-size:.8rem} .success-actions{flex-direction:column} } /* ============================================================ Halaman Rampo Mo' — Kehadiran & E-Risalah ============================================================ */ .rampo-head{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;border-bottom:4px solid var(--gold)} .rampo-head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 26px;flex-wrap:wrap} .rampo-id{display:flex;align-items:center;gap:16px} .rampo-id .rampo-logo{width:64px;height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))} .rampo-id h2{font-family:'Fraunces',serif;font-weight:800;font-size:1.7rem;line-height:1.1} .rampo-id p{font-size:.85rem;color:#cdded7;letter-spacing:.03em} .rampo-clock{text-align:right;line-height:1.2} .rampo-clock .clock-time{font-family:'Plus Jakarta Sans',monospace;font-weight:900;font-size:2.1rem;letter-spacing:.04em;font-variant-numeric:tabular-nums} .rampo-clock .clock-zone{font-size:.95rem;color:var(--gold-soft);font-weight:700;margin-left:6px} .rampo-clock .clock-date{display:block;font-size:.82rem;color:#cdded7;margin-top:2px} .rampo-wrap{max-width:1080px;margin:30px auto 56px;padding:0 26px} /* Tab agenda */ .agenda-tabs{display:flex;gap:8px;margin-bottom:18px} .agenda-tabs .atab{flex:0 0 auto;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 22px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s} .agenda-tabs .atab.active{background:var(--pine);color:#fff;border-color:var(--pine)} .agenda-tabs .live-pill{color:#ff6b6b;font-size:.7rem;animation:pulse 1.5s infinite} .agenda-tabs .atab.active .live-pill{color:#ff8c8c} /* Agenda card */ .agenda-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;border-left:5px solid #c0392b} .badge-live{display:inline-block;background:#fdecec;color:#c0392b;font-size:.74rem;font-weight:700;letter-spacing:.05em;padding:5px 13px;border-radius:999px;margin-bottom:12px;animation:pulse 1.6s infinite} .agenda-card h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.3rem;color:var(--pine);margin-bottom:12px;line-height:1.25} .agenda-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)} .agenda-meta .open-tag{background:#e8f3ee;color:var(--teal-dark);font-weight:700;padding:3px 12px;border-radius:999px} /* Arsip */ .arsip-search input{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;background:var(--white);margin-bottom:14px} .arsip-search input:focus{outline:0;border-color:var(--teal);box-shadow:var(--sh-focus)} .arsip-list{list-style:none} .arsip-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 20px;margin-bottom:10px} .arsip-list li b{display:block;font-size:.98rem;color:var(--ink)} .arsip-list li small{font-size:.8rem;color:var(--muted)} .arsip-open{font-size:.84rem;font-weight:700;color:var(--teal);text-decoration:none;white-space:nowrap} .arsip-open:hover{text-decoration:underline} .arsip-locked{font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap} /* Tiga menu */ .rampo-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0} .rmenu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 22px;cursor:pointer;transition:all .18s} .rmenu:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--sh-md)} .rmenu.active{background:var(--pine);border-color:var(--pine)} .rmenu .rm-icon{font-size:1.7rem;margin-bottom:6px} .rmenu .rm-title{font-weight:700;font-size:1.02rem;color:var(--ink)} .rmenu .rm-sub{font-size:.82rem;color:var(--muted)} .rmenu.active .rm-title,.rmenu.active .rm-sub{color:#fff} .rmenu.active .rm-sub{color:#cdded7} /* Panel data */ .data-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-sm)} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap} .panel-head h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.25rem;color:var(--pine)} .kuorum{font-size:.9rem;color:var(--muted)} .kuorum b{color:var(--ink);font-size:1.05rem} .q-ok{color:var(--teal-dark);font-weight:700;background:#e8f3ee;padding:3px 11px;border-radius:999px;margin-left:6px} .q-no{color:#9a7a1a;font-weight:700;background:#fcf3dc;padding:3px 11px;border-radius:999px;margin-left:6px} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .att-table{width:100%;min-width:520px;border-collapse:collapse;font-size:.9rem} .att-table th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--line)} .att-table td{padding:12px;border-bottom:1px solid var(--paper-2);color:var(--ink)} .att-table .t-time{color:var(--teal-dark);font-variant-numeric:tabular-nums} .st-hadir{display:inline-block;background:#e8f3ee;color:var(--teal-dark);font-weight:700;font-size:.8rem;padding:3px 12px;border-radius:999px} .st-belum{display:inline-block;background:var(--paper-2);color:var(--muted);font-weight:700;font-size:.8rem;padding:3px 12px;border-radius:999px} .row-in{animation:rowIn .5s ease} @keyframes rowIn{from{opacity:0;background:#eef7f2}to{opacity:1;background:transparent}} .display-link{margin-top:16px;font-size:.86rem;color:var(--muted)} .display-link a{color:var(--teal);font-weight:700;text-decoration:none} .display-link a:hover{text-decoration:underline} /* Risalah state */ .risalah-state{text-align:center;padding:30px 20px} .risalah-state .ris-icon{font-size:2.6rem;margin-bottom:14px} .risalah-state h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.35rem;color:var(--pine);margin-bottom:10px} .risalah-state p{max-width:520px;margin:0 auto 10px;color:var(--muted);font-size:.94rem} .risalah-state .ris-hint{font-size:.86rem} @media(max-width:820px){ .rampo-menu{grid-template-columns:1fr} .rampo-head-inner{flex-direction:column;align-items:flex-start} .rampo-clock{text-align:left} } /* ============================================================ Halaman Lacak Aspirasi ============================================================ */ .lacak-head{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;padding:40px 26px;text-align:center;border-bottom:4px solid var(--gold)} .lacak-head h2{font-family:'Fraunces',serif;font-weight:800;font-size:1.9rem;margin-bottom:8px} .lacak-head p{max-width:600px;margin:0 auto;color:#d7e3de;font-size:.96rem} .lacak-wrap{max-width:720px;margin:34px auto 56px;padding:0 26px} .lacak-search-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-md)} .lacak-search-card label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:9px} .lacak-input-row{display:flex;gap:10px} .lacak-input-row input{flex:1;font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;background:var(--paper);letter-spacing:.03em} .lacak-input-row input:focus{outline:0;border-color:var(--teal);box-shadow:var(--sh-focus);background:#fff} .lacak-input-row button{background:var(--pine);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;border:0;border-radius:var(--r-sm);padding:0 30px;cursor:pointer;transition:background .15s} .lacak-input-row button:hover{background:var(--pine-deep)} .lacak-err{display:block;color:#c0492b;font-weight:700;font-size:.82rem;margin-top:10px;min-height:0} .lacak-hint{display:block;color:var(--muted);font-size:.8rem;margin-top:8px} .lacak-empty{text-align:center;padding:46px 20px;color:var(--muted)} .lacak-empty .empty-icon{font-size:2.4rem;margin-bottom:12px} .lacak-empty p{font-size:.96rem;margin-bottom:6px} .lacak-empty .empty-sub{font-size:.86rem} .lacak-empty a{color:var(--teal);font-weight:700;text-decoration:none} .lacak-empty a:hover{text-decoration:underline} .lacak-result{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-top:18px;box-shadow:var(--sh-md)} .result-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap} .result-label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700} .result-ticket{font-family:'Fraunces',serif;font-weight:800;font-size:1.5rem;color:var(--pine);letter-spacing:.03em} .result-status{background:#fcf3dc;color:#9a7a1a;font-weight:700;font-size:.82rem;padding:7px 16px;border-radius:999px} .result-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)} .result-info span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:3px} .result-info b{font-size:.92rem;color:var(--ink)} .timeline-title{font-family:'Fraunces',serif;font-weight:800;font-size:1.15rem;color:var(--pine);margin:22px 0 18px} .timeline{list-style:none;position:relative;padding-left:8px} .timeline li{position:relative;padding:0 0 26px 38px} .timeline li::before{content:"";position:absolute;left:13px;top:24px;bottom:-2px;width:2px;background:var(--line)} .timeline li:last-child::before{display:none} .timeline .tl-dot{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--paper-2);border:2px solid var(--line);display:grid;place-items:center;font-size:.85rem;color:var(--muted);font-weight:700;z-index:1} .timeline li.done .tl-dot{background:var(--teal);border-color:var(--teal);color:#fff} .timeline li.active .tl-dot{background:var(--gold);border-color:var(--gold);color:#fff;animation:pulse 1.6s infinite} .timeline li.done::before,.timeline li.active::before{background:var(--teal)} .tl-body b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:2px} .timeline li:not(.done):not(.active) .tl-body b{color:var(--muted)} .tl-body span{display:block;font-size:.78rem;color:var(--teal-dark);font-weight:700;margin-bottom:4px} .timeline li:not(.done):not(.active) .tl-body span{color:var(--muted);font-weight:400} .tl-body p{font-size:.86rem;color:var(--muted);margin:0} .result-note{margin-top:16px;font-size:.84rem;color:var(--muted);text-align:center} /* Bilah lacak di hero beranda */ .track-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 18px;margin-bottom:18px;flex-wrap:wrap} .track-bar .tb-label{font-weight:700;font-size:.88rem;color:var(--ink);margin-right:auto} .track-bar .tb-label small{display:block;font-weight:400;font-size:.78rem;color:var(--muted)} .track-bar input{font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;background:var(--paper);width:200px;letter-spacing:.03em} .track-bar input:focus{outline:0;border-color:var(--teal);box-shadow:var(--sh-focus);background:#fff} .track-bar button{background:#ffffff;color:#0A3C43;border:1.5px solid #0A3C43;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.88rem;border-radius:var(--r-sm);padding:10px 22px;cursor:pointer;transition:background .15s,color .15s,transform .15s} .track-bar button:hover{background:#0A3C43;color:#fff;transform:translateY(-1px)} @media(max-width:600px){ .result-info{grid-template-columns:1fr} .track-bar{justify-content:stretch} .track-bar .tb-label{margin-right:0;width:100%;margin-bottom:4px} .track-bar input{flex:1;width:auto} } /* ============================================================ Halaman Berita ============================================================ */ .berita-head{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;padding:40px 26px;text-align:center;border-bottom:4px solid var(--gold)} .berita-head h2{font-family:'Fraunces',serif;font-weight:800;font-size:1.95rem;margin-bottom:8px} .berita-head p{max-width:620px;margin:0 auto;color:#d7e3de;font-size:.96rem} .berita-wrap{max-width:1120px;margin:34px auto 56px;padding:0 26px} .berita-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--sh-md);transition:transform .18s,box-shadow .18s;margin-bottom:30px} .berita-featured:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)} .bf-img{min-height:300px;background:var(--paper-2) center/cover no-repeat} .bf-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center} .bf-cat{display:inline-block;align-self:flex-start;background:var(--gold);color:var(--pine-deep);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:14px} .bf-body h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.6rem;color:var(--pine);line-height:1.22;margin-bottom:12px} .bf-body p{color:var(--muted);font-size:.96rem;margin-bottom:16px} .bf-meta{font-size:.82rem;color:var(--teal);font-weight:700} .berita-filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px} .bfilter{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.85rem;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:9px 20px;cursor:pointer;transition:all .15s} .bfilter:hover{border-color:var(--teal);color:var(--teal)} .bfilter.active{background:var(--pine);color:#fff;border-color:var(--pine)} .berita-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .bcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s} .bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .bc-img{height:160px;background:var(--paper-2) center/cover no-repeat} .bc-body{padding:16px 18px} .bc-cat{display:inline-block;background:#e8f3ee;color:var(--teal-dark);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 11px;border-radius:999px;margin-bottom:9px} .bc-body h4{font-weight:700;font-size:1.02rem;color:var(--ink);line-height:1.3;margin-bottom:9px;text-transform:capitalize} .bc-body p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .bc-date{font-size:.8rem;color:var(--muted);font-weight:700} .berita-empty{text-align:center;color:var(--muted);padding:40px;font-size:.95rem} @media(max-width:820px){ .berita-featured{grid-template-columns:1fr} .bf-img{min-height:210px} .berita-grid{grid-template-columns:1fr 1fr} } @media(max-width:560px){.berita-grid{grid-template-columns:1fr 1fr;gap:12px}} /* ============================================================ Halaman Profil — tampilan modern berbasis kartu ============================================================ */ .profil-hero{position:relative;max-height:380px;overflow:hidden} .profil-hero img{width:100%;height:auto;display:block} .profil-hero-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 26px 26px;background:linear-gradient(transparent,rgba(22,48,42,.92));color:#fff} .profil-hero-cap .inner{max-width:1080px;margin:0 auto} .profil-hero-cap .eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px} .profil-hero-cap h2{font-family:'Fraunces',serif;font-weight:800;font-size:2rem;line-height:1.15;margin:0} .profil-hero-cap p{margin:6px 0 0;color:#d7e3de;font-size:.9rem} .profil-wrap{max-width:1080px;margin:40px auto 56px;padding:0 26px;display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start} /* Judul seksi dengan aksen garis emas */ .profil-content .seksi{margin-bottom:30px} .profil-content .seksi-judul{font-family:'Fraunces',serif;font-weight:800;font-size:1.35rem;color:var(--pine);margin:0 0 14px;display:flex;align-items:center;gap:12px} .profil-content .seksi-judul::before{content:"";width:26px;height:3px;background:var(--gold);border-radius:2px;flex-shrink:0} .profil-content h3{font-family:'Fraunces',serif;font-weight:800;font-size:1.35rem;color:var(--pine);margin:0 0 14px} .profil-content p{color:var(--ink);font-size:.98rem;line-height:1.8;margin-bottom:16px;text-align:left} .profil-content p:last-child{margin-bottom:0} /* ── Kartu Sambutan Ketua ── */ .sambutan-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start;box-shadow:var(--sh-sm);position:relative;overflow:hidden} .sambutan-card::before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(var(--gold),var(--teal))} .sambutan-foto{width:150px;height:188px;object-fit:cover;border-radius:var(--r-md);background:var(--paper-2);display:block} .sambutan-isi{min-width:0} .sambutan-isi p{font-size:.96rem;line-height:1.75} .sambutan-quote{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--gold);line-height:1;margin-bottom:6px;display:block} .sambutan-nama{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .sambutan-nama b{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--pine);display:block} .sambutan-nama span{font-size:.85rem;color:var(--muted)} /* Placeholder inisial bila foto Ketua/Sekwan belum diupload */ .sambutan-inisial{width:150px;height:188px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--teal),var(--pine));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:3.4rem;letter-spacing:.02em} /* Kartu sambutan tanpa foto: kolom kiri menyempit */ .sambutan-card.tanpa-foto{grid-template-columns:96px 1fr} .sambutan-card.tanpa-foto .sambutan-inisial{width:96px;height:96px;border-radius:50%;font-size:2rem} /* ── Visi: kutipan besar bertema ── */ .visi-box{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;border-radius:var(--r-lg);padding:30px 32px;position:relative;overflow:hidden} .visi-box::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cpath d='M0 17 L15 2 L30 17 L15 32 Z M30 17 L45 2 L60 17 L45 32 Z' fill='none' stroke='%23C5A059' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='%23C5A059'/%3E%3Ccircle cx='45' cy='17' r='2.5' fill='%23C5A059'/%3E%3C/svg%3E");background-repeat:repeat} .visi-box .label{position:relative;z-index:1;display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px} .visi-box .teks{position:relative;z-index:1;font-family:'Fraunces',serif;font-size:1.3rem;line-height:1.5;font-style:italic} .visi-box .teks p{color:#fff;margin:0;font-size:1.3rem;line-height:1.5} /* ── Misi: daftar berikon ── */ .misi-list{list-style:none;margin:0;padding:0;counter-reset:misi} .misi-list li{position:relative;padding:12px 0 12px 44px;border-bottom:1px dashed var(--line);color:var(--ink);font-size:.96rem;line-height:1.6} .misi-list li:last-child{border-bottom:0} .misi-list li::before{counter-increment:misi;content:counter(misi);position:absolute;left:0;top:11px;width:28px;height:28px;background:var(--teal);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:700;font-family:'Fraunces',serif} /* ── Tugas tiap bagian: kartu ── */ .bagian-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px} @media(max-width:560px){.bagian-grid{grid-template-columns:1fr}} .bagian-card{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r-md);padding:16px 18px} .bagian-card h4{font-family:'Fraunces',serif;font-weight:700;font-size:1rem;color:var(--pine);margin:0 0 6px;line-height:1.3} .bagian-card p{font-size:.88rem;color:var(--muted);line-height:1.55;margin:0} /* daftar cek (dipakai bila perlu) */ .profil-list{list-style:none;margin:6px 0;padding:0} .profil-list li{position:relative;padding:8px 0 8px 30px;color:var(--ink);font-size:.96rem;border-bottom:1px solid var(--paper-2)} .profil-list li:last-child{border-bottom:0} .profil-list li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;background:var(--teal);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center} /* ── Sidebar ── */ .profil-side{position:sticky;top:82px;display:flex;flex-direction:column;gap:18px} .profil-fact{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-sm)} .profil-fact.alt{background:linear-gradient(135deg,var(--pine),var(--pine-deep));color:#fff;border:0;position:relative;overflow:hidden} .profil-fact.alt::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cpath d='M0 17 L15 2 L30 17 L15 32 Z M30 17 L45 2 L60 17 L45 32 Z' fill='none' stroke='%23C5A059' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='%23C5A059'/%3E%3Ccircle cx='45' cy='17' r='2.5' fill='%23C5A059'/%3E%3C/svg%3E");background-repeat:repeat} .profil-fact>*{position:relative;z-index:1} .profil-fact h4{font-family:'Fraunces',serif;font-weight:800;font-size:1.1rem;color:var(--pine);margin-bottom:14px;display:flex;align-items:center;gap:9px} .profil-fact.alt h4{color:#fff} .profil-fact h4 .fi{width:18px;height:18px;color:var(--teal)} .profil-fact.alt h4 .fi{color:var(--gold-soft)} .profil-fact dl{margin:0} .profil-fact dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:2px} .profil-fact dd{font-size:.92rem;color:var(--ink);margin:0 0 14px;line-height:1.5} .profil-fact dd:last-child{margin-bottom:0} .profil-fact dd ul{margin:4px 0 0;padding-left:0;list-style:none} .profil-fact dd ul li{position:relative;padding:3px 0 3px 16px;font-size:.9rem} .profil-fact dd ul li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--teal)} /* Kartu kontak (alt) */ .kontak-item{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#e3ede9;margin-bottom:10px} .kontak-item .fi{width:16px;height:16px;color:var(--gold-soft);flex-shrink:0} .kontak-item a{color:#e3ede9;text-decoration:none;word-break:break-word} .kontak-item a:hover{color:var(--gold)} .kontak-sosmed{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)} .kontak-sosmed a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background .15s,transform .15s} .kontak-sosmed a:hover{background:var(--gold);color:var(--pine-deep);transform:translateY(-2px)} .kontak-sosmed svg{width:16px;height:16px} @media(max-width:820px){ .profil-wrap{grid-template-columns:1fr} .profil-side{position:static} /* Hero profil: longgarkan tinggi & kecilkan caption agar judul tidak terpotong */ .profil-hero{max-height:none} .profil-hero-cap{padding:36px 18px 18px} .profil-hero-cap h2{font-size:1.3rem;line-height:1.2} .profil-hero-cap .eyebrow{font-size:.66rem;margin-bottom:5px} .profil-hero-cap p{font-size:.8rem;line-height:1.4} .sambutan-card{grid-template-columns:1fr;gap:18px;text-align:center} .sambutan-card::before{width:100%;height:5px} .sambutan-foto{width:140px;height:175px;margin:0 auto} .sambutan-nama{text-align:center} .visi-box .teks,.visi-box .teks p{font-size:1.15rem} } /* ============================================================ Tombol WhatsApp melayang (fixed, kiri bawah, ikut saat scroll) ============================================================ */ .wa-float{position:fixed;left:22px;bottom:22px;z-index:999;width:56px;height:56px;border-radius:50%;display:block;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .15s,box-shadow .15s} .wa-float:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.3)} .wa-float svg{width:56px;height:56px;display:block;border-radius:50%} @media(max-width:768px){.wa-float{display:none}} /* ============================================================ PENYEMPURNAAN TAMPILAN PONSEL (≤600px) Hanya berlaku di layar kecil — tampilan desktop TIDAK berubah. ============================================================ */ @media(max-width:600px){ /* Jaring pengaman: cegah elemen apa pun melebarkan halaman ke samping */ html,body{overflow-x:hidden;max-width:100%} footer,.util,.layout{max-width:100%;overflow-x:hidden} /* 1. Utility bar: perkecil banyak tapi tetap ada */ .util{font-size:.62rem} .util .wrap{padding:5px 14px;flex-direction:row;justify-content:center;align-items:center;text-align:center} .util .wrap > div{display:none} /* sembunyikan Webmail/PPID/Kontak di ponsel → header lebih tipis */ .util .wrap > span{white-space:normal;line-height:1.3} /* Urutan di ponsel: banner → lacak → KINAWA/Rampo → berita → status & agenda. 'display:contents' membuat anak
&