/* Tulu Seramik — ortak vitrin stili.
 * TEK token seti bu dosyadadir; gorunumlerin <style> bloklari ve panel.css
 * yalniz bu token'lari kullanir.
 * YON: A · ATOLYE (5 Ekim 2026, isletmenin secimi; docs/superpowers/specs/
 * 2026-10-05-tulu-marka-yonu.md): acik sicak beyaz zemin, murekkep lacivert metin,
 * tek vurgu logonun kobalti; basliklar Fraunces, govde Manrope; rengi urun
 * fotograflari tasir. Acik tema, koyu mod yok. Kontrast degerlerini tasarim
 * kapisi (takim\araclar\tasarim_denetimi.py, K12) her degisiklikte yeniden olcer. */

/* YAZI TIPLERI SITENIN KENDISINDEN (5 Ekim 2026). Eskiden fonts.googleapis.com'dan
   geliyordu: her ziyaretcinin IP adresi onaysiz Google'a (yurt disi) gidiyordu.
   Dosyalar araclar/font_alt_kume.py ile uretilir (Turkce + Latin-1 alt kumesi,
   SIL OFL 1.1, lisanslar genel/font/OFL-*.txt). Adresteki ?v= damgasi bir yillik
   onbellegi acar (genel/.htaccess); duzen.php'deki preload ile AYNI adres olmali. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/genel/font/manrope.woff2?v=2026-10-05") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/genel/font/fraunces.woff2?v=2026-10-05a") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/genel/font/fraunces-italik.woff2?v=2026-10-05a") format("woff2"); }
/* Yedek yuzler: web fontu gelene kadar satirlar ayni yerde kirilsin (font gelince
   kayma olmasin). Olculer font_alt_kume.py'nin ciktisi (genislik orani + ust/alt pay);
   Android'de Arial/Georgia yoktur, Roboto/Noto Serif esi ayrica olculdu. */
@font-face { font-family: "Manrope Yedek"; src: local("Arial"), local("ArialMT"); size-adjust: 100.6%; ascent-override: 105.9%; descent-override: 29.8%; line-gap-override: 0.0%; }
@font-face { font-family: "Manrope Yedek Android"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 102.3%; ascent-override: 104.2%; descent-override: 29.3%; line-gap-override: 0.0%; }
@font-face { font-family: "Fraunces Yedek"; src: local("Georgia"); size-adjust: 103.0%; ascent-override: 94.9%; descent-override: 24.8%; line-gap-override: 0.0%; }
@font-face { font-family: "Fraunces Yedek Android"; src: local("Noto Serif"), local("NotoSerif"); size-adjust: 95.6%; ascent-override: 102.3%; descent-override: 26.7%; line-gap-override: 0.0%; }

:root {
  /* renk (A · Atolye: acik sicak beyaz zemin, koyu krem bant, murekkep lacivert) */
  --kagit:          #fbfaf7;
  --yuzey:          #ffffff;
  --zemin-2:        #f3f1eb;  /* koyu krem: atolye bandi, gorsel yer tutucu */
  --zemin-kobalt:   #eef2fb;  /* ust serit */
  --zemin-turkuaz:  #e0f3f2;
  --kobalt:         #224cb8;  /* logonun kendi mavisi (rozet zemininden olculdu); TEK vurgu */
  --kobalt-koyu:    #1a3c94;
  --murekkep:       #17203a;
  --murekkep-2:     #5b6478;
  --turkuaz:        #0b7285;
  --turkuaz-parlak: #53cfc5;  /* yalniz sus/ilerleme; metin icin degil */
  --gunes:          #f5c13a;  /* yalniz indirim rozeti */
  --kenar:          #e8e5dd;
  --kenar-form:     #7b8599;
  --uyari:          #8f4700;
  --whatsapp:       #0d7a43;
  --whatsapp-koyu:  #0a6436;

  /* yazi */
  --baslik: "Fraunces", "Fraunces Yedek", "Fraunces Yedek Android", Georgia, "Times New Roman", serif;
  --govde:  "Manrope", "Manrope Yedek", "Manrope Yedek Android", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yazi-0: .75rem;
  --yazi-1: .875rem;
  --yazi-2: 1rem;
  --yazi-3: 1.125rem;
  --yazi-4: 1.375rem;
  --yazi-5: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);   /* bolum basligi: 30 -> 42 px */
  --yazi-6: clamp(2.5rem, 1.55rem + 3.7vw, 4.25rem);     /* giris basligi: 40 -> 68 px */

  /* yaricap */
  --yaricap-1:   4px;
  --yaricap-2:   8px;
  --yaricap-3:   18px;   /* kart, galeri (A: yumusak koseler) */
  --yaricap-4:   22px;   /* buyuk fotograf, bant */
  --yaricap-hap: 999px;

  /* bosluk */
  --bosluk-1: clamp(.45rem, .9vw, .7rem);
  --bosluk-2: clamp(.85rem, 1.8vw, 1.25rem);
  --bosluk-3: clamp(1.25rem, 2.5vw, 2rem);
  --bosluk-4: clamp(2rem, 5vw, 3.5rem);
  --bosluk-5: clamp(3rem, 7vw, 5rem);
  --kenar-payi: clamp(1rem, 3vw, 3rem);
  --dis-pay: var(--kenar-payi);
  --ic-pay:  clamp(.75rem, 1.6vw, 1.5rem);
  --dokunma: 44px;

  --golge:      0 10px 30px -18px rgba(27, 36, 54, .35);
  --gecis-yay:  cubic-bezier(.32, .72, 0, 1);
  --gecis-sure: .3s;
}

