/* ============================================================
   StilOL — Vitrin Tasarımı
   Editoryal / minimal moda dili. SADECE stilol.com içindir.
   Diğer markaların (filamentlazim, 3dakhisar) hiçbir dosyasıyla
   ilişkisi yoktur; bu dosyayı yalnızca StilOL layout'u çağırır.
   ============================================================ */

:root {
  --ink: #121713;
  --forest: #1a211c;
  --paper: #f2efe7;
  --paper-deep: #e8e3d8;
  --gold: #c19a5b;
  --sage: #929b8c;
  --line: rgba(18, 23, 19, 0.18);
  --pad: clamp(24px, 4vw, 68px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/*
 * 🔴 HTML'in `hidden` özniteliği yalnızca tarayıcı varsayılanı olan
 * display:none demektir — sınıfında `display` tanımlı OLAN her öğede sessizce
 * ezilir. Bu dosyada üç ayrı yerde tıklama yutan görünmez katmana yol açtı:
 * çerez bandı (display:flex) kapatıldıktan sonra ekranın alt ~180 pikselini
 * kaplamaya devam ediyor, yüzen sepet düğmesi tam arkasında kalıp
 * basılamıyordu; arama kutusu (display:flex) başlığın altını tutuyordu;
 * paylaş düğmesi (display:flex) desteklenmeyen tarayıcıda da görünüyordu.
 * Kural artık genel — `hidden` konan her öğe gerçekten gizlenir.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea {
  font-family: 'Geist', system-ui, -apple-system, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Üst şerit ─────────────────────────────────────────── */
.topline {
  height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #eee9dc;
  font-size: 9px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
}

/* ── Başlık / navigasyon ───────────────────────────────── */
.site-header {
  position: relative; z-index: 3; height: 88px; padding-inline: var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.24);
}
/* Ana sayfa dışındaki sayfalarda başlık kağıt zemin üstünde durur */
.site-header--solid {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.primary-nav, .header-tools {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 42px);
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
}
.header-tools { justify-content: flex-end; gap: 24px; }
.primary-nav a, .header-tools a { transition: opacity .25s ease; }
.primary-nav a:hover, .header-tools a:hover { opacity: .55; }

/* ── Mega menü ─────────────────────────────────────────────
   Alt koleksiyonlar zaten tanımlıydı, menüde görünmüyordu.
   Hover ve klavye odağıyla açılır; JS gerekmez. */
.nav-dal { position: relative; }
.mega {
  /*
   * Başlığın SOL kenarına hizalanır. Ortalamak (left:50% + translateX(-50%))
   * ilk menü öğesinde paneli ekranın dışına taşıyordu (sol: -58px).
   */
  position: absolute; top: 100%; left: 0; transform: translateY(6px);
  /*
   * 260px iki sütun için dardı: "Dekoratif Tabak & Kase" gibi uzun adlar
   * (nowrap olduğu için) komşu sütunun üstüne biniyordu — Dekorasyon
   * menüsünde yazılar iç içe geçiyordu. Genişlik artık içeriğe göre büyür.
   */
  min-width: max-content; padding-top: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /*
   * visibility ayrık (discrete) bir özelliktir; süreli geçişe sokulursa
   * açılış da gecikir. Doğrusu: AÇILIRKEN anında görünür olsun, KAPANIRKEN
   * opacity sönmesi bitene kadar (0.2s) görünür kalsın.
   */
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 60;
}
.nav-dal:hover .mega,
.nav-dal:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition-delay: 0s;
}
/* Son başlıkta panel sağa taşmasın diye sağ kenara hizalanır */
.primary-nav .nav-dal:last-child .mega { left: auto; right: 0; }
/*
 * 🔴 Arkaplan `var(--bg)` yazıyordu — bu dosyada böyle bir değişken YOK
 * (:root'ta --paper var). Tanımsız değişken CSS'te kuralı geçersiz kılar,
 * panel tamamen şeffaf kalıyor ve altındaki sayfa yazıların arasından
 * görünüyordu: menü hiç okunmuyordu.
 */
