/* =========================================================
   SISTEM PAKAR BUDIDAYA SINGKONG — Design Tokens & Base
   ========================================================= */

:root{
  /* --- Warna utama: hijau tua khas daun singkong + tanah --- */
  --spk-forest-900:#132417;
  --spk-forest-800:#1B3A26;
  --spk-forest-700:#245234;
  --spk-forest-600:#2F6B45;
  --spk-forest-500:#3E8557;
  --spk-forest-400:#5FA274;
  --spk-forest-100:#E4EEE6;

  --spk-soil-600:#8A5A34;
  --spk-soil-500:#A47143;
  --spk-soil-400:#B9895D;
  --spk-soil-100:#F3E6D8;

  --spk-cream:#F7F6F1;
  --spk-cream-2:#EFEDE4;
  --spk-ink-900:#1E211D;
  --spk-ink-600:#4B5147;
  --spk-ink-400:#7A8074;
  --spk-line:#DEDCD1;

  --spk-gold:#C79A3C;
  --spk-danger:#B3402E;

    --spk-font-display: system-ui, 'Segoe UI', Roboto, sans-serif;
  --spk-font-body: system-ui, 'Segoe UI', Roboto, sans-serif;
  --spk-font-mono: ui-monospace, Consolas, monospace;

  --spk-radius:14px;
  --spk-radius-sm:8px;
  --spk-shadow-sm:0 1px 2px rgba(19,36,23,.06), 0 1px 1px rgba(19,36,23,.04);
  --spk-shadow-md:0 8px 24px -8px rgba(19,36,23,.18);
  --spk-shadow-lg:0 24px 48px -16px rgba(19,36,23,.28);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(47,107,69,.34) transparent;
}