/* --- taban --- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--kagit);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: var(--yazi-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--baslik);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--murekkep);
  overflow-wrap: anywhere;
}
/* Vurgu kelimesi (A): italik, kobalt. Panel slaydinda *kelime* yazimi buna doner. */
h1 em, h2 em { font-style: italic; color: var(--kobalt); }
h1 { font-size: var(--yazi-6); }
h2 { font-size: var(--yazi-5); }
h3 { font-size: var(--yazi-4); line-height: 1.2; }
p { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--kobalt); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }

.kabuk { width: 100%; margin-inline: 0; }
.icerik { width: min(100% - 2 * var(--kenar-payi), 77.5rem); margin-inline: auto; }   /* A: .sar ile ayni kabuk */
.icerik-tam { width: 100%; margin-inline: 0; }
/* A: tam genislikli sayfalarda bolum icerigi tek kabukta (maketteki 1240 px).
   Kabugun ICINDEKI parcalar kendi kenar payini birakir -- payi kabuk verir. */
.sar { width: min(100% - 2 * var(--dis-pay), 77.5rem); margin-inline: auto; }
.sar .bolum-basi, .sar .cipler, .icerik-tam .sar .urun-izgara, .sar .karo-izgara { padding-inline: 0; }
.sar .guven { margin-inline: 0; }
.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cipler, .bolum-basi { padding-inline: var(--kenar-payi); }

.atla {
  position: absolute;
  left: var(--bosluk-2);
  top: var(--bosluk-2);
  transform: translateY(-250%);
  z-index: 80;
  padding: .6em 1.2em;
  border-radius: var(--yaricap-2);
  font-weight: 600;
  text-decoration: none;
  color: var(--yuzey);
  background-color: var(--kobalt);
  transition: transform var(--gecis-sure) var(--gecis-yay);
}
.atla:focus-visible { transform: translateY(0); }

.etiket {
  display: inline-block;
  font-size: var(--yazi-0);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kobalt);
}

/* --- dugmeler: birincil, ikincil (cizgili), WhatsApp, kucuk --- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--dokunma);
  padding: .8em 1.75em;
  border: 1px solid var(--kobalt);
  border-radius: var(--yaricap-hap);   /* A: hap dugme */
  font-family: var(--govde);
  font-size: var(--yazi-2);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--yuzey);
  background-color: var(--kobalt);
  transition: background-color var(--gecis-sure) var(--gecis-yay),
              border-color var(--gecis-sure) var(--gecis-yay),
              color var(--gecis-sure) var(--gecis-yay);
}
.dugme svg { width: 1.15em; height: 1.15em; flex: none; }
.dugme:active { background-color: var(--kobalt-koyu); border-color: var(--kobalt-koyu); }
.dugme:disabled, .dugme[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--murekkep-2);
  background-color: var(--zemin-2);
  border-color: var(--kenar);
}
.dugme-ikincil, .dugme-hatli { color: var(--kobalt); background-color: var(--yuzey); }
.dugme-ikincil:active, .dugme-hatli:active { color: var(--yuzey); }
.dugme-whatsapp { border-color: var(--whatsapp); background-color: var(--whatsapp); }
.dugme-whatsapp:active { border-color: var(--whatsapp-koyu); background-color: var(--whatsapp-koyu); }
.dugme-kucuk { padding: .45em 1em; font-size: var(--yazi-1); }
.dugme-tam { width: 100%; }
/* Ikincil eylem (A): alt cizgili metin baglantisi, hap degil. */
.yazi-bag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: var(--dokunma);
  font-weight: 600;
  color: var(--murekkep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .35em;
}
.yazi-bag svg { width: 1.1em; height: 1.1em; flex: none; }
@media (hover: hover) { .yazi-bag:hover { color: var(--kobalt); } }
@media (hover: hover) {
  .dugme:hover { background-color: var(--kobalt-koyu); border-color: var(--kobalt-koyu); }
  .dugme-ikincil:hover, .dugme-hatli:hover { color: var(--yuzey); background-color: var(--kobalt); border-color: var(--kobalt); }
  .dugme-whatsapp:hover { border-color: var(--whatsapp-koyu); background-color: var(--whatsapp-koyu); }
}

/* --- ust duyuru seridi (A: TEK acik mavi serit) ---
   Kargo esigi (kalin) + kartla odeme kapaliyken WhatsApp notu ayni satirda
   (duzen.php). Iki ayri renkli bant sayfanin en gurultulu ogesiydi. */
.ust-serit {
  margin: 0;
  padding: .2em var(--kenar-payi);
  font-size: var(--yazi-1);
  line-height: 1.45;
  text-align: center;
  color: var(--murekkep);
  background-color: var(--zemin-kobalt);
}
.ust-serit b { font-weight: 700; }
.ust-serit-ayrac { margin-inline: .45em; color: var(--murekkep-2); }
.ust-serit a {
  display: inline-block;
  margin-left: .35em;
  padding: .45em .2em;
  font-weight: 600;
  color: var(--murekkep);
  white-space: nowrap;
  text-underline-offset: .25em;
}

/* --- cipler --- */
.cipler {
  display: flex;
  gap: var(--bosluk-1);
  overflow-x: auto;
  padding: var(--bosluk-2) var(--kenar-payi);
  scrollbar-width: none;
}
.cipler::-webkit-scrollbar { display: none; }
.cip {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 1.1em;
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-hap);
  white-space: nowrap;
  font-size: var(--yazi-1);
  font-weight: 500;
  text-decoration: none;
  color: var(--murekkep);
  background-color: var(--yuzey);
}
@media (hover: hover) { .cip:hover { border-color: var(--kobalt); color: var(--kobalt); } }
.cip[aria-current="page"] { color: var(--yuzey); background-color: var(--murekkep); border-color: var(--murekkep); }

