/*
Theme Name: Ade Çiğköfte
Theme URI: https://example.com
Author: Ade Çiğköfte
Description: Ade Çiğköfte için tek sayfalık menü ve WhatsApp sipariş teması. Acı seviyesi seçici, kategorili menü ve sepet içerir.
Version: 2.2.0
License: GPL-2.0-or-later
Text Domain: ade-cigkofte
*/

/* Renkler çiğköftenin kendi malzemelerinden: isot, nar, limon, marul, lavaş */
:root{
  --isot:#2a0e10;
  --isot-2:#3a1619;
  --isot-3:#552429;
  --nar:#c9212f;
  --limon:#ffd23f;
  --marul:#9fd356;
  --lavas:#f7ead0;
  --dim:#d4bfa0;
  --font:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--isot);
  color:var(--lavas);
  font:400 1.0625rem/1.5 var(--font);
  padding-bottom:120px;
}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--limon);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- Duyuru ---------- */
.notice{
  background:var(--limon);color:var(--isot);
  text-align:center;font-weight:800;font-size:1.05rem;line-height:1.3;
  padding:12px 20px;
}
.sheet-note{
  margin:-4px 0 16px;padding:10px 14px;border-radius:14px;
  background:var(--isot);color:var(--limon);font-weight:700;font-size:.95rem;
}

/* ---------- Hero ---------- */
.hero{background:var(--nar);padding:22px 0 60px;overflow:hidden}
.hero-top{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-weight:600;font-size:1rem;margin-bottom:34px;
}
.hero h1{
  margin:0;
  font:800 clamp(4.4rem,19vw,15rem)/.86 var(--font);
  font-stretch:75%;
  letter-spacing:-.035em;
}
.hero h1 .ln{display:block;overflow:hidden;padding:.14em 0 .3em;margin:-.14em 0 -.3em}
.hero h1 .ln span{display:block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(110%)}}

.hero-bottom{display:grid;gap:40px;margin-top:44px}
@media(min-width:820px){.hero-bottom{grid-template-columns:5fr 6fr;align-items:end;gap:56px}}
.hero-copy p{margin:0 0 24px;font-size:1.35rem;font-weight:500;line-height:1.35;max-width:30ch}
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  background:var(--limon);color:var(--isot);
  font-weight:800;font-size:1.05rem;
  padding:16px 28px;border-radius:99px;
  transition:transform .15s;
}
.btn:hover{transform:translateY(-2px)}

/* Acı seviyesi göstergesi */
.heat-q{margin:0 0 14px;font-weight:700;font-size:1.1rem}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.level{
  background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left;
  height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
}
.level .fill{
  display:block;height:var(--h);
  border:3px solid var(--lavas);border-radius:16px 16px 6px 6px;
  transition:background-color .2s,border-color .2s,transform .2s;
}
.level.lit .fill{background:var(--limon);border-color:var(--limon)}
.level:hover .fill{transform:translateY(-4px)}
.level b{font-weight:600;font-size:.95rem;line-height:1.15}
.level.sel b{font-weight:800;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}

/* ---------- Kategori çubuğu ---------- */
.catnav{
  position:sticky;top:0;z-index:25;
  background:rgba(42,14,16,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--isot-3);
}
.admin-bar .catnav{top:32px}
@media(max-width:782px){.admin-bar .catnav{top:46px}}
.catnav .wrap{display:flex;align-items:center;gap:16px;height:66px}
.brand{
  flex:none;text-decoration:none;color:var(--lavas);
  font-weight:800;font-stretch:75%;font-size:1.7rem;letter-spacing:-.02em;
}
.chips{display:flex;gap:8px;overflow-x:auto;flex:1;padding:4px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:99px;border:2px solid var(--isot-3);
  color:var(--lavas);text-decoration:none;font-weight:700;font-size:.98rem;
  transition:background-color .2s,border-color .2s,color .2s;
}
.chip::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c)}
.chip.on{background:var(--c);border-color:var(--c);color:var(--ct)}
.chip.on::before{background:var(--ct)}

/* ---------- Menü ---------- */
.cat{padding:60px 0 8px;scroll-margin-top:66px}
.admin-bar .cat{scroll-margin-top:98px}
.cat h3{
  margin:0 0 18px;
  font:800 clamp(2.6rem,8vw,4.6rem)/.95 var(--font);
  font-stretch:75%;letter-spacing:-.03em;
}
.cat h3::after{content:'';display:block;width:84px;height:10px;border-radius:99px;background:var(--c);margin-top:14px}

