:root{
  color-scheme: light;
  --color-brand:#B89255; --color-brand-strong:#92703F; --color-accent:#24372F;
  --bg-page:#F5F0E7; --bg-surface:#FFFDF9; --bg-elevated:#FFFFFF;
  --text-primary:#1C211F; --text-secondary:#6F726E; --text-inverse:#FFFDF9;
  --border-subtle:rgba(28,33,31,0.12);
  --overlay-image:rgba(10,14,12,0.38);
  --shadow-soft:0 10px 30px rgba(28,33,31,0.08);
  --shadow-modal:0 24px 70px rgba(0,0,0,0.20);
  --state-error:#A6423A; --state-success:#35634A;
  --ph-1:#E7DFCF; --ph-2:#D8CFC1;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --ff-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw:1280px;
}
[data-theme="dark"]{
  color-scheme: dark;
  --color-brand:#C8A56B; --color-brand-strong:#D7B77E; --color-accent:#8CA395;
  --bg-page:#131614; --bg-surface:#1B1F1C; --bg-elevated:#232824;
  --text-primary:#F4EFE6; --text-secondary:#B9BCB7; --text-inverse:#171A18;
  --border-subtle:rgba(255,255,255,0.10);
  --overlay-image:rgba(4,7,5,0.46);
  --shadow-soft:0 16px 38px rgba(0,0,0,0.28);
  --shadow-modal:0 24px 70px rgba(0,0,0,0.40);
  --state-error:#D77A70; --state-success:#7EAF91;
  --ph-1:#2A2F2B; --ph-2:#20241F;
}
*{box-sizing:border-box;}
/* NOT: html/body üzerinde overflow-x:hidden KULLANMA — mobil tarayıcılarda
   position:sticky (üst çubuk + kategori navigasyonu) bozulur. Yatay taşma
   zaten sıfır; gerekirse .clip-x sarmalayıcısı overflow-x:clip ile kırpar. */
html,body{margin:0;padding:0;}
body{
  background:var(--bg-page); color:var(--text-primary);
  font-family:var(--ff-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--color-brand); outline-offset:2px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important;}}

/* ---------- Screen switching (governed by [hidden] attribute) ---------- */
.screen[hidden]{display:none;}

