/* =====================================================================================
   Kapadokya Pide Döner — Public tasarım sistemi
   Yön: "Ocakbaşı, alacakaranlıkta" — ember / bakır / tüf-bej + bazalt antrasit.
   Başlık fontu: Hello Paris (yerel TTF). Gövde: sistem font yığını (istek yok).
   ===================================================================================== */

@font-face{
  font-family:'Hello Paris'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/HelloParis-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Hello Paris'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/HelloParis-Bold.ttf') format('truetype');
}

/* ============================ TOKENS ============================ */
:root{
  --ground:#E7E0D1; --surface:#FBF8F1; --surface-2:#F1EADC;
  --ink:#241E19; --muted:#6E6153; --faint:#8A7C6C;
  --accent:#C0461F; --accent-ink:#FFFFFF; --accent-soft:#F0D9CB;
  --copper:#98692C; --line:#D8CDBB; --veg:#5E7B3B; --chili:#B23A1B;
  --shadow:0 1px 2px rgba(40,30,20,.06), 0 10px 30px -12px rgba(60,40,25,.20);
  --radius:16px; --radius-sm:11px;
  --font-display:'Hello Paris', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw:780px;
}
:root[data-theme="dark"]{
  --ground:#16110E; --surface:#211913; --surface-2:#2A201A;
  --ink:#F1E8DA; --muted:#A99A87; --faint:#8B7C6B;
  --accent:#E76A34; --accent-ink:#1B1107; --accent-soft:#3A241733;
  --copper:#CB9C58; --line:#372D26; --veg:#8FA457; --chili:#E7784A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); line-height:1.5; font-feature-settings:"kern";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.8;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(80% 50% at 90% 8%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 55%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 clamp(14px,4vw,26px)}
h1,h2,h3{margin:0; text-wrap:balance}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px}
.display{font-family:var(--font-display); font-weight:700; letter-spacing:.005em; line-height:1.02}
.eyebrow{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); font-weight:600}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* Lucide ikonları (i[data-lucide]) ve inline svg boyutları */
.ico{width:20px;height:20px;stroke-width:1.8}
svg.lucide{width:20px;height:20px}

/* ============================ TOP BAR ============================ */
.topbar{position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:10px clamp(14px,4vw,26px); display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:11px; min-width:0; text-decoration:none; color:inherit}
.mark{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), var(--copper)); color:#fff; box-shadow:var(--shadow)}
.mark svg{width:21px; height:21px}
.brand-txt{display:flex; flex-direction:column; line-height:1.05; min-width:0}
.brand-txt .b1{font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.01em; white-space:nowrap}
.brand-txt .b2{font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.spacer{flex:1 1 auto}
.iconbtn{flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:transform .15s ease, border-color .15s ease}
.iconbtn:hover{transform:translateY(-1px); border-color:var(--accent)}
.iconbtn svg{width:18px; height:18px}
.langpill{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface)}
.langpill a{border:0; background:transparent; color:var(--muted); cursor:pointer; text-decoration:none;
  font-size:.78rem; font-weight:700; letter-spacing:.04em; padding:0 11px; height:38px; display:flex; align-items:center}
.langpill a.on{background:var(--accent); color:var(--accent-ink)}

/* ============================ HERO ============================ */
.hero{position:relative; overflow:hidden; margin-top:6px; border-radius:0 0 26px 26px;
  background:
    radial-gradient(130% 100% at 20% -20%, color-mix(in srgb,var(--accent) 40%, #1a0f08), transparent 60%),
    linear-gradient(160deg, #1e130c 0%, #120b07 100%);
  color:#F3E8D8}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:-40%; height:80%;
  background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb,var(--accent) 55%, transparent), transparent 70%);
  opacity:.55; pointer-events:none}
.hero-in{position:relative; z-index:2; padding:clamp(26px,7vw,52px) clamp(18px,5vw,40px) clamp(20px,5vw,30px)}
.hero .eyebrow{color:#E9B98E}
.hero h1{font-size:clamp(2.5rem,10vw,4.4rem); margin:.28em 0 .12em; color:#FBF1E2}
.hero .lead{max-width:44ch; color:#E4D3BE; font-size:1.02rem; margin:0 0 clamp(16px,4vw,22px)}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px}
.hero-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.08); color:#F1E4D2;
  border-radius:100px; padding:9px 15px; font-size:.86rem; font-weight:600; backdrop-filter:blur(4px);
  transition:transform .15s ease, background .15s ease, border-color .15s ease}
.hero-btn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); transform:translateY(-1px)}
.hero-btn svg{width:16px; height:16px; opacity:.9}
.hero-btn .dot{width:8px; height:8px; border-radius:50%; background:#5fd07f; box-shadow:0 0 0 3px rgba(95,208,127,.25)}
.socials-hero{display:flex; gap:9px; flex-wrap:wrap; margin-top:18px}
.socials-hero .soc{width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#F3E7D6;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease}
.socials-hero .soc:hover{background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px)}
.socials-hero .soc svg{width:21px; height:21px}

/* search */
.search{position:relative; margin:clamp(18px,5vw,24px) 0 4px}
.search .s-ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--faint)}
.search input{width:100%; height:52px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:1rem; padding:0 16px 0 46px; box-shadow:var(--shadow); transition:border-color .15s ease}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--accent); outline:none}