body{
  font-family:var(--spk-font-body);
  color:var(--spk-ink-900);
  background:var(--spk-cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  line-height:1.6;
}

/* Skala tipografi dasar: cukup besar untuk dibaca di layar kecil,
   tidak berlebihan di layar besar. Diterapkan sebagai lantai/plafon,
   bukan mengganti sepenuhnya utilitas ukuran Bootstrap. */
h1,.h1{ font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h2,.h2{ font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem); }
h3,.h3{ font-size:clamp(1.3rem, 1.05rem + 1.1vw, 1.65rem); }
h4,.h4{ font-size:clamp(1.15rem, 1rem + .7vw, 1.35rem); }

h1,h2,h3,h4,.font-display{
  font-family:var(--spk-font-display);
  font-weight:600;
  letter-spacing:0;
  line-height:1.18;
  color:var(--spk-forest-900);
}

h5, h6{ letter-spacing:0; }

p{ color:var(--spk-ink-600); }

.font-italic-display{
  font-family:var(--spk-font-display);
  font-style:italic;
  font-weight:500;
}

.font-mono{ font-family:var(--spk-font-mono); letter-spacing:.01em; }

a{color:var(--spk-forest-700); transition:color .15s ease;}
a:hover{color:var(--spk-forest-900);}

/* Garis dekoratif kecil khas identitas (dipakai di eyebrow / pemisah bagian) */
.rule-mark{
  display:inline-block; width:28px; height:2px; background:var(--spk-soil-400);
  vertical-align:middle; margin-right:.6rem; border-radius:2px;
}

.text-forest{color:var(--spk-forest-700)!important;}
.text-soil{color:var(--spk-soil-600)!important;}
.text-muted-2{color:var(--spk-ink-400)!important;}
.bg-forest-900{background:var(--spk-forest-900)!important;}
.bg-forest-800{background:var(--spk-forest-800)!important;}
.bg-cream-2{background:var(--spk-cream-2)!important;}

/* Focus visibility (aksesibilitas) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:3px solid var(--spk-gold);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important;}
}

/* =========================================================
   Tombol & komponen umum
   ========================================================= */
.btn{
  border-radius:999px; font-weight:600; padding:.65rem 1.4rem; letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-sm{padding:.4rem .9rem;}
.btn-forest{background:var(--spk-forest-700); border-color:var(--spk-forest-700); color:#fff; box-shadow:0 1px 2px rgba(19,36,23,.15);}
.btn-forest:hover{background:var(--spk-forest-800); border-color:var(--spk-forest-800); color:#fff; box-shadow:0 6px 16px -4px rgba(27,58,38,.45); transform:translateY(-1px);}
.btn-outline-forest{border:1.5px solid var(--spk-forest-700); color:var(--spk-forest-700); background:transparent;}
.btn-outline-forest:hover{background:var(--spk-forest-700); color:#fff; transform:translateY(-1px);}
.btn-soil{background:var(--spk-soil-600); border-color:var(--spk-soil-600); color:#fff; box-shadow:0 1px 2px rgba(19,36,23,.15);}
.btn-soil:hover{background:#734423; border-color:#734423; color:#fff; box-shadow:0 6px 16px -4px rgba(138,90,52,.45); transform:translateY(-1px);}

.card{border:1px solid var(--spk-line); border-radius:var(--spk-radius); box-shadow:var(--spk-shadow-sm);}
.card-elevated{box-shadow:var(--spk-shadow-md); border:none;}

.badge-status{
  font-family:var(--spk-font-mono); font-weight:600; letter-spacing:.03em; border-radius:999px;
  padding:.35em .8em; font-size:.8rem; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.35em;
}
.badge-draft{background:#EDEAE2; color:var(--spk-ink-600);}
.badge-submitted{background:#FBF0D6; color:#8A6A16;}
.badge-active{background:var(--spk-forest-100); color:var(--spk-forest-700);}
.badge-inactive{background:#F1E3DC; color:var(--spk-soil-600);}
.badge-archived{background:#EDEAE2; color:var(--spk-ink-400);}

/* =========================================================
   Navbar publik
   ========================================================= */
.navbar-spk{
  background:rgba(247,246,241,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--spk-line);
  transition:box-shadow .2s ease;
}
.navbar-spk.shadow-sm{box-shadow:0 4px 16px -8px rgba(19,36,23,.18)!important;}
.navbar-spk .navbar-brand{font-family:var(--spk-font-display); font-weight:700; color:var(--spk-forest-900); font-size:1.3rem; letter-spacing:0;}
.navbar-spk .nav-link{font-weight:600; color:var(--spk-ink-600); padding:.5rem 1rem!important; font-size:.94rem; position:relative;}
.navbar-spk .nav-link.active, .navbar-spk .nav-link:hover{color:var(--spk-forest-700);}
.navbar-spk .nav-link.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.15rem; height:2px;
  background:var(--spk-soil-500); border-radius:2px;
}

/* =========================================================
   Hero — motif akar/umbi singkong sebagai signature element
   ========================================================= */
.hero-spk{
  position:relative;
  background:linear-gradient(165deg, var(--spk-forest-900) 0%, #16301F 55%, var(--spk-forest-800) 100%);
  color:#fff;
  overflow:hidden;
  border-radius:0 0 48px 48px;
}
.hero-spk::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(95,162,116,.38), transparent 45%),
    radial-gradient(circle at 8% 95%, rgba(199,154,60,.16), transparent 40%);
  pointer-events:none;
}
.hero-spk::after{
  /* tekstur grain halus agar latar gelap tidak terasa flat/AI-generated */
  content:"";
  position:absolute; inset:0;
  opacity:.5;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:var(--spk-forest-100);
  padding:.35rem .9rem; border-radius:999px; font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--spk-font-mono);
}
.hero-spk h1{color:#fff; text-wrap:balance; font-size:clamp(2rem, 1.35rem + 3.2vw, 3.5rem);}
.hero-spk h1 em{
  font-family:var(--spk-font-display); font-style:italic; font-weight:500;
  color:var(--spk-forest-400);
}
.hero-spk .lead-text{color:rgba(255,255,255,.75); font-size:1.15rem; max-width:34rem;}
.root-motif{opacity:.95; filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));}

/* =========================================================
   Section umum publik
   ========================================================= */
.section-pad{padding:5.5rem 0;}
.eyebrow{
  font-family:var(--spk-font-mono);
  font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--spk-soil-600);
  display:inline-flex; align-items:center;
}
.icon-tile{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--spk-forest-100); color:var(--spk-forest-700);
  font-size:1.4rem;
  transition:transform .2s ease, background .2s ease;
}
.feature-card{
  padding:1.85rem; height:100%;
  border-radius:var(--spk-radius);
  background:#fff; border:1px solid var(--spk-line);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--spk-shadow-md); border-color:transparent;}
.feature-card:hover .icon-tile{transform:scale(1.08); background:var(--spk-forest-700); color:#fff;}
.feature-card h5{font-size:1.15rem;}

.footer-spk{background:var(--spk-forest-900); color:rgba(255,255,255,.68);}
.footer-spk a{color:rgba(255,255,255,.85); text-decoration:none;}
.footer-spk a:hover{color:#fff; text-decoration:underline;}
.footer-spk h6{color:#fff; font-family:var(--spk-font-body); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.72rem;}
.footer-spk .font-display{font-size:1.15rem;}

/* =========================================================
   Stepper Konsultasi
   ========================================================= */
.spk-stepper{display:flex; list-style:none; margin:0; padding:0; gap:.5rem;}
.spk-stepper li{
  flex:1; text-align:center; position:relative; font-size:.8rem; font-weight:600; color:var(--spk-ink-400);
}
.spk-stepper li .num{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--spk-line); color:var(--spk-ink-400);
  margin:0 auto .55rem; font-family:var(--spk-font-mono); font-weight:600; font-size:.9rem;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.spk-stepper li::after{
  content:""; position:absolute; top:18px; left:50%; width:100%; height:2px;
  background:var(--spk-line); z-index:0; transition:background .25s ease;
}
.spk-stepper li:last-child::after{display:none;}
.spk-stepper li.done .num{background:var(--spk-forest-700); border-color:var(--spk-forest-700); color:#fff;}
.spk-stepper li.done::after{background:var(--spk-forest-500);}
.spk-stepper li.active .num{border-color:var(--spk-forest-700); color:var(--spk-forest-700); box-shadow:0 0 0 5px var(--spk-forest-100); transform:scale(1.05);}
.spk-stepper li.active{color:var(--spk-forest-800);}

.form-panel{background:#fff; border:1px solid var(--spk-line); border-radius:var(--spk-radius); padding:2.25rem; box-shadow:var(--spk-shadow-sm);}
.form-panel h5{font-size:1.3rem;}
.form-label{font-weight:600; color:var(--spk-ink-900); font-size:.88rem; letter-spacing:.005em;}
.form-control, .form-select{
  border-radius:var(--spk-radius-sm); border-color:var(--spk-line); padding:.62rem .85rem;
  font-size:1rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color:var(--spk-forest-500); box-shadow:0 0 0 .2rem rgba(47,107,69,.14);
}
.form-control::placeholder{color:var(--spk-ink-400); opacity:.75;}
.form-text-hint{font-size:.82rem; color:var(--spk-ink-400);}
.form-select-sm, .form-control-sm{font-size:.875rem;}

/* =========================================================
   Hasil konsultasi
   ========================================================= */
.result-code{
  font-family:var(--spk-font-mono); font-weight:600; letter-spacing:.05em; font-size:.9rem;
  background:var(--spk-forest-100); color:var(--spk-forest-700);
  padding:.45rem 1.1rem; border-radius:999px; display:inline-block;
}
.result-block{border-left:4px solid var(--spk-forest-500); padding:1.15rem 1.35rem; background:#fff; border-radius:0 var(--spk-radius-sm) var(--spk-radius-sm) 0; border-top:1px solid var(--spk-line); border-bottom:1px solid var(--spk-line); border-right:1px solid var(--spk-line); box-shadow:var(--spk-shadow-sm);}
.result-block.warning{border-left-color:var(--spk-gold);}
.result-block.info{border-left-color:var(--spk-soil-400);}

/* =========================================================
   Dashboard layout (Pakar / Admin)
   ========================================================= */
.dash-wrapper{display:flex; min-height:100vh; background:var(--spk-cream-2);}
.dash-sidebar{
  width:266px; flex-shrink:0; background:var(--spk-forest-900); color:rgba(255,255,255,.85);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(228,238,230,.42) transparent;
}
.dash-sidebar .brand{padding:1.5rem 1.4rem 1.1rem; font-family:var(--spk-font-display); color:#fff; font-weight:700; font-size:1.1rem; letter-spacing:0; display:flex; align-items:center; gap:.65rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:.5rem;}
.dash-sidebar .brand .mark{width:36px;height:36px;border-radius:10px;background:var(--spk-forest-600); display:flex;align-items:center;justify-content:center; font-size:1.15rem;}
.dash-nav{padding:.5rem .9rem;}
.dash-nav .section-label{
  font-family:var(--spk-font-mono);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.38); padding:1.1rem .6rem .4rem;
}
.dash-nav a{
  display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:10px;
  color:rgba(255,255,255,.78); text-decoration:none; font-weight:500; font-size:.92rem; margin-bottom:2px;
  transition:background .15s ease, color .15s ease;
}
.dash-nav a i{width:18px; text-align:center; font-size:1rem; opacity:.9;}
.dash-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.dash-nav a.active{background:var(--spk-forest-600); color:#fff; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.15); position:relative;}
.dash-nav a.active::before{content:""; position:absolute; left:-.9rem; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--spk-gold); border-radius:0 3px 3px 0;}

.dash-main{flex:1; min-width:0;}
.dash-topbar{
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--spk-line);
  padding:.95rem 1.75rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  position:sticky; top:0; z-index:10;
}
.dash-topbar h5{font-size:1.15rem;}
.dash-content{padding:1.85rem;}

.stat-card{background:#fff; border:1px solid var(--spk-line); border-radius:var(--spk-radius); padding:1.5rem; height:100%; transition:box-shadow .2s ease, transform .2s ease; position:relative; overflow:hidden;}
.stat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--stat-accent, var(--spk-forest-500));}
.stat-card:hover{box-shadow:var(--spk-shadow-md); transform:translateY(-2px);}
.stat-card .stat-num{font-family:var(--spk-font-mono); font-size:clamp(1.5rem, 1.1rem + 1.5vw, 1.9rem); font-weight:600; color:var(--spk-forest-900); line-height:1; letter-spacing:0;}
.stat-card .stat-label{font-size:.8rem; color:var(--spk-ink-400); font-weight:600; margin-top:.4rem;}
.stat-card .stat-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem;}
.stat-card .stat-trend{font-family:var(--spk-font-mono); font-size:.72rem; font-weight:600; display:inline-flex; align-items:center; gap:.25em; margin-top:.65rem;}
.stat-card .stat-trend.up{color:var(--spk-forest-600);}
.stat-card .stat-trend.warn{color:#8A6A16;}

.table-spk thead th{
  font-family:var(--spk-font-mono);
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--spk-ink-400);
  border-bottom:2px solid var(--spk-line); font-weight:600; background:transparent;
}
.table-spk td{vertical-align:middle; font-size:.9rem;}
.table-spk tbody tr{transition:background .12s ease;}
.table-spk tbody tr:hover{background:var(--spk-forest-100);}

.cat-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.5em; flex-shrink:0;}

.panel{background:#fff; border:1px solid var(--spk-line); border-radius:var(--spk-radius); box-shadow:var(--spk-shadow-sm);}
.panel-header{padding:1.15rem 1.4rem; border-bottom:1px solid var(--spk-line); display:flex; align-items:center; justify-content:space-between; gap:.75rem;}
.panel-header strong{font-size:.98rem; letter-spacing:0;}
.panel-icon{width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--spk-forest-100); color:var(--spk-forest-700); font-size:.95rem; flex-shrink:0;}
.panel-header .panel-icon{margin-right:.6rem;}
.panel-body{padding:1.4rem;}
.panel, .stat-card, .feature-card, .form-panel{backface-visibility:hidden;}
.input-group-text{border-color:var(--spk-line); color:var(--spk-ink-400);}
.table-spk tbody tr.is-filtered,
.filter-item.is-filtered,
[data-filter-item].is-filtered,
.validation-card.is-filtered,
.activity-item.is-filtered,
.product-admin-card.is-filtered,
.fertilizer-admin-card.is-filtered,
.row > [class*="col"].is-filtered{display:none!important;}
.filter-empty-row td,
.filter-empty-state{color:var(--spk-ink-400); text-align:center; padding:2rem 1rem!important;}
.modal-content{box-shadow:var(--spk-shadow-lg);}
.modal .form-label{margin-bottom:.35rem;}
.modal .form-control,.modal .form-select{background-color:#fff;}

/* =========================================================
   Dashboard Admin/Pakar Polish
   ========================================================= */
.dash-main{
  background:
    linear-gradient(180deg, rgba(228,238,230,.45), rgba(247,246,241,0) 280px),
    var(--spk-cream);
}
.dash-topbar{
  box-shadow:0 10px 26px -26px rgba(19,36,23,.55);
}
.dash-content > .alert{
  border-radius:var(--spk-radius-sm);
  box-shadow:var(--spk-shadow-sm);
}
.dash-content > .panel,
.dash-content > .row > [class*="col"] > .panel{
  border-color:rgba(47,107,69,.13);
  box-shadow:0 18px 42px -36px rgba(19,36,23,.34);
}
.dash-content > .panel.mb-4:first-of-type .panel-body{
  background:linear-gradient(180deg, #fff, #FDFCF8);
  border-radius:var(--spk-radius);
}
.dash-content > .panel.mb-4:first-of-type .row{
  row-gap:.75rem;
}
.dash-content > .panel.mb-4:first-of-type .input-group,
.dash-content > .panel.mb-4:first-of-type .form-select,
.dash-content > .panel.mb-4:first-of-type .form-control{
  min-height:44px;
}
.dash-content > .panel.mb-4:first-of-type .input-group-text{
  border-right:0; background:#fff!important; border-radius:999px 0 0 999px;
}
.dash-content > .panel.mb-4:first-of-type .input-group .form-control{
  border-left:0; border-radius:0 999px 999px 0;
}
.dash-content > .panel.mb-4:first-of-type .form-select,
.dash-content > .panel.mb-4:first-of-type .form-control:not(.input-group .form-control){
  border-radius:999px;
}
.dash-content > .panel.mb-4:first-of-type .btn{
  min-height:44px;
}
.table-responsive{
  scrollbar-width:thin;
  scrollbar-color:var(--spk-line) transparent;
}
.table-spk{
  --bs-table-bg:transparent;
  border-collapse:separate;
  border-spacing:0;
}
.table-spk thead th{
  position:sticky; top:0; z-index:1;
  background:#FBFAF6;
  padding:.9rem 1rem;
  white-space:nowrap;
}
.table-spk td{
  padding:1rem;
  border-bottom:1px solid rgba(222,220,209,.72);
}
.table-spk tbody tr:last-child td{border-bottom:none;}
.table-spk tbody tr{
  background:#fff;
}
.table-spk tbody tr:hover{
  background:#F7FBF7;
}
.table-spk tbody tr[data-bs-toggle="modal"]{
  cursor:pointer;
  position:relative;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.table-spk tbody tr[data-bs-toggle="modal"]:hover{
  background:linear-gradient(90deg, rgba(228,238,230,.9), #fff 42%);
  box-shadow:inset 4px 0 0 var(--spk-forest-600), 0 12px 28px -26px rgba(19,36,23,.65);
}
.table-spk tbody tr[data-bs-toggle="modal"]:focus-visible{
  outline:3px solid rgba(95,162,116,.28);
  outline-offset:-3px;
  background:var(--spk-forest-100);
}
.table-spk tbody tr[data-bs-toggle="modal"] td:first-child{
  color:var(--spk-forest-700);
  font-weight:800;
}
.table-spk td:first-child,
.table-spk th:first-child{padding-left:1.25rem;}
.table-spk td:last-child,
.table-spk th:last-child{padding-right:1.25rem;}
.table-spk .btn-sm{
  min-width:38px;
  border-radius:999px;
  padding:.42rem .75rem;
  font-size:.78rem;
}
.btn-detail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.38rem;
  min-width:42px;
  border:1px solid rgba(47,107,69,.22);
  border-radius:999px;
  background:#fff;
  color:var(--spk-forest-700);
  font-weight:700;
  box-shadow:0 10px 22px -20px rgba(19,36,23,.55);
}
.btn-detail:hover,
.btn-detail:focus{
  border-color:var(--spk-forest-500);
  background:var(--spk-forest-100);
  color:var(--spk-forest-800);
}
.btn-detail i{font-size:.95rem;}
.table-spk .text-end{
  white-space:nowrap;
}
.form-label{
  color:var(--spk-ink-600);
  font-weight:700;
  font-size:.84rem;
}
.form-control,.form-select{
  border-color:rgba(47,107,69,.18);
  border-radius:12px;
  min-height:42px;
}
.form-control:focus,.form-select:focus{
  border-color:var(--spk-forest-500);
  box-shadow:0 0 0 .22rem rgba(95,162,116,.16);
}
.form-control::placeholder{color:#A0A598;}
.form-select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  color:var(--spk-ink-900);
  background-color:#fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23245234' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff, #FBFAF6);
  background-position:right .9rem center, 0 0;
  background-repeat:no-repeat;
  background-size:16px 16px, 100% 100%;
  padding-right:2.65rem;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-select:hover{
  border-color:var(--spk-forest-400);
  box-shadow:0 8px 18px -18px rgba(19,36,23,.45);
}
.form-select:focus{background-color:#fff;}
.form-select:disabled{
  cursor:not-allowed;
  background-color:#F0EFE8;
  color:var(--spk-ink-400);
  opacity:1;
}
.form-select option{
  background:#fff;
  color:var(--spk-ink-900);
}
.form-select option:checked{
  background:var(--spk-forest-100);
  color:var(--spk-forest-800);
}
.form-select option:disabled{color:var(--spk-ink-400);}
.form-select-sm{
  min-height:34px;
  border-radius:10px;
  padding-right:2.2rem;
  background-position:right .72rem center, 0 0;
  background-size:14px 14px, 100% 100%;
}
.form-select[multiple],
.form-select[size]:not([size="1"]){
  min-height:8.5rem;
  padding:.45rem;
  background-image:none;
  background-color:#fff;
  overflow:auto;
}
.form-select[multiple] option,
.form-select[size]:not([size="1"]) option{
  border-radius:8px;
  margin:.12rem 0;
  padding:.5rem .65rem;
}
.input-group .form-select{
  min-width:9rem;
}
.modal-content{
  border:none!important;
  border-radius:18px!important;
  overflow:hidden;
}
.modal-header{
  background:linear-gradient(180deg, #fff, #FBFAF6);
}
.modal-footer{
  background:#FBFAF6;
}
.modal .table-spk{
  border:1px solid var(--spk-line);
  border-radius:var(--spk-radius-sm);
  overflow:hidden;
}
.admin-summary-card,
.validation-card{
  border:1px solid rgba(47,107,69,.14);
  border-radius:var(--spk-radius);
  background:#fff;
  box-shadow:0 14px 34px -30px rgba(19,36,23,.4);
}
.validation-card{
  padding:1.15rem;
  margin-bottom:1rem;
}
.validation-card:last-child{margin-bottom:0;}
.validation-card-header{
  display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem;
}
.validation-section{
  background:#FBFAF6;
  border:1px solid var(--spk-line);
  border-radius:var(--spk-radius-sm);
  padding:.85rem 1rem;
}
.validation-actions{
  display:flex; justify-content:flex-end; gap:.65rem; flex-wrap:wrap;
}
.dashboard-empty{
  text-align:center;
  color:var(--spk-ink-400);
  padding:2rem 1rem;
  border:1px dashed var(--spk-line);
  border-radius:var(--spk-radius-sm);
  background:#FBFAF6;
}

/* =========================================================
   Rule builder — kondisi berantai dengan konektor AND/OR
   ========================================================= */
.rule-chain{position:relative;}
.rule-block{border:1px solid var(--spk-line); border-radius:var(--spk-radius-sm); padding:1rem; background:var(--spk-cream-2); position:relative;}
.rule-block .rule-index{
  position:absolute; top:-10px; left:14px; background:var(--spk-forest-700); color:#fff;
  font-family:var(--spk-font-mono); font-size:.68rem; font-weight:700; padding:.15em .55em; border-radius:999px;
}
.rule-connector{
  display:flex; align-items:center; gap:.75rem; margin:.5rem 0; padding-left:14px;
}
.rule-connector::before, .rule-connector::after{content:""; flex:1; height:1px; background:var(--spk-line);}
.rule-connector .logic-pill{
  font-family:var(--spk-font-mono); font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:.25em .8em; border-radius:999px; background:var(--spk-forest-700); color:#fff; flex:0 0 auto;
}
.rule-connector .logic-pill.or{background:var(--spk-soil-600);}
select.logic-pill{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  min-height:30px;
  border-color:transparent;
  background-color:var(--spk-forest-700);
  color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .65em center;
  background-size:.6em;
  padding-right:1.8rem!important;
}
select.logic-pill.or{background-color:var(--spk-soil-600);}
select.logic-pill option{
  background:#fff;
  color:var(--spk-ink-900);
}
select.logic-pill:focus{box-shadow:0 0 0 .2rem rgba(47,107,69,.25);}

/* Pagination tema (dipakai di halaman list pakar/admin) */
.pagination .page-link{
  border:1px solid var(--spk-line); color:var(--spk-ink-600); font-size:.85rem; font-weight:600;
  margin-left:2px; border-radius:8px!important;
}
.pagination .page-item.active .page-link{background:var(--spk-forest-700); border-color:var(--spk-forest-700); color:#fff;}
.pagination .page-item.disabled .page-link{color:var(--spk-ink-400); background:transparent;}
.pagination .page-link:hover{background:var(--spk-forest-100); color:var(--spk-forest-700);}
.panel-pagination{
  border-top:1px solid var(--spk-line);
  padding:.9rem 1rem;
  background:#FBFAF6;
}
.panel-pagination .pagination{gap:.25rem; flex-wrap:wrap;}

/* Nav pills bertema (mis. tab Validasi) */
.nav-pills .nav-link{color:var(--spk-ink-600); font-weight:600; font-size:.9rem; background:#fff; border:1px solid var(--spk-line);}
.nav-pills .nav-link .badge{background:var(--spk-cream-2)!important; color:var(--spk-ink-600)!important;}
.nav-pills .nav-link.active{background:var(--spk-forest-700); border-color:var(--spk-forest-700); color:#fff;}
.nav-pills .nav-link.active .badge{background:rgba(255,255,255,.2)!important; color:#fff!important;}

/* Nav tabs bergaya pill di dalam modal */
.modal .nav-tabs{border-bottom:1px solid var(--spk-line); gap:.25rem;}
.modal .nav-tabs .nav-link{border:none; border-radius:999px; color:var(--spk-ink-600); font-weight:600; font-size:.88rem; padding:.45rem 1rem;}
.modal .nav-tabs .nav-link.active{background:var(--spk-forest-100); color:var(--spk-forest-700);}
.modal-header{border-bottom:1px solid var(--spk-line); padding:1.25rem 1.5rem;}
.modal-header .modal-title{font-family:var(--spk-font-display); font-weight:600; font-size:1.15rem;}
.modal-footer{border-top:1px solid var(--spk-line); padding:1.1rem 1.5rem;}
.modal-body{padding:1.5rem;}
.detail-modal .modal-header{
  background:linear-gradient(180deg, #fff, #FBFAF6);
}
.detail-title-wrap{
  min-width:0;
}
.detail-title-wrap .modal-title{
  line-height:1.25;
}
.detail-subtitle{
  color:var(--spk-ink-400);
  font-size:.86rem;
  margin-top:.2rem;
}
.detail-hero{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
  border:1px solid rgba(47,107,69,.14);
  border-radius:var(--spk-radius-sm);
  background:linear-gradient(180deg, #fff, #FBFAF6);
  box-shadow:0 16px 34px -30px rgba(19,36,23,.45);
}
.detail-hero .badge-status{
  flex:0 0 auto;
}
.detail-meta-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.75rem;
}
.detail-field,
.detail-card{
  border:1px solid var(--spk-line);
  border-radius:var(--spk-radius-sm);
  background:#fff;
  padding:.85rem .95rem;
}
.detail-field-label{
  color:var(--spk-ink-400);
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.28rem;
}
.detail-field-value{
  color:var(--spk-ink-800);
  font-weight:700;
  overflow-wrap:anywhere;
}
.detail-section-title{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--spk-ink-800);
  font-size:.92rem;
  font-weight:800;
  margin-bottom:.55rem;
}
.detail-section-title i{
  color:var(--spk-forest-600);
}
.detail-content{
  border:1px solid var(--spk-line);
  border-radius:var(--spk-radius-sm);
  background:#FBFAF6;
  color:var(--spk-ink-700);
  line-height:1.65;
  padding:1rem;
  min-height:3rem;
  overflow-wrap:anywhere;
}
.detail-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.detail-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:1px solid rgba(47,107,69,.14);
  border-radius:999px;
  background:var(--spk-forest-100);
  color:var(--spk-forest-800);
  font-size:.78rem;
  font-weight:700;
  padding:.32rem .62rem;
}
.detail-card{
  height:100%;
  box-shadow:0 14px 30px -28px rgba(19,36,23,.35);
}
.detail-card .nutrient-chip{
  vertical-align:middle;
}
.detail-modal .modal-body > p:first-child{
  border:1px solid rgba(47,107,69,.14);
  border-radius:var(--spk-radius-sm);
  background:linear-gradient(180deg, #fff, #FBFAF6);
  color:var(--spk-ink-600);
  padding:.85rem 1rem;
}
.detail-modal .detail-content + p.small.text-muted-2{
  display:none;
}

/* =========================================================
   Elemen yang dipakai berulang lintas halaman
   ========================================================= */
.avatar-circle{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--spk-forest-100); color:var(--spk-forest-700);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--spk-line);
}
.count-badge{
  background:var(--spk-gold); color:#3B2C0E; font-size:.7rem; font-weight:700;
  border-radius:999px; padding:.15em .55em; margin-left:auto;
}
.role-label{
  display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.85rem; color:var(--spk-ink-900);
}
.role-label::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--spk-forest-500); flex-shrink:0;
}
.icon-circle-lg{
  width:72px; height:72px; border-radius:50%; margin:0 auto;
  background:var(--spk-forest-100); color:var(--spk-forest-700);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.icon-circle-lg.sm{width:64px; height:64px; font-size:1.5rem;}

/* Timeline aktivitas ringkas (dashboard) */
.activity-item{display:flex; gap:.85rem; padding:.65rem 0; border-bottom:1px solid var(--spk-line);}
.activity-item:last-child{border-bottom:none; padding-bottom:0;}
.activity-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; background:var(--spk-forest-100); color:var(--spk-forest-700);
}
.activity-icon.soil{background:var(--spk-soil-100); color:var(--spk-soil-600);}

/* mobile off-canvas sidebar helper */
@media (max-width:991.98px){
  .detail-meta-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  body.sidebar-open{overflow:hidden;}
  .dash-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(286px, 84vw);
    height:100dvh;
    left:0;
    z-index:1060;
    transform:translateX(-102%);
    transition:transform .24s ease;
    box-shadow:0 24px 70px -34px rgba(19,36,23,.72);
  }
  .dash-sidebar.show{transform:translateX(0);}
  .dash-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:1050;
    background:rgba(19,36,23,.46);
    opacity:0;
    pointer-events:none;
    backdrop-filter:blur(2px);
    transition:opacity .2s ease;
  }
  .dash-overlay.show{
    opacity:1;
    pointer-events:auto;
  }
}

@media (max-width:767.98px){
  .section-pad{padding:3.25rem 0;}
  .hero-spk{border-radius:0 0 28px 28px;}
  .spk-stepper li span.label{display:none;}
  .dash-content{padding:1rem;}
  .panel-header{align-items:flex-start; flex-direction:column;}
  .detail-hero{display:block;}
  .detail-hero .badge-status{margin-top:.75rem;}
  .detail-meta-grid{grid-template-columns:1fr;}
  .btn-detail span{display:none;}
  .btn-detail{width:38px; min-width:38px; padding:.42rem 0;}
  .btn{white-space:normal;}
  .table-responsive{border-radius:var(--spk-radius-sm);}
  .spk-toast-container{left:1rem; right:1rem; bottom:1rem;}
  .spk-toast{max-width:none;}
}

/* =========================================================
   Sentuhan akhir
   ========================================================= */

/* Scrollbar halus, selaras palet (WebKit) */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(47,107,69,.34); border-radius:999px; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--spk-forest-400);}

.dash-sidebar::-webkit-scrollbar{width:6px;}
.dash-sidebar::-webkit-scrollbar-track{background:var(--spk-forest-900);}
.dash-sidebar::-webkit-scrollbar-thumb{
  background:rgba(228,238,230,.32);
  border:1px solid var(--spk-forest-900);
  border-radius:999px;
  background-clip:content-box;
}
.dash-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(228,238,230,.55);}

/* Seleksi teks bertema */
::selection{background:var(--spk-forest-700); color:#fff;}

/* Animasi masuk halus untuk konten hero */
@keyframes spk-rise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-spk .hero-eyebrow,
.hero-spk h1,
.hero-spk .lead-text,
.hero-spk .d-flex.flex-wrap.gap-3{
  animation:spk-rise .6s cubic-bezier(.16,1,.3,1) both;
}
.hero-spk h1{animation-delay:.05s;}
.hero-spk .lead-text{animation-delay:.1s;}
.hero-spk .d-flex.flex-wrap.gap-3{animation-delay:.15s;}
.hero-spk svg.root-motif,
.hero-spk .cassava-asset-shell{animation:spk-rise .8s cubic-bezier(.16,1,.3,1) .1s both;}

@media (prefers-reduced-motion: reduce){
  .hero-spk .hero-eyebrow, .hero-spk h1, .hero-spk .lead-text,
  .hero-spk .d-flex.flex-wrap.gap-3, .hero-spk svg.root-motif,
  .hero-spk .cassava-asset-shell{ animation:none; }
}

/* =========================================================
   Hero — panggung ilustrasi + kartu mengambang (pipeline)
   ========================================================= */
.hero-stage{position:relative; min-height:460px;}
.cassava-asset-shell{
  position:relative;
  width:min(374px, 79%);
  aspect-ratio:1 / 1;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,.04) 48%, transparent 70%),
    radial-gradient(circle at 55% 45%, rgba(95,162,116,.26), transparent 58%);
}
.cassava-asset-shell::before{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:rgba(255,255,255,.04);
}
.cassava-asset-img{
  position:relative;
  z-index:1;
  width:84%!important;
  height:84%!important;
  max-width:286px;
  object-fit:contain!important;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.28)) saturate(1.02);
}
.hero-float-card{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.97); color:var(--spk-ink-900);
  border-radius:var(--spk-radius-sm); padding:.6rem .9rem;
  box-shadow:var(--spk-shadow-lg);
  font-size:.8rem; font-weight:600; z-index:2;
  animation:spk-float 5s ease-in-out infinite;
}
.hero-float-card .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.hero-float-card small{display:block; font-weight:500; color:var(--spk-ink-400); font-size:.68rem; font-family:var(--spk-font-mono); letter-spacing:.03em; text-transform:uppercase;}
.hero-float-card.card-a{top:6%; left:-2%; animation-delay:.2s;}
.hero-float-card.card-b{bottom:20%; right:-4%; animation-delay:1.1s;}
.hero-float-card.card-c{bottom:-2%; left:14%; animation-delay:2s;}
@keyframes spk-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes spk-pulse{
  0%{box-shadow:0 0 0 0 rgba(199,154,60,.55);}
  70%{box-shadow:0 0 0 12px rgba(199,154,60,0);}
  100%{box-shadow:0 0 0 0 rgba(199,154,60,0);}
}
.root-motif .pulse-node{animation:spk-pulse 2.4s ease-out infinite; transform-origin:center; border-radius:50%;}
@media (prefers-reduced-motion: reduce){
  .hero-float-card{animation:none;}
  .root-motif .pulse-node{animation:none;}
}
@media (max-width:991.98px){
  .hero-stage{min-height:auto;}
  .hero-float-card{position:static; margin:.5rem 0; animation:none; display:inline-flex;}
}

/* =========================================================
   Alur bertahap (proses) — kartu bernomor dengan konektor
   ========================================================= */
.process-track{position:relative;}
.process-track::before{
  content:""; position:absolute; top:34px; left:calc(16.6% + 6px); right:calc(16.6% + 6px);
  height:2px; background:repeating-linear-gradient(to right, var(--spk-line) 0 8px, transparent 8px 14px);
  z-index:0;
}
@media (max-width:767.98px){ .process-track::before{display:none;} }
.process-step{position:relative; z-index:1;}
.process-step .step-num{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--spk-forest-700); color:#fff; font-family:var(--spk-font-mono); font-weight:600;
  font-size:1rem; margin-bottom:1.1rem; box-shadow:0 0 0 6px var(--spk-cream);
}

/* =========================================================
   Timeline hasil konsultasi (kesimpulan → rekomendasi → dst.)
   ========================================================= */
.result-timeline{position:relative; padding-left:2.6rem;}
.result-timeline::before{
  content:""; position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:var(--spk-line);
}
.result-timeline .t-item{position:relative; margin-bottom:1.5rem;}
.result-timeline .t-item:last-child{margin-bottom:0;}
.result-timeline .t-dot{
  position:absolute; left:-2.6rem; top:2px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  background:var(--spk-forest-100); color:var(--spk-forest-700); border:3px solid var(--spk-cream);
}
.result-timeline .t-item.warning .t-dot{background:#FBF0D6; color:#8A6A16;}
.result-timeline .t-item.info .t-dot{background:var(--spk-soil-100); color:var(--spk-soil-600);}

/* =========================================================
   Cetak (khusus halaman Hasil Konsultasi)
   ========================================================= */
@media print{
  .navbar-spk, .footer-spk, .no-print{display:none!important;}
  body{background:#fff;}
  .panel, .result-block{box-shadow:none!important; border:1px solid #ccc!important;}
  .container{max-width:100%!important; padding:0!important;}
}

/* =========================================================
   Toast Notification
   ========================================================= */
.spk-toast-container{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  display:flex; flex-direction:column; gap:.65rem; pointer-events:none;
}
.spk-toast{
  display:flex; align-items:flex-start; gap:.75rem;
  background:#fff; border:1px solid var(--spk-line); border-radius:var(--spk-radius-sm);
  padding:.85rem 1.1rem; box-shadow:var(--spk-shadow-lg);
  max-width:340px; pointer-events:all;
  animation:spk-toast-in .3s cubic-bezier(.16,1,.3,1) both;
}
.spk-toast.hiding{ animation:spk-toast-out .25s ease forwards; }
.spk-toast-icon{ font-size:1.1rem; flex-shrink:0; margin-top:.05rem; }
.spk-toast-body{ flex:1; }
.spk-toast-title{ font-weight:700; font-size:.85rem; color:var(--spk-ink-900); line-height:1.3; }
.spk-toast-msg{ font-size:.82rem; color:var(--spk-ink-400); margin-top:.15rem; line-height:1.4; }
.spk-toast-close{ border:none; background:none; padding:0; color:var(--spk-ink-400); font-size:.85rem; cursor:pointer; flex-shrink:0; }
.spk-toast-close:hover{ color:var(--spk-ink-900); }
.spk-toast.success .spk-toast-icon{ color:var(--spk-forest-600); }
.spk-toast.error .spk-toast-icon{ color:var(--spk-danger); }
.spk-toast.warning .spk-toast-icon{ color:#8A6A16; }
.spk-toast.info .spk-toast-icon{ color:var(--spk-soil-500); }
@keyframes spk-toast-in{
  from{ opacity:0; transform:translateX(16px) scale(.97); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes spk-toast-out{
  from{ opacity:1; transform:translateX(0); max-height:120px; }
  to{ opacity:0; transform:translateX(20px); max-height:0; padding-top:0; padding-bottom:0; }
}

/* =========================================================
   Scroll-Reveal (Intersection Observer)
   ========================================================= */
[data-scroll-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
[data-scroll-reveal].revealed{ opacity:1; transform:translateY(0); }
[data-scroll-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-scroll-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-scroll-reveal][data-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  [data-scroll-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Button Loading State
   ========================================================= */
.btn.loading{
  pointer-events:none; opacity:.8; position:relative;
}
.btn.loading .btn-text{ visibility:hidden; }
.btn.loading::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:1.1em; height:1.1em; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:currentColor;
  animation:spk-spin .6s linear infinite;
}
.btn-outline-forest.loading::after{ border-top-color:var(--spk-forest-700); }
@keyframes spk-spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   Radio Card (Pilihan Fase Konsultasi)
   ========================================================= */
.radio-card{
  cursor:pointer; border:2px solid var(--spk-line); border-radius:var(--spk-radius);
  padding:1.25rem 1.4rem; display:flex; align-items:flex-start; gap:.9rem;
  background:#fff; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  user-select:none; height:100%;
}
.radio-card input[type="radio"]{ margin-top:.25rem; accent-color:var(--spk-forest-700); flex-shrink:0; }
.radio-card:hover{ border-color:var(--spk-forest-400); background:var(--spk-forest-100); }
.radio-card:has(input:checked){
  border-color:var(--spk-forest-700); background:var(--spk-forest-100);
  box-shadow:0 0 0 3px rgba(47,107,69,.12);
}
.radio-card .rc-title{ font-weight:700; color:var(--spk-forest-900); font-size:.95rem; }
.radio-card .rc-desc{ font-size:.83rem; color:var(--spk-ink-400); margin-top:.25rem; line-height:1.45; }
.radio-card:has(input:checked) .rc-title{ color:var(--spk-forest-700); }
.radio-card:has(input:checked) .rc-desc{ color:var(--spk-forest-600); }
.radio-card-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--spk-forest-100); color:var(--spk-forest-600);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  transition:background .18s ease, color .18s ease;
}
.radio-card:has(input:checked) .radio-card-icon{ background:var(--spk-forest-700); color:#fff; }

/* =========================================================
   Konsultasi Interaktif
   ========================================================= */
.consult-panel{
  position:relative;
  overflow:hidden;
}
.consult-panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--spk-forest-600), var(--spk-gold), var(--spk-soil-500));
}
.consult-quiz-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem;
}
.consult-quiz-count{
  font-family:var(--spk-font-mono); font-size:.78rem; font-weight:700;
  color:var(--spk-forest-700); background:var(--spk-forest-100);
  border:1px solid rgba(47,107,69,.14); border-radius:999px; padding:.45rem .75rem;
  white-space:nowrap;
}
.consult-quiz{
  border-radius:var(--spk-radius); background:linear-gradient(180deg, #fff, var(--spk-cream-2));
  border:1px solid var(--spk-line); padding:1rem;
}
.consult-quiz-track{
  height:8px; background:#fff; border:1px solid var(--spk-line); border-radius:999px;
  overflow:hidden; margin-bottom:1rem;
}
.consult-quiz-bar{
  height:100%; width:0; background:linear-gradient(90deg, var(--spk-forest-600), var(--spk-gold));
  border-radius:999px; transition:width .25s ease;
}
.consult-question-card{
  background:#fff; border:1px solid var(--spk-line); border-radius:var(--spk-radius);
  padding:clamp(1.25rem, 1rem + 1vw, 2rem); box-shadow:var(--spk-shadow-sm);
  min-height:340px; animation:spk-rise .28s cubic-bezier(.16,1,.3,1) both;
}
.consult-question-card.is-phase-hidden{display:none!important;}
.consult-question-meta{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem;
}
.consult-question-meta span{
  font-family:var(--spk-font-mono); font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--spk-forest-700); background:var(--spk-forest-100);
  border-radius:999px; padding:.3rem .65rem;
}
.consult-question-title{
  font-family:var(--spk-font-display); color:var(--spk-forest-900);
  font-size:clamp(1.25rem, 1.05rem + .9vw, 1.85rem); line-height:1.25; margin-bottom:.5rem;
}
.quiz-option-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.8rem;
}
.quiz-option-grid.two{grid-template-columns:repeat(2, minmax(0, 1fr));}
.quiz-option{
  display:block; position:relative; margin:0; cursor:pointer;
}
.quiz-option input{
  position:absolute; opacity:0; pointer-events:none;
}
.quiz-option span{
  min-height:64px; display:flex; align-items:center; gap:.5rem;
  border:2px solid var(--spk-line); border-radius:var(--spk-radius-sm);
  background:#fff; color:var(--spk-ink-700); padding:1rem 1.1rem; font-weight:700;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.quiz-option:hover span{
  border-color:var(--spk-forest-400); background:var(--spk-forest-100); transform:translateY(-1px);
}
.quiz-option input:checked + span{
  border-color:var(--spk-forest-700); background:var(--spk-forest-100);
  color:var(--spk-forest-800); box-shadow:0 0 0 3px rgba(47,107,69,.12);
}
.quiz-input-wrap{
  position:relative;
}
.quiz-input-wrap .form-control{padding-right:5rem;}
.quiz-input-wrap > span{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:var(--spk-ink-400); font-weight:700; font-size:.85rem;
}
.consult-question-foot{
  display:flex; justify-content:space-between; gap:1rem; margin-top:1.4rem; padding-top:1rem;
  border-top:1px solid var(--spk-line); color:var(--spk-ink-400); font-size:.8rem;
}
.consult-question-foot [data-question-answer-status].answered{
  color:var(--spk-forest-700); font-weight:700;
}
.consult-question-empty{
  text-align:center; background:#fff; border:1px solid var(--spk-line);
  border-radius:var(--spk-radius); padding:2.5rem 1.25rem;
}

.consult-page{
  background:
    linear-gradient(180deg, rgba(228,238,230,.55), rgba(250,247,239,0) 260px),
    linear-gradient(90deg, rgba(47,107,69,.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47,107,69,.055) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
  padding-bottom:1.5rem;
}
.consult-page > .container{
  max-width:1040px;
}
.consult-page .h2{
  color:var(--spk-forest-900);
  letter-spacing:0;
}
.consult-page .spk-stepper{
  background:rgba(255,255,255,.82); border:1px solid rgba(47,107,69,.12);
  border-radius:var(--spk-radius); padding:.85rem 1rem;
  box-shadow:0 14px 34px -28px rgba(19,36,23,.45);
  backdrop-filter:blur(10px);
}
.consult-page .spk-stepper li .num{
  width:34px; height:34px; background:#fff; box-shadow:0 1px 2px rgba(19,36,23,.08);
}
.consult-page .spk-stepper li.done .num{
  box-shadow:0 8px 18px -12px rgba(36,82,52,.8);
}
.consult-page .spk-stepper li.active .num{
  background:var(--spk-forest-100);
  box-shadow:0 0 0 6px rgba(95,162,116,.14), 0 10px 20px -14px rgba(36,82,52,.8);
}
.consult-panel{
  border-color:rgba(47,107,69,.14);
  border-radius:20px;
  box-shadow:0 28px 70px -46px rgba(19,36,23,.55), 0 1px 0 rgba(255,255,255,.8) inset;
}
.consult-panel [data-step-panel]:not(.d-none){
  animation:spk-step-in .24s cubic-bezier(.16,1,.3,1) both;
}
@keyframes spk-step-in{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.consult-panel .form-control,
.consult-panel .form-select{
  min-height:46px;
  border-color:rgba(47,107,69,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
.consult-panel .form-control:focus,
.consult-panel .form-select:focus{
  border-color:var(--spk-forest-500);
  box-shadow:0 0 0 .22rem rgba(95,162,116,.16);
}
.consult-quiz-head{
  padding:.35rem 0 .2rem;
}
.consult-quiz-count{
  box-shadow:0 8px 20px -16px rgba(36,82,52,.7);
}
.consult-quiz{
  padding:1.15rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,239,.92)),
    repeating-linear-gradient(135deg, rgba(47,107,69,.04) 0 1px, transparent 1px 14px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
.consult-quiz-track{
  height:10px; padding:2px; background:#fff;
  box-shadow:0 1px 2px rgba(19,36,23,.06) inset;
}
.consult-quiz-bar{
  box-shadow:0 5px 14px -7px rgba(199,154,60,.85);
}
.consult-question-card{
  position:relative;
  border-radius:18px;
  border-color:rgba(47,107,69,.14);
  box-shadow:0 20px 46px -34px rgba(19,36,23,.42);
}
.consult-question-card.answered-pulse{
  animation:spk-answer-pulse .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes spk-answer-pulse{
  0%{transform:scale(1);}
  45%{transform:scale(1.006);}
  100%{transform:scale(1);}
}
.consult-question-card::before{
  content:"Pertanyaan " attr(data-question-index);
  position:absolute; right:1.25rem; top:1.15rem;
  font-family:var(--spk-font-mono); font-size:.68rem; font-weight:800;
  color:rgba(36,82,52,.34); letter-spacing:.04em; text-transform:uppercase;
}
.consult-question-meta{padding-right:7.5rem;}
.consult-question-meta span{
  background:#F1F7F2;
  border:1px solid rgba(47,107,69,.08);
}
.consult-question-title{
  max-width:780px;
}
.quiz-option-grid{gap:1rem;}
.quiz-option span{
  position:relative; min-height:74px; border-radius:14px;
  box-shadow:0 1px 2px rgba(19,36,23,.06);
}
.quiz-option span::after{
  content:""; width:22px; height:22px; border:2px solid var(--spk-line); border-radius:50%;
  margin-left:auto; flex:0 0 auto; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.quiz-option:hover span{
  box-shadow:0 14px 26px -24px rgba(19,36,23,.65);
}
.quiz-option input:checked + span{
  box-shadow:0 0 0 3px rgba(47,107,69,.12), 0 16px 30px -25px rgba(19,36,23,.75);
}
.quiz-option input:checked + span::after{
  border-color:var(--spk-forest-700);
  background:var(--spk-forest-700);
  box-shadow:inset 0 0 0 5px #fff;
}
.quiz-input-wrap .form-control,
.consult-question-card textarea.form-control{
  border-radius:16px;
  background:linear-gradient(180deg, #fff, #FDFCF8);
  font-weight:650;
}
.consult-question-foot{
  background:var(--spk-cream-2);
  border:1px solid var(--spk-line);
  border-radius:12px;
  padding:.75rem .9rem;
}
.consult-actions{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.35rem; padding-top:1.15rem; border-top:1px solid var(--spk-line);
}
.consult-actions .btn{
  min-height:44px; border-radius:999px; padding-inline:1.15rem;
}
.consult-actions .btn-forest{
  box-shadow:0 12px 24px -16px rgba(36,82,52,.75);
}

/* =========================================================
   Empty State
   ========================================================= */
.spk-empty-state{
  text-align:center; padding:3.5rem 1.5rem;
}
.spk-empty-state .es-icon{
  width:72px; height:72px; border-radius:50%; background:var(--spk-forest-100);
  color:var(--spk-forest-400); font-size:1.8rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
}
.spk-empty-state h6{ font-size:1.05rem; color:var(--spk-ink-900); margin-bottom:.4rem; }
.spk-empty-state p{ color:var(--spk-ink-400); font-size:.88rem; max-width:280px; margin:0 auto; }

/* =========================================================
   Hasil Konsultasi — Animasi timeline fade-in berurutan
   ========================================================= */
.result-timeline .t-item{
  opacity:0; transform:translateY(12px);
  animation:spk-rise .5s cubic-bezier(.16,1,.3,1) forwards;
}
.result-timeline .t-item:nth-child(1){ animation-delay:.1s; }
.result-timeline .t-item:nth-child(2){ animation-delay:.22s; }
.result-timeline .t-item:nth-child(3){ animation-delay:.34s; }
.result-timeline .t-item:nth-child(4){ animation-delay:.46s; }
.result-timeline .t-item:nth-child(5){ animation-delay:.58s; }
.result-timeline .t-item:nth-child(6){ animation-delay:.7s; }
@media (prefers-reduced-motion: reduce){
  .result-timeline .t-item{ opacity:1; transform:none; animation:none; }
}

/* Kartu kode konsultasi */
.consultation-code-card{
  background:linear-gradient(135deg, var(--spk-forest-800), var(--spk-forest-700));
  color:#fff; border-radius:var(--spk-radius); padding:1.25rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.5rem;
}
.consultation-code-card .code-val{
  font-family:var(--spk-font-mono); font-size:1.25rem; font-weight:700;
  letter-spacing:.06em; color:#fff;
}
.consultation-code-card .code-label{
  font-size:.78rem; color:rgba(255,255,255,.65); text-transform:uppercase;
  letter-spacing:.06em; font-family:var(--spk-font-mono);
}
.btn-copy-code{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:999px; padding:.4rem 1rem; font-size:.82rem;
  font-weight:600; cursor:pointer; transition:background .15s ease;
  display:flex; align-items:center; gap:.4rem; flex-shrink:0;
}
.btn-copy-code:hover{ background:rgba(255,255,255,.25); }
.btn-copy-code.copied{ background:rgba(95,162,116,.45); }

/* =========================================================
   Riwayat — hint card
   ========================================================= */
.riwayat-hint-card{
  background:var(--spk-forest-100); border-radius:var(--spk-radius);
  padding:1.1rem 1.35rem; display:flex; align-items:flex-start; gap:.85rem;
  border:1px solid rgba(47,107,69,.15);
}
.riwayat-hint-card .hint-icon{
  width:36px; height:36px; border-radius:10px;
  background:var(--spk-forest-700); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}

/* =========================================================
   Rule detail — IF/THEN visual
   ========================================================= */
.rule-if-badge, .rule-then-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--spk-font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.05em; padding:.3em .8em; border-radius:999px; text-transform:uppercase;
}
.rule-if-badge{ background:var(--spk-forest-100); color:var(--spk-forest-700); }
.rule-then-badge{ background:#FBF0D6; color:#8A6A16; }
.rule-detail-block{
  background:var(--spk-cream-2); border-radius:var(--spk-radius-sm);
  padding:.85rem 1.1rem; font-size:.88rem; line-height:1.65;
  border:1px solid var(--spk-line);
}
.rule-detail-block code{
  font-family:var(--spk-font-mono); font-size:.82rem;
  background:rgba(47,107,69,.08); color:var(--spk-forest-700);
  padding:.1em .45em; border-radius:4px;
}

@media (max-width:767.98px){
  .spk-toast-container{left:1rem; right:1rem; bottom:1rem;}
  .spk-toast{max-width:none;}
  .dash-content .table-responsive{overflow:visible;}
  .dash-content .table-spk thead{display:none;}
  .dash-content .table-spk,
  .dash-content .table-spk tbody,
  .dash-content .table-spk tr,
  .dash-content .table-spk td{display:block; width:100%;}
  .dash-content .table-spk tbody tr{
    border:1px solid var(--spk-line);
    border-radius:var(--spk-radius-sm);
    box-shadow:var(--spk-shadow-sm);
    margin:.8rem;
    overflow:hidden;
  }
  .dash-content .table-spk td{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    border-bottom:1px solid rgba(222,220,209,.72);
    padding:.75rem .9rem;
    text-align:right!important;
  }
  .dash-content .table-spk td::before{
    content:attr(data-label);
    color:var(--spk-ink-400);
    font-weight:700;
    text-align:left;
    max-width:45%;
  }
  .dash-content .table-spk td:first-child{
    display:block;
    text-align:left!important;
    background:#FBFAF6;
  }
  .dash-content .table-spk td:first-child::before{display:none;}
  .dash-content .table-spk td:last-child{border-bottom:none;}
  .validation-card-header{flex-direction:column;}
  .validation-actions .btn{width:100%;}
  .consult-quiz-head{align-items:flex-start; flex-direction:column;}
  .consult-quiz{padding:.75rem;}
  .consult-question-card{min-height:0; padding:1.1rem;}
  .consult-question-card::before{position:static; display:block; margin-bottom:.65rem;}
  .consult-question-meta{padding-right:0;}
  .quiz-option-grid,
  .quiz-option-grid.two{grid-template-columns:1fr;}
  .quiz-option span{min-height:56px;}
  .consult-question-foot{flex-direction:column; gap:.35rem;}
  .consult-actions{position:sticky; bottom:0; z-index:5; background:rgba(255,255,255,.94); margin-inline:-1.1rem; padding:1rem 1.1rem; backdrop-filter:blur(10px);}
  .consult-actions .btn{flex:1; min-width:0; padding-inline:.8rem;}
}


/* =========================================================
   V8 — Pupuk visual & rekomendasi praktis
   ========================================================= */
.fertilizer-symbol{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--spk-forest-100);color:var(--spk-forest-700);font-size:1.25rem;flex:0 0 auto;
}
.nutrient-chip{
  display:inline-flex;align-items:center;padding:.28rem .58rem;border-radius:999px;
  background:var(--spk-cream-2);border:1px solid var(--spk-line);font-family:var(--spk-font-mono);
  font-size:.76rem;font-weight:600;color:var(--spk-forest-800);
}
.recommendation-fertilizer-summary{
  border-left:3px solid var(--spk-forest-500);padding:.5rem .7rem;background:var(--spk-forest-100);
  border-radius:0 8px 8px 0;font-size:.82rem;color:var(--spk-forest-800);
}
.product-admin-card{border:1px solid var(--spk-line);border-radius:14px;overflow:hidden;background:#fff;}
.product-image-wrap{height:180px;background:var(--spk-cream-2);display:flex;align-items:center;justify-content:center;}
.product-image{width:100%;height:100%;object-fit:contain;background:#fff;}
.product-image-placeholder{display:flex;flex-direction:column;gap:.4rem;align-items:center;color:var(--spk-ink-400);}
.product-image-placeholder i{font-size:2rem;}
.fertilizer-form-row{background:#fff;}

.fertilizer-result-card{
  background:#fff;border:1px solid var(--spk-line);border-radius:18px;padding:1.15rem;
  box-shadow:var(--spk-shadow-sm);display:flex;flex-direction:column;gap:.8rem;
}
.fertilizer-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.dose-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.dose-box{border:1px solid var(--spk-line);background:var(--spk-cream);border-radius:12px;padding:.8rem;}
.dose-box.emphasized{background:var(--spk-forest-100);border-color:rgba(47,107,69,.2);}
.dose-label{display:block;font-size:.72rem;color:var(--spk-ink-400);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem;}
.dose-box strong{display:block;color:var(--spk-forest-900);font-size:1.03rem;}
.dose-box small{display:block;color:var(--spk-ink-600);margin-top:.2rem;}
.fertilizer-info-block{padding-top:.25rem;}
.fertilizer-info-block strong{font-size:.85rem;color:var(--spk-forest-800);}
.fertilizer-info-block p{font-size:.88rem;margin:.25rem 0 0;}
.fertilizer-details{border:1px solid var(--spk-line);border-radius:10px;padding:.65rem .75rem;font-size:.86rem;}
.fertilizer-details summary{font-weight:700;color:var(--spk-forest-800);cursor:pointer;}
.fertilizer-details div{margin-top:.55rem;color:var(--spk-ink-600);}
.fertilizer-caution{background:#FFF7E5;border:1px solid #E9D7A7;border-radius:10px;padding:.7rem;font-size:.82rem;color:#735815;}
.example-products{border-top:1px dashed var(--spk-line);padding-top:.85rem;}
.example-product{display:flex;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--spk-line);}
.example-product:last-of-type{border-bottom:0;}
.example-product-image{width:72px;height:72px;flex:0 0 72px;border:1px solid var(--spk-line);border-radius:10px;overflow:hidden;background:var(--spk-cream-2);}
.example-product-image img{width:100%;height:100%;object-fit:contain;background:#fff;}
.example-product-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:var(--spk-ink-400);font-size:1.4rem;}
.brand-disclaimer{margin-top:.7rem;background:var(--spk-cream-2);border-radius:10px;padding:.65rem;font-size:.77rem;color:var(--spk-ink-600);}

@media(max-width:575.98px){
  .dose-grid{grid-template-columns:1fr;}
  .fertilizer-result-card{padding:1rem;}
}
@media print{
  .fertilizer-result-card{break-inside:avoid;box-shadow:none;}
  .example-product-image{width:58px;height:58px;flex-basis:58px;}
}

/* =========================================================
   V9 — Konsultasi publik lebih modern
   ========================================================= */
.consult-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(95,162,116,.14), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(199,154,60,.12), transparent 26%),
    linear-gradient(90deg, rgba(47,107,69,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47,107,69,.045) 1px, transparent 1px),
    #F8FAF5;
  background-size:auto, auto, 40px 40px, 40px 40px, auto;
}
.consult-page > .container{
  max-width:1100px;
  padding-top:2.5rem!important;
}
.consult-page .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:.28rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(47,107,69,.12);
  box-shadow:0 10px 24px -22px rgba(19,36,23,.45);
}
.consult-page .h2{
  font-size:clamp(2rem, 1.45rem + 2vw, 3rem);
  line-height:1.08;
}
.consult-page .row.justify-content-center.mb-4{
  margin-bottom:2rem!important;
}
.consult-progress-shell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(47,107,69,.14);
  border-radius:22px;
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 58px -42px rgba(19,36,23,.55), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(12px);
  padding:1.05rem 1.15rem 1rem;
}
.consult-progress-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--spk-forest-600), var(--spk-gold), var(--spk-soil-500));
}
.consult-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
  color:var(--spk-ink-500);
  font-size:.82rem;
}
.consult-progress-head span{
  display:inline-flex;
  align-items:center;
  color:var(--spk-forest-700);
  font-weight:800;
}
.consult-progress-head strong{
  color:var(--spk-ink-700);
  font-family:var(--spk-font-mono);
  font-size:.78rem;
  background:var(--spk-forest-100);
  border:1px solid rgba(47,107,69,.12);
  border-radius:999px;
  padding:.32rem .7rem;
  white-space:nowrap;
}
.consult-progress-shell .spk-stepper{
  gap:.25rem;
  margin-bottom:.95rem;
}
.consult-progress-shell .spk-stepper li{
  color:var(--spk-ink-400);
}
.consult-progress-shell .spk-stepper li::after{
  top:19px;
  height:3px;
  left:calc(50% + 19px);
  width:calc(100% - 38px);
  border-radius:999px;
  background:#E4E4DA;
}
.consult-progress-shell .spk-stepper li .num{
  width:38px;
  height:38px;
  margin-bottom:.48rem;
  border:1px solid rgba(47,107,69,.14);
  box-shadow:0 4px 14px -12px rgba(19,36,23,.55);
}
.consult-progress-shell .spk-stepper li.done .num{
  background:var(--spk-forest-700);
  border-color:var(--spk-forest-700);
  color:#fff;
}
.consult-progress-shell .spk-stepper li.done .num::before{
  content:"\F26E";
  font-family:"bootstrap-icons";
  font-size:1rem;
}
.consult-progress-shell .spk-stepper li.done .num{
  font-size:0;
}
.consult-progress-shell .spk-stepper li.done::after{
  background:linear-gradient(90deg, var(--spk-forest-600), var(--spk-forest-400));
}
.consult-progress-shell .spk-stepper li.active .num{
  background:#fff;
  border-color:var(--spk-forest-700);
  color:var(--spk-forest-800);
  box-shadow:0 0 0 7px rgba(95,162,116,.14), 0 12px 24px -18px rgba(19,36,23,.75);
  transform:none;
}
.consult-progress-shell .spk-stepper li.active .label{
  color:var(--spk-forest-800);
}
.consult-progress-shell .spk-stepper .label{
  font-size:.78rem;
}
.consult-progress-track{
  height:8px;
  background:#ECECE3;
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(19,36,23,.08);
}
.consult-progress-track .progress-bar{
  background:linear-gradient(90deg, var(--spk-forest-700), var(--spk-forest-500), var(--spk-gold));
  border-radius:999px;
  box-shadow:0 6px 18px -10px rgba(47,107,69,.9);
  transition:width .28s cubic-bezier(.16,1,.3,1);
}
.consult-panel.form-panel{
  border:1px solid rgba(47,107,69,.14);
  border-radius:24px;
  background:rgba(255,255,255,.92);
  box-shadow:0 32px 80px -54px rgba(19,36,23,.58), 0 1px 0 rgba(255,255,255,.9) inset;
  padding:clamp(1.25rem, 1rem + 2vw, 2.85rem);
}
.consult-panel::before{
  height:6px;
  background:linear-gradient(90deg, var(--spk-forest-700), var(--spk-forest-500), var(--spk-gold), var(--spk-soil-500));
}
.consult-panel [data-step-panel] > .d-flex.align-items-center.gap-3.mb-1,
.consult-quiz-head{
  margin-bottom:.6rem!important;
}
.consult-panel [data-step-panel] > p.text-muted-2.small.mb-4{
  max-width:820px;
  font-size:.94rem;
  line-height:1.65;
}
.consult-panel .icon-tile{
  border-radius:14px!important;
  box-shadow:0 12px 24px -20px rgba(19,36,23,.55);
}
.consult-panel h5{
  color:var(--spk-ink-900);
  font-size:1.35rem;
  letter-spacing:0;
}
.consult-panel .form-control,
.consult-panel .form-select{
  min-height:52px;
  border-radius:16px;
  background-color:#fff;
}
.consult-actions{
  margin-top:1.75rem;
  padding-top:1.35rem;
}
.consult-actions .btn{
  min-height:52px;
  padding-inline:1.45rem;
  font-weight:800;
}

@media (max-width:767.98px){
  .consult-page > .container{padding-top:1.5rem!important;}
  .consult-page .row.justify-content-center.mb-4{text-align:left;}
  .consult-progress-shell{padding:.9rem; border-radius:18px;}
  .consult-progress-head{align-items:flex-start; flex-direction:column; gap:.5rem;}
  .consult-progress-shell .spk-stepper{
    overflow-x:auto;
    padding-bottom:.2rem;
    scrollbar-width:none;
  }
  .consult-progress-shell .spk-stepper::-webkit-scrollbar{display:none;}
  .consult-progress-shell .spk-stepper li{
    flex:0 0 74px;
  }
  .consult-progress-shell .spk-stepper li span.label{
    display:block;
    font-size:.68rem;
  }
  .consult-progress-shell .spk-stepper li::after{
    width:42px;
  }
  .consult-panel.form-panel{
    border-radius:20px;
  }
}

/* =========================================================
   V10 — Typography publik lebih rapi dan modern
   ========================================================= */
.navbar-spk .navbar-brand{
  font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size:1.2rem;
  font-weight:760;
  letter-spacing:0;
}
.navbar-spk .nav-link{
  font-family:"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size:.9rem;
  font-weight:650;
  letter-spacing:0;
}
.navbar-spk .btn{
  font-weight:720;
  letter-spacing:0;
}
.hero-spk h1{
  max-width:640px;
  font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size:clamp(2.05rem, 1.58rem + 1.75vw, 3.28rem);
  font-weight:590;
  line-height:1.15;
  letter-spacing:0;
}
.hero-spk h1 em{
  display:inline;
  font-family:inherit;
  font-style:normal;
  font-weight:720;
  letter-spacing:0;
  color:#8DD29B;
  text-shadow:0 14px 34px rgba(95,162,116,.18);
}
.hero-spk .lead-text{
  font-family:"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size:clamp(1rem, .94rem + .22vw, 1.13rem);
  font-weight:480;
  line-height:1.72;
  letter-spacing:0;
  color:rgba(255,255,255,.78);
  max-width:32rem;
}
.hero-spk .hero-eyebrow{
  font-family:var(--spk-font-mono);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.075em;
}
.hero-spk .btn-lg{
  font-size:1rem;
  font-weight:720;
  letter-spacing:0;
}
.hero-trust-list{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.35rem;
  padding-bottom:.25rem;
}
.hero-trust-list span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:34px;
  padding:.42rem .72rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  font-size:.82rem;
  font-weight:650;
  backdrop-filter:blur(10px);
}
.hero-trust-list i{
  color:#8DD29B;
  font-size:.95rem;
}
.hero-spk .d-flex.flex-wrap.gap-4.mt-5 .font-display{
  display:block;
  color:rgba(255,255,255,.94);
  font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size:clamp(1.05rem, .95rem + .42vw, 1.28rem)!important;
  font-weight:720!important;
  letter-spacing:0;
}
.hero-spk .d-flex.flex-wrap.gap-4.mt-5 .small{
  color:rgba(255,255,255,.68)!important;
  font-weight:500;
}
.hero-float-card{
  font-family:"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:0;
}
.hero-float-card small{
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
}

@media (max-width:767.98px){
  .hero-spk h1{
    font-size:clamp(1.9rem, 1.32rem + 5vw, 2.65rem);
    letter-spacing:0;
  }
  .hero-spk .lead-text{
    font-size:1rem;
  }
}

/* =========================================================
   V11 - Widget dashboard lebih modern
   ========================================================= */
.dash-content > .row.g-3.mb-4{
  row-gap:1rem;
}
.dash-content > .row.g-3.mb-4 .col-6{
  display:flex;
}
.dash-content > .row.g-3.mb-4 .stat-card{
  width:100%;
}
.stat-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-color:rgba(47,107,69,.12);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(251,250,246,.92)),
    #fff;
  box-shadow:0 16px 38px -34px rgba(19,36,23,.46);
}
.stat-card::before{
  width:4px;
}
.stat-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(47,107,69,.055), transparent 36%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(47,107,69,.035) 12px 13px);
  opacity:.7;
  pointer-events:none;
}
.stat-card > *{
  position:relative;
  z-index:1;
}
.stat-card:hover{
  border-color:rgba(47,107,69,.2);
  box-shadow:0 24px 50px -38px rgba(19,36,23,.58);
}
.stat-card .stat-num{
  font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size:clamp(1.55rem, 1.18rem + 1.25vw, 2.15rem);
  font-weight:760;
  color:var(--spk-forest-900);
}
.stat-card .stat-label{
  margin-top:.35rem;
  color:var(--spk-ink-500);
  font-size:.84rem;
  font-weight:720;
}
.stat-card .stat-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 26px -22px rgba(19,36,23,.55);
}
.stat-card .stat-trend{
  width:max-content;
  max-width:100%;
  min-height:28px;
  padding:.32rem .58rem;
  border-radius:999px;
  background:rgba(47,107,69,.075);
  font-family:"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size:.76rem;
  font-weight:720;
}
.stat-card .stat-trend.warn{
  background:#FBF0D6;
}
.dash-content > .row.g-4 > [class*="col"] > .panel{
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 22px 54px -42px rgba(19,36,23,.46);
}
.dash-content > .row.g-4 > [class*="col"] > .panel .panel-header{
  min-height:72px;
  padding:1rem 1.35rem;
  background:
    linear-gradient(180deg, #fff, #FBFAF6);
  border-bottom-color:rgba(47,107,69,.12);
}
.dash-content > .row.g-4 > [class*="col"] > .panel .panel-header strong{
  font-size:1.02rem;
  font-weight:780;
  color:var(--spk-ink-900);
}
.dash-content > .row.g-4 > [class*="col"] > .panel .panel-header a.small{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:.35rem .72rem;
  border:1px solid rgba(47,107,69,.16);
  border-radius:999px;
  background:#fff;
  color:var(--spk-forest-700);
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
}
.dash-content > .row.g-4 > [class*="col"] > .panel .panel-header a.small:hover{
  background:var(--spk-forest-100);
  border-color:rgba(47,107,69,.25);
}
.panel-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(47,107,69,.12);
  box-shadow:0 12px 24px -22px rgba(19,36,23,.5);
}
.dash-content > .row.g-4 .table-responsive{
  padding:.75rem 1rem 1rem;
}
.dash-content > .row.g-4 .table-spk{
  border:0;
}
.dash-content > .row.g-4 .table-spk thead th{
  top:0;
  border-bottom:0;
  background:#F6F7F1;
  color:var(--spk-ink-500);
  font-size:.72rem;
}
.dash-content > .row.g-4 .table-spk thead th:first-child{
  border-radius:10px 0 0 10px;
}
.dash-content > .row.g-4 .table-spk thead th:last-child{
  border-radius:0 10px 10px 0;
}
.dash-content > .row.g-4 .table-spk tbody tr{
  transition:background .16s ease, box-shadow .16s ease;
}
.dash-content > .row.g-4 .table-spk tbody tr:hover{
  background:#F8FBF6;
  box-shadow:inset 3px 0 0 var(--spk-forest-500);
}
.dash-content > .row.g-4 .table-spk td{
  padding:1.05rem 1rem;
}
.dash-content > .row.g-4 .table-spk td:nth-child(2){
  color:var(--spk-ink-900);
  font-weight:650;
}
.dash-content > .row.g-4 .btn-sm.btn-outline-forest{
  border-radius:999px;
  font-weight:720;
  padding:.42rem .9rem;
}
.dash-content > .row.g-4 .panel .panel-body{
  padding:1rem 1.35rem 1.35rem;
}
.activity-item{
  position:relative;
  gap:.9rem;
  padding:.9rem .55rem .9rem 0;
  border-bottom-color:rgba(222,220,209,.72);
}
.activity-item::before{
  content:"";
  position:absolute;
  left:15px;
  top:42px;
  bottom:-9px;
  width:1px;
  background:rgba(47,107,69,.14);
}
.activity-item:last-child::before{
  display:none;
}
.activity-icon{
  width:32px;
  height:32px;
  border:1px solid rgba(47,107,69,.12);
  box-shadow:0 10px 20px -18px rgba(19,36,23,.5);
}
.activity-item .small{
  color:var(--spk-ink-700);
  font-size:.91rem!important;
  line-height:1.45;
}
.activity-item .small strong{
  color:var(--spk-ink-900);
  font-weight:780;
}
.activity-item .text-muted-2{
  margin-top:.2rem;
  font-size:.78rem!important;
  color:var(--spk-ink-400)!important;
}

@media (max-width:767.98px){
  .stat-card{
    min-height:132px;
    padding:1.05rem;
  }
  .stat-card .stat-icon{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  .stat-card .stat-trend{
    font-size:.7rem;
  }
  .dash-content > .row.g-4 .table-responsive{
    padding:.35rem 0 .65rem;
  }
  .dash-content > .row.g-4 .panel .panel-body{
    padding:.85rem 1rem 1rem;
  }
}

/* =========================================================
   V12 - Header konten, pencarian, filter, dan aksi utama
   ========================================================= */
.dash-topbar{
  min-height:76px;
  padding:1rem 2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,246,.92));
  border-bottom:1px solid rgba(47,107,69,.12);
  box-shadow:0 18px 42px -40px rgba(19,36,23,.55);
}
.dash-topbar h5{
  color:var(--spk-ink-900);
  font-size:1.16rem;
  font-weight:780!important;
}
.dash-topbar .btn[data-toggle="sidebar"]{
  width:42px;
  height:42px;
  border:1px solid rgba(47,107,69,.14);
  border-radius:12px;
  color:var(--spk-forest-800);
  background:#fff;
}
.dash-topbar .avatar-circle{
  width:42px;
  height:42px;
  background:linear-gradient(135deg, var(--spk-forest-100), #fff);
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(47,107,69,.14), 0 12px 24px -22px rgba(19,36,23,.55);
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]),
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between){
  overflow:hidden;
  border:1px solid rgba(47,107,69,.13);
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(251,250,246,.9)),
    #fff;
  box-shadow:0 24px 58px -46px rgba(19,36,23,.5);
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .panel-body,
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .panel-body{
  position:relative;
  padding:1.05rem 1.15rem;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .panel-body::before,
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .panel-body::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, var(--spk-forest-600), var(--spk-gold));
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .row{
  align-items:center;
  row-gap:.75rem;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .input-group{
  min-height:48px;
  align-items:center;
  border:1px solid rgba(47,107,69,.14);
  border-radius:999px;
  background:#fff;
  box-shadow:0 12px 28px -28px rgba(19,36,23,.5);
  overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .input-group:focus-within{
  border-color:var(--spk-forest-500);
  box-shadow:0 0 0 .24rem rgba(95,162,116,.16), 0 14px 30px -28px rgba(19,36,23,.55);
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .input-group-text{
  width:52px;
  justify-content:center;
  border:0!important;
  background:transparent!important;
  color:var(--spk-forest-700);
  font-size:1rem;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .input-group .form-control{
  min-height:46px;
  border:0!important;
  border-radius:0!important;
  background:transparent;
  box-shadow:none!important;
  padding-left:0;
  font-size:.95rem;
  font-weight:560;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .input-group .form-control::placeholder{
  color:#A4AA9E;
  font-weight:520;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .form-select{
  min-height:48px;
  border-radius:999px!important;
  border-color:rgba(47,107,69,.14);
  background-color:#fff;
  box-shadow:0 12px 28px -30px rgba(19,36,23,.45);
  font-size:.93rem;
  font-weight:620;
  color:var(--spk-ink-800);
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .form-select:hover{
  border-color:rgba(47,107,69,.28);
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .btn{
  min-height:48px;
  border-radius:999px;
  font-weight:740;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .btn:not(.btn-forest){
  border-color:rgba(47,107,69,.14)!important;
  background:#fff;
  color:var(--spk-forest-800);
  box-shadow:0 12px 28px -30px rgba(19,36,23,.45);
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .btn:not(.btn-forest):hover{
  background:var(--spk-forest-100);
  border-color:rgba(47,107,69,.28)!important;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .btn-forest,
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .btn-forest{
  min-height:48px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, var(--spk-forest-700), var(--spk-forest-800));
  box-shadow:0 16px 30px -22px rgba(36,82,52,.85);
  font-weight:780;
}
.dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .btn-forest:hover,
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .btn-forest:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 36px -24px rgba(36,82,52,.9);
}
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .panel-body > .d-flex{
  align-items:center!important;
}
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) h5{
  color:var(--spk-ink-900);
  font-size:1.08rem;
  font-weight:780;
}
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .small.text-muted-2{
  max-width:760px;
  color:var(--spk-ink-500)!important;
  line-height:1.55;
}
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .btn-outline-forest{
  min-height:48px;
  border-radius:999px;
  background:#fff;
  font-weight:740;
  box-shadow:0 12px 28px -30px rgba(19,36,23,.45);
}
.dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .badge-status{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.4rem .8rem;
}

@media (max-width:767.98px){
  .dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .panel-body,
  .dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .panel-body{
    padding:.95rem;
  }
  .dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .panel-body > .d-flex{
    align-items:flex-start!important;
  }
  .dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .btn,
  .dash-content > .panel.mb-4:has(input[placeholder^="Cari"]) .btn{
    width:100%;
  }
  .dash-content > .panel.mb-4:has(.panel-body > .d-flex.justify-content-between) .d-flex.gap-2{
    width:100%;
    flex-direction:column;
  }
}

/* =========================================================
   V13 - Pupuk dan produk dipisah dalam satu menu
   ========================================================= */
.fertilizer-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  flex-wrap:wrap;
}
.fertilizer-tabs{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  min-height:48px;
  padding:.25rem;
  border:1px solid rgba(47,107,69,.14);
  border-radius:999px;
  background:#F6F7F1;
  box-shadow:inset 0 1px 2px rgba(19,36,23,.06);
}
.fertilizer-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:38px;
  padding:.48rem .95rem;
  border-radius:999px;
  color:var(--spk-ink-600);
  font-size:.88rem;
  font-weight:740;
  text-decoration:none;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.fertilizer-tabs a:hover{
  color:var(--spk-forest-800);
  background:rgba(255,255,255,.72);
}
.fertilizer-tabs a.active{
  background:#fff;
  color:var(--spk-forest-800);
  box-shadow:0 10px 22px -18px rgba(19,36,23,.5);
}
.fertilizer-tabs a i{
  font-size:.95rem;
}
.product-admin-card{
  border-color:rgba(47,107,69,.13);
  border-radius:16px;
  box-shadow:0 18px 40px -34px rgba(19,36,23,.45);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.product-admin-card:hover{
  transform:translateY(-2px);
  border-color:rgba(47,107,69,.24);
  box-shadow:0 26px 52px -38px rgba(19,36,23,.55);
}
.product-image-wrap{
  height:190px;
  background:
    linear-gradient(135deg, rgba(228,238,230,.72), rgba(251,250,246,.92));
}
.product-admin-card h6{
  color:var(--spk-ink-900);
  font-size:1.02rem;
  font-weight:760;
}
.fertilizer-admin-card,
.product-admin-card[data-bs-toggle="modal"]{
  cursor:pointer;
}
.fertilizer-admin-card{
  border-color:rgba(47,107,69,.13);
  border-radius:16px;
  box-shadow:0 18px 40px -34px rgba(19,36,23,.45);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.fertilizer-admin-card:hover,
.fertilizer-admin-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(47,107,69,.25);
  background:linear-gradient(135deg, #fff, #F8FBF6);
  box-shadow:0 26px 52px -38px rgba(19,36,23,.55);
}
.product-admin-card:focus-visible,
.fertilizer-admin-card:focus-visible{
  outline:3px solid rgba(95,162,116,.22);
  outline-offset:3px;
}

@media (max-width:767.98px){
  .fertilizer-toolbar{
    width:100%;
    justify-content:stretch;
  }
  .fertilizer-tabs{
    width:100%;
  }
  .fertilizer-tabs a{
    flex:1;
  }
}

/* =========================================================
   V14 - Step konsultasi data lahan lebih rapi
   ========================================================= */
.consult-land-step .text-muted-2.small{
  max-width:620px;
}
.land-input-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(180px, .55fr) minmax(180px, .55fr);
  gap:1rem;
  align-items:stretch;
}
.land-field{
  position:relative;
  min-height:126px;
  padding:1rem;
  border:1px solid rgba(47,107,69,.13);
  border-radius:18px;
  background:
    linear-gradient(180deg, #fff, #FDFCF8);
  box-shadow:0 16px 34px -32px rgba(19,36,23,.46);
}
.land-field .form-label{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.6rem;
  color:var(--spk-ink-700);
  font-size:.84rem;
  font-weight:780;
}
.land-field .form-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--spk-forest-500);
  box-shadow:0 0 0 4px rgba(95,162,116,.12);
}
.land-field .form-control,
.land-field .form-select{
  min-height:50px;
  border-radius:14px;
  border-color:rgba(47,107,69,.16);
  background-color:#fff;
  box-shadow:none;
}
.land-field textarea.form-control{
  min-height:50px;
  resize:vertical;
}
.land-field-location{
  grid-row:span 1;
}
.land-field:focus-within{
  border-color:rgba(47,107,69,.28);
  box-shadow:0 0 0 .24rem rgba(95,162,116,.13), 0 16px 34px -32px rgba(19,36,23,.46);
}

@media (max-width:991.98px){
  .land-input-grid{
    grid-template-columns:1fr 1fr;
  }
  .land-field-location{
    grid-column:1 / -1;
  }
}

@media (max-width:575.98px){
  .land-input-grid{
    grid-template-columns:1fr;
  }
  .land-field{
    min-height:auto;
    padding:.9rem;
  }
}

/* =========================================================
   V15 - Penanda pertanyaan opsional lebih jelas
   ========================================================= */
.consult-question-card[data-question-required="0"]{
  border-color:rgba(199,154,60,.28);
  background:
    linear-gradient(180deg, #fff, #FFFDF6);
}
.consult-question-meta .question-optional-badge,
.consult-question-meta .question-required-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:800;
}
.consult-question-meta .question-optional-badge{
  background:#FFF7E5;
  border-color:#E9D7A7;
  color:#735815;
}
.consult-question-meta .question-required-badge{
  background:#FDECEC;
  border-color:#F3C3C3;
  color:#9A3838;
}
.question-optional-note{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  width:max-content;
  max-width:100%;
  padding:.72rem .9rem;
  border:1px solid #E9D7A7;
  border-radius:12px;
  background:#FFF7E5;
  color:#735815;
  font-size:.88rem;
  line-height:1.45;
}
.question-optional-note i{
  flex:0 0 auto;
  margin-top:.08rem;
}
.consult-question-foot [data-question-answer-status].optional{
  color:#8A6A16;
  font-weight:800;
}
.consult-question-card[data-question-required="0"] .consult-question-foot{
  background:#FFF9EA;
  border-color:#E9D7A7;
}

/* =========================================================
   V16 - Status varietas sebagai pilihan kartu
   ========================================================= */
.variety-status-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
}
.variety-status-card{
  min-height:72px;
  padding:.78rem .85rem;
  border-radius:16px;
  background:#fff;
}
.variety-status-card .radio-card-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:1rem;
}
.variety-status-card .rc-title{
  font-size:.92rem;
}
.variety-status-card .rc-desc{
  font-size:.78rem;
}
.variety-status-card.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  background:#F1F0EA;
}
.variety-status-card.is-disabled *{
  cursor:not-allowed;
}

@media (min-width:992px){
  .variety-status-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V17 - Responsive publik mobile yang lebih modern
   ========================================================= */
@media (max-width:767.98px){
  body{
    font-size:15px;
    line-height:1.55;
  }

  .navbar-spk{
    padding:.55rem 0!important;
    background:rgba(247,246,241,.94);
    border-bottom:1px solid rgba(47,107,69,.12);
  }
  .navbar-spk .container{
    padding-inline:1rem;
  }
  .navbar-spk .navbar-brand{
    max-width:calc(100% - 54px);
    font-size:1rem;
    line-height:1.2;
    white-space:normal;
  }
  .navbar-spk .navbar-toggler{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fff;
    color:var(--spk-forest-800);
    box-shadow:0 10px 24px -22px rgba(19,36,23,.5);
  }
  .navbar-spk .navbar-collapse{
    margin-top:.75rem;
    padding:.8rem;
    border:1px solid rgba(47,107,69,.12);
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 46px -36px rgba(19,36,23,.5);
  }
  .navbar-spk .navbar-nav{
    gap:.2rem!important;
  }
  .navbar-spk .nav-link{
    min-height:40px;
    padding:.55rem .7rem!important;
    border-radius:10px;
    font-size:.9rem;
  }
  .navbar-spk .nav-link.active,
  .navbar-spk .nav-link:hover{
    background:var(--spk-forest-100);
  }
  .navbar-spk .nav-link.active::after{
    display:none;
  }
  .navbar-spk .btn{
    width:100%;
    min-height:42px;
    margin-top:.45rem;
  }

  .hero-spk{
    border-radius:0 0 24px 24px;
  }
  .hero-spk > .container{
    padding:5.4rem 1rem 1.35rem!important;
  }
  .hero-spk .row{
    gap:1.6rem;
  }
  .hero-spk .hero-eyebrow{
    min-height:28px;
    padding:.32rem .65rem;
    font-size:.62rem;
    letter-spacing:.04em;
  }
  .hero-spk h1{
    max-width:18rem;
    margin-top:.9rem!important;
    margin-bottom:.75rem!important;
    font-size:2rem;
    line-height:1.08;
    font-weight:720;
  }
  .hero-spk h1 em{
    display:block;
    font-weight:760;
  }
  .hero-spk .lead-text{
    max-width:20rem;
    margin-bottom:1rem!important;
    font-size:.9rem;
    line-height:1.55;
  }
  .hero-spk .d-flex.flex-wrap.gap-3{
    gap:.55rem!important;
  }
  .hero-spk .btn-lg{
    min-height:42px;
    padding:.58rem .9rem!important;
    font-size:.88rem;
  }
  .hero-spk .btn-lg:first-child{
    flex:1 1 100%;
  }
  .hero-spk .btn-lg + .btn-lg{
    flex:1 1 100%;
    background:rgba(255,255,255,.12)!important;
  }
  .hero-trust-list{
    gap:.45rem;
    margin-top:.85rem;
  }
  .hero-trust-list span{
    min-height:28px;
    padding:.28rem .55rem;
    font-size:.72rem;
  }
  .hero-stage{
    max-width:330px;
    margin:0 auto;
    min-height:286px;
    padding-top:.15rem;
    position:relative;
  }
  .root-motif{
    width:76%!important;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 16px 28px rgba(0,0,0,.28));
  }
  .cassava-asset-shell{
    width:73%;
    min-width:190px;
    max-width:275px;
  }
  .cassava-asset-img{
    width:86%!important;
    height:86%!important;
    max-width:220px;
    filter:drop-shadow(0 16px 28px rgba(0,0,0,.26)) saturate(1.04);
  }
  .hero-float-card{
    position:absolute;
    display:flex;
    width:auto;
    max-width:176px;
    min-height:38px;
    margin:0;
    padding:.45rem .58rem;
    border-radius:10px;
    font-size:.64rem;
    line-height:1.25;
    box-shadow:0 14px 28px -24px rgba(19,36,23,.55);
  }
  .hero-float-card small{
    font-size:.55rem;
    letter-spacing:.04em;
  }
  .hero-float-card.card-a{
    top:2px;
    left:0;
  }
  .hero-float-card.card-b{
    right:0;
    bottom:54px;
  }
  .hero-float-card.card-c{
    left:8px;
    bottom:4px;
  }

  .section-pad{
    padding:3.2rem 0;
  }
  .section-pad .container{
    padding-inline:1rem;
  }
  .section-pad .row.justify-content-center.text-center{
    margin-bottom:1.45rem!important;
  }
  .eyebrow{
    font-size:.64rem;
    letter-spacing:.055em;
  }
  .section-pad h2,
  .section-pad .h2{
    max-width:22rem;
    margin-inline:auto;
    font-size:1.45rem;
    line-height:1.18;
    font-weight:760;
  }
  .section-pad p.fs-5,
  .section-pad .text-muted-2.fs-5{
    max-width:22rem;
    margin-inline:auto;
    font-size:.94rem!important;
    line-height:1.65;
  }

  .feature-card{
    min-height:auto;
    padding:1.05rem;
    border-radius:12px;
    box-shadow:0 16px 38px -34px rgba(19,36,23,.5);
  }
  .feature-card h5{
    font-size:1rem;
    line-height:1.28;
  }
  .feature-card p{
    font-size:.84rem;
    line-height:1.55;
  }
  .icon-tile{
    width:44px;
    height:44px;
    border-radius:12px;
    font-size:1.05rem;
  }
  .process-track{
    gap:.8rem;
  }
  .process-track > [class*="col"]{
    margin-bottom:.25rem;
  }
  .process-step{
    display:grid;
    grid-template-columns:44px minmax(0, 1fr);
    column-gap:.9rem;
    align-items:start;
  }
  .process-step .step-num{
    grid-column:1;
    grid-row:1 / span 3;
    width:38px;
    height:38px;
    margin:0;
    font-size:.85rem;
    box-shadow:0 0 0 5px #fff;
  }
  .process-step .icon-tile{
    display:none;
  }
  .process-step h5,
  .process-step p{
    grid-column:2;
  }

  #informasi{
    padding-top:3rem;
    padding-bottom:3rem;
  }
  #informasi .row.align-items-center{
    gap:1.6rem!important;
  }
  #informasi .col-lg-5{
    text-align:left;
  }
  #informasi h2,
  #informasi p.fs-5{
    margin-inline:0;
  }
  #informasi .btn{
    width:100%;
    min-height:42px;
    margin-bottom:.2rem;
  }
  #informasi .col-lg-7 .row{
    row-gap:.9rem!important;
  }
  #informasi .d-flex.gap-3{
    align-items:flex-start;
    padding:.85rem;
    border:1px solid rgba(47,107,69,.1);
    border-radius:12px;
    background:rgba(255,255,255,.58);
  }
  #informasi h6{
    font-size:.9rem;
    font-weight:760;
  }

  #tentang{
    padding-top:3rem;
  }
  #tentang .row.justify-content-center{
    margin-bottom:1.4rem!important;
  }
  #tentang .feature-card{
    display:flex;
    align-items:center;
    gap:.9rem;
    text-align:left!important;
  }
  #tentang .feature-card .icon-tile{
    margin:0!important;
    flex:0 0 44px;
  }
  #tentang .feature-card h5{
    margin-bottom:.2rem;
  }

  section.pb-5{
    padding-bottom:3rem!important;
  }
  section.pb-5 .rounded-4{
    padding:1.35rem!important;
    border-radius:18px!important;
    text-align:left!important;
  }
  section.pb-5 h3{
    font-size:1.3rem;
    line-height:1.2;
  }
  section.pb-5 p{
    font-size:.9rem;
  }
  section.pb-5 .btn{
    width:100%;
    min-height:44px;
  }

  .footer-spk{
    padding-top:2.4rem!important;
  }
  .footer-spk .row{
    row-gap:1.4rem!important;
  }
  .footer-spk .font-display{
    font-size:1.05rem;
  }
  .footer-spk p,
  .footer-spk li,
  .footer-spk .small{
    font-size:.82rem;
    line-height:1.55;
  }
}