/* ---------- SPLASH ---------- */
#splash{
  position:fixed; inset:0; z-index:60; display:none;
  flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 18px) 22px calc(env(safe-area-inset-bottom) + 22px);
  color:#F4EFE6;
  background:
    radial-gradient(120% 90% at 20% 12%, rgba(184,146,85,0.28), transparent 55%),
    radial-gradient(120% 100% at 85% 20%, rgba(36,55,47,0.55), transparent 60%),
    linear-gradient(180deg, #1c2620 0%, #10140f 60%, #0b0e0a 100%);
}
#splash.is-active{display:flex;}
#splash::after{ /* ince doku, ağır blur yok */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.splash-top{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2;}
.splash-center{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px;
}
.brand-wordmark{font-family:var(--ff-display); letter-spacing:.14em; line-height:1;}
.brand-wordmark .m{font-size:clamp(40px,13vw,64px); font-weight:600; display:block;}
.brand-wordmark .sub{font-size:13px; letter-spacing:.42em; text-transform:uppercase; color:var(--color-brand); margin-top:10px; font-family:var(--ff-body); font-weight:600;}
.splash-msg{font-family:var(--ff-display); font-style:italic; font-size:clamp(20px,5.6vw,26px); font-weight:500; max-width:19ch; color:#efe9dc; line-height:1.35;}
.cta{
  margin-top:6px; min-height:54px; padding:0 30px;
  display:inline-flex; align-items:center; gap:12px;
  background:var(--color-brand); color:#1a140a; font-weight:700; font-size:16px; letter-spacing:.01em;
  border-radius:var(--radius-pill); box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .18s ease, background .18s ease;
}
.cta:hover{transform:translateY(-1px); background:var(--color-brand-strong); color:#fff;}
.cta:active{transform:translateY(0);}
.cta .arrow{transition:transform .2s ease;}
.cta:hover .arrow{transform:translateX(3px);}
.splash-foot{position:relative; z-index:2; text-align:center; opacity:.85;}
.corelya{display:inline-flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;}
.corelya .lbl{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,230,.6);}
.corelya .name{font-family:var(--ff-display); font-size:15px; letter-spacing:.34em; color:rgba(244,239,230,.82);}
.corelya:hover .name{color:var(--color-brand);}

/* Pill controls (dil + tema) */
.pill{
  height:38px; padding:0 6px; display:inline-flex; align-items:center;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-pill); background:rgba(0,0,0,.18);
  color:#f4efe6; backdrop-filter:blur(2px);
}
.lang-seg{display:inline-flex; align-items:center;}
.lang-seg button{padding:6px 10px; font-size:12.5px; font-weight:700; letter-spacing:.04em; border-radius:var(--radius-pill); color:inherit; opacity:.6;}
.lang-seg button.on{background:var(--color-brand); color:#1a140a; opacity:1;}
.icon-btn{width:38px; height:38px; display:inline-grid; place-items:center; border-radius:var(--radius-pill);}
.icon-btn svg{width:19px; height:19px;}

/* ---------- TOPBAR (menu screens) ---------- */
#topbar{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--border-subtle);
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
}
.topbar-row{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:6px; max-width:var(--maxw); margin:0 auto;}
.top-left{display:flex;}
.top-logo{justify-self:center; text-align:center; min-width:0; font-family:var(--ff-display); font-weight:600; letter-spacing:.13em; font-size:19px; line-height:1; background:none; white-space:nowrap;}
.top-logo .sub{display:block; font-family:var(--ff-body); font-size:8.5px; letter-spacing:.3em; color:var(--color-brand); font-weight:600; margin-top:2px;}
.top-right{display:flex; align-items:center; gap:5px;}
.pill.on-surface{border-color:var(--border-subtle); background:var(--bg-surface); color:var(--text-primary);}
.pill.on-surface .lang-seg button{opacity:.55; color:var(--text-secondary);}
.pill.on-surface .lang-seg button.on{background:var(--color-brand); color:#1a140a; opacity:1;}
.nav-icon{width:44px; height:44px; display:inline-grid; place-items:center; border-radius:var(--radius-pill); color:var(--text-primary);}
.nav-icon svg{width:22px; height:22px;}

/* ---------- Content wrap ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:18px 16px 64px;}
.section-eyebrow{font-family:var(--ff-body); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--color-brand); font-weight:700; margin:2px 0 4px;}
.section-title{font-family:var(--ff-display); font-weight:600; font-size:clamp(26px,7vw,34px); margin:0 0 16px; line-height:1.1;}

/* Search */
.search{
  display:flex; align-items:center; gap:10px; height:50px; padding:0 16px;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); margin-bottom:18px;
}
.search svg{width:20px; height:20px; color:var(--text-secondary); flex:none;}
.search input{flex:1; border:none; background:none; outline:none; font-size:16px; color:var(--text-primary); font-family:inherit;}
.search input::placeholder{color:var(--text-secondary);}
.search .clear{display:none; width:30px; height:30px; border-radius:var(--radius-pill); color:var(--text-secondary);}
.search.has-val .clear{display:inline-grid; place-items:center;}

/* ---------- Category grid ---------- */
.category-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
.cat-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; text-align:left;
  aspect-ratio:5/4; width:100%; color:#fff; isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease; box-shadow:var(--shadow-soft);
}
.cat-card:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(28,33,31,.14);}
.cat-card:active{transform:translateY(0);}
.cat-card .surface{position:absolute; inset:0; z-index:-2;}
.cat-card .veil{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,14,12,.06) 0%, rgba(10,14,12,.16) 45%, rgba(10,14,12,.62) 100%);}
.cat-card .cap{position:absolute; left:14px; right:14px; bottom:12px;}
.cat-card .cap h3{font-family:var(--ff-display); font-weight:600; font-size:20px; margin:0; letter-spacing:.01em; text-shadow:0 1px 8px rgba(0,0,0,.35);}
.cat-card .cap p{margin:2px 0 0; font-size:12px; opacity:.9; font-weight:500;}