/* ============================ CATEGORY CHIPS ============================ */
.chipbar{position:sticky; top:59px; z-index:30; margin:0 calc(-1 * clamp(14px,4vw,26px));
  padding:10px clamp(14px,4vw,26px); background:color-mix(in srgb, var(--ground) 85%, transparent); backdrop-filter:blur(10px)}
.chips{display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:100px; padding:9px 16px; font-size:.9rem; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:all .16s ease}
.chip:hover{border-color:var(--accent); color:var(--ink)}
.chip.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

/* ============================ SECTIONS + CARDS ============================ */
main{padding:clamp(18px,5vw,30px) 0 40px}
.section{margin-bottom:clamp(30px,7vw,44px); scroll-margin-top:118px}
.section-head{display:flex; align-items:baseline; gap:14px; margin:0 0 16px}
.section-head h2{font-size:clamp(1.5rem,5.5vw,2rem)}
.section-head .rule{flex:1 1 auto; height:1px; background:linear-gradient(90deg,var(--line),transparent)}
.section-head .count{font-size:.8rem; color:var(--faint); font-variant-numeric:tabular-nums}
.grid{display:grid; gap:12px}
.card{display:grid; grid-template-columns:104px 1fr; gap:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 50%, var(--line))}
.thumb{position:relative; aspect-ratio:4/5; min-height:118px; overflow:hidden; background:var(--surface-2)}
.thumb .bg{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat}
.price{position:absolute; left:8px; bottom:8px; z-index:2; background:color-mix(in srgb,#000 55%, transparent);
  color:#fff; backdrop-filter:blur(3px); border-radius:9px; padding:4px 9px; font-weight:700; font-size:.86rem;
  display:flex; align-items:center; gap:3px}
.price .cur{font-size:.72rem; opacity:.85; font-weight:600}
.card-body{padding:13px 15px 13px 16px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.card-title{font-weight:700; font-size:1.06rem; letter-spacing:.005em; margin-bottom:3px; color:var(--ink)}
.card-desc{color:var(--muted); font-size:.9rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.tag{font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:100px; border:1px solid}
.tag.spicy{color:var(--chili); border-color:color-mix(in srgb,var(--chili) 40%, transparent); background:color-mix(in srgb,var(--chili) 9%, transparent)}
.tag.veg{color:var(--veg); border-color:color-mix(in srgb,var(--veg) 40%, transparent); background:color-mix(in srgb,var(--veg) 10%, transparent)}
.tag.signature{color:var(--copper); border-color:color-mix(in srgb,var(--copper) 42%, transparent); background:color-mix(in srgb,var(--copper) 10%, transparent)}
.noresults{text-align:center; padding:50px 20px; color:var(--muted); display:none}
.noresults svg{width:44px; height:44px; opacity:.5; margin-bottom:12px}

/* ============================ DETAIL SHEET ============================ */
.sheet-scrim{position:fixed; inset:0; z-index:60; background:rgba(15,10,7,.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .22s ease}
.sheet-scrim.open{opacity:1; pointer-events:auto}
.sheet{position:fixed; z-index:61; left:50%; bottom:0; transform:translate(-50%,100%); width:min(560px,100%);
  background:var(--surface); border-radius:22px 22px 0 0; box-shadow:0 -20px 50px -20px rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.2,.7,.2,1); max-height:92vh; overflow:auto; border:1px solid var(--line); border-bottom:0}
.sheet.open{transform:translate(-50%,0)}
.sheet-hero{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.sheet-hero .bg{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat}
.sheet-close{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:0;
  background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(4px); z-index:2}
.sheet-close svg{width:18px;height:18px}
.sheet-body{padding:20px clamp(18px,5vw,26px) 30px}
.sheet-body .row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.sheet-body h3{font-size:1.6rem; font-family:var(--font-display); font-weight:700}
.sheet-price{font-weight:700; font-size:1.35rem; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums}
.sheet-price .cur{font-size:.8rem; color:var(--copper)}
.sheet-desc{color:var(--muted); margin:12px 0 0; font-size:1rem; line-height:1.6}
.sheet-note{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); color:var(--faint); font-size:.85rem; display:flex; gap:9px; align-items:flex-start}
.sheet-note svg{width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--copper)}

/* ============================ INFO MODAL (hours / map) ============================ */
.modal-scrim{position:fixed; inset:0; z-index:70; background:rgba(15,10,7,.6); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; display:grid; place-items:center; padding:18px}
.modal-scrim.open{opacity:1; pointer-events:auto}
.modal-card{width:min(460px,100%); background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); overflow:hidden; transform:translateY(12px) scale(.98);
  transition:transform .22s cubic-bezier(.2,.7,.2,1); max-height:90vh; overflow-y:auto}
.modal-scrim.open .modal-card{transform:none}
.modal-head{display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--line)}
.modal-head .mh-ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}
.modal-head .mh-ic svg{width:18px; height:18px}
.modal-head h3{font-family:var(--font-display); font-weight:700; font-size:1.2rem; flex:1}
.modal-head .x{width:34px; height:34px; border:0; border-radius:9px; background:var(--surface-2); color:var(--muted); cursor:pointer; display:grid; place-items:center}
.modal-head .x svg{width:17px; height:17px}
.modal-in{padding:12px 18px 18px}
.hours{list-style:none; margin:0; padding:0}
.hours li{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 6px; border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours .day{font-weight:600; display:flex; align-items:center}
.hours .time{color:var(--muted); font-variant-numeric:tabular-nums}
.hours li.today{background:var(--accent-soft); margin:0 -8px; padding-left:14px; padding-right:14px; border-radius:11px; border-bottom-color:transparent}
.hours li.today .day{color:var(--accent)}
.hours li.today .time{color:var(--ink); font-weight:700}
.hours .closed{color:var(--chili); font-weight:700}
.badge-today{font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:100px; padding:2px 7px; margin-left:9px}
/* Harita: production'da Google Maps embed iframe (web_maps.value) */
.mapbox{position:relative; aspect-ratio:16/11; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.mapbox iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.15)}
.addr{display:flex; gap:10px; align-items:flex-start; margin:15px 0 0; color:var(--muted); font-size:.92rem; line-height:1.5}
.addr svg{width:17px; height:17px; color:var(--copper); flex:0 0 auto; margin-top:2px}
.btn-primary{display:inline-flex; align-items:center; gap:8px; justify-content:center; width:100%; margin-top:14px;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:12px; padding:13px; font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary svg{width:17px; height:17px}

/* ============================ FOOTER ============================ */
footer{position:relative; z-index:1; border-top:1px solid var(--line); background:var(--surface-2)}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:26px clamp(14px,4vw,26px) 34px; display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between}
.foot-in .l{display:flex; align-items:center; gap:11px}
.foot-contact{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.86rem; color:var(--muted)}
.foot-contact a{display:inline-flex; align-items:center; gap:7px; text-decoration:none}
.foot-contact a:hover{color:var(--accent)}
.foot-contact svg{width:15px; height:15px; color:var(--copper)}
.socials-foot{display:flex; gap:9px; flex-wrap:wrap}
.socials-foot .soc{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--muted); transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease}
.socials-foot .soc:hover{background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px)}
.socials-foot .soc svg{width:19px; height:19px}
.copy{width:100%; text-align:center; font-size:.76rem; color:var(--faint); border-top:1px solid var(--line); padding:14px 0 0; margin-top:6px}