@media (max-width:374.98px){
  .hero-spk h1{
    font-size:1.78rem;
  }
  .hero-spk .lead-text{
    font-size:.84rem;
  }
  .hero-trust-list span{
    font-size:.68rem;
  }
  .hero-stage{
    min-height:260px;
  }
  .hero-float-card{
    max-width:158px;
    font-size:.6rem;
  }
  .section-pad h2,
  .section-pad .h2{
    font-size:1.32rem;
  }
  .process-step{
    grid-template-columns:38px minmax(0, 1fr);
    column-gap:.75rem;
  }
  .process-step .step-num{
    width:34px;
    height:34px;
  }
}

/* =========================================================
   V18 - Konsultasi publik mobile lebih compact dan rapi
   ========================================================= */
@media (max-width:767.98px){
  .consult-page{
    background-size:auto, auto, 34px 34px, 34px 34px, auto;
  }
  .consult-page > .container{
    padding:1.7rem .9rem 2.3rem!important;
  }
  .consult-page .row.justify-content-center.mb-4{
    margin-bottom:1.15rem!important;
    text-align:center;
  }
  .consult-page .eyebrow{
    min-height:28px;
    padding:.34rem .78rem;
    font-size:.64rem;
  }
  .consult-page .h2{
    max-width:20rem;
    margin-inline:auto;
    font-size:2rem;
    line-height:1.08;
    font-weight:780;
  }
  .consult-page .col-lg-9 > p.text-muted-2{
    max-width:21rem;
    margin:.8rem auto 0;
    font-size:.95rem;
    line-height:1.6;
  }

  .consult-progress-shell{
    margin-bottom:1rem!important;
    padding:.82rem;
    border-radius:18px;
    background:rgba(255,255,255,.9);
  }
  .consult-progress-head{
    flex-direction:row;
    align-items:center;
    gap:.65rem;
    margin-bottom:.7rem;
  }
  .consult-progress-head span{
    font-size:.88rem;
  }
  .consult-progress-head strong{
    margin-left:auto;
    padding:.28rem .62rem;
    font-size:.72rem;
  }
  .consult-progress-shell .spk-stepper{
    gap:.15rem;
    margin-bottom:.72rem;
    overflow-x:auto;
    padding:.15rem .1rem .35rem;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .consult-progress-shell .spk-stepper::-webkit-scrollbar{
    display:none;
  }
  .consult-progress-shell .spk-stepper li{
    flex:0 0 62px;
    scroll-snap-align:center;
  }
  .consult-progress-shell .spk-stepper li .num{
    width:34px;
    height:34px;
    margin-bottom:.38rem;
    font-size:.82rem;
  }
  .consult-progress-shell .spk-stepper li::after{
    top:17px;
    left:calc(50% + 17px);
    width:calc(100% - 34px);
    height:2px;
  }
  .consult-progress-shell .spk-stepper .label,
  .consult-progress-shell .spk-stepper li span.label{
    display:block;
    max-width:60px;
    margin-inline:auto;
    font-size:.62rem;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .consult-progress-track{
    height:7px;
  }

  .consult-panel.form-panel{
    padding:1rem;
    border-radius:20px;
    box-shadow:0 22px 56px -42px rgba(19,36,23,.58);
  }
  .consult-panel::before{
    height:5px;
  }
  .consult-panel [data-step-panel] > .d-flex.align-items-center.gap-3.mb-1,
  .consult-quiz-head .d-flex.align-items-center.gap-3{
    gap:.75rem!important;
    align-items:flex-start!important;
  }
  .consult-panel [data-step-panel] > .d-flex.align-items-center.gap-3.mb-1 .icon-tile,
  .consult-quiz-head .icon-tile{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
    font-size:1rem!important;
    flex:0 0 38px;
  }
  .consult-panel h5,
  .consult-quiz-head h5{
    font-size:1.18rem;
    line-height:1.2;
    font-weight:760;
  }
  .consult-panel [data-step-panel] > p.text-muted-2.small.mb-4,
  .consult-panel .text-muted-2.small.mb-4{
    margin-bottom:1rem!important;
    font-size:.88rem;
    line-height:1.62;
  }
  .consult-panel .form-label{
    font-size:.84rem;
  }
  .consult-panel .form-control,
  .consult-panel .form-select{
    min-height:48px;
    border-radius:14px;
    font-size:.95rem;
  }

  .land-input-grid{
    gap:.75rem;
  }
  .land-field{
    padding:.82rem;
    border-radius:14px;
  }

  .radio-card{
    min-height:74px;
    padding:.78rem;
    gap:.7rem;
    border-radius:14px;
  }
  .radio-card input[type="radio"]{
    margin-top:.42rem;
  }
  .radio-card-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:1rem;
  }
  .radio-card .rc-title{
    font-size:.96rem;
    line-height:1.25;
  }
  .radio-card .rc-desc{
    font-size:.82rem;
    line-height:1.45;
  }
  .variety-status-grid{
    gap:.72rem;
  }
  .variety-status-card{
    min-height:78px;
    border-width:1.5px;
  }
  .variety-status-card:has(input:checked){
    box-shadow:0 0 0 3px rgba(47,107,69,.13), 0 16px 34px -30px rgba(19,36,23,.5);
  }
  #cassavaVariety + .form-text-hint{
    font-size:.8rem;
    line-height:1.45;
  }

  .consult-quiz-head{
    align-items:flex-start;
    gap:.75rem;
  }
  .consult-quiz-count{
    padding:.32rem .62rem;
    font-size:.7rem;
  }
  .consult-quiz{
    padding:.75rem;
    border-radius:16px;
  }
  .consult-quiz-track{
    height:8px;
    margin-bottom:.75rem;
  }
  .consult-question-card{
    min-height:0;
    padding:1rem;
    border-radius:16px;
  }
  .consult-question-card::before{
    position:static;
    display:block;
    margin-bottom:.55rem;
    font-size:.62rem;
  }
  .consult-question-meta{
    padding-right:0;
    gap:.4rem;
    margin-bottom:.75rem;
  }
  .consult-question-meta span{
    font-size:.6rem;
    padding:.28rem .52rem;
  }
  .consult-question-title{
    font-size:1.22rem;
    line-height:1.22;
  }
  .question-optional-note{
    width:100%;
    padding:.65rem .72rem;
    font-size:.8rem;
  }
  .quiz-option-grid,
  .quiz-option-grid.two{
    grid-template-columns:1fr;
    gap:.6rem;
  }
  .quiz-option span{
    min-height:50px;
    padding:.78rem .85rem;
    border-radius:14px;
    font-size:.9rem;
  }
  .quiz-input-wrap .form-control{
    padding-right:4.2rem;
  }
  .consult-question-foot{
    margin-top:1rem;
    padding-top:.8rem;
    flex-direction:column;
    gap:.3rem;
    font-size:.76rem;
  }

  .consult-panel [data-step-panel="6"] .panel{
    border-radius:14px;
  }
  .consult-panel [data-step-panel="6"] .panel-header,
  .consult-panel [data-step-panel="6"] .panel-body{
    padding:.85rem;
  }
  .consult-panel [data-step-panel="6"] dl.row dt,
  .consult-panel [data-step-panel="6"] dl.row dd{
    width:100%;
  }
  .consult-panel [data-step-panel="6"] dl.row dd{
    margin-bottom:.6rem;
    font-weight:650;
  }

  .consult-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.72rem;
    margin-top:1.05rem;
    margin-inline:0;
    padding-top:1rem;
    padding-inline:0;
    padding-bottom:0;
    position:static;
    bottom:auto;
    z-index:auto;
    background:transparent;
    backdrop-filter:none;
  }
  .consult-actions .btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    padding:.62rem .7rem;
    border-radius:18px;
    font-size:.92rem;
    line-height:1.15;
    white-space:nowrap;
  }
  .consult-actions .btn i{
    margin:0!important;
  }
}

