/* ============================================================
   KandangPetelur.com — Demo v3 (lapisan tampilan + pita peringatan)
   Dimuat SESUDAH demo.css. Isi halaman demo tidak diubah:
   yang diubah hanya tampilan + penegasan bahwa ini gambaran kasar.
   ============================================================ */

/* ------------------------------------------------------------
   IKON CUSTOM — dipasang _v3_pasang_ikon.js; bentuk: _v3_ikon_set.js
   Aturan ukuran ini WAJIB ada di lapisan demo juga. Halaman demo tidak
   memuat assets/site-v3.css, jadi tanpa baris ini <svg class="ikon"> tidak
   punya ukuran sama sekali dan browser memakai ukuran baku SVG 300x150 —
   ikon menu samping jadi raksasa dan teks menunya terdesak keluar. 1em bikin
   ikon ikut ukuran huruf pelatnya sendiri, sama seperti di halaman utama.
   ------------------------------------------------------------ */
.ikon { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }

:root {
  --ink: #0b1424;
  --sub: #5b6a81;
  --line: rgba(11,20,36,.10);
  --bg: #eef2f9;
  --blue-600: #2f6bff;
  --blue-700: #1e52d6;
  --blue-900: #0a1226;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Dulu di sini "Sora". Sejak 18 Okt keluarga itu tidak lagi diunduh (lihat
     <link> Google Fonts di tiap halaman), jadi menuliskannya cuma bikin
     ketergantungan pada urutan fallback. Satu keluarga untuk semuanya. */
  --font-display: var(--font-body);
  --grad: linear-gradient(120deg, #2f6bff, #5b5bef 55%, #22d3ee);
  --sh-sm: 0 1px 2px rgba(11,20,36,.05), 0 6px 16px -10px rgba(11,20,36,.25);
  --sh: 0 2px 4px rgba(11,20,36,.04), 0 18px 40px -22px rgba(11,20,36,.45);
  --sh-lg: 0 30px 70px -34px rgba(11,20,36,.6);
  /* Tinggi pita "DATA CONTOH" dipakai dua tempat: pita-nya sendiri (min-height)
     dan sidebar yang nempel tepat di bawahnya saat di-scroll. Kalau tingginya
     berubah, cukup ubah di sini. */
  --tinggi-pita: 34px;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(47,107,255,.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  letter-spacing: -.005em;
}

/* ---------- kerangka aplikasi ---------- */
.app { grid-template-columns: 248px 1fr; }
.side {
  position: sticky; top: var(--tinggi-pita); align-self: start;
  height: calc(100vh - var(--tinggi-pita)); overflow-y: auto;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(47,107,255,.5), transparent 60%),
    linear-gradient(180deg, #0a1226, #070b16);
  padding: 18px 14px 26px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.side .logo { font-family: var(--font-display); font-size: 15.5px; letter-spacing: -.02em; padding-bottom: 20px; }
.side .logo img { border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); }
.side nav a {
  position: relative; color: #b6c6e2; font-weight: 600; font-size: 13.2px;
  padding: 10px 13px; border-radius: 11px; margin-bottom: 3px;
  display: flex; align-items: center; gap: 9px;
  transition: background .2s, color .2s, transform .2s;
}
.side nav a:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.side nav a.on {
  background: var(--grad); color: #fff; box-shadow: 0 12px 26px -12px rgba(47,107,255,.9);
}
/* dulu ::after diisi emoji mata; sekarang tiap tautan sudah punya ikon sendiri */
.side nav a .ikon { color: inherit; flex: none; }

/* Warna. Menu samping dulu satu biru juga — sama seperti keluhan di halaman utama.
   Delapan warna diputar, TAPI hanya untuk tautan yang tidak aktif: semua warna
   ini 8,1:1 - 12,3:1 di atas navi #0a1226 (aman), namun turun jadi 2,0:1 - 3,0:1
   di atas pil biru .on, jadi yang aktif tetap putih. */
.side nav a:not(.on):nth-child(8n+1) .ikon { color: #f0a070; }
.side nav a:not(.on):nth-child(8n+2) .ikon { color: #f2ce6b; }
.side nav a:not(.on):nth-child(8n+3) .ikon { color: #6fd3a0; }
.side nav a:not(.on):nth-child(8n+4) .ikon { color: #6bd5e8; }
.side nav a:not(.on):nth-child(8n+5) .ikon { color: #a9bfff; }
.side nav a:not(.on):nth-child(8n+6) .ikon { color: #b49cff; }
.side nav a:not(.on):nth-child(8n+7) .ikon { color: #ff9aa8; }
.side nav a:not(.on):nth-child(8n+8) .ikon { color: #d2a878; }
.side nav a.on .ikon { color: #fff; }
.side .ver { color: #64748b; font-size: 10.5px; letter-spacing: .04em; }
.main { padding: 26px 30px 60px; }

/* ---------- pita "DATA CONTOH" ----------
   Dulu: pill `position:fixed` di kanan-atas. Persis di situ tombol "Kembali ke
   Website" dan "+ Catat Produksi" duduk, jadi pita-nya menutupi menu. Sekarang
   pita selebar layar, teksnya di TENGAH, dan posisinya sticky di atas layout
   (mengalir, bukan melayang) — tidak mungkin menimpa apa pun, di layar lebar
   maupun ponsel, dan tetap terbaca saat halaman discroll. */
.demo-ribbon {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tinggi-pita); box-sizing: border-box;
  background: rgba(11,20,36,.95); color: #fff;
  font-family: var(--font-body); font-size: 11px; letter-spacing: .1em;
  text-align: center; padding: 6px 16px;
  /* demo.css masih memberi radius 0 0 0 12px (bekas model pill di sudut layar);
     untuk pita selebar layar sudut itu harus rata */
  border-radius: 0;
  border-bottom: 1px solid rgba(251,191,36,.5);
  box-shadow: 0 10px 26px -18px rgba(11,20,36,.9);
}
.demo-ribbon::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251,191,36,.22); animation: kbPulse 2s ease-in-out infinite;
}
@keyframes kbPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- judul halaman ---------- */
.top { margin-bottom: 20px; }
.top h1 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.035em; color: var(--ink); }
.top .sub { font-size: 13px; color: var(--sub); margin-top: 4px; }
.top .actions .btn { box-shadow: 0 12px 26px -14px rgba(47,107,255,.9); }

/* ---------- komponen ---------- */
.kpis { gap: 14px; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--sh-sm); transition: transform .2s, box-shadow .2s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.kpi .l { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); font-weight: 700; }
.kpi .v { font-family: var(--font-display); font-size: 25px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; margin-top: 6px; }
.kpi .d { font-size: 11.5px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--sh-sm); }
.card h3 { font-family: var(--font-display); font-size: 15.5px; letter-spacing: -.025em; }
.card .hint { color: var(--sub); font-size: 12.2px; }

table { font-size: 13.2px; }
th {
  background: #f4f7fc; color: var(--sub); font-size: 10.5px; letter-spacing: .08em;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
td { padding: 11px 12px; border-bottom: 1px solid #eef2f8; }
tbody tr, tr { transition: background .15s; }
tr:hover td { background: #f8fbff; }
tfoot td { background: #f4f7fc; font-family: var(--font-display); letter-spacing: -.02em; }

.badge { font-family: var(--font-body); letter-spacing: .02em; }
.btn {
  background: var(--grad); border-radius: 999px; padding: 10px 18px; font-weight: 700;
  box-shadow: 0 12px 26px -14px rgba(47,107,255,.9); transition: transform .18s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); filter: none; box-shadow: 0 18px 34px -14px rgba(47,107,255,1); }
.btn.ghost { background: #fff; color: var(--blue-700); border: 1px solid rgba(47,107,255,.3); box-shadow: var(--sh-sm); }

.form-row { padding: 11px 0; }
.field { border-radius: 10px; border-color: var(--line); color: var(--blue-700); font-family: var(--font-display); }

/* ---------- lembar cetak ---------- */
.toolbar {
  background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.toolbar .t { font-family: var(--font-display); letter-spacing: -.02em; }
.sheet-wrap { background: linear-gradient(180deg, #e8eef8, var(--bg)); padding: 34px 16px 70px; }
.sheet {
  box-shadow: var(--sh-lg); border-radius: 6px; padding: 52px 54px;
  font-family: var(--font-body);
}
.sheet .head { border-bottom-width: 2px; border-color: var(--blue-700); }
.sheet .brand .n { color: var(--ink); }
.sheet .doc .t { color: var(--ink); }
.sheet th { background: #f4f7fc; color: var(--ink); }

/* ============================================================
   PITA "GAMBARAN SINGKAT" — dipasang di semua halaman demo v3
   Duduknya di AKHIR layar konten (sebelum .demo-nav), bukan di atas:
   di atas sudah ada .demo-ribbon sticky yang mengingatkan bahwa ini
   data contoh, jadi form/tabelnya tidak perlu tergeser ke bawah kartu.
   ============================================================ */
.kdg-band {
  position: relative; z-index: 110;
  margin: 26px 0 0; padding: 22px 24px 20px;
  border-radius: 22px;
  background:
    radial-gradient(70% 130% at 0% 0%, rgba(251,191,36,.22), transparent 60%),
    linear-gradient(180deg, #fffdf6, #ffffff);
  border: 1px solid rgba(180,120,20,.32);
  box-shadow: var(--sh);
  overflow: hidden;
}
.kdg-band::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #fbbf24, #f97316);
}
.kb-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #7c3a03; background: rgba(251,191,36,.28);
  border: 1px solid rgba(180,120,20,.35); border-radius: 999px; padding: 6px 14px;
}
.kb-flag i {
  width: 8px; height: 8px; border-radius: 999px; background: #d97706; font-style: normal;
  box-shadow: 0 0 0 4px rgba(217,119,6,.2); animation: kbPulse 2s ease-in-out infinite;
}
.kb-h {
  margin: 12px 0 8px; font-family: var(--font-display); font-size: 21px; line-height: 1.25;
  letter-spacing: -.03em; color: #1c1206; font-weight: 800;
}
.kb-p { margin: 0 0 8px; font-size: 14.4px; line-height: 1.7; color: #4a3c1c; max-width: 760px; }
.kb-p b { color: #1c1206; }
.kb-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; margin: 16px 0 14px; }
.kb-col { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px; }
.kb-col h4 {
  margin: 0 0 10px; font-family: var(--font-body); font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sub);
}
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-chips span {
  font-size: 12.2px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: #eef4ff; border: 1px solid rgba(47,107,255,.2); color: var(--blue-700);
}
.kb-col.out h4 { color: #92400e; }
.kb-col.out .kb-chips span {
  background: #fffaf0; border-color: rgba(180,120,20,.28); color: #6b5522;
}

/* 15 chip "yang tidak muncul" pernah ditampilkan semua dan kolomnya jadi 4 baris —
   sekarang 5 di depan, sisanya di dalam <details> bawaan HTML (nol JS, tetap
   bisa dibuka pakai keyboard). Angkanya ditulis generator, bukan dihitung di sini. */
.kb-lebih { margin-top: 8px; }
.kb-lebih summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 12.2px; font-weight: 700; color: #92400e;
  background: #fffaf0; border: 1px dashed rgba(180,120,20,.45); border-radius: 999px; padding: 4px 11px;
}
.kb-lebih summary::-webkit-details-marker { display: none; }
.kb-lebih summary::after { content: "▾"; font-size: 9px; line-height: 1; opacity: .85; }
.kb-lebih[open] summary::after { content: "▴"; }
.kb-lebih summary:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.kb-sisa { margin-top: 8px; }
.kb-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kb-btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  /* sama seperti .btn-wa di halaman utama: #25d366 + putih = 1,98:1, jadi ditekan */
  background: #0f9d58; color: #fff; font-weight: 800; font-size: 14px;
  padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(37,211,102,.8);
  transition: transform .18s, box-shadow .2s;
}
.kb-btn:hover { transform: translateY(-2px); background: #0c8a4d; box-shadow: 0 20px 40px -14px rgba(15,157,88,.9); }
.kb-alt {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; font-size: 13.6px; color: var(--blue-700);
  background: #fff; border: 1px solid rgba(47,107,255,.28); border-radius: 999px; padding: 11px 17px;
}
.kb-alt:hover { background: #f4f8ff; }
.kb-fine { margin: 0; font-size: 12.4px; color: #7a6427; }
.kb-count { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 2px; font-size: 12.4px; color: #6b5522; font-weight: 600; }
.kb-count i { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--blue-700); font-style: normal; }

/* nav bawah demo */
.demo-nav {
  margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-family: var(--font-body);
}
.demo-nav a {
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
  font-size: 12.6px; font-weight: 600; text-decoration: none; box-shadow: var(--sh-sm);
}
.demo-nav a:hover { border-color: rgba(47,107,255,.4); color: var(--blue-700); }

/* catatan lama demo.css tidak dipakai lagi di v3, tapi tetap dirapikan */
.demo-note {
  animation: none; background: #fffaf0; border-color: rgba(180,120,20,.3);
  border-radius: 12px; font-weight: 600;
}

/* ---------- halaman sempit ---------- */
@media (max-width: 1024px) {
  .kb-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   MENU DI LAYAR SEMPIT: LACI SAMPING, BUKAN DERETAN DI ATAS
   Dulu .side dibentangkan jadi strip horizontal di atas konten: 10 menu
   harus digeser samping dan strip itu memakan tempat persis di atas judul
   halaman. Sekarang .side tetap panel kiri seperti di desktop, hanya saja
   di layar sempit ia jadi laci yang baru muncul saat "Menu" ditekan.
   Murni CSS: checkbox-nya disembunyikan secara VISUAL (opacity 0, bukan
   display:none) supaya tetap bisa difokus dan dibuka pakai keyboard.
   ============================================================ */
.kdg-menu-cb { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.kdg-burger { display: none; }
.kdg-ribbon-t { flex: 1; text-align: center; }
.kdg-backdrop { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  /* --- tombol pembuka, numpang di baris pita yang sudah sticky --- */
  .kdg-burger {
    display: inline-flex; align-items: center; flex: none;
    height: 24px; padding: 0 11px; border-radius: 999px; cursor: pointer;
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #fff;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .kdg-burger .kdg-tutup { display: none; }
  /* pita dinaikkan di atas laci supaya tombolnya tetap bisa menekan ulang */
  #kdg-menu:checked ~ .demo-ribbon { z-index: 360; }
  #kdg-menu:checked ~ .demo-ribbon .kdg-burger { background: var(--blue-600); border-color: transparent; }
  #kdg-menu:checked ~ .demo-ribbon .kdg-burger .kdg-buka { display: none; }
  #kdg-menu:checked ~ .demo-ribbon .kdg-burger .kdg-tutup { display: inline; }
  #kdg-menu:focus-visible ~ .demo-ribbon .kdg-burger { outline: 2px solid #fbbf24; outline-offset: 2px; }

  /* --- lacinya --- */
  .side {
    position: fixed; top: var(--tinggi-pita); left: 0; bottom: 0; z-index: 350;
    /* align-self:stretch wajib: aturan dasar di atas masih meninggalkan
       align-self:start, dan pada grid child yang keluar dari alur (fixed) itu
       membuat tinggi lacinya menyusut ke tinggi isi — di 390x844 lacinya cuma
       sampai y=566, sisanya 278px cuma layar redup tanpa panel. */
    align-self: stretch;
    width: min(296px, 84vw); height: auto; display: block; overflow-y: auto;
    padding: 16px 14px 26px; border-right: 1px solid rgba(255,255,255,.1);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
    box-shadow: 0 0 46px rgba(5,8,15,.6);
    overscroll-behavior: contain;
  }
  #kdg-menu:checked ~ .app .side { transform: none; visibility: visible; transition: transform .26s ease; }
  .side .logo { display: flex; }
  .side .ver { display: block; }
  .side nav { display: block; }
  .side nav a { white-space: normal; margin-bottom: 3px; }

  /* layar redup di belakang laci; diklik = tutup */
  .kdg-backdrop {
    display: block; position: fixed; inset: var(--tinggi-pita) 0 0 0; z-index: 340;
    background: rgba(5,8,15,.5); opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  #kdg-menu:checked ~ .kdg-backdrop { opacity: 1; pointer-events: auto; }

  /* --- isi halaman ---
     Tabel panjang (mis. "Penjualan Terbaru" 6 kolom) dulu meleber keluar
     kartu: angkanya jatuh di luar kartu putih dan seluruh halaman jadi bisa
     digeser samping. Sekarang tabelnya yang digeser di dalam kartu. */
  .main { padding: 18px 14px 42px; overflow-x: clip; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 15px 14px; }
  .card h3 { font-size: 14.5px; }
  .card table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .card table th, .card table td { padding: 9px 10px; }
  /* padding ditekan sampai 4px supaya tinggi pita GENAP jadi --tinggi-pita (34):
     tombol 24 + 8 + border 1 = 33, di bawah min-height, jadi min-height yang
     menang. Dengan padding 5px pita jadi 35 dan laci (yang berjangkar di 34)
     kepotong 1px di belakang pita. */
  .demo-ribbon { font-size: 10px; letter-spacing: .08em; padding: 4px 10px; }
  .kdg-band { padding: 18px 16px; border-radius: 18px; }
  .kb-h { font-size: 18.5px; }
}
@media (max-width: 560px) {
  .sheet { padding: 26px 18px; font-size: 12px; }
  .kb-foot { flex-direction: column; align-items: stretch; }
  .kb-btn, .kb-alt { justify-content: center; }
}

@media print {
  .kdg-band, .demo-ribbon, .demo-nav, .side, .toolbar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-ribbon::before, .kb-flag i { animation: none; }
  .kpi:hover, .btn:hover, .kb-btn:hover { transform: none; }
}