/* --- bolum basligi --- */
.bolum-basi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-2);
}
.bolum-basi h2 { font-size: var(--yazi-5); }
.bolum-basi a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--dokunma);
  font-size: var(--yazi-1);
  font-weight: 600;
  text-decoration: none;
}
.bolum-basi a::after { content: "→"; margin-left: .4em; }
@media (hover: hover) { .bolum-basi a:hover { text-decoration: underline; } }

/* --- urun izgarasi ve karti --- */
.urun-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3vw, 2.4rem) clamp(.875rem, 1.6vw, 1.4rem);
}
.urun-izgara > *, .karo-izgara > *, .banner-izgara > *, .guven > * { min-width: 0; }
.icerik-tam .urun-izgara { padding-inline: var(--dis-pay); }
@media (min-width: 48rem) { .urun-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .urun-izgara { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 86rem) { .urun-izgara { grid-template-columns: repeat(5, 1fr); } .sar .urun-izgara { grid-template-columns: repeat(4, 1fr); } }

.kart { display: flex; flex-direction: column; }
.kart-ust { position: relative; }
.kart-gorsel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--yaricap-3);
  background-color: var(--zemin-2);
}
.kart-foto, .urun-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--zemin-2);
}
.kart-foto { transition: transform .6s var(--gecis-yay); }
.urun-foto { border-radius: var(--yaricap-3); }
.gorsel-yer {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 1em;
  border-radius: var(--yaricap-3);
  text-align: center;
  font-size: var(--yazi-0);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  background-color: var(--zemin-kobalt);
  background-image:
    radial-gradient(circle at 50% 118%, var(--zemin-turkuaz) 0 34%, transparent 34.5%),
    radial-gradient(circle at 50% 118%, var(--yuzey) 0 46%, transparent 46.5%);
}
@media (hover: hover) {
  .kart-gorsel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gecis-sure) var(--gecis-yay);
  }
  .kart:hover .kart-gorsel::after,
  .kart:focus-within .kart-gorsel::after { background-image: var(--kart-ikinci); opacity: 1; }
  .kart:hover .kart-foto { transform: scale(1.03); }
}
.kart a:focus-visible { outline-offset: -2px; }
.kart-govde {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--bosluk-1) .15rem 0;
  flex: 1;
}
.kart-ad {
  font-family: var(--baslik);
  font-size: clamp(1.09rem, 1rem + .4vw, 1.31rem);
  line-height: 1.2;
  text-decoration: none;
  color: var(--murekkep);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (hover: hover) { .kart-ad:hover { text-decoration: underline; } }
.kart-kunye { font-size: var(--yazi-1); line-height: 1.45; color: var(--murekkep-2); }
.kart-kunye:empty { display: none; }
.kart-alt { margin-top: auto; padding-top: .25rem; }
.kart-fiyat { font-family: var(--govde); font-size: 1rem; font-weight: 600; color: var(--murekkep); }
.fiyat-eski {
  margin-right: .4em;
  font-size: .8em;
  font-weight: 500;
  color: var(--murekkep-2);
  text-decoration: line-through;
}
.kart-tukendi .kart-foto { opacity: .55; }

.kart-eylem { display: contents; }
.cip-dugme {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  min-width: var(--dokunma);
  min-height: var(--dokunma);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--yaricap-hap);
  background-color: var(--yuzey);
  color: var(--kobalt);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 10px -3px rgba(27, 36, 54, .4);
  transition: background-color var(--gecis-sure) var(--gecis-yay), color var(--gecis-sure) var(--gecis-yay);
}
.cip-dugme svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { .cip-dugme:hover { color: var(--yuzey); background-color: var(--kobalt); } }

.kart-rozetler {
  position: absolute;
  top: .6rem; left: .6rem; right: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  pointer-events: none;
}
.rozet {
  display: inline-block;
  padding: .25em .7em;
  border-radius: var(--yaricap-hap);
  font-size: var(--yazi-0);
  font-weight: 700;
  line-height: 1.4;
  color: var(--kobalt);
  background-color: var(--yuzey);
}
.rozet-indirim { color: var(--murekkep); background-color: var(--gunes); }
.rozet-son { color: var(--uyari); }
.rozet-tukendi { color: var(--murekkep-2); }
.urun-fiyat-buyuk .rozet { margin-left: .6em; vertical-align: middle; }