.row{
  display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:center;
  padding:18px 14px;margin:0 -14px;border-radius:18px;
  border-bottom:1px solid var(--isot-2);
  transition:background-color .2s;
}
.row.has{background:var(--isot-2)}
.row .head{display:flex;align-items:baseline;gap:10px;min-width:0}
.row .name{font-weight:700;font-size:1.3rem;line-height:1.15}
.row .tag{
  align-self:center;flex:none;
  background:var(--c);color:var(--ct);
  font-weight:700;font-size:.78rem;padding:2px 9px;border-radius:99px;
}
.row .leader{flex:1;min-width:14px;border-bottom:2px dotted var(--isot-3);transform:translateY(-5px)}
.row .price{font-weight:800;font-size:1.3rem;color:var(--limon);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .desc{grid-column:1;color:var(--dim);font-size:.98rem;max-width:52ch}
.row .qty{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:6px}
.qty button{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:2px solid var(--limon);background:transparent;color:var(--limon);
  font-weight:700;font-size:1.5rem;line-height:1;
  transition:background-color .15s,color .15s,transform .15s;
}
.qty button:hover{background:var(--limon);color:var(--isot)}
.qty button:active{transform:scale(.92)}
.qty .count{min-width:26px;text-align:center;font-weight:800;font-size:1.2rem}
.qty .minus,.qty .count{visibility:hidden}
.row.has .qty .minus,.row.has .qty .count{visibility:visible}
.row.has .qty .plus{background:var(--limon);color:var(--isot)}

@media(max-width:560px){
  .row .head{grid-column:1 / -1}
  .row .desc{grid-column:1;grid-row:2;align-self:center}
  .row .qty{grid-column:2;grid-row:2}
  .row .name{font-size:1.2rem}
}

/* Resimli ürün satırı */
.row.has-img{grid-template-columns:76px 1fr auto}
.row.has-img .thumb{grid-column:1;grid-row:1 / span 2;width:76px;height:76px;object-fit:cover;border-radius:16px;background:var(--isot-3)}
.row.has-img .head{grid-column:2}
.row.has-img .desc{grid-column:2}
.row.has-img .qty{grid-column:3}
@media(max-width:560px){
  .row.has-img{grid-template-columns:64px 1fr auto}
  .row.has-img .thumb{width:64px;height:64px;border-radius:14px}
  .row.has-img .head{grid-column:2 / -1}
  .row.has-img .desc{grid-column:2;grid-row:2}
  .row.has-img .qty{grid-column:3;grid-row:2}
}

/* ---------- Bilgi ---------- */
.info{padding:80px 0 30px}
.info-grid{display:grid;gap:36px}
@media(min-width:820px){.info-grid{grid-template-columns:repeat(3,1fr);gap:48px}}
.info-item{border-top:8px solid var(--c);padding-top:16px}
.info-item h4{margin:0 0 6px;font-size:1.05rem;font-weight:600;color:var(--dim)}
.info-item p{margin:0;font-size:1.75rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}

.foot{padding:56px 0 24px;overflow:hidden}
.wordmark{
  margin:0;white-space:nowrap;
  font:800 clamp(4rem,19vw,17rem)/.82 var(--font);
  font-stretch:75%;letter-spacing:-.04em;color:var(--isot-2);
}
.foot small{display:block;margin-top:20px;color:var(--dim)}

/* ---------- Sepet çubuğu ---------- */
.cartbar{
  position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;
  width:min(560px,calc(100% - 24px));
  background:var(--limon);color:var(--isot);
  border-radius:99px;padding:8px 8px 8px 24px;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transform:translate(-50%,0);
}
.cartbar.show{display:flex;animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:translate(-50%,24px);opacity:0}}
.cartbar .sum{display:flex;flex-direction:column;line-height:1.1}
.cartbar .sum strong{font-size:1.4rem;font-weight:800}
.cartbar .sum span{font-size:.9rem;font-weight:600}
.cartbar .go{
  border:0;cursor:pointer;background:var(--isot);color:var(--lavas);
  font-weight:800;font-size:1rem;padding:15px 22px;border-radius:99px;
}
.cartbar :focus-visible{outline-color:var(--isot)}

/* ---------- Sipariş paneli ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(20,6,7,.65);z-index:40;display:none}
.sheet-bg.show{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:580px;margin:0 auto;
  background:var(--lavas);color:var(--isot);
  border-radius:28px 28px 0 0;
  padding:26px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:92vh;overflow:auto;
  transform:translateY(105%);visibility:hidden;
  transition:transform .28s ease,visibility 0s .28s;
}
.sheet.show{transform:none;visibility:visible;transition-delay:0s}
.sheet :focus-visible{outline-color:var(--isot)}
.sheet h3{margin:0 0 14px;font:800 2.2rem/1 var(--font);font-stretch:75%;letter-spacing:-.02em}
.sheet .close{
  position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;
  border:2px solid var(--isot);background:transparent;color:var(--isot);font-size:1.1rem;cursor:pointer;
}
.lines{margin:0 0 6px;padding:0;list-style:none}
.lines li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:2px dotted #c9b48f;font-weight:600}
.total{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:1.5rem;margin:14px 0 20px}
.field{display:block;margin-bottom:14px}
.field span,.group-label{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px}
.field input,.field textarea{
  width:100%;padding:13px 14px;border:2px solid #d8c299;border-radius:14px;
  font:500 1rem var(--font);background:#fffaf0;color:var(--isot);
}
.field textarea{min-height:72px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--isot);outline:0}
.chipset{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chipset button,.chipset label{
  flex:1;min-width:92px;text-align:center;cursor:pointer;
  padding:11px 10px;border-radius:14px;border:2px solid var(--isot);
  background:transparent;color:var(--isot);font-weight:700;font-size:.95rem;
}
.chipset button.sel,.chipset label:has(input:checked){background:var(--isot);color:var(--lavas)}
.addr3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.addr3 .field{margin-bottom:14px}
.chipset.heat{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:480px){.chipset.heat{grid-template-columns:repeat(4,1fr)}}
.chipset.heat button{min-width:0}
.chipset input{position:absolute;opacity:0;pointer-events:none}
.chipset label:has(input:focus-visible){outline:3px solid var(--isot);outline-offset:3px}
.send{
  width:100%;border:0;cursor:pointer;background:#25d366;color:var(--isot);
  font-weight:800;font-size:1.15rem;padding:18px;border-radius:99px;
}
.hint{margin:12px 0 0;text-align:center;font-size:.9rem;opacity:.75}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}