/* Nar Seramik — v5.1 (iskelet: H7 arama merkezli başlık · K4 ürün sayfası açılışı · A3 sekmeli akış · F1 footer) · Faustina + Ubuntu Sans · saf beyaz, soğuk sis #F1F5F3, seladon #7FB8A4 (derin #2E5D50), demir kırmızısı #A63A2B,
   mürekkep #18191D, ham kil #C9A27F (yalnız daldırma çizgisinin altı). İmza: daldırma çizgisi — sırın bittiği dalgalı sınır. */
@import url('/hz/ortak/hz-ui.css');
@font-face { font-family: 'Faustina'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(font/faustina-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Faustina'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(font/faustina-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Faustina'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(font/faustina-i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Faustina'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(font/faustina-i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ubuntu Sans'; font-style: normal; font-weight: 100 800; font-stretch: 75% 100%; font-display: swap; src: url(font/ubuntu-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ubuntu Sans'; font-style: normal; font-weight: 100 800; font-stretch: 75% 100%; font-display: swap; src: url(font/ubuntu-tr.woff2) format('woff2'); unicode-range: U+0100-017F; }
@font-face { font-family: 'Nar Lira'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(font/faustina-latin-ext.woff2) format('woff2'); unicode-range: U+20BA; }
@view-transition { navigation: none; }

:root {
  --w: #fff; --sis: #F1F5F3; --sis2: #E5ECE9; --ink: #18191D; --ink2: #454850; --ink3: #6F737C; --line: #E1E7E4; --line2: #C7D1CC;
  --sel: #7FB8A4; --sel-d: #2E5D50; --sel-dd: #1E4038; --sel-t: #E7F2ED; --dem: #A63A2B; --dem-d: #852A1E; --dem-t: #F8ECE9; --kil: #C9A27F; --hata: #B3261E;
  --f-d: 'Faustina', 'Nar Lira', 'Iowan Old Style', Georgia, serif; --f-b: 'Ubuntu Sans', 'Nar Lira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 4px; --rc: 8px; --g: clamp(16px, 4vw, 56px); --max: 1400px; --hd: 84px;
  --sh1: 0 1px 2px rgb(24 25 29 / .06), 0 6px 16px -6px rgb(46 93 80 / .16);
  --sh2: 0 2px 4px rgb(24 25 29 / .05), 0 22px 44px -18px rgb(46 93 80 / .28), 0 44px 80px -40px rgb(24 25 29 / .22);
  --sh3: 0 40px 80px -24px rgb(30 64 56 / .34), 0 16px 32px -16px rgb(0 0 0 / .2), 0 1px 0 rgb(255 255 255 / .6) inset;
  --e: cubic-bezier(.2, .7, .2, 1); --e2: cubic-bezier(.65, 0, .35, 1);
  --ui-zemin: #fff; --ui-murekkep: #18191D; --ui-vurgu: #2E5D50; --ui-vurgu-murekkep: #fff; --ui-yuzey: #fff; --ui-yaricap: 4px;
  --ui-font-baslik: var(--f-d); --ui-hata: #B3261E; --ui-golge: var(--sh2);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.6 var(--f-b); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
b, strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
dl, dd { margin: 0; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--sel-d); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.tn, .tot dd, .pc-p, .skf-tb td { font-variant-numeric: tabular-nums; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-s { width: 17px; height: 17px; }
.h1 { font: 500 clamp(44px, 6.4vw, 92px)/.98 var(--f-d); letter-spacing: -.03em; }
.h2 { font: 500 clamp(34px, 4.4vw, 64px)/1.02 var(--f-d); letter-spacing: -.025em; text-wrap: balance; }
.h3 { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--f-d); letter-spacing: -.01em; }

/* düğmeler: köşeli, basınç hissi, sır gibi yükselen dolgu (daldırma çizgisi) */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r); font: 500 16px/1 var(--f-b); letter-spacing: .005em; cursor: pointer; transition: transform .15s var(--e), color .3s, border-color .3s, box-shadow .3s; white-space: nowrap; }
.btn::before { content: ''; position: absolute; inset: -2px; z-index: -1; transform: translateY(102%); transition: transform .5s var(--e2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C 12 4 22 14 34 9 S 56 2 68 8 S 88 15 100 7 V100 H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C 12 4 22 14 34 9 S 56 2 68 8 S 88 15 100 7 V100 H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.btn:hover::before { transform: translateY(-6%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn .ic { transition: transform .3s var(--e); }
.btn:hover .ic { transform: translateX(3px); }
.btn-k { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgb(24 25 29 / .6); }
.btn-k::before { background: var(--sel-d); }
.btn-l { background: #fff; border-color: var(--line2); color: var(--ink); }
.btn-l::before { background: var(--sel-t); }
.btn-l:hover { border-color: var(--sel-d); }
.btn-w { background: #fff; color: var(--ink); }
.btn-w::before { background: var(--sel); }
.btn[disabled], .btn.dis { opacity: .45; pointer-events: none; }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .35s var(--e), color .2s; }
.lnk:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--sel-d); }
.lnk-w { color: #fff; }
.lnk-b { border: 0; background: none; padding: 0; color: var(--sel-d); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.sq { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line2); background: #fff; border-radius: var(--r); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.sq:hover { border-color: var(--ink); }
.sq:active { transform: scale(.95); }
.sq[disabled] { opacity: .35; pointer-events: none; }

/* sır örneği (daldırma çizgili) */
.sw { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 3px; overflow: hidden; flex: none; vertical-align: middle;
  background: radial-gradient(120% 90% at 28% 18%, var(--gl) 0, var(--g) 52%, var(--gd) 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.sw::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 26% at 30% 22%, rgb(255 255 255 / .55), transparent 70%); }
.sw-kul::before, .sw-demir::before, .sw-toprak::before { content: ''; position: absolute; inset: 0; background: url(/hz/magaza/benek.svg) 0 0 / 90px 90px; opacity: .6; }
.sw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw svg path { fill: var(--kil); }
.sw > b { position: absolute; left: 6px; bottom: 4px; font-size: 12px; font-weight: 500; z-index: 1; }
.gd { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.gd-tuz { background: #ECEBE6; } .gd-kul { background: #B9BAB5; } .gd-seladon { background: #BFD3C6; } .gd-demir { background: #A63A2B; } .gd-kobalt { background: #2B4BA0; } .gd-toprak { background: #B5704A; } .gd-is { background: #35373B; }
.gd.off { opacity: .4; background-image: linear-gradient(135deg, transparent 45%, rgb(0 0 0 / .5) 46% 54%, transparent 55%); }



/* ------------------------------------------------------------------ başlık (H7): ortada büyük arama, menü ikincil, sepet fişi + fırın çipi */
.hd { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .25s; }
.hd.sc { box-shadow: 0 1px 0 var(--line); }
.hd-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 3vw, 44px); height: var(--hd); transition: height .25s var(--e); }
.hd-l { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.lg-m { width: 36px; height: 36px; }
.lg-p { fill: var(--sel); } .lg-w { fill: none; stroke: #fff; stroke-width: 1.3; opacity: .9; } .lg-c { fill: var(--dem); }
.lg-t { display: grid; line-height: 1; }
.lg-n { font: 600 28px/1 var(--f-d); letter-spacing: -.02em; }
.lg-s { font-size: 12px; color: var(--ink3); margin-top: 4px; letter-spacing: .01em; }
.hd-mg { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 2px; border: 0; background: none; font-size: 15.5px; color: var(--ink2); cursor: pointer; transition: color .2s; }
.hd-mg::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 1.5px; background: var(--dem); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--e); }
.hd-mg:hover, .hd-mg.open, .hd-mg[aria-current] { color: var(--ink); }
.hd-mg:hover::after, .hd-mg.open::after, .hd-mg[aria-current]::after { transform: scaleX(1); }
.ic-dn { transition: transform .2s; }
.hd-mg.open .ic-dn { transform: rotate(180deg); }
.hd-q { position: relative; }
.q-f { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 10px 0 18px; background: var(--sis); border: 1px solid transparent; border-radius: 6px; cursor: text; transition: background .2s, border-color .2s, box-shadow .25s; }
.q-f .ic { color: var(--ink2); }
.q-f:hover { background: var(--sis2); }
.q-f:focus-within, .hd.q-on .q-f { background: #fff; border-color: var(--ink); box-shadow: 0 22px 44px -28px rgb(30 64 56 / .45); }
.q-f input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 17px var(--f-b); color: var(--ink); }
.q-f input::placeholder { color: var(--ink3); opacity: 1; }
.q-f input::-webkit-search-cancel-button { -webkit-appearance: none; }
.q-kb { font: 500 12px var(--f-b); color: var(--ink3); border: 1px solid var(--line2); border-radius: 4px; padding: 3px 7px; background: #fff; white-space: nowrap; }
.q-f:focus-within .q-kb { opacity: 0; }
.q-p { position: absolute; left: -48px; right: -48px; top: calc(100% + 10px); z-index: 5; background: #fff; border-radius: var(--rc); box-shadow: var(--sh3); padding: 8px; animation: qIn .14s var(--e); }
@keyframes qIn { from { opacity: 0; transform: translateY(-6px); } }
.q-in { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 8px; max-height: min(68vh, 560px); overflow: auto; }
.q-in.q-tek { grid-template-columns: minmax(0, 1fr); }
.q-in.q-tek .q-c:empty { display: none; }
.q-c { padding: 8px; min-width: 0; }
.q-cl { background: var(--sis); border-radius: 6px; }
.q-k { font-size: 12.5px; color: var(--ink3); margin: 4px 6px 8px; }
.q-c > .q-k ~ .q-k { margin-top: 16px; }
.q-gz { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.q-gz a { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 4px; font-size: 14px; line-height: 1.2; }
.q-sw { position: relative; width: 22px; height: 22px; flex: none; border-radius: 3px; overflow: hidden; background: radial-gradient(120% 90% at 28% 18%, var(--gl) 0, var(--g) 52%, var(--gd) 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.q-sw::after { content: ''; position: absolute; inset: 66% 0 0; background: var(--kil); }
.q-ln { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 6px; border-radius: 4px; }
.q-ln:not(:has(.q-sw, img)) { grid-template-columns: minmax(0, 1fr); }
.q-ln b { font: 500 16px/1.2 var(--f-d); }
.q-ln small { grid-column: -2; font-size: 12.5px; color: var(--ink3); line-height: 1.3; }
.q-ln .q-sw, .q-ln img { grid-row: span 2; }
.q-cat img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; }
.q-pr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border-radius: 6px; }
.q-pr img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--sis); }
.q-pr span:nth-child(2) { display: grid; line-height: 1.25; min-width: 0; }
.q-pr b { font: 500 18px/1.15 var(--f-d); }
.q-pr small { font-size: 13px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pr i { display: flex; gap: 3px; margin-top: 5px; }
.q-pr em { width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.q-fy { text-align: right; font: 500 17px/1.2 var(--f-d); font-variant-numeric: tabular-nums; }
.q-fy small { display: block; font: 400 12px var(--f-b); color: var(--sel-d); }
.q-c [role=option] { transition: background .15s; }
.q-cr [role=option]:hover, .q-cr [role=option].on { background: var(--sis); }
.q-cl [role=option]:hover, .q-cl [role=option].on { background: #fff; }
.q-none { padding: 18px 10px; color: var(--ink2); font-size: 15px; }
.q-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; padding: 10px 10px 4px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink3); }
.q-h kbd { font: 500 11.5px var(--f-b); border: 1px solid var(--line2); border-radius: 3px; padding: 1px 5px; margin-right: 4px; background: #fff; }
.q-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; font-size: 14px; }
.q-all:hover { color: var(--sel-d); }
.hd-r { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.6vw, 24px); }
.hd-kiln { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink2); white-space: nowrap; transition: color .2s; }
.hd-kiln .ic { color: var(--dem); }
.hd-kiln b { font-weight: 500; color: var(--ink); }
.hd-kiln:hover { color: var(--ink); }
.hd-tl { font-size: 15px; color: var(--ink2); white-space: nowrap; }
.hd-tl:hover, .hd-tl[aria-current] { color: var(--ink); }
/* sepet fişi: altı yırtma kenarlı */
.hd-cart { position: relative; display: grid; gap: 1px; min-width: 104px; padding: 8px 14px 15px; border: 0; background: var(--ink); color: #fff; text-align: left; cursor: pointer; border-radius: 3px 3px 0 0; transition: transform .15s var(--e);
  -webkit-mask: radial-gradient(4px at 50% 100%, #0000 97%, #000) 50% / 9px 100%; mask: radial-gradient(4px at 50% 100%, #0000 97%, #000) 50% / 9px 100%; }
.hd-cart:hover { transform: translateY(1px); }
.hd-cart:active { transform: translateY(2px) scale(.98); }
.hd-ct { display: grid; line-height: 1.1; }
.hd-ct small { font-size: 11.5px; opacity: .7; }
.hd-ct small i { font-style: normal; }
.hd-ct small i:not(:empty)::before { content: '· '; }
.hd-ct b { font: 500 18px var(--f-d); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hd-cb { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 2px; background: rgb(255 255 255 / .16); overflow: hidden; }
.hd-cb i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--sel); transition: width .5s var(--e); }
.hd-cart.ok .hd-cb i { background: #9FE0C5; }
.hd-i { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r); cursor: pointer; color: var(--ink); }
.hd-i:hover { background: var(--sis); }
.hd-menu, .hd-qb { display: none; }

/* mega menü (Mağaza düğmesinden) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 1px 0 var(--line) inset, 0 40px 60px -40px rgb(30 64 56 / .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .14s, transform .14s, visibility 0s .14s; }
.mega.open { opacity: 1; visibility: visible; transform: none; transition: opacity .14s, transform .14s; }
.mega-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 44px; padding-top: 30px; padding-bottom: 36px; }
.mg-cat li + li { border-top: 1px solid var(--line); }
.mg-cat a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 12px 0; transition: padding .25s var(--e), color .2s; }
.mg-n { font: 400 24px/1.1 var(--f-d); letter-spacing: -.01em; }
.mg-m { display: grid; font-size: 13.5px; color: var(--ink2); text-align: right; line-height: 1.3; }
.mg-m small { font-size: 12px; color: var(--sel-d); }
.mg-cat a:hover, .mg-cat a.on { padding-left: 10px; color: var(--sel-d); }
.mg-all a { display: inline-flex; gap: 8px; align-items: center; padding: 14px 0 0; font-weight: 500; grid-template-columns: none; }
.mg-pv { position: relative; border-radius: var(--rc); overflow: hidden; background: var(--sis); min-height: 340px; }
.mg-f { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .25s; }
.mg-f.on { opacity: 1; }
.mg-f img { width: 100%; height: 100%; object-fit: cover; }
.mg-f figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; background: #fff; padding: 10px 12px; font-size: 14px; border-radius: var(--r); box-shadow: var(--sh1); }
.mg-r { display: grid; align-content: start; }
.mg-pg { display: grid; margin-bottom: 22px; }
.mg-pg a { display: grid; padding: 9px 0; border-bottom: 1px solid var(--line); line-height: 1.3; transition: padding .25s var(--e); }
.mg-pg b { font: 500 18px var(--f-d); } .mg-pg span { font-size: 13px; color: var(--ink3); }
.mg-pg a:hover { padding-left: 8px; } .mg-pg a:hover b { color: var(--sel-d); }
.mg-k { font-size: 13px; color: var(--ink3); margin-bottom: 10px; }
.mg-gz { display: flex; gap: 6px; }
.mg-gz a { display: block; transition: transform .2s var(--e); }
.mg-gz a:hover { transform: translateY(-3px); }
.mg-gz .sw { width: 38px; height: 38px; }

/* diyaloglar: menü, arama, sepet */
dialog { padding: 0; border: 0; max-width: none; max-height: none; color: var(--ink); }
dialog::backdrop { background: rgb(18 30 26 / .42); }
.menu { width: 100%; height: 100%; margin: 0; background: #fff; }
.menu[open] { animation: mnIn .15s var(--e); }
@keyframes mnIn { from { opacity: 0; transform: translateY(-8px); } }
.mn-in { min-height: 100%; padding: 14px var(--g) 32px; display: grid; gap: 22px; align-content: start; }
.mn-top { display: flex; justify-content: space-between; align-items: center; }
.mn-s { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r); background: #fff; color: var(--ink2); font-size: 16px; }
.mn-cat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mn-cat a { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--sis); border-radius: var(--rc); }
.mn-cat img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; }
.mn-cat span { display: grid; font: 500 18px/1.15 var(--f-d); }
.mn-cat small { font: 400 12.5px var(--f-b); color: var(--ink3); }
.mn-kur { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: var(--rc); background: var(--sel-d); color: #fff; }
.mn-kur span { display: grid; } .mn-kur b { font: 500 22px var(--f-d); } .mn-kur small { opacity: .8; }
.mn-gz { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.mn-gz a { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; }
.mn-nav { display: grid; }
.mn-nav a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font: 500 22px var(--f-d); }
.mn-nav a[aria-current="page"] { color: var(--sel-d); }
.mn-alt { display: grid; gap: 6px; font-size: 14.5px; color: var(--ink2); }
.mn-alt p { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: none; }
.oc.acik .dot, .acik .dot { background: #2E9B6F; box-shadow: 0 0 0 4px rgb(46 155 111 / .15); }
.drw { width: min(470px, 100%); height: 100%; margin: 0 0 0 auto; background: #fff; }
.drw[open] { animation: drwIn .15s var(--e); }
@keyframes drwIn { from { transform: translateX(24px); opacity: 0; } }
.drw-in { height: 100%; display: flex; flex-direction: column; }
.drw-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.drw-h { font: 500 28px var(--f-d); }
.drw-h span { font-size: 18px; color: var(--ink3); }
.drw .sb { margin: 14px 20px 0; }
.drw-l { flex: 1; overflow: auto; padding: 6px 20px; }
.drw-f { padding: 22px 20px 18px; background: var(--sis); display: grid; gap: 12px; }
.fis { position: relative; }
.fis::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 9px; background: radial-gradient(circle at 7px 0, transparent 6px, var(--fis, var(--sis)) 6.5px) -1px 0 / 14px 9px repeat-x; }
.drw-b { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.drw-eta { display: flex; gap: 8px; font-size: 14px; color: var(--ink2); }
.demo-n { font-size: 13px; color: var(--ink3); }
.cl { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--line); }
.cl-im img { width: 76px; height: 90px; object-fit: cover; border-radius: 4px; background: var(--sis); }
.cl-t { font: 500 19px/1.2 var(--f-d); } .cl-t span { display: block; font: 400 13.5px var(--f-b); color: var(--ink3); margin-top: 2px; }
.cl-g { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-top: 6px; }
.cl-g .gz { display: none; }
.cl-set { color: var(--sel-d); }
.cl-s { font-size: 13px; color: var(--dem); margin-top: 2px; } .cl-s.on { color: var(--sel-d); }
.cl-r { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.cl-p { text-align: right; font-family: var(--f-d); font-size: 18px; } .cl-p s { display: block; font-size: 13px; color: var(--ink3); }
.cl-x { position: absolute; right: 0; top: 14px; width: 28px; height: 28px; border: 0; background: none; font-size: 22px; color: var(--ink3); cursor: pointer; border-radius: var(--r); }
.cl-x:hover { background: var(--sis); color: var(--ink); }
.qty { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r); height: 38px; }
.qty button { width: 34px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.qty button:hover { background: var(--sis); }
.qty input { width: 40px; border: 0; text-align: center; font: 500 15px var(--f-b); -moz-appearance: textfield; background: none; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cart-e { display: grid; gap: 14px; justify-items: start; padding: 26px 0; }
.cart-e svg { width: 110px; } .cart-e ellipse { fill: none; stroke: var(--line2); stroke-width: 1.4; }
.cart-e div { display: flex; gap: 8px; flex-wrap: wrap; }
.tot { display: grid; gap: 7px; font-size: 15px; }
.tot div { display: flex; justify-content: space-between; gap: 12px; }
.tot dt small { color: var(--ink3); font-size: 12.5px; }
.tot-d dd { color: var(--sel-d); }
.tot-t { padding-top: 10px; border-top: 1px dashed var(--line2); font-size: 17px; }
.tot-t dd { font: 600 26px var(--f-d); }
.sb { display: grid; gap: 7px; }
.sb-t { font-size: 14px; color: var(--ink2); }
.sb-r { height: 6px; background: var(--sis2); border-radius: 3px; overflow: hidden; }
.sb-r i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--sel), var(--sel-d)); transition: width .5s var(--e); border-radius: 3px; }
.sb.ok .sb-r i { background: var(--sel-d); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 400; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r); font-size: 15px; box-shadow: var(--sh2); transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* segmentler, sekmeler */
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r); padding: 3px; gap: 2px; background: #fff; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 3px; font: 500 17px var(--f-d); transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--sel-d); outline-offset: 2px; }
.seg label:hover input:not(:checked) + span { background: var(--sis); }
.tabs { position: relative; display: flex; gap: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { display: inline-flex; align-items: baseline; gap: 6px; border: 0; background: none; padding: 12px 0 14px; font-size: 16px; color: var(--ink3); cursor: pointer; white-space: nowrap; transition: color .2s; }
.tabs button small { font-size: 12.5px; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs-cz, .sek-cz { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--dem); transition: transform .35s var(--e), width .35s var(--e); }



/* ------------------------------------------------------------------ K4 açılış: "Bu haftanın sofrası" bir ürün sayfası gibi */
.hr-in { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); align-items: start; }
.hr-l { position: sticky; top: var(--hd); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-width: 0; height: calc(100svh - var(--hd)); min-height: 620px; max-height: 1040px; }
.sf { position: relative; }
.sf > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.sf canvas { z-index: 1; }
.sf-tag { z-index: 3; inset: auto; left: 0; top: 0; width: auto; height: auto; pointer-events: none; display: grid; gap: 2px; padding: 9px 12px 10px; margin: 18px 0 0 16px; background: #fff; border-radius: var(--r); box-shadow: var(--sh2); max-width: 300px; border-left: 3px solid var(--dem); }
.sf-tag b { font: 500 17px/1.2 var(--f-d); } .sf-tag span { font-size: 13px; color: var(--ink2); line-height: 1.35; }
.sf-hr { min-height: 0; background: #5F9C88; overflow: hidden; }
.sf-hr .sf-poster img { object-position: 50% 50%; }
.sf-cap { z-index: 2; inset: auto; left: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); top: 22px; width: auto; height: auto; display: flex; gap: 10px; align-items: baseline; color: #fff; font-size: 14px; letter-spacing: .01em; text-shadow: 0 1px 12px rgb(20 50 42 / .5); pointer-events: none; }
.sf-cap span:first-child { font: 500 19px var(--f-d); }
.sf-cap span + span::before { content: '·'; margin-right: 10px; opacity: .7; }
/* sır kartelası (küçük resim şeridinin yerinde) */
.kt { padding: 16px 28px 20px max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); background: #fff; }
.kt-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 13.5px; color: var(--ink2); margin-bottom: 10px; }
.kt-k > span:first-child { color: var(--ink); font-weight: 500; }
.kt-h { margin-left: auto; color: var(--ink3); font-size: 13px; }
.kt-r { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.kt-b { position: relative; display: grid; justify-items: start; gap: 1px; padding: 0 0 9px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.kt-b::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e); }
.kt-b[aria-pressed="true"]::after { transform: scaleX(1); }
.kt-b .sw { width: 100%; height: 34px; border-radius: 3px; margin-bottom: 8px; transition: transform .25s var(--e), box-shadow .25s; }
.kt-b:hover .sw { transform: translateY(-3px); box-shadow: 0 10px 18px -12px rgb(30 64 56 / .5), inset 0 0 0 1px rgb(0 0 0 / .08); }
.kt-n { max-width: 100%; min-height: 2.3em; font: 500 15px/1.15 var(--f-d); text-wrap: balance; }
/* satın alma kutusu = sofra seti kurucusu */
.hr-r { padding: clamp(22px, 3.6vh, 44px) max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))) 36px clamp(32px, 4.6vw, 80px); }
.by { display: grid; align-content: start; max-width: 540px; }
.by-k { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--ink3); }
.by-k span:first-child { color: var(--dem); font-weight: 500; }
.by-k span + span::before { content: '·'; margin-right: 12px; color: var(--line2); }
.by-h { margin-top: 10px; font: 400 clamp(36px, 3.2vw, 46px)/1.05 var(--f-d); letter-spacing: -.025em; text-wrap: balance; }
.by-s { margin-top: 12px; color: var(--ink2); font-size: 15.5px; line-height: 1.5; max-width: 48ch; }
.by-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; }
.by-p b { font: 500 clamp(34px, 3vw, 42px)/1 var(--f-d); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.by-p s { font-size: 18px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.by-d { margin-top: 6px; min-height: 1.5em; font-size: 14px; color: var(--ink3); }
.by-d.on { color: var(--sel-d); }
.by-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.by-r { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.by-r2 { align-items: start; }
.by-r2 .by-l { padding-top: 12px; }
.by-l { font-size: 14px; color: var(--ink2); }
.by-c { display: grid; gap: 8px; min-width: 0; }
.seg-by { display: flex; } .seg-by label { flex: 1; } .seg-by span { min-width: 0; height: 42px; font-size: 19px; }
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.chip { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border: 1px dashed var(--line2); border-radius: var(--r); cursor: pointer; font-size: 12.5px; line-height: 1.15; text-align: center; color: var(--ink3); background: #fff; transition: border-color .2s, color .2s, transform .15s; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip .pic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.chip:hover { border-color: var(--ink3); }
.chip:active { transform: scale(.96); }
.sk-p.on .chip { border-style: solid; border-color: var(--ink); color: var(--ink); }
.sk-p.hedef .chip { box-shadow: 0 0 0 2px var(--dem); border-color: var(--dem); }
.chip-g { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 2px; opacity: 0; transition: opacity .2s, background .4s; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.sk-p.on .chip-g { opacity: 1; }
.chip:has(input:focus-visible) { outline: 2px solid var(--sel-d); outline-offset: 2px; }
.by-ad { font-size: 13px; color: var(--ink3); line-height: 1.4; }
.by-gz { font-size: 14.5px; color: var(--ink3); line-height: 1.4; }
.by-gz b { color: var(--ink); font-weight: 500; }
.by-pre { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.by-pre button { border: 0; background: none; padding: 4px 0; font-size: 15px; color: var(--ink2); cursor: pointer; background-image: linear-gradient(var(--line2), var(--line2)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color .2s, background-image .2s; }
.by-pre button:hover { color: var(--ink); }
.by-pre button[aria-pressed="true"] { color: var(--ink); background-image: linear-gradient(var(--dem), var(--dem)); font-weight: 500; }
.by-add { margin-top: 18px; min-height: 58px; justify-content: flex-start; font-size: 17px; padding: 0 22px; }
.by-add b { margin-left: auto; font: 500 19px var(--f-d); font-variant-numeric: tabular-nums; }
.slip-st { margin-top: 10px; font-size: 14px; color: var(--dem); }
.slip-st.on { color: var(--sel-d); }
.by-eta { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 16px; padding: 12px 14px; background: var(--sis); border-radius: 6px; }
.by-eta .ui-alan { margin: 0; }
.by-eta .ui-secim-dugme { min-height: 50px !important; padding-top: 21px !important; padding-bottom: 6px !important; }
.by-et .eta-e { font-size: 13.5px; color: var(--ink3); line-height: 1.4; }
.by-et .eta-r { padding: 4px 0; border: 0; }
.by-et .eta-r + .eta-r { border-top: 1px dashed var(--line2); }
.by-et .eta-r b { font-size: 19px; }
.by-alt { margin-top: 18px; font-size: 15px; }
.eta-e { font-size: 14px; color: var(--ink3); }
.eta-r { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line2); }
.eta-r:first-child { border-top: 0; }
.eta-k { font-size: 13px; color: var(--dem); } .eta-r.on .eta-k { color: var(--sel-d); }
.eta-r b { font: 500 22px var(--f-d); grid-row: span 2; align-self: center; text-align: right; } .eta-r small { font-size: 12.5px; color: var(--ink3); }

/* ------------------------------------------------------------------ A3: sekmeli tek ekran */
.ak { padding: clamp(56px, 6vw, 100px) 0 0; }
.ak-tb { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line2); margin-bottom: clamp(40px, 5vw, 72px); }
.ak-tb button { display: grid; gap: 8px; justify-items: start; padding: 24px 20px 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink3); transition: color .25s; }
.ak-n { font: 400 clamp(28px, 2.9vw, 44px)/1 var(--f-d); letter-spacing: -.025em; }
.ak-tb small { font-size: 13.5px; }
.ak-tb button:hover { color: var(--ink2); }
.ak-tb button[aria-selected="true"] { color: var(--ink); }
.ak-tb button[aria-selected="true"] small { color: var(--ink2); }
.ak-cz { position: absolute; top: -1px; left: 0; height: 2px; background: var(--dem); transition: transform .45s var(--e), width .45s var(--e); }
.ak-st { display: grid; }
.akp { grid-area: 1 / 1; min-width: 0; padding-bottom: clamp(80px, 8vw, 130px); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .3s var(--e), visibility 0s .2s; }
.akp.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .05s, transform .5s .05s var(--e), visibility 0s; }
.akp-otel { padding-bottom: 0; }
/* Sofralar */
.s3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5.5vw, 96px); align-items: stretch; }
.s3-t { display: grid; align-content: start; gap: 18px; }
.s3-t > p { color: var(--ink2); max-width: 44ch; }
.s3-l { margin-top: 14px; border-top: 1px solid var(--line); }
.s3-i { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 5px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--ink3); transition: padding .35s var(--e), box-shadow .35s; }
.s3-n { font: 400 clamp(28px, 2.4vw, 36px)/1.05 var(--f-d); letter-spacing: -.02em; color: var(--ink2); transition: color .25s; }
.s3-p { grid-column: 1; font-size: 14px; }
.s3-fy { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: center; text-align: right; }
.s3-fy b { font: 500 22px var(--f-d); color: var(--ink); font-variant-numeric: tabular-nums; } .s3-fy small { font-size: 12.5px; }
.s3-i[aria-pressed="true"] { padding-left: 18px; box-shadow: inset 2px 0 0 var(--dem); }
.s3-i[aria-pressed="true"] .s3-n, .s3-i:hover .s3-n { color: var(--ink); }
.s3-raf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 12px; font-size: 15px; }
.s3-raf span { color: var(--ink3); font-size: 13.5px; margin-right: 4px; }
.s3-raf a { display: inline-flex; gap: 4px; align-items: baseline; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--e); }
.s3-raf a:hover { background-size: 100% 1px; }
.s3-raf small { font-size: 11.5px; color: var(--ink3); }
.s3-v { position: relative; min-height: clamp(520px, 44vw, 660px); border-radius: var(--rc); overflow: hidden; background: var(--sis); box-shadow: var(--sh2); }
.s3-v > figure { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.s3-v > figure.on { opacity: 1; visibility: visible; transition: opacity .5s; }
.s3-v > figure > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--e); }
.s3-v > figure.on > img { transform: none; }
.s3-c { position: absolute; right: 22px; bottom: 22px; width: min(370px, calc(100% - 44px)); display: grid; gap: 12px; padding: 20px; background: #fff; border-radius: var(--rc); box-shadow: var(--sh3); }
.s3-ck { font: 500 20px var(--f-d); }
.s3-c ul { display: grid; }
.s3-c li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line2); font-size: 14.5px; }
.s3-c li span { display: grid; line-height: 1.25; } .s3-c li small { font-size: 12px; color: var(--ink3); }
.s3-c em { font-style: normal; color: var(--ink3); font-size: 13.5px; }
.s3-c li b { font: 500 16px var(--f-d); font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
.s3-ct { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--sel-d); }
.s3-ct b { font: 500 28px var(--f-d); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s3-c .btn { width: 100%; justify-content: space-between; min-height: 50px; }
/* Sırlar */
.sw-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: end; margin-bottom: 36px; }
.sw-top p { color: var(--ink2); }
.swc-a { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.lnk-c { color: inherit !important; border: 0; background-color: transparent; cursor: pointer; font-size: 15.5px; padding-left: 0; padding-right: 0; }
/* Atölye: çamurdan sofraya adımlayıcı */
.sr { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5.5vw, 96px); align-items: stretch; }
.sr-ph { position: relative; min-height: clamp(540px, 46vw, 680px); border-radius: var(--rc); overflow: hidden; background: var(--sel-d); box-shadow: var(--sh2); }
.sr-f { position: absolute; inset: 0; margin: 0; }
.sr-f img { width: 100%; height: 100%; object-fit: cover; }
.sr-f:not(:first-child) { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.sr-gun { position: absolute; z-index: 2; left: 26px; bottom: 22px; display: flex; align-items: baseline; gap: 10px; color: #fff; text-shadow: 0 2px 20px rgb(0 0 0 / .35); }
.sr-gun b { font: 400 clamp(72px, 7vw, 110px)/.8 var(--f-d); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sr-gun span { font-size: 15px; opacity: .9; }
.sr-r { display: grid; align-content: start; gap: 18px; }
.sr-lead { color: var(--ink2); max-width: 44ch; }
.sr-st { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sr-st button { position: relative; width: 100%; display: grid; gap: 9px; justify-items: start; padding: 0 0 10px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink3); transition: color .25s; }
.sr-st button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.sr-st button[aria-selected="true"]::after { background: var(--dem); }
.sr-n { display: block; width: 100%; }
.sr-n .sw { width: 100%; height: 36px; filter: grayscale(.85); opacity: .45; transition: filter .3s, opacity .3s; }
.sr-st button[aria-selected="true"] { color: var(--ink); }
.sr-st button[aria-selected="true"] .sw, .sr-st button:hover .sw { filter: none; opacity: 1; }
.sr-t { display: grid; font: 500 16px/1.15 var(--f-d); }
.sr-t small { font: 400 12px/1.3 var(--f-b); color: var(--ink3); margin-top: 2px; }
.sr-d { min-height: 5.2em; font-size: 16.5px; color: var(--ink2); }
.sr-c { margin: 0; padding: 12px 14px 4px; background: var(--sis); border-radius: var(--rc); }
.sr-cv { width: 100%; height: auto; overflow: visible; cursor: ew-resize; touch-action: pan-y; }
.cv-g path { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 5; }
.cv-g text { font: 22px var(--f-b); fill: var(--ink3); }
.cv-bg { fill: none; stroke: var(--line2); stroke-width: 1.5; }
.cv-p { fill: none; stroke: var(--dem); stroke-width: 3; stroke-linecap: round; }
.cv-pk text { font: 500 28px var(--f-d); fill: var(--dem); }
.cv-d { fill: #fff; stroke: var(--dem); stroke-width: 3; }
.sr-r .lnk { justify-self: start; }
/* Otel ve restoran: tek koyu blok */
.kb { background: var(--ink); color: #fff; padding: clamp(72px, 8vw, 120px) 0; }
.kb-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.kb-t > p { margin-top: 20px; color: rgb(255 255 255 / .78); max-width: 52ch; }
.kb-tr { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; border-top: 1px solid rgb(255 255 255 / .2); }
.kb-tr li { display: grid; gap: 4px; padding: 18px 18px 0 0; }
.kb-tr li + li { padding-left: 18px; border-left: 1px solid rgb(255 255 255 / .2); }
.kb-tr b { font: 500 26px/1.1 var(--f-d); } .kb-tr span { color: var(--sel); font-weight: 500; } .kb-tr small { font-size: 13.5px; color: rgb(255 255 255 / .62); }
.kb-cta { display: flex; gap: 22px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.kb-f { position: relative; margin: 0; }
.kb-f img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--rc); }
.kb-f figcaption { margin-top: 12px; font-size: 13.5px; color: rgb(255 255 255 / .6); }
.kb-m { position: absolute; left: -46px; bottom: 40px; width: 172px; height: 172px; background: var(--dem); border-radius: 50%; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
.kb-m circle { fill: none; stroke: rgb(255 255 255 / .8); stroke-width: 1.4; }
.kb-m .m2 { stroke-dasharray: 3 4; }
.kb-m text { font: 500 11.5px var(--f-b); letter-spacing: .14em; fill: #fff; }
.kb-m .m3 { font: 500 30px var(--f-d); letter-spacing: 0; }

/* ------------------------------------------------------------------ sofralardan + sorulanlar */
.nt { padding: clamp(80px, 9vw, 140px) 0; background: var(--sis); }
.nt-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.nt-b { display: grid; gap: 18px; }
.nt-b .lnk { justify-self: start; }
.demo-tag { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--dem); background: var(--dem-t); padding: 5px 9px; border-radius: 3px; }
.yr-big { margin: 34px 0 0; }
.yr-big blockquote { margin: 0; font: italic 400 clamp(26px, 2.6vw, 38px)/1.25 var(--f-d); letter-spacing: -.01em; text-wrap: pretty; }
.yr-big figcaption a { display: inline-flex; gap: 12px; align-items: center; margin-top: 22px; }
.yr-big img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.yr-big span { display: grid; line-height: 1.3; } .yr-big small { color: var(--ink3); font-size: 13.5px; }
.nt .yr-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.nt .yr-l li { padding: 18px 0 0; border-top: 1px solid var(--line2); border-bottom: 0; }
.yr-l li { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.yr-l li:last-child { border-bottom: 1px solid var(--line); }
.yr-l p { font-size: 15.5px; color: var(--ink2); }
.yr-m { font-size: 13px !important; color: var(--ink3) !important; } .yr-m b { color: var(--ink); font-weight: 500; } .yr-m a { text-decoration: underline; text-underline-offset: 3px; } .yr-m em { font-style: normal; color: var(--dem); }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 12px; height: 12px; background: var(--line2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: var(--dem); }
.acc .ui-akordeon { border-bottom: 1px solid var(--line2); }
.acc .ui-akordeon:first-child { border-top: 1px solid var(--line2); }
.acc .ui-akordeon summary { font: 500 20px/1.3 var(--f-d); padding: 18px 0; }
.acc .ui-akordeon p { color: var(--ink2); padding-bottom: 18px; max-width: 66ch; }

/* ------------------------------------------------------------------ footer (F1): kompakt çok sütun + bülten */
.ft { background: #fff; border-top: 1px solid var(--line); }
.ft-in { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.5fr); gap: clamp(24px, 3vw, 52px); padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(40px, 4vw, 56px); }
.ft-b { display: grid; gap: 14px; align-content: start; }
.ft-d { color: var(--ink2); font-size: 15px; max-width: 34ch; }
.ft-o { font-size: 14px; color: var(--ink2); }
.ft-c { display: grid; gap: 2px; font-size: 15px; }
.ft-c a:hover { color: var(--sel-d); }
.ft-k { font-size: 13px; color: var(--ink3); margin-bottom: 12px; }
.ft-n li a { display: inline-block; padding: 4px 0; font-size: 15.5px; transition: color .2s; }
.ft-n li a:hover { color: var(--sel-d); }
.ft-nl { display: grid; align-content: start; }
.ft-q { font: 400 26px/1.15 var(--f-d); letter-spacing: -.015em; margin-bottom: 16px; max-width: 18ch; }
.nl-row { display: flex; height: 52px; border: 1px solid var(--line2); border-radius: var(--r); background: #fff; transition: border-color .2s, box-shadow .2s; }
.nl-row:focus-within { border-color: var(--sel-d); box-shadow: 0 0 0 3px rgb(46 93 80 / .14); }
.nl-row input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; font: 400 16px var(--f-b); outline: 0; }
.nl-g { display: inline-flex; align-items: center; gap: 8px; margin: 4px; padding: 0 14px; border: 0; border-radius: 3px; background: var(--ink); color: #fff; font: 500 15px var(--f-b); cursor: pointer; transition: background .2s; }
.nl-g:hover { background: var(--sel-d); }
.nl-ck { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--ink2); line-height: 1.45; }
.nl-ck input { margin-top: 2px; accent-color: var(--sel-d); }
.nl-ck a { text-decoration: underline; text-underline-offset: 2px; }
.fd-e { display: block; color: var(--hata); font-size: 13.5px; min-height: 1.2em; margin-top: 6px; }
.nl-done { margin-top: 8px; color: var(--sel-d); font-weight: 500; font-size: 14.5px; }
.ft-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink3); }
.ft-bot a:hover { color: var(--ink); }
.ft-lv { margin-left: auto; } .ft-lv b, .ft-lv time { color: var(--ink2); font-weight: 500; font-variant-numeric: tabular-nums; }
.ft-up { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line2); background: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--e), border-color .2s; }
.ft-up:hover { transform: translateY(-2px); border-color: var(--ink); }
.oc { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: none; }
.oc.acik .dot, .acik .dot { background: #2E9B6F; box-shadow: 0 0 0 4px rgb(46 155 111 / .15); }


/* ürün kartı */
.pc { position: relative; display: grid; align-content: start; }
.pc-im { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rc); background: var(--sis); }
.pc-im img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e); }
.pc:hover .pc-im img { transform: scale(1.045); }
.pc-bd { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.bd { display: inline-block; padding: 4px 8px; background: #fff; border-radius: 3px; font-size: 12.5px; font-weight: 500; }
.bd-r { background: var(--dem); color: #fff; }
.pc-f { position: relative; }
.pc-add { display: flex; position: absolute; left: 10px; right: 10px; bottom: 10px; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: var(--r); background: #fff; color: var(--ink); cursor: pointer; font-size: 14.5px; font-weight: 500; opacity: 0; transition: opacity .2s, background .2s; box-shadow: var(--sh1); }
.pc-add small { color: var(--ink3); font-weight: 400; }
.pc:hover .pc-add, .pc-add:focus-visible { opacity: 1; }
.pc-add:hover { background: var(--ink); color: #fff; } .pc-add:hover small { color: rgb(255 255 255 / .7); }
.pc-add.ok { background: var(--sel-d); color: #fff; opacity: 1; }
.pc-b { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; padding-top: 14px; }
.pc-t { font: 500 22px/1.15 var(--f-d); letter-spacing: -.01em; }
.pc-t a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.pc-p { text-align: right; font: 500 19px/1.2 var(--f-d); }
.pc-p s { display: block; font-size: 13px; color: var(--ink3); }
.pc-k { grid-column: 1 / -1; font-size: 14.5px; color: var(--ink2); }
.pc-g { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 6px; }
.pc-s { grid-column: 1 / -1; font-size: 13px; color: var(--dem); }
.pc-s.on { color: var(--sel-d); }
.pc-add, .pc-bd { z-index: 1; }



/* ------------------------------------------------------------------ yedi sır duvarı */
.swl { display: flex; gap: 8px; height: clamp(440px, 56vh, 560px); }
.swc { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--rc); overflow: hidden; color: var(--ink); transition: flex-grow .6s var(--e2), box-shadow .4s;
  background: radial-gradient(70% 40% at 30% 14%, rgb(255 255 255 / .5), transparent 70%), radial-gradient(130% 90% at 20% 0%, var(--gl), var(--g) 48%, var(--gd) 100%); }
.swc::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(91deg, transparent 0 30px, rgb(0 0 0 / .04) 31px 33px, transparent 34px 61px); }
[data-swc="kul"]::after, [data-swc="demir"]::after, [data-swc="toprak"]::after, [data-swc="tuz"]::after { content: ''; position: absolute; inset: 0; background: url(benek.svg) 0 0 / 240px 240px; opacity: .55; }
[data-swc="tuz"]::after { opacity: .18; }
[data-swc="demir"]::after { opacity: .4; filter: brightness(.6); }
.swc.on { flex-grow: 5.2; box-shadow: var(--sh2); }
[data-swc="demir"], [data-swc="kobalt"], [data-swc="toprak"], [data-swc="is"] { color: #fff; }
.swc-b { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 6px; padding: 18px; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.swc-n { font: 500 24px/1.05 var(--f-d); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; transition: font-size .4s; }
.swc-f { font-size: 13px; opacity: 0; transition: opacity .3s; }
.swc.on .swc-n { writing-mode: horizontal-tb; transform: none; font-size: clamp(34px, 3.4vw, 50px); }
.swc.on .swc-f { opacity: .8; }
.swc-gl { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; }
.swc-gl svg { width: 100%; height: 100%; } .swc-gl path { fill: var(--kil); }
.swc-gl::after { content: ''; position: absolute; inset: 30% 0 0; background: url(benek.svg) 0 0 / 160px 160px; opacity: .22; }
.swc-p { position: absolute; z-index: 2; left: 18px; right: 18px; top: 128px; display: grid; gap: 14px; max-width: 460px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .4s var(--e), visibility 0s .3s; }
.swc.on .swc-p { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .25s, transform .45s .25s var(--e); }
.swc-d { font-size: 16px; line-height: 1.5; }
.swc-p dl { display: flex; gap: 24px; }
.swc-p dt { font-size: 12.5px; opacity: .75; } .swc-p dd { font: 500 20px var(--f-d); }
.swc-p ul { display: flex; gap: 8px; }
.swc-p ul img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px rgb(255 255 255 / .7); }
.swc-p .lnk { color: inherit; justify-self: start; }



/* ------------------------------------------------------------------ hz-ui (köşeli) */
.ui-alan { padding-top: 0; margin: 0 0 14px; }
.ui-alan[data-hata] { margin-bottom: 34px; }
.ui-alan :is(input, textarea), .ui-alan .ui-secim-dugme { min-height: 58px; padding: 25px 14px 8px; border: 1px solid var(--line2); border-radius: var(--r); background: #fff; font: 400 17px var(--f-b); transition: border-color .15s, box-shadow .15s; }
.ui-alan :is(input, textarea):hover, .ui-alan .ui-secim-dugme:hover { border-color: var(--ink3); }
.ui-alan:focus-within :is(input, textarea, .ui-secim-dugme) { border-color: var(--sel-d); box-shadow: 0 0 0 3px rgb(46 93 80 / .14); }
.ui-alan > label { left: 15px; top: 18px; color: var(--ink3); font-size: 16px; }
.ui-alan :is(input, textarea):is(:focus, :not(:placeholder-shown)) ~ label, .ui-alan.ui-dolu > label, .ui-alan:focus-within > label, .ui-alan.lb-ust > label { transform: translate3d(0, -10px, 0) scale(.78); color: var(--ink2); }
.ui-alan::after { display: none; }
.ui-alan[data-hata] :is(input, textarea, .ui-secim-dugme) { border-color: var(--hata); }
.ui-alan-hata { top: calc(100% + 5px) !important; }
.fd-o { color: var(--ink3); font-size: .9em; }
.fd-h { display: block; font-size: 13px; color: var(--ink3); margin-top: 6px; }
.ui-cip span, .ui-takvim-gun, .ui-takvim-git, .ui-akordeon-ikon, .ui-hamburger { border-radius: 3px !important; }
.ui-secim-panel { border-radius: var(--rc) !important; box-shadow: var(--sh3) !important; }
.ui-aralik input[type="range"]::-webkit-slider-thumb { border-radius: 3px !important; width: 18px !important; height: 26px !important; }
.ui-aralik input[type="range"]::-moz-range-thumb { border-radius: 3px !important; width: 16px !important; height: 24px !important; }
.ui-onay-kutu { border-radius: 3px !important; }
.ui-onay input[type=radio] + .ui-onay-kutu { border-radius: 50% !important; }
.ui-takvim-gun[aria-selected=true], .ui-takvim-hucre[aria-selected=true] .ui-takvim-gun { background: var(--sel-d) !important; color: #fff !important; }



/* ------------------------------------------------------------------ duyarlı */
@media (max-width: 1500px) { .hd-tl { display: none; } }
@media (max-width: 1280px) {
  .ft-in { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
  .ft-nl { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
  .ft-nl .ft-k, .ft-nl .ft-q { grid-column: 1; } .ft-nl .ft-q { grid-row: 2 / span 3; }
  .ft-nl .nl-row, .ft-nl .nl-ck, .ft-nl .fd-e, .ft-nl .nl-done { grid-column: 2; }
  .kt-h { display: none; }
}
@media (max-width: 1180px) {
  .hd-kiln span { display: none; }
  .hr-in { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-in { grid-template-columns: 1fr 1fr; } .mg-pv { display: none; }
  .sr-st { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --hd: 62px; }
  .hd-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'l r' 'q q'; height: auto; row-gap: 0; padding-top: 4px; padding-bottom: 10px; }
  .hd.sc .hd-in { height: auto; }
  .hd-l { grid-area: l; gap: 6px; } .hd-r { grid-area: r; gap: 6px; } .hd-q { grid-area: q; }
  .hd-menu { display: grid; margin-left: -10px; }
  .hd-mg, .mega, .hd-kiln { display: none; }
  .hd-l, .hd-r { height: 56px; }
  .q-f { height: 50px; }
  .q-kb { display: none; }
  .hd.sc:not(.q-ac) .hd-q { display: none; }
  .hd.sc:not(.q-ac) .hd-in { padding-bottom: 4px; }
  .hd.sc:not(.q-ac) .hd-qb { display: grid; }
  .q-p { left: 0; right: 0; }
  .q-in { grid-template-columns: minmax(0, 1fr); max-height: calc(100svh - 190px); }
  .q-cl { order: 2; }
  .hr-in { grid-template-columns: minmax(0, 1fr); }
  .hr-l { position: relative; top: auto; height: auto; min-height: 0; max-height: none; }
  .sf-hr { min-height: 0; height: min(112vw, 640px); }
  .sf-cap { left: var(--g); top: 16px; }
  .kt { padding: 16px var(--g) 18px; }
  .kt-r { display: flex; overflow-x: auto; gap: 10px; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); scroll-snap-type: x proximity; scrollbar-width: none; }
  .kt-b { flex: 0 0 96px; scroll-snap-align: start; }
  .hr-r { padding: 26px var(--g) 48px; }
  .by { max-width: none; }
  .chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ak { padding-top: 72px; }
  .ak-tb { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--g) * -1) 40px; padding: 0 var(--g); border-top: 0; box-shadow: inset 0 1px 0 var(--line2); }
  .ak-tb button { flex: 0 0 auto; padding: 18px 28px 0 0; }
  .ak-tb small { white-space: nowrap; }
  .akp:not(.on) { display: none; }
  .akp { transform: none !important; }
  .s3, .sr, .kb-in, .nt-in { grid-template-columns: minmax(0, 1fr); }
  .s3-v { min-height: 0; aspect-ratio: 4 / 4.6; }
  .s3-c { position: absolute; left: 14px; right: 14px; bottom: 14px; width: auto; }
  .sr-ph { min-height: 0; aspect-ratio: 4 / 4.4; }
  .sw-top { grid-template-columns: 1fr; gap: 14px; }
  .swl { flex-direction: column; height: auto; }
  .swc { flex: none; height: 70px; transition: height .5s var(--e2); }
  .swc.on { height: 460px; }
  .swc-n, .swc.on .swc-n { writing-mode: horizontal-tb; transform: none; font-size: 24px; }
  .swc.on .swc-n { font-size: 34px; }
  .swc-p { top: 100px; }
  .kb-m { left: auto; right: 14px; bottom: -30px; width: 132px; height: 132px; }
  .nt .yr-l { grid-template-columns: 1fr; gap: 0; }
  .ft-in { grid-template-columns: 1fr 1fr; }
  .ft-b { grid-column: 1 / -1; }
  .ft-nl { grid-template-columns: 1fr; } .ft-nl .ft-q, .ft-nl .nl-row, .ft-nl .nl-ck, .ft-nl .fd-e, .ft-nl .nl-done { grid-column: 1; grid-row: auto; }
  .ft-lv { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .lg-s { display: none; }
  .lg-n { font-size: 26px; }
  .hd-cart { min-width: 88px; padding: 7px 11px 14px; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .by-h { font-size: clamp(34px, 9.6vw, 42px); }
  .by-r { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .by-eta { grid-template-columns: 1fr; }
  .sr-st { grid-template-columns: repeat(5, minmax(84px, 1fr)); overflow-x: auto; scrollbar-width: none; margin: 8px calc(var(--g) * -1) 0; padding: 0 var(--g); }
  .s3-c { position: static; width: auto; margin-top: -1px; border-radius: 0 0 var(--rc) var(--rc); box-shadow: none; border: 1px solid var(--line); border-top: 0; }
  .s3-v { aspect-ratio: auto; overflow: visible; box-shadow: none; background: none; }
  .s3-v > figure { position: relative; inset: auto; display: none; }
  .s3-v > figure.on { display: block; }
  .s3-v > figure > img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--rc) var(--rc) 0 0; }
  .s3-i { grid-template-columns: 1fr; } .s3-fy { grid-column: 1; grid-row: auto; text-align: left; margin-top: 4px; }
  .kb-tr { grid-template-columns: 1fr; }
  .kb-tr li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / .2); padding-bottom: 14px; }
  .ft-in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* poster karesi üretimi (?afis): yalnız masa görünür */
.afis :is(.hd, .hr-r, .kt, .sf-cap, .hzbar, .sf-tag, .ak, .nt, .ft) { visibility: hidden !important; }