:root{
  --ink:#1f2a24;
  --muted:#68736c;
  --cream:#f8f4ec;
  --paper:#fffdf8;
  --line:#e6e0d5;

  --primary:#1f6a52;
  --primary2:#164c3b;
  --primary3:#2f8f6d;
  --primary-soft:#e6f2ec;

  --gold:#c99a42;
  --gold2:#f0b53f;
  --gold-soft:#fbe7bd;

  --teal:#1d8a8a;
  --teal2:#57c7c2;
  --teal-soft:#e0f5f3;

  --terracotta:#c05a3a;
  --terracotta2:#e8845c;
  --terracotta-soft:#fbe4d8;

  --plum:#7a4a8a;
  --plum2:#a973bd;
  --plum-soft:#f1e2f4;

  --danger:#a33a32;
  --danger2:#e05a4a;
  --danger-soft:#fbe4e1;

  --shadow:0 18px 50px rgba(31,42,36,.10);
  --shadow-gold:0 14px 34px rgba(224,181,63,.30);
  --shadow-primary:0 14px 34px rgba(31,106,82,.28);
  --shadow-teal:0 14px 34px rgba(29,138,138,.28);
  --shadow-terracotta:0 14px 34px rgba(192,90,58,.28);
  --shadow-plum:0 14px 34px rgba(122,74,138,.28)
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6}
a{color:var(--primary);text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:hover{color:var(--teal);opacity:.9}

.container{width:min(1160px,92%);margin:auto}

.topbar{position:sticky;top:0;z-index:10;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;line-height:1.1;margin-right:auto}
.brand small{font-weight:500;color:var(--muted)}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--teal2),var(--primary2));color:#fff;box-shadow:var(--shadow-primary)}
.nav nav{display:flex;gap:20px;font-size:14px}
.nav nav a{color:var(--ink);font-weight:600}
.nav nav a:hover{color:var(--terracotta)}
.nav-actions{display:flex;align-items:center;gap:10px}
.user-chip{font-size:13px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:14px;transition:transform .18s ease,box-shadow .18s ease,background .25s ease}
.btn-primary{background:linear-gradient(135deg,var(--terracotta2),var(--terracotta));color:#fff;box-shadow:var(--shadow-terracotta)}
.btn-primary:hover{background:linear-gradient(135deg,var(--terracotta),#9c4527);transform:translateY(-1px);opacity:1}
.btn-dark{background:linear-gradient(135deg,var(--plum2),var(--plum));color:#fff;box-shadow:var(--shadow-plum)}
.btn-dark:hover{background:linear-gradient(135deg,var(--plum),#5b3568)}
.btn-light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-light:hover{border-color:var(--teal);color:var(--teal)}
.btn-outline{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.btn-lg{padding:14px 22px}
.full{width:100%;margin-top:15px}

.hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(420px,52vw,620px);
  display:flex;
  align-items:center;
  padding:75px 0;
  background-image:
    linear-gradient(100deg,rgba(20,14,10,.72) 0%,rgba(20,14,10,.52) 28%,rgba(20,14,10,.12) 55%,rgba(20,14,10,0) 72%),
    linear-gradient(0deg,rgba(20,14,10,.35),rgba(20,14,10,.35)),
    url("../img/hero-bg.JPEG");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 30%;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:60px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--terracotta)}
.hero .eyebrow{color:var(--gold2)}
h1{font-size:clamp(38px,5vw,64px);line-height:1.05;margin:10px 0 20px;letter-spacing:-2px}
h1 span{background:linear-gradient(120deg,var(--terracotta),var(--gold2) 45%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{color:#fff;max-width:640px}
.hero h1 span{background:linear-gradient(120deg,var(--gold2),var(--terracotta2) 60%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:32px;line-height:1.15;margin:6px 0 12px}
h3{margin:8px 0}
.hero p,.lead{font-size:18px;color:var(--muted);max-width:650px}
.hero p{color:rgba(255,253,248,.9)}
.hero-actions{display:flex;gap:12px;margin:28px 0}
.hero .btn-light{background:rgba(255,253,248,.14);color:#fff;border:1px solid rgba(255,253,248,.5);backdrop-filter:blur(4px)}
.hero .btn-light:hover{background:rgba(255,253,248,.24);border-color:#fff;color:#fff}
.stats{display:flex;gap:30px;margin-top:38px}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:22px;color:var(--primary2)}
.stats div:nth-child(2) b{color:var(--terracotta)}
.stats div:nth-child(3) b{color:var(--teal)}
.stats span{font-size:12px;color:var(--muted)}
.hero .stats b{color:#fff}
.hero .stats span{color:rgba(255,253,248,.75)}

.hero-art,.hero .hero-art{display:none}
.pattern{position:absolute;inset:-30px;background:repeating-linear-gradient(45deg,transparent 0 28px,rgba(255,255,255,.12) 29px 34px),repeating-linear-gradient(-45deg,transparent 0 40px,rgba(240,181,63,.24) 41px 46px);transform:rotate(4deg) scale(1.2)}
.hero-card{position:absolute;left:35px;right:35px;bottom:35px;background:rgba(255,253,248,.94);padding:25px;border-radius:20px;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.hero-card h3{font-size:25px;color:var(--terracotta)}
.hero-card p{font-size:14px}

@media (max-width:640px){
  .hero{min-height:520px;background-position:center 22%;padding:55px 0}
  .hero-grid{gap:20px}
}

.section{padding:70px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card,.panel,.auth-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;border-top:4px solid var(--primary3)}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(31,42,36,.16)}
.cards .card:nth-child(3n+2){border-top-color:var(--terracotta2)}
.cards .card:nth-child(3n+3){border-top-color:var(--plum2)}
.card-img{height:190px;background:linear-gradient(135deg,var(--gold2) 0%,var(--gold-soft) 60%,#f4ead0 100%);display:grid;place-items:center;font-size:64px;font-weight:900;color:rgba(31,42,36,.55)}
.cards .card:nth-child(3n+2) .card-img{background:linear-gradient(135deg,var(--terracotta2),var(--terracotta-soft) 65%,#fbe4d8)}
.cards .card:nth-child(3n+3) .card-img{background:linear-gradient(135deg,var(--teal2),var(--teal-soft) 65%,#e0f5f3)}
.card-body{padding:20px}
.card-body p{color:var(--muted);margin:4px 0 15px}
.tag{display:inline-block;padding:5px 9px;border-radius:999px;background:linear-gradient(120deg,var(--primary-soft),#d7ede2);color:var(--primary2);font-size:11px;font-weight:800}
.row-between{display:flex;justify-content:space-between;align-items:center}
.stock{font-size:12px;font-weight:700}
.stock.ok{color:var(--teal)}
.stock.bad{color:var(--danger)}

.culture-band{padding:65px 0;background:linear-gradient(120deg,var(--plum) 0%,var(--primary) 55%,var(--teal) 100%);color:#fff}
.culture-band .container{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.culture-band .eyebrow{color:var(--gold2)}
.culture-band p{color:#eae2ef}

.page-head{padding:65px 0 45px;background:linear-gradient(135deg,var(--cream),#f7e6cf)}
.page-head h1{font-size:48px}

.filter{display:grid;grid-template-columns:1fr 240px auto;gap:10px;margin-bottom:30px}
input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 13px;font:inherit;color:var(--ink);outline:none;transition:border-color .18s ease,box-shadow .18s ease}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
textarea{min-height:100px;resize:vertical}
label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start}
.detail-visual{height:520px;border-radius:28px;background:linear-gradient(135deg,var(--gold2) 0%,var(--terracotta2) 55%,var(--plum2) 100%);display:grid;place-items:center;font-size:120px;font-weight:900;color:rgba(255,255,255,.55)}
.price{font-size:30px;font-weight:900;margin:20px 0;color:var(--terracotta)}
.price small{font-size:13px;color:var(--muted);font-weight:500}
.info-list{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:25px 0;padding:8px 0}
.info-list div{display:flex;justify-content:space-between;padding:9px 0}
.info-list span{color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:25px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#fff,#fbf8f1);transition:box-shadow .2s ease,transform .2s ease}
.step:hover{transform:translateY(-3px)}
.step>b{font-size:26px;color:var(--gold2)}
.steps .step:nth-child(1){box-shadow:0 4px 0 var(--gold2) inset}
.steps .step:nth-child(1):hover{box-shadow:var(--shadow-gold)}
.steps .step:nth-child(1)>b{color:var(--gold2)}
.steps .step:nth-child(2){box-shadow:0 4px 0 var(--teal) inset}
.steps .step:nth-child(2):hover{box-shadow:var(--shadow-teal)}
.steps .step:nth-child(2)>b{color:var(--teal)}
.steps .step:nth-child(3){box-shadow:0 4px 0 var(--plum2) inset}
.steps .step:nth-child(3):hover{box-shadow:var(--shadow-plum)}
.steps .step:nth-child(3)>b{color:var(--plum2)}
.step p{color:var(--muted)}

.auth-wrap{min-height:70vh;display:grid;place-items:center;padding:50px 0;background:linear-gradient(135deg,var(--cream),#e6eef0)}
.auth-card{padding:35px;width:min(460px,92%)}
.auth-card.wide{width:min(700px,92%)}
.auth-card h1{font-size:38px}
.auth-card form{display:grid;gap:16px;margin:25px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.span-2{grid-column:span 2}
.alert{padding:12px 14px;border-radius:10px;font-size:13px}
.error{background:linear-gradient(120deg,var(--danger-soft),#fbdad6);color:#8b2d28;border:1px solid #f3b8b3}
.narrow{width:min(700px,92%)}
.panel{padding:28px}
.summary{display:flex;justify-content:space-between;background:linear-gradient(120deg,var(--gold-soft),#f7e6cf);padding:15px;border-radius:12px}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:14px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
th{background:linear-gradient(120deg,var(--primary-soft),#d7ede2);font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--primary2)}
tr:hover td{background:#faf7f0}
.status{padding:5px 8px;border-radius:999px;background:linear-gradient(120deg,var(--teal-soft),#cdeceb);color:var(--teal);font-size:11px;font-weight:800}
.empty{text-align:center;color:var(--muted)}

.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;margin-bottom:25px}
.admin-stats>div{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;border-left:4px solid var(--primary3)}
.admin-stats>div:nth-child(4n+2){border-left-color:var(--terracotta2)}
.admin-stats>div:nth-child(4n+3){border-left-color:var(--teal)}
.admin-stats>div:nth-child(4n+4){border-left-color:var(--plum2)}
.admin-stats span{display:block;color:var(--muted);font-size:12px}
.admin-stats b{font-size:30px;color:var(--primary2)}
.admin-stats>div:nth-child(4n+2) b{color:var(--terracotta)}
.admin-stats>div:nth-child(4n+3) b{color:var(--teal)}
.admin-stats>div:nth-child(4n+4) b{color:var(--plum)}

.admin-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}
.admin-menu a{background:linear-gradient(135deg,var(--primary3),var(--primary2));color:#fff;padding:18px;border-radius:14px;font-weight:800;box-shadow:var(--shadow-primary);transition:transform .18s ease,box-shadow .18s ease}
.admin-menu a:hover{transform:translateY(-3px)}
.admin-menu a:nth-child(4n+2){background:linear-gradient(135deg,var(--terracotta2),var(--terracotta));box-shadow:var(--shadow-terracotta)}
.admin-menu a:nth-child(4n+3){background:linear-gradient(135deg,var(--teal2),var(--teal));box-shadow:var(--shadow-teal)}
.admin-menu a:nth-child(4n+4){background:linear-gradient(135deg,var(--plum2),var(--plum));box-shadow:var(--shadow-plum)}

.danger{color:var(--danger)}

.footer{margin-top:40px;background:linear-gradient(160deg,#22243a,#161a2b);color:#cbd6d0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:45px 0}
.footer p{color:#9fa6b5;font-size:13px}
.footer a{color:#d9e0ea}
.footer a:hover{color:var(--gold2)}
.copyright{border-top:1px solid #333a52;padding:18px 4%;font-size:12px;color:#83899e}

@media(max-width:850px){
  .nav nav{display:none}
  .hero-grid,.detail-grid,.culture-band .container{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .admin-stats,.admin-menu{grid-template-columns:1fr 1fr}
  .hero-art{min-height:320px}
  .detail-visual{height:360px}
  .filter{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .cards,.steps,.admin-stats,.admin-menu,.form-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .stats{gap:14px}
  .hero{padding:50px 0}
  .hero-actions{flex-direction:column}
  .page-head h1{font-size:38px}
  .nav{gap:10px}
  .user-chip{display:none}
  .footer-grid{grid-template-columns:1fr}
}

.btn-sm{padding:6px 9px;font-size:11px}
.btn-danger{background:linear-gradient(135deg,var(--danger2),var(--danger));color:#fff}
.btn-danger:hover{background:linear-gradient(135deg,var(--danger),#7f2c26);opacity:1}
.actions{display:flex;gap:5px;flex-wrap:wrap}
.success{background:linear-gradient(120deg,var(--teal-soft),#cdeceb);color:var(--teal);border:1px solid #9fdad6}
.warning{background:linear-gradient(120deg,var(--gold-soft),#f7e6cf);color:#8a5a00;border:1px solid #f0c973}
.alert-late{background:linear-gradient(120deg,var(--danger-soft),#fbdad6);border:1px solid #f3b8b3;color:#8b2d28;padding:16px 18px;border-radius:12px;margin-bottom:18px}
.alert-late h3{margin:0 0 6px;font-size:15px}
.alert-late ul{margin:6px 0 0;padding-left:18px;font-size:13px}
.alert-late .badge-2x{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:linear-gradient(135deg,var(--danger2),#7f2c26);color:#fff;font-size:10px;font-weight:800}
.status.late{background:linear-gradient(120deg,var(--danger-soft),#fbdad6);color:#8b2d28}
.badge-tipe{display:inline-block;padding:3px 8px;border-radius:999px;background:linear-gradient(120deg,var(--plum-soft),#e6d0ea);color:var(--plum);font-size:10px;font-weight:800;margin-left:6px}

.radio-group{display:flex;gap:14px;flex-wrap:wrap}
.radio-inline{flex-direction:row;align-items:center;gap:8px;font-weight:500;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.radio-inline:hover{border-color:var(--teal);background:var(--teal-soft)}
.radio-inline input{width:auto}

.card-img{overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.detail-visual{overflow:hidden;display:flex;align-items:center;justify-content:center}
.detail-visual img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
.thumb{width:55px;height:55px;object-fit:cover;border-radius:8px;display:block}
.thumb.placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eee,#e2e2e2);color:#888}
.image-preview{margin-top:8px;width:180px;height:140px;border-radius:10px;overflow:hidden;border:1px solid #ddd}
.image-preview img{width:100%;height:100%;object-fit:cover}
input[type=file]{padding:10px;border:1px dashed #aaa;background:#fafafa}