@media (max-width:374.98px){
  .consult-page > .container{
    padding-inline:.72rem!important;
  }
  .consult-page .h2{
    font-size:1.72rem;
  }
  .consult-page .col-lg-9 > p.text-muted-2{
    font-size:.86rem;
  }
  .consult-progress-shell .spk-stepper li{
    flex-basis:56px;
  }
  .consult-progress-shell .spk-stepper .label,
  .consult-progress-shell .spk-stepper li span.label{
    max-width:54px;
    font-size:.58rem;
  }
  .consult-panel.form-panel{
    padding:.85rem;
  }
  .consult-panel h5,
  .consult-quiz-head h5{
    font-size:1.05rem;
  }
  .radio-card{
    padding:.68rem;
  }
  .radio-card-icon{
    width:36px;
    height:36px;
  }
  .radio-card .rc-title{
    font-size:.9rem;
  }
  .radio-card .rc-desc{
    font-size:.78rem;
  }
  .consult-actions{
    gap:.55rem;
  }
  .consult-actions .btn{
    min-height:46px;
    border-radius:16px;
    font-size:.84rem;
    padding:.58rem .45rem;
  }
}

/* =========================================================
   V19 - Dashboard pakar/admin mobile lebih padat
   ========================================================= */
.dashboard-mobile-list{
  display:none;
}