.mega-ic {
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 22px 26px; box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
/* Sütunlar içeriğe göre genişler; uzun kategori adları komşuya binmez.
   Panelin toplam genişliği ekranı zorlamasın diye üst sınır konur. */
.mega-liste {
  display: grid; grid-template-columns: repeat(2, max-content); gap: 11px 34px;
  max-width: min(560px, 80vw);
}
.mega-liste a {
  font-size: 12.5px; letter-spacing: .02em; color: #4a504a;
  white-space: nowrap; opacity: 1;
}
.mega-liste a:hover { color: #16181a; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.mega-tumu {
  display: block; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: .18em; color: #7f877f; opacity: 1;
}
.mega-tumu:hover { color: #16181a; opacity: 1; }

/* Koyu (şeffaf) başlıkta mega yine açık zeminde durur — okunurluk için */
.site-header:not(.site-header--solid) .mega-liste a { color: #4a504a; }

/* Mobil menüde alt koleksiyonlar girintili liste olarak */
.mobil-alt { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 6px 16px; }
.mobil-alt a { font-size: 12px; letter-spacing: .04em; color: #7f877f; }
.logo { font-size: 29px; font-weight: 650; letter-spacing: -.07em; }
.logo span, .footer-logo span { color: var(--gold); }

/* Görsel logo — yazı logonun yerini alır, dikeyde ortalanır */
.logo--img { display: inline-flex; align-items: center; line-height: 0; }
.logo--img img { height: 54px; width: auto; display: block; }
.site-header--solid .logo--img img { height: 46px; }

/*
 * Hero fotoğrafının üstünde logo ince ve soluk kalıyordu: ince harfler açık
 * renkli görsel alanlarına denk gelince kayboluyordu. İki katmanlı çözüm:
 *  1) başlığın arkasına yukarıdan aşağı sönen ince bir koyu perde (aşağıdaki
 *     .site-header::before) — logo ve menü sabit bir zemine oturur,
 *  2) logonun kendisine daha belirgin bir gölge.
 * İkisi birlikte fotoğrafı kapatmadan okunurluk veriyor.
 */
.site-header:not(.site-header--solid) .logo--img img {
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.35));
}
.site-header:not(.site-header--solid)::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 190%;
  background: linear-gradient(to bottom, rgba(6,9,7,.55) 0%, rgba(6,9,7,.28) 45%, transparent 100%);
  pointer-events: none; z-index: -1;
}
/* Yazı tabanlı logo da aynı perdenin üstünde okunur kalsın */
.site-header:not(.site-header--solid) .logo { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.footer-logo--img { line-height: 0; }
.footer-logo--img img { height: 54px; width: auto; display: block; }
@media (max-width: 640px) {
  .logo--img img, .site-header--solid .logo--img img { height: 36px; }
  .footer-logo--img img { height: 42px; }
}
.mobile-menu { display: none; }

/* ── Kahraman (hero) ───────────────────────────────────── */
.hero {
  position: relative; min-height: 700px; overflow: hidden;
  color: #fff; background: var(--forest); isolation: isolate;
}
.hero::before {
  position: absolute; z-index: -2; inset: 0; content: "";
  background:
    linear-gradient(90deg, rgba(9,13,10,.92) 0%, rgba(12,15,12,.64) 42%, rgba(10,12,10,.12) 76%),
    linear-gradient(180deg, rgba(0,0,0,.28), transparent 32%, rgba(0,0,0,.26)),
    var(--hero-image, none) center 45% / cover no-repeat;
  background-color: var(--forest);
  animation: hero-settle 1.6s ease-out both;
}
.hero::after {
  position: absolute; z-index: -1; inset: 0; content: ""; opacity: .11; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 100% 100%, 25% 100%;
}
.hero-copy { position: relative; z-index: 2; width: min(880px, 70%); padding: 142px var(--pad) 80px; }
.eyebrow, .section-kicker {
  margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 16px; color: #ddd7c9; }
.eyebrow::before { width: 46px; height: 1px; content: ""; background: var(--gold); }
.hero h1 {
  max-width: 840px; margin: 34px 0 28px;
  font-size: clamp(62px, 6.8vw, 108px); font-weight: 520; letter-spacing: -.075em; line-height: .91;
}
.hero-subtitle { margin: 0 0 40px; color: #ddd8ce; font-size: 12px; letter-spacing: .14em; }
.outline-button {
  width: 236px; height: 56px; padding-inline: 20px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid rgba(255,255,255,.65);
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  transition: background .25s ease, color .25s ease;
}
.outline-button:hover { color: var(--ink); background: #fff; }
.hero-index { position: absolute; right: var(--pad); bottom: 52px; z-index: 2; display: flex; align-items: end; gap: 14px; }
.hero-index strong { font-size: 38px; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.hero-index span { padding-bottom: 4px; color: #d7d2c7; font-size: 9px; letter-spacing: .2em; }

/* ── Güven şeridi ──────────────────────────────────────── */
.proof-strip {
  min-height: 78px; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
}
.proof-strip strong { font-weight: 650; }
.proof-strip span { color: #6c736d; }

/* ── Koleksiyon kartları ───────────────────────────────── */
.collection-grid { display: grid; grid-template-columns: 1.36fr .92fr .92fr; gap: 1px; background: var(--line); }
.collection-card {
  position: relative; height: 440px; padding: 34px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; background-color: #7b8078; background-position: center; background-size: cover;
  transition: background-size .8s ease;
}
.collection-card::before {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(180deg, rgba(10,14,11,.10) 30%, rgba(10,14,11,.62));
}
.collection-card > * { position: relative; z-index: 1; }
.collection-card::after {
  position: absolute; inset: 0; content: ""; border: 1px solid transparent;
  transition: border-color .25s ease; z-index: 1;
}
.collection-card:hover::after { border-color: rgba(255,255,255,.58); }
.collection-number { margin-bottom: 12px; color: #e7e1d5; font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.collection-title { font-size: 40px; font-weight: 520; letter-spacing: -.055em; line-height: 1; }
.collection-subtitle { margin-top: 9px; color: #e1ddd3; font-size: 11px; letter-spacing: .11em; }
.circle-arrow {
  position: absolute; right: 28px; bottom: 28px; width: 42px; height: 42px; z-index: 2;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.62); border-radius: 50%;
  font-size: 18px; transition: background .25s ease, color .25s ease;
}
.collection-card:hover .circle-arrow { color: var(--ink); background: #fff; }

/* ── Manifesto ─────────────────────────────────────────── */
.manifesto {
  min-height: 660px; padding-left: var(--pad);
  display: grid; grid-template-columns: .28fr .9fr 1.2fr; align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.manifesto-number { padding-top: 86px; color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .16em; }
.manifesto-copy { max-width: 560px; padding: 86px 64px 70px 0; display: flex; flex-direction: column; justify-content: center; }
.section-kicker { color: #797f78; }
.manifesto h2, .section-heading h2, .process-title h2, .newsletter h2 {
  margin: 22px 0 26px; font-size: clamp(42px, 4vw, 68px); font-weight: 520; letter-spacing: -.065em; line-height: 1;
}
.manifesto-copy > p:not(.section-kicker) { max-width: 470px; margin: 0 0 36px; color: #626861; font-size: 16px; line-height: 1.75; }
.text-link {
  width: fit-content; padding-bottom: 9px; display: flex; gap: 34px;
  border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 650; letter-spacing: .18em;
}
.manifesto-image {
  min-height: 560px;
  background:
    linear-gradient(180deg, rgba(15,20,16,.08), rgba(15,20,16,.32)),
    var(--manifesto-image, none) center / cover no-repeat;
  background-color: #b9b3a6;
}

/* ── Ürünler ───────────────────────────────────────────── */
.products-section { padding: 110px var(--pad) 124px; }
.section-heading { margin-bottom: 52px; display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.section-heading h2 { margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.product-card { min-width: 0; }
.product-image { position: relative; aspect-ratio: .77; overflow: hidden; display: block; background: #d8d4ca; }
.product-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.product-image:hover img { transform: scale(1.035); }
.product-image > span {
  position: absolute; top: 14px; left: 14px; padding: 8px 10px;
  color: #fff; background: var(--ink); font-size: 8px; font-weight: 650; letter-spacing: .2em; z-index: 1;
}
.product-info { padding-top: 18px; display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.product-info > div { min-width: 0; }   /* uzun başlık fiyatı dışarı itmesin */
.product-info p { margin: 0 0 7px; color: #747a73; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.product-info h3 { margin: 0; font-size: 15px; font-weight: 520; line-height: 1.35; }
.product-info strong { flex: none; font-size: 13px; font-weight: 650; white-space: nowrap; }
.product-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #9a968c; font-size: 10px; letter-spacing: .2em; }

/* ── Favoriler sayfası ─────────────────────────────────── */
.favori-listesi { display: flex; flex-direction: column; gap: 2px; }
.favori-satir {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.favori-satir:last-child { border-bottom: 0; }
.favori-satir.is-tukendi .favori-gorsel img { opacity: .45; }
.favori-gorsel {
  position: relative; flex: 0 0 auto; width: 78px; aspect-ratio: .78;
  background: #f2f2ef; overflow: hidden; border-radius: 3px; display: block;
}
.favori-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.favori-gorsel > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 8px; letter-spacing: .14em; color: #9a968c; }
.favori-gorsel em {
  position: absolute; left: 6px; top: 6px; font-style: normal;
  background: rgba(22,24,26,.82); color: #fff; font-size: 8px; letter-spacing: .12em; padding: 3px 6px; border-radius: 2px;
}
.favori-bilgi { flex: 1; min-width: 0; }
.favori-kategori { margin: 0 0 5px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #8a908a; }
.favori-bilgi h3 { margin: 0 0 6px; font-size: 14px; font-weight: 520; line-height: 1.35; }
.favori-bilgi strong { font-size: 13px; font-weight: 650; }
.favori-islem { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.favori-kaldir {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); background: transparent; border-radius: 50%;
  color: #8a908a; cursor: pointer; padding: 0; transition: color .18s ease, border-color .18s ease;
}
.favori-kaldir:hover { color: #8d3f35; border-color: #e0c9c4; }
.favori-kaldir svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .favori-satir { flex-wrap: wrap; }
  .favori-islem { width: 100%; justify-content: space-between; }
}

/* ── Sipariş takip formu ───────────────────────────────── */
.takip-form { max-width: 460px; margin-top: 30px; }
.takip-hata {
  margin: 16px 0 0; padding: 11px 14px; font-size: 12.5px; line-height: 1.6;
  color: #8d3f35; background: #fbf0ee; border: 1px solid #e8d5d1; border-radius: 3px;
}

/* ── Favori düğmesi (ürün kartı) ───────────────────────────
   Görselin sağ üstünde durur; yalnızca kart üstüne gelince ya da
   zaten favorideyse görünür — sakin katalog düzenini bozmasın. */
.product-card { position: relative; }
.kart-favori-form { position: absolute; top: 12px; right: 12px; z-index: 3; margin: 0; }
.kart-favori {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.86); color: #6b716b;
  opacity: 0; transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease, color .18s ease, background .18s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.product-card:hover .kart-favori,
.kart-favori:focus-visible,
.kart-favori.is-favori { opacity: 1; transform: scale(1); }
.kart-favori svg { width: 16px; height: 16px; fill: none; }
.kart-favori:hover { background: #fff; color: #8d3f35; }
.kart-favori.is-favori { color: #8d3f35; }
.kart-favori.is-favori svg { fill: currentColor; }

/* Dokunmatikte hover yok — düğme hep görünür ve parmakla basılacak boyutta.
   32px dokunma hedefi için küçüktü; telefonda 44px alt sınırdır. */
@media (hover: none) {
  .kart-favori { opacity: 1; transform: scale(1); }
}
@media (max-width: 860px) {
  .kart-favori-form { top: 8px; right: 8px; }
  .kart-favori { width: 44px; height: 44px; }
  .kart-favori svg { width: 19px; height: 19px; }
}

/* ── Telefonda dokunma hedefleri ───────────────────────────
   Müşterilerin çoğu telefondan geliyor. Aşağıdaki bağlantılar
   12–16 piksel yüksekliğindeydi; parmakla isabet ettirmek zordu.
   Yazı boyutları korunuyor, yalnızca basılabilir alan büyütülüyor. */
@media (max-width: 860px) {
  /* Yapışkan mini bar: ARA ve ÇANTA en sık kullanılan iki bağlantı */
  .mini-bar a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 6px; }

  /* Arama kutusunun gönder/kapat düğmeleri */
  .ara-kutu button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }

  /* Alt bilgi bağlantıları — sık dokunulan yasal ve destek sayfaları */
  .footer-links a,
  .footer-kanal a { min-height: 40px; display: flex; align-items: center; }
  .footer-links div { gap: 2px; }

  /* Kırıntı yolu ve bülten altı küçük bağlantılar */
  .breadcrumb a { min-height: 34px; display: inline-flex; align-items: center; }
}

.favori-baglanti { white-space: nowrap; }

/* ── Kartta beden / renk özeti ─────────────────────────────
   Ziyaretçi ürüne girmeden "bedenim var mı" sorusunu yanıtlasın.
   Yalnızca stokta olan seçenekler basılır. */
.kart-secenek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.kart-renkler { display: inline-flex; align-items: center; gap: 4px; }
.kart-renkler i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.16); display: block;
}
.kart-renkler em { font-style: normal; font-size: 9.5px; color: #8a908a; margin-left: 2px; }
.kart-bedenler {
  font-size: 10px; letter-spacing: .1em; color: #8a908a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Süreç (koyu bölüm) ────────────────────────────────── */
.process-section { padding: 120px var(--pad); display: grid; grid-template-columns: .9fr 1.4fr; gap: 8vw; color: #fff; background: var(--ink); }
.process-title { max-width: 540px; }
.process-title .section-kicker { color: var(--sage); }
.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li {
  min-height: 132px; padding: 34px 0; display: grid; grid-template-columns: 50px .55fr 1fr;
  gap: 30px; align-items: start; border-top: 1px solid rgba(255,255,255,.22);
}
.process-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.process-list span { color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.process-list strong { font-size: 19px; font-weight: 520; }
.process-list p { margin: 0; color: #abb0aa; font-size: 14px; line-height: 1.7; }

/* ── Bülten ────────────────────────────────────────────── */
.newsletter { padding: 92px var(--pad); display: grid; grid-template-columns: 1fr .9fr; gap: 9vw; align-items: end; background: var(--paper-deep); }
.newsletter h2 { max-width: 720px; margin-bottom: 0; }
.newsletter-form { display: flex; border-bottom: 1px solid var(--ink); }
.newsletter-form input {
  width: 100%; height: 58px; padding: 0; border: 0; outline: 0;
  color: var(--ink); background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .16em;
}
.newsletter-form input::placeholder { color: #6f746e; }
.newsletter-form button { width: 58px; flex: none; border: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: 22px; }

/* ── Alt bilgi ─────────────────────────────────────────── */
footer { padding: 90px var(--pad) 34px; color: #e7e2d8; background: #0b0f0c; }
.footer-logo { display: inline-block; margin-bottom: 72px; font-size: 36px; font-weight: 650; letter-spacing: -.07em; }
/* ── Ürün sayfası: görsel notu ve paylaşım ──────────────── */
.gorsel-notu {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 22px 0 0; padding: 13px 15px;
  background: #f7f6f2; border: 1px solid var(--line); border-radius: 4px;
  font-size: 11.5px; line-height: 1.65; color: #6b716b;
}
.gorsel-notu svg { width: 15px; height: 15px; flex: none; margin-top: 1px; opacity: .65; }
.gorsel-notu strong { color: #4a504a; font-weight: 600; }

/* Telefonda tek büyük paylaş düğmesi — cihazın kendi menüsünü açar */
.pdp-paylas-mobil {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; margin-top: 22px;
  border: 1px solid var(--ink); background: transparent; border-radius: 3px;
  font-size: 11px; letter-spacing: .18em; color: var(--ink);
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.pdp-paylas-mobil:hover { background: var(--ink); color: #fff; }
.pdp-paylas-mobil svg { width: 17px; height: 17px; }

.pdp-paylas { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
/* Cihaz paylaşımı varken ikon şeridi ikincil kalır */
.pdp-paylas--ikincil { margin-top: 14px; opacity: .8; }
@media (max-width: 640px) { .pdp-paylas--ikincil { display: none; } }
.pdp-paylas-baslik { font-size: 9px; letter-spacing: .2em; color: #8a908a; margin-right: 4px; }
.pdp-paylas a, .pdp-paylas button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: #6b716b; cursor: pointer; padding: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pdp-paylas a:hover, .pdp-paylas button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdp-paylas svg { width: 15px; height: 15px; }
.pdp-kopyala.kopyalandi { background: #3d6b45; color: #fff; border-color: #3d6b45; }

/* ── Beden tablosu ─────────────────────────────────────────
   Dar ekranda tablo kendi içinde kayar, sayfa taşmaz. */
.beden-tablo-sar { overflow-x: auto; margin: 18px 0 30px; }
.beden-tablo { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.beden-tablo th {
  text-align: left; padding: 11px 14px; background: #f2f2ef;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #5f655f; font-weight: 600; white-space: nowrap;
}
.beden-tablo td { padding: 11px 14px; border-top: 1px solid var(--line); color: #2f332f; white-space: nowrap; }
.beden-tablo tbody tr:hover { background: #faf9f6; }
.beden-tablo td:first-child { font-weight: 600; }

/* ── Site haritası ─────────────────────────────────────────  */
.harita { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; margin-top: 34px; }
.harita-blok:first-child { grid-column: 1 / -1; }
.harita-blok h2 {
  margin: 0 0 18px; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: #7f877f; font-weight: 600;
}
.harita-dal { display: inline-block; vertical-align: top; min-width: 190px; margin: 0 30px 26px 0; }
.harita-ust { display: block; font-size: 14px; color: #2f332f; margin-bottom: 9px; }
.harita-ust:hover { text-decoration: underline; text-underline-offset: 4px; }
.harita-alt { display: flex; flex-direction: column; gap: 7px; }
.harita-alt a { font-size: 12.5px; color: #767c76; }
.harita-alt a:hover { color: #2f332f; }
.harita-liste { display: flex; flex-direction: column; gap: 10px; }
.harita-liste a { font-size: 13px; color: #5f655f; width: fit-content; }
.harita-liste a:hover { color: #2f332f; text-decoration: underline; text-underline-offset: 4px; }

/* ── Güvence şeridi ────────────────────────────────────────
   Alt bilginin hemen üstünde, açık zeminde. Rakiplerdeki gibi
   renkli rozetler değil; StilOL'ün sessiz diline uygun tipografi. */
.guvence-serit {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Aynı tanımsız değişken hatası burada da vardı (bkz. .mega-ic): hücre
   arkaplanı boş kalınca şeridin altındaki çizgi rengi sızıyordu. */
.guvence {
  background: var(--paper); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 5px; text-align: center;
}
.guvence-ad  { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #2f332f; }
.guvence-not { font-size: 11.5px; color: #7f877f; letter-spacing: .04em; }

/* Sayfa içi kullanımda biraz daha nefes alır, kenarlarda çizgi olmaz */
.guvence-serit--vurgulu { border: 0; background: var(--line); margin: 0; }
.guvence-serit--vurgulu .guvence { padding: 34px 22px; }

/* Telefonda dört sütun sıkışıyordu: iki sütun, sonra tek sütun */
@media (max-width: 860px) {
  .guvence-serit { grid-template-columns: 1fr 1fr; }
  .guvence-serit--vurgulu .guvence { padding: 24px 16px; }
}
@media (max-width: 420px) {
  .guvence-serit { grid-template-columns: 1fr; }
  .guvence { padding: 16px 18px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; }
  .guvence-not { text-align: right; }
}

/* Dört sütun tek satırda kalmalı: minmax genişti, yasal sütunu alta kayıyordu. */
.footer-links { padding-bottom: 72px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; }

/* ── İletişim ve sosyal ──────────────────────────────────── */
.footer-iletisim {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,.13);
}
.footer-kanal { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-kanal a { color: #d2cec5; font-size: 12.5px; letter-spacing: .04em; }
.footer-kanal a:hover { color: #fff; }

.footer-sosyal { display: flex; gap: 14px; }
.footer-sosyal a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  color: #d2cec5; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.footer-sosyal a:hover { background: #d2cec5; color: #16181a; border-color: #d2cec5; }
.footer-sosyal svg { width: 16px; height: 16px; }

/* ── Ödeme yöntemleri ────────────────────────────────────── */
.footer-odeme {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.13);
}
.odeme-not { font-size: 9px; letter-spacing: .2em; color: #717871; }
.odeme-ikonlar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kart {
  height: 26px; min-width: 46px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
.kart--visa { color: #1a1f71; font-style: italic; }
.kart--troy { color: #00a1e0; text-transform: lowercase; letter-spacing: .02em; }
.kart--3d   { color: #444; font-size: 8px; letter-spacing: .1em; }
.kart--taksit { color: #5a5a5a; font-size: 8px; letter-spacing: .12em; }
.kart--havale { color: #2f5d7d; font-size: 8px; letter-spacing: .1em; }
.kart--kapida { color: #8a5a1f; font-size: 8px; letter-spacing: .1em; }
.kart--ssl  { color: #2f7d4f; gap: 4px; font-size: 8.5px; letter-spacing: .1em; }
.kart--ssl svg { width: 11px; height: 11px; }
/* Mastercard: iki üst üste binen daire */
.kart--mc { gap: 0; padding: 0 12px; }
.kart--mc i { width: 15px; height: 15px; border-radius: 50%; display: block; }
.kart--mc i:first-child { background: #eb001b; }
.kart--mc i:last-child  { background: #f79e1b; margin-left: -6px; opacity: .9; }
.footer-links div { display: flex; flex-direction: column; gap: 14px; }
.footer-links strong { margin-bottom: 8px; color: #7f877f; font-size: 9px; letter-spacing: .2em; }
.footer-links a { width: fit-content; color: #d2cec5; font-size: 13px; }
/* Üç sütunlu ızgara: ortadaki konum gerçekten ORTALANIR.
   space-between ile ortadaki öğe yan blokların genişliğine göre kayıyordu. */
.footer-bottom {
  padding-top: 26px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 18px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: #717871; font-size: 9px; letter-spacing: .18em;
}
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer-bottom > :last-child { justify-self: end; text-align: right; }
/* Altyapı imzası — telif ve konum satırından bir tık daha silik durur. */
.footer-imza { color: #575e57; }

@keyframes hero-settle { from { opacity: .72; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}

/* ── Duyarlı ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .primary-nav, .header-tools { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  /* ── Mobil menü: tam ekran çekmece ──────────────────────
     Eskiden başlığın altına açılan 220px'lik bir kutuydu; satırlar
     13px yüksekliğindeydi, parmakla basmak zordu. */
  .mobile-menu { grid-column: 2; display: block; }
  .mobile-menu summary {
    cursor: pointer; list-style: none;
    display: inline-flex; align-items: center; gap: 9px;
    /* Dokunma hedefi: 44px yükseklik erişilebilirlik alt sınırı */
    min-height: 44px; padding: 0 2px;
    font-size: 10px; letter-spacing: .18em;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobil-ikon { display: inline-grid; gap: 4px; width: 18px; }
  .mobil-ikon i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; }
  .mobile-menu[open] .mobil-ikon i:nth-child(2) { opacity: .35; }

  .mobil-panel {
    position: fixed; inset: 0; z-index: 90;
    background: var(--paper); color: var(--ink);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 22px calc(34px + env(safe-area-inset-bottom));
    animation: mobil-ac .22s ease;
  }
  @keyframes mobil-ac { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  .mobil-ust {
    position: sticky; top: 0; z-index: 2; background: var(--paper);
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 0 16px; border-bottom: 1px solid var(--line);
  }
  .mobil-baslik { font-size: 9px; letter-spacing: .22em; color: #7f877f; }
  .mobil-kapat {
    width: 44px; height: 44px; margin-right: -10px;
    border: 0; background: transparent; font-size: 20px; line-height: 1;
    color: #4a504a; cursor: pointer;
  }

  .mobil-nav { display: flex; flex-direction: column; }
  .mobil-kok,
  .mobil-dal > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; padding: 4px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px; letter-spacing: .06em; color: var(--ink);
    cursor: pointer; list-style: none;
  }
  .mobil-dal > summary::-webkit-details-marker { display: none; }
  .mobil-dal > summary svg { width: 17px; height: 17px; transition: transform .2s ease; opacity: .5; }
  .mobil-dal[open] > summary svg { transform: rotate(180deg); }

  .mobil-alt { display: flex; flex-direction: column; padding: 4px 0 14px 14px; }
  .mobil-alt a {
    min-height: 46px; display: flex; align-items: center;
    font-size: 13.5px; color: #5f655f; letter-spacing: .02em;
  }
  .mobil-tumu { color: #8d3f35 !important; font-size: 12.5px !important; }

  .mobil-ayrac { height: 1px; background: var(--line); margin: 22px 0 6px; }
  .mobil-nav--ikincil a {
    min-height: 48px; display: flex; align-items: center;
    font-size: 13.5px; color: #5f655f; border-bottom: 0;
  }
  .hero-copy { width: 100%; }
  .collection-grid { grid-template-columns: 1fr 1fr; }
  .collection-card:first-child { grid-column: 1 / -1; }
  .manifesto { grid-template-columns: 80px 1fr; }
  .manifesto-image { min-height: 480px; grid-column: 1 / -1; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 52px; }
  .process-section, .newsletter { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 640px) {
  .topline { height: 28px; font-size: 8px; }
  .site-header { height: 72px; }
  .hero { min-height: 620px; }
  .hero-copy { padding-top: 132px; }
  .hero h1 { max-width: 500px; font-size: clamp(55px, 16vw, 78px); }
  .hero-subtitle { max-width: 260px; line-height: 1.7; }
  .hero-index { display: none; }
  .proof-strip { padding-block: 22px; align-items: flex-start; flex-direction: column; gap: 10px; line-height: 1.6; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card:first-child { grid-column: auto; }
  .collection-card { height: 380px; }
  .manifesto { min-height: 0; padding-left: var(--pad); grid-template-columns: 1fr; }
  .manifesto-number { padding-top: 72px; }
  .manifesto-copy { padding: 34px var(--pad) 72px 0; }
  .manifesto-image { min-height: 420px; margin-left: calc(var(--pad) * -1); grid-column: auto; }
  .products-section { padding-block: 82px; }
  /* Dar ekranda başlık ve fiyat yan yana sığmıyor → alt alta */
  .product-info { flex-direction: column; gap: 6px; }
  .product-info strong { margin-top: 2px; }
  .process-section { padding-block: 82px; }
  .process-list li { grid-template-columns: 34px 1fr; gap: 14px; }
  .process-list p { grid-column: 2; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .footer-bottom > :first-child,
  .footer-bottom > :nth-child(2),
  .footer-bottom > :last-child { justify-self: center; text-align: center; }
  .guvence-serit { grid-template-columns: 1fr 1fr; }
  .harita { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .harita-dal { min-width: 0; width: 100%; margin-right: 0; }
  .guvence { padding: 20px 14px; }
  .footer-iletisim { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-kanal { gap: 16px; }
  .footer-odeme { gap: 12px; }
}

/* ============================================================
   İÇ SAYFALAR
   ============================================================ */

.page-wrap { padding: 54px var(--pad) 96px; }
.page-wrap--narrow { max-width: 860px; margin-inline: auto; }

/* Kırıntı yolu */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8a908a; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span.sep { opacity: .5; }
.breadcrumb strong { font-weight: 650; color: var(--ink); }

/* Sayfa başlığı */
.page-head { margin: 26px 0 40px; display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.page-head h1 { margin: 10px 0 0; font-size: clamp(38px, 4.4vw, 66px); font-weight: 520; letter-spacing: -.06em; line-height: 1; }
.page-head .count { color: #797f78; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.page-lead { max-width: 640px; margin: 16px 0 0; color: #626861; font-size: 15px; line-height: 1.8; }

/* Filtre / sıralama çubuğu */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
              padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 16px; border: 1px solid var(--line); font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
        text-transform: uppercase; transition: all .2s ease; white-space: nowrap; }
.chip:hover { border-color: var(--ink); }
.chip.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.select-plain { padding: 9px 30px 9px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink);
                font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
                appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
                background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* Özellik filtre paneli (cinsiyet, kumaş ...) */
.filter-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin: -18px 0 36px; }
.filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-label { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: #8a908a; white-space: nowrap; }
.chip--filter { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; text-transform: none;
                font-size: 12px; letter-spacing: .02em; font-weight: 600; }
.chip-count { font-size: 9.5px; font-weight: 700; color: #9aa098; }
.chip--filter.is-active .chip-count { color: rgba(242,239,231,.7); }
.filter-clear { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: #a34a3f; text-decoration: underline; white-space: nowrap; }

/* Katalog AJAX geçişi — sayfa yenilenmeden ürünler yumuşakça değişir */
#katalog { transition: opacity .18s ease; }
#katalog.katalog-yukleniyor { opacity: .35; pointer-events: none; }
#katalog .product-card { animation: urun-belir .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes urun-belir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #katalog .product-card { animation: none; }
  #katalog { transition: none; }
}

/* Boş durum */
.empty-state { padding: 90px 20px; text-align: center; border: 1px solid var(--line); }
.empty-state p { margin: 0 0 22px; color: #767c76; font-size: 14px; }

/* Sayfalama */
.pagination-wrap { margin-top: 64px; display: flex; justify-content: center; }
.pagination-wrap nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pagination-wrap a, .pagination-wrap span {
  min-width: 40px; height: 40px; padding-inline: 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 11px; font-weight: 600;
}
.pagination-wrap a:hover { border-color: var(--ink); }
.pagination-wrap [aria-current] , .pagination-wrap .active span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pagination-wrap .disabled span { opacity: .35; }
.pagination-wrap svg { width: 12px; height: 12px; }

/* ── Ürün detay ─────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 82px); align-items: start; }
.pdp-gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; }
.pdp-main { aspect-ratio: .82; overflow: hidden; background: #ded9cf; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pdp-thumb { aspect-ratio: 1; overflow: hidden; background: #ded9cf; border: 1px solid transparent; cursor: pointer; padding: 0; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active { border-color: var(--ink); }

.pdp-info h1 { margin: 14px 0 0; font-size: clamp(28px, 3vw, 42px); font-weight: 520; letter-spacing: -.045em; line-height: 1.08; }
.pdp-kicker { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #7d837c; }
.pdp-price { margin: 22px 0 0; display: flex; align-items: baseline; gap: 14px; }
.pdp-price strong { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.pdp-price del { color: #9aa098; font-size: 15px; }
.pdp-desc { margin: 26px 0 0; color: #5f655f; font-size: 15px; line-height: 1.85; }
.pdp-desc p { margin: 0 0 12px; }

.pdp-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.pdp-block-label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px;
                   font-size: 9.5px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
.pdp-block-label .hint { font-weight: 400; letter-spacing: .1em; color: #8a908a; text-transform: none; }

/* Beden / renk seçimi */
.opt-row { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
  min-width: 56px; padding: 13px 16px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ink); transition: all .18s ease; text-align: center;
}
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.opt:disabled { opacity: .34; cursor: not-allowed; text-decoration: line-through; }
.opt-swatch { width: 42px; height: 42px; min-width: 0; padding: 0; border-radius: 50%; position: relative; }
.opt-swatch.is-active { background: transparent; box-shadow: 0 0 0 1px var(--paper) inset, 0 0 0 2px var(--ink); border-color: transparent; }

/* Adet + sepete ekle */
.qty-box { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty-box button { width: 46px; height: 54px; border: 0; background: transparent; cursor: pointer; font-size: 17px; color: var(--ink); }
.qty-box input { width: 50px; height: 54px; border: 0; outline: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.buy-row { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-solid {
  flex: 1; min-width: 200px; height: 56px; padding-inline: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer;
  font-size: 10px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; transition: opacity .2s ease;
}
.btn-solid:hover { opacity: .84; }
.btn-solid:disabled { opacity: .35; cursor: not-allowed; }
.btn-ghost {
  height: 56px; padding-inline: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
  font-size: 10px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; transition: all .2s ease;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { height: 44px; padding-inline: 18px; font-size: 9px; }

.stock-note { margin-top: 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7d837c; }
.stock-note.low { color: #a8763a; }
.stock-note.out { color: #a34a3f; }

.meta-list { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.meta-list li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); color: #5f655f; }
.meta-list li strong { font-weight: 600; color: var(--ink); }

/* ── Sepet ──────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
/*
 * Izgara hücreleri varsayılan olarak min-width:auto alır: İÇERİĞİ kadar
 * genişlerler. İçerideki yatay kaydırmalı öneri şeridi (1000px+) hücreyi
 * şişirip sayfayı sağa taşırıyordu — telefonda ekran sağa kayıyordu.
 * min-width:0 hücreyi ızgaraya sığmaya zorlar, şerit kendi içinde kayar.
 */
.cart-layout > * { min-width: 0; }
.cart-line { display: grid; grid-template-columns: 108px 1fr auto; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cart-line:first-child { border-top: 1px solid var(--line); }
.cart-thumb { aspect-ratio: .8; overflow: hidden; background: #ded9cf; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line h3 { margin: 0 0 6px; font-size: 15px; font-weight: 520; line-height: 1.35; }
.cart-line .variant { margin: 0 0 14px; color: #7d837c; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.cart-line .price { font-size: 15px; font-weight: 650; white-space: nowrap; }
.cart-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.link-remove { background: none; border: 0; padding: 0; cursor: pointer; color: #8a908a; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; }
.link-remove:hover { color: #a34a3f; }

.summary-card { padding: 30px; border: 1px solid var(--line); background: var(--paper-deep); position: sticky; top: 20px; }
.summary-card h2 { margin: 0 0 22px; font-size: 11px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; }
.summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 13.5px; color: #5f655f; }
.summary-row strong { color: var(--ink); font-weight: 600; }
.summary-total { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.summary-total span { font-size: 10px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
.summary-total strong { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.summary-card .btn-solid { width: 100%; margin-top: 24px; }

/* ── Formlar ────────────────────────────────────────────── */
.form-card { padding: clamp(28px, 4vw, 52px); border: 1px solid var(--line); background: var(--paper-deep); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 9.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: #6d736d; }
.field input, .field textarea, .field select {
  height: 52px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 14px; outline: 0; transition: border-color .2s ease;
}
.field textarea { height: auto; padding: 14px; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field .err { color: #a34a3f; font-size: 11px; }
.form-note { margin: 18px 0 0; color: #767c76; font-size: 12.5px; line-height: 1.7; }
.form-note a { text-decoration: underline; }

.alert { padding: 15px 18px; margin-bottom: 24px; border: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.alert--ok { border-color: rgba(74,124,89,.5); background: rgba(74,124,89,.09); }
.alert--err { border-color: rgba(163,74,63,.5); background: rgba(163,74,63,.08); color: #8d3f35; }
.alert ul { margin: 0; padding-left: 18px; }

/* ── Statik içerik ──────────────────────────────────────── */
.prose { max-width: 760px; color: #555b55; font-size: 15.5px; line-height: 1.9; }
.prose h2 { margin: 46px 0 16px; font-size: 24px; font-weight: 550; letter-spacing: -.03em; color: var(--ink); }
.prose h3 { margin: 32px 0 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { text-decoration: underline; }
.prose strong { color: var(--ink); }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.info-cell { padding: 30px 26px; background: var(--paper); }
.info-cell strong { display: block; margin-bottom: 8px; font-size: 9.5px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: #7d837c; }
.info-cell span, .info-cell a { font-size: 14.5px; color: var(--ink); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: 22px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 520;
                    display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: #8a908a; flex: none; }
.faq-item[open] summary::after { content: '−'; }
.faq-item .answer { padding: 0 0 24px; color: #5f655f; font-size: 14.5px; line-height: 1.85; max-width: 760px; }

/* ── Blog / Notlar ──────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.blog-card { min-width: 0; }
.blog-image { display: block; aspect-ratio: 1.25; overflow: hidden; background: #ded9cf; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.blog-image:hover img { transform: scale(1.035); }
.blog-body { padding-top: 18px; }
.blog-date { margin: 0 0 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8a908a; }
.blog-body h2 { margin: 0 0 10px; font-size: 19px; font-weight: 550; letter-spacing: -.025em; line-height: 1.3; }
.blog-excerpt { margin: 0 0 16px; color: #626861; font-size: 14px; line-height: 1.75; }
.blog-hero { margin: 8px 0 44px; aspect-ratio: 1.7; overflow: hidden; background: #ded9cf; }
.blog-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .blog-hero { aspect-ratio: 1.4; } }

/* ── İç sayfa duyarlı ───────────────────────────────────── */
@media (max-width: 980px) {
  .pdp { grid-template-columns: 1fr; gap: 34px; }
  .pdp-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-wrap { padding-block: 34px 72px; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line .price { grid-column: 2; }
  .pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
  .filter-bar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   HESABIM ALANI — sidebar, sipariş listesi, destek talepleri
   Ortak (Tailwind) şablonun karşılığı; StilOL diline uyarlanmıştır.
   ============================================================ */

.acct { display: grid; grid-template-columns: 258px 1fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .acct { grid-template-columns: 1fr; gap: 24px; } }

/* ── Sol sütun ── */
.acct-side { border: 1px solid var(--line); background: var(--paper-deep); }
.acct-side-head { padding: 26px 22px; border-bottom: 1px solid var(--line); text-align: center; }
.acct-avatar {
  width: 52px; height: 52px; margin: 0 auto 12px; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: 19px; font-weight: 500; letter-spacing: -.02em;
}
.acct-side-head h2 { margin: 0; font-size: 14px; font-weight: 520; letter-spacing: -.01em; }
.acct-side-head .firma { margin: 3px 0 0; font-size: 11.5px; color: #767c76; }
.acct-tip {
  display: inline-block; margin-top: 9px; padding: 3px 10px;
  font-size: 9px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--line); color: #6d736d;
}

.acct-nav { padding: 8px; }
.acct-nav a, .acct-nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: #4a504a; text-align: left;
  text-decoration: none; transition: background .18s, color .18s;
}
.acct-nav a:hover, .acct-nav button:hover { background: rgba(18,23,19,.05); color: var(--ink); }
.acct-nav a.on { background: var(--ink); color: var(--paper); }
.acct-nav svg { width: 15px; height: 15px; flex: 0 0 auto; }
.acct-nav-alt { padding: 8px; border-top: 1px solid var(--line); }
.acct-nav-alt button:hover { color: #a34a3f; }

/* ── Sağ sütun kartı ── */
.acct-card { border: 1px solid var(--line); background: var(--paper-deep); padding: clamp(22px, 3vw, 34px); }
.acct-card + .acct-card { margin-top: 20px; }
.acct-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.acct-card-head h2, .acct-card-head h3 { margin: 0; font-size: 17px; font-weight: 520; letter-spacing: -.02em; }
.acct-card-head a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; color: #5f655f; }

/* ── Sipariş / talep satırı ── */
.row-link {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 19px; margin-bottom: 8px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--paper);
  transition: background .18s, border-color .18s;
}
.row-link:hover { background: #ece8de; border-color: var(--ink); }
.row-link .no { font-size: 13px; font-weight: 550; letter-spacing: -.01em; }
.row-link .meta { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: #767c76; }
.row-link .tutar { font-size: 14px; font-weight: 550; white-space: nowrap; }
.row-link .ok { flex: 0 0 auto; opacity: .35; }
.row-link:hover .ok { opacity: 1; }

/* ── Durum rozeti — renk yerine ince çerçeve + nokta ── */
.rozet {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  font-size: 9.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line); color: #5f655f; white-space: nowrap;
}
.rozet::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rozet--bekliyor { color: #8a6d2f; border-color: rgba(138,109,47,.4); }
.rozet--yolda    { color: #3d5a7a; border-color: rgba(61,90,122,.4); }
.rozet--tamam    { color: #4a7c59; border-color: rgba(74,124,89,.45); }
.rozet--iptal    { color: #a34a3f; border-color: rgba(163,74,63,.45); }
.rozet--onsip    { color: #6b5b8a; border-color: rgba(107,91,138,.4); }

/* ── Boş durum ── */
.acct-bos { padding: 62px 20px; text-align: center; color: #767c76; }
.acct-bos svg { opacity: .3; margin-bottom: 14px; }
.acct-bos p { margin: 0 0 4px; font-size: 13.5px; }
.acct-bos a { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: underline; }

/* ── Etiket/değer listesi (sipariş detayı, adres kartı) ── */
.veri-list { display: grid; gap: 11px; }
.veri-sat { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; }
.veri-sat dt { color: #767c76; }
.veri-sat dd { margin: 0; text-align: right; }
.veri-sat--toplam { padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 550; }

/* ── Adres kartları ── */
.adres-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.adres-kart { border: 1px solid var(--line); background: var(--paper); padding: 20px; position: relative; }
.adres-kart.varsayilan { border-color: var(--ink); }
.adres-kart h4 { margin: 0 0 8px; font-size: 13px; font-weight: 550; }
.adres-kart p { margin: 0; font-size: 12.5px; line-height: 1.75; color: #5f655f; }
.adres-kart .islem { display: flex; gap: 14px; margin-top: 15px; }
.adres-kart .islem button, .adres-kart .islem a {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; color: #5f655f;
}
.adres-kart .islem .sil:hover { color: #a34a3f; }

/* ── Sipariş kalemleri ── */
.kalem { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.kalem:last-child { border-bottom: 0; }
.kalem img { width: 62px; height: 78px; object-fit: cover; flex: 0 0 auto; background: var(--paper-deep); }
.kalem .ad { font-size: 13px; line-height: 1.5; }
.kalem .alt { margin-top: 4px; font-size: 11.5px; color: #767c76; }

/* ── Destek talebi mesajları ── */
.mesaj { padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--paper); }
.mesaj--biz { background: var(--paper-deep); border-color: var(--ink); }
.mesaj-bas { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 8px; font-size: 11px; color: #767c76; }
.mesaj-bas strong { font-weight: 650; letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; color: #5f655f; }
.mesaj p { margin: 0; font-size: 13px; line-height: 1.75; white-space: pre-line; }

/* ── Görsel yoksa: dokuma dokulu yer tutucu (tekstil dili) ── */
.gorsel-yok {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; user-select: none;
  background:
    repeating-linear-gradient(45deg, rgba(18,23,19,.035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(18,23,19,.035) 0 2px, transparent 2px 6px),
    var(--paper-deep);
}
.gorsel-yok span { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #9aa098; }

/* ── Üst bant: duyuru kayan yazı ────────────────────────────────
   Sabit slogan yerine panelden duyuru girildiğinde kullanılır.
   Aynı ince şerit ölçüsü korunur; yalnızca içerik kayar. */
.topline--duyuru { overflow: hidden; padding: 0; }
.topline-kayan {
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* Kayan şeritler — ikisi de aynı anda hareket eder.
   translateX(-100%) kendi genişliği kadar demektir; ilk şerit tam çıktığında
   ikincisi onun yerine oturur, dikiş görünmez ve bant hiç boş kalmaz. */
.topline-akis {
  flex: 0 0 auto;
  white-space: nowrap;
  animation-name: toplineKay;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
@keyframes toplineKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .topline-akis { animation: none; }
  .topline-akis + .topline-akis { display: none; }
}

/* ═══ 20.08.2026 — katalog sadeleştirme, tükenen ürün, yüzen çanta ═══ */

/* Üstteki boş alan alındı: ürünler ekranda daha yukarıda başlasın. */
.page-wrap { padding-top: 18px; }
.page-lead--tek { margin: 12px 0 0; }

/* Filtre çubuğunun sağ tarafı: stok filtresi + sayaç + sıralama */
.filter-sag { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chip--stok { border-color: rgba(0,0,0,.22); }
.chip--stok.is-active { background: var(--ink); color: #eee9dc; border-color: var(--ink); }

/* Tükenen ürün: renk tamamen gitmesin ama solgun dursun. */
.product-card.is-tukendi .product-image img {
  filter: grayscale(.5) contrast(.96);
  opacity: .6;
  transition: opacity .3s ease, filter .3s ease;
}
.product-card.is-tukendi:hover .product-image img { opacity: .78; filter: grayscale(.3); }
.product-card.is-tukendi .product-info strong { opacity: .5; text-decoration: line-through; }

/* Duyuru bandı: her şerit tam ekran genişliğinde → metin SAĞDAN girer,
   ilk şerit çıkarken ikincisi yerine oturur, dikiş görünmez. */
.topline-akis { flex: 0 0 100%; text-align: center; }

/* ── Yüzen çanta ──────────────────────────────────────── */
.yuzen-canta {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: #eee9dc;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.yuzen-canta.gorunur { opacity: 1; transform: none; pointer-events: auto; }
.yuzen-canta:hover { transform: translateY(-3px) scale(1.05); }
.yuzen-canta svg { width: 23px; height: 23px; }
.yuzen-canta-sayi {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  background: #b3452f; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  display: grid; place-items: center;
}
@keyframes cantaZipla {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-10px) scale(1.09); }
  62%      { transform: translateY(0) scale(.96); }
}
.yuzen-canta.zipla { animation: cantaZipla .55s ease; }
/* Telefonda alt kenar payı: iOS ana ekran çubuğu (safe-area) + tarayıcının
   kendi alt araç çubuğu için nefes. 16px'te düğme çubuğun arkasına giriyordu. */
@media (max-width: 720px) {
  .yuzen-canta {
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px;
  }
}

/*
 * Çerez bandı açıkken sepet düğmesi bandın altında kalıyor, telefonda
 * basılamıyordu (tıklama banda gidiyordu). Band görünürken düğme yukarı
 * kaydırılır; band kapanınca eski yerine döner.
 */
body.cerez-acik .yuzen-canta { bottom: 210px; }
@media (min-width: 721px) { body.cerez-acik .yuzen-canta { bottom: 150px; } }
@media (prefers-reduced-motion: reduce) {
  .yuzen-canta { transition: none; }
  .yuzen-canta.zipla { animation: none; }
}

/* ═══ 20.08.2026 (2) — mini bar, arama kutusu, çerez bandı, sayfalama ═══ */

/* Google reCAPTCHA rozeti gizli; bilgilendirme metni bültenin altında. */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-not { margin-top: 14px; font-size: 9px; letter-spacing: .12em;
                 text-transform: uppercase; color: #8a908a; line-height: 1.9; }
.recaptcha-not a { text-decoration: underline; }

/* ── Yapışkan mini bar ─────────────────────────────────────── */
.mini-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  height: 54px; padding-inline: var(--pad);
  background: rgba(238, 233, 220, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
}
.mini-bar.gorunur { transform: none; opacity: 1; pointer-events: auto; }
.mini-logo { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.mini-nav { display: flex; gap: 22px; justify-content: center; flex-wrap: nowrap; overflow: hidden; }
.mini-nav a, .mini-araclar a {
  font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #4b514b;
}
.mini-nav a:hover, .mini-araclar a:hover { color: var(--ink); }
.mini-araclar { display: flex; gap: 18px; }
@media (max-width: 860px) { .mini-nav { display: none; } .mini-bar { grid-template-columns: auto 1fr; } }

/* ── Başlıktaki arama kutusu ───────────────────────────────── */
.ara-kutu {
  position: absolute; top: calc(100% - 1px); right: var(--pad); z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--paper, #eee9dc);
  border: 1px solid var(--line); box-shadow: 0 16px 34px -18px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease;
}
.ara-kutu.acik { opacity: 1; transform: none; }
.ara-kutu input {
  width: 240px; border: 0; background: transparent; outline: none;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.ara-kutu input::placeholder { color: #9aa09a; }
.ara-kutu button { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--ink); }
.ara-kutu .ara-kapat { font-size: 10px; color: #9aa09a; }
@media (max-width: 620px) { .ara-kutu { left: var(--pad); right: var(--pad); } .ara-kutu input { width: 100%; } }

/* Arama sayfasındaki satır içi form */
.arama-satiri { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; }
.arama-satiri input {
  flex: 1; min-width: 180px; padding: 9px 12px;
  border: 1px solid var(--line); background: transparent;
  font-size: 11px; letter-spacing: .1em; color: var(--ink);
}
.arama-satiri button {
  padding: 9px 18px; border: 1px solid var(--ink); background: var(--ink); color: #eee9dc;
  font-size: 9px; font-weight: 600; letter-spacing: .2em; cursor: pointer;
}

/* ── Çerez bandı ───────────────────────────────────────────── */
.cerez-bant {
  position: fixed; left: 50%; bottom: 22px; z-index: 70;
  width: min(680px, calc(100vw - 32px));
  transform: translate(-50%, 26px); opacity: 0;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 20px 24px; background: var(--ink); color: #e6e2d6;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.55);
  transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease;
  /* Sönerken tıklama yutmasın; yalnızca görünürken etkileşime açık. */
  pointer-events: none;
}
.cerez-bant.gorunur { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cerez-metin { flex: 1; min-width: 260px; }
.cerez-metin strong { display: block; font-size: 10px; font-weight: 600;
                      letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }
.cerez-metin p { margin: 0; font-size: 12px; line-height: 1.75; color: #bdb9ae; }
.cerez-metin a { color: #e6e2d6; text-decoration: underline; }
.cerez-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.cerez-btn {
  padding: 11px 20px; border: 1px solid #e6e2d6; background: #e6e2d6; color: var(--ink);
  font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cerez-btn--sade { background: transparent; color: #e6e2d6; border-color: rgba(230,226,214,.42); }
.cerez-btn--sade:hover { background: rgba(230,226,214,.12); }
.cerez-btn:hover { background: #fff; }
@media (max-width: 620px) {
  .cerez-bant { bottom: 0; width: 100vw; border-radius: 0; padding: 18px 16px; }
  .cerez-dugmeler { width: 100%; }
  .cerez-btn { flex: 1; text-align: center; }
}

/* ── Sayfalama ─────────────────────────────────────────────── */
.pagination-wrap { margin-top: 54px; display: flex; justify-content: center; }
.sayfalama { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.sayfalama-numaralar { display: flex; align-items: center; gap: 4px; }
.sayfalama-no, .sayfalama-ok {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; font-size: 11px; letter-spacing: .06em; color: #4b514b;
  transition: border-color .2s ease, color .2s ease;
}
.sayfalama-no:hover, .sayfalama-ok:hover { border-color: var(--line); color: var(--ink); }
.sayfalama-no.is-active { background: var(--ink); color: #eee9dc; border-color: var(--ink); }
.sayfalama-ok.is-pasif { opacity: .28; }
.sayfalama-bosluk { color: #9aa09a; padding: 0 2px; }
.sayfalama-ozet { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #8a908a; }
@media (max-width: 620px) { .sayfalama-ozet { width: 100%; text-align: center; } }

/* ═══ 20.08.2026 (3) — koyu mini bar, logo, mini sepet ═══ */

/* Mini bar artık koyu tonda; logo yazı yerine marka görseli. */
.mini-bar {
  background: rgba(16, 20, 17, .94);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mini-logo { display: inline-flex; align-items: center; color: #eee9dc; }
.mini-logo img { height: 26px; width: auto; display: block; }
.mini-nav a, .mini-araclar a { color: #c9c4b8; }
.mini-nav a:hover, .mini-araclar a:hover { color: #fff; }

/* ── Mini sepet ──────────────────────────────────────────
   Sağ altta açılan küçük kutu KALDIRILDI; yerini yandan (telefonda
   alttan) kayan sepet çekmecesi aldı — bkz. "26.08.2026 (6)" bölümü.
   Aynı .mini-sepet sınıf adları orada yeniden tanımlanır. */
/* ═══ 20.08.2026 (4) — duyuru akışı, dar alt bilgi ═══ */

/* Duyuru bandı: şeritler kendi genişliğinde, aralarındaki nefes CSSten.

/* ═══ 20.08.2026 (4) — duyuru akışı, dar alt bilgi ═══ */

/* Duyuru bandı: şeritler kendi genişliğinde, aralarındaki nefes buradan gelir.
   Metin sağdan girer, sola çıkar; iki kopya dikişsiz döngüyü sağlar.
   Önceki hâlinde şeritler tam ekran genişliğindeydi ve metin ortalanıyordu,
   bu yüzden aralarda kocaman boşluk kalıyordu. */
.topline-akis {
  flex: 0 0 auto;
  text-align: left;
  padding-right: 7vw;
}

/* Alt bilgi daraltıldı: 90/72/72 px boşluklar gereğinden fazla yer kaplıyordu. */
footer { padding: 48px var(--pad) 24px; }
.footer-logo { margin-bottom: 32px; font-size: 28px; }
.footer-logo--img img { height: 40px; }
/* Dört sütun (KOLEKSİYONLAR · STİL OL · DESTEK · YASAL) tek satırda kalır.
   Burada 3 yazıyordu ve yukarıdaki kuralı eziyordu; yasal sütunu alta düşüyordu. */
.footer-links { padding-bottom: 34px; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-links div { gap: 10px; }
.footer-links a { font-size: 12px; }
.footer-bottom { padding-top: 18px; }

@media (max-width: 860px) {
  footer { padding: 34px var(--pad) 20px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 26px; padding-bottom: 26px; }
  .footer-logo { margin-bottom: 24px; }
  .footer-logo--img img { height: 34px; }
}

/* ═══ 20.08.2026 (5) — stok sekmeleri ═══ */

/* İki sekme yan yana, altlarında adet. Seçili olan koyu zeminli. */
.stok-sekme { display: inline-flex; border: 1px solid var(--line); }
.stok-sekme-oge {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 16px 8px;
  font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #4b514b; transition: background .2s ease, color .2s ease;
}
.stok-sekme-oge + .stok-sekme-oge { border-left: 1px solid var(--line); }
.stok-sekme-oge span {
  font-size: 11px; font-weight: 400; letter-spacing: .04em;
  color: #9aa09a; text-transform: none;
}
.stok-sekme-oge:hover { background: rgba(0,0,0,.035); }
.stok-sekme-oge.is-active { background: var(--ink); color: #eee9dc; }
.stok-sekme-oge.is-active span { color: rgba(238,233,220,.7); }

@media (max-width: 620px) {
  .stok-sekme { width: 100%; }
  .stok-sekme-oge { flex: 1; }
}

/* ═══ 20.08.2026 (6) — sepet adet kutusu ═══ */

/* Stoğu biten üründe "+" pasifleşir; müşteri boşuna denemesin. */
.qty-box button[disabled] { opacity: .3; cursor: not-allowed; }
.stok-not {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #b3452f; white-space: nowrap;
}
.cart-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ═══ 20.08.2026 (7) — PayTR ödeme çerçevesi ═══ */

.paytr-katman {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 13, 11, .72);
  backdrop-filter: blur(4px);
}
.paytr-katman[hidden] { display: none; }

.paytr-kutu {
  position: relative;
  width: min(480px, 100%);
  height: min(680px, 88vh);
  background: #fff;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.paytr-kapat {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .06); color: #444;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.paytr-kapat:hover { background: rgba(0, 0, 0, .12); }

@media (max-width: 620px) {
  .paytr-katman { padding: 0; }
  .paytr-kutu { width: 100%; height: 100%; }
}

/* ═══ 26.08.2026 — sepet: ücretsiz kargo şeridi + tamamlayıcı öneriler ═══ */

/*
 * Kargo şeridi sipariş özetinin içinde, kargo satırının hemen altında durur:
 * "ne kadar kaldı" bilgisi ancak tutarın yanında anlam taşır.
 */
.kargo-serit {
  margin: 14px 0 4px;
  padding: 13px 14px;
  background: rgba(193, 154, 91, .10);
  border-left: 2px solid var(--gold);
}
.kargo-serit p {
  margin: 0 0 9px;
  font-size: 11.5px; line-height: 1.6; color: #4a5049;
}
.kargo-serit strong { color: var(--ink); font-weight: 600; }

.kargo-cubuk {
  height: 3px; background: rgba(18, 23, 19, .12); overflow: hidden;
}
.kargo-cubuk span {
  display: block; height: 100%;
  background: var(--gold);
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

/* Eşik aşıldığında altın yerine sakin bir yeşil — "kazandınız" tonu. */
.kargo-serit--tamam {
  background: rgba(122, 143, 108, .13);
  border-left-color: #7a8f6c;
}
.kargo-serit--tamam .kargo-cubuk span { background: #7a8f6c; }

@media (prefers-reduced-motion: reduce) {
  .kargo-cubuk span { transition: none; }
}
/* ═══ 26.08.2026 (3) — sepette tamamlayıcı öneri şeridi ═══ */

.oneri-serit-alan {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.oneri-baslik {
  margin: 0 0 16px;
  font-size: 11.5px; line-height: 1.6; color: #5c635b;
  letter-spacing: .02em;
}

/*
 * Yatay şerit: telefonda dikey yer yemesin, parmakla kaydırılsın.
 * Kartlar sabit genişlikte — ekranın kenarından bir sonrakinin ucu görünür,
 * kaydırılabilir olduğu kendiliğinden anlaşılır.
 */
.oneri-serit {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;          /* kaydırma çubuğuna nefes */
  scrollbar-width: thin;
}
.oneri-serit > .product-card {
  flex: 0 0 124px;
  scroll-snap-align: start;
}
/*
 * Şerit kartları vitrin kartlarından belirgin küçük: burası bir vitrin değil,
 * sepetin yanındaki hatırlatma. Ürün adı iki satırda kırpılır — böylece her
 * kartın alt hizası aynı yerde biter, düğmeler bir aşağı bir yukarı kaymaz.
 */
.oneri-serit .product-info { gap: 8px; }
.oneri-serit .product-info h3 {
  font-size: 11px; line-height: 1.4; min-height: calc(11px * 1.4 * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oneri-serit .product-info p  { font-size: 8px; }
.oneri-serit .product-info strong { font-size: 12px; }
.oneri-serit .kart-secenek { display: none; }   /* dar kartta kalabalık yapar */
.oneri-serit .kart-favori-form { display: none; }
.oneri-serit .kart-ekle { width: 36px; height: 36px; }
.oneri-serit .kart-ekle-isaret { font-size: 18px; }
.oneri-serit .kart-ekle-alan { right: 7px; bottom: 7px; }
.oneri-serit .kart-kargo-rozet { font-size: 6.5px; padding: 4px 6px; letter-spacing: .1em; }

/* Şeritte hover'la gizlemek yok: kart dar, düğme hep dursun */
@media (hover: hover) and (pointer: fine) {
  .oneri-serit .kart-ekle { opacity: 1; transform: none; }
}

@media (min-width: 861px) {
  .oneri-serit > .product-card { flex-basis: 140px; }
}

/* ── "Kargo bedava" rozeti ──────────────────────────────── */
.kart-kargo-rozet {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  padding: 5px 8px;
  background: #5f7a52; color: #fff;
  font-size: 7.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
}


/* ═══ 26.08.2026 (4) — hızlı ekleme: görselin sağ alt köşesinde "+" ═══ */

/* Görselin çıpası. Düğme bağlantının içine konulamaz (iç içe tıklanabilir
   öğe olurdu), o yüzden ikisi bu sarmalın içinde kardeş duruyor. */
/* line-height:0 — bağlantı satır içi öğe olduğu için altında birkaç piksel
   satır boşluğu kalıyor, düğme görselin alt kenarına tam oturmuyordu. */
.kart-gorsel-sarmal { position: relative; line-height: 0; }

.kart-ekle-alan { position: absolute; right: 10px; bottom: 10px; z-index: 3; }

.kart-ekle {
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-family: inherit; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.kart-ekle-isaret { font-size: 21px; line-height: 1; font-weight: 300; }
.kart-ekle--git .kart-ekle-isaret { font-size: 19px; font-weight: 400; }

.kart-ekle:hover { background: var(--ink); color: var(--paper); transform: scale(1.06); }
.kart-ekle.yukleniyor { opacity: .6; cursor: progress; }

/* Eklendi: yeşile döner, işaret ✓ olur (JS değiştirir), kısa bir zıplama */
.kart-ekle.eklendi {
  background: #5f7a52; color: #fff;
  animation: kartEklendi .45s ease;
}
.kart-ekle.hata { background: #9c4632; color: #fff; }

@keyframes kartEklendi {
  0%   { transform: none; }
  35%  { transform: scale(1.16); }
  100% { transform: none; }
}

/* ── Beden seçimi: düğmenin üstünde, görsele hizalı ── */
.kart-secim {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4;
  width: max-content; max-width: min(230px, 78vw);
  padding: 11px 12px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5);
}
.kart-secim-bas {
  display: block; margin-bottom: 8px;
  font-size: 8px; letter-spacing: .2em; color: #7f877f;
}
.kart-secim-liste { display: flex; flex-wrap: wrap; gap: 5px; }
.kart-secim-dugme {
  min-width: 44px; min-height: 40px; padding: 7px 10px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: inherit; font-size: 10.5px; letter-spacing: .04em; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.kart-secim-dugme:hover { background: var(--ink); color: #eee9dc; border-color: var(--ink); }

/*
 * Masaüstünde karta gelince belirir — ızgara sakin kalsın diye.
 * Düğme görselin üstünde durduğu için belirmesi yerleşimi oynatmaz.
 */
@media (hover: hover) and (pointer: fine) {
  .kart-ekle { opacity: 0; transform: translateY(6px); }
  .product-card:hover .kart-ekle,
  .product-card:focus-within .kart-ekle { opacity: 1; transform: none; }
  .kart-ekle.eklendi, .kart-ekle.hata { opacity: 1; transform: none; }
}

.product-card.is-tukendi .kart-ekle-alan { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kart-ekle { transition: background .2s ease, color .2s ease; }
  .kart-ekle.eklendi { animation: none; }
}

/* ═══ 26.08.2026 (5) — sabit üst çubuk: ikonlar, kategoriler, hesap ═══ */

.mini-araclar { align-items: center; }
.mini-araclar a, .mini-kategori {
  display: inline-flex; align-items: center; gap: 7px;
  position: relative;
  background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
  color: #c9c4b8;
  transition: color .18s ease;
}
.mini-kategori:hover, .mini-araclar a:hover { color: #fff; }
.mini-ikon { width: 19px; height: 19px; flex: 0 0 auto; display: none; }

/* Hesap düğmesinin yazısı yok — ikonu her boyutta görünmeli, yoksa
   masaüstünde 0x0 boyutunda görünmez bir bağlantıya dönüşüyordu. */
.mini-hesap .mini-ikon { display: block; }
.mini-hesap { width: 34px; height: 34px; justify-content: center; }

/* Masaüstünde sepet sayısı yazının ardından ayırıcıyla gelsin */
@media (min-width: 861px) {
  .mini-sayac::before { content: '· '; }
}

/* Sepet sayacı: yazının yanında rakam, ikon modunda rozet */
.mini-sayac { font-size: 10.5px; letter-spacing: .06em; }

/* Telefon: yazılar gider, ikonlar gelir — dört eylem yan yana sığsın */
@media (max-width: 860px) {
  .mini-nav { display: none; }
  .mini-bar { grid-template-columns: auto 1fr; gap: 12px; padding-inline: 16px; }

  .mini-ikon { display: block; }
  .mini-yazi { display: none; }

  .mini-araclar { gap: 4px; }
  .mini-araclar a, .mini-kategori {
    width: 44px; height: 44px;          /* dokunma hedefi */
    justify-content: center; gap: 0;
  }

  /* Sayaç rozete döner: ikonun sağ üstünde */
  .mini-sayac {
    position: absolute; top: 4px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: #b3452f; color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: 0;
    display: grid; place-items: center;
  }
  .mini-sayac:empty, .mini-sayac[hidden] { display: none; }
}

/* Masaüstünde kategoriler zaten üst menüde — düğme gereksiz */
@media (min-width: 861px) {
  .mini-kategori { display: none; }
}

/* ── Sepet özeti: üstü çizili kargo + KDV satırı ── */
.kargo-eski {
  color: #8f8f8f; font-weight: 500; text-decoration: line-through;
  margin-right: 7px;
}
.kargo-bedava { color: #5f7a52; font-weight: 650; letter-spacing: .04em; }

/* KDV bilgilendirme satırı — tutarın parçası değil, içindeki vergi */
.summary-row--kdv { font-size: 12px; color: #7f867e; }
.summary-row--kdv strong { color: #7f867e; font-weight: 500; }

/* ═══ 26.08.2026 (6) — sepet çekmecesi + altın halka ═══ */

/* Perde: çekmece açıkken arka planı yumuşatır, tıklanınca kapatır */
.sepet-perde {
  position: fixed; inset: 0; z-index: 74;
  background: rgba(12, 15, 12, .28);
  opacity: 0; transition: opacity .3s ease;
}
.sepet-perde.acik { opacity: 1; }
.sepet-perde[hidden] { display: none; }

/*
 * Çekmece — masaüstünde sağdan, telefonda alttan kayar.
 * Eski küçük kutunun (.mini-sepet) yerini alır; sınıf adı korunmuştur ki
 * mevcut JS ve diğer kurallar bozulmasın.
 */
.mini-sepet {
  position: fixed; top: 0; right: 0; bottom: auto; left: auto; z-index: 75;
  width: min(380px, 92vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  box-shadow: -18px 0 60px -24px rgba(0, 0, 0, .5);
  transform: translateX(100%); opacity: 1;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1);
  pointer-events: auto;
}
.mini-sepet.acik { transform: none; }
.mini-sepet[hidden] { display: none; }

.mini-sepet-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 16px; border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.mini-sepet-bas strong {
  font-size: 10px; font-weight: 650; letter-spacing: .22em; color: var(--ink);
}
.mini-sepet-kapat {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; color: #8a908a; font-size: 15px; cursor: pointer;
}
.mini-sepet-kapat:hover { color: var(--ink); }

.mini-sepet-liste {
  flex: 1 1 auto; max-height: none; overflow-y: auto; padding: 6px 0;
}
.mini-sepet-satir {
  display: flex; gap: 13px; align-items: center; padding: 13px 22px;
  border-bottom: 1px solid rgba(18, 23, 19, .07);
}
.mini-sepet-satir img, .mini-sepet-gorselsiz {
  width: 54px; height: 68px; object-fit: cover; flex: 0 0 auto;
  background: var(--paper-deep);
}
.mini-sepet-satir p {
  margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-sepet-satir span { font-size: 10.5px; letter-spacing: .08em; color: #7f867e; }
.mini-sepet-bos { margin: 0; padding: 34px 22px; text-align: center; font-size: 12.5px; color: #7f867e; }

.mini-sepet-alt {
  flex: 0 0 auto; padding: 16px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--paper-deep);
}
.mini-sepet-toplam {
  display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 14px;
}
.mini-sepet-toplam span { font-size: 9px; letter-spacing: .2em; color: #7f867e; }
.mini-sepet-toplam strong { font-size: 17px; font-weight: 650; }

.mini-sepet-git {
  display: block; text-align: center; padding: 14px;
  background: var(--ink); color: #eee9dc; text-decoration: none;
  font-size: 9.5px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase;
  transition: background .2s ease;
}
.mini-sepet-git:hover { background: #000; }

.mini-sepet-devam {
  display: block; width: 100%; margin-top: 9px; padding: 12px;
  background: none; border: 1px solid var(--line); color: #5f655f;
  font-family: inherit; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.mini-sepet-devam:hover { border-color: var(--ink); color: var(--ink); }

/* Çekmecedeki ücretsiz kargo çubuğu */
.mini-kargo { padding: 12px 13px; background: rgba(193, 154, 91, .12); border-left: 2px solid var(--gold); }
.mini-kargo p { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: #4a5049; }
.mini-kargo strong { color: var(--ink); font-weight: 600; }
.mini-kargo--tamam { background: rgba(122, 143, 108, .14); border-left-color: #7a8f6c; }
.mini-kargo--tamam .kargo-cubuk span { background: #7a8f6c; }

/* Telefon: alttan yukarı kayar, başparmağın eriştiği yerde durur */
@media (max-width: 720px) {
  .mini-sepet {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; max-height: 78vh;
    transform: translateY(100%);
    box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .45);
  }
  .mini-sepet.acik { transform: none; }
  .mini-sepet-bas { padding: 18px 18px 14px; }
  .mini-sepet-satir { padding: 12px 18px; }
  .mini-sepet-alt  { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .mini-sepet, .sepet-perde { transition: none; }
}

/* ── Altın halka: beden düğmesine basılınca döner ── */
.kart-secim-dugme { position: relative; }
.kart-secim-dugme.bekliyor { color: transparent; pointer-events: none; }
.kart-secim-dugme.bekliyor::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(193, 154, 91, .28);
  border-top-color: var(--gold);
  animation: halkaDon .62s linear infinite;
}
@keyframes halkaDon { to { transform: rotate(360deg); } }

/* Kart düğmesi de yüklenirken aynı halkayı gösterir */
.kart-ekle.yukleniyor .kart-ekle-isaret { visibility: hidden; }
.kart-ekle.yukleniyor::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(193, 154, 91, .3);
  border-top-color: var(--gold);
  animation: halkaDon .62s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kart-secim-dugme.bekliyor::after, .kart-ekle.yukleniyor::after { animation: none; }
}

/* ═══ 26.08.2026 (7) — alt bildirim şeridi + havale bilgileri ═══ */

/*
 * Bildirim şeridi: telefonda "eklendi" geri bildirimi, her ekranda hata
 * mesajı. Çekmecenin aksine sayfayı kapatmaz — tek satır, altta.
 */
.sepet-bildirim {
  position: fixed; left: 12px; right: 12px; z-index: 78;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  background: var(--ink); color: #eee9dc;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .55);
  transform: translateY(130%); opacity: 0;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
}
.sepet-bildirim.acik { transform: none; opacity: 1; }
.sepet-bildirim[hidden] { display: none; }

.sepet-bildirim-ikon {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: #5f7a52; color: #fff; font-size: 12px; font-weight: 700;
}
.sepet-bildirim-metin {
  flex: 1 1 auto; font-size: 12.5px; letter-spacing: .01em; line-height: 1.4;
}
.sepet-bildirim-git {
  flex: 0 0 auto; padding: 8px 13px;
  background: #eee9dc; color: var(--ink); text-decoration: none;
  font-size: 9px; font-weight: 650; letter-spacing: .18em;
}
.sepet-bildirim-git[hidden] { display: none; }

.bildirim--hata .sepet-bildirim-ikon { background: #9c4632; }

/* Masaüstünde ekranın sağ altında dursun, tam genişlik kaplamasın */
@media (min-width: 721px) {
  .sepet-bildirim { left: auto; right: 22px; bottom: 22px; max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .sepet-bildirim { transition: none; }
}

/* ── Havale / EFT bilgileri (sipariş sonrası) ── */
.havale-kutu {
  margin-top: 26px; padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--line); background: var(--paper-deep);
  text-align: left;
}

/* Sipariş numarası uyarısı — açıklamasız ödeme eşleştirilemiyor */
.havale-uyari {
  padding: 16px 18px; margin-bottom: 20px;
  background: rgba(193, 154, 91, .13); border-left: 3px solid var(--gold);
}
.havale-uyari p { margin: 0; font-size: 13px; line-height: 1.65; color: #4a5049; }
.havale-uyari strong { color: var(--ink); font-weight: 650; }

.havale-no {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 11px 0 10px;
}
.havale-no code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
  background: var(--paper); padding: 9px 14px; border: 1px solid var(--line);
}
.havale-not { font-size: 11.5px !important; color: #7c8279 !important; line-height: 1.6 !important; }

.havale-hesap {
  padding: 18px; margin-bottom: 12px;
  background: var(--paper); border: 1px solid var(--line);
}
.havale-banka { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.havale-banka img { height: 30px; width: auto; object-fit: contain; }
.havale-banka strong { font-size: 13px; font-weight: 650; letter-spacing: .02em; }

.havale-satir {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 8px;
  background: var(--paper-deep);
}
.havale-satir > span {
  flex: 0 0 auto; min-width: 72px;
  font-size: 8.5px; letter-spacing: .2em; color: #7f867e;
}
.havale-satir code {
  flex: 1 1 180px; min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  word-break: break-all;
}
.havale-satir--iban { background: rgba(193, 154, 91, .12); }
.havale-satir--iban code { font-size: 14.5px; font-weight: 700; }

.havale-kopyala {
  flex: 0 0 auto; min-height: 36px; padding: 8px 13px;
  border: 1px solid var(--ink); background: var(--ink); color: #eee9dc;
  font-family: inherit; font-size: 8.5px; font-weight: 650; letter-spacing: .16em;
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.havale-kopyala:hover { background: #000; }
.havale-kopyala.kopyalandi { background: #5f7a52; border-color: #5f7a52; }

.havale-alt {
  margin: 16px 0 0; font-size: 12px; line-height: 1.7; color: #6d736c;
}

@media (max-width: 560px) {
  .havale-satir { gap: 8px; }
  .havale-satir > span { flex-basis: 100%; min-width: 0; }
  .havale-satir code { flex-basis: calc(100% - 110px); font-size: 12.5px; }
}

/* ═══ 26.08.2026 (8) — kapak slaytları ═══ */

/*
 * Kapak, başlık çubuğunun ALTINDAN başlar (Vakko / Sézane / Toteme düzeni).
 * Önceden hero başlığın arkasına uzanıyordu: ürün fotoğrafındaki pazaryeri
 * yazıları site başlığıyla iç içe geçiyor, altın logo koyu fotoğrafta
 * kayboluyordu.
 */
.kapak {
  position: relative;
  height: clamp(420px, 62vh, 640px);
  overflow: hidden;
  background: var(--paper-deep);
}

.kapak-raylar { position: absolute; inset: 0; }

.kapak-slayt {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 var(--pad);
  background-color: var(--kapak-zemin, var(--paper-deep));
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.kapak-slayt.aktif { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Görsel ayrı katmanda: yazının okunması için üstüne yumuşak perde iner */
.kapak-slayt::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--kapak-gorsel);
  background-size: cover; background-position: center 10%;
}
.kapak-slayt::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(12, 15, 12, .62) 0%,
              rgba(12, 15, 12, .34) 42%,
              rgba(12, 15, 12, .06) 72%);
}

.kapak-yazi { position: relative; z-index: 2; max-width: 620px; color: #fff; }
.kapak-yazi .eyebrow { color: rgba(255, 255, 255, .82); }
.kapak-yazi h1 {
  margin: 14px 0 0;
  font-size: clamp(38px, 5.6vw, 82px); font-weight: 520;
  letter-spacing: -.055em; line-height: .98; color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
.kapak-yazi .hero-subtitle {
  margin: 18px 0 0; color: rgba(255, 255, 255, .9);
  font-size: clamp(13px, 1.3vw, 16px); letter-spacing: .04em;
}
.kapak-yazi .outline-button {
  margin-top: 30px;
  border-color: var(--kapak-vurgu, rgba(255, 255, 255, .72));
  color: #fff;
}
.kapak-yazi .outline-button:hover {
  background: var(--kapak-vurgu, #fff);
  color: var(--ink); border-color: transparent;
}

/* Slayt noktaları */
.kapak-noktalar {
  position: absolute; left: var(--pad); bottom: 30px; z-index: 3;
  display: flex; gap: 9px;
}
.kapak-nokta {
  width: 34px; height: 34px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.kapak-nokta::before {
  content: ''; width: 26px; height: 2px;
  background: rgba(255, 255, 255, .42); transition: background .25s ease;
}
.kapak-nokta.aktif::before, .kapak-nokta:hover::before { background: #fff; }

.kapak .hero-index {
  position: absolute; right: var(--pad); bottom: 30px; z-index: 3;
  color: rgba(255, 255, 255, .88);
}

@media (max-width: 720px) {
  .kapak { height: clamp(380px, 56vh, 520px); }
  .kapak-slayt::after {
    background: linear-gradient(180deg,
                rgba(12, 15, 12, .30) 0%,
                rgba(12, 15, 12, .58) 62%,
                rgba(12, 15, 12, .72) 100%);
  }
  .kapak-yazi { max-width: none; }
  .kapak-noktalar { bottom: 22px; }
  .kapak .hero-index { display: none; }   /* dar ekranda kalabalık yapıyor */
}

@media (prefers-reduced-motion: reduce) {
  .kapak-slayt { transition: opacity .01s linear; }
}

/* Ödeme sayfası: seçili kayıtlı adresin dökümü */
.secili-adres {
  margin-top: 16px; padding: 15px 17px;
  background: var(--paper); border: 1px solid var(--line);
}
.secili-adres p {
  margin: 0 0 4px; font-size: 13px; line-height: 1.6; color: #4a5049;
}
.secili-adres-ad { font-weight: 600; color: var(--ink) !important; }
.secili-adres-duzenle {
  display: inline-block; margin-top: 9px;
  font-size: 8.5px; letter-spacing: .18em; color: #7f867e; text-decoration: none;
}
.secili-adres-duzenle:hover { color: var(--ink); text-decoration: underline; }

/* ═══ 28.08.2026 — kumaş nefesi (şal efekti) ═══ */

/*
 * Cem'in fikri: "şal olsa da rüzgâr eser gibi dalgalansa".
 *
 * Kalıcı alanlara (başlık, menü) hareket koymadık — göz ucunda titreşen bir
 * şey okurken rahatsız eder. Bunun yerine hareket KAPAK GÖRSELİNİN kendisine
 * verildi: 16 saniyelik döngüde çok hafif bir ölçek ve kayma. Ne olduğu tam
 * seçilmez, sayfa "canlı" hissedilir — iyi animasyon budur.
 *
 * Ölçek 1.06'dan başlar: kenarlarda boşluk açılmasın diye görsel zaten
 * hafifçe büyütülmüş durumda, salınım o payın içinde kalır.
 */
@keyframes kumasNefesi {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  30%  { transform: scale(1.075) translate3d(-0.7%, -0.4%, 0); }
  55%  { transform: scale(1.065) translate3d(0.5%, 0.3%, 0); }
  80%  { transform: scale(1.08) translate3d(-0.3%, 0.5%, 0); }
  100% { transform: scale(1.06) translate3d(0, 0, 0); }
}

.kapak-slayt::before {
  transform: scale(1.06);
  will-change: transform;
}

/* Yalnızca GÖRÜNEN slaytta çalışır: arkadaki slaytlar boşuna işlemci yemesin */
.kapak-slayt.aktif::before {
  animation: kumasNefesi 16s ease-in-out infinite;
}

/*
 * Hareket hassasiyeti olan kullanıcıda ve dar ekranda kapalı:
 * telefonda pil tüketir, üstelik küçük ekranda etki fark edilmez.
 */
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .kapak-slayt.aktif::before { animation: none; }
}