/* Grossengross — "vitrin" tasarımı (2026-09-28).
   Şişe yeşili zemin, kehribar yalnızca eylem düğmelerinde, tek gösterişli öğe:
   girişteki vitrin camı (parlak üst kenar + bir kez geçen yansıma). */
:root {
  --sise: #2b2723;
  --sise-derin: #23201d;
  --buz: #f1e9de;
  --beyaz: #ffffff;
  --kehribar: #b85a35;        /* 2026-10-02: eski #c2653f beyaz yazıyla 4,0:1 idi (WCAG AA için 4,5:1 şart) */
  --kehribar-koyu: #9c4d2c;
  --vurgu-yazi: #ffffff;   /* vurgu düğmesinin üstündeki yazı */
  --murekkep: #2a2521;
  --soluk: #6f6357;
  --cizgi: #ddd0bd;
  --baslik: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --govde: "Instrument Sans", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--buz);
  color: var(--murekkep);
  font: 400 1.0625rem/1.6 var(--govde);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 700; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--kehribar); outline-offset: 3px; border-radius: 4px; }

/* 2026-10-02, kullanıcı isteği: "sayfanın sağı solu çok boş ... zoom in/out yapsam da boşluk kalmasın" */
.kap { width: min(2200px, 100% - clamp(32px, 4vw, 96px)); margin-inline: auto; }  /* 2026-10-02: "yan boşluk hala fazla" */

/* ---------- düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1 var(--govde); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.dugme-ana { background: var(--kehribar); color: var(--vurgu-yazi); }
.dugme-ana:hover { background: var(--kehribar-koyu); }
.dugme-cizgi { border-color: rgba(255,255,255,.45); color: var(--beyaz); }
.dugme-cizgi:hover { border-color: var(--beyaz); }
.dugme-koyu { border-color: var(--sise); color: var(--sise); }
.dugme-koyu:hover { background: var(--sise); color: var(--beyaz); }
.dugme-kucuk { min-height: 40px; padding: 0 18px; font-size: .95rem; }
.dugme-tam { width: 100%; }
.dugme:disabled { opacity: .6; cursor: default; }

/* ---------- üst şerit ---------- */
.ust {
  position: sticky; top: 0; z-index: 20;
  background: var(--sise-derin); color: var(--beyaz);
}
.ust-ic { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.marka {
  font: 700 1.35rem/1 var(--baslik); letter-spacing: -0.03em;
  text-decoration: none; margin-right: auto;
}
.menu { display: flex; gap: 26px; }
.menu a { text-decoration: none; font-weight: 500; opacity: .85; }
.menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.menu-ac { display: none; }

/* ---------- giriş + vitrin ---------- */
.giris { background: var(--sise); color: var(--beyaz); overflow: hidden; }
.giris-ic {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
  padding-block: 72px 0;
}
.giris-metin { padding-bottom: 72px; }
.giris h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 13ch;
}
.giris-alt { margin-top: 24px; max-width: 46ch; font-size: 1.15rem; color: rgba(255,255,255,.82); }
.giris-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.vitrin {
  position: relative; margin: 0; align-self: end;
  border-radius: 14px 14px 0 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.vitrin img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; }
/* cam: parlak üst kenar + sol kenarda ince ışık */
.vitrin::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 3px),
    linear-gradient(90deg, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 14px);
}
/* sayfa açılışında cam üzerinden bir kez geçen yansıma */
.vitrin-yansima {
  position: absolute; inset: -20% auto -20% -60%; width: 38%; z-index: 1;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-14deg);
  animation: yansima 1.8s .5s cubic-bezier(.3,.6,.3,1) both;
}
@keyframes yansima { from { left: -60%; } to { left: 130%; } }

/* ---------- bölümler ---------- */
.bolum { padding-block: 96px; }
.bolum-bas { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.bolum-bas h1, .bolum-bas h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
.bolum-bas p { max-width: 44ch; color: var(--soluk); }

.urunler {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px;
}
.urunler img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--beyaz); border-radius: 10px;
}
.urunler h3 { margin-top: 14px; font-size: 1.1rem; }
.urunler h3 a { text-decoration: none; }
.urunler h3 a::after { content: ""; position: absolute; inset: 0; }  /* kart tamamen tıklanır */
.urun-bagli { position: relative; }
.urun-bagli:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
.urun-bagli:hover img { opacity: .9; }

/* Tüm ürün grupları — katalog içindekiler sayfası gibi, kart yok, sadece yazı */
.dizin {
  margin-top: 72px; padding-top: 40px; border-top: 2px solid var(--murekkep);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px;
}
.dizin h3 { font-size: 1.05rem; margin-bottom: 14px; }
.dizin ul { list-style: none; margin: 0; padding: 0; }
.dizin li {
  padding: 7px 0; font-size: .95rem; color: var(--soluk);
  border-bottom: 1px solid var(--cizgi);
}
.dizin li:first-child { border-top: 1px solid var(--cizgi); }
.dizin section > p { margin-top: 14px; font-size: .9rem; color: var(--soluk); }

.bolum-surec { padding-top: 0; }
.adimlar {
  list-style: none; margin: 0; padding: 0; counter-reset: adim;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 2px solid var(--murekkep);
}
.adimlar li { counter-increment: adim; padding-top: 24px; }
.adimlar li::before {
  content: counter(adim); display: block; margin-bottom: 12px;
  font: 700 3rem/1 var(--baslik); color: var(--sise);
}
.adimlar h3 { font-size: 1.25rem; }
.adimlar p { margin-top: 8px; color: var(--soluk); max-width: 34ch; }

.guvence { background: var(--sise-derin); color: rgba(255,255,255,.8); padding-block: 48px; }
.guvence-ic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.guvence strong { display: block; margin-bottom: 4px; color: var(--beyaz); font: 700 1.15rem/1.3 var(--baslik); }

/* ---------- iletişim ---------- */
.iletisim { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.iletisim-bilgi h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
.iletisim-bilgi > p { margin-top: 16px; color: var(--soluk); max-width: 40ch; }
.kanallar { margin: 32px 0; }
.kanallar div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.kanallar div:last-child { border-bottom: 1px solid var(--cizgi); }
.kanallar dt { color: var(--soluk); }
.kanallar dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kanallar a { text-decoration: none; }
.kanallar a:hover { text-decoration: underline; }

.form { background: var(--beyaz); border-radius: 14px; padding: 32px; display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.istege-bagli { font-weight: 400; color: var(--soluk); }
.form input, .form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--cizgi); border-radius: 8px;
  font: 400 1rem/1.4 var(--govde); color: var(--murekkep); background: var(--beyaz);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--sise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sise) 18%, transparent); }
.form textarea { resize: vertical; }
.form-not { font-size: .9rem; color: var(--soluk); }
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alt { background: var(--sise-derin); color: rgba(255,255,255,.65); font-size: .9rem; padding-block: 24px; }
.alt-ic { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- uyarlama ---------- */
@media (max-width: 960px) {
  .urunler { grid-template-columns: repeat(2, 1fr); }
  .dizin { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; margin-top: 56px; }
  .giris-ic { grid-template-columns: 1fr; gap: 0; padding-top: 48px; }
  .giris-metin { padding-bottom: 40px; }
  /* 2026-10-03: eski giriş görselinden kalan .vitrin{max-width:520px} kuralı kaldırıldı — artık .vitrin ürün şeridi bölümü ve
     Z Fold açıkken (≈750 px) ekranın üçte ikisinde kalıyordu */
  .vitrin img { aspect-ratio: 5 / 4; object-position: 50% 38%; }
  .iletisim { grid-template-columns: 1fr; gap: 40px; }
  .guvence-ic { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .menu-ac {
    display: grid; gap: 6px; place-content: center; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
  }
  .menu-ac span { display: block; width: 22px; height: 2px; background: var(--beyaz); transition: transform .2s; }
  .ust.nav-open .menu-ac span:first-child { transform: translateY(4px) rotate(45deg); }
  .ust.nav-open .menu-ac span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .ust-ic { gap: 12px; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--sise-derin); padding: 8px 16px 16px;
  }
  .menu a { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
  .ust.nav-open .menu { display: flex; }
  .bolum { padding-block: 64px; }
  .bolum-surec { padding-top: 0; }
  .adimlar { grid-template-columns: 1fr; gap: 0; }
  .adimlar li { padding-block: 20px; border-bottom: 1px solid var(--cizgi); }
  .adimlar li::before { font-size: 2.2rem; }
  .form { padding: 22px; }
}
@media (max-width: 420px) {
  .urunler { gap: 28px 14px; }
  /* telefonda tek sütun çok uzuyordu — iki sütun, biraz daha küçük yazı */
  .dizin { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .dizin li { font-size: .88rem; padding: 6px 0; }
  .dizin section:last-child { grid-column: 1 / -1; }
  .urunler h3 { font-size: 1.05rem; }
  .giris-dugmeler .dugme { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vitrin-yansima { animation: none; display: none; }
}


/* ---------- kategori sayfaları (scripts/website_katalog.py üretir) ---------- */
.iz { font-size: .9rem; color: var(--soluk); margin-bottom: 20px; }
.iz a { color: inherit; }
.katalog {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px 24px;
}
.katalog-urun { display: flex; flex-direction: column; }
.katalog-urun img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--beyaz); border-radius: 10px; padding: 10px;
}
.katalog-urun h3 {
  margin: 14px 0 12px; font-size: .95rem; font-weight: 500; line-height: 1.35;
  font-family: var(--govde);
}
.katalog-satinal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.katalog-al {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border: 1.5px solid var(--sise); border-radius: 999px;
  font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--sise);
}
.katalog-al:hover { background: var(--sise); color: var(--beyaz); }
.katalog-not { margin-top: 48px; font-size: .95rem; color: var(--soluk); max-width: 60ch; }

/* dizindeki kategoriler artık tıklanabilir */
.dizin li a { display: block; text-decoration: none; color: inherit; }
.dizin li a { display: flex; justify-content: space-between; gap: 10px; }
.dizin li a:hover { color: var(--sise); text-decoration: underline; text-underline-offset: 3px; }
.dizin-adet { color: #6f6350;   /* 2026-10-02: eski --cizgi rengi 1,3:1 idi, okunmuyordu */
   font-variant-numeric: tabular-nums; }
.dizin li a:hover .dizin-adet { color: var(--soluk); }
.dizin li.yok { color: var(--soluk); }

/* ---------- nasıl alınır: bireysel / toptan ---------- */
.yollar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.yol { background: var(--beyaz); border-radius: 14px; padding: 32px; }
.yol h3 { font-size: 1.35rem; }
.yol > p { margin-top: 12px; color: var(--soluk); max-width: 40ch; }
.magazalar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.yol-adimlar { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: y; }
.yol-adimlar li {
  counter-increment: y; display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--cizgi); font-size: .95rem;
}
.yol-adimlar li::before { content: counter(y); font-weight: 700; color: var(--sise); font-family: var(--baslik); }

@media (max-width: 960px) {
  .katalog { grid-template-columns: repeat(3, 1fr); }
  .yollar { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .katalog { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  /* dar ekranda iki düğme yan yana sığmıyor — tam genişlik, düzgün dursun */
  .katalog-satinal { flex-direction: column; gap: 6px; }
  .katalog-al { justify-content: center; min-height: 36px; font-size: .8rem; }
  .yol { padding: 24px; }
}

/* ---------- sepet (2026-09-28: site üzerinden sipariş) ---------- */
.sepet-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  text-decoration: none; font-weight: 600;
}
.sepet-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.sepet-adet {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--kehribar); color: var(--vurgu-yazi); font-size: .8rem; font-weight: 700;
}
.sepet-adet[hidden] { display: none; }