/* ============================ LANGUAGE SELECT MODAL (ilk ziyaret) ============================ */
.lang-scrim{position:fixed; inset:0; z-index:90; background:rgba(15,10,7,.7); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px}
.lang-card{width:min(420px,100%); background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); text-align:center}
.lang-card .lc-head{padding:26px 22px 8px}
.lang-card .lc-mark{width:52px;height:52px;border-radius:15px;margin:0 auto 14px;display:grid;place-items:center;background:linear-gradient(150deg,var(--accent),var(--copper));color:#fff}
.lang-card .lc-mark svg{width:28px;height:28px}
.lang-card h3{font-family:var(--font-display);font-weight:700;font-size:1.4rem}
.lang-card p{color:var(--muted); font-size:.92rem; margin:6px 0 0}
.lang-list{display:flex; flex-direction:column; gap:10px; padding:18px 22px 26px}
.lang-list a{display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:13px; text-decoration:none; color:var(--ink); font-weight:600; transition:all .15s ease}
.lang-list a:hover{border-color:var(--accent); background:var(--accent-soft)}
.lang-list a .fi{width:26px; border-radius:3px; overflow:hidden}

/* ============================ MOTION ============================ */
@media (max-width:420px){ .card{grid-template-columns:92px 1fr} .brand-txt .b2{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }
.reveal{opacity:0; transform:translateY(10px); animation:rise .5s ease forwards}
@keyframes rise{to{opacity:1; transform:none}}