/* --- cikis yollari (404, bos sepet) --- */
.cikis-yollari { display: block; text-align: left; }
.cikis-grup { margin-bottom: var(--bosluk-3); }
.cikis-baslik {
  margin-bottom: var(--bosluk-1);
  font-size: var(--yazi-0);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.cikis-cipler { display: flex; flex-wrap: wrap; gap: var(--bosluk-1); }
@media (max-width: 47.99rem) {
  .cikis-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
  .cikis-cipler::-webkit-scrollbar { display: none; }
  .cikis-cipler > * { flex: none; }
}

/* --- guven seridi --- */
/* A: kutu degil, ust ve alt cizgisi olan sakin bir satir; simge kobalt, zeminsiz. */
.guven {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem clamp(1.25rem, 3vw, 1.75rem);
  margin: 0 var(--dis-pay) clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.35rem, 2.5vw, 1.65rem) 0;
  border-top: 1px solid var(--kenar);
  border-bottom: 1px solid var(--kenar);
}
.icerik:not(.icerik-tam) .guven { margin-inline: 0; }
@media (min-width: 48rem) { .guven { grid-template-columns: repeat(3, 1fr); } }
.guven > div { display: flex; gap: .85rem; align-items: flex-start; }
.guven-simge {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  margin-top: .1rem;
  color: var(--kobalt);
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.guven-ad { font-size: var(--yazi-2); font-weight: 600; line-height: 1.35; color: var(--murekkep); }
.guven-not { margin-top: .2em; font-size: var(--yazi-1); line-height: 1.5; color: var(--murekkep-2); }
.guven-not strong { color: var(--murekkep); }

/* --- yasal ve metin sayfalari --- */
.yasal-bolum { padding: var(--bosluk-3) 0 var(--bosluk-4); max-width: 44rem; }
.yasal-bolum h1 { font-size: var(--yazi-5); }
.yasal-surum { margin: .4em 0 var(--bosluk-3); font-size: var(--yazi-1); color: var(--murekkep-2); }
.yasal-bolum h2 { margin: var(--bosluk-4) 0 .5em; font-size: var(--yazi-4); }
.yasal-bolum h2:first-of-type { margin-top: var(--bosluk-3); }
.yasal-bolum p, .yasal-bolum li { font-size: var(--yazi-2); line-height: 1.7; }
.yasal-bolum p { margin-bottom: .8em; }
.yasal-bolum p:last-child { margin-bottom: 0; }
.yasal-bolum ul, .yasal-bolum ol { margin: 0 0 var(--bosluk-1); padding-left: 1.3em; }
.yasal-gezinme {
  display: flex;
  gap: var(--bosluk-1);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--kenar-payi));
  padding-inline: var(--kenar-payi);
  padding-block: var(--bosluk-2);
  border-bottom: 1px solid var(--kenar);
}
.yasal-gezinme::-webkit-scrollbar { display: none; }
.yasal-gezinme-oge {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 1em;
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-hap);
  font-size: var(--yazi-1);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--murekkep);
  background-color: var(--yuzey);
}
@media (hover: hover) { .yasal-gezinme-oge:hover { color: var(--turkuaz); border-color: var(--turkuaz); } }
.yasal-gezinme-aktif { color: var(--yuzey); background-color: var(--kobalt); border-color: var(--kobalt); font-weight: 600; }
.yasal-kutu { margin: var(--bosluk-2) 0; }
.yasal-kutu p { margin: 0 0 .5em; }
.yasal-kutu p:last-child { margin-bottom: 0; }
.yasal-hazirlaniyor { padding: var(--bosluk-4) 0; max-width: 38rem; margin-inline: auto; text-align: center; }
.yasal-hazirlaniyor h1 { font-size: var(--yazi-5); }
.yasal-hazirlaniyor p { color: var(--murekkep-2); }
.yasal-eksik-kutu { margin: var(--bosluk-3) auto 0; max-width: 26rem; text-align: left; }
.yasal-eksik-kutu h2 { margin: 0 0 var(--bosluk-1); font-family: var(--govde); font-size: var(--yazi-1); font-weight: 700; color: var(--murekkep); }
.yasal-eksik-kutu ul { margin: 0; padding-left: 1.2em; font-size: var(--yazi-1); }
.yasal-dil-notu {
  margin-bottom: var(--bosluk-3);
  padding: var(--bosluk-2);
  border-radius: var(--yaricap-2);
  background-color: var(--zemin-kobalt);
}
.kunye-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem var(--bosluk-2);
  margin: 0 0 var(--bosluk-3);
}
.kunye-liste dt { font-size: var(--yazi-1); color: var(--murekkep-2); }
.kunye-liste dd { margin: 0 0 .6rem; line-height: 1.6; overflow-wrap: anywhere; }
@media (min-width: 34rem) {
  .kunye-liste { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
  .kunye-liste dd { margin-bottom: .35rem; }
}
.hakkimizda p { margin-bottom: .85em; }
.hakkimizda p:last-child { margin-bottom: 0; }
.hakkimizda-giris { margin-top: .6em; font-size: var(--yazi-3); color: var(--murekkep-2); }

/* --- yapisik alt cubuk (urun, mobil) --- */
.yapisik {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-2);
  margin-inline: calc(-1 * var(--kenar-payi));
  padding: .75rem var(--kenar-payi);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--kenar);
  background-color: var(--yuzey);
}
.yapisik .dugme { flex: 1; }

/* --- cerceveli kutu (ozet, toplam, galeri) --- */
.kabuk-dis {
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-3);
  background-color: var(--yuzey);
  overflow: hidden;
}
.kabuk-ic { background-color: var(--yuzey); }