/* ---------- Sticky category nav (list view) ---------- */
#catnav{
  position:sticky; z-index:30; top:var(--topbar-h, 64px); margin:0 0 4px; padding:10px 16px 8px;
  background:color-mix(in srgb, var(--bg-page) 92%, transparent); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-subtle);
}
.catnav-track{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:var(--maxw); margin:0 auto;}
.catnav-track::-webkit-scrollbar{display:none;}
.catnav-track button{
  flex:none; height:38px; padding:0 15px; border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-secondary);
  font-weight:600; font-size:13.5px; white-space:nowrap; transition:all .18s ease;
}
.catnav-track button.active{background:var(--color-accent); color:var(--text-inverse); border-color:transparent;}
[data-theme="dark"] .catnav-track button.active{background:var(--color-brand); color:#1a140a;}

/* ---------- Product list ---------- */
.cat-section{padding-top:14px; scroll-margin-top:120px;}
.cat-section > h2{font-family:var(--ff-display); font-weight:600; font-size:clamp(23px,6vw,30px); margin:6px 0 12px;}
.prod-list{display:flex; flex-direction:column; gap:12px;}
.prod-card{
  display:grid; grid-template-columns:1fr 104px; gap:14px; text-align:left; width:100%;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow-soft); transition:transform .16s ease, box-shadow .16s ease; align-items:stretch;
}
.prod-card:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(28,33,31,.10);}
.prod-card.is-out{opacity:.72;}
.prod-main{display:flex; flex-direction:column; min-width:0;}
.prod-name{font-family:var(--ff-display); font-weight:600; font-size:19px; line-height:1.2; margin:0 0 3px; overflow-wrap:anywhere;}
.prod-desc{font-size:14px; color:var(--text-secondary); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.tag{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:600; letter-spacing:.01em;
  background:color-mix(in srgb, var(--color-accent) 12%, var(--bg-surface)); color:var(--color-accent); border:1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);}
[data-theme="dark"] .tag{background:color-mix(in srgb, var(--color-accent) 18%, var(--bg-elevated)); color:var(--color-accent);}
.tag.out{background:color-mix(in srgb, var(--state-error) 12%, var(--bg-surface)); color:var(--state-error); border-color:color-mix(in srgb, var(--state-error) 26%, transparent);}
.tag svg{width:13px; height:13px;}
.prod-foot{margin-top:auto; padding-top:10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.price{font-weight:700; font-size:19px; color:var(--text-primary); font-variant-numeric:tabular-nums;}
.price .cur{font-size:13px; color:var(--text-secondary); font-weight:600; margin-right:1px;}
.mini-meta{font-size:12.5px; color:var(--text-secondary); font-weight:500; font-variant-numeric:tabular-nums;}
.prod-thumb{border-radius:var(--radius-sm); overflow:hidden; position:relative; align-self:stretch; min-height:104px;}

/* Placeholder surfaces (görsel yerine markaya uygun tipografik/dokulu) */
.ph{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;}
.ph.gradient{background:
  radial-gradient(120% 90% at 25% 20%, color-mix(in srgb, var(--color-brand) 26%, var(--ph-1)), transparent 60%),
  linear-gradient(150deg, var(--ph-1), var(--ph-2));}
.ph .mono{font-family:var(--ff-display); font-weight:600; color:color-mix(in srgb, var(--text-primary) 22%, transparent); line-height:1; font-size:44px;}
.ph.noimg{background:var(--bg-elevated); border:1px dashed var(--border-subtle);
  background-image:radial-gradient(color-mix(in srgb, var(--text-secondary) 22%, transparent) 1px, transparent 1px); background-size:12px 12px;}
.ph.noimg .lbl{padding:8px; text-align:center; font-family:var(--ff-display); font-size:16px; color:var(--text-secondary); font-weight:600; line-height:1.25;}

/* Empty / results */
.empty{text-align:center; padding:60px 20px; color:var(--text-secondary);}
.empty h3{font-family:var(--ff-display); color:var(--text-primary); font-weight:600; font-size:24px; margin:0 0 8px;}
.results-head{font-size:13px; color:var(--text-secondary); margin:0 0 14px; font-weight:500;}

/* ---------- Product detail (modal / bottom sheet) ---------- */
#detail-root{position:fixed; inset:0; z-index:80; display:none;}
#detail-root.open{display:block;}
.sheet-backdrop{position:absolute; inset:0; background:rgba(6,9,7,.5); opacity:0; transition:opacity .22s ease;}
#detail-root.open .sheet-backdrop{opacity:1;}
.sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:94vh;
  background:var(--bg-surface); border-radius:22px 22px 0 0; box-shadow:var(--shadow-modal);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(100%); transition:transform .28s cubic-bezier(.22,.7,.24,1);
  padding-bottom:calc(env(safe-area-inset-bottom) + 26px);
}
#detail-root.open .sheet{transform:translateY(0);}
.grabber{width:42px; height:5px; border-radius:99px; background:var(--border-subtle); margin:9px auto 0; position:sticky; top:0;}
.sheet-hero{position:relative; margin:8px 0 0; aspect-ratio:3/2;}
.sheet-hero .ph{border-radius:0;}
.sheet-hero .ph.gradient .mono{font-size:96px;}
.sheet-close{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:var(--radius-pill);
  background:rgba(255,253,249,.9); color:#1c211f; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.18);}
[data-theme="dark"] .sheet-close{background:rgba(30,34,30,.9); color:#f4efe6;}
.sheet-close svg{width:20px; height:20px;}
.sheet-body{padding:18px 20px 0; max-width:720px; margin:0 auto;}
.sheet-name{font-family:var(--ff-display); font-weight:600; font-size:28px; line-height:1.12; margin:2px 0 6px; overflow-wrap:anywhere;}
.sheet-short{color:var(--text-secondary); font-size:16px; margin:0 0 16px;}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(92px,1fr)); gap:10px; margin:0 0 20px;}
.info-chip{background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:12px 10px; text-align:center;}
.info-chip svg{width:20px; height:20px; color:var(--color-brand); margin:0 auto 6px;}
.info-chip .v{font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; line-height:1;}
.info-chip .u{font-size:12px; color:var(--text-secondary); margin-top:3px;}
.sheet-section{padding:16px 0; border-top:1px solid var(--border-subtle);}
.sheet-section h4{margin:0 0 8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-brand); font-weight:700;}
.sheet-section p{margin:0 0 6px; font-size:15.5px; line-height:1.62;}
.allergen-line{display:flex; gap:8px; font-size:15px; margin:0 0 8px; flex-wrap:wrap; align-items:baseline;}
.allergen-line .k{font-weight:700; color:var(--text-primary); flex:none;}
.allergen-line .val{color:var(--text-secondary);}
.allergen-note{font-size:13px; color:var(--text-secondary); background:color-mix(in srgb, var(--color-brand) 8%, var(--bg-elevated));
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:10px 12px; margin-top:10px; line-height:1.5;}
.diet-row{display:flex; flex-wrap:wrap; gap:8px;}
.diet{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600;
  background:color-mix(in srgb, var(--color-accent) 12%, var(--bg-surface)); color:var(--color-accent); border:1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);}