@media (max-width:767.98px){
  .dash-wrapper{
    background:
      linear-gradient(180deg, rgba(228,238,230,.58), rgba(247,246,241,0) 220px),
      var(--spk-cream);
  }
  .dash-topbar{
    position:relative;
    top:auto;
    z-index:20;
    min-height:64px;
    padding:.65rem .9rem;
    gap:.72rem;
    box-shadow:0 16px 36px -32px rgba(19,36,23,.55);
  }
  .dash-topbar h5{
    font-size:1.12rem;
    line-height:1.15;
  }
  .dash-topbar .btn[data-toggle="sidebar"],
  .dash-topbar .avatar-circle{
    width:42px;
    height:42px;
    border-radius:13px;
    flex:0 0 42px;
  }
  .dash-topbar .avatar-circle + div{
    display:none;
  }
  .dash-content{
    padding:.9rem .9rem 1.35rem;
  }
  .dash-content > .row.g-3.mb-4{
    --bs-gutter-x:.75rem;
    --bs-gutter-y:.75rem;
    margin-bottom:1rem!important;
  }
  .dash-content > .row.g-3.mb-4 .col-6{
    min-width:0;
  }
  .dash-content > .row.g-3.mb-4 .stat-card{
    min-height:110px;
    padding:.82rem;
    border-radius:16px;
  }
  .dash-content > .row.g-3.mb-4 .stat-card::before{
    width:3px;
  }
  .dash-content > .row.g-3.mb-4 .stat-card::after{
    opacity:.45;
  }
  .stat-card .d-flex{
    gap:.5rem;
  }
  .stat-card .stat-num{
    font-size:1.65rem;
    line-height:.95;
  }
  .stat-card .stat-label{
    font-size:.78rem;
    line-height:1.25;
    margin-top:.32rem;
  }
  .stat-card .stat-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:.95rem;
  }
  .stat-card .stat-trend{
    min-height:24px;
    padding:.24rem .45rem;
    font-size:.68rem;
    line-height:1.25;
    white-space:normal;
  }

  .dash-content > .row.g-4{
    --bs-gutter-y:1rem;
  }
  .dash-content > .row.g-4 > [class*="col"] > .panel{
    border-radius:18px;
    box-shadow:0 18px 46px -38px rgba(19,36,23,.5);
  }
  .dash-content > .row.g-4 > [class*="col"] > .panel .panel-header{
    min-height:auto;
    padding:.95rem 1rem;
    flex-direction:row;
    align-items:center;
  }
  .dash-content > .row.g-4 > [class*="col"] > .panel .panel-header > .d-flex{
    min-width:0;
  }
  .panel-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    margin-right:.55rem!important;
  }
  .dash-content > .row.g-4 > [class*="col"] > .panel .panel-header strong{
    font-size:1rem;
    line-height:1.2;
  }
  .dash-content > .row.g-4 > [class*="col"] > .panel .panel-header a.small{
    min-height:32px;
    padding:.34rem .62rem;
    font-size:.76rem;
    white-space:nowrap;
  }
  .dash-content > .row.g-4 .panel .panel-body{
    padding:.72rem .9rem .95rem;
  }
  .dash-content > .row.g-4 .table-responsive{
    padding:.65rem .75rem .85rem;
    overflow:visible;
  }
  .dashboard-desktop-table{
    display:none!important;
  }
  .dashboard-mobile-list{
    display:grid;
    gap:.72rem;
    padding:.72rem .88rem .95rem;
  }
  .dashboard-list-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.72rem;
    padding:.82rem;
    border:1px solid rgba(47,107,69,.13);
    border-radius:14px;
    background:#fff;
    box-shadow:0 16px 34px -30px rgba(19,36,23,.46);
  }
  .dashboard-list-num{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#FBFAF6;
    color:var(--spk-ink-400);
    font-size:.78rem;
    font-weight:760;
  }
  .dashboard-list-body{
    min-width:0;
  }
  .dashboard-list-body strong{
    display:block;
    color:var(--spk-ink-900);
    font-size:.9rem;
    line-height:1.32;
  }
  .dashboard-list-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.38rem;
    margin-top:.42rem;
    color:var(--spk-ink-400);
    font-size:.74rem;
  }
  .dashboard-list-item .btn{
    min-height:34px;
    padding:.36rem .72rem;
    border-radius:999px;
    font-size:.76rem;
    white-space:nowrap;
  }
  .dashboard-list-item .badge-status{
    font-size:.64rem;
    padding:.3em .62em;
  }

  .dash-content > .row.g-4 .table-spk thead{
    display:none;
  }
  .dash-content > .row.g-4 .table-spk,
  .dash-content > .row.g-4 .table-spk tbody,
  .dash-content > .row.g-4 .table-spk tr,
  .dash-content > .row.g-4 .table-spk td{
    display:block;
    width:100%;
  }
  .dash-content > .row.g-4 .table-spk tbody tr{
    margin:0 0 .7rem;
    border:1px solid rgba(47,107,69,.12);
    border-radius:14px;
    background:#fff;
    box-shadow:0 14px 30px -28px rgba(19,36,23,.45);
    overflow:hidden;
  }
  .dash-content > .row.g-4 .table-spk tbody tr:last-child{
    margin-bottom:0;
  }
  .dash-content > .row.g-4 .table-spk td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.9rem;
    min-height:44px;
    padding:.68rem .82rem;
    border-bottom:1px solid rgba(222,220,209,.62);
    text-align:right!important;
    font-size:.86rem;
  }
  .dash-content > .row.g-4 .table-spk td::before{
    content:attr(data-label);
    flex:0 0 38%;
    max-width:38%;
    color:var(--spk-ink-400);
    font-weight:760;
    text-align:left;
  }
  .dash-content > .row.g-4 .table-spk td:first-child{
    min-height:0;
    display:inline-flex;
    width:auto;
    min-width:34px;
    margin:.65rem .82rem .05rem;
    padding:.22rem .5rem;
    border-bottom:0;
    border-radius:999px;
    background:#FBFAF6;
    color:var(--spk-ink-400)!important;
    text-align:center!important;
    font-size:.78rem;
  }
  .dash-content > .row.g-4 .table-spk td:first-child::before{
    display:none;
  }
  .dash-content > .row.g-4 .table-spk td:nth-child(2){
    display:block;
    text-align:left!important;
    font-size:.92rem;
    line-height:1.35;
  }
  .dash-content > .row.g-4 .table-spk td:nth-child(2)::before{
    display:block;
    max-width:none;
    margin-bottom:.25rem;
  }
  .dash-content > .row.g-4 .table-spk td:last-child{
    border-bottom:none;
    justify-content:flex-end;
  }
  .dash-content > .row.g-4 .table-spk td:last-child::before{
    display:none;
  }
  .dash-content > .row.g-4 .table-spk .btn-sm{
    min-height:34px;
    padding:.38rem .78rem;
    font-size:.78rem;
  }
  .badge-status{
    font-size:.7rem;
    padding:.32em .68em;
  }
  .dashboard-empty{
    min-height:74px;
    padding:1rem .75rem;
    font-size:.92rem;
  }

  .activity-item{
    padding:.75rem 0;
    gap:.72rem;
  }
  .activity-item::before{
    left:13px;
    top:38px;
  }
  .activity-icon{
    width:28px;
    height:28px;
    font-size:.78rem;
  }
  .activity-item .small{
    font-size:.84rem!important;
    line-height:1.42;
  }
}