/* --- urun fotograf seridi --- */
.urun-serit {
  display: flex;
  gap: var(--bosluk-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.urun-serit li {
  flex: 0 0 88%;
  min-width: 0;
  scroll-snap-align: start;
}
.urun-serit-tek li { flex-basis: 100%; }
.urun-serit:focus-visible { outline-offset: -2px; }
.serit-kutu { position: relative; }
.serit-sayac {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .25em .8em;
  border-radius: var(--yaricap-hap);
  font-size: var(--yazi-0);
  font-weight: 600;
  color: var(--murekkep);
  background-color: var(--yuzey);
  box-shadow: 0 2px 10px -3px rgba(27, 36, 54, .4);
}
.kunye {
  border: 1px solid var(--kenar);
  border-radius: var(--yaricap-3);
  padding: var(--bosluk-2);
  background-color: var(--yuzey);
}
.kunye dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem var(--bosluk-2);
  margin: var(--bosluk-1) 0 0;
  font-size: var(--yazi-1);
}
.kunye dt { color: var(--murekkep-2); }
.kunye dd { margin: 0; }
.kunye-degil {
  margin-top: var(--bosluk-2);
  padding-top: var(--bosluk-1);
  border-top: 1px solid var(--kenar);
  font-size: var(--yazi-1);
  color: var(--murekkep-2);
}

/* --- ust menu --- */
/* A · Atolye: UC SUTUN -- menu solda, logo ORTADA, dil + Sepet sagda (mobilde
   menu dugmesi | logo | sepet). Ayni izgara her genislikte; yalniz icerik degisir. */
.marka-serit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 84px;
  padding: .5rem max(var(--kenar-payi), (100% - 77.5rem) / 2);   /* .sar ile ayni hiza */
  border-bottom: 1px solid var(--kenar);
  background-color: var(--kagit);
}
.marka-ad {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  font-family: var(--baslik);
  font-size: var(--yazi-4);
  text-decoration: none;
  color: var(--kobalt);
}
.marka-logo { height: 50px; width: auto; display: block; }
.marka-yazi { white-space: nowrap; }
.ust-sol { grid-row: 1; grid-column: 1; justify-self: start; display: flex; align-items: center; min-width: 0; }
.ust-sag { grid-row: 1; grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .9rem; }
.ana-nav { display: flex; align-items: center; }
.masa-menu { display: none; }

.ust-ara {
  display: grid;
  place-items: center;
  width: var(--dokunma);
  height: var(--dokunma);
  border-radius: var(--yaricap-hap);
  color: var(--murekkep);
}
.ust-ara svg { width: 1.15rem; height: 1.15rem; }
@media (hover: hover) { .ust-ara:hover { color: var(--kobalt); } }

.sepet-bag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--dokunma);
  padding: 0 1.1em;
  border: 1px solid var(--murekkep);
  border-radius: var(--yaricap-hap);
  font-size: var(--yazi-1);
  font-weight: 600;
  text-decoration: none;
  color: var(--murekkep);
  background-color: transparent;
}
@media (hover: hover) { .sepet-bag:hover { color: var(--kobalt); border-color: var(--kobalt); } }
.sepet-bag svg { width: 1.1em; height: 1.1em; }
.sepet-sayi {
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .3em;
  display: inline-grid;
  place-items: center;
  border-radius: var(--yaricap-hap);
  font-size: var(--yazi-0);
  font-weight: 700;
  line-height: 1;
  color: var(--yuzey);
  background-color: var(--kobalt);
}

.dil-secici {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  font-size: var(--yazi-1);
  font-weight: 600;
  letter-spacing: .04em;
}
.dil-secenek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: var(--dokunma);
  padding: 0 .3em;
  color: var(--murekkep-2);
  text-decoration: none;
}
.dil-secenek[aria-current="true"] { color: var(--murekkep); font-weight: 700; }
@media (hover: hover) { .dil-secenek:hover { color: var(--kobalt); } }
.dil-ayrac { color: var(--murekkep-2); font-weight: 400; }
.dil-secici-cekmece { gap: var(--bosluk-2); font-size: var(--yazi-2); }

.mobil-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dokunma);
  min-height: var(--dokunma);
  border-radius: var(--yaricap-hap);
  color: var(--kobalt);
}
.mobil-menu > summary::-webkit-details-marker { display: none; }
.mobil-menu > summary svg { width: 1.4rem; height: 1.4rem; fill: none; }
.mobil-menu > summary .ikon-kapat { display: none; }
.mobil-menu[open] > summary .ikon-ac { display: none; }
.mobil-menu[open] > summary .ikon-kapat { display: inline-block; }
.mobil-menu[open] > summary {
  position: fixed;
  top: var(--bosluk-2);
  right: var(--bosluk-2);
  z-index: 41;
  background-color: var(--yuzey);
  border: 1px solid var(--kenar);
}
.mobil-cekmece {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: auto;
  padding: calc(var(--dokunma) + var(--bosluk-3)) var(--bosluk-3) var(--bosluk-3);
  background-color: var(--kagit);
  display: grid;
  gap: .25rem;
  align-content: start;
}
.mobil-cekmece > * { min-width: 0; }
.mobil-cekmece a, .mobil-cekmece summary {
  display: flex;
  align-items: center;
  min-height: 3rem;
  font-size: var(--yazi-3);
  color: var(--murekkep);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid var(--kenar);
}
.mobil-cekmece details a { padding-left: var(--bosluk-2); }
.mobil-cekmece summary::after { content: "⌄"; margin-left: auto; color: var(--murekkep-2); }
.mobil-cekmece details[open] > summary::after { content: "⌃"; }
.mobil-cekmece .dil-secenek { border-bottom: 0; padding: 0 .8em; border: 1px solid var(--kenar); border-radius: var(--yaricap-hap); font-size: var(--yazi-1); min-height: var(--dokunma); }
.mobil-cekmece .dil-secenek[aria-current="true"] { color: var(--yuzey); background-color: var(--kobalt); border-color: var(--kobalt); text-decoration: none; }
.cekmece-arama { display: flex; gap: var(--bosluk-1); margin-bottom: var(--bosluk-2); }
.cekmece-arama-alan, .arama-alan {
  flex: 1;
  min-width: 0;
  min-height: var(--dokunma);
  padding: 0 1em;
  border: 1px solid var(--kenar-form);
  border-radius: var(--yaricap-2);
  background-color: var(--yuzey);
  color: var(--murekkep);
  font: inherit;
}
.cekmece-arama .dugme { flex: none; }
.cekmece-baslik {
  margin-top: var(--bosluk-2);
  font-size: var(--yazi-0);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}