[data-theme="dark"] .diet{background:color-mix(in srgb, var(--color-accent) 18%, var(--bg-elevated));}
.diet svg{width:16px; height:16px;}
.diet.spicy{background:color-mix(in srgb, var(--state-error) 12%, var(--bg-surface)); color:var(--state-error); border-color:color-mix(in srgb, var(--state-error) 24%, transparent);}
.diet.chef{background:color-mix(in srgb, var(--color-brand) 15%, var(--bg-surface)); color:var(--color-brand-strong); border-color:color-mix(in srgb, var(--color-brand) 30%, transparent);}
[data-theme="dark"] .diet.chef{color:var(--color-brand);}
.sheet-price{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:20px 0 4px; border-top:1px solid var(--border-subtle); margin-top:4px;}
.sheet-price .lab{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-secondary); font-weight:600;}
.sheet-price .amt{font-family:var(--ff-body); font-weight:700; font-size:30px; color:var(--text-primary); font-variant-numeric:tabular-nums;}
.sheet-price .amt .cur{font-size:18px; color:var(--text-secondary); margin-right:2px;}
.out-banner{margin:0 0 4px; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--state-error) 12%, var(--bg-surface)); color:var(--state-error); font-weight:600; font-size:14px; border:1px solid color-mix(in srgb, var(--state-error) 26%, transparent);}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .category-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
  .prod-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
  .cat-section{scroll-margin-top:140px;}
  .sheet{max-width:640px; left:50%; right:auto; transform:translate(-50%,100%); bottom:auto; top:50%; margin-top:0;
    max-height:88vh; border-radius:22px; }
  #detail-root.open .sheet{transform:translate(-50%,-50%);}
  .grabber{display:none;}
  .sheet-hero{border-radius:22px 22px 0 0; overflow:hidden;}
}
@media (min-width:1000px){
  .category-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
  .prod-list{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:360px){
  .prod-card{grid-template-columns:1fr 84px; gap:10px; padding:12px;}
  .prod-name{font-size:17.5px;}
  .top-logo{font-size:16.5px; letter-spacing:.08em;}
  .top-logo .sub{font-size:7.5px; letter-spacing:.24em;}
  .lang-seg button{padding:6px 8px; font-size:12px;}
  .icon-btn{width:36px;}
  .top-right{gap:4px;}
}

/* ---------- Real images (DB-driven) ---------- */
.ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.cat-card .ph-img{z-index:-2;}

/* ---------- Corelya developer branding (splash — dark bg always) ---------- */
.corelya-mark{display:inline-block; margin-top:4px; line-height:0;}
.corelya-mark img{height:19px; width:auto; opacity:.8;}
.corelya:hover .corelya-mark img{opacity:1;}
.corelya .c-dark{display:none;} /* splash is always dark → light variant */