/* =========================================================
   GYOMO FISH HOUSE — Design tokens
   Palette:
     --ink     #14181A  (dasar gelap, ruang dry-aging)
     --ink-2   #1C2224  (panel sedikit lebih terang)
     --washi   #EFE9DD  (kertas washi, teks terang)
     --amber   #C97A3D  (koi amber — aksen utama)
     --jade    #2F4A3E  (laut Nusantara — aksen sekunder)
     --ember   #8C2F1E  (dry-aged tag, dipakai sangat sedikit)
     --stone   #9A9184  (teks sekunder di atas gelap)
   Type:
     Display : 'Shippori Mincho' (serif kaligrafis, restraint)
     Body    : 'Zen Kaku Gothic New' (sans geometris, netral)
     Utility : 'JetBrains Mono' (harga, label, angka hari aging)
   Signature: panel "dry-aging chamber" vertikal dgn day-counter
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --ink:#14181A;
  --ink-2:#1C2224;
  --ink-3:#242B2D;
  --washi:#EFE9DD;
  --amber:#C97A3D;
  --amber-soft:#E3A874;
  --jade:#2F4A3E;
  --jade-soft:#4C7060;
  --ember:#8C2F1E;
  --stone:#9A9184;
  --line: rgba(239,233,221,0.14);
  --radius: 2px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--washi);
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Shippori Mincho', serif;
  font-weight:700;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{margin:0 0 1em;color:var(--stone);}
.mono{font-family:'JetBrains Mono', monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--amber-soft);
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--amber);display:inline-block;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  font-family:'JetBrains Mono', monospace;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid var(--amber);
  cursor:pointer;
  transition:all .25s ease;
}
.btn-primary{background:var(--amber);color:var(--ink);}
.btn-primary:hover{background:var(--amber-soft);border-color:var(--amber-soft);}
.btn-ghost{background:transparent;color:var(--washi);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-soft);}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(to bottom, rgba(20,24,26,.92), rgba(20,24,26,0));
  padding:20px 0;
  transition:background .3s ease, padding .3s ease;
}
.nav.scrolled{background:rgba(20,24,26,.96);padding:14px 0;border-bottom:1px solid var(--line);backdrop-filter:blur(6px);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{font-family:'Shippori Mincho', serif;font-size:1.3rem;font-weight:700;color:var(--washi);}
.brand span{color:var(--amber-soft);}
.navlinks{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.navlinks a{
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--stone);
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.navlinks a:hover{color:var(--washi);border-color:var(--amber);}
.navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--washi);padding:8px 10px;border-radius:var(--radius);}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.55);}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,24,26,.15) 0%, rgba(20,24,26,.35) 55%, rgba(20,24,26,.96) 100%);
}
.hero-content{position:relative;z-index:2;padding:0 0 90px;width:100%;}
.hero-content .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;}
.hero-title{font-size:clamp(2.4rem, 5.4vw, 4.4rem);line-height:1.05;max-width:14ch;color:var(--washi);}
.hero-sub{max-width:44ch;font-size:1.05rem;}
.hero-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}

/* Signature element: vertical dry-aging chamber ticker */
.aging-chamber{
  width:150px;
  border:1px solid var(--line);
  background:rgba(28,34,36,.55);
  backdrop-filter:blur(3px);
  padding:18px 16px;
  border-radius:var(--radius);
  text-align:center;
}
.aging-chamber .label{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-soft);}
.aging-chamber .day{font-family:'JetBrains Mono',monospace;font-size:2.1rem;color:var(--washi);margin:8px 0;}
.aging-chamber .bar{height:3px;background:var(--ink-3);border-radius:2px;overflow:hidden;margin-top:6px;}
.aging-chamber .bar span{display:block;height:100%;background:var(--amber);animation:agingfill 7s ease-in-out infinite alternate;}
@keyframes agingfill{from{width:4%;}to{width:96%;}}
@media (prefers-reduced-motion: reduce){.aging-chamber .bar span{animation:none;width:60%;}}

/* ---------- Section shell ---------- */
section{padding:110px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem);}
.sec-alt{background:var(--ink-2);}

/* ---------- Best seller cards ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;}
.card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--amber);}
.card-media{aspect-ratio:4/3;overflow:hidden;position:relative;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.06);}
.tag{
  position:absolute;top:12px;left:12px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:2px;
}
.tag-dryaged{background:var(--ember);color:var(--washi);}
.tag-best{background:var(--amber);color:var(--ink);}
.card-body{padding:18px 20px 22px;}
.card-body h3{font-size:1.15rem;margin-bottom:6px;}
.card-body p{font-size:.92rem;margin-bottom:14px;}
.price{font-family:'JetBrains Mono',monospace;color:var(--amber-soft);font-size:.95rem;}

/* ---------- Our Story ---------- */
.story-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.pillar{background:var(--ink);padding:40px 36px;}
.pillar .num{font-family:'JetBrains Mono',monospace;color:var(--amber);font-size:.75rem;letter-spacing:.1em;}
.pillar h3{font-size:1.4rem;margin:14px 0 10px;}
.story-intro{font-size:1.15rem;color:var(--washi);max-width:60ch;font-family:'Shippori Mincho',serif;line-height:1.7;}