@media (max-width: 74.99rem) {   /* A: masaustu menu 1200 px ustunde (logo ortada, sol sutun dar) */
  .marka-serit { min-height: 64px; }
  .marka-logo { height: 40px; }
  .marka-serit .ust-sag { gap: 0; }
  .ust-ara, .marka-serit .dil-secici { display: none; }
  .sepet-bag { justify-content: center; width: var(--dokunma); padding: 0; border: 0; background: transparent; }
  .sepet-bag svg { width: 1.3rem; height: 1.3rem; }
  .sepet-sayi { position: absolute; top: .1rem; right: -.1rem; }
  .sepet-yazi {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 22.49rem) {
  .marka-logo { height: 32px; }
}
@media (min-width: 75rem) {
  .mobil-menu { display: none; }
  .masa-menu { display: flex; gap: clamp(.9rem, 1.8vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
  .masa-menu > li { position: relative; }
  .masa-menu > li > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--dokunma);
    font-size: var(--yazi-1);
    font-weight: 500;
    color: var(--murekkep);
    text-decoration: none;
    white-space: nowrap;
  }
  .masa-menu > li > a:hover, .masa-menu > li:focus-within > a { color: var(--kobalt); }
  .mega {
    display: none;
    position: absolute;
    left: -1rem;
    top: 100%;
    z-index: 40;
    min-width: 26rem;
    padding: var(--bosluk-2) var(--bosluk-3);
    grid-template-columns: 1fr 1fr;
    gap: var(--bosluk-2);
    background-color: var(--yuzey);
    border: 1px solid var(--kenar);
    border-radius: var(--yaricap-3);
    box-shadow: var(--golge);
  }
  .masa-menu > li:hover .mega, .masa-menu > li:focus-within .mega { display: grid; }
  .mega-altlar { list-style: none; margin: 0; padding: 0; }
  .mega a {
    display: flex;
    align-items: center;
    min-height: var(--dokunma);
    font-size: var(--yazi-1);
    color: var(--murekkep);
    text-decoration: none;
  }
  .mega a:hover { color: var(--turkuaz); }
  .mega-olus { border-left: 1px solid var(--kenar); padding-left: var(--bosluk-2); }
  .mega-olus .cekmece-baslik { margin-top: .4rem; }
  .masa-menu > li:nth-child(n+5):nth-last-child(-n+3) .mega { left: auto; right: 0; }
  .mega-koleksiyonlar { min-width: 15rem; grid-template-columns: 1fr; }
  .mega-koleksiyonlar .mega-olus { border-left: 0; padding-left: 0; }
}

/* --- alt bilgi --- */
/* A: sayfa zemininde, ust cizgiyle ayrilan sakin altbilgi; genis ekranda rozet ve
   slogan ilk sutunda, baglanti sutunlari yaninda (maketteki 1240 px kabuk). */
footer {
  margin-top: var(--bosluk-5);
  padding: clamp(2.4rem, 5vw, 3.4rem) max(var(--kenar-payi), (100% - 77.5rem) / 2) var(--bosluk-3);
  border-top: 1px solid var(--kenar);
  background-color: var(--kagit);
}
.dip-marka { align-self: start; margin-bottom: var(--bosluk-3); max-width: 24rem; }
.dip-logo { height: 30px; width: auto; display: block; margin-bottom: .6rem; }
.dip-rozet { height: 104px; width: 104px; display: block; margin-bottom: .9rem; }
.dip-slogan { font-size: var(--yazi-1); line-height: 1.6; color: var(--murekkep-2); }
.dip-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-3) var(--bosluk-2);
  margin-bottom: var(--bosluk-3);
}
@media (min-width: 34rem) { .dip-izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) {
  footer { display: grid; grid-template-columns: 1.1fr 3fr; column-gap: clamp(1.5rem, 3vw, 2.25rem); }
  footer > :not(.dip-marka):not(.dip-izgara) { grid-column: 1 / -1; }
  .dip-izgara { grid-template-columns: repeat(4, 1fr); }
}
.dip-sutun { display: flex; flex-direction: column; align-items: flex-start; }
.dip-baslik {
  margin: 0 0 .35rem;
  font-size: var(--yazi-0);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--murekkep);
}
.dip-marka .dip-baslik { font-family: var(--baslik); font-size: var(--yazi-4); font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Dokunma hedefi (5 Ekim 2026, mobil denetim): altbilgi baglantilari 31 px idi;
   .dip-baglantilar ile ayni --dokunma (44 px) asgarisi. */
.dip-sutun a {
  display: flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0;
  font-size: var(--yazi-1);
  line-height: 1.5;
  color: var(--murekkep);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.dip-sutun a:hover, .dip-baglantilar a:hover { color: var(--kobalt); text-decoration: underline; }
.dip-odeme { padding: var(--bosluk-2) 0 0; border-top: 1px solid var(--kenar); }
.dip-odeme-bant { display: block; width: 429px; max-width: 100%; height: auto; }
.dip-baglantilar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--bosluk-2);
  margin-top: var(--bosluk-2);
  padding-top: var(--bosluk-2);
  border-top: 1px solid var(--kenar);
  font-size: var(--yazi-1);
}
.dip-baglantilar a { display: inline-flex; align-items: center; min-height: var(--dokunma); color: var(--murekkep-2); text-decoration: none; }
@media (max-width: 47.99rem) { .dip-baglantilar { flex-direction: column; } }
.dip-satici { margin-top: var(--bosluk-2); font-size: var(--yazi-1); color: var(--murekkep-2); }
.dip-satici a { color: var(--murekkep-2); }

/* --- onizleme bandi (yalniz panel yoneticisi gorur) --- */
.onizleme-bandi {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  padding: .5em 1em;
  text-align: center;
  font-size: var(--yazi-0);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--yuzey);
  background-color: var(--uyari);
}
body.onizleme-aktif { padding-top: 2.4rem; }

/* --- slayt: kategori/koleksiyon BANDI (fotograf ustunde yazi kutusu) --- */
.slayt { position: relative; }
.slayt-bant { --slayt-oran-mobil: 3 / 2; --slayt-oran-masaustu: 32 / 9; --slayt-oran-genis: 40 / 9; }
.slayt-serit {
  display: flex;
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slayt-serit::-webkit-scrollbar { display: none; }
.slayt-serit:focus-visible { outline-offset: -2px; }
.slayt-tek {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.slayt-bant .slayt-tek { display: grid; background-color: var(--zemin-kobalt); }
.slayt-bant .slayt-tek > * { grid-area: 1 / 1; }
.slayt-foto {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--slayt-oran-mobil);
  object-fit: cover;
}
.slayt-yazi {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: stretch;
  margin: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--yaricap-3);
  text-align: left;
  background-color: var(--yuzey);
  box-shadow: var(--golge);
}
/* fotografsiz bant: kutu yerine zemin ustunde yazi */
.slayt-bant .slayt-tek:not(:has(.slayt-foto)) .slayt-yazi {
  align-self: center;
  justify-self: center;
  width: min(44rem, 100% - 2 * var(--kenar-payi));
  margin: 0;
  padding: var(--bosluk-4) 0;
  text-align: center;
  background-color: transparent;
  box-shadow: none;
}
.slayt-etiket {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--yazi-0);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kobalt);
}
.slayt-baslik { margin: 0 0 var(--bosluk-1); font-size: var(--yazi-5); }
.slayt-alt { margin: 0 0 var(--bosluk-2); color: var(--murekkep-2); }
@media (min-width: 48rem) {
  .slayt-foto { aspect-ratio: var(--slayt-oran-masaustu); }
  .slayt-yazi {
    align-self: center;
    justify-self: start;
    width: min(30rem, 46%);
    margin: var(--bosluk-3) var(--dis-pay);
    padding: var(--bosluk-3);
  }
}
@media (min-width: 86rem) { .slayt-foto { aspect-ratio: var(--slayt-oran-genis); } }
.slayt-noktalar { display: flex; justify-content: center; padding-top: .25rem; }
.slayt-noktalar a { width: var(--dokunma); height: var(--dokunma); display: grid; place-items: center; }
.slayt-noktalar a::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--kenar-form);
}
.slayt-noktalar a:hover::before,
.slayt-noktalar a:focus-visible::before,
.slayt-noktalar a[aria-current]::before { background-color: var(--kobalt); }

/* --- A · ATOLYE GIRISI (ana sayfa kahramani, 5 Ekim 2026) ---
   Metin solda, KEMERLI fotograf sagda (ust kose yaricapi genisligin yarisi: yarim
   daire). Kemerin sol alt kosesinde atolye tezgahi, sag ustunde egik rozet muhur.
   Telefonda once metin, sonra kemer (dar, ortada). */
.slayt-kahraman .slayt-tek {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.1rem, 5vw, 4rem) max(var(--dis-pay), (100% - 77.5rem) / 2) clamp(2.5rem, 5vw, 3.75rem);
}
.giris-yazi { min-width: 0; }
.giris-baslik { margin: 1rem 0 1.35rem; font-size: var(--yazi-6); line-height: 1.06; text-wrap: balance; }
.giris-alt { max-width: 30em; margin: 0 0 1.9rem; font-size: clamp(1.03rem, .95rem + .35vw, 1.16rem); color: var(--murekkep-2); }
.giris-dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.kemer { position: relative; justify-self: center; width: min(100%, 20rem); }
.kemer-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* 4:5 kutuda yarim daire: yatayda genisligin %50'si, dikeyde yuksekligin %40'i */
  border-radius: var(--yaricap-4);
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
  background-color: var(--zemin-2);
}
.kemer-kucuk {
  position: absolute;
  left: -.75rem;
  bottom: 1.4rem;
  width: 7.5rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid var(--kagit);
  border-radius: var(--yaricap-4);
}
.kemer-muhur {
  position: absolute;
  right: -.6rem;
  top: 1.9rem;
  width: 5.5rem;
  height: 5.5rem;
  transform: rotate(10deg);
}
@media (min-width: 48rem) {
  .slayt-kahraman .slayt-tek { grid-template-columns: 1.02fr .98fr; }
  .kemer { justify-self: end; width: min(100%, 31.25rem); }
  .kemer-kucuk { left: -3.6rem; bottom: 2.4rem; width: 11.9rem; border-width: 8px; }
  .kemer-muhur { right: -1.6rem; top: 3.4rem; width: 8rem; height: 8rem; }
}

/* --- "tam satir" izgarasi: yarim kalan son satir bir dugmenin arkasinda --- */
.tam-satir-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(100% - 2 * var(--kenar-payi), 20rem);
  min-height: var(--dokunma);
  margin: var(--bosluk-3) auto 0;
  padding: 0 var(--bosluk-3);
  border: 1px solid var(--kobalt);
  border-radius: var(--yaricap-2);
  font-family: var(--govde);
  font-size: var(--yazi-2);
  font-weight: 600;
  color: var(--kobalt);
  background-color: var(--yuzey);
  cursor: pointer;
  transition: background-color var(--gecis-sure) var(--gecis-yay), color var(--gecis-sure) var(--gecis-yay);
}
.tam-satir-dugme::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.tam-satir-dugme[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
@media (hover: hover) { .tam-satir-dugme:hover { color: var(--yuzey); background-color: var(--kobalt); } }
@keyframes tam-satir-belir { from { opacity: 0; transform: translateY(.75rem); } }
.ts-yeni { animation: tam-satir-belir .4s var(--gecis-yay) both; }
@supports selector(:has(*)) {
@media (max-width: 47.99rem) {
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir:has(> .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2),
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
  html.js .tam-satir:has(> .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 62rem) and (max-width: 85.99rem) {
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3),
  html.js .tam-satir:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
  html.js .tam-satir:has(> .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 86rem) {
  html.js :not(.sar) > .tam-satir:not(.acik) > .urun-izgara > :nth-child(5n+6):nth-last-child(-n+4),
  html.js :not(.sar) > .tam-satir:not(.acik) > .urun-izgara > :nth-child(5n+6):nth-last-child(-n+4) ~ * { display: none; }
  html.js :not(.sar) > .tam-satir:has(> .urun-izgara > :nth-child(5n+6):nth-last-child(-n+4)) > .tam-satir-dugme { display: flex; }
  /* A: .sar kabugundaki izgara genis ekranda da 4 sutun (bkz. .sar .urun-izgara). */
  html.js .sar > .tam-satir:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3),
  html.js .sar > .tam-satir:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
  html.js .sar > .tam-satir:has(> .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3)) > .tam-satir-dugme { display: flex; }
}
@media (max-width: 47.99rem) {
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(n+5),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(n+5)) > .tam-satir-dugme,
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(n+4),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(n+4)) > .tam-satir-dugme,
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 62rem) {
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(n+5),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3),
  html.js .tam-satir-tur:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(n+5)) > .tam-satir-dugme,
  html.js .tam-satir-tur:has(> .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3)) > .tam-satir-dugme { display: flex; }
}
@media (max-width: 47.99rem) {
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(n+5),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1) ~ * { display: none; }
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(n+5)) > .tam-satir-dugme,
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(2n+3):nth-last-child(-n+1)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(n+7),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(n+7)) > .tam-satir-dugme,
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(3n+4):nth-last-child(-n+2)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 62rem) and (max-width: 85.99rem) {
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(n+9),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(n+9)) > .tam-satir-dugme,
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(4n+5):nth-last-child(-n+3)) > .tam-satir-dugme { display: flex; }
}
@media (min-width: 86rem) {
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(n+11),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(5n+6):nth-last-child(-n+4),
  html.js .tam-satir-benzer:not(.acik) > .urun-izgara > :nth-child(5n+6):nth-last-child(-n+4) ~ * { display: none; }
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(n+11)) > .tam-satir-dugme,
  html.js .tam-satir-benzer:has(> .urun-izgara > :nth-child(5n+6):nth-last-child(-n+4)) > .tam-satir-dugme { display: flex; }
}
}
@media (max-width: 47.99rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(2))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 1 * var(--ic-pay)) / 2));
    justify-content: center;
  }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--ic-pay)) / 3));
    justify-content: center;
  }
}
@media (min-width: 62rem) and (max-width: 85.99rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 3 * var(--ic-pay)) / 4));
    justify-content: center;
  }
}
@media (min-width: 86rem) {
  .tam-satir-orta > .urun-izgara:not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 4 * var(--ic-pay)) / 5));
    justify-content: center;
  }
}

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

/* CEREZ BANDI (5 Ekim 2026; yalniz olcum kimligi girilmisken basilir).
   UC DUGME ESIT AGIRLIK: KVKK Cerez Rehberi "kabul et, reddet, tercihler esit
   derecede (renk, buyukluk, punto)" -- tek sinif, tek stil. Dokunma hedefi
   --dokunma (44px). Urun sayfasinin alta yapisik cubugunun USTUNDE durur. */
.cerez-bandi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--bosluk-2) var(--dis-pay);
  background: var(--yuzey); color: var(--murekkep);
  border-top: 1px solid var(--kenar);
  box-shadow: 0 -8px 24px rgb(27 36 54 / .08);
}
.cerez-bandi[hidden], .cerez-bandi-tercih[hidden], .cerez-dugme[hidden] { display: none; }
.cerez-bandi-ic { max-width: 72rem; margin: 0 auto; display: grid; gap: var(--bosluk-2); }
.cerez-bandi-metin { margin: 0; font-size: var(--yazi-2); line-height: 1.5; }
.cerez-bandi-metin a { color: var(--kobalt); text-decoration: underline; }
.cerez-bandi-tercih { display: grid; gap: 4px; }
.cerez-secim { display: flex; align-items: center; gap: 10px; min-height: var(--dokunma); font-size: var(--yazi-2); }
.cerez-secim input { width: 20px; height: 20px; accent-color: var(--kobalt); }
.cerez-bandi-dugmeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cerez-dugme {
  min-height: var(--dokunma); padding: 10px 16px;
  font: inherit; font-size: var(--yazi-2); font-weight: 600;
  color: var(--murekkep); background: var(--yuzey);
  border: 2px solid var(--murekkep); border-radius: var(--yaricap-2);
  cursor: pointer;
}
.cerez-dugme[data-cerez="kaydet"] { grid-column: 1 / -1; }
.cerez-dugme:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; }
@media (min-width: 48rem) {
  .cerez-bandi-ic { grid-template-columns: 1fr auto; align-items: center; }
  .cerez-bandi-tercih { grid-column: 1 / -1; grid-row: 2; }
  .cerez-bandi-dugmeler { grid-template-columns: repeat(3, minmax(8.5rem, auto)); }
}