:root{--green:#0b6b3a;--green2:#0f8a4b;--gold:#c99a28;--bg:#f4f7f5;--text:#183229}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.container{max-width:1180px;margin:auto;padding:20px}.topbar{background:linear-gradient(135deg,var(--green),#064b29);color:#fff}.brand{display:flex;gap:14px;align-items:center;padding:18px 0}.brand img{width:70px;height:70px;object-fit:contain;background:#fff;border-radius:50%;padding:5px}.brand h1{font-size:clamp(20px,3vw,32px);margin:0}.brand p{margin:4px 0 0;opacity:.9}.card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.06);margin:18px 0}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-12{grid-column:span 12}label{font-weight:650;display:block;margin-bottom:7px}input,select,textarea{width:100%;padding:12px 13px;border:1px solid #cfdad4;border-radius:10px;background:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}.btn-primary{background:var(--green);color:#fff}.btn-light{background:#eaf4ee;color:var(--green)}.btn-danger{background:#b42318;color:#fff}.likert{overflow:auto}.likert table{width:100%;border-collapse:collapse;min-width:760px}.likert th,.likert td{padding:12px;border-bottom:1px solid #e7ece9;text-align:center}.likert th:first-child,.likert td:first-child{text-align:left}.notice{padding:14px;border-radius:12px;background:#eaf6ee;color:#14532d}.error{background:#feeceb;color:#9f1c16}.success{background:#e8f7ee;color:#176b3a}.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:#075a31;color:#fff;padding:22px 16px}.sidebar .logo{display:flex;gap:10px;align-items:center;margin-bottom:24px}.sidebar img{width:52px;height:52px;background:#fff;border-radius:50%;padding:4px}.sidebar a{display:block;padding:12px 14px;border-radius:10px;margin:6px 0}.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.14)}.content{padding:24px}.stat{background:#fff;padding:20px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.05)}.stat strong{display:block;font-size:30px;color:var(--green)}table.data{width:100%;border-collapse:collapse;background:#fff}.data th,.data td{padding:11px;border-bottom:1px solid #e4e9e6;text-align:left}.progress{height:10px;background:#dce9e1;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green)}@media(max-width:850px){.admin-shell{display:block}.sidebar{position:relative}.grid{grid-template-columns:1fr}.col-3,.col-4,.col-6,.col-12{grid-column:1}.content{padding:14px}.container{padding:14px}.brand img{width:56px;height:56px}}
.landing{padding-top:28px}.hero{display:grid;grid-template-columns:1.6fr .7fr;align-items:center;min-height:390px;background:linear-gradient(135deg,#fff 55%,#e5f2e9)}.hero h2{font-size:clamp(34px,5vw,58px);margin:10px 0}.lead{font-size:19px;line-height:1.7;color:#496157}.eyebrow{display:inline-block;color:var(--green);font-weight:800;letter-spacing:.05em;text-transform:uppercase}.hero-mark{text-align:center}.hero-mark img{width:min(230px,80%);filter:drop-shadow(0 18px 22px rgba(0,0,0,.12))}.schedule{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:12px;margin:22px 0}.schedule.open{background:#e5f6eb;border-left:5px solid var(--green)}.schedule.upcoming{background:#fff6dc;border-left:5px solid var(--gold)}.schedule.closed{background:#eef1ef;border-left:5px solid #7b8b82}.schedule span{font-size:18px}.btn-lg{padding:14px 24px;font-size:17px}.info-card{height:100%;margin-top:0}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.badge{display:inline-block;background:#eaf4ee;color:#0b6b3a;border-radius:999px;padding:5px 10px;font-weight:700;font-size:12px}.table-wrap{overflow:auto}@media(max-width:850px){.hero{grid-template-columns:1fr;min-height:auto}.hero-mark{display:none}.info-grid{display:block}.info-card{margin:14px 0}}

/* Elegant public landing page */
.landing-page{background:#fff;color:#173126}.landing-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #e5eee9}.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px;padding-top:10px;padding-bottom:10px}.landing-brand{display:flex;align-items:center;gap:12px}.landing-brand img{width:52px;height:52px;object-fit:contain}.landing-brand span{display:flex;flex-direction:column}.landing-brand strong{font-size:18px;color:#075a31}.landing-brand small{font-size:12px;color:#667a70}.landing-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:700;color:#3f5c4d}.landing-nav a:hover{color:#087a43}.landing-nav .nav-admin{border:1px solid #cdded4;padding:10px 15px;border-radius:10px;color:#075a31}.landing-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#064b2a 0%,#08713e 55%,#0a8650 100%);color:#fff}.hero-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.11) 0 1px,transparent 2px),linear-gradient(30deg,transparent 48%,rgba(255,255,255,.035) 49%,rgba(255,255,255,.035) 51%,transparent 52%);background-size:24px 24px,42px 42px;opacity:.8}.landing-hero:after{content:"";position:absolute;width:550px;height:550px;border:110px solid rgba(255,255,255,.045);border-radius:50%;right:-230px;top:-230px}.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:70px;align-items:center;padding-top:76px;padding-bottom:80px}.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero-badge span{width:8px;height:8px;border-radius:50%;background:#f4c453;box-shadow:0 0 0 5px rgba(244,196,83,.16)}.hero-copy h1{font-size:clamp(40px,5vw,67px);line-height:1.06;letter-spacing:-.04em;max-width:760px;margin:24px 0 18px}.hero-subtitle{font-size:clamp(18px,2vw,24px);font-weight:700;color:#e9fff2;margin:0 0 13px}.hero-description{max-width:720px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.8;margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.btn-hero{min-height:50px;padding:14px 21px;border-radius:12px}.landing-page .btn-primary{background:#e0ad39;color:#173126;box-shadow:0 10px 25px rgba(20,27,23,.22)}.landing-page .btn-primary:hover{background:#f0c155;transform:translateY(-1px)}.btn-glass{background:rgba(255,255,255,.11);color:#fff;border:1px solid rgba(255,255,255,.25)}.btn-muted{background:rgba(255,255,255,.16);color:rgba(255,255,255,.72);cursor:not-allowed}.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:27px;color:#d9f5e6;font-size:12px}.schedule-panel{position:relative;background:rgba(255,255,255,.98);color:#173126;border-radius:24px;padding:27px;box-shadow:0 30px 70px rgba(0,28,14,.28);border:1px solid rgba(255,255,255,.4)}.schedule-panel-top{display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid #e5eee9}.schedule-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#e8f5ed;color:#087442;font-size:25px}.schedule-panel-top small,.schedule-time small{display:block;color:#74867d;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.schedule-panel-top h2{font-size:19px;margin:3px 0 0}.status-pill{display:inline-flex;align-items:center;gap:8px;margin:22px 0 14px;padding:7px 11px;border-radius:99px;font-size:12px;font-weight:800}.status-pill i{width:8px;height:8px;border-radius:50%;background:currentColor}.status-open{background:#e3f6ea;color:#087442}.status-upcoming{background:#fff4d9;color:#91630a}.status-closed{background:#f0f2f1;color:#65736c}.schedule-panel h3{font-size:22px;margin:0 0 17px}.schedule-panel>p{font-size:13px;line-height:1.7;color:#62766b;margin:18px 0}.schedule-time{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;background:#f6f9f7;border-radius:14px;padding:14px}.schedule-time div{min-width:0}.schedule-time strong{display:block;font-size:12px;margin-top:5px}.schedule-time.stacked{grid-template-columns:1fr 1fr}.schedule-cta{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background:#075f35;color:#fff;font-weight:800;font-size:13px}.empty-calendar{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:#eef5f1;color:#0a7140;font-size:26px;font-weight:900;margin:5px 0}.quick-info{position:relative;z-index:4;margin-top:-1px;background:#fff;border-bottom:1px solid #e7eee9;box-shadow:0 10px 30px rgba(15,74,44,.06)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);padding-top:0;padding-bottom:0}.quick-grid article{display:flex;align-items:center;gap:13px;padding:24px 20px;border-right:1px solid #e7eee9}.quick-grid article:last-child{border-right:0}.quick-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eaf5ee;color:#087442;font-weight:900}.quick-grid strong,.quick-grid small{display:block}.quick-grid strong{font-size:14px}.quick-grid small{font-size:12px;color:#71837a;margin-top:3px}.section{padding:90px 0}.section-soft{background:#f4f8f5}.about-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:85px;align-items:center}.section-kicker{display:inline-block;color:#a97712;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:11px;margin-bottom:13px}.section-copy h2,.section-heading h2,.privacy-card h2{font-size:clamp(30px,4vw,45px);line-height:1.17;letter-spacing:-.035em;margin:0 0 20px;color:#123527}.section-copy>p,.section-heading>p{color:#62776b;line-height:1.85;font-size:16px}.about-note{display:flex;gap:13px;padding:16px;border-radius:14px;background:#edf7f1;border-left:4px solid #0b7b45;margin-top:26px}.about-note span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#0b7b45;color:white;font-weight:900}.about-note p{margin:2px 0;color:#476356;font-size:13px;line-height:1.6}.index-card{background:#0a6338;border-radius:28px;padding:35px;color:#fff;box-shadow:0 25px 55px rgba(4,76,40,.2)}.index-ring{width:210px;height:210px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#e1b13e 0 70%,rgba(255,255,255,.17) 70% 100%);position:relative}.index-ring:before{content:"";position:absolute;inset:20px;border-radius:50%;background:#0a6338}.index-ring div{position:relative;text-align:center}.index-ring strong,.index-ring small{display:block}.index-ring strong{font-size:38px}.index-ring small{opacity:.75;margin-top:5px}.index-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:30px}.index-levels>div{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);padding:10px;border-radius:11px}.index-levels span{width:8px;height:32px;border-radius:99px}.level-low{background:#ef6a61}.level-mid{background:#e8b33f}.level-high{background:#59ca82}.index-levels p{margin:0}.index-levels strong,.index-levels small{display:block;font-size:11px}.index-levels small{opacity:.72;margin-top:2px}.section-heading{text-align:center;max-width:720px;margin:0 auto 48px}.dimension-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.dimension-grid article{position:relative;overflow:hidden;background:#fff;border:1px solid #e1ebe5;border-radius:18px;padding:27px;min-height:186px;transition:.2s ease}.dimension-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,78,47,.09);border-color:#c8dfd1}.dimension-grid article>span{display:inline-grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#e8f5ed;color:#0a7342;font-weight:900}.dimension-grid article:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:#eef7f1;right:-42px;bottom:-42px}.dimension-grid h3{font-size:18px;margin:18px 0 9px}.dimension-grid p{font-size:13px;line-height:1.65;color:#687b71;margin:0}.dimension-wide{grid-column:2/3}.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:20px;align-items:center}.steps article{text-align:center;padding:15px}.steps article>span{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 16px;border-radius:16px;background:#075f35;color:#fff;font-size:20px;font-weight:900;box-shadow:0 9px 22px rgba(7,95,53,.17)}.steps h3{font-size:16px;margin:0 0 8px}.steps p{color:#73847b;font-size:12px;line-height:1.6;margin:0}.steps>i{font-style:normal;color:#d4a334;font-size:24px}.privacy-section{padding:0 0 80px}.privacy-card{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:linear-gradient(135deg,#07542f,#087844);color:#fff;border-radius:27px;padding:38px 42px;box-shadow:0 23px 50px rgba(6,82,44,.22)}.privacy-symbol{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);font-size:31px;color:#f1c659}.section-kicker.light{color:#f1c659;margin-bottom:8px}.privacy-card h2{color:#fff;font-size:28px;margin-bottom:10px}.privacy-card p{color:#d8eee2;line-height:1.7;margin:0;max-width:760px}.btn-gold{background:#efbd4a;color:#163426;white-space:nowrap}.landing-footer{background:#092e1d;color:#c9dbd1}.footer-layout{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:30px;padding-bottom:30px}.footer-brand{display:flex;align-items:center;gap:11px}.footer-brand img{width:43px;height:43px}.footer-brand strong,.footer-brand small{display:block}.footer-brand strong{color:#fff}.footer-brand small{font-size:11px;margin-top:3px}.landing-footer p{font-size:12px;text-align:center}.landing-footer>a,.footer-layout>a{font-size:12px;color:#f0c252}
@media(max-width:950px){.landing-nav a:not(.nav-admin){display:none}.hero-layout{grid-template-columns:1fr;gap:38px;padding-top:58px}.schedule-panel{max-width:620px}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick-grid article:nth-child(2){border-right:0}.about-layout{grid-template-columns:1fr;gap:45px}.index-card{max-width:520px;width:100%;margin:auto}.dimension-grid{grid-template-columns:repeat(2,1fr)}.dimension-wide{grid-column:auto}.steps{grid-template-columns:repeat(2,1fr)}.steps>i{display:none}.privacy-card{grid-template-columns:auto 1fr}.privacy-card .btn{grid-column:1/-1;width:max-content}.footer-layout{flex-wrap:wrap;justify-content:center;text-align:center}}
@media(max-width:620px){.landing-brand small{display:none}.nav-wrap{min-height:68px}.landing-brand img{width:45px;height:45px}.landing-nav{gap:8px}.landing-nav .nav-admin{padding:9px 11px;font-size:12px}.hero-layout{padding-top:45px;padding-bottom:55px}.hero-copy h1{font-size:39px}.hero-description{font-size:14px}.hero-actions .btn{width:100%}.hero-trust{display:grid;gap:8px}.schedule-panel{padding:21px;border-radius:20px}.schedule-time,.schedule-time.stacked{grid-template-columns:1fr}.schedule-time>span{display:none}.quick-grid{grid-template-columns:1fr 1fr}.quick-grid article{padding:17px 10px;gap:9px}.quick-icon{width:36px;height:36px}.section{padding:66px 0}.section-copy h2,.section-heading h2{font-size:31px}.dimension-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps article{display:grid;grid-template-columns:auto 1fr;text-align:left;column-gap:14px}.steps article>span{grid-row:1/3;margin:0}.privacy-card{grid-template-columns:1fr;padding:29px 24px;text-align:center}.privacy-symbol{margin:auto}.privacy-card .btn{width:100%}.footer-layout{flex-direction:column}.landing-footer p{margin:0}.index-levels{grid-template-columns:1fr}.index-levels>div{justify-content:center}.index-ring{width:185px;height:185px}}

/* =========================================================
   HALAMAN INSTRUMEN PERTANYAAN
========================================================= */

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-heading__title {
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 800;
    color: #173d2d;
}

.page-heading__subtitle {
    margin: 0;
    color: #718078;
    font-size: 14px;
}

.question-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(200px, 280px) auto;
    gap: 14px;
    align-items: end;
}

.question-form-card {
    border: 1px solid #e4ece7;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(20, 73, 48, 0.07);
    overflow: hidden;
}

.question-form-header {
    padding: 20px 24px;
    background:
        linear-gradient(
            135deg,
            rgba(20, 108, 70, 0.08),
            rgba(211, 168, 69, 0.08)
        );
    border-bottom: 1px solid #e6eee9;
}

.question-form-header h2 {
    margin: 0 0 5px;
    color: #174b34;
    font-size: 20px;
}

.question-form-header p {
    margin: 0;
    color: #748078;
    font-size: 13px;
}

.question-form-body {
    padding: 24px;
}

.question-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.question-table thead th {
    padding: 13px 14px;
    background: #f2f8f4;
    color: #315c48;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: 1px solid #e1ebe5;
    border-bottom: 1px solid #e1ebe5;
}

.question-table thead th:first-child {
    border-left: 1px solid #e1ebe5;
    border-radius: 12px 0 0 0;
}

.question-table thead th:last-child {
    border-right: 1px solid #e1ebe5;
    border-radius: 0 12px 0 0;
}

.question-table tbody td {
    padding: 15px 14px;
    vertical-align: top;
    border-bottom: 1px solid #edf2ef;
    background: #fff;
}

.question-table tbody tr:hover td {
    background: #fbfdfc;
}

.question-dimension {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    margin-bottom: 7px;
    border-radius: 999px;
    background: #e7f5ed;
    color: #13734a;
    font-size: 11px;
    font-weight: 800;
}

.question-statement {
    color: #273c32;
    font-size: 14px;
    line-height: 1.6;
}

.question-code {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 8px;
    background: #f1f3f2;
    color: #395346;
    font-size: 12px;
    font-weight: 800;
    font-family: monospace;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill--positive,
.status-pill--active {
    background: #dcf5e8;
    color: #147047;
}

.status-pill--negative {
    background: #fff1d4;
    color: #8b5e00;
}

.status-pill--inactive {
    background: #edf0ef;
    color: #68736d;
}

.question-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.question-actions form {
    margin: 0;
}

.btn-small {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
}

.btn-edit {
    color: #1d6748;
    background: #e8f5ee;
    border: 1px solid #cae8d7;
}

.btn-edit:hover {
    background: #d8eee2;
}

.btn-toggle {
    color: #6d5610;
    background: #fff6d9;
    border: 1px solid #f0dfaa;
}

.btn-delete {
    color: #a42b25;
    background: #ffebe9;
    border: 1px solid #f3c4c0;
}

.btn-delete:hover {
    background: #ffdcda;
}

.btn-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.empty-state {
    padding: 45px 20px !important;
    text-align: center;
    color: #77847d;
}

@media (max-width: 992px) {
    .question-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .question-toolbar__actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .page-heading {
        align-items: stretch;
    }

    .page-heading .btn {
        width: 100%;
        text-align: center;
    }

    .question-toolbar {
        grid-template-columns: 1fr;
    }

    .question-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .question-table thead {
        display: none;
    }

    .question-table,
    .question-table tbody,
    .question-table tr,
    .question-table td {
        display: block;
        width: 100%;
    }

    .question-table tr {
        margin-bottom: 15px;
        border: 1px solid #e1eae5;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 5px 18px rgba(28, 76, 52, 0.05);
    }

    .question-table tbody td {
        position: relative;
        padding: 12px 14px 12px 43%;
        min-height: 48px;
        border-bottom: 1px solid #edf1ef;
    }

    .question-table tbody td::before {
        position: absolute;
        top: 13px;
        left: 14px;
        width: 36%;
        color: #648071;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .question-table tbody td:nth-child(1)::before {
        content: "Urutan";
    }

    .question-table tbody td:nth-child(2)::before {
        content: "Kode";
    }

    .question-table tbody td:nth-child(3)::before {
        content: "Pernyataan";
    }

    .question-table tbody td:nth-child(4)::before {
        content: "Jenis";
    }

    .question-table tbody td:nth-child(5)::before {
        content: "Status";
    }

    .question-table tbody td:nth-child(6)::before {
        content: "Jawaban";
    }

    .question-table tbody td:nth-child(7)::before {
        content: "Aksi";
    }

    .question-actions {
        flex-direction: column;
    }

    .question-actions .btn-small,
    .question-actions form,
    .question-actions form button {
        width: 100%;
    }
}