@media (max-width:374.98px){
  .dash-content{
    padding:.85rem .72rem 1.2rem;
  }
  .dash-topbar{
    padding:.62rem .8rem;
  }
  .dash-topbar h5{
    font-size:1.08rem;
  }
  .dash-content > .row.g-3.mb-4{
    --bs-gutter-x:.58rem;
    --bs-gutter-y:.58rem;
  }
  .dash-content > .row.g-3.mb-4 .stat-card{
    min-height:106px;
    padding:.78rem;
  }
  .stat-card .stat-num{
    font-size:1.42rem;
  }
  .stat-card .stat-label{
    font-size:.72rem;
  }
  .stat-card .stat-icon{
    width:30px;
    height:30px;
    font-size:.85rem;
  }
  .stat-card .stat-trend{
    font-size:.62rem;
  }
  .dashboard-mobile-list{
    padding:.65rem .72rem .85rem;
  }
  .dashboard-list-item{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    padding:.78rem;
  }
  .dashboard-list-item .btn{
    grid-column:2;
    justify-self:start;
  }
}

/* =========================================================
   V20 - Tabel dashboard mobile tetap ringkas dan terbaca
   ========================================================= */
@media (max-width:767.98px){
  .dash-content .panel > .table-responsive:not(.dashboard-desktop-table),
  .dash-content .panel .panel-body > .table-responsive:not(.dashboard-desktop-table){
    margin:0;
    padding:0;
    overflow:hidden;
    border-radius:16px;
    border:1px solid rgba(47,107,69,.12);
    background:#fff;
  }

  .dash-content .table-spk:not(.modal .table-spk){
    display:table!important;
    width:100%!important;
    min-width:0!important;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
  }
  .dash-content .table-spk:not(.modal .table-spk) thead{
    display:table-header-group!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) tbody{
    display:table-row-group!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) tr{
    display:table-row!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) th,
  .dash-content .table-spk:not(.modal .table-spk) td{
    display:table-cell!important;
    width:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:.72rem .78rem!important;
    border-bottom:1px solid rgba(222,220,209,.68)!important;
    text-align:left!important;
    vertical-align:middle;
    font-size:.78rem!important;
    line-height:1.35;
  }
  .dash-content .table-spk:not(.modal .table-spk) td::before{
    display:none!important;
    content:none!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) thead th{
    background:#FBFAF6!important;
    color:var(--spk-ink-400);
    font-size:.66rem!important;
    font-weight:760;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .dash-content .table-spk:not(.modal .table-spk) th:nth-child(n+3),
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(n+3){
    display:none!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) th:first-child,
  .dash-content .table-spk:not(.modal .table-spk) td:first-child{
    width:44px!important;
    padding-inline:.58rem!important;
    text-align:center!important;
    color:var(--spk-ink-400)!important;
    font-weight:720;
  }
  .dash-content .table-spk:not(.modal .table-spk) th:nth-child(2),
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2){
    width:auto!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2){
    color:var(--spk-ink-900);
    font-size:.82rem!important;
    font-weight:680;
    overflow-wrap:anywhere;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) strong{
    font-size:.82rem;
    line-height:1.35;
    font-weight:780;
  }
  .dash-content .table-spk:not(.modal .table-spk) tbody tr:last-child td{
    border-bottom:0!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) tbody tr[data-bs-toggle="modal"]{
    cursor:pointer;
  }
  .dash-content .table-spk:not(.modal .table-spk) tbody tr[data-bs-toggle="modal"]:active{
    background:var(--spk-forest-100)!important;
  }

  .dash-content .table-spk:not(.modal .table-spk) .dashboard-empty{
    min-height:72px;
    padding:1rem .75rem;
    font-size:.86rem;
  }
}