/* ---------- Menu ---------- */
.menu-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;}
.menu-tab{
  font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius);color:var(--stone);cursor:pointer;background:transparent;
}
.menu-tab.active,.menu-tab:hover{border-color:var(--amber);color:var(--washi);}
.menu-category{display:none;}
.menu-category.active{display:block;}
.menu-row{
  display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.menu-row img{width:72px;height:72px;object-fit:cover;border-radius:var(--radius);}
.menu-row h4{margin:0 0 4px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:1.02rem;color:var(--washi);}
.menu-row p{margin:0;font-size:.85rem;}

/* ---------- Locations ---------- */
.loc-card{
  border:1px solid var(--line);background:var(--ink-2);padding:30px 32px;border-radius:var(--radius);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-bottom:20px;
}
.loc-card h3{font-size:1.3rem;margin-bottom:6px;}
.loc-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;font-size:.85rem;color:var(--stone);}
.loc-meta strong{color:var(--washi);display:block;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}

/* ---------- Experience timeline ---------- */
.timeline{display:flex;flex-direction:column;}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--line);}
.tl-item:last-child{border-bottom:1px solid var(--line);}
.tl-step{font-family:'JetBrains Mono',monospace;color:var(--amber-soft);font-size:.85rem;}
.tl-body{display:grid;grid-template-columns:1fr 220px;gap:26px;align-items:center;}
.tl-body img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover;}
.tl-body h3{font-size:1.3rem;margin-bottom:8px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);}
.contact-item{background:var(--ink-2);padding:32px;transition:background .2s ease;}
.contact-item:hover{background:var(--ink-3);}
.contact-item .k{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-soft);margin-bottom:10px;}
.contact-item .v{font-size:1.1rem;color:var(--washi);word-break:break-word;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer p{margin:0;font-size:.8rem;}
.admin-link{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);opacity:.6;}
.admin-link:hover{opacity:1;color:var(--amber-soft);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;}}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .story-pillars{grid-template-columns:1fr;}
  .tl-body{grid-template-columns:1fr;}
  .tl-item{grid-template-columns:60px 1fr;}
  .loc-card{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  .navlinks{
    position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
    background:var(--ink-2);flex-direction:column;padding:100px 30px;gap:26px;
    transform:translateX(100%);transition:transform .3s ease;border-left:1px solid var(--line);
  }
  .navlinks.open{transform:translateX(0);}
  .navtoggle{display:block;z-index:101;}
  .hero-content .wrap{grid-template-columns:1fr;}
  .aging-chamber{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;}
  .aging-chamber .bar{width:100%;}
}

/* ---------- Admin (login/dashboard shared look) ---------- */
.admin-body{background:var(--ink);color:var(--washi);font-family:'Zen Kaku Gothic New',sans-serif;min-height:100vh;}
.admin-shell{max-width:1100px;margin:0 auto;padding:40px 24px 80px;}
.admin-card{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:28px;margin-bottom:26px;}
.admin-card h2{font-size:1.2rem;margin-bottom:18px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-soft);margin-bottom:6px;}
.field input[type=text],.field input[type=url],.field input[type=password],.field textarea,.field select{
  width:100%;background:var(--ink);border:1px solid var(--line);color:var(--washi);
  padding:10px 12px;border-radius:3px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:.92rem;
}
.field textarea{min-height:88px;resize:vertical;}
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.admin-tab{padding:9px 16px;border:1px solid var(--line);border-radius:3px;font-size:.82rem;color:var(--stone);}
.admin-tab.active{border-color:var(--amber);color:var(--washi);background:rgba(201,122,61,.1);}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:30px;}
.flash{padding:12px 16px;border-radius:3px;margin-bottom:20px;font-size:.88rem;}
.flash-ok{background:rgba(76,112,96,.25);border:1px solid var(--jade-soft);color:var(--washi);}
.flash-err{background:rgba(140,47,30,.25);border:1px solid var(--ember);color:var(--washi);}
.login-box{max-width:380px;margin:14vh auto 0;padding:36px;background:var(--ink-2);border:1px solid var(--line);border-radius:4px;}
.table-min{width:100%;border-collapse:collapse;font-size:.88rem;}
.table-min th,.table-min td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);}
.table-min th{font-family:'JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);}
.btn-sm{padding:7px 12px;font-size:.7rem;}
.btn-danger{border-color:var(--ember);color:var(--ember);}
.btn-danger:hover{background:var(--ember);color:var(--washi);}