/* srasa.id — Srasi Food */
:root{
  --navy:#0B2F5B;
  --navy-2:#0E3D72;
  --teal:#129E99;
  --teal-muda:#DFF2F0;
  --emas:#C9A445;
  --tinta:#13233A;
  --abu:#56657A;
  --kertas:#F4F7F7;
  --garis:#D5E1E1;
  --putih:#FFFFFF;
  --judul:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --badan:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lebar:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--badan);font-size:17px;line-height:1.65;color:var(--tinta);background:var(--putih);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal)}
h1,h2,h3,h4{font-family:var(--judul);line-height:1.12;margin:0;letter-spacing:-.01em;color:var(--navy)}
h2{font-size:clamp(30px,4vw,46px);font-weight:800}
h3{font-size:clamp(22px,2.4vw,28px);font-weight:700}
h4{font-size:18px;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--emas);outline-offset:3px;border-radius:4px}

.wadah{width:100%;max-width:var(--lebar);margin-inline:auto;padding-inline:24px}
.lewati{position:absolute;left:-9999px;top:8px;background:var(--emas);color:var(--navy);padding:8px 14px;z-index:100;font-weight:700}
.lewati:focus{left:8px}

/* tombol */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.tombol-emas{background:var(--emas);color:var(--navy)}
.tombol-emas:hover{background:#DDB955}
.tombol-garis{border-color:rgba(255,255,255,.7);color:#fff}
.tombol-garis:hover{background:#fff;color:var(--navy)}
.tombol-teal{background:var(--teal);color:#fff}
.tombol-teal:hover{background:#0D827E}
.tautan{font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}

/* kepala */
.kepala{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .25s,box-shadow .25s}
.kepala.padat{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.kepala-dalam{display:flex;align-items:center;justify-content:space-between;height:76px}
.merek img{height:46px;width:auto}
.merek span{color:#fff;font-family:var(--judul);font-weight:800;font-size:22px}
.navigasi{display:flex;align-items:center;gap:28px}
.navigasi a{color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.navigasi a:hover{color:var(--emas)}
.navigasi .nav-cta{border:2px solid var(--emas);padding:8px 18px;border-radius:999px;color:var(--emas)}
.navigasi .nav-cta:hover{background:var(--emas);color:var(--navy)}
.menu-tombol{display:none;background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff;font:600 15px var(--badan);padding:8px 16px;border-radius:999px;cursor:pointer}

/* hero */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-foto{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,47,91,.96) 0%,rgba(11,47,91,.86) 42%,rgba(11,47,91,.35) 100%)}
.hero-isi{position:relative;padding-top:clamp(140px,20vh,200px);padding-bottom:clamp(90px,14vh,140px)}
.hero-pt{color:var(--emas);font-weight:700;font-size:16px;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(42px,7vw,88px);font-weight:800;max-width:12ch;line-height:1.02;letter-spacing:-.025em}
.hero-sub{font-size:clamp(17px,1.6vw,20px);max-width:54ch;color:#D8E4EF;margin:26px 0 34px}
.hero-aksi{display:flex;flex-wrap:wrap;gap:14px}

/* rantai: tanda tangan visual — tiga unit tersambung */
.rantai{position:relative;background:var(--teal)}
.rantai-isi{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.rantai-isi li{position:relative}
.rantai-isi li:not(:last-child)::after{content:"";position:absolute;left:58px;right:12px;top:47px;height:2px;background:rgba(255,255,255,.55)}
.rantai-isi a{display:block;padding:23px 24px 28px 0;color:#fff;text-decoration:none}
.rantai-isi .heks{display:block;width:44px;height:48px;margin-bottom:12px;background:var(--navy);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:relative;transition:background-color .2s}
.rantai-isi .heks::after{content:"";position:absolute;inset:14px 12px;background:var(--emas);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.rantai-isi strong{display:block;font-family:var(--judul);font-size:22px;font-weight:700;line-height:1.2}
.rantai-isi small{display:block;font-size:14px;color:#E3F5F3;line-height:1.45;margin-top:4px;max-width:30ch}
.rantai-isi a:hover .heks{background:var(--emas)}
.rantai-isi a:hover .heks::after{background:var(--navy)}

/* bagian umum */
.bagian{padding:clamp(72px,10vw,120px) 0}
.kepala-bagian{max-width:calc(var(--lebar));margin-bottom:48px}
.kepala-bagian p{max-width:60ch;color:var(--abu);font-size:18px;margin-top:14px}
.sub-judul{margin-bottom:28px}

/* tentang */
.tentang-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.tentang-teks h2{margin-bottom:24px;max-width:16ch}
.tentang-teks p{color:#2E3E52;max-width:58ch}
.tentang-foto{margin:0;border-radius:6px 120px 6px 6px;overflow:hidden;aspect-ratio:4/5}
.tentang-foto img{width:100%;height:100%;object-fit:cover}
.visi-misi{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:80px;padding-top:48px;background:linear-gradient(var(--garis),var(--garis)) 24px 0/calc(100% - 48px) 1px no-repeat}
.visi-misi h3{margin-bottom:18px}
.daftar-garis{list-style:none}
.daftar-garis li{padding:12px 0 12px 22px;border-bottom:1px solid var(--garis);position:relative}
.daftar-garis li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:10px;background:var(--teal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.nilai-judul{margin:72px 0 22px;font-size:20px}
.nilai{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.nilai li{background:var(--navy);color:#fff;padding:14px 26px;font-weight:700;font-family:var(--judul);font-size:19px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}

/* unit */
.unit{background:var(--kertas)}
.unit-baris{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center;margin-bottom:clamp(56px,8vw,96px)}
.unit-baris.balik .unit-foto{order:2}
.unit-foto{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:6px}
.unit-foto img{width:100%;height:100%;object-fit:cover}
.unit-teks h3{font-size:clamp(30px,3.6vw,42px);font-weight:800}
.unit-ringkas{color:var(--teal);font-weight:700;margin:8px 0 18px}
.unit-teks p{max-width:56ch}
.label-daftar{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.label-daftar li{border:1.5px solid var(--navy);color:var(--navy);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600}
.keunggulan{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:-24px auto 72px;padding-top:3px;background:linear-gradient(var(--navy),var(--navy)) 24px 0/calc(100% - 48px) 3px no-repeat}
.keunggulan>div{padding:24px 24px 8px 0}
.keunggulan>div+div{padding-left:24px;border-left:1px solid var(--garis)}
.keunggulan h4{margin-bottom:8px}
.keunggulan p{font-size:15px;color:var(--abu)}
.katalog-wadah{margin-bottom:clamp(64px,9vw,110px)}

/* sarang: katalog heksagon */
.sarang{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:8px 10px;padding-bottom:9%}
.sarang li{position:relative;aspect-ratio:1/1.12;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);overflow:hidden}
.sarang li:nth-child(even){transform:translateY(50%)}
.sarang img{width:100%;height:100%;object-fit:cover}
.sarang li::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(11,47,91,.85))}
.sarang span{z-index:1;position:absolute;inset:auto 0 22%;text-align:center;color:#fff;font-weight:700;font-size:14px;line-height:1.2;padding:0 14%;text-shadow:0 1px 8px rgba(0,0,0,.7)}

.pemberdayaan{padding-top:56px;background:linear-gradient(var(--garis),var(--garis)) 24px 0/calc(100% - 48px) 1px no-repeat}
.pemberdayaan-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.pemberdayaan h4{margin-bottom:14px;color:var(--teal)}
.daftar-angka{counter-reset:n;list-style:none}
.daftar-angka li{counter-increment:n;position:relative;padding:12px 0 12px 44px;border-bottom:1px solid var(--garis)}
.daftar-angka li::before{content:counter(n);position:absolute;left:0;top:12px;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center}
.toko{margin-top:28px;font-weight:600}

/* merchant */
.merchant h2{margin-bottom:44px}
.merchant-daftar{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--garis);border-left:1px solid var(--garis)}
.merchant-daftar li{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto 1fr;column-gap:20px;align-items:start;padding:28px 24px;border-right:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.merchant-daftar img{grid-row:span 2;width:96px;height:96px;object-fit:contain}
.merchant-daftar h3{font-size:21px;align-self:end;margin-top:14px}
.merchant-daftar p{font-size:15px;color:var(--abu);margin:6px 0 0}

/* paket */
.paket{background:var(--navy);color:#fff}
.paket h2,.paket .kepala-bagian p{color:#fff}
.paket .kepala-bagian p{color:#C9D8E8}
.tab{display:inline-flex;gap:4px;background:rgba(255,255,255,.08);padding:5px;border-radius:999px;margin-bottom:36px;flex-wrap:wrap}
.tab button{background:transparent;color:#D3E0EE;border:0;font:700 16px var(--badan);padding:11px 24px;border-radius:999px;cursor:pointer}
.tab button[aria-selected="true"]{background:var(--emas);color:var(--navy)}
.paket-daftar{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.paket-kartu{background:#fff;color:var(--tinta);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.paket-kartu img{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--kertas)}
.paket-badan{padding:20px;display:flex;flex-direction:column;flex:1}
.paket-badan h3{font-size:20px}
.harga{font-family:var(--judul);font-weight:800;font-size:30px;color:var(--navy);margin:10px 0 0;line-height:1.1}
.harga small{font-size:15px;font-weight:600;color:var(--abu);font-family:var(--badan)}
.minimum{font-size:14px;color:var(--teal);font-weight:700;margin:4px 0 14px}
.isi{list-style:none;font-size:15px;border-top:1px solid var(--garis);padding-top:10px;margin-bottom:14px}
.isi li{padding:3px 0}
.catatan{font-size:13px;color:var(--abu);line-height:1.5}
.paket-badan .tombol{margin-top:auto;min-height:44px;font-size:15px}
.berlaku{margin:26px 0 0;color:#C9D8E8;font-size:15px}

/* galeri */
.foto-grid{list-style:none;display:grid;gap:10px}
.foto-dapur{grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px}
.foto-dapur li:first-child{grid-row:span 2}
.foto-dapur li:nth-child(4){grid-column:span 2}
.foto-acara{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}
.foto-grid li{overflow:hidden;border-radius:4px;min-height:0}
.foto-buka{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.foto-buka:focus-visible{outline:3px solid var(--emas);outline-offset:-3px}
.foto-grid img{width:100%;height:100%;object-fit:cover}
.kepala-acara{margin-top:clamp(72px,10vw,110px)}
.acara-daftar{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.acara-daftar li{background:var(--teal-muda);padding:10px 16px;border-radius:4px;font-size:15px}
.acara-daftar span{display:block;color:var(--abu);font-size:13px}

.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh}
.lightbox::backdrop{background:rgba(6,22,43,.88)}
.lightbox img{max-height:82vh;width:auto;margin:auto;border-radius:4px}
.lightbox p{color:#fff;text-align:center;margin:10px 0 0}
.lightbox-tutup{position:fixed;top:18px;right:18px;background:#fff;border:0;border-radius:999px;padding:10px 18px;font:700 15px var(--badan);cursor:pointer}

/* klien */
.klien{background:var(--kertas)}
.klien h2{margin-bottom:36px}
.klien-daftar{list-style:none;display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center}
.klien-daftar img{height:56px;width:auto;filter:grayscale(1);opacity:.8}
.klien-daftar span{font-weight:700;color:var(--abu)}

/* kontak */
.kontak{background:var(--teal);color:#fff}
.kontak h2{color:#fff;margin-bottom:28px;max-width:16ch}
.kontak-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.kontak-data{margin:0;display:grid;gap:0}
.kontak-data div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.kontak-data dt{font-weight:700;color:#E3F5F3}
.kontak-data dd{margin:0}
.kontak-data a{color:#fff;font-weight:600}
.kontak-kosong{color:#E3F5F3}

/* kaki */
.kaki{background:#08264A;color:#AFC2D6;font-size:14px}
.kaki-dalam{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.kaki p{margin:0}

/* responsif */
@media (max-width:1024px){
  .paket-daftar{grid-template-columns:repeat(2,1fr)}
  .keunggulan{grid-template-columns:repeat(2,1fr)}
  .keunggulan>div:nth-child(3){padding-left:0;border-left:0}
  .merchant-daftar{grid-template-columns:repeat(2,1fr)}
  .sarang{grid-template-columns:repeat(4,1fr)}
  .sarang{padding-bottom:14%}
}
@media (max-width:820px){
  body{font-size:16px}
  .menu-tombol{display:block}
  .navigasi{position:absolute;top:76px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;display:none}
  .navigasi.buka{display:flex}
  .navigasi a{padding:12px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
  .navigasi .nav-cta{margin-top:12px;width:auto;border-bottom:2px solid var(--emas)}
  .kepala.menu-buka{background:var(--navy)}
  .rantai-isi{grid-template-columns:1fr}
  .rantai-isi li:not(:last-child)::after{left:21px;right:auto;top:66px;bottom:-10px;width:2px;height:auto}
  .rantai-isi a{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:14px 0}
  .rantai-isi .heks{grid-row:span 2;margin:0}
  .tentang-grid,.visi-misi,.unit-baris,.pemberdayaan-grid,.kontak-grid{grid-template-columns:1fr}
  .unit-baris.balik .unit-foto{order:0}
  .tentang-foto{aspect-ratio:4/3;border-radius:6px 64px 6px 6px}
  .visi-misi{margin-top:56px}
  .keunggulan{grid-template-columns:1fr;margin-top:0}
  .keunggulan>div,.keunggulan>div+div{padding:18px 0 4px;border-left:0;border-bottom:1px solid var(--garis)}
  .merchant-daftar{grid-template-columns:1fr}
  .merchant-daftar li{grid-template-columns:72px 1fr;padding:20px 16px}
  .merchant-daftar img{width:72px;height:72px}
  .sarang{grid-template-columns:repeat(3,1fr)}
  .sarang{padding-bottom:18%}
  .sarang li:nth-child(n){transform:none}
  .sarang li:nth-child(3n+2){transform:translateY(50%)}
  .sarang span{font-size:12px}
  .foto-dapur{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:160px}
  .foto-dapur li:first-child{grid-row:auto;grid-column:span 2}
  .foto-dapur li:nth-child(4){grid-column:span 2}
  .foto-acara{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .kontak-data div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:560px){
  .paket-daftar{grid-template-columns:1fr}
  .tab{display:flex;border-radius:14px}
  .tab button{flex:1;padding:10px 12px}
}