.katalog-fiyat { margin: -4px 0 12px; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
button.katalog-al { background: var(--kehribar); color: var(--vurgu-yazi); border-color: var(--kehribar); font-family: inherit; cursor: pointer; }
button.katalog-al:hover { background: var(--kehribar-koyu); border-color: var(--kehribar-koyu); }
.katalog-sor { font-size: .85rem; color: var(--soluk); align-self: center; }
.katalog-sor:hover { color: var(--sise); }

/* 2026-09-28, kullanıcı isteği: "Grossengross soldaki olan yanına ev işareti" */
.marka { display: inline-flex; align-items: center; gap: 9px; }

/* 2026-09-28, kullanıcı isteği: "site daha gerçekçi ikonlarla gitsin" —
   ikonlar artık hazır setlerden (lucide + simple-icons); iki biçim var:
   çizgi (sepet, ev) ve dolu (WhatsApp, Instagram gibi marka işaretleri). */
.ikon { width: 20px; height: 20px; flex: none; }
.ikon-cizgi {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ikon-dolu { fill: currentColor; stroke: none; }
.marka .ikon { width: 22px; height: 22px; }
.dugme .ikon { width: 18px; height: 18px; }
.dugme { gap: 9px; }
.alt-sosyal a { display: inline-flex; align-items: center; gap: 7px; }
.alt-sosyal .ikon { width: 17px; height: 17px; }

/* 2026-09-28, kullanıcı isteği: "en altta tüm ürünler koy" — dizinin altındaki
   "Tüm ürünler" satırı, kategori kutularıyla aynı dilde ama bir tık öne çıkan. */
.dizin-tumu { margin-top: 28px; }
.dizin-tumu a {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--beyaz); border: 1.5px solid var(--cizgi); border-radius: 999px;
  padding: 12px 22px; font-weight: 600;
}
.dizin-tumu a:hover { border-color: var(--sise); color: var(--sise); }

/* 2026-09-28, kullanıcı isteği: "ucuzdan pahalıya sıralama yapılabilsin sitede" */
.sirala-satir {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px; font-size: .9rem; color: var(--soluk);
}
.sirala-satir select {
  font: 500 .9rem var(--govde); color: var(--murekkep);
  background: var(--beyaz); border: 1.5px solid var(--cizgi); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
}
.sirala-satir select:focus-visible { outline: 2px solid var(--sise); outline-offset: 2px; }

/* 2026-09-28, kullanıcı isteği: "ürün resmine tıklayınca resimleri büyüt" */
.katalog-gorsel { cursor: zoom-in; }
.buyutec {
  position: fixed; inset: 0; z-index: 50; border: 0; padding: 24px;
  display: grid; place-items: center; cursor: zoom-out;
  background: rgba(0,0,0,.72);
  background: color-mix(in srgb, var(--sise-derin) 86%, transparent);
}
.buyutec img {
  max-width: min(92vw, 860px); max-height: 86vh; width: auto;
  background: var(--beyaz); border-radius: 14px; padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.buyutec figcaption {
  margin-top: 16px; color: var(--beyaz); font-size: .95rem; text-align: center;
  max-width: min(92vw, 860px);
}
.buyutec-kapat {
  position: absolute; top: 14px; right: 18px; width: 40px; height: 40px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--beyaz);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.buyutec-kapat:hover { background: rgba(255,255,255,.26); }
.buyutec[hidden] { display: none; }
body.buyutec-acik { overflow: hidden; }

.sepet-bildirim {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30;
  background: var(--sise-derin); color: var(--beyaz); padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: .95rem; white-space: nowrap;
}
.sepet-bildirim a { color: var(--kehribar); font-weight: 600; margin-left: 8px; }

.sepet-duzen { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.sepet-liste { list-style: none; margin: 0; padding: 0; }
.sepet-satir {
  display: grid; grid-template-columns: 72px 1fr auto auto auto; gap: 16px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--cizgi);
}
.sepet-satir img { width: 72px; height: 72px; object-fit: contain; background: var(--beyaz); border-radius: 8px; padding: 4px; }
.sepet-bilgi h3 { font: 500 .95rem/1.35 var(--govde); }
.sepet-bilgi p { color: var(--soluk); font-size: .9rem; margin-top: 4px; }
.sepet-adet-sec { display: flex; align-items: center; border: 1.5px solid var(--cizgi); border-radius: 999px; background: var(--beyaz); }
.sepet-adet-sec button { width: 36px; height: 36px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--sise); }
.sepet-adet-sec input { width: 48px; border: 0; text-align: center; font: 600 1rem var(--govde); background: none; -moz-appearance: textfield; }
.sepet-adet-sec input::-webkit-outer-spin-button, .sepet-adet-sec input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sepet-tutar { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.sepet-sil {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px;
  border: 1.5px solid var(--cizgi); border-radius: 999px; background: var(--beyaz);
  color: var(--murekkep); cursor: pointer; font: 600 .88rem var(--govde);
}
.sepet-sil svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sepet-sil:hover { border-color: #b3372f; background: #b3372f; color: #fff; }
.sepet-toplam { display: flex; justify-content: space-between; padding: 18px 0 8px; border-top: 2px solid var(--sise); font-size: 1.1rem; }
.sepet-bos-metin { margin-bottom: 20px; color: var(--soluk); }
.sepet-hata { padding: 16px 0; color: var(--soluk); }

.form h3 { font-size: 1.3rem; }
.form-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grup { display: grid; gap: 14px; }
.form-grup[hidden] { display: none; }
.tip-sec { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.tip-sec legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.tip-sec label {
  display: flex; align-items: center; gap: 8px; font-weight: 500;
  padding: 10px 16px; border: 1.5px solid var(--cizgi); border-radius: 999px; cursor: pointer;
}
.tip-sec label:has(input:checked) { border-color: var(--sise); background: color-mix(in srgb, var(--sise) 7%, transparent); }
.odeme-bilgi { background: var(--buz); border-radius: 10px; padding: 14px 16px; font-size: .95rem; }
.odeme-bilgi p { color: var(--soluk); margin-top: 4px; }

.siparis-sonuc { background: var(--beyaz); border-radius: 14px; padding: 32px; max-width: 640px; display: grid; gap: 14px; justify-items: start; }
.siparis-sonuc h2 { font-size: 1.8rem; }
.sonuc-no strong { font-size: 1.2rem; letter-spacing: .02em; }
.iban { margin: 0; width: 100%; }
.iban div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cizgi); }
.iban dt { color: var(--soluk); }
.iban dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.alt-sosyal { display: flex; gap: 16px; }
.alt-sosyal a { color: rgba(255,255,255,.85); }

@media (max-width: 960px) {
  .sepet-duzen { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  /* dar telefonda üst şeride sığmıyor; WhatsApp her üründe ve altta duruyor */
  .ust-wa { display: none; }
}
@media (max-width: 720px) {
  .sepet-satir { grid-template-columns: 64px 1fr auto; grid-template-areas: "r b b" "r a t" ". s s"; gap: 8px 12px; }
  .sepet-satir img { grid-area: r; width: 64px; height: 64px; }
  .sepet-bilgi { grid-area: b; }
  .sepet-adet-sec { grid-area: a; justify-self: start; }
  .sepet-tutar { grid-area: t; min-width: 0; }
  .sepet-sil { grid-area: s; justify-self: start; }
  .form-iki { grid-template-columns: 1fr; }
  .siparis-sonuc { padding: 22px; }
  .katalog-sor { align-self: center; }
}
/* .form input genişliği (100%) radyo düğmesini bozuyordu; sonuç kutusu gizliyken görünmesin */
.tip-sec input { width: auto; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; accent-color: var(--sise); }
.siparis-sonuc[hidden] { display: none; }

/* ---------- üst sekme şeridi (2026-09-28, kullanıcı isteği: mağaza
   sayfasındaki gibi sekmeler; en sonda "Tüm Ürünler") ---------- */
.sekmeler {
  background: var(--beyaz); border-bottom: 1px solid var(--cizgi);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme-ic { display: flex; gap: 4px; min-height: 48px; align-items: stretch; }
.sekmeler a {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 16px; text-decoration: none; color: var(--soluk);
  font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent;
}
.sekmeler a:hover { color: var(--murekkep); }
.sekmeler a.etkin { color: var(--kehribar); border-bottom-color: var(--kehribar); }
@media (max-width: 720px) {
  .sekme-ic { padding-inline: 16px; }
  .sekmeler a { padding: 0 12px; font-size: .9rem; }
}

/* ---------- Biz kimiz ---------- */
.bolum-biz { padding-bottom: 0; }
.biz-ic { display: grid; gap: 18px; max-width: 70ch; }
.biz-ic p { color: var(--soluk); }
.biz-sayilar {
  display: flex; flex-wrap: wrap; gap: 28px; margin: 6px 0 0;
  padding-top: 20px; border-top: 1px solid var(--cizgi);
}
.biz-sayilar div { display: grid; gap: 2px; }
.biz-sayilar dt {
  font: 700 1.6rem/1 var(--baslik); color: var(--murekkep);
  font-variant-numeric: tabular-nums;
}
.biz-sayilar dd { margin: 0; font-size: .9rem; color: var(--soluk); }

/* ---------- bilgilendirme bandı + metin sayfaları (2026-09-28) ---------- */
.cerez-bant {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 40; width: min(760px, calc(100% - 32px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sise-derin); color: var(--beyaz);
  padding: 14px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: .9rem; line-height: 1.45;
}
.cerez-bant[hidden] { display: none; }
.cerez-bant p { margin: 0; flex: 1 1 340px; }
.cerez-bant a { color: #e8b08f; font-weight: 600; }   /* koyu zeminde okunur açık ton (2026-10-02 kontrast) */
.cerez-bant button {
  flex: none; min-height: 38px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--kehribar); color: var(--vurgu-yazi);
  font: 600 .9rem var(--govde); cursor: pointer;
}
.cerez-bant button:hover { background: var(--kehribar-koyu); }

.metin-sayfa .metin-govde { max-width: 72ch; display: grid; gap: 14px; }
.metin-sayfa h3 { margin-top: 18px; font-size: 1.15rem; }
.metin-sayfa ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--soluk); }
.metin-sayfa p { color: var(--soluk); }
.metin-tarih { font-size: .9rem; color: var(--soluk); }
.metin-uyari {
  background: var(--beyaz); border-left: 4px solid var(--kehribar);
  padding: 14px 16px; border-radius: 0 10px 10px 0; color: var(--murekkep) !important;
}
.form-kvkk { margin-top: -4px; }
.alt-ic a { color: inherit; }

/* 2026-09-30: Site yönetimi'nden gelen ürün açıklaması (kart altında kısa, sakin yazı) */
.katalog-aciklama { margin: 0 0 10px; font-size: .88rem; line-height: 1.4; color: var(--yazi-soluk, #5b6770); }

/* ---------- Öne çıkanlar: kayan ürün şeridi (2026-09-30) ----------
   Kullanıcı: "kayan ürünler olursa çok tatlı olur, telefondan girenlere kolaylık".
   Telefonda parmakla kayar (bir sonraki kart kenardan görünür), masaüstünde oklarla
   ve kendiliğinden kayar (bkz. js/script.js). */
.vitrin { padding: 28px 0 6px; }
.vitrin-bas { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.vitrin-bas h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; }
.vitrin-ok { display: none; gap: 8px; }
.vitrin-ok button {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--sise); background: transparent;
  color: var(--sise); font: 400 1.5rem/1 var(--govde); cursor: pointer; padding: 0 0 3px;
}
.vitrin-ok button:hover { background: var(--sise); color: var(--beyaz); }
@media (min-width: 721px) { .vitrin-ok { display: flex; } }
.vitrin-serit {
  list-style: none; margin: 0 -16px; padding: 4px 16px 14px;
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vitrin-serit::-webkit-scrollbar { display: none; }
.vitrin-kart {
  flex: 0 0 66%; max-width: 250px; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 12px;
  background: var(--beyaz); border-radius: 16px; box-shadow: 0 1px 2px rgba(42,37,33,.08);
}
@media (min-width: 721px) {
  .vitrin-serit { margin: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .vitrin-kart { flex-basis: 230px; }
}
.vitrin-resim img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.vitrin-kart h3 {
  margin: 10px 0 4px; font-size: 1rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
}
.vitrin-kart h3 a { text-decoration: none; }
.vitrin-fiyat { margin-bottom: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vitrin-kart .katalog-al { margin-top: auto; }

/* ---------- Açılış görseli (2026-09-30) ----------
   Kullanıcı: "siteye uygun bi görsel var sunucuda onuda güzel bi şekilde koyalım".
   Telefonda görsel üstte, yazı altında; geniş ekranda yazı görselin sol altında (koyu geçişle). */
.acilis { padding: 20px 0 0; }
.acilis-kutu { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--sise); }
.acilis-gorsel { width: 100%; height: clamp(190px, 46vw, 330px); object-fit: cover; object-position: 50% 30%; }
.acilis-yazi { padding: 18px 18px 22px; color: var(--beyaz); display: grid; gap: 10px; justify-items: start; }
.acilis-yazi h1 { font-size: clamp(1.45rem, 5.6vw, 1.9rem); line-height: 1.12; }
.acilis-yazi p { color: rgba(255,255,255,.86); font-size: 1rem; max-width: 46ch; }
@media (min-width: 900px) {
  /* yazı görselin ÜSTÜNE binerse tabelanın harfleriyle çakışıyordu; altta, iki sütun */
  .acilis-gorsel { height: 340px; object-position: 50% 26%; }
  .acilis-yazi { grid-template-columns: 1.25fr 1fr; align-items: center; column-gap: 40px; padding: 26px 44px 30px; }
  .acilis-yazi h1 { grid-row: 1 / span 2; font-size: 2.1rem; max-width: 22ch; }
  .acilis-yazi p { align-self: end; }
  .acilis-yazi .dugme { align-self: start; }
}

/* 2026-10-02, kullanıcı isteği: "biz kimiz ve iletişimi sitenin en altına al ... LAV'ın sitesinin en altı harika
   olmuş, bizimkini de bu şekilde ayarla" — dört sütunlu altbilgi (scripts/website_altbilgi.py). */
.alt { padding-block: 0; }
.alt-sutunlar { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 32px; padding-block: 44px 28px; }
.alt-sutun h3 { margin: 0 0 14px; font: 600 1rem var(--baslik); color: #fff; letter-spacing: .01em; }
.alt-sutun p { margin: 0 0 12px; line-height: 1.55; max-width: 44ch; }
.alt-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt-sutun a { color: rgba(255,255,255,.78); text-decoration: none; }
.alt-sutun a:hover { color: #fff; text-decoration: underline; }
.alt-sutun .alt-sosyal { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.alt-alt { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 18px 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; }
@media (max-width: 860px) { .alt-sutunlar { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .alt-firma { grid-column: 1 / -1; } }
@media (max-width: 480px) { .alt-sutunlar { grid-template-columns: 1fr; } }

/* 2026-10-02: geniş ekranda açılış görseli biraz daha yüksek, vitrin kartları şeridi doldursun */
@media (min-width: 1300px) { .acilis-gorsel { height: 400px; } .vitrin-kart { flex-basis: 250px; max-width: 280px; } }

/* 2026-10-02, kullanıcı isteği: "sağ tarafta destek hattı koymuşlar ... o da güzel" (LAV'daki dikey sekme).
   js/script.js ekler; kapatılınca bu oturumda geri gelmez. */
.destek-hatti { position: static; display: flex; flex-direction: column; align-items: center;
  background: var(--sise); color: #fff; border-radius: 12px 0 0 12px; box-shadow: 0 4px 16px rgba(0,0,0,.25); overflow: hidden; }
.destek-hatti a { color: #fff; text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; gap: 8px; padding: 16px 10px; font: 600 .85rem var(--govde); letter-spacing: .03em; }
.destek-hatti a .ikon { width: 18px; height: 18px; transform: rotate(90deg); }
.destek-hatti button { background: rgba(255,255,255,.12); color: #fff; border: 0; width: 100%; padding: 8px 0; cursor: pointer; font-size: 1rem; line-height: 1; }
.destek-hatti:hover { background: var(--kehribar-koyu); }
@media (max-width: 720px) { .yan-sekmeler { top: auto; bottom: 90px; } .destek-hatti a { padding: 12px 8px; font-size: .8rem; } }

/* 2026-10-02, kullanıcı isteği: "üye ol giriş yap, favorilere aldığı ürünleri görebiliyor, sepetine gidebiliyor, o sistemler olsun".
   Favoriler giriş istemeden tarayıcıda (localStorage "gg_favori") tutulur; kalp düğmesini js/script.js kartlara ekler. */
.katalog-urun, .vitrin-kart { position: relative; }
.fav-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--sise); }
.fav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav-btn[aria-pressed="true"] { color: var(--kehribar); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn:hover { transform: scale(1.08); }
.fav-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-left: auto; margin-right: 18px; }
.fav-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.fav-link .fav-sayi { background: var(--kehribar); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; }
.fav-kaldir { margin-top: 8px; background: none; border: 0; color: var(--soluk); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; }

/* 2026-10-02, kullanıcı isteği: "orantısız olmuş yukarda yazılar küçük kalıyo ... yukarı bölümler daha baskın olsun,
   öne çıkanlar ve ürünlerimiz aynı büyüklükte olsun" — Öne çıkanlar kartları ile Ürünlerimiz kutuları AYNI sütun sayısını
   (--kolon) kullanır, ekran genişledikçe ikisi birlikte küçülür/büyür; geniş ekranda yazılar (rem) büyür. */
:root { --kolon: 2; --kolon-bosluk: 18px; }
@media (min-width: 721px)  { :root { --kolon: 3; } }
@media (min-width: 1000px) { :root { --kolon: 4; } }
@media (min-width: 1300px) { :root { --kolon: 5; } }
@media (min-width: 1600px) { :root { --kolon: 6; } html { font-size: 17.5px; } }
@media (min-width: 2000px) { :root { --kolon: 7; } html { font-size: 19px; } }
.urunler { grid-template-columns: repeat(var(--kolon), 1fr); gap: 40px var(--kolon-bosluk); }
@media (min-width: 721px) {
  .vitrin-serit { gap: var(--kolon-bosluk); }
  .vitrin-kart { flex: 0 0 calc((100% - (var(--kolon) - 1) * var(--kolon-bosluk)) / var(--kolon)); max-width: none; }
}
.vitrin-bas h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }  /* "Ürünlerimiz" başlığıyla aynı boy */
.vitrin-kart h3 { font-size: 1.05rem; }
.vitrin-fiyat { font-size: 1.1rem; }

/* 2026-10-02, kullanıcı isteği: "üyelik ve giriş kısmını yapalım" — uye.html (sunucu: server/uye.py) */
.uye-kutu { max-width: 980px; }
.uye-sekmeler { display: flex; gap: 8px; margin-bottom: 18px; }
.uye-sekme { padding: 10px 20px; border-radius: 999px; border: 2px solid var(--sise); background: transparent; color: var(--sise); font: 600 1rem var(--govde); cursor: pointer; }
.uye-sekme.etkin { background: var(--sise); color: #fff; }
#girisForm, #kayitForm { max-width: 460px; }
.uye-onay { display: flex !important; gap: 10px; align-items: flex-start; font-size: .92rem; }
.uye-onay input { margin-top: 4px; flex: none; width: auto; }
.uye-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.uye-kart { background: var(--beyaz); border-radius: 16px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.uye-kart h3 { margin: 0; }
.uye-kart p { margin: 0; }
.fav-link.giris-link { margin-right: 6px; }

/* 2026-10-02, kullanıcı isteği: "sepete ekle ile favorilerden çıkar kaymış hizalı olsun" — favoriler sayfasında
   başlık 2 satır yer tutar (fiyatlar aynı hizada), "Favorilerden çıkar" Sepete ekle ile aynı sola yaslı hizada. */
#favListe .katalog-urun h3 { min-height: 2.6em; }
#favListe .katalog-satinal { margin-top: auto; }
#favListe .fav-kaldir { align-self: flex-start; margin-top: 10px; padding: 0; text-align: left; }
.uye-kutu [hidden], .form[hidden] { display: none !important; }   /* .form'un display'i hidden'ı eziyordu */
/* telefonda üst çubuk taşmasın: Giriş yap / Favoriler sadece simge (sayaç kalır) */
.fav-link { white-space: nowrap; }
@media (max-width: 720px) {
  .fav-link > span:not(.fav-sayi) { display: none; }
  .fav-link { margin-right: 12px; }
  .fav-link.giris-link { margin-right: 4px; }
}
.sepet-uye-not { color: var(--soluk); max-width: 46ch; }   /* 2026-10-02, kullanıcı isteği: "üye olmadan da alınabilsin ürünler" */

/* telefon alanı: +90 sabit önek (uye.html) */
.tel-kutu { display: flex; align-items: stretch; }
.tel-on { display: inline-flex; align-items: center; padding: 0 12px; background: #efe6d8; border: 1px solid var(--cizgi); border-right: 0; border-radius: 10px 0 0 10px; font-weight: 600; color: var(--soluk); }
.tel-kutu input { border-radius: 0 10px 10px 0 !important; flex: 1; min-width: 0; }

/* =====================================================================================================
   ALIŞVERİŞ SAYFALARI — sepet, ödeme, favoriler, mini sepet çubuğu (2026-10-02)
   Kullanıcı: "kaliteli ekran görüntüsüne benzer bi sistem yap ... yazı karakterlerine bak, çirkin çirkin butonlar yok,
   ne kadar kaliteli duruyo" (Trendyol sepet/ödeme sayfaları örnek). Sade beyaz kartlar, ince çizgi, küçük ve net yazı,
   köşeli-yumuşak (8px) düz düğmeler. Başlıklarda Bricolage yerine gövde yazı tipi (daha sakin).
   ===================================================================================================== */
.al-sayfa { --al-kenar: #e6dfd3; padding: 28px 0 64px; font-size: .95rem; color: var(--murekkep); }
.al-sayfa h1, .al-sayfa h2, .al-sayfa h3 { font-family: var(--govde); letter-spacing: 0; }
.al-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.al-sol { display: grid; gap: 16px; min-width: 0; }
.al-sag { display: grid; gap: 12px; position: sticky; top: 84px; }
.al-kart { background: var(--beyaz); border: 1px solid var(--al-kenar); border-radius: 10px; padding: 18px 20px; min-width: 0; }
.al-baslik { font-size: 1.12rem; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }
.al-baslik span { font-weight: 400; color: var(--soluk); font-size: .95rem; }
.al-kart-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.al-kart-bas .al-baslik { margin-bottom: 10px; }
.al-soluk { color: var(--soluk); }
.al-yesil { color: #1b8a4a; }
.al-hata { margin: 10px 0 0; color: #c2273d; font-size: .88rem; min-height: 1em; }
.al-alt-not { margin: 14px 0 0; color: var(--soluk); font-size: .88rem; }
.al-bos { background: var(--beyaz); border: 1px solid var(--al-kenar); border-radius: 10px; padding: 48px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.al-bos h1 { font-size: 1.4rem; font-weight: 600; }
.al-bos p { color: var(--soluk); }

/* düğmeler: düz, 8px köşe, 600 ağırlık */
.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 1px solid var(--kehribar);
  border-radius: 8px; background: var(--kehribar); color: #fff; font: 600 .95rem var(--govde); text-decoration: none; cursor: pointer; text-align: center; }
.al-btn:hover { background: var(--kehribar-koyu); border-color: var(--kehribar-koyu); }
.al-btn[disabled] { background: #d9cfc2; border-color: #d9cfc2; color: #fff; cursor: not-allowed; }
.al-btn-hat { background: #fff; color: var(--kehribar); }
.al-btn-hat:hover { background: #fbf3ee; color: var(--kehribar-koyu); }
.al-btn-tam { width: 100%; }
.al-btn-kucuk { min-height: 38px; padding: 0 16px; font-size: .88rem; }

/* sepet satırları */
.al-satirlar { list-style: none; margin: 0; padding: 0; }
.al-satir { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--al-kenar); }
.al-satir:first-child { border-top: 0; padding-top: 4px; }
.al-satir img { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 1px solid var(--al-kenar); border-radius: 8px; padding: 4px; }
.al-satir h3 { font-size: .95rem; font-weight: 500; line-height: 1.35; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-satir .al-birim { color: var(--soluk); font-size: .85rem; }
.al-adet { display: inline-flex; align-items: center; border: 1px solid var(--al-kenar); border-radius: 8px; overflow: hidden; height: 36px; }
.al-adet button { width: 34px; height: 100%; border: 0; background: #faf7f2; font-size: 1.1rem; cursor: pointer; color: var(--murekkep); }
.al-adet button:hover { background: #f0e9dd; }
.al-adet input { width: 44px; height: 100%; border: 0; text-align: center; font: 600 .95rem var(--govde); -moz-appearance: textfield; background: #fff; }
.al-adet input::-webkit-outer-spin-button, .al-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.al-tutar { font-weight: 700; font-size: 1.05rem; color: var(--kehribar-koyu); min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.al-sil { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--soluk); font: 500 .82rem var(--govde); cursor: pointer; grid-column: 2 / -1; justify-self: start; padding: 0; }
.al-sil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.al-sil:hover { color: #c2273d; }
.al-satirlar-salt .al-satir { grid-template-columns: 64px minmax(0, 1fr) auto; }
.al-satirlar-salt img { width: 64px; height: 64px; }

/* sepet özeti */
.al-ozet-satirlar { margin: 0 0 14px; display: grid; gap: 10px; }
.al-ozet-satirlar div { display: flex; justify-content: space-between; gap: 12px; }
.al-ozet-satirlar dt { color: var(--soluk); }
.al-ozet-satirlar dd { margin: 0; font-variant-numeric: tabular-nums; }
.al-ozet-satirlar .al-toplam { padding-top: 12px; border-top: 1px solid var(--al-kenar); font-weight: 700; }
.al-ozet-satirlar .al-toplam dt { color: var(--murekkep); }
.al-ozet-satirlar .al-toplam dd { color: var(--kehribar-koyu); font-size: 1.15rem; }
.al-kod { margin-bottom: 14px; }
.al-kod-ac { width: 100%; padding: 10px; border: 1px solid var(--al-kenar); border-radius: 8px; background: #fff; font: 600 .85rem var(--govde); cursor: pointer; color: var(--murekkep); }
.al-kod-ac:hover { background: #faf7f2; }
.al-kod-form { display: flex; gap: 8px; }
.al-kod-form input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--al-kenar); border-radius: 8px; padding: 0 12px; font: 500 .9rem var(--govde); text-transform: uppercase; }
.al-kod-not { margin: 8px 0 0; font-size: .84rem; color: #c2273d; }
.al-kod-not.iyi { color: #1b8a4a; }
.al-kod-uygulanan { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .88rem; padding: 10px 12px; background: #eef8f1; border-radius: 8px; color: #1b6b3c; }
.al-kod-uygulanan button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* benzer ürünler */
.al-oklar { display: flex; gap: 6px; }
.al-oklar button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--al-kenar); background: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0 2px; }
.al-oklar button:hover { background: #faf7f2; }
.al-benzer { list-style: none; margin: 0; padding: 4px 0 6px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.al-benzer::-webkit-scrollbar { display: none; }
.al-benzer li { flex: 0 0 188px; scroll-snap-align: start; border: 1px solid var(--al-kenar); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.al-benzer img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; }
.al-benzer h3 { font-size: .85rem; font-weight: 500; line-height: 1.3; margin: 0; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-benzer .al-fiyat { font-weight: 700; color: var(--kehribar-koyu); }
.al-benzer button { margin-top: auto; min-height: 36px; border: 1px solid var(--kehribar); background: #fff; color: var(--kehribar); border-radius: 8px; font: 600 .85rem var(--govde); cursor: pointer; }
.al-benzer button:hover { background: var(--kehribar); color: #fff; }

/* ödeme: açılır sepet, form, seçenekler */
.al-acilir { padding: 0; }
.al-acilir-bas { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.al-acilir-baslik { flex: 1; font-weight: 600; font-size: 1.05rem; }
.al-acilir-baslik span { font-weight: 400; color: var(--soluk); font-size: .95rem; }
.al-kucuk-resimler { display: inline-flex; gap: 6px; }
.al-kucuk-resimler img { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--al-kenar); border-radius: 6px; background: #fff; }
.al-ok { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; flex: none; }
.al-acilir-bas[aria-expanded="true"] .al-ok { transform: rotate(180deg); }
.al-acilir-ic { padding: 0 20px 14px; border-top: 1px solid var(--al-kenar); }
.al-acilir-ic[hidden] { display: none; }
.al-tip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.al-secenek { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--al-kenar); border-radius: 8px; cursor: pointer; font-weight: 500; }
.al-secenek:has(input:checked) { border-color: var(--kehribar); background: #fdf6f1; }
.al-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.al-alanlar[hidden] { display: none; }
.al-alan { display: grid; gap: 6px; font-weight: 500; font-size: .88rem; align-content: start; }
.al-alan.al-tam { grid-column: 1 / -1; }
.al-alan input, .al-alan textarea { border: 1px solid #d8cfc1; border-radius: 8px; padding: 10px 12px; font: 400 .95rem var(--govde); width: 100%; background: #fff; color: var(--murekkep); }
.al-alan input:focus, .al-alan textarea:focus, .al-kod-form input:focus { outline: 2px solid rgba(194,101,63,.35); border-color: var(--kehribar); }
.al-alan input.hatali, .al-alan textarea.hatali { border-color: #c2273d; background: #fff8f8; }
.al-alan .tel-kutu input { border-radius: 0 8px 8px 0; }
.al-alan .tel-on { border-radius: 8px 0 0 8px; }
.al-odeme-sec { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--kehribar); background: #fdf6f1; border-radius: 8px; }
.al-odeme-sec small { display: block; color: var(--soluk); margin-top: 3px; line-height: 1.45; }
.al-baglar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al-baglar a { color: var(--murekkep); }
.al-onay { padding: 14px 16px; }
.al-onay-satir { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--soluk); line-height: 1.5; cursor: pointer; }
.al-onay-satir input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--kehribar); }
.al-onay-satir a { color: var(--murekkep); }
.al-sonuc { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; justify-items: start; }
.al-sonuc[hidden] { display: none; }
.al-sonuc h2 { font-size: 1.4rem; font-weight: 600; }

/* favoriler: sağ hesap paneli */
.al-izgara-fav { grid-template-columns: minmax(0, 1fr) 300px; }
.al-fav-liste { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 16px; }
.al-hesap-panel { display: grid; gap: 12px; }
.al-hesap-ust { display: flex; gap: 12px; align-items: center; }
.al-hesap-ust div { display: grid; min-width: 0; }
.al-hesap-ust span.al-soluk { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; }
.al-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--kehribar); color: #fff; display: grid; place-items: center; font: 600 1.1rem var(--govde); flex: none; }
.al-menu { display: grid; border-top: 1px solid var(--al-kenar); margin-top: 6px; }
.al-menu a, .al-menu button { padding: 12px 4px; border: 0; border-bottom: 1px solid var(--al-kenar); background: none; text-align: left; color: var(--murekkep); text-decoration: none; font: 500 .92rem var(--govde); cursor: pointer; }
.al-menu a:hover, .al-menu button:hover { color: var(--kehribar-koyu); }
.al-menu a.etkin { color: var(--kehribar-koyu); font-weight: 600; }
.al-menu button { border-bottom: 0; color: var(--soluk); }

/* mini sepet çubuğu (sağ kenarda dar şerit) */
.mini-sepet { position: fixed; top: 0; right: 0; bottom: 0; width: 156px; z-index: 55; background: #fff; border-left: 1px solid var(--cizgi);
  display: none; flex-direction: column; gap: 10px; padding: 12px 10px; overflow-y: auto; }
.mini-sepet .al-btn { min-height: 40px; padding: 0 6px; font-size: .78rem; line-height: 1.2; }
.mini-sepet .mini-ara { text-align: center; font-size: .8rem; display: grid; gap: 4px; }
.mini-sepet .mini-ara strong { color: var(--kehribar-koyu); background: #fbf3ee; padding: 5px 2px; border-radius: 6px; font-size: .82rem; }
.mini-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mini-liste li { display: grid; gap: 6px; justify-items: center; }
.mini-liste img { width: 76px; height: 76px; object-fit: contain; border: 1px solid var(--al-kenar, #e6dfd3); border-radius: 8px; background: #fff; }
.mini-liste .mini-fiyat { font-weight: 700; font-size: .8rem; color: var(--kehribar-koyu); }
.mini-adet { display: inline-flex; align-items: center; height: 26px; border: 1px solid #e6dfd3; border-radius: 6px; overflow: hidden; }
.mini-adet button { width: 22px; height: 100%; border: 0; background: #faf7f2; cursor: pointer; font-size: .9rem; padding: 0; }
.mini-adet span { min-width: 22px; text-align: center; font: 600 .8rem var(--govde); }
.mini-sil { border: 0; background: none; color: var(--soluk); cursor: pointer; padding: 2px; }
.mini-sil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.mini-sil:hover { color: #c2273d; }
.mini-kucult { margin-top: auto; border: 1px solid #e6dfd3; background: #fff; border-radius: 6px; padding: 7px 4px; font: 500 .78rem var(--govde); cursor: pointer; color: var(--murekkep); }
@media (min-width: 1100px) {
  body.mini-acik .mini-sepet { display: flex; }
  body.mini-acik { padding-right: 156px; }
  body.mini-acik .yan-sekmeler { right: 156px; }
  body.mini-kucuk .mini-sepet-kucuk { display: flex; }
}
@media (max-width: 1099px) { body.mini-kucuk .mini-sepet-kucuk, .mini-sepet-kucuk { display: none !important; } }

/* dar ekran */
@media (max-width: 900px) {
  .al-izgara, .al-izgara-fav { grid-template-columns: 1fr; }
  .al-sag { position: static; }
  .al-satir { grid-template-columns: 72px minmax(0, 1fr); }
  .al-satir img { width: 72px; height: 72px; grid-row: 1 / span 2; }
  .al-satir .al-adet, .al-satir .al-tutar, .al-satir .al-sil { grid-column: 2; }
  .al-satir .al-tutar { text-align: left; }
  .al-alanlar { grid-template-columns: 1fr; }
  .al-satirlar-salt .al-satir { grid-template-columns: 56px minmax(0, 1fr); }
}
.al-sayfa [hidden], .mini-sepet [hidden] { display: none !important; }   /* display:grid/flex olan kutular hidden'ı eziyordu */
.al-sayfa input[type="radio"], .al-sayfa input[type="checkbox"] { accent-color: var(--kehribar); }
/* favoriler/benzer listelerindeki eski pilli düğmeler de aynı sade düğme biçimine gelsin */
.al-sayfa .katalog-al { border-radius: 8px; min-height: 40px; padding: 0 18px; font: 600 .88rem var(--govde); }
.al-sayfa .fav-kaldir { font-size: .85rem; color: var(--soluk); }

/* =====================================================================================================
   ANA SAYFA YENİ DÜZEN (2026-10-02, kullanıcı isteği, LAV örneği):
   - "üstte home işaretinin oradaki siyah barı %50 büyüt"
   - "sitenin ortasında grossengross resmi olmasın; gross yazan büyük resmi silik bir şekilde arka fona yedir"
   - "bardak, borcam, sürahi, saklama, vazo, duvar saati, kendi üretimlerimiz, kase, servis, kadeh resimlerini küçült,
      yuvarlak buton gibi yap, öne çıkanların üstüne getir"
   - "ürünlerimiz resimlerini yarıya düşür; diğer yerlerin büyüklüğü çok güzel"
   ===================================================================================================== */
.ust-ic { min-height: 102px; gap: 34px; }                                   /* 68px → 102px (%50) */
.marka { font-size: 2.02rem; gap: 13px; }
.marka .ikon { width: 33px; height: 33px; }
.sepet-link, .fav-link { font-size: 1.15rem; }
.sepet-link .ikon, .fav-link svg { width: 27px; height: 27px; }
.fav-link { gap: 9px; }
.al-sag { top: 126px; }
@media (max-width: 720px) {
  .ust-ic { min-height: 80px; gap: 14px; }
  .marka { font-size: 1.55rem; }
  .marka .ikon { width: 26px; height: 26px; }
  .sepet-link, .fav-link { font-size: 1rem; }
  .al-sag { top: 0; }
}

.acilis-silik { position: relative; padding: 34px 0 6px; text-align: center; overflow: hidden; isolation: isolate; }
.acilis-silik::before {                                                   /* tabela görseli: silik, aşağı doğru kaybolur */
  /* 2026-10-02, kullanıcı: "yuvarlaklarla iç içe girmiş gibi duruyo" → "yap yap" (daireleri yazının altına al):
     tabela artık sadece ÜST BANTTA (başlık + yazı); daireler bandın altında temiz zeminde. */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 350px; z-index: -1;
  /* 2026-10-02, kullanıcı: "gross yazısını yukarı taşıyabilirsen resmin içinde, düzen düzelecek" → yazı başlığın hemen altına çıktı, bant kısaldı */
  background: url(img/tabela-1600.webp) center 34% / cover no-repeat;   /* 2026-10-02: "birazdaha yukarı al ama üst alanı büyütme" — band aynı, görsel kendi içinde yukarı kaydı */
  /* 2026-10-02, kullanıcı isteği: "arka planda gross resmi yaptıkta onda yazının başları görünmüyo onu ayarla bide birazdaha koyult".
     Tabelada yazı eğik: sol baştaki harfler (Gro...) daha aşağıda kalıyor ve alta doğru kaybolan maske tam orayı siliyordu →
     maske çok daha geç başlar; koyuluk .22 → .40. */
  opacity: .40;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.acilis-silik h1 { font-family: var(--baslik); font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.15; max-width: 26ch; margin: 0 auto 10px; }
.acilis-silik .acilis-alt { margin: 0 auto; max-width: 56ch; color: var(--soluk); font-size: 1rem; }
.daireler { margin-top: 222px; }          /* tabela bandının (350px) altında başlasın */
.daireler ul { list-style: none; margin: 0; padding: 4px 0 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 30px; }
.daireler a { display: grid; justify-items: center; gap: 10px; width: 108px; color: var(--murekkep); text-decoration: none; }
.daire { display: block; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #fff;
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cizgi), 0 3px 10px rgba(42,37,33,.12); transition: box-shadow .15s, transform .15s; }
.daire img { width: 100%; height: 100%; object-fit: cover; }
.daire-ad { font-size: .88rem; font-weight: 500; line-height: 1.25; text-align: center; }
.daireler a:hover .daire { box-shadow: 0 0 0 3px var(--kehribar), 0 4px 12px rgba(42,37,33,.18); transform: translateY(-2px); }
.daireler a:hover .daire-ad { color: var(--kehribar-koyu); }
/* 2026-10-02, kullanıcı: "yeni gelenlerin üstündeki çizgiyi yukarı çekelim, üstündekiler de onla beraber yukarı gitsin" →
   geniş ekranda 12 daire TEK sıraya sığar (Duvar saati / Kendi üretimimiz alt satıra düşüp ~165px boşluk bırakıyordu). */
@media (min-width: 1200px) {
  .daireler ul { flex-wrap: nowrap; gap: 0 14px; }
  .daireler li { flex: 0 0 calc((100% - 154px) / 12); min-width: 0; max-width: 108px; }   /* 12 daire eşit genişlikte */
  .daireler a { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .daire { width: 100%; max-width: 100px; height: auto; aspect-ratio: 1; }
  .daire-ad { font-size: .84rem; overflow-wrap: anywhere; }   /* etiketler dairelerin eşit genişliğini bozmasın */
}
@media (max-width: 720px) {
  .acilis-silik { padding-top: 22px; }
  /* telefonda tabela bandı: görsel tam genişliğe sığar (yazının sağ ucu kesilmesin) */
  .acilis-silik::before { height: 200px; background-size: 100% auto; background-position: center 0; }
  .daireler { margin-top: 103px; }
  .daireler ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 14px; padding-inline: 16px; scrollbar-width: none; margin-inline: -16px; }
  .daireler ul::-webkit-scrollbar { display: none; }
  .daireler a { width: 82px; flex: none; }
  .daire { width: 74px; height: 74px; }
  .daire-ad { font-size: .78rem; }
}

/* Ürünlerimiz: görseller yarıya iner (önceki 4-7 sütun yerine ~150px'lik kutular) */
.urunler { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 18px; }
.urunler h3 { font-size: .95rem; margin-top: 10px; }
@media (max-width: 720px) {   /* telefonda büyütülen üst çubuk taşmasın */
  .ust-ic { gap: 10px; min-height: 78px; }
  .marka { font-size: 1.3rem; gap: 8px; margin-right: auto; white-space: nowrap; }
  .marka .ikon { width: 23px; height: 23px; }
  .sepet-link, .fav-link { font-size: .95rem; }
  .sepet-link .ikon, .fav-link svg { width: 24px; height: 24px; }
  .fav-link { margin-right: 6px; }
}

/* =====================================================================================================
   ÖDEME + SEPET: DAR, ORTALANMIŞ DÜZEN (2026-10-02, kullanıcı isteği; Trendyol ödeme sayfası örnek)
   "bizimkine bak ne kadar kötü ... uzun uzun çubuklar, textboxlar çok kötü, sayfayı dolduracağım diye uğraşma,
   sipariş özeti kutusunun 2 katı genişliğinde sepetimdeki ürünler / teslimat bilgileri olsun"
   ===================================================================================================== */
.al-dar { font-size: .9rem; }
.al-dar-kap { width: min(1100px, 100% - 32px); margin: 0 auto; }
.al-dar .al-izgara { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.al-dar .al-sol { gap: 14px; }
.al-dar .al-kart { padding: 18px 20px; }
.al-baslik-bant { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -18px -20px 16px; padding: 13px 20px;
  background: #f7f3ec; border-bottom: 1px solid var(--al-kenar); border-radius: 10px 10px 0 0; }
.al-baslik-bant h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.al-dar .al-kart > .al-baslik:first-child { margin: -18px -20px 16px; padding: 13px 20px; background: #f7f3ec;
  border-bottom: 1px solid var(--al-kenar); border-radius: 10px 10px 0 0; font-size: 1rem; }
.al-gri { background: #f7f3ec; }
.al-link { border: 0; background: none; color: var(--kehribar-koyu); font: 600 .82rem var(--govde); cursor: pointer; padding: 0; }
.al-link:hover { text-decoration: underline; }

/* sade üst çubuk (ödeme) */
.al-ust { background: #fff; border-bottom: 1px solid #e6dfd3; }
.al-ust-ic { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.al-marka { display: inline-flex; align-items: center; gap: 9px; font: 700 1.5rem/1 var(--baslik); letter-spacing: -.03em; color: var(--murekkep); text-decoration: none; }
.al-marka .ikon { width: 26px; height: 26px; }
.al-geri { margin-left: 18px; margin-right: auto; color: var(--soluk); text-decoration: none; font-size: .88rem; }
.al-geri:hover { color: var(--kehribar-koyu); }
.al-guvenli { display: inline-flex; align-items: center; gap: 7px; color: #17703c; font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.al-guvenli svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* kompakt alanlar */
.al-dar .al-alanlar { grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 4px; }
.al-dar .al-alan { font-size: .8rem; font-weight: 500; color: var(--soluk); gap: 5px; }
.al-dar .al-alan input, .al-dar .al-alan textarea { height: 38px; padding: 0 11px; border-radius: 6px; font-size: .9rem; color: var(--murekkep); }
.al-dar .al-alan textarea { height: auto; padding: 8px 11px; min-height: 62px; resize: vertical; }
.al-dar .al-alan .tel-kutu input { border-radius: 0 6px 6px 0; }
.al-dar .al-alan .tel-on { border-radius: 6px 0 0 6px; font-size: .88rem; }
.al-iki { grid-column: 1 / -1; }
.al-firma { padding: 14px; margin-bottom: 14px; background: #faf7f2; border: 1px dashed var(--al-kenar); border-radius: 8px; }
.al-kaydet { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .84rem; color: var(--soluk); cursor: pointer; }
.al-kaydet[hidden] { display: none; }
.al-kaydet input { accent-color: var(--kehribar); }

/* ödeme seçenekleri */
.al-odemeler { display: grid; gap: 10px; }
.al-odeme-sec { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--al-kenar); background: #fff; border-radius: 8px; cursor: pointer; }
.al-odeme-sec:has(input:checked) { border-color: var(--kehribar); background: #fdf6f1; }
.al-odeme-sec input { margin-top: 3px; }
.al-odeme-sec small { font-size: .8rem; }

@media (max-width: 900px) {
  .al-dar .al-izgara { grid-template-columns: 1fr; }
  .al-dar .al-alanlar { grid-template-columns: 1fr; }
  .al-geri { display: none; }
  .al-guvenli { margin-left: auto; }
}
.al-dar .al-acilir { padding: 0; }
.al-dar .al-acilir-bas { padding: 14px 20px; }
.al-dar .al-acilir-ic { padding: 0 20px 12px; }

/* =====================================================================================================
   ANA SAYFA "ÜRÜNLERİMİZ": kategori başlığı + altında yana kaydırmalı ürün şeridi (2026-10-02, kullanıcı isteği)
   "Bardak yazıyor altında bardakları koy, kaydırmalı olsun, 20-30 ürün; diğerleri de aynı şekilde... site çok az dolu gibi"
   Şeritleri scripts/website_anasayfa.py üretir; kartlar "Öne çıkanlar" ile aynı (.vitrin-kart).
   ===================================================================================================== */
.kat-seritleri { display: grid; gap: 40px; }
.kat-serit-bas { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.kat-serit-bas h3 { font-family: var(--baslik); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.1; margin: 0; }
.kat-serit-bas h3 a { color: inherit; text-decoration: none; }
.kat-serit-bas h3 a::before { content: ""; display: inline-block; width: 6px; height: .95em; margin-right: 10px; border-radius: 3px; background: var(--kehribar); vertical-align: -.1em; }
.kat-hepsi { color: var(--soluk); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.kat-hepsi:hover { color: var(--kehribar-koyu); text-decoration: underline; }
.kat-serit-bas .vitrin-ok { margin-left: auto; }
.vitrin-ok button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; display: block; margin: auto; }
.vitrin-ok button { display: grid; place-items: center; padding: 0; }
.kat-urunler { padding-top: 2px; }
@media (max-width: 720px) { .kat-seritleri { gap: 30px; } .kat-serit-bas { gap: 10px; } }
.kat-seritleri { grid-template-columns: minmax(0, 1fr); }   /* grid öğesi içerik kadar genişleyip sayfayı taşırıyordu */
.kat-serit { min-width: 0; }

.al-bosalt { display: block; width: 100%; margin-top: 12px; text-align: center; color: var(--soluk); font-weight: 500; }
.al-bosalt:hover { color: #c2273d; }
.mini-bosalt { border: 0; background: none; color: var(--soluk); text-decoration: underline; font: 500 .72rem var(--govde); cursor: pointer; padding: 4px 0; }
.mini-bosalt:hover { color: #c2273d; }

/* 2026-10-02, kullanıcı isteği: "sağda küçült yapınca sepetim diye oluşan butonu destek hattı gibi ayarla, aynı renkte, onun yanına gelsin"
   Destek Hattı ile aynı koyu dikey sekme; ikisi ortak kapta (.yan-sekmeler) yan yana, Sepetim solda. */
.yan-sekmeler { position: fixed; right: 0; top: 46%; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mini-sepet-kucuk { display: none; background: var(--kehribar); color: #fff; border: 0; border-radius: 12px 0 0 12px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  padding: 0; cursor: pointer; overflow: hidden; }
.mini-sepet-kucuk span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); padding: 16px 10px; font: 600 .85rem var(--govde); letter-spacing: .03em; }
.mini-sepet-kucuk:hover { background: var(--kehribar-koyu); }   /* 2026-10-02, kullanıcı isteği: "sepet destek hattının altına, kiremit renginde" */

/* 2026-10-02, kullanıcı isteği: "sağ tarafı biraz genişlet, ödemeye geç altında kaç ürünse yazsın, güzel durmuyo böyle" */
.mini-sepet { gap: 12px; padding: 14px 12px; }
.mini-sepet .al-btn { min-height: 42px; padding: 0 8px; font-size: .86rem; white-space: nowrap; }
.mini-urun-yazi { text-align: center; font-size: .82rem; color: var(--soluk); margin-top: -6px; }
.mini-ara strong { font-size: .88rem; padding: 6px 2px; }
.mini-liste img { width: 96px; height: 96px; }
.mini-liste .mini-fiyat { font-size: .85rem; }
.mini-adet { height: 28px; }
.mini-adet button { width: 26px; }
.mini-adet span { min-width: 26px; }
/* ana sayfa şeritlerinde fiyatsız ürün: "Bilgi al" bağlantısı, "Sepete ekle" düğmesiyle aynı görünüm (2026-10-03) */
a.katalog-al-bilgi { background: #fff; color: var(--kehribar-koyu); border: 1px solid var(--kehribar); text-decoration: none; justify-content: center; text-align: center; }
a.katalog-al-bilgi:hover { background: var(--kehribar); color: #fff; }
.vitrin-kart .katalog-al-bilgi { margin-top: auto; }


/* =====================================================================================================
   ANA SAYFA VİTRİN SEKMELERİ (2026-10-02, kullanıcı isteği: "çok satanlar ve yeni gelenler")
   ===================================================================================================== */
.vitrin-sekmeler { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.vitrin-sekme { border: 0; background: none; padding: 4px 0 8px; margin: 0; cursor: pointer; color: var(--soluk);
  font: 600 clamp(1.3rem, 2.4vw, 2.1rem)/1.1 var(--baslik); border-bottom: 3px solid transparent; }
.vitrin-sekme:hover { color: var(--murekkep); }
.vitrin-sekme.etkin { color: var(--murekkep); border-bottom-color: var(--kehribar); }
@media (max-width: 720px) { .vitrin-sekmeler { gap: 4px 16px; } .vitrin-sekme { font-size: 1.15rem; } }

/* =====================================================================================================
   SİTENİN KENDİ ONAY PENCERESİ (2026-10-02, kullanıcı isteği: "sepeti boşalt gibi uyarılar çok kaliteyi bitiriyor, sitenin bir parçası gibi olsun")
   Tarayıcının confirm() penceresi yerine; js/script.js ggOnay().
   ===================================================================================================== */
.onay-arka { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: rgba(35, 32, 29, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s ease; }
.onay-arka.acik { opacity: 1; }
.onay-kutu { width: min(420px, 100%); background: #fff; border-radius: 14px; padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: translateY(10px) scale(.98); transition: transform .16s ease; }
.onay-arka.acik .onay-kutu { transform: none; }
.onay-kutu h2 { margin: 0 0 8px; font: 600 1.2rem/1.3 var(--govde); color: var(--murekkep); }
.onay-kutu p { margin: 0 0 22px; color: var(--soluk); line-height: 1.5; font-size: .95rem; }
.onay-dugmeler { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.onay-dugmeler .al-btn { min-height: 42px; padding: 0 20px; }
.al-btn-tehlike { background: #c2273d; border-color: #c2273d; }
.al-btn-tehlike:hover { background: #a51f33; border-color: #a51f33; }
body.onay-acik { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .onay-arka, .onay-kutu { transition: none; } }
.vitrin-serit[hidden] { display: none !important; }   /* sekmeyle gizlenen şeritler (display:flex hidden'ı eziyordu) */

.yan-sekmeler .destek-hatti, .yan-sekmeler .mini-sepet-kucuk { width: 100%; }
.mini-sepet-kucuk span { padding: 14px 10px; }

/* 2026-10-02, kullanıcı isteği: "sitede hiçbir üründe fiyat yazmasın" — fiyatsız modda sepet bağlantıları/çubuğu görünmez (scripts/website_ayar.py: FIYAT_GOSTER) */
.fiyatsiz .sepet-link, .fiyatsiz .mini-sepet, .fiyatsiz .mini-sepet-kucuk, .fiyatsiz .sepet-bildirim { display: none !important; }
.fiyatsiz .katalog-satinal .katalog-al-bilgi { flex: 1 1 auto; justify-content: center; }

/* 2026-10-02, kullanıcı isteği: "Anasayfa Ürünlerimiz Nasıl Alınır İletişim Tüm Ürünler burası sayfaya göre küçük kaldı" — üst sekme şeridi büyütüldü */
.sekme-ic { min-height: 64px; gap: 10px; }
.sekmeler a { padding: 0 24px; font-size: 1.15rem; border-bottom-width: 4px; }
@media (max-width: 720px) {
  .sekme-ic { min-height: 54px; gap: 2px; }
  .sekmeler a { padding: 0 14px; font-size: 1rem; }
}

/* 2026-10-02, kullanıcı isteği: "sayfanın sağ tarafına instagram logosu koy, tıklayınca bizim sayfaya gitsin, destek hattının üstüne denk gelecek
   şekilde ama yuvarlak logo, sepet ve destek hattı gibi sabit dursun" — .yan-sekmeler kabının ilk çocuğu (Destek Hattı'nın üstü).
   Negatif sol boşluk: yuvarlak, kabın (sekmelerin) genişliğini büyütmesin; translateX ile sağ kenardan hafif ayrık durur. */
.yan-instagram { display: grid; place-items: center; align-self: flex-end; flex: none; width: 46px; height: 46px; margin-left: -10px; border-radius: 50%;
  color: #fff; text-decoration: none; transform: translateX(-6px); box-shadow: 0 4px 16px rgba(0,0,0,.28);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); transition: transform .15s ease; }
.yan-instagram:hover { transform: translateX(-6px) scale(1.08); }
.yan-instagram:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #d6249f; }
.yan-instagram svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yan-instagram svg circle.nokta { fill: currentColor; stroke: none; }
@media (max-width: 720px) { .yan-instagram { width: 42px; height: 42px; } .yan-instagram svg { width: 24px; height: 24px; } }

/* 2026-10-02, kullanıcı isteği: "evet yap" — üst menünün sağında ürün arama kutusu (js/script.js "ürün arama" bloğu) */
.arama { margin-left: auto; align-self: center; position: relative; flex: none; display: flex; align-items: center; }
.arama svg { position: absolute; left: 16px; width: 20px; height: 20px; fill: none; stroke: var(--soluk); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.arama input { width: clamp(260px, 25vw, 420px); height: 46px; padding: 0 18px 0 46px; border: 1.5px solid var(--cizgi); border-radius: 999px; background: var(--buz);
  color: var(--murekkep); font: 500 1.02rem var(--govde); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.arama input::placeholder { color: var(--soluk); opacity: .85; }
.arama input:hover { border-color: #c9b9a2; }
.arama input:focus { outline: none; background: #fff; border-color: var(--kehribar); box-shadow: 0 0 0 4px rgba(194, 101, 63, .16); }
.arama input::-webkit-search-cancel-button { cursor: pointer; }
.arama-satir { padding: 10px 16px; background: var(--beyaz); border-bottom: 1px solid var(--cizgi); }
.arama-satir .arama { width: 100%; margin: 0; }
.arama-satir .arama input { width: 100%; }
.arama-sonuc { position: fixed; z-index: 90; background: #fff; border: 1px solid var(--cizgi); border-radius: 16px; padding: 6px;
  box-shadow: 0 20px 48px rgba(42, 37, 33, .24); max-height: min(82vh, 660px); overflow-y: auto; overscroll-behavior: contain; }
.arama-oge { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; color: var(--murekkep); text-decoration: none; }
.arama-oge img { width: 52px; height: 52px; flex: none; object-fit: contain; background: #fff; border: 1px solid #efe6d9; border-radius: 9px; }
.arama-oge span { min-width: 0; }
.arama-oge strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.arama-oge small { color: var(--soluk); font-size: .8rem; }
.arama-oge:hover, .arama-oge.etkin { background: #f5ede4; }
.arama-bos { margin: 0; padding: 14px 12px; color: var(--soluk); text-align: center; font-size: .92rem; }
.arama-daha { padding: 8px 12px 10px; font-size: .82rem; }
.urun-bulundu { outline: 3px solid var(--kehribar); outline-offset: 6px; border-radius: 14px; transition: outline-color .4s ease; }

/* =====================================================================================================
   KOMPAKT MOBİL (2026-10-02, kullanıcı: "telefonda yazı büyüklüğü gereksiz büyük, kocaman kartlar, tüm siteyi ayarla")
   ≤720px: kök yazı 14,5px (rem'li her şey küçülür), üst çubuk/sekmeler ince, vitrinde iki kart yan yana, kart yazıları küçük.
   ===================================================================================================== */
@media (max-width: 720px) {
  html { font-size: 14.5px; }
  .kap { padding-inline: 14px; }
  .ust-ic { min-height: 52px; gap: 8px; }
  .marka { font-size: 1.12rem; gap: 6px; }
  .marka .ikon { width: 20px; height: 20px; }
  .sepet-link, .fav-link { font-size: .85rem; }
  .sepet-link .ikon, .fav-link svg { width: 21px; height: 21px; }
  .sekme-ic { min-height: 40px; }
  .sekmeler a { font-size: .85rem; padding: 0 10px; }
  .acilis-silik { padding-top: 14px; }
  .acilis-silik h1 { font-size: 1.15rem; margin-bottom: 4px; }
  .daireler a { width: 70px; gap: 6px; }
  .daire { width: 62px; height: 62px; border-width: 2px; }
  .daire-ad { font-size: .72rem; }
  .vitrin { padding-top: 14px; }
  .vitrin-sekme { font-size: .98rem; }
  .vitrin-bas h2, .bolum-bas h1, .bolum-bas h2 { font-size: 1.25rem; }
  .vitrin-serit { gap: 10px; }
  .vitrin-kart { flex: 0 0 calc((100% - 10px) / 2); }
  .vitrin-kart h3, .urunler h3, .katalog-urun h3 { font-size: .82rem; line-height: 1.25; }
  .vitrin-fiyat, .katalog-fiyat { font-size: .88rem; margin-bottom: 6px; }
  .katalog-al { padding: 7px 10px; font-size: .78rem; }
  .bolum { padding-block: 34px; }
  .bolum-bas { margin-bottom: 18px; }
  .dugme { padding: 10px 18px; font-size: .9rem; }
  .urunler, .katalog { gap: 18px 10px; }
  .katalog-aciklama { font-size: .78rem; }
}
@media (max-width: 720px) {   /* kompakt mobil, devam: kategori sayfaları */
  .iz { font-size: .78rem; margin-bottom: 8px; }
  .bolum-bas p { font-size: .82rem; line-height: 1.4; max-width: none; }
  .sirala-satir { margin-bottom: 10px; font-size: .82rem; }
  .sirala-satir select { padding: 6px 10px; font-size: .82rem; }
  .katalog-urun .katalog-al, .katalog-satinal .katalog-al { padding: 7px 8px; font-size: .76rem; border-radius: 8px; }
  .katalog-sor { font-size: .74rem; }
  .katalog-urun h3 { margin-block: 8px 4px; }
  .cerez-bant { padding: 10px 12px; font-size: .78rem; gap: 8px; }
  .cerez-bant button { padding: 7px 14px; font-size: .78rem; }
  .yan-sekmeler { transform: scale(.82); transform-origin: right bottom; }
}

/* Hesabım (uye.html) — Trendyol tarzı: profil başlığı + kısayol kutuları + açılır satırlar (2026-10-02) */
.hs-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.hs-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--kehribar), #d98a5f); color: #fff; font: 700 1.2rem var(--baslik); }
.hs-kim h1 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.hs-kim p { margin: 2px 0 0; color: var(--soluk); font-size: .85rem; word-break: break-all; }
.hs-selam { margin: 6px 0 14px; font-size: .85rem; color: var(--soluk); }
.hs-kisayol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.hs-kisayol a, .hs-kisayol button { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; color: var(--murekkep); font: 500 .76rem var(--govde); text-decoration: none; cursor: pointer; }
.hs-kisayol svg { width: 22px; height: 22px; color: var(--kehribar); }
.hs-satir { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 0 14px; margin-bottom: 8px; }
.hs-satir summary { padding: 14px 0; font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.hs-satir summary::-webkit-details-marker { display: none; }
.hs-satir summary::after { content: "›"; font-size: 1.3rem; line-height: 1; transition: transform .15s; color: var(--soluk); }
.hs-satir[open] summary::after { transform: rotate(90deg); }
.hs-satir .form { padding-bottom: 14px; }
.hs-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uye-kutu #uyeHesap { max-width: 560px; margin-inline: auto; }
.hs-satir .form { padding: 0 0 14px; gap: 10px; background: none; box-shadow: none; border: 0; }
.hs-satir .form label { font-size: .78rem; font-weight: 600; gap: 4px; }
.hs-satir .form input, .hs-satir .form textarea { padding: 9px 11px; font-size: .9rem; border-radius: 9px; }
.hs-satir .tel-on { padding: 0 10px; font-size: .9rem; }
.hs-satir .dugme { padding: 10px 18px; font-size: .88rem; }
@media (max-width: 720px) {   /* kompakt mobil: altbilgi iki sütun, küçük yazı */
  .alt { padding-block: 22px 14px; }
  .alt-sutunlar { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .alt-firma { grid-column: 1 / -1; }
  .alt h3 { font-size: .9rem; margin-bottom: 6px; }
  .alt p, .alt li, .alt a { font-size: .78rem; line-height: 1.35; }
  .alt ul { gap: 4px; }
  .alt li { margin: 0; padding: 2px 0; }
  .alt-alt { font-size: .72rem; padding-top: 10px; gap: 2px; }
  .hs-satir .dugme { width: auto; padding: 9px 22px; }
}

/* =====================================================================================================
   TABLET / AÇIK Z FOLD (2026-10-03, kullanıcı isteği: "Z Fold'un kapakları açık halinde de uyumlu olsun, web için de yap —
   belki müşteri Z Fold'la bakmak ister"). 721–1099 px: telefon düzeni ile geniş ekran düzeni arasındaki aralık.
   - Ürün arama kutusu menü şeridinin sağında ekran dışına taşıyordu → bu aralıkta da telefondaki gibi şeridin altında ayrı satır
     (js/script.js "ürün arama" bloğu aynı eşiği kullanır: 1099 px).
   - Altı sekme (SSS dahil) sığsın diye sekme yazısı/boşluğu biraz küçük.
   ===================================================================================================== */
@media (min-width: 721px) and (max-width: 1099px) {
  .sekme-ic { gap: 2px; min-height: 46px; }
  .sekmeler a { padding: 0 14px; font-size: 1rem; }
  /* üst alan sabit (sticky) olduğundan açık Z Fold'un kısa ekranında fazla yer tutmasın diye sıkı */
  .ust-ic { min-height: 68px; gap: 18px; }
  .arama-satir { padding: 6px 20px; }
  .arama-satir .arama input { height: 40px; }
}

/* 2026-10-03, kullanıcı isteği: "web sitesinde mobil ve zfoldda destek hattı ve instagramı arama çubuğunun sağına al, instagram zaten ikon,
   destek hattını da yuvarlak ikon yap oraya koy" (js/script.js "ürün arama" bloğu ≤1099 px'te ikonları arama satırına koyar) */
.arama-satir { display: flex; align-items: center; gap: 8px; }
.arama-satir .arama { flex: 1 1 auto; min-width: 0; width: auto; }
.arama-ikonlar { display: flex; gap: 8px; flex: none; }
.arama-ikon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; text-decoration: none; flex: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .15s ease; }
.arama-ikon:hover { transform: scale(1.08); }
.arama-ikon:focus-visible { outline: 3px solid var(--kehribar); outline-offset: 2px; }
.arama-ikon svg { width: 24px; height: 24px; }
.arama-ikon.wa { background: #25d366; }
.arama-ikon.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
/* ikonlar arama satırındayken yandaki yüzen Instagram yuvarlağı + dikey Destek Hattı sekmesi gizli (aynı bağlantılar) */
body.arama-ikonlu .yan-instagram, body.arama-ikonlu .destek-hatti { display: none !important; }
@media (max-width: 720px) { .arama-ikon { width: 40px; height: 40px; } .arama-ikon svg { width: 22px; height: 22px; } }

/* 2026-10-03, kullanıcı isteği: "zoom out yaptım anca sığdı onu düzelt" + Trendyol giriş ekranı örneği ("bak girişler bu şekilde olsun güzel olmuş"):
   ortada tek kart, e-posta → Devam Et → Veya → Google; sayfa tek ekrana sığar (uye.html, uye.js) */
#uyeSayfa { padding-block: 28px 48px; }
.uye-tek { max-width: 420px; margin-inline: auto; background: var(--beyaz); border-radius: 14px; padding: 26px 28px 24px; box-shadow: 0 1px 2px rgba(35, 32, 29, .06), 0 10px 30px rgba(35, 32, 29, .07); }
.uye-tek h1 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 4px; }
.uye-aciklama { margin: 0 0 16px; font-size: .86rem; color: var(--soluk); }
.uye-tek .form.uye-adim { background: none; padding: 0; border-radius: 0; gap: 12px; max-width: none; }
.uye-tek .form label { gap: 4px; font-size: .88rem; }
.uye-tek .form input { padding: 10px 12px; }
.uye-tek .dugme { padding: 12px 18px; }
.uye-tek .uye-onay { font-size: .84rem; }
.uye-tek [data-not]:empty { display: none; }              /* boş ileti kutuları boşluk yemesin */
.uye-eposta-satir { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: color-mix(in srgb, var(--buz) 60%, #fff); }
.uye-eposta-satir input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 2px 0 !important; font-weight: 600; box-shadow: none !important; }
.uye-degistir { flex: none; border: 0; background: none; padding: 2px 4px; color: var(--kehribar); font: 600 .84rem var(--govde); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.uye-yeni { font-size: .88rem; color: var(--soluk); margin: 0; }
.uye-google { display: grid; gap: 10px; margin-top: 2px; }
.uye-google[hidden] { display: none; }
.uye-google-dugme { min-height: 44px; display: flex; justify-content: center; }
.uye-google-not { margin: 0; font-size: .76rem; line-height: 1.4; text-align: center; }
.uye-ayrac { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--soluk); font-size: .85rem; }
.uye-ayrac::before, .uye-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }

/* 2026-10-03, kullanıcı isteği: "hesabım simgesinin üstüne fareyle gelince altta sekme çıksın, yazılar kaliteli ve küçük olsun" → "sağ tarafta açılan alanı direkt Trendyol'dan
   kopyalamış gibi olmuşuz": menü markamıza özgü — üst çubuğun koyu rengi (başlığın uzantısı gibi), Hesabım sayfasındaki kutucuk düzeni, baş harfli yuvarlak.
   Üst çubuktaki Giriş yap / Merhaba <ad> bağlantısının altında açılır (js/script.js menuDoldur). Telefonda/dokunmatikte açılmaz (bağlantı doğrudan sayfaya gider). */
.hesap-kap { position: relative; display: inline-flex; margin-left: auto; margin-right: 6px; }
.hesap-kap > .fav-link { margin: 0; }
.hesap-menu { display: none; }
@media (any-hover: hover) and (min-width: 721px) {
  .hesap-menu {
    position: absolute; right: -10px; top: 100%; z-index: 80; width: 252px; padding-top: 8px;   /* üst boşluk fare köprüsü: bağlantıdan kutuya inerken menü kapanmasın */
    display: block; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  }
  .hesap-kap:hover .hesap-menu, .hesap-kap:focus-within .hesap-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .hesap-menu-ic {
    background: var(--sise-derin); color: var(--buz); border-radius: 0 0 16px 16px; padding: 14px;
    box-shadow: 0 16px 36px rgba(35, 32, 29, .32); border-top: 3px solid var(--kehribar);
    font: 500 .8rem/1.3 var(--govde); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .hesap-kisi { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .hesap-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--kehribar); color: #fff; font: 700 1rem var(--baslik); }
  .hesap-kisi-yazi { display: grid; line-height: 1.2; min-width: 0; }
  .hesap-kisi-yazi b { font: 700 .92rem var(--baslik); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hesap-kisi-yazi small { font-size: .72rem; color: rgba(241, 233, 222, .6); }
  .hesap-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hesap-kutu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px 9px;
    border: 1px solid rgba(241, 233, 222, .16); border-radius: 12px; background: rgba(241, 233, 222, .05);
    color: inherit; font: inherit; font-size: .76rem; text-decoration: none; cursor: pointer;
  }
  .hesap-kutu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #e3a07f; }
  .hesap-kutu:hover, .hesap-kutu:focus-visible { background: rgba(241, 233, 222, .12); border-color: rgba(241, 233, 222, .32); }
  .hesap-alt { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 9px 4px 0; border-top: 1px solid rgba(241, 233, 222, .14); color: inherit; font-size: .78rem; text-decoration: none; }
  .hesap-alt:hover { color: #fff; }
  .hesap-misafir { margin: 0 0 12px; font-size: .82rem; line-height: 1.4; color: rgba(241, 233, 222, .82); }
  .hesap-dugme { display: block; padding: 10px 14px; border-radius: 999px; border: 1.5px solid rgba(241, 233, 222, .4); color: var(--buz); font: 600 .84rem/1.2 var(--govde); text-align: center; text-decoration: none; }
  .hesap-dugme + .hesap-dugme { margin-top: 8px; }
  .hesap-dugme-ana { background: var(--kehribar); border-color: var(--kehribar); color: #fff; }
  .hesap-dugme:hover { filter: brightness(1.08); }
}
.uye-tek.ileri .uye-aciklama { display: none; }

/* 2026-10-05, kullanıcı isteği: "sofranızdan kareleri yarı oranında düşür" (sütun sayısı iki katı); alkollü içki resimleri en sonda. */
/* 2026-10-04, kullanıcı isteği: Dosyalar'daki sofra resimleri ana sayfada öne çıksın. Sütunlu (mozaik) galeri, kareler dikey/yatay karışık. */
.galeri { padding: 34px 0 10px; }
.galeri h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; margin: 0 0 6px; }
.galeri-alt { margin: 0 0 18px; color: var(--murekkep); opacity: .75; }
.galeri-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.galeri-izgara li { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.galeri-izgara img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galeri-izgara li:hover img { transform: scale(1.04); }
/* 2026-10-05, kullanıcı: "asimetrik olmuş ama resimler" — mozaik yerine eşit kareler */
@media (min-width: 721px) { .galeri-izgara { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
@media (min-width: 1100px) { .galeri-izgara { grid-template-columns: repeat(8, 1fr); } }
@media (prefers-reduced-motion: reduce) { .galeri-izgara img { transition: none; } }

/* 2026-10-05: ürün seçenekleri penceresi (paket boyu + fiyat) */
.varyant-perde { position: fixed; inset: 0; background: rgba(20,18,16,.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.varyant-kutu { position: relative; background: var(--beyaz, #fff); color: inherit; border-radius: 14px; max-width: 420px; width: 100%; max-height: 90vh; overflow: auto; padding: 20px; text-align: center; }
.varyant-kutu img { max-width: 160px; max-height: 160px; object-fit: contain; }
.varyant-kutu h3 { margin: 10px 0 14px; font-size: 1.05rem; }
.varyant-kutu ul { list-style: none; margin: 0; padding: 0; }
.varyant-kutu li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(128,128,128,.25); }
.varyant-etiket { font-weight: 600; min-width: 56px; text-align: left; }
.varyant-fiyat { flex: 1; text-align: right; }
.varyant-kapat { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: inherit; }

/* 2026-10-05, kullanıcı isteği: "ürün isimleri de asimetrik ortalı olsun" — kart başlıkları ortalı, en çok 2 satır, hizalı */
.vitrin-kart, .katalog-urun { text-align: center; align-items: stretch; }
.vitrin-kart h3, .katalog-urun h3 { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.katalog-satinal { justify-content: center; }

/* 2026-10-05, kullanıcı isteği: "yuvarlakları biraz daha büyütüp aralarını açar mısın, küçük kalmış; yukarıdaki grossengross'u biraz daha daralt" */
.acilis-silik::before { height: 290px; }
.daireler { margin-top: 162px; }
.daireler ul { gap: 22px 36px; }
.daireler a { width: 124px; }
.daire { width: 112px; height: 112px; }
.daire-ad { font-size: .92rem; }
@media (min-width: 1200px) {
  .daireler ul { gap: 0 18px; }
  .daireler li { flex: 0 0 calc((100% - 198px) / 12); max-width: 112px; }
  .daireler a { width: 100%; }
  .daire { width: 100%; max-width: 112px; height: auto; }
  .daire-ad { font-size: .88rem; }
}
@media (min-width: 1500px) {
  .daireler ul { gap: 0 26px; }
  .daireler li { flex: 0 0 calc((100% - 286px) / 12); max-width: 116px; }
  .daire { max-width: 116px; }
}
@media (max-width: 720px) {
  .acilis-silik::before { height: 165px; }
  .daireler { margin-top: 70px; }
  .daireler ul { gap: 20px; }
  .daireler a { width: 92px; }
  .daire { width: 84px; height: 84px; }
  .daire-ad { font-size: .8rem; }
}

/* 2026-10-05, kullanıcı isteği: "yuvarlakların arasını biraz daha aç" */
@media (min-width: 1200px) {
  .daireler ul { gap: 0 22px; }
  .daireler li { flex: 0 0 calc((100% - 242px) / 12); }
}
@media (min-width: 1500px) {
  .daireler ul { gap: 0 36px; }
  .daireler li { flex: 0 0 calc((100% - 396px) / 12); max-width: 112px; }
}
@media (max-width: 720px) { .daireler ul { gap: 28px; } }

/* 2026-10-05, kullanıcı isteği: "seçenekleri gör'de ortala, siteye komple bir bak asimetrik bir şey olmasın" */
.varyant-kutu img { display: block; margin: 0 auto; }
.varyant-kutu li { justify-content: center; }
.varyant-etiket { min-width: 64px; text-align: center; }
.varyant-fiyat { flex: 0 1 auto; min-width: 110px; text-align: center; }
/* galeri: son sıra eksik kalınca sola yığılmasın, ortalansın */
.galeri-izgara { --n: 4; display: flex; flex-wrap: wrap; justify-content: center; }
.galeri-izgara li { flex: 0 0 calc((100% - (var(--n) - 1) * 8px) / var(--n)); }
@media (min-width: 721px) { .galeri-izgara { --n: 6; } .galeri-izgara li { flex-basis: calc((100% - (var(--n) - 1) * 10px) / var(--n)); } }
@media (min-width: 1100px) { .galeri-izgara { --n: 8; } }
.galeri h2, .galeri-alt { text-align: center; }
/* 2026-10-05, kullanıcı: "seçenekleri gör sola yaslı hâlâ" — düğme yazıları ortalı */
.katalog-al, .katalog-sor { justify-content: center; text-align: center; }

/* 2026-10-10, kullanıcı isteği: "Genotodaki gibi bizim sitede de kullanıcı, adına tıklayınca böyle görünsün" — girişli üyede üstteki "Merhaba <ad>" bağlantısına
   tıklayınca açılan sade liste (Genoto sitesindeki .ust-menu ile aynı; js/script.js menuDoldur). Telefonda başlığın altında tam genişlikte açılır. */
.hesap-kap .ust-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; border: 1px solid var(--cizgi); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px -16px rgba(27, 29, 33, .35); z-index: 90; }
.hesap-kap .ust-menu[hidden] { display: none; }
.ust-menu a, .ust-menu button { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 11px 14px; border: 0; background: none; border-radius: 10px; font: inherit; font-size: .95rem; font-weight: 700; color: var(--murekkep); text-decoration: none !important; cursor: pointer; }
.ust-menu a:hover, .ust-menu button:hover, .ust-menu a:focus-visible, .ust-menu button:focus-visible { background: var(--buz, #f1f3f5); }
.ust-menu .ayrac { height: 1px; background: var(--cizgi); margin: 6px 4px; }
@media (max-width: 720px) { .hesap-kap .ust-menu { position: fixed; left: 12px; right: 12px; top: 62px; min-width: 0; } }

/* 2026-10-13, kullanıcı isteği (Karaca örneği): /admin'den yayınlanan ürün kartı — kartın tamamı ürün sayfasına gider (katalog-kapla), altta
   solda fiyat, sağda yuvarlak "+" (sepete ekle); stok yoksa "Tükendi". Üretim: scripts/website_katalog.py yonetim_kart / website_anasayfa.py. */
.katalog-urun-y, .vitrin-kart-y { position: relative; }
.katalog-kapla { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.katalog-urun-y .katalog-gorsel { cursor: pointer; }
.katalog-urun-y .katalog-satinal, .vitrin-kart-y .katalog-satinal { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; position: relative; z-index: 2; text-align: left; }
.katalog-urun-y .katalog-fiyat, .vitrin-kart-y .katalog-fiyat { flex: 1 1 auto; min-width: 0; }
.katalog-urun-y .katalog-fiyat, .vitrin-kart-y .katalog-fiyat { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 1rem; line-height: 1.2; font-weight: 700; }
.katalog-urun-y .katalog-fiyat s, .vitrin-kart-y .katalog-fiyat s { color: var(--soluk); font-weight: 400; font-size: .82em; }
.katalog-satinal .katalog-arti, .katalog-arti { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50% !important; border: 0; background: var(--sise-derin); color: #fff; font: 600 26px/1 var(--govde);
  cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); padding: 0; transition: background .15s, transform .15s; }
.katalog-arti:hover { background: var(--kehribar); }
.katalog-arti:active { transform: scale(.94); }
.katalog-arti.eklendi { background: #1f8f4e; }
.katalog-tukendi { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: #ebedf0; color: var(--soluk); font-size: .78rem; font-weight: 600; }
.vitrin-kart-y h3 a { text-decoration: none; }
@media (max-width: 720px) {
  .katalog-arti { width: 36px; height: 36px; font-size: 22px; }
  .katalog-urun-y .katalog-fiyat, .vitrin-kart-y .katalog-fiyat { font-size: .9rem; }
}