@media (max-width:374.98px){
  .dash-content .table-spk:not(.modal .table-spk) th,
  .dash-content .table-spk:not(.modal .table-spk) td{
    padding:.62rem .62rem!important;
    font-size:.72rem!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) thead th{
    font-size:.6rem!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) th:first-child,
  .dash-content .table-spk:not(.modal .table-spk) td:first-child{
    width:38px!important;
    padding-inline:.42rem!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2),
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) strong{
    font-size:.76rem!important;
  }
}

/* =========================================================
   V21 - Perbaikan lebar kolom tabel mobile
   ========================================================= */
@media (max-width:767.98px){
  .dash-content .table-spk:not(.modal .table-spk),
  .dash-content .table-spk:not(.modal .table-spk) thead,
  .dash-content .table-spk:not(.modal .table-spk) tbody{
    display:block!important;
    width:100%!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) tr{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr);
    width:100%!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) tr.d-none,
  .dash-content .table-spk:not(.modal .table-spk) tr.filter-empty-row.d-none,
  .dash-content .table-spk:not(.modal .table-spk) tr.is-filtered{
    display:none!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) th,
  .dash-content .table-spk:not(.modal .table-spk) td{
    display:block!important;
    min-width:0!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) th:first-child,
  .dash-content .table-spk:not(.modal .table-spk) td:first-child{
    width:auto!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) th:nth-child(2),
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2){
    width:auto!important;
    max-width:none!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2),
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) strong{
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2){
    display:flex!important;
    align-items:center;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) > div,
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) > small,
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) > .small{
    display:none!important;
  }
  .dash-content .table-spk:not(.modal .table-spk) td:nth-child(2) strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .dash-content .table-spk:not(.modal .table-spk) tr:has(td[colspan]){
    grid-template-columns:1fr;
  }
  .dash-content .table-spk:not(.modal .table-spk) td[colspan]{
    grid-column:1 / -1;
    width:100%!important;
    text-align:center!important;
  }
}

@media (max-width:374.98px){
  .dash-content .table-spk:not(.modal .table-spk) tr{
    grid-template-columns:40px minmax(0,1fr);
  }
}

/* =========================================================
   V22 - Hasil konsultasi lebih rapi dan terstruktur
   ========================================================= */
.result-page{
  background:
    linear-gradient(180deg, rgba(228,238,230,.44), rgba(247,246,241,0) 260px),
    var(--spk-cream);
}
.result-container{
  max-width:980px;
}
.result-hero{
  padding-top:.6rem;
}
.result-hero .icon-circle-lg{
  width:58px;
  height:58px;
  margin-inline:auto;
}
.result-summary-card{
  overflow:hidden;
}
.result-summary-card .panel-header{
  background:#fff;
}
.result-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.75rem;
}
.result-summary-item{
  min-width:0;
  padding:.88rem;
  border:1px solid rgba(47,107,69,.12);
  border-radius:12px;
  background:linear-gradient(180deg, #fff, #FBFAF6);
}
.result-summary-item span{
  display:block;
  margin-bottom:.25rem;
  color:var(--spk-ink-400);
  font-size:.72rem;
  font-weight:720;
}
.result-summary-item strong{
  display:block;
  color:var(--spk-ink-900);
  font-size:.92rem;
  line-height:1.35;
}
.result-section{
  padding:1.2rem;
  border:1px solid rgba(47,107,69,.13);
  border-radius:18px;
  background:rgba(255,255,255,.58);
  box-shadow:0 18px 44px -38px rgba(19,36,23,.45);
}
.result-section-head{
  margin-bottom:1rem;
}
.result-section-head .h4{
  color:var(--spk-ink-900);
  font-size:1.24rem;
  font-weight:780;
}
.result-page .result-timeline{
  padding-left:2.15rem;
}
.result-page .result-timeline::before{
  left:13px;
  top:8px;
  bottom:8px;
  background:linear-gradient(180deg, rgba(47,107,69,.24), rgba(199,154,60,.22));
}
.result-page .result-timeline .t-item{
  margin-bottom:1rem;
}
.result-page .result-timeline .t-dot{
  left:-2.15rem;
  top:.2rem;
  width:28px;
  height:28px;
  border-width:4px;
  box-shadow:0 8px 18px -14px rgba(19,36,23,.5);
}
.result-page .result-timeline h6{
  color:var(--spk-forest-800)!important;
  font-family:var(--spk-font-body);
  font-size:.82rem!important;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none!important;
}
.result-page .result-block{
  border-left-width:3px;
  border-radius:12px;
  padding:1rem 1.08rem;
  box-shadow:0 12px 30px -28px rgba(19,36,23,.45);
}
.result-page .result-block p{
  color:var(--spk-ink-600);
  font-size:.9rem;
  line-height:1.72;
}
.result-fertilizer-section{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:0;
}
.result-page .fertilizer-result-card{
  border-radius:16px;
  border-color:rgba(47,107,69,.13);
  box-shadow:0 16px 40px -36px rgba(19,36,23,.5);
}
.result-page .fertilizer-card-head h3{
  font-size:1.02rem;
  line-height:1.25;
  font-weight:780;
}
.result-page .dose-box{
  padding:.74rem;
}
.result-page .dose-box strong{
  font-size:.95rem;
}
.result-page .fertilizer-info-block p{
  color:var(--spk-ink-600);
  font-size:.84rem;
  line-height:1.58;
}

/* =========================================================
   V23 - Ilustrasi singkong dari asset lokal
   ========================================================= */
.login-cassava-mark{
  width:128px!important;
  height:128px!important;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.04) 64%, transparent 68%);
}
.login-cassava-mark img{
  width:100%!important;
  height:100%!important;
  max-width:128px;
  object-fit:contain!important;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.3)) saturate(1.04);
}

@media (max-width:767.98px){
  .result-container{
    padding-inline:1rem;
  }
  .result-hero{
    padding-top:.15rem;
  }
  .result-hero .h2{
    font-size:1.65rem;
    line-height:1.15;
  }
  .result-code{
    max-width:100%;
    font-size:.7rem;
    overflow-wrap:anywhere;
  }
  .result-summary-card .panel-header{
    flex-direction:row;
    align-items:center;
  }
  .result-summary-grid{
    grid-template-columns:1fr 1fr;
    gap:.6rem;
  }
  .result-summary-item{
    padding:.74rem;
  }
  .result-summary-item span{
    font-size:.66rem;
  }
  .result-summary-item strong{
    font-size:.84rem;
  }
  .result-section{
    padding:1rem;
    border-radius:16px;
  }
  .result-section-head{
    margin-bottom:.82rem;
  }
  .result-section-head .h4{
    font-size:1.08rem;
  }
  .result-page .result-timeline{
    padding-left:0;
  }
  .result-page .result-timeline::before{
    display:none;
  }
  .result-page .result-timeline .t-item{
    padding-left:2.2rem;
    margin-bottom:.78rem;
  }
  .result-page .result-timeline .t-dot{
    left:0;
    width:28px;
    height:28px;
    border-color:#fff;
  }
  .result-page .result-block{
    padding:.88rem;
  }
  .result-page .result-block p{
    font-size:.84rem;
    line-height:1.65;
  }
  .result-page .fertilizer-result-card{
    padding:1rem;
  }
}

@media (max-width:374.98px){
  .result-summary-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V24 - Hero desktop penuh dan ilustrasi login lebih terang
   ========================================================= */
@media (min-width:992px){
  .hero-spk{
    min-height:calc(100vh - 76px);
    display:flex;
    align-items:center;
  }
  .hero-spk > .container{
    min-height:calc(100vh - 76px);
    display:flex;
    align-items:center;
    padding-top:2.5rem!important;
    padding-bottom:2.5rem!important;
  }
  .hero-spk .row{
    width:100%;
  }
  .hero-stage{
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

.login-cassava-mark,
.login-cassava-mark img{
  position:relative;
  z-index:2;
}
.login-cassava-mark img,
.cassava-asset-img{
  mix-blend-mode:normal!important;
}
.login-cassava-mark{
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 44px -34px rgba(0,0,0,.55);
}
.login-cassava-mark img{
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.26)) saturate(1.08) brightness(1.08)!important;
}

@media (max-width:767.98px){
  .hero-spk{
    min-height:auto;
  }
  .hero-spk > .container{
    min-height:0;
  }
}