/* =====================================================================
   ARMA CAM · Prototip stil dosyası
   Yapı: 1 Değişkenler · 2 Temel · 3 Tipografi · 4 Düzen · 5 Bileşenler
         6 Üst / Alt · 7 Bölümler · 8 Sayfalar · 9 Hareket · 10 Yardımcı
   ===================================================================== */

/* ---------- 1. Değişkenler ---------- */
:root {
  --murekkep: #141416;
  --murekkep-2: #1d1d1f;
  --murekkep-3: #2a2a2e;
  --porselen: #f6f3ee;
  --porselen-2: #efeae2;
  --kil: #e3dcd1;
  --kil-2: #cfc6b8;
  --gri: #6f6a63;
  --gri-2: #a39d94;
  --mavi: #0080c8;
  --mavi-2: #0a94e3;
  --mavi-koyu: #005f95;
  --altin: #c9a15c;
  --altin-2: #e3c389;
  --beyaz: #ffffff;

  --zemin: var(--porselen);
  --zemin-2: var(--porselen-2);
  --yazi: var(--murekkep);
  --yazi-2: var(--gri);
  --cizgi: rgba(20, 20, 22, .12);
  --cizgi-2: rgba(20, 20, 22, .06);
  --vurgu: var(--mavi);
  --kart: var(--beyaz);
  --golge: 0 24px 60px -30px rgba(20, 20, 22, .35);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;

  --olcu: clamp(16px, 2.2vw, 40px);
  --kapsayici: 1480px;
  --ust-yukseklik: 84px;

  --kolay: cubic-bezier(.22, 1, .36, 1);
  --sert: cubic-bezier(.76, 0, .24, 1);
  --sure: .7s;
}
[data-tema="koyu"] {
  --zemin: var(--murekkep);
  --zemin-2: var(--murekkep-2);
  --yazi: var(--porselen);
  --yazi-2: var(--gri-2);
  --cizgi: rgba(246, 243, 238, .14);
  --cizgi-2: rgba(246, 243, 238, .07);
  --kart: var(--murekkep-2);
  --golge: 0 30px 80px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font-family: var(--sans); font-size: 1rem; line-height: 1.55;
  font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--mavi); color: #fff; }
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 4px; border-radius: 2px; }
.gorsel-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: fixed; top: 8px; left: 8px; z-index: 200; background: var(--mavi); color: #fff; padding: .6rem 1rem; transform: translateY(-200%); }
.atla:focus { transform: none; }

/* ---------- 3. Tipografi ---------- */
.serif, h1, h2, h3, .baslik { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; font-variation-settings: "opsz" 144, "SOFT" 30; margin: 0; }
h1, .dev { font-size: clamp(2.8rem, 8.4vw, 8.6rem); letter-spacing: -.03em; }
h2, .buyuk { font-size: clamp(2.1rem, 5.2vw, 4.8rem); letter-spacing: -.025em; }
h3, .orta { font-size: clamp(1.45rem, 2.4vw, 2.2rem); letter-spacing: -.015em; line-height: 1.12; }
.kucuk-baslik { font-family: var(--serif); font-size: 1.2rem; }
em, .vurgu-yazi { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--vurgu); }
.etiket { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--yazi-2); }
.etiket::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--mavi); margin-right: .7rem; vertical-align: middle; transform: skewX(-30deg); }
p { margin: 0 0 1em; max-width: 62ch; }
.giris { font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.5; color: var(--yazi-2); }
.alt-yazi { font-size: .9rem; color: var(--yazi-2); }

/* ---------- 4. Düzen ---------- */
.kapsayici { width: min(100% - 2 * var(--olcu), var(--kapsayici)); margin-inline: auto; }
.bolum { padding-block: clamp(4rem, 9vw, 9rem); }
.bolum-dar { padding-block: clamp(2.5rem, 5vw, 5rem); }
.izgara { display: grid; gap: var(--olcu); }
.iki { grid-template-columns: repeat(2, 1fr); }
.uc { grid-template-columns: repeat(3, 1fr); }
.dort { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .uc, .dort { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .iki, .uc, .dort { grid-template-columns: 1fr; } }
.ust-bosluk { margin-top: var(--olcu); }
.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 4rem); flex-wrap: wrap; }
.bolum-bas .etiket { display: block; margin-bottom: 1.2rem; }
.cizgi-ust { border-top: 1px solid var(--cizgi); }
main { display: block; }

/* ---------- 5. Bileşenler ---------- */
.dugme {
  --d-zemin: var(--yazi); --d-yazi: var(--zemin);
  display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.6rem; border-radius: 999px;
  background: var(--d-zemin); color: var(--d-yazi); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  position: relative; isolation: isolate; overflow: hidden; transition: color .4s var(--kolay), transform .4s var(--kolay);
  white-space: nowrap;
}
.dugme::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mavi); transform: translateY(101%); transition: transform .55s var(--sert); border-radius: inherit; }
.dugme:hover { color: #fff; }
.dugme:hover::after { transform: translateY(0); }
.dugme svg { width: 16px; height: 16px; transition: transform .4s var(--kolay); }
.dugme:hover svg { transform: translateX(4px); }
.dugme-mavi { --d-zemin: var(--mavi); --d-yazi: #fff; }
.dugme-mavi::after { background: var(--murekkep); }
.dugme-cerceve { --d-zemin: transparent; --d-yazi: var(--yazi); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.dugme-cerceve:hover { box-shadow: inset 0 0 0 1.5px transparent; }
.dugme-kucuk { padding: .7rem 1.1rem; font-size: .85rem; }
.baglanti { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; position: relative; padding-bottom: .15rem; }
.baglanti::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .5s var(--kolay); }
.baglanti:hover::after { transform: scaleX(1); }
.baglanti svg { width: 14px; height: 14px; }

/* renk noktaları */
.renkler { display: flex; gap: .45rem; align-items: center; }
.renk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--zemin); box-shadow: 0 0 0 1px var(--cizgi); background: #d9d4cc center/cover; position: relative; cursor: pointer; transition: transform .3s var(--kolay), box-shadow .3s; padding: 0; flex: none; }
.renk:hover { box-shadow: 0 0 0 2px var(--mavi); }
.renk[aria-pressed="true"], .renk.secili { box-shadow: 0 0 0 2px var(--mavi); }
.renk-buyuk { width: 44px; height: 44px; border-width: 3px; }

/* ürün kartı */
.kart { position: relative; display: grid; gap: 1rem; }
.kart-gorsel { position: relative; aspect-ratio: 1; background: var(--beyaz); border-radius: 24px; overflow: hidden; isolation: isolate; }
[data-tema="koyu"] .kart-gorsel { background: #fbfaf8; }
.kart-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--kolay), transform 1.2s var(--kolay); }
.kart-gorsel img.ikinci { opacity: 0; }
.kart:hover .kart-gorsel img.ikinci { opacity: 1; }
.kart:hover .kart-gorsel img { transform: scale(1.03); }
.kart-gorsel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(20,20,22,.06); border-radius: inherit; pointer-events: none; }
.kart-ust { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; z-index: 2; }
.rozet { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; background: var(--murekkep); color: var(--porselen); }
.rozet-acik { background: var(--porselen); color: var(--murekkep); }
.kart-hizli { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: flex; justify-content: center; transform: translateY(12px); opacity: 0; transition: all .45s var(--kolay); }
.kart:hover .kart-hizli, .kart:focus-within .kart-hizli { transform: none; opacity: 1; }
.kart-bilgi { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kart-ad { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; }
.kart-ad a::after { content: ""; position: absolute; inset: 0; }
.kart-alt { font-size: .85rem; color: var(--yazi-2); margin-top: .25rem; }
.fiyat { font-weight: 600; white-space: nowrap; }
.fiyat-not { font-size: .74rem; color: var(--yazi-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: right; line-height: 1.3; }

/* sahibe sor işareti */
.sor { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 6px; background: rgba(201, 161, 92, .16); color: #8a6a2e; font-size: .78rem; font-weight: 600; border: 1px dashed rgba(201,161,92,.6); vertical-align: middle; }
[data-tema="koyu"] .sor, .alt-bolum .sor, .mega .sor { color: var(--altin-2); background: rgba(201,161,92,.12); }

/* akordiyon */
.akordiyon { border-top: 1px solid var(--cizgi); }
.akordiyon details { border-bottom: 1px solid var(--cizgi); }
.akordiyon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 0; cursor: pointer; font-weight: 600; }
.akordiyon summary::-webkit-details-marker { display: none; }
.akordiyon summary:hover { color: var(--mavi); }
.akordiyon summary::after { content: "+"; font-family: var(--serif); font-size: 1.6rem; line-height: 1; transition: transform .4s var(--kolay); color: var(--yazi-2); }
.akordiyon details[open] summary::after { transform: rotate(45deg); }
.akordiyon .icerik { padding: 0 0 1.4rem; color: var(--yazi-2); max-width: 60ch; }

/* form */
.alan { display: grid; gap: .45rem; }
.alan label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--yazi-2); }
.alan input, .alan select, .alan textarea { width: 100%; padding: 1rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--cizgi); background: var(--kart); transition: border-color .3s; }
.alan input:focus, .alan textarea:focus, .alan select:focus { outline: none; border-color: var(--mavi); }
.alan textarea { min-height: 150px; resize: vertical; }
.form { display: grid; gap: 1.2rem; }

/* kırpılmış marquee */
.kayan { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--cizgi); padding-block: 1.1rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kayan-ic { display: inline-flex; gap: 3rem; animation: kay 40s linear infinite; padding-right: 3rem; }
.kayan span { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2.2rem); display: inline-flex; align-items: center; gap: 3rem; }
.kayan span i { font-style: italic; color: var(--mavi); }
.kayan span::after { content: ""; width: 10px; height: 10px; background: var(--mavi); transform: skewX(-30deg); }
@keyframes kay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kayan-ic { animation: none; } }

/* ---------- 6. Üst / Alt ---------- */
.ust { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--ust-yukseklik); display: flex; align-items: center; transition: background .5s, box-shadow .5s, transform .5s var(--kolay); color: var(--ust-yazi, var(--yazi)); }
.ust .kapsayici { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ust-logo img { height: 22px; width: auto; }
.ust-logo .acik, .ust-logo .koyu { transition: opacity .3s; }
.ust-menu { display: flex; gap: 2rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.ust-menu a { font-size: .92rem; font-weight: 500; position: relative; padding: .4rem 0; }
.ust-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--kolay); }
.ust-menu a:hover::after, .ust-menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.ust-sag { display: flex; align-items: center; gap: .6rem; }
.ust-buton { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px currentColor; transition: all .35s var(--kolay); }
.ust-buton:hover { background: var(--mavi); color: #fff; box-shadow: inset 0 0 0 1.5px var(--mavi); }
.ust-buton-dolu { background: currentColor; }
.ust-buton-dolu span { color: var(--ust-ters, var(--zemin)); }
.ust-buton-dolu:hover span { color: #fff; }
.ust-ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.ust-ikon svg { width: 18px; height: 18px; }
.ust-ikon .sayi { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--mavi); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; padding-inline: 4px; }
.ust.koyu-ust { --ust-yazi: var(--porselen); --ust-ters: var(--murekkep); }
.ust.acik-ust { --ust-yazi: var(--murekkep); --ust-ters: var(--porselen); }
.ust.koyu-ust .ust-logo .koyu { opacity: 0; position: absolute; }
.ust.acik-ust .ust-logo .acik { opacity: 0; position: absolute; }
.ust.kaydi { background: color-mix(in srgb, var(--porselen) 82%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 rgba(20,20,22,.1); }
.ust.kaydi.koyu-ust { background: color-mix(in srgb, var(--murekkep) 80%, transparent); box-shadow: 0 1px 0 rgba(246,243,238,.1); }
.ust.gizle { transform: translateY(-100%); }
.ust.dolu { background: var(--zemin); box-shadow: 0 1px 0 var(--cizgi); }
.ust.dolu.koyu-ust { background: var(--murekkep); }
.hamburger { display: none; }

/* mega menü arka perdesi: sayfa kararır ve bulanır */
.mega-perde { position: fixed; inset: var(--ust-yukseklik) 0 0; z-index: 85; background: rgba(20,20,22,.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s var(--kolay), visibility 0s .35s; }
body.mega-acik .mega-perde { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 1100px) { .mega-perde { display: none; } }

/* mega menü · vitrin rayı */
.ust-mega-li { position: static; }
.ust-mega-li > a { display: inline-flex; align-items: center; gap: .35rem; position: relative; }
.ust-mega-li[data-acik="true"] > a::before { content: ""; position: absolute; left: -2rem; right: -2rem; top: 100%; height: 40px; } /* bağlantıdan menüye inerken fare boşluğa düşmesin */
.ust-mega-li > a .ok-kucuk { transition: transform .4s var(--kolay); opacity: .7; }
.ust-mega-li[data-acik="true"] > a .ok-kucuk { transform: rotate(180deg); }
.mega { --m-yazi: var(--murekkep); --m-yazi2: var(--gri); --m-cizgi: rgba(20,20,22,.1); --m-zemin: var(--porselen); --m-hover: rgba(20,20,22,.05);
  position: fixed; left: 0; right: 0; top: var(--ust-yukseklik); color: var(--m-yazi); background: color-mix(in srgb, var(--m-zemin) 95%, transparent); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border-top: 1px solid var(--m-cizgi); box-shadow: 0 50px 90px -40px rgba(20,20,22,.35);
  opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: opacity .3s var(--kolay), clip-path .65s var(--sert), visibility 0s .4s; z-index: 90; }
.ust.koyu-ust .mega { --m-yazi: var(--porselen); --m-yazi2: var(--gri-2); --m-cizgi: rgba(246,243,238,.12); --m-zemin: var(--murekkep); --m-hover: rgba(246,243,238,.07); box-shadow: 0 50px 90px -30px rgba(0,0,0,.7); }
.ust-mega-li[data-acik="true"] .mega { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }
.ust .mega-ic { display: grid; justify-content: normal; align-items: stretch; gap: 1.2rem; padding-block: 1.4rem 1.6rem; }
.mega-bas { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.mega-sekmeler { display: flex; gap: .4rem; }
.mega-sekme { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem .7rem .9rem; border-radius: 999px; font-family: var(--serif); font-size: 1.15rem; color: var(--m-yazi); box-shadow: inset 0 0 0 1.5px var(--m-cizgi); transition: background .35s var(--kolay), color .35s, box-shadow .35s; }
.mega-sekme .no { font-size: .72rem; color: var(--mavi); font-family: var(--serif); }
.mega-sekme .sayi { font-family: var(--sans); font-size: .7rem; font-weight: 700; color: var(--m-yazi2); padding-left: .5rem; border-left: 1px solid var(--m-cizgi); }
.mega-sekme:hover, .mega-sekme[data-aktif="true"] { background: var(--m-yazi); color: var(--m-zemin); box-shadow: none; }
.mega-sekme:hover .sayi, .mega-sekme[data-aktif="true"] .sayi { color: inherit; border-color: rgba(255,255,255,.25); }
.mega-sekme:hover .no, .mega-sekme[data-aktif="true"] .no { color: var(--mavi-2); }
.mega-sag { display: flex; gap: 1.6rem; }

.mega-vitrin { position: relative; border-radius: 24px; background: radial-gradient(70% 90% at 30% 20%, #1f1f23, var(--murekkep) 70%); overflow: hidden; isolation: isolate; color: var(--porselen); }
.mega-vitrin::after { content: none; }
.mega-isik { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; mix-blend-mode: screen; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,128,200,.28), transparent 70%); pointer-events: none; z-index: 1; will-change: transform; }
.mega-ray { display: flex; align-items: flex-end; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 1.6rem 2rem .9rem; position: relative; z-index: 2; cursor: grab; scroll-behavior: smooth; }
.mega-ray::-webkit-scrollbar { display: none; }
.mega-ray.suruklu { cursor: grabbing; scroll-behavior: auto; }
.mega-grup { display: flex; align-items: flex-start; flex: 1 1 auto; min-width: 0; gap: .4rem; transition: opacity .4s var(--kolay); }
.mega-grup:last-child { border-right: 0; }
.mega-grup:not([data-aktif="true"]) { display: none; } /* yalnızca üzerine gelinen kategori */
.mega-grup { border-right: 0; padding-right: 0; margin-right: 0; }
.mega-ray { cursor: default; scroll-behavior: auto; }
.mega-grup-bas { display: grid; gap: .25rem; align-self: stretch; align-content: center; width: 170px; flex: none; margin: 0 1.8rem 0 1.2rem; padding-right: 1.8rem; border-right: 1px solid rgba(246,243,238,.16); color: var(--porselen); position: relative; z-index: 2; }
.mega-grup-bas b { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.05; letter-spacing: -.01em; }
.mega-grup-bas small { color: var(--gri-2); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.mega-grup-bas .git { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--mavi-2); margin-top: .5rem; opacity: .9; }
.mega-grup-bas .git svg { width: 14px; height: 14px; transition: transform .3s var(--kolay); }
.mega-grup-bas:hover .git svg { transform: translateX(3px); }
.mega-urun { position: relative; display: grid; justify-items: center; align-content: start; gap: .55rem; flex: 1 1 150px; min-width: 112px; max-width: 210px; padding: .6rem .3rem .4rem; border-radius: 18px; color: var(--porselen); transition: transform .5s var(--kolay); }
.mega-urun:hover { transform: none; }
.mega-urun .kaide { position: absolute; left: 14%; right: 14%; top: 92px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent 75%); transition: transform .5s var(--kolay), opacity .5s; z-index: 0; }
.mega-urun:hover .kaide { transform: scale(1.12); opacity: .8; }
.mega-urun .kesik { position: relative; z-index: 1; width: 100%; max-width: 128px; height: 104px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }
.mega-urun .kart-k { position: relative; z-index: 1; width: min(100%, 104px); height: 104px; border-radius: 16px; overflow: hidden; background: #fbfaf8; box-shadow: 0 18px 30px -16px rgba(0,0,0,.7); display: block; }
.mega-urun .kart-k img { width: 100%; height: 100%; object-fit: cover; }
.mega-urun .m { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.mega-urun .m b { font-family: var(--serif); font-weight: 400; font-size: .96rem; line-height: 1.15; max-width: 14ch; min-height: 2.3em; display: flex; align-items: flex-start; justify-content: center; } /* 1 ya da 2 satır: hepsi aynı yükseklik, altındaki renk noktaları hizalı */
.mega-urun .m .n { display: flex; gap: .25rem; }
.mega-urun .m .n i { width: 9px; height: 9px; border-radius: 50%; background: #ddd center/cover; box-shadow: 0 0 0 1px rgba(246,243,238,.25); }
.mega-urun .m small { color: var(--gri-2); font-size: .74rem; }
.mega-urun-bos .cizgi { position: relative; z-index: 1; width: 64px; height: 104px; object-fit: contain; }
.mega-urun-bos .m b em { color: var(--mavi-2); }

/* .ust-menu a kurallarını mega içinde sıfırla */
.ust-menu .mega a { position: static; font-size: inherit; font-weight: inherit; padding: 0; }
.ust-menu .mega a::after { content: none; }
.ust-menu .mega .mega-sekme { padding: .7rem 1.1rem .7rem .9rem; font-size: 1.15rem; }
.ust-menu .mega .mega-urun { position: relative; padding: .6rem .5rem .4rem; }
.ust-menu .mega .baglanti { position: relative; font-weight: 600; padding-bottom: .15rem; font-size: .9rem; color: var(--m-yazi); }
.ust-menu .mega .baglanti::after { content: ""; }
@media (max-width: 1100px) { .mega { display: none; } }
.mobil-alt { list-style: none; margin: .2rem 0 .8rem 1.2rem; padding: 0; display: grid; gap: .1rem; }
.mobil-menu .mobil-alt li a { font-family: var(--sans); font-size: 1rem; color: var(--gri-2); padding: .25rem 0; }
.mobil-menu .mobil-alt li a::before { content: "— "; color: var(--mavi); }
@media (max-width: 1260px) { .ust-menu { gap: 1.2rem; } .ust-menu a { font-size: .86rem; } .ust .kapsayici { gap: 1.2rem; } }
@media (max-width: 1100px) {
  .ust-menu, .ust-buton-metin { display: none; }
  .hamburger { display: grid; }
}
.mobil-menu { position: fixed; inset: 0; z-index: 150; background: var(--murekkep); color: var(--porselen); padding: calc(var(--ust-yukseklik) + 1rem) var(--olcu) 2rem; display: grid; align-content: space-between; transform: translateY(-100%); transition: transform .7s var(--sert); }
.mobil-menu[data-acik="true"] { transform: none; }
.mobil-menu:not([data-acik="true"]) { visibility: hidden; transition: transform .7s var(--sert), visibility 0s .7s; } /* kapalıyken taşan içerik (düğmeler) görünmesin */
.mobil-menu[data-acik="true"] { visibility: visible; transition: transform .7s var(--sert); }
.mobil-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.mobil-menu li a { font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1.1; display: block; padding: .2rem 0; }
.mobil-menu .alt { display: flex; gap: .8rem; flex-wrap: wrap; }
.mobil-menu .alt .dugme { --d-zemin: var(--porselen); --d-yazi: var(--murekkep); }
.mobil-menu .alt .mobil-dil { --d-zemin: transparent; --d-yazi: var(--porselen); box-shadow: inset 0 0 0 1.5px rgba(246,243,238,.45); }
.mobil-menu .alt .mobil-dil:hover { color: #fff; box-shadow: inset 0 0 0 1.5px transparent; }
.mobil-kapat { position: fixed; top: 22px; right: var(--olcu); z-index: 160; width: 40px; height: 40px; border-radius: 50%; display: none; place-items: center; box-shadow: inset 0 0 0 1.5px var(--porselen); color: var(--porselen); }
.mobil-menu[data-acik="true"] ~ .mobil-kapat { display: grid; }

.alt-bolum { background: var(--murekkep); color: var(--porselen); padding-block: clamp(4rem, 8vw, 7rem) 2rem; position: relative; overflow: hidden; }
.alt-bolum .cizgiler { position: absolute; right: -4%; top: -10%; width: 42%; aspect-ratio: 1; opacity: .18; pointer-events: none; }
.alt-ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--olcu); }
.alt-sutunlar { display: contents; }
.alt-bas { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: default; }
.alt-bas svg { display: none; width: 18px; height: 18px; }
@media (min-width: 861px) { .alt-bas { pointer-events: none; } }
@media (max-width: 860px) { body.imlec-aktif .alt-bas { cursor: none; } }
.alt-bas:focus { outline: none; }
.alt-bas:focus-visible { outline: 2px solid var(--mavi); outline-offset: -2px; }
@media (hover: none) { .alt-bas:hover { background: none; color: inherit; } .alt-bas:active { opacity: .7; } }
.alt-bolum .sosyal-mobil { display: none; }
@media (max-width: 860px) {
  .alt-ust { grid-template-columns: 1fr; gap: 1.6rem; }
  .alt-sutunlar { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid rgba(246,243,238,.14); border-radius: 18px; overflow: hidden; }
  .alt-sutun { border-top: 1px solid rgba(246,243,238,.12); }
  .alt-sutun:first-child { border-top: 0; }
  .alt-bolum .alt-sutun h4 { margin: 0; }
  .alt-bas { padding: 1.1rem 1.2rem; font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--porselen); cursor: pointer; }
  .alt-bas svg { display: block; transition: transform .4s var(--kolay); color: var(--gri-2); }
  .alt-bas[aria-expanded="true"] svg { transform: rotate(180deg); }
  .alt-icerik { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--kolay); }
  .alt-bolum .alt-icerik > ul { overflow: hidden; min-height: 0; padding: 0 1.2rem; gap: .7rem; }
  .alt-sutun:has(.alt-bas[aria-expanded="true"]) .alt-icerik { grid-template-rows: 1fr; }
  .alt-bolum .alt-sutun:has(.alt-bas[aria-expanded="true"]) .alt-icerik > ul { padding-bottom: 1.2rem; }
  .alt-sutun .sosyal { display: none; }
  .alt-bolum .sosyal-mobil { display: flex; justify-content: center; margin-top: 1.6rem; }
}
.alt-bolum h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gri-2); margin: 0 0 1.2rem; }
.alt-bolum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.alt-bolum ul a { opacity: .85; transition: opacity .3s, color .3s; }
.alt-bolum ul a:hover { opacity: 1; color: var(--mavi-2); }
.alt-logo { display: block; margin-bottom: 1.4rem; }
.alt-logo img { height: 24px; width: auto; }
.alt-ayrac { height: 1px; background: rgba(246,243,238,.16); margin-top: clamp(3rem, 6vw, 5rem); }
.alt-son { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; gap: var(--olcu); padding-top: 1.6rem; font-size: .8rem; color: var(--gri-2); }
.alt-son .alt-yasal { grid-column: 2 / 4; text-align: left; }
.alt-son-sag { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.alt-son-sag > span { width: calc(4 * 40px + 3 * .5rem); text-align: right; white-space: nowrap; }
.yukari { position: relative; width: 48px; height: 48px; border-radius: 50%; background: transparent; color: var(--porselen); display: grid; place-items: center; isolation: isolate; box-shadow: inset 0 0 0 1.5px rgba(246,243,238,.3); transition: color .3s, transform .5s var(--kolay), box-shadow .3s; flex: none; }
.yukari::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mavi); transform: scale(0); transition: transform .5s var(--sert); z-index: -1; }
.yukari:hover::before { transform: scale(1); }
.yukari:hover { color: #fff; box-shadow: none; }
.yukari-halka { position: absolute; inset: -1px; }
.yukari-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.yukari-halka circle { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset .2s linear; color: var(--mavi-2); }
.yukari:hover .yukari-halka { opacity: 0; }
.yukari-ok { width: 18px; height: 18px; transition: transform .5s var(--kolay); }
.yukari:hover .yukari-ok { transform: translateY(-2px); }
.yukari-yazi { display: none; }

.alt-son a:hover { color: var(--porselen); }
.alt-son-sag a { color: var(--porselen); border-bottom: 1px solid rgba(246,243,238,.3); }
.alt-son-sag a:hover { border-color: var(--mavi-2); color: var(--mavi-2); }
.alt-yasal { text-align: center; }
.alt-yasal a:hover { color: var(--porselen); }
@media (max-width: 980px) { .alt-son { grid-template-columns: 1fr 1fr; } .alt-son .alt-yasal { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .alt-son { grid-template-columns: 1fr; gap: .5rem; text-align: center; position: relative; padding-right: 0; }
  .alt-son .alt-yasal { display: none; }
  .alt-son-sag { display: contents; }
  .alt-son-sag > span { display: block; }
  .alt-son .yukari { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}

/* sosyal ikonlar */
.sosyal { display: flex; gap: .5rem; margin-top: 1.2rem; }
.sosyal-ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--cizgi); color: inherit; transition: all .35s var(--kolay); }
.sosyal-ikon svg { width: 17px; height: 17px; }
.sosyal-ikon:hover { background: var(--mavi); color: #fff; box-shadow: none; }
.alt-bolum .sosyal-ikon, .mobil-menu .sosyal-ikon { box-shadow: inset 0 0 0 1.5px rgba(246,243,238,.25); }
.sosyal-acik { margin-top: 0; }

/* ---------- 7. Bölümler ---------- */
/* Kahraman (ana sayfa) */
.kahraman { position: relative; min-height: 100svh; display: grid; align-items: end; padding-top: var(--ust-yukseklik); overflow: hidden; background: var(--murekkep); color: var(--porselen); isolation: isolate; }
.kahraman::before { content: ""; position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 50% at var(--mx, 70%) var(--my, 45%), rgba(0, 128, 200, .28), transparent 60%),
  radial-gradient(40% 40% at 20% 90%, rgba(201, 161, 92, .10), transparent 60%),
  linear-gradient(180deg, #121214 0%, #17171a 60%, #141416 100%); transition: background .2s; }
.kahraman::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.kahraman .kapsayici { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--olcu); align-items: end; padding-bottom: clamp(2rem, 5vw, 4rem); min-height: calc(100svh - var(--ust-yukseklik)); }
.kahraman-metin { display: grid; gap: 1.6rem; align-content: end; padding-bottom: 1rem; }
.kahraman-metin h1 { max-width: 11ch; }
.kahraman-metin .giris { color: var(--gri-2); max-width: 44ch; }
.kahraman-dugmeler { display: flex; gap: .8rem; flex-wrap: wrap; }
.kahraman .dugme { --d-zemin: var(--porselen); --d-yazi: var(--murekkep); }
.kahraman .dugme-cerceve { --d-zemin: transparent; --d-yazi: var(--porselen); box-shadow: inset 0 0 0 1.5px rgba(246,243,238,.35); }
.kahraman .dugme-cerceve:hover { box-shadow: inset 0 0 0 1.5px transparent; }
.sahne { position: relative; display: grid; place-items: center; min-height: 52vh; }
.sahne-isik { position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 128, 200, .35), transparent 70%); filter: blur(30px); z-index: 0; }
.sahne-podyum { position: absolute; bottom: 8%; left: 10%; right: 10%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent 72%); z-index: 0; }
.sahne-urun { position: relative; z-index: 1; width: min(92%, 640px); aspect-ratio: 1; display: grid; place-items: center; }
.sahne-urun img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .7s var(--kolay), transform 1s var(--kolay); filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); will-change: transform; }
.sahne-urun img.aktif { opacity: 1; transform: none; }
.sahne-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sahne-alt .renkler { gap: .6rem; }
.sahne-alt .renk { border-color: var(--murekkep); box-shadow: 0 0 0 1px rgba(246,243,238,.25); }
.sahne-alt .renk[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mavi); }
.sahne-ad { font-family: var(--serif); font-size: 1.05rem; display: grid; }
.sahne-ad small { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gri-2); }
.kahraman-kenar { display: none; position: absolute; left: 10px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gri-2); z-index: 2; }
.kahraman-sayac { position: absolute; right: var(--olcu); top: calc(var(--ust-yukseklik) + 1.5rem); font-family: var(--serif); font-size: .95rem; color: var(--gri-2); z-index: 2; }
.kahraman-sayac b { color: var(--porselen); font-weight: 400; font-size: 1.5rem; }
@media (min-width: 1560px) { .kahraman-kenar { display: block; } }
@media (max-width: 980px) {
  .kahraman .kapsayici { grid-template-columns: 1fr; align-items: start; padding-top: 1rem; min-height: auto; }
  .kahraman { min-height: auto; }
  .sahne { min-height: auto; order: -1; margin-top: 1rem; }
  .sahne-urun { width: min(100%, 440px); }
  .kahraman-kenar, .kahraman-sayac { display: none; }
  .sahne-alt { position: static; margin-top: .5rem; }
}

/* koleksiyon rayı · kendi kendine akar, üstüne gelince durur */
.ray-akis { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); padding-block: .5rem 1rem; }
.ray-ic { display: flex; gap: clamp(1rem, 2vw, 1.6rem); padding-right: clamp(1rem, 2vw, 1.6rem); flex: none; animation: ray-kay 48s linear infinite; }
.ray-ic > * { width: clamp(260px, 26vw, 380px); flex: none; }
.ray-akis:hover .ray-ic { animation-play-state: paused; }
@keyframes ray-kay { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ray-ic { animation: none; } .ray-akis { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } }
.ray-oklar { display: flex; gap: .5rem; }
.ok { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--cizgi); transition: all .35s var(--kolay); }
.ok:hover { background: var(--mavi); color: #fff; box-shadow: none; }
.ok svg { width: 18px; height: 18px; }

/* manifesto / büyük yazı */
.manifesto { position: relative; }
.manifesto p { font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 3.6rem); line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; margin: 0; }
.manifesto p .k { color: var(--yazi-2); transition: color .6s; }
.manifesto p .k.g { color: var(--yazi); }

/* kategori kapıları */
.kapilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .kapilar { grid-template-columns: 1fr; } }
.kapi { position: relative; aspect-ratio: 3/4; border-radius: 24px; overflow: hidden; background: var(--kil); color: var(--murekkep); display: grid; align-content: end; padding: 1.6rem; isolation: isolate; }
.kapi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.4s var(--kolay); }
.kapi:hover img { transform: scale(1.03); }
.kapi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(20,20,22,.75)); }
.kapi .baslik { color: var(--porselen); font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.kapi .alt-yazi { color: rgba(246,243,238,.75); margin-top: .4rem; }
.kapi .sayi { position: absolute; top: 1.3rem; left: 1.6rem; font-family: var(--serif); color: var(--porselen); }
.kapi .ok { position: absolute; top: 1.2rem; right: 1.2rem; color: var(--porselen); box-shadow: inset 0 0 0 1.5px rgba(246,243,238,.4); }
.kapi.bos { background: var(--porselen-2); color: var(--murekkep); }
.kapi.bos::before { display: none; }
.kapi.bos .baslik, .kapi.bos .sayi { color: var(--murekkep); }
.kapi.bos .alt-yazi { color: var(--gri); }
.kapi.bos .ok { color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.kapi.bos .desen { position: absolute; inset: 0; z-index: -1; opacity: .5; background: repeating-linear-gradient(-60deg, transparent 0 28px, rgba(0,128,200,.1) 28px 30px); }

/* salonunda gör · bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 1rem; }
.bento > * { border-radius: 24px; overflow: hidden; position: relative; min-height: 220px; }
.bento img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 1.6s var(--kolay); }
.bento > *:hover img { transform: scale(1.03); }
.bento > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20,20,22,.7)); pointer-events: none; }
.bento .b1 { grid-column: span 7; grid-row: span 2; }
.bento .b2 { grid-column: span 5; }
.bento .b3 { grid-column: span 5; }
.bento .b4 { grid-column: span 4; }
.bento .b5 { grid-column: span 4; }
.bento .b6 { grid-column: span 4; }
.bento .yazi { position: absolute; left: 1.4rem; bottom: 1.2rem; right: 1.4rem; color: var(--porselen); z-index: 2; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.bento .yazi b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; display: block; }
.bento .yazi small { opacity: .8; }
.bento .metin-kutu { background: var(--murekkep); color: var(--porselen); padding: 1.6rem; display: grid; align-content: space-between; }
.bento .metin-kutu .orta { max-width: 14ch; }
@media (max-width: 860px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento .b1 { grid-column: span 6; } .bento .b2, .bento .b3 { grid-column: span 3; } .bento .b4, .bento .b5, .bento .b6 { grid-column: span 6; } }

/* kimin için · ikili panel */
.paneller { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .paneller { grid-template-columns: 1fr; } }
.panel { position: relative; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 24px; min-height: 420px; display: grid; align-content: space-between; gap: 2rem; background: var(--kart); overflow: hidden; transition: transform .6s var(--kolay), box-shadow .6s; }
.panel:hover { box-shadow: var(--golge); }
.panel-koyu { background: var(--murekkep); color: var(--porselen); }
.panel .etiket { color: inherit; opacity: .7; }
.panel ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; color: var(--yazi-2); }
.panel-koyu ul { color: var(--gri-2); }
.panel ul li::before { content: "—"; margin-right: .6rem; color: var(--mavi); }
.panel > .dugme, .panel > div > .dugme { justify-self: start; }
.panel .cizgiler { position: absolute; right: -10%; bottom: -20%; width: 55%; opacity: .12; pointer-events: none; }

/* sayı/ilke şeridi */
.ilkeler { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--cizgi); }
@media (max-width: 860px) { .ilkeler { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ilkeler { grid-template-columns: 1fr; } }
.ilke { padding: 1.8rem 1.4rem 1.8rem 0; border-bottom: 1px solid var(--cizgi); display: grid; gap: .6rem; align-content: start; }
.ilke .no { font-family: var(--serif); font-size: .95rem; color: var(--mavi); }
.ilke b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.ilke p { font-size: .92rem; color: var(--yazi-2); margin: 0; }

/* ---------- 8. Sayfalar ---------- */
.sayfa-bas { padding-top: calc(var(--ust-yukseklik) + clamp(2.5rem, 6vw, 6rem)); padding-bottom: clamp(2rem, 4vw, 4rem); }
.sayfa-bas h1 { max-width: 16ch; font-size: clamp(2.6rem, 5.4vw, 4.5rem); } /* iç sayfa başlıkları: Ürünler ile aynı ölçek (ana sayfa slaytı daha büyük kalır) */
.sayfa-bas .giris { margin-top: 1.2rem; font-size: .875rem; max-width: 64ch; }
.kirinti { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--yazi-2); margin-bottom: 1.6rem; flex-wrap: wrap; }
.kirinti > * { display: inline-flex; align-items: center; gap: .6rem; }
.kirinti a:hover { color: var(--yazi); }
.kirinti span::before { content: "/"; opacity: .5; }

/* kategori / liste */
.filtre-cubuk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; border-block: 1px solid var(--cizgi); position: sticky; top: var(--ust-yukseklik); background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 20; }
.filtreler { display: flex; gap: .4rem; flex-wrap: wrap; }
.filtre { padding: .55rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--cizgi); display: inline-flex; align-items: center; gap: .5rem; transition: all .3s var(--kolay); }
.filtre .nokta { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.filtre:hover { box-shadow: inset 0 0 0 1.5px var(--mavi); color: var(--mavi); }
.filtre[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); box-shadow: none; }
.filtre[aria-pressed="true"]:hover { color: var(--zemin); }
.liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem) clamp(1rem, 2vw, 1.6rem); margin-top: 2.5rem; }
@media (max-width: 980px) { .liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .liste { grid-template-columns: 1fr; } }
.liste .kart[hidden] { display: none; }
.bos-durum { padding: clamp(3rem, 8vw, 7rem) 0; text-align: center; display: grid; gap: 1.2rem; justify-items: center; }
.bos-durum .orta { max-width: 24ch; }

/* ürün detay */
.urun { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); padding-top: calc(var(--ust-yukseklik) + 1.5rem); align-items: start; }
@media (max-width: 980px) { .urun { grid-template-columns: 1fr; } }
.galeri { position: sticky; top: calc(var(--ust-yukseklik) + 1rem); display: grid; grid-template-columns: 72px 1fr; gap: 1rem; }
@media (max-width: 980px) { .galeri { position: static; grid-template-columns: 1fr; } }
.galeri-kucukler { display: grid; gap: .6rem; align-content: start; }
@media (max-width: 980px) { .galeri-kucukler { grid-auto-flow: column; order: 2; overflow-x: auto; } }
.galeri-kucukler button { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px var(--cizgi); padding: 0; transition: box-shadow .3s; }
.galeri-kucukler button:hover { box-shadow: inset 0 0 0 1.5px var(--gri-2); }
.galeri-kucukler button[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--mavi); }
.galeri-kucukler img { width: 100%; height: 100%; object-fit: cover; }
.galeri-buyuk { position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.galeri-buyuk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--kolay); }
.galeri-buyuk img.aktif { opacity: 1; }
.galeri-buyuk .zoom { position: absolute; right: 1rem; bottom: 1rem; }
.urun-bilgi { display: grid; gap: 1.6rem; align-content: start; padding-top: .5rem; }
.urun-bilgi h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.urun-fiyat { display: flex; align-items: baseline; gap: 1rem; font-family: var(--serif); font-size: 1.8rem; }
.secim-bas { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .7rem; }
.secim-bas span { color: var(--yazi-2); font-weight: 500; }
.renk-secim { display: flex; gap: .6rem; flex-wrap: wrap; }
.adet { display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1.5px var(--cizgi); border-radius: 999px; }
.adet button { width: 46px; height: 50px; font-size: 1.2rem; }
.adet input { width: 44px; text-align: center; border: 0; background: transparent; font-weight: 600; }
.satin { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.satin .dugme { padding: 1.05rem 1.8rem; flex: 1; justify-content: center; }
.guven { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; font-size: .8rem; color: var(--yazi-2); }
.guven div { display: flex; gap: .5rem; align-items: center; padding: .8rem; border-radius: 12px; background: var(--zemin-2); }
.guven svg { width: 16px; height: 16px; color: var(--mavi); flex: none; }
.teknik { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; font-size: .92rem; }
.teknik div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--cizgi-2); }
.teknik dt { color: var(--yazi-2); }
.teknik dd { margin: 0; font-weight: 600; text-align: right; }
.salonda { position: relative; aspect-ratio: 16/8; border-radius: 28px; overflow: hidden; }
.salonda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.salonda .yazi { position: absolute; left: clamp(1.4rem, 4vw, 3rem); bottom: clamp(1.4rem, 4vw, 3rem); color: var(--porselen); max-width: 30ch; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
@media (max-width: 640px) { .salonda { aspect-ratio: 4/5; } }

/* kurumsal */
.hikaye { display: grid; grid-template-columns: 1fr 1fr; gap: var(--olcu); align-items: center; }
@media (max-width: 860px) { .hikaye { grid-template-columns: 1fr; } }
.hikaye-gorsel { border-radius: 28px; overflow: hidden; aspect-ratio: 4/5; position: relative; }
.hikaye-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zaman { display: grid; gap: 0; border-top: 1px solid var(--cizgi); }
.zaman div { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--cizgi); }
.zaman b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
@media (max-width: 560px) { .zaman div { grid-template-columns: 1fr; gap: .4rem; } }

/* medya */
.medya-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .medya-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .medya-izgara { grid-template-columns: 1fr; } }
.medya-kart { position: relative; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; background: var(--kil); display: grid; align-content: end; padding: 1.4rem; color: var(--porselen); }
.medya-kart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.4s var(--kolay); }
.medya-kart:hover img { transform: scale(1.03); }
.medya-kart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(20,20,22,.8)); }
.medya-kart .oynat { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(246,243,238,.92); color: var(--murekkep); display: grid; place-items: center; }
.medya-kart .oynat svg { width: 20px; height: 20px; margin-left: 3px; }
.medya-kart.belge { background: var(--murekkep); }
.indir-kart { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem; border-radius: 20px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--cizgi); transition: transform .4s var(--kolay); }
.indir-kart:hover { border-color: var(--mavi); color: var(--mavi); }
.indir-kart b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; display: block; }
.indir-kart small { color: var(--yazi-2); }

/* satış noktaları */
.harita-kutu { position: relative; border-radius: 28px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--cizgi); padding: clamp(1.2rem, 3vw, 2.4rem); display: grid; gap: clamp(1rem, 2vw, 1.6rem); overflow: hidden; }
.harita-sol { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 1rem 1.6rem; align-items: center; padding-top: clamp(1rem, 2vw, 1.6rem); border-top: 1px solid var(--cizgi); }
.harita-sol .etiket { grid-column: 1 / -1; margin: 0; }
.harita-sol p { margin: 0 !important; }
@media (max-width: 560px) { .harita-sol { grid-template-columns: 1fr; } }
.tr-harita { max-width: 980px; margin-inline: auto; }
.tr-harita { width: 100%; height: auto; display: block; }
.tr-harita path { fill: var(--kil); stroke: var(--zemin); stroke-width: 1.2; stroke-linejoin: round; transition: fill .3s var(--kolay); cursor: pointer; outline: none; }
.tr-harita path.var { fill: var(--murekkep-3); }
.tr-harita path:hover, .tr-harita path:focus-visible { fill: var(--mavi); }
.tr-harita path.secili { fill: var(--mavi); }
.harita-ipucu { position: absolute; pointer-events: none; z-index: 3; background: var(--murekkep); color: var(--porselen); font-size: .8rem; font-weight: 600; padding: .45rem .7rem; border-radius: 8px; transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.harita-ipucu.goster { opacity: 1; }
.harita-ipucu small { display: block; font-weight: 500; color: var(--gri-2); }
.sehir-kutu { position: relative; }
.sehir-kutu select { width: 100%; appearance: none; -webkit-appearance: none; padding: 1rem 2.8rem 1rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--cizgi); background: var(--zemin); font-weight: 600; cursor: pointer; }
.sehir-kutu select:focus { outline: none; border-color: var(--mavi); }
.sehir-kutu svg { position: absolute; right: 1rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.harita-aciklama { position: absolute; right: clamp(1.2rem, 3vw, 2.4rem); bottom: 1.2rem; display: flex; gap: .6rem; align-items: center; font-size: .78rem; color: var(--yazi-2); }
.renk-ornek { width: 12px; height: 12px; border-radius: 3px; background: var(--kil); display: inline-block; margin-left: .6rem; }
.renk-ornek.dolu { background: var(--murekkep-3); margin-left: 0; }
.noktalar-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: clamp(2rem, 4vw, 3rem) 0 1.2rem; flex-wrap: wrap; }
.noktalar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 980px) { .noktalar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .noktalar { grid-template-columns: 1fr; } }
.nokta-kart { padding: 1.4rem; border-radius: 20px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--cizgi); display: grid; gap: .8rem; align-content: start; transition: transform .4s var(--kolay), box-shadow .4s; }
.nokta-kart:hover { box-shadow: inset 0 0 0 1px var(--mavi); }
.nokta-kart[hidden] { display: none; }
.nokta-kart .il { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mavi); }
.nokta-kart b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; display: block; line-height: 1.15; }
.nokta-kart small { color: var(--yazi-2); display: block; }
.nokta-kart .satir { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }

/* iletişim */
.iletisim { display: grid; grid-template-columns: 1fr 1fr; gap: var(--olcu); align-items: start; }
@media (max-width: 860px) { .iletisim { grid-template-columns: 1fr; } }
.iletisim-bilgi { display: grid; gap: 2rem; }
.iletisim-bilgi .blok b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-bottom: .3rem; line-height: 1.25; }
.iletisim-bilgi .blok b a { color: inherit; }
.iletisim-bilgi .blok b a:hover { color: var(--mavi); }
.iletisim-bilgi .blok a:not(.sosyal-ikon) { color: var(--yazi-2); }
.iletisim-bilgi .blok a:not(.sosyal-ikon):hover { color: var(--mavi); }
.iletisim-bilgi .sosyal-ikon { color: var(--yazi); }
.iletisim-bilgi .sosyal-ikon:hover { color: #fff; background: var(--mavi); }
.form-kart { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 28px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--cizgi); }
.form-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .form-iki { grid-template-columns: 1fr; } }
.secenek { display: flex; gap: .5rem; flex-wrap: wrap; }
.secenek label { padding: .6rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--cizgi); cursor: pointer; font-size: .9rem; font-weight: 600; }
.secenek { position: relative; }
.secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; left: 0; top: 0; pointer-events: none; }
.secenek input:checked + label { background: var(--yazi); color: var(--zemin); box-shadow: none; }

/* bayi girişi */
.giris-duzen { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
@media (max-width: 860px) { .giris-duzen { grid-template-columns: 1fr; } }
.giris-duzen { padding-top: var(--ust-yukseklik); }
.giris-sol { background: var(--murekkep); color: var(--porselen); padding: 3rem var(--olcu) 3rem; display: grid; align-content: space-between; position: relative; overflow: hidden; }
.giris-sol .cizgiler { position: absolute; right: -15%; top: 10%; width: 70%; opacity: .14; }
.giris-sag { padding: 3rem var(--olcu) 3rem; display: grid; place-items: center; }
.giris-kutu { width: min(100%, 440px); display: grid; gap: 1.4rem; }
.giris-sekme { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--cizgi); }
.giris-sekme button { padding: .8rem 0; font-weight: 600; color: var(--yazi-2); position: relative; }
.giris-sekme button[aria-selected="true"] { color: var(--yazi); }
.giris-sekme button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mavi); }

/* sepet */
.sepet-duzen { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--olcu); align-items: start; }
@media (max-width: 980px) { .sepet-duzen { grid-template-columns: 1fr; } }
.sepet-satir { display: grid; grid-template-columns: 110px 1fr auto; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--cizgi); align-items: center; }
.sepet-satir img { border-radius: 14px; background: #fff; aspect-ratio: 1; object-fit: cover; }
.sepet-satir b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; display: block; }
.sepet-satir small { color: var(--yazi-2); }
.sepet-satir .sil { font-size: .8rem; color: var(--yazi-2); margin-top: .6rem; display: inline-block; }
.sepet-ozet { padding: clamp(1.4rem, 3vw, 2rem); border-radius: 24px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--cizgi); display: grid; gap: 1rem; position: sticky; top: calc(var(--ust-yukseklik) + 1rem); }
.sepet-ozet .satir { display: flex; justify-content: space-between; font-size: .95rem; color: var(--yazi-2); }
.sepet-ozet .toplam { display: flex; justify-content: space-between; font-family: var(--serif); font-size: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--cizgi); }
.adim { display: flex; gap: 1.5rem; font-size: .8rem; color: var(--yazi-2); margin-bottom: 1rem; }
.adim b { color: var(--yazi); }

/* ---------- 9. Hareket ---------- */
[data-goster] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--kolay), transform 1.1s var(--kolay); transition-delay: var(--gecikme, 0s); }
[data-goster].goster { opacity: 1; transform: none; }
.harf-harf span { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); transition: opacity .8s var(--kolay), transform .9s var(--kolay); }
.harf-harf.goster span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-goster], .harf-harf span { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* sayfa geçiş perdesi */
.gecis { position: fixed; inset: 0; z-index: 2700; background: var(--murekkep); clip-path: inset(100% 0 0 0); pointer-events: none; display: grid; place-items: center; }
.gecis svg { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .5s var(--kolay); }
.gecis.giriyor { clip-path: inset(0 0 0 0); transition: clip-path .65s var(--sert); pointer-events: auto; }
.gecis.giriyor svg { opacity: 1; transform: none; transition-delay: .25s; }
.gecis.aciliyor { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--sert); }
.gecis.hazir { clip-path: inset(0 0 0 0); transition: none; }
html.gecis-geldi .gecis { clip-path: inset(0 0 0 0); transition: none; }
html.gecis-geldi .gecis svg { opacity: 1; transform: none; transition: none; }
body.gecis-ici { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gecis { display: none; } }

/* özel imleç: nokta + halka; tıklanabilir öğede halka büyür ve maviye döner */
.imlec { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  body.imlec-aktif, body.imlec-aktif a, body.imlec-aktif button, body.imlec-aktif [role=button], body.imlec-aktif label, body.imlec-aktif select, body.imlec-aktif summary { cursor: none; }
  body.imlec-aktif input, body.imlec-aktif textarea { cursor: text; }
  .imlec { display: block; position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; will-change: transform; transition: opacity .2s; }
  .imlec-nokta, .imlec-halka { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
  .imlec-nokta { width: 8px; height: 8px; background: var(--murekkep); box-shadow: 0 0 0 1px rgba(246,243,238,.6); z-index: 2; transition: background .2s, transform .2s; }
  .imlec-halka { width: 60px; height: 60px; border: 1px solid rgba(20,20,22,.55); transform: translate(-50%, -50%) scale(.6); transition: transform .22s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s; }
  body.imlec-link .imlec-halka { transform: translate(-50%, -50%) scale(1); background: rgba(0,128,200,.1); border-color: var(--mavi); }
  body.imlec-link .imlec-nokta { background: var(--mavi); }
  body.imlec-basili .imlec-halka { transform: translate(-50%, -50%) scale(.85); }
  body.imlec-gizli .imlec { opacity: 0 !important; }
  /* koyu zeminde açık nokta ve halka */
  body.imlec-koyu .imlec-nokta { background: var(--porselen); box-shadow: 0 0 0 1px rgba(20,20,22,.3); }
  body.imlec-koyu .imlec-halka { border-color: rgba(246,243,238,.7); }
  body.imlec-koyu.imlec-link .imlec-nokta { background: var(--mavi-2, #4fb3e8); }
  body.imlec-koyu.imlec-link .imlec-halka { border-color: var(--mavi-2, #4fb3e8); background: rgba(0,128,200,.15); }
  .ray.suruklu { scroll-snap-type: none; cursor: grabbing; }
}

/* yükleyici */
.yukleyici { display: none; position: fixed; inset: 0; z-index: 3000; background: var(--murekkep); color: var(--porselen); transition: clip-path 1.1s var(--sert); }
.yukleyici.bitti { clip-path: inset(0 0 100% 0); pointer-events: none; }
.yukleyici-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(70vw, 760px); overflow: hidden; }
.yukleyici-logo img { width: 100%; height: auto; transform: translateY(110%); transition: transform 1.1s var(--kolay); }
.yukleyici.goster .yukleyici-logo img { transform: none; }
.yukleyici-alt { position: absolute; left: var(--olcu); right: var(--olcu); bottom: 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.yukleyici-meta { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gri-2); line-height: 1.7; }
.yukleyici-sayi { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 8vw, 110px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144; }
.yukleyici-cubuk { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--mavi); }
body.yukleniyor { overflow: hidden; }
html.ilk-ziyaret .yukleyici { display: block; } /* yükleyici yalnızca oturumun ilk sayfasında; JS beklenmeden gizli gelir */
@media (prefers-reduced-motion: reduce) { .yukleyici { display: none; } }

/* kaydırma ilerleme çubuğu */
.ilerleme { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 120; pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--mavi); opacity: .9; }

/* paralaks görseller */
[data-paralaks] { overflow: hidden; }
[data-paralaks] > img { transform: translate3d(0, var(--py, 0), 0) scale(1.14) !important; will-change: transform; transition: clip-path 1.3s var(--sert) !important; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { [data-paralaks] > img { transform: none; } }

/* perde ile açılan görseller */
[data-perde] > img, [data-perde] > .desen { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--sert); }
[data-perde].goster > img, [data-perde].goster > .desen { clip-path: inset(0 0 0 0); }
[data-perde] { background: var(--kil); }
[data-perde].bos { background: var(--porselen-2); }
@media (prefers-reduced-motion: reduce) { [data-perde] > img { clip-path: none; } }

/* kahraman kaydırma */
.kahraman .sahne-urun, .kahraman-metin { will-change: transform, opacity; }

/* imleç ışığı (koyu bölümler) */
.isik { position: fixed; z-index: 1; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; left: 0; top: 0; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0,128,200,.12), transparent 70%); opacity: 0; transition: opacity .5s; mix-blend-mode: screen; }
body.koyu-alan .isik { opacity: 1; }
@media (hover: none) { .isik { display: none; } }

/* ---------- 10. Yardımcı ---------- */
.ortala { text-align: center; }
.sag { text-align: right; }
.dar { max-width: 60ch; }
.ust-cizgi { border-top: 1px solid var(--cizgi); padding-top: var(--olcu); }
.gizli-mobil { } @media (max-width: 640px) { .gizli-mobil { display: none !important; } }
.cizgiler-svg { display: block; }

/* ---------- 11. Mobil / tablet düzeltmeleri ---------- */
@media (max-width: 860px) {
  .kapi { aspect-ratio: 4/3; }
  .kapi.bos { aspect-ratio: auto; min-height: 190px; }
  .panel { min-height: auto; gap: 1.6rem; }
  .giris-duzen { min-height: auto; }
  .giris-sol { gap: 2.2rem; padding-bottom: 2.6rem; }
  .giris-sag { padding-top: 2.6rem; place-items: start center; }
  .harita-aciklama { position: static; justify-content: flex-end; margin-top: .6rem; }
  .bento .metin-kutu { min-height: 200px; }
  .ust-menu a, .alt-bolum ul a { padding: .25rem 0; display: inline-block; }
  .kirinti > * { padding: .25rem 0; }
}
@media (max-width: 560px) {
  .satin .dugme { flex: 1 1 auto; padding: .95rem 1.2rem; }
  .satin .dugme-cerceve { flex-basis: 100%; }
  .guven { grid-template-columns: 1fr; gap: .4rem; }
  .guven div { padding: .6rem .8rem; }
  .sepet-satir { grid-template-columns: 90px 1fr; }
  .sepet-satir .fiyat { grid-column: 2; }
  .teknik { grid-template-columns: 1fr; }
  .kahraman-dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
  .sayfa-bas h1 { max-width: none; }
}

/* ---------- 12. Arama ve hesap ---------- */
.arama { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: start center; padding: clamp(5rem, 10vh, 7rem) var(--olcu) 2rem; background: rgba(20,20,22,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s var(--kolay), visibility 0s .35s; overflow: auto; }
.arama[data-acik="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.arama-kutu { width: min(680px, 100%); background: var(--porselen); color: var(--murekkep); border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem) 1.2rem; box-shadow: 0 60px 120px -40px rgba(0,0,0,.6); transform: translateY(14px) scale(.98); transition: transform .5s var(--kolay); max-height: calc(100svh - 7rem); overflow: auto; }
.arama[data-acik="true"] .arama-kutu { transform: none; }
.arama-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.arama-etiket { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gri); }
.arama-kapat { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background .3s, color .3s; }
.arama-kapat:hover { background: var(--murekkep); color: var(--porselen); }
.arama-kapat svg { width: 18px; height: 18px; }
.arama-form { border: 1.5px solid var(--murekkep); border-radius: 14px; padding: 0 1.2rem; transition: border-color .3s, box-shadow .3s; }
.arama-form:focus-within { border-color: var(--mavi); box-shadow: 0 0 0 4px rgba(0,128,200,.12); }
.arama-form input { width: 100%; border: 0; background: transparent; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.01em; padding: 1rem 0; color: var(--murekkep); }
.arama-form input:focus, .arama-form input:focus-visible { outline: none; }
.arama-form input::placeholder { color: var(--gri-2); }
.arama-form input::-webkit-search-cancel-button { display: none; }
.arama-sonuc-etiket { display: block; margin: 1.5rem 0 .3rem; }
.arama-sonuc { display: grid; }
.arama-sonuc .bos { padding: 1.4rem 0; color: var(--gri); font-size: .95rem; }
.arama-kart { display: grid; grid-template-columns: 64px 1fr auto; gap: 1.1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--cizgi); transition: padding-left .4s var(--kolay); }
.arama-kart:last-child { border-bottom: 0; }
.arama-kart:hover { padding-left: .4rem; }
.arama-kart .g { width: 64px; height: 76px; border-radius: 10px; overflow: hidden; background: #fbfaf8; display: grid; place-items: center; font-family: var(--serif); color: var(--mavi); font-size: 1.4rem; box-shadow: inset 0 0 0 1px var(--cizgi); }
.arama-kart .g img { width: 100%; height: 100%; object-fit: cover; }
.arama-kart b { display: block; font-family: var(--sans); font-weight: 600; font-size: .95rem; line-height: 1.2; margin-bottom: .3rem; }
.arama-kart b mark { background: rgba(0,128,200,.16); color: inherit; border-radius: 3px; }
.arama-kart small { color: var(--gri); font-size: .78rem; display: block; }
.arama-kart .tur { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mavi); display: block; margin-bottom: .25rem; }
.arama-kart .sag { font-size: .72rem; color: var(--gri); text-align: right; white-space: nowrap; display: grid; gap: .3rem; justify-items: end; }
.arama-kart .sag svg { width: 16px; height: 16px; color: var(--murekkep); transition: transform .3s var(--kolay); }
.arama-kart:hover .sag svg { transform: translateX(3px); }
body.arama-acik { overflow: hidden; }
body.arama-acik .mega { display: none; }

.mobil-arama { display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid rgba(246,243,238,.2); padding-bottom: .9rem; margin-bottom: 1.6rem; color: var(--porselen); }
.mobil-arama svg { width: 20px; height: 20px; opacity: .7; flex: none; }
.mobil-arama input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font-size: 1.05rem; padding: .3rem 0; }
.mobil-arama input:focus { outline: none; }
.mobil-arama input::placeholder { color: var(--gri-2); }

.giris-duzen.ters .giris-sol { order: 2; }
.giris-duzen.ters .giris-sag { order: 1; }
@media (max-width: 860px) { .giris-duzen.ters .giris-sol { order: 1; } .giris-duzen.ters .giris-sag { order: 2; } }
/* hesap sayfası */
.giris-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; color: var(--gri); }
.giris-liste li::before { content: "—"; margin-right: .6rem; color: var(--mavi); }
.giris-sol .giris-liste { color: #a39d94; }

/* ---------- 13. Slayt (ana sayfa) ---------- */
.slayt { position: relative; height: 100svh; min-height: 640px; max-height: 1000px; background: var(--murekkep); color: var(--porselen); overflow: hidden; isolation: isolate; }
.slayt-sayfa { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--kolay), visibility 0s 1.1s; display: grid; align-items: end; }
.slayt-sayfa[data-aktif="true"] { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.slayt-sayfa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; z-index: -2; }
.slayt-sayfa[data-aktif="true"] img { transform: scale(1); }
.slayt-golge { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,20,22,.72), rgba(20,20,22,.25) 55%, transparent 80%), linear-gradient(0deg, rgba(20,20,22,.75), transparent 50%); }
.slayt-metin { position: relative; display: grid; gap: 1.4rem; padding-bottom: clamp(7rem, 14vh, 9rem); padding-top: var(--ust-yukseklik); max-width: var(--kapsayici); }
.slayt-metin .etiket { color: #a39d94; }
.slayt-baslik { max-width: 12ch; font-size: clamp(2.6rem, 7.6vw, 7.6rem); }
.slayt-metin .giris { color: rgba(246,243,238,.8); max-width: 44ch; margin: 0; }
.slayt-metin .dugme { --d-zemin: var(--porselen); --d-yazi: var(--murekkep); justify-self: start; }
.slayt-metin > * { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--kolay), transform 1.1s var(--kolay); }
.slayt-sayfa[data-aktif="true"] .slayt-metin > * { opacity: 1; transform: none; }
.slayt-sayfa[data-aktif="true"] .slayt-metin > :nth-child(1) { transition-delay: .25s; }
.slayt-sayfa[data-aktif="true"] .slayt-metin > :nth-child(2) { transition-delay: .35s; }
.slayt-sayfa[data-aktif="true"] .slayt-metin > :nth-child(3) { transition-delay: .5s; }
.slayt-sayfa[data-aktif="true"] .slayt-metin > :nth-child(4) { transition-delay: .62s; }
.slayt-alt { position: absolute; left: 0; right: 0; bottom: 1.8rem; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,243,238,.75); }
.slayt-sayac { display: flex; align-items: center; gap: 1rem; font-family: var(--serif); font-size: .9rem; letter-spacing: .08em; }
.slayt-sayac b { font-weight: 400; color: var(--porselen); }
.slayt-cizgi { display: block; width: 90px; height: 1px; background: rgba(246,243,238,.3); position: relative; cursor: pointer; }
.slayt-cizgi i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--porselen); }
.slayt-cizgi.akiyor i { width: 100%; transition: width var(--slayt-sure, 7s) linear; }
.slayt-not { font-family: var(--sans); }
.slayt-kaydir { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; display: inline-flex; gap: .5rem; align-items: center; }
.slayt-kaydir span { display: inline-block; animation: slayt-zipla 1.8s ease-in-out infinite; }
@keyframes slayt-zipla { 50% { transform: translateY(3px); } }
.slayt-oklar { position: absolute; right: var(--olcu); bottom: 5.2rem; z-index: 3; display: flex; gap: .5rem; }
.slayt-oklar button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(246,243,238,.35); color: var(--porselen); transition: all .35s var(--kolay); }
.slayt-oklar button:hover { background: var(--porselen); color: var(--murekkep); box-shadow: none; }
.slayt-oklar svg { width: 18px; height: 18px; }
.slayt-kenar { position: absolute; right: var(--olcu); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(246,243,238,.55); z-index: 3; }
@media (max-width: 860px) {
  .slayt { min-height: 560px; }
  .slayt-metin { padding-bottom: 7.5rem; }
  .slayt-oklar { bottom: 4.6rem; }
  .slayt-kenar { display: none; }
  .slayt-golge { background: linear-gradient(0deg, rgba(20,20,22,.85) 20%, rgba(20,20,22,.3) 60%, rgba(20,20,22,.2)); }
}
@media (prefers-reduced-motion: reduce) { .slayt-sayfa img { transition: none; transform: none; } .slayt-kaydir span { animation: none; } }

img, video { max-width: 100%; }
input, select, textarea { min-width: 0; max-width: 100%; }

/* ---------- 14. Ana sayfa akışı (hikâye, karusel, yüzey bandı, medya) ---------- */
.hikaye-duzen { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
@media (max-width: 860px) { .hikaye-duzen { grid-template-columns: 1fr; } }
.hikaye-metin { display: grid; gap: 1.4rem; }
.hikaye-metin h2 { margin-top: .2rem; }
.hikaye-metin .dugme { justify-self: start; }
.hikaye-gorseller { position: relative; aspect-ratio: 1; }
.hg-buyuk { position: absolute; left: 0; top: 0; width: 68%; height: 90%; border-radius: 24px; overflow: hidden; background: var(--kil); }
.hg-kucuk { position: absolute; right: 0; bottom: 0; width: 52%; height: 56%; border-radius: 24px; overflow: hidden; background: var(--kil); box-shadow: 0 40px 80px -40px rgba(20,20,22,.5); }
.hg-buyuk img, .hg-kucuk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .hikaye-gorseller { aspect-ratio: 4/3; } }

/* karusel (merkez odaklı) */
.karusel { overflow: hidden; }
.karusel-ray { display: flex; gap: clamp(1rem, 2vw, 1.6rem); padding-inline: max(var(--olcu), (100% - var(--kapsayici)) / 2 + var(--olcu)); transition: transform .8s var(--sert); will-change: transform; cursor: grab; }
.karusel-ray.suruklu { transition: none; cursor: grabbing; }
.karusel-kart { position: relative; flex: none; width: min(86vw, 860px); aspect-ratio: 16/9; border-radius: 24px; overflow: hidden; background: var(--kil); opacity: .45; transform: scale(.96); transition: opacity .6s var(--kolay), transform .8s var(--kolay); }
.karusel-kart[data-aktif="true"] { opacity: 1; transform: none; }
.karusel-kart img { width: 100%; height: 100%; object-fit: cover; }
.karusel-etiket { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--porselen); color: var(--murekkep); padding: 1rem 2.4rem; border-radius: 16px 16px 0 0; text-align: center; display: grid; gap: .15rem; min-width: 46%; }
.karusel-etiket b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.karusel-etiket small { color: var(--gri); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.karusel-kontrol { display: flex; gap: 1.6rem; }
.karusel-kontrol button { display: inline-flex; align-items: center; gap: .8rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--yazi-2); transition: color .3s; }
.karusel-kontrol button:hover { color: var(--yazi); }
.karusel-kontrol i { display: block; width: 56px; height: 1.5px; background: currentColor; transition: width .4s var(--kolay); }
.karusel-kontrol button:hover i { width: 76px; }
.karusel-noktalar { display: flex; justify-content: center; gap: .9rem; margin-top: 1.6rem; }
.karusel-noktalar button { width: 8px; height: 8px; border-radius: 50%; background: var(--kil-2); padding: 0; transition: transform .3s, background .3s; }
.karusel-noktalar button[aria-selected="true"] { background: var(--mavi); transform: scale(1.4); }
@media (max-width: 640px) { .karusel-kart { width: 88vw; aspect-ratio: 4/5; } .karusel-etiket { min-width: 70%; padding: .8rem 1.2rem; } }

/* yüzey bandı */
.yuzey-bant { position: relative; background: var(--murekkep); color: var(--porselen); overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 9vw, 8rem); }
.yuzey-arka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .35; filter: saturate(.6); }
.yuzey-bant::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,20,22,.9), rgba(20,20,22,.5) 60%, rgba(20,20,22,.7)); }
.yuzey-ic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .yuzey-ic { grid-template-columns: 1fr; } }
.yuzey-metin { display: grid; gap: 1.2rem; }
.yuzey-metin .giris { margin: 0; }
.yuzey-kart { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; padding: 1rem; border-radius: 24px; background: rgba(246,243,238,.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(246,243,238,.12); }
.yuzey-kare { display: grid; gap: .5rem; text-align: center; color: var(--porselen); font-size: .78rem; letter-spacing: .06em; }
.yuzey-kare img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #fbfaf8; transition: transform .6s var(--kolay); }
.yuzey-kare:hover img { transform: scale(1.03); }

/* medya listesi */
.medya-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem); }
@media (max-width: 980px) { .medya-liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .medya-liste { grid-template-columns: 1fr; } }
.medya-yazi { display: grid; gap: .8rem; align-content: start; }
.medya-yazi .mg { position: relative; display: block; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: var(--kil); }
.medya-yazi .mg img { width: 100%; height: 100%; object-fit: cover; }
.medya-yazi .rozet { position: absolute; top: 1rem; right: 1rem; }
.medya-yazi .tarih { color: var(--yazi-2); font-size: .8rem; }
.medya-yazi h3 { font-size: 1.35rem; }

/* ---------- 15. Sayfa kapağı (kurumsal, medya) ---------- */
.sayfa-kapak { position: relative; min-height: clamp(420px, 60vh, 640px); display: grid; place-items: center; background: var(--murekkep); color: var(--porselen); overflow: hidden; isolation: isolate; padding-top: var(--ust-yukseklik); text-align: center; }
.sayfa-kapak > img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; z-index: -2; opacity: .45; filter: grayscale(.4); }
.sayfa-kapak::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(20,20,22,.2), rgba(20,20,22,.75)); }
.kapak-ic { display: grid; justify-items: center; gap: 1rem; }
.kapak-ic .etiket { color: rgba(246,243,238,.75); }
.kapak-ic .etiket::before { background: var(--mavi); }
.kapak-ic h1 { font-size: clamp(3rem, 7vw, 6rem); }
.kapak-ic .kirinti { margin: .4rem 0 0; color: rgba(246,243,238,.7); }
.kapak-ic .kirinti a:hover { color: var(--porselen); }
.hikaye-metin .sor { justify-self: start; }
.dugme-cizgi { --d-zemin: transparent; --d-yazi: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--murekkep); }

/* ---------- 16. Katalog (ürünler) ---------- */
.katalog-bas { padding-top: calc(var(--ust-yukseklik) + clamp(2rem, 4vw, 3.5rem)); }
.katalog-baslik { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.katalog-baslik h1 { margin-top: 1rem; font-size: clamp(2.6rem, 5.4vw, 4.5rem); }
.katalog-not { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: start; max-width: 36ch; color: var(--yazi-2); padding-bottom: .6rem; }
.katalog-not p { margin: 0; font-size: .95rem; line-height: 1.6; }
.katalog-not .etiket { grid-column: 2; }
.yildiz { color: var(--mavi); font-family: var(--serif); font-weight: 700; font-style: italic; letter-spacing: -.1em; font-size: 1.2rem; line-height: 1.4; }
@media (max-width: 860px) { .katalog-baslik { grid-template-columns: 1fr; } }
.katalog-sekmeler { display: flex; gap: 1.8rem; margin-top: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; row-gap: 0; }
@media (max-width: 860px) { .katalog-sekmeler { gap: 1.2rem; } .katalog-sekmeler a { padding: .7rem 0; font-size: .85rem; } }
.katalog-sekmeler a { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 0; font-size: .92rem; font-weight: 500; color: var(--yazi-2); white-space: nowrap; transition: color .3s; }
.katalog-sekmeler a span { font-size: .68rem; min-width: 20px; height: 20px; padding-inline: .35rem; border-radius: 999px; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--cizgi); color: var(--yazi-2); }
.katalog-sekmeler a:hover, .katalog-sekmeler a[aria-current] { color: var(--yazi); }
.katalog-sekmeler a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mavi); }
.katalog-sekmeler a[aria-current] span { background: var(--mavi); color: #fff; box-shadow: none; }
.katalog-govde { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); }
.katalog-duzen { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.katalog-yan { position: sticky; top: calc(var(--ust-yukseklik) + 1rem); display: grid; gap: 1.8rem; }
.filtre-bas { display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem; border-bottom: 1px solid var(--cizgi); }
.baglanti-kucuk { font-size: .78rem; color: var(--yazi-2); text-decoration: underline; text-underline-offset: 3px; }
.baglanti-kucuk:hover { color: var(--mavi); }
.yan-kapat { display: none; font-size: 1.6rem; line-height: 1; }
#katalog-filtre { display: grid; gap: 1.6rem; }
#katalog-filtre fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; }
#katalog-filtre legend { font-size: .82rem; font-weight: 600; margin-bottom: .6rem; }
.filtre-kutu, .filtre-renk { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--yazi-2); cursor: pointer; transition: color .25s; }
.filtre-kutu:hover, .filtre-renk:hover, .filtre-kutu:has(:checked), .filtre-renk:has(:checked) { color: var(--yazi); }
.filtre-kutu small { margin-left: auto; font-size: .72rem; color: var(--yazi-3, #9a948b); }
.filtre-kutu input, .filtre-renk input { appearance: none; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--cizgi); margin: 0; flex: none; display: grid; place-items: center; transition: all .25s; }
.filtre-kutu input:checked, .filtre-renk input:checked { background: var(--mavi); box-shadow: none; }
.filtre-kutu input:checked::after, .filtre-renk input:checked::after { content: ""; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }
.filtre-renkler { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; }
.filtre-renk .nokta { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.yan-kart { display: grid; gap: .3rem; padding: 1.4rem; border: 1px solid var(--cizgi); border-radius: 16px; text-align: center; justify-items: center; }
.yan-kart small { color: var(--yazi-2); font-size: .78rem; margin-top: .4rem; }
.yan-kart b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.25rem; }
.yan-kart .baglanti { margin-top: .5rem; font-size: .82rem; }
.katalog-arac { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--cizgi); }
.katalog-arac > div { display: flex; align-items: center; gap: 1.2rem; }
.katalog-arac p { margin: 0; }
.filtre-ac { display: none; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; }
.filtre-ac svg { width: 18px; height: 18px; }
.katalog-kontrol { display: flex; align-items: center; gap: 1.4rem; }
.sirala { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--yazi-2); }
.sirala select { font: inherit; font-size: .85rem; color: var(--yazi); background: transparent; border: 0; border-bottom: 1px solid var(--cizgi); padding: .3rem 1.4rem .3rem 0; cursor: pointer; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141416' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px; }
.sirala select:focus-visible { outline: none; border-color: var(--mavi); }
.izgara-sec { display: flex; gap: .4rem; }
.izgara-sec button { display: flex; gap: 2px; padding: 6px; border-radius: 6px; opacity: .4; transition: opacity .25s, background .25s; }
.izgara-sec button i { width: 4px; height: 14px; background: currentColor; border-radius: 1px; }
.izgara-sec button:hover { opacity: 1; color: var(--mavi); }
.izgara-sec button[aria-pressed="true"] { opacity: 1; background: var(--kil); }
.aktif-filtreler { display: flex; gap: .5rem; flex-wrap: wrap; }
.aktif-filtreler:not(:empty) { padding-top: 1rem; }
.aktif-filtreler button { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--kil); transition: background .25s; }
.aktif-filtreler button span { opacity: .5; }
.aktif-filtreler button:hover { background: var(--mavi); color: #fff; }
.katalog-arama { display: flex; align-items: center; gap: .7rem; margin-top: 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--cizgi); max-width: 360px; color: var(--yazi-2); }
.katalog-arama svg { width: 16px; height: 16px; flex: none; }
.katalog-arama input { flex: 1; border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--yazi); padding: .3rem 0; }
.katalog-arama input:focus-visible { outline: none; }
.katalog-arama:focus-within { border-color: var(--yazi); color: var(--yazi); }
.katalog-izgara { margin-top: 2rem; gap: clamp(1.6rem, 3vw, 3rem) clamp(1rem, 2vw, 1.6rem); }
.katalog-izgara[data-sutun="4"] { grid-template-columns: repeat(4, 1fr); }
.kart-resim { position: absolute; inset: 0; display: block; }
.kart-resim img { transition: opacity .25s, transform 1.2s var(--kolay); }
.kart:hover .kart-resim img { transform: scale(1.04); }
.kart-hizli { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--murekkep); color: var(--porselen); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; transform: translateY(65px); opacity: 0; transition: .25s var(--kolay); }
.kart-hizli span { color: var(--mavi-2); font-size: 13px; }
.kart:hover .kart-resim img { transform: scale(1.03); }
.kart-ust .rozet { font-size: .62rem; letter-spacing: .12em; padding: .4rem .7rem; }
.kart-ust .rozet-acik { background: rgba(246,243,238,.92); color: var(--murekkep); }
.kart:hover .kart-hizli, .kart:focus-within .kart-hizli { transform: none; opacity: 1; }
.katalog-izgara .kart-bilgi, .liste .kart-bilgi { display: block; padding: 17px 0 7px; font-family: var(--sans); }
.kart-kat { margin: 0 0 7px; font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--yazi-2); }
.kart-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kart-satir .kart-ad { font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.55; margin: 0; }
.kart-satir .kart-ad a::after { content: none; }
.kart-satir .kart-fiyat { font-size: 11px; font-weight: 400; white-space: nowrap; }
.kart-satir .kart-fiyat s { margin-right: 6px; }
.kart-satir .kart-fiyat b { font-weight: 500; }
.katalog-izgara[data-sutun="4"] .kart-satir { display: block; }
.katalog-izgara[data-sutun="4"] .kart-satir .kart-fiyat { display: block; margin-top: 5px; }
.kart-renkler { display: flex; gap: 8px; align-items: center; margin-top: 12px; min-height: 23px; }
.kart-renkler .alt-yazi { font-size: 9px; color: var(--yazi-2); margin-left: 2px; }
.renk-mini { width: 19px; height: 19px; border: 3px solid var(--zemin); box-shadow: none; outline: 1px solid transparent; transition: outline-color .2s; }
.renk-mini:hover { box-shadow: none; outline-color: var(--mavi); }
.renk-mini.secili, .renk-mini[aria-pressed="true"] { box-shadow: none; outline-color: var(--mavi); }
.yan-perde { display: none; }
@media (max-width: 980px) {
  .katalog-duzen { grid-template-columns: 1fr; }
  .katalog-izgara[data-sutun="4"] { grid-template-columns: repeat(3, 1fr); }
  .filtre-ac { display: inline-flex; }
  .katalog-yan { position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); z-index: 300; background: var(--zemin); padding: 1.5rem; overflow-y: auto; transform: translateX(-100%); transition: transform .5s var(--kolay); }
  body.filtre-acik .katalog-yan { transform: none; }
  .yan-kapat { display: block; }
  .yan-perde { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(20,20,22,.4); opacity: 0; pointer-events: none; transition: opacity .4s; }
  body.filtre-acik .yan-perde { opacity: 1; pointer-events: auto; }
  .izgara-sec { display: none; }
}
@media (max-width: 520px) { .katalog-izgara, .katalog-izgara[data-sutun="4"] { grid-template-columns: 1fr 1fr; } .kart-satir { flex-direction: column; gap: .2rem; } }

/* ---------- 17. Fiyat, sepet çekmecesi, ürün detay (pdp) ---------- */
.kart-fiyat { font-size: .85rem; font-weight: 500; white-space: nowrap; }
[data-fiyat] s { color: var(--yazi-2); font-weight: 400; margin-right: .5rem; }
[data-fiyat] b { font-weight: 600; color: var(--mavi); }
[data-fiyat] i { display: none; }
.pdp-fiyat[data-fiyat] i { display: inline-block; font-style: normal; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mavi); margin-left: .7rem; padding: .25rem .5rem; border-radius: 999px; background: rgba(0,128,200,.1); vertical-align: middle; }

/* sepet çekmecesi (sağdan) */
.sepet-cekmece { position: fixed; inset: 0 0 0 auto; margin: 0; z-index: 400; height: 100dvh; max-height: 100dvh; width: min(470px, 100%); max-width: 100%; padding: 28px; border: 0; background: var(--zemin); color: var(--yazi); overflow: auto; transform: translateX(100%); transition: transform .5s var(--kolay); }
.sepet-cekmece[open] { display: flex; flex-direction: column; transform: none; }
.sepet-perde { position: fixed; inset: 0; z-index: 399; background: rgba(20,20,22,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s; }
body.sepet-acik .sepet-perde { opacity: 1; pointer-events: auto; }
body.sepet-acik { overflow: hidden; }
@starting-style { .sepet-cekmece[open] { transform: translateX(100%); } }
.sepet-ust { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--cizgi); padding-bottom: 22px; }
.sepet-ust h2 { font-size: 34px; margin-top: 8px; }
.sepet-kapat { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background .25s; }
.sepet-kapat:hover { background: var(--mavi); color: #fff; }
.sepet-kapat svg { width: 18px; height: 18px; }
.sepet-govde { flex: 1; }
.sepet-oge { display: grid; grid-template-columns: 108px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-oge-foto { height: 130px; background: #fbfaf8; display: flex; align-items: center; border-radius: 12px; overflow: hidden; }
.sepet-oge-foto img { width: 100%; height: 100%; object-fit: cover; }
.sepet-oge-ad { font-size: .92rem; line-height: 1.5; font-weight: 500; }
.sepet-oge p { font-size: .78rem; color: var(--yazi-2); margin: 9px 0 14px; }
.sepet-oge strong { font-size: .92rem; font-weight: 500; display: block; }
.sepet-oge strong s { color: var(--yazi-2); font-weight: 400; margin-right: .4rem; }
.sepet-kaldir { font-size: .72rem; color: var(--yazi-2); text-decoration: underline; text-underline-offset: 3px; padding: 0; margin-top: 17px; }
.sepet-kaldir:hover { color: var(--murekkep); }
.sepet-bos { padding: 3rem 0; color: var(--yazi-2); font-size: .9rem; line-height: 1.8; }
.sepet-bos em { font-family: var(--serif); font-size: 1.2rem; color: var(--yazi); }
.sepet-alt { padding-top: 25px; }
.sepet-alt > div { display: flex; justify-content: space-between; font-size: 13px; }
.sepet-alt > p { font-size: .72rem; line-height: 1.7; color: var(--yazi-2); margin: .5rem 0 0; }
.sepet-devam { display: flex; justify-content: space-between; background: var(--murekkep); padding: 17px 22px; color: #fff; font-size: .85rem; font-weight: 600; border-radius: 999px; margin-top: 23px; transition: background .25s; }
.sepet-devam:hover { background: var(--mavi); }
.sepet-kesfet { display: block; text-align: center; font-size: .78rem; color: var(--yazi-2); margin-top: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ürün detay */
.pdp-kirinti { padding-top: calc(var(--ust-yukseklik) + 1.5rem); }
.pdp { display: grid; grid-template-columns: 1.17fr 1fr; gap: 6%; padding-top: 1.5rem; padding-bottom: clamp(3rem, 6vw, 5rem); align-items: start; }
@media (max-width: 980px) { .pdp { grid-template-columns: 1fr; gap: 2.5rem; } }
.pdp-galeri { min-width: 0; }
.pdp-sahne { position: relative; background: #fbfaf8; border-radius: 24px; }
.pdp-buyuk { width: 100%; display: block; padding: 0; aspect-ratio: 1; position: relative; overflow: hidden; cursor: zoom-in; border-radius: 24px; }
.pdp-buyuk img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s; }
.pdp-etiket { position: absolute; left: 24px; top: 24px; color: var(--yazi-2); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.pdp-zoom-ikon { position: absolute; right: 19px; bottom: 19px; background: rgba(246,243,238,.75); backdrop-filter: blur(4px); height: 41px; width: 41px; display: grid; place-items: center; border-radius: 50%; transition: background .2s; }
.pdp-zoom-ikon svg { width: 17px; height: 17px; }
.pdp-buyuk:hover .pdp-zoom-ikon { background: var(--porselen); }
.pdp-sayac { position: absolute; left: 26px; bottom: 28px; font-size: .66rem; letter-spacing: .2em; font-weight: 600; color: var(--yazi-2); pointer-events: none; }
.pdp-galeri-alt { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 17px; }
.pdp-kucukler { display: flex; gap: 10px; }
.pdp-kucuk { display: block; padding: 0; width: 76px; height: 76px; background: #fbfaf8; box-shadow: inset 0 0 0 1.5px var(--cizgi); transition: box-shadow .2s; border-radius: 12px; overflow: hidden; }
.pdp-kucuk.aktif { box-shadow: inset 0 0 0 2px var(--mavi); }
.pdp-kucuk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-not { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--yazi-2); margin: 0 2px; }
.pdp-detay { min-width: 0; position: sticky; top: calc(var(--ust-yukseklik) + 1rem); }
.pdp-detay-ic { max-width: 465px; margin: 5px auto 0 0; display: grid; }
.pdp-ust { display: flex; justify-content: space-between; align-items: center; }
.pdp-seri { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--yazi-2); }
.pdp-detay h1 { font-size: clamp(2.4rem, 3.8vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 18px 0; max-width: 430px; }
.pdp-aciklama { font-size: .9rem; line-height: 1.7; color: var(--yazi-2); margin: 0; }
.pdp-fiyat-satir { display: flex; gap: 15px; align-items: center; margin: 23px 0 26px; }
.pdp-fiyat { font-family: var(--serif); font-size: 1.6rem; letter-spacing: -.01em; font-weight: 500; }
.pdp-fiyat-satir > span:last-child { color: var(--yazi-2); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.pdp-secenekler { display: grid; gap: 1rem; }
.pdp-renk { border: 0; margin: 0; padding: 0; min-width: 0; }
.pdp-renk legend { font-size: .85rem; font-weight: 600; display: flex; gap: 13px; align-items: center; padding: 0; margin: 0 0 11px; }
.pdp-renk legend span { font-size: .8rem; font-weight: 400; color: var(--yazi-2); }
.pdp-renkler { display: flex; gap: 4px; margin-left: -5px; flex-wrap: wrap; }
.pdp-renk-sec { width: 44px; height: 44px; padding: 7px; display: block; }
.pdp-disk { width: 30px; height: 30px; display: block; border-radius: 50%; border: 4px solid var(--zemin); outline: 1px solid var(--cizgi); transition: outline-color .2s; background: #d9d4cc center/cover; }
.pdp-renk-sec[aria-pressed="true"] .pdp-disk { outline: 2px solid var(--mavi); }
.pdp-stok { font-size: .8rem; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 4px 0 0; color: var(--yazi); }
.pdp-stok > span:last-child { color: var(--yazi-2); }
.pdp-stok-nokta { width: 6px; height: 6px; background: var(--mavi); border-radius: 50%; flex: none; }
.pdp-satin { display: flex; align-items: stretch; gap: 9px; margin-top: 21px; }
.pdp-adet { display: flex; align-items: center; box-shadow: inset 0 0 0 1.5px var(--cizgi); border-radius: 999px; flex: none; }
.pdp-adet button { width: 36px; height: 50px; display: grid; place-items: center; font-size: 1.1rem; }
.pdp-adet button:disabled { color: var(--kil-2); cursor: default; }
.pdp-adet output { width: 28px; text-align: center; font-size: .9rem; font-weight: 600; }
.pdp-birincil { background: var(--murekkep); color: #fff; display: flex; justify-content: center; align-items: center; gap: .8rem; font-size: .9rem; font-weight: 600; min-height: 52px; padding: 15px 22px; border-radius: 999px; transition: background .2s; flex: 1; white-space: nowrap; }
.pdp-birincil svg { width: 17px; height: 17px; }
.pdp-birincil:hover { background: var(--mavi); }
.pdp-ikincil { width: 52px; box-shadow: inset 0 0 0 1.5px var(--cizgi); border-radius: 999px; display: grid; place-items: center; transition: box-shadow .2s, color .2s, background .2s; }
.pdp-ikincil:hover { background: var(--mavi); color: #fff; box-shadow: none; }
.pdp-ikincil svg { width: 18px; height: 18px; }
.pdp-ozet { font-size: .78rem; color: var(--yazi-2); margin: 12px 0 0; }
.pdp-hizmet { display: flex; gap: 24px; justify-content: space-between; padding: 23px 0 24px; font-size: .78rem; color: var(--yazi-2); flex-wrap: wrap; }
.pdp-hizmet span { display: flex; align-items: center; gap: 9px; }
.pdp-hizmet svg { width: 17px; height: 17px; }
.pdp-akordiyon { border-top: 1px solid var(--cizgi); }
.pdp-akordiyon details { border-bottom: 1px solid var(--cizgi); }
.pdp-akordiyon summary { display: flex; align-items: center; justify-content: space-between; font-size: .92rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; list-style: none; min-height: 48px; padding: 15px 0; }
.pdp-akordiyon summary::-webkit-details-marker { display: none; }
.pdp-akordiyon summary > span { font-size: 16px; font-weight: 300; color: var(--yazi-2); transition: transform .2s; }
.pdp-akordiyon details[open] summary > span { transform: rotate(45deg); }
.pdp-akordiyon details > div { font-size: .85rem; line-height: 1.8; color: var(--yazi-2); padding: 0 21px 15px 0; }
.pdp-akordiyon details p { margin: 0 0 8px; }
.pdp-zoom { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 400; width: min(810px, 100vw - 32px); max-height: 94dvh; padding: 16px 24px 18px; border: 0; background: var(--zemin); border-radius: 8px; }
.pdp-zoom-perde { position: fixed; inset: 0; z-index: 399; background: rgba(20,20,22,.6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.zoom-acik .pdp-zoom-perde { opacity: 1; pointer-events: auto; }
.pdp-zoom img { display: block; margin: 12px auto 0; width: min(100%, 94dvh - 154px); aspect-ratio: 1; object-fit: contain; background: #fbfaf8; }
.pdp-zoom-alt { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--yazi-2); padding-top: 14px; }
.pdp-zoom-alt button { font-size: 11px; color: var(--yazi); }
.pdp-hikaye { background: var(--kil); border-block: 1px solid var(--cizgi); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.pdp-hikaye-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; }
@media (max-width: 860px) { .pdp-hikaye-ic { grid-template-columns: 1fr; gap: 2rem; } }
.pdp-hikaye h2 { font-size: clamp(2.2rem, 4vw, 3rem); margin-top: 1.2rem; }
.pdp-hikaye-no { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--yazi-2); }
.pdp-hikaye p { font-size: .9rem; line-height: 2; color: var(--yazi-2); margin: 17px 0 21px; max-width: 420px; }
.pdp-imza { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--mavi); }
@media (max-width: 640px) { .pdp-kucuk { width: 60px; height: 60px; } .pdp-not { display: none; } .sepet-cekmece { padding: 20px; } }
.yan-kart-bayi { background: rgba(0,128,200,.06); border-color: rgba(0,128,200,.25); }
.kart-fiyat.sor { font-size: 9px; }

/* ---------- 18. Blog ---------- */
.sayfa-bas .katalog-sekmeler { margin-top: 2rem; }
.medya-yazi .mg img { transition: transform 1.2s var(--kolay); }
.medya-yazi:hover .mg img { transform: scale(1.03); }
.medya-yazi-metin { display: grid; gap: .6rem; }
.medya-yazi .ozet { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--yazi-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.medya-yazi-buyuk { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--cizgi); }
.medya-yazi-buyuk .mg { aspect-ratio: 16/10; }
.medya-yazi-buyuk h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.medya-yazi-buyuk .ozet { -webkit-line-clamp: 4; font-size: 1rem; }
@media (max-width: 860px) { .medya-yazi-buyuk { grid-template-columns: 1fr; } }
.medya-yazi[hidden] { display: none; }
.yazi-bas { padding-top: 1.5rem; max-width: 820px; }
.yazi-bas h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin-top: 1.2rem; }
.yazi-meta { display: flex; align-items: center; gap: 1rem; font-size: .82rem; color: var(--yazi-2); }
.yazi-kapak { margin: clamp(2rem, 4vw, 3rem) 0; border-radius: 24px; overflow: hidden; aspect-ratio: 21/9; background: var(--kil); }
.yazi-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yazi-duzen { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(2rem, 5vw, 5rem); justify-content: center; }
@media (max-width: 860px) { .yazi-duzen { grid-template-columns: 1fr; } }
.yazi-yan { position: sticky; top: calc(var(--ust-yukseklik) + 1.5rem); display: grid; gap: 1.6rem; align-self: start; align-content: start; }
.yazi-yazar { display: flex; align-items: center; gap: .8rem; }
.yazi-yazar img { width: 36px; height: 36px; }
.yazi-yazar b { display: block; font-size: .9rem; }
.yazi-yazar small { color: var(--yazi-2); font-size: .75rem; }
.yazi-paylas .sosyal { margin-top: .7rem; }
.sosyal-ikon.kopyalandi { background: var(--mavi); color: #fff; box-shadow: none; }
.yazi-etiketler { display: flex; flex-wrap: wrap; gap: .4rem; }
.yazi-etiketler .filtre { font-size: .75rem; padding: .4rem .7rem; }
.yazi-govde { font-size: 1.05rem; line-height: 1.85; color: var(--yazi); }
.yazi-govde p { margin: 0 0 1.4rem; }
.yazi-govde h2 { font-size: 1.7rem; margin: 2.4rem 0 1rem; }
.yazi-govde blockquote { margin: 2rem 0; padding-left: 1.4rem; border-left: 2px solid var(--mavi); font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--murekkep); }
.yazi-urunler { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.yazi { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- 19. Ödeme akışı ---------- */
.odeme-giris { position: relative; padding-top: calc(var(--ust-yukseklik) + 2.5rem); padding-bottom: 2rem; overflow: hidden; }
.odeme-giris h1 { font-size: clamp(2.8rem, 4.8vw, 4.4rem); letter-spacing: -.02em; margin: .9rem 0 .8rem; }
.odeme-giris .giris { margin: 0; max-width: 52ch; }
.odeme-imza { position: absolute; right: var(--olcu); top: 50%; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(5rem, 10vw, 9rem); letter-spacing: -.12em; color: var(--mavi); opacity: .12; line-height: 1; transform: translateY(-40%); pointer-events: none; }
.odeme-adimlar { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--cizgi); padding: 22px 0; margin-bottom: 34px; }
.odeme-adimlar button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; min-height: 34px; color: var(--yazi-2); font-size: .8rem; font-weight: 500; }
.odeme-adimlar button:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 34px; height: 1px; background: var(--cizgi); transform: translateX(50%); }
.odeme-adimlar button:disabled { cursor: default; }
.odeme-adimlar .no { display: grid; place-items: center; border: 1px solid var(--cizgi); border-radius: 50%; width: 31px; height: 31px; font-size: .7rem; flex: none; transition: background .2s; }
.odeme-adimlar button[aria-current] { color: var(--mavi); }
.odeme-adimlar button[aria-current] .no { background: var(--mavi); border-color: var(--mavi); color: #fff; }
.odeme-adimlar button.tamam:not([aria-current]) { color: var(--yazi); }
.odeme-adimlar button.tamam:not([aria-current]) .no { background: var(--kil); border-color: var(--kil); color: var(--mavi); font-size: 0; }
.odeme-adimlar button.tamam:not([aria-current]) .no::before { content: "✓"; font-size: .8rem; }
@media (max-width: 980px) { .odeme-adimlar button { padding: 0 8px; font-size: .74rem; } .odeme-adimlar button::after { width: 16px; } }
@media (max-width: 640px) { .odeme-adimlar { grid-template-columns: repeat(4, auto); justify-content: space-between; padding: 16px 0; } .odeme-adimlar button { padding: 0; flex-direction: column; gap: 6px; font-size: .68rem; } .odeme-adimlar button::after { display: none; } }
.odeme-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 50px; align-items: start; min-height: 410px; }
@media (max-width: 980px) { .odeme-duzen { grid-template-columns: 1fr; } }
.odeme-panel { min-width: 0; padding-top: 7px; }
.od-bas { border-bottom: 1px solid var(--cizgi); padding-bottom: 23px; }
.od-bas h2 { font-size: 2rem; letter-spacing: -.01em; margin-top: .7rem; }
.od-bas h2 span { font-family: var(--sans); font-size: .9rem; color: var(--yazi-2); }
.od-bas > p { font-size: .85rem; line-height: 1.8; color: var(--yazi-2); margin: 12px 0 0; }
.od-bas-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .7rem; }
.od-bas-satir h2, .od-bas-satir h3 { margin: 0; }
.od-oge { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--cizgi); }
.od-oge-foto { display: flex; align-items: center; height: 142px; background: #fbfaf8; overflow: hidden; border-radius: 12px; }
.od-oge-foto img { width: 100%; height: 100%; object-fit: cover; }
.od-oge-detay { padding-top: 7px; min-width: 0; }
.od-oge-kat { font-size: 9px; color: var(--yazi-2); letter-spacing: .05em; margin: 0 0 6px; }
.od-oge-detay h3 { font-family: var(--sans); font-size: .9rem; font-weight: 500; line-height: 1.6; margin: 0 0 9px; }
.od-varyant { font-size: .78rem; color: var(--yazi-2); margin: 0; }
.od-oge-alt { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.od-adet { display: flex; align-items: center; box-shadow: inset 0 0 0 1.5px var(--cizgi); border-radius: 999px; height: 36px; font-size: .8rem; min-width: 94px; text-align: center; }
.od-adet button { width: 32px; height: 32px; font-size: 1rem; }
.od-adet button:disabled { opacity: .25; cursor: default; }
.od-adet span { min-width: 28px; }
.od-oge-fiyat { font-size: .9rem; font-weight: 500; white-space: nowrap; }
.od-kaldir { font-size: .72rem; color: var(--yazi-2); text-decoration: underline; text-underline-offset: 4px; margin-top: 14px; padding: 0; }
.od-kaldir:hover { color: var(--murekkep); }
.od-bos { padding: 2rem 0; color: var(--yazi-2); }
.od-alt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 27px; }
.od-birincil { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 54px; padding: 15px 24px; background: var(--murekkep); color: #fff; font-size: .85rem; font-weight: 600; border-radius: 999px; transition: background .2s; text-align: left; }
.od-birincil:hover { background: var(--mavi); }
.od-birincil:disabled { background: var(--kil-2); cursor: not-allowed; }
.od-metin { font-size: .78rem; display: inline-flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--yazi-2); text-decoration: underline; text-underline-offset: 4px; }
.od-metin:hover { color: var(--mavi); }
.od-bolum { margin-top: 26px; border: 0; padding: 0; }
.od-bolum h3, .od-bolum legend { font-family: var(--sans); font-size: .85rem; font-weight: 600; margin: 0 0 16px; }
.od-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 20px; }
.od-genis { grid-column: 1 / -1; }
@media (max-width: 560px) { .od-izgara { grid-template-columns: 1fr; } }
.odeme-panel .alan label span { color: var(--yazi-2); font-weight: 400; }
.odeme-panel .alan.hatali input, .odeme-panel .alan.hatali textarea { box-shadow: inset 0 0 0 1.5px #c0392b; }
.od-secenekler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .od-secenekler { grid-template-columns: 1fr; } }
.od-secenek { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "radyo metin" "radyo fiyat"; gap: 4px 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; font-size: .85rem; }
.od-secenek.secili { border-color: var(--mavi); background: rgba(0,128,200,.05); }
.od-secenek input { accent-color: var(--mavi); margin: 3px 0 0; grid-area: radyo; }
.od-secenek > span { grid-area: metin; }
.od-secenek strong { display: block; font-weight: 500; }
.od-secenek > span > span { display: block; font-size: .75rem; color: var(--yazi-2); margin-top: 3px; }
.od-secenek b { font-weight: 500; font-size: .8rem; grid-area: fiyat; margin-top: 6px; }
.od-not { font-size: .75rem; color: var(--yazi-2); margin: 12px 0 0; }
.od-uyari { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-top: 24px; background: rgba(201,161,92,.12); border: 1px dashed rgba(201,161,92,.6); font-size: .8rem; color: #8a6a2e; }
.od-uyari svg { width: 18px; height: 18px; flex: none; }
.od-odeme-duzen { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 28px; margin-top: 26px; align-items: start; }
@media (max-width: 760px) { .od-odeme-duzen { grid-template-columns: 1fr; } }
.od-kart-alanlar { display: grid; gap: 16px; }

.od-ozet-kart { border: 1px solid var(--cizgi); border-radius: 16px; padding: 22px 24px; margin-top: 20px; }
.od-ozet-kart h3 { font-family: var(--sans); font-size: .9rem; font-weight: 600; }
.od-ozet-kart .od-bas-satir { margin: 0 0 14px; }
.od-onay-urun { display: flex; justify-content: space-between; gap: 1rem; padding: 10px 0; border-top: 1px solid var(--cizgi); font-size: .85rem; }
.od-onay-urun strong { display: block; font-weight: 500; }
.od-onay-urun small { color: var(--yazi-2); }
.od-satirlar { font-size: .85rem; line-height: 1.7; color: var(--yazi-2); }
.od-satirlar strong { color: var(--yazi); font-weight: 500; }
.od-satirlar p { margin: 0; }
.od-onay-kargo { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: .8rem; }
.od-onay-kutu { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: .85rem; line-height: 1.6; }
.od-onay-kutu input { margin-top: 4px; accent-color: var(--mavi); }
.od-hata { color: #c0392b; font-size: .78rem; margin: 8px 0 0; min-height: 1em; }
.od-basari { text-align: center; padding: 3rem 1rem; display: grid; justify-items: center; gap: 1rem; }
.od-basari-isaret { width: 64px; height: 64px; border-radius: 50%; background: var(--mavi); color: #fff; display: grid; place-items: center; }
.od-basari-isaret svg { width: 28px; height: 28px; }
.od-basari h2 { font-size: 2.2rem; }
.od-basari p { color: var(--yazi-2); max-width: 44ch; margin: 0; }
.od-basari-ref { font-size: .8rem; color: var(--yazi-2); padding: 10px 16px; border: 1px dashed var(--cizgi); }
.od-eylemler { display: flex; gap: 1.5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
.odeme-ozet { position: sticky; top: calc(var(--ust-yukseklik) + 1rem); background: var(--kart); border: 1px solid var(--cizgi); border-radius: 24px; padding: 29px 28px; }
.oz-bas { border-bottom: 1px solid var(--cizgi); padding-bottom: 21px; }
.oz-bas h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.8rem; margin-top: .7rem; }
.oz-bas h2 span { font-family: var(--sans); font-size: .7rem; color: var(--yazi-2); }
.oz-urunler summary { list-style: none; cursor: pointer; padding: 19px 0 14px; display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--yazi-2); }
.oz-urunler summary::-webkit-details-marker { display: none; }
.oz-urunler summary::after { content: "−"; font-size: 1rem; }
.oz-urunler:not([open]) summary::after { content: "+"; }
.oz-liste { display: grid; gap: 17px; padding-bottom: 23px; }
.oz-oge { display: grid; grid-template-columns: 53px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.oz-foto { height: 67px; background: #fbfaf8; overflow: hidden; border-radius: 8px; display: flex; align-items: center; }
.oz-foto img { width: 100%; height: 100%; object-fit: cover; }
.oz-metin strong { display: block; font-size: .78rem; font-weight: 500; line-height: 1.5; }
.oz-metin span { display: block; font-size: .7rem; color: var(--yazi-2); line-height: 1.6; }
.oz-oge > b { font-size: .78rem; font-weight: 500; white-space: nowrap; }
.oz-bos { font-size: .8rem; color: var(--yazi-2); }
.oz-toplamlar { padding-top: 19px; border-top: 1px solid var(--cizgi); }
.oz-satir { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: .78rem; color: var(--yazi-2); margin-bottom: 15px; }
.oz-satir strong { font-weight: 500; color: var(--yazi); }
.oz-satir small { display: block; font-size: .65rem; color: var(--yazi-2); margin-top: 4px; }
.oz-genel { border-top: 1px solid var(--cizgi); padding-top: 20px; margin-top: 19px; color: var(--yazi); font-size: .9rem; align-items: baseline; }
.oz-genel strong { font-family: var(--serif); font-size: 2rem; font-weight: 500; letter-spacing: -.02em; }
.oz-not { border-top: 1px solid var(--cizgi); margin: 22px 0 0; padding-top: 18px; font-size: .72rem; line-height: 1.8; color: var(--yazi-2); display: flex; gap: 9px; align-items: flex-start; }
.oz-not svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.od-hizmet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--cizgi); }
.od-hizmet > span { display: flex; gap: 12px; align-items: flex-start; font-size: .85rem; font-weight: 500; }
.od-hizmet svg { width: 20px; height: 20px; flex: none; color: var(--mavi); }
.od-hizmet small { display: block; font-weight: 400; color: var(--yazi-2); font-size: .75rem; margin-top: 3px; }
@media (max-width: 640px) { .od-hizmet { grid-template-columns: 1fr; } .od-oge { grid-template-columns: 84px 1fr; gap: 14px; } .od-oge-foto { height: 106px; } }

/* ---------- 20. Bayimiz olun penceresi ---------- */
.bayi-perde { position: fixed; inset: 0; z-index: 399; background: rgba(20,20,22,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; }
body.bayi-acik .bayi-perde { opacity: 1; pointer-events: auto; }
body.bayi-acik { overflow: hidden; }
.bayi-pencere { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98); margin: 0; z-index: 400; width: min(920px, 100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0; border-radius: 24px; background: var(--zemin); color: var(--yazi); display: none; grid-template-columns: 1fr 1.1fr; opacity: 0; transition: opacity .35s, transform .45s var(--kolay); box-shadow: 0 40px 80px -30px rgba(20,20,22,.6); }
.bayi-pencere[open] { display: grid; opacity: 1; transform: translate(-50%, -50%); }
@starting-style { .bayi-pencere[open] { opacity: 0; transform: translate(-50%, -50%) scale(.98); } }
.bayi-pencere-sol { background: var(--murekkep); color: var(--porselen); padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: 1.1rem; align-content: center; }
.bayi-pencere-sol h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.bayi-pencere-sol p { margin: 0; color: rgba(246,243,238,.75); line-height: 1.7; }
.bayi-artilar { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .9rem; }
.bayi-artilar li::before { content: "///"; color: var(--mavi); font-family: var(--serif); font-style: italic; font-weight: 700; letter-spacing: -.1em; margin-right: .7rem; }
.bayi-pencere-form { padding: clamp(1.8rem, 4vw, 3rem); }
.bayi-kapat { position: absolute; right: 1rem; top: 1rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; z-index: 2; transition: background .25s; }
.bayi-kapat:hover { background: var(--mavi); color: #fff; }
.bayi-kapat svg { width: 18px; height: 18px; }
.bayi-tesekkur { text-align: center; padding: 2rem 0; }
.bayi-tesekkur b { font-family: var(--serif); font-weight: 400; font-size: 2rem; display: block; }
.bayi-tesekkur p { color: var(--yazi-2); }
@media (max-width: 760px) { .bayi-pencere { grid-template-columns: 1fr; } .bayi-pencere[open] { display: block; } .bayi-pencere-sol { padding-top: 3.5rem; } .bayi-kapat { background: var(--zemin); } }
.form-tesekkur { text-align: center; padding: 2.5rem 1rem; }
.form-tesekkur b { font-family: var(--serif); font-weight: 400; font-size: 2rem; display: block; }
.form-tesekkur p { color: var(--yazi-2); margin: .5rem 0 0; }

/* ---------- 21. Salonunuzda Deneyin ---------- */
.pdp-dene { position: absolute; left: 19px; bottom: 19px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(246,243,238,.85); backdrop-filter: blur(4px); font-size: .72rem; font-weight: 600; letter-spacing: .04em; transition: background .2s, color .2s; }
.pdp-dene:hover { background: var(--mavi); color: #fff; }
.pdp-dene svg { width: 16px; height: 16px; }
.pdp-sayac { left: auto; right: 72px; }
.pdp-dene-metin { font-size: .78rem; color: var(--mavi); text-decoration: underline; text-underline-offset: 4px; margin-top: 10px; justify-self: start; text-align: left; }
.dene-perde { position: fixed; inset: 0; z-index: 399; background: rgba(20,20,22,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.dene-acik .dene-perde { opacity: 1; pointer-events: auto; }
body.dene-acik { overflow: hidden; }
.dene { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 400; width: min(1100px, 100vw - 24px); height: min(760px, 100dvh - 24px); padding: 0; border: 0; border-radius: 24px; background: var(--zemin); color: var(--yazi); display: none; grid-template-rows: auto 1fr; overflow: hidden; }
.dene[open] { display: grid; }
.dene-ust { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--cizgi); }
.dene-ust h2 { font-size: 1.5rem; margin-top: .3rem; }
.dene-ust h2 span { font-family: var(--sans); font-size: .85rem; color: var(--yazi-2); }
.dene-govde { display: grid; grid-template-columns: 1fr 280px; min-height: 0; }
.dene-sahne { position: relative; background: #141416; min-height: 0; display: grid; place-items: center; touch-action: none; }
.dene-sahne canvas { display: block; cursor: grab; }
.dene-sahne canvas:active { cursor: grabbing; }
.dene-bos { display: grid; justify-items: center; gap: .8rem; text-align: center; color: var(--porselen); padding: 2rem; max-width: 420px; }
.dene-bos svg { width: 44px; height: 44px; opacity: .6; }
.dene-bos b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.dene-bos p { margin: 0; color: rgba(246,243,238,.7); font-size: .9rem; line-height: 1.6; }
.dene-bos .baglanti { color: var(--porselen); font-size: .82rem; }
.dene-yan { padding: 22px; display: grid; gap: 1.2rem; align-content: start; overflow-y: auto; border-left: 1px solid var(--cizgi); }
.dene-grup { display: grid; gap: .6rem; }
.dene-grup .pdp-renkler { margin-left: -5px; }
.dene-satir { display: flex; flex-wrap: wrap; gap: .4rem; }
.dene-satir .filtre { font-size: .78rem; padding: .45rem .8rem; }
.dene-satir .filtre[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); box-shadow: none; }
.filtre[aria-pressed="true"]:hover { color: var(--zemin); }
.dene-yan input[type=range] { width: 100%; accent-color: var(--mavi); }
.dene-eylem { display: grid; gap: .5rem; }
.dene-eylem .dugme { justify-content: center; }
.dene-not { font-size: .72rem; }
@media (max-width: 860px) { .dene { width: 100vw; height: 100dvh; border-radius: 0; } .dene-govde { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .dene-yan { border-left: 0; border-top: 1px solid var(--cizgi); padding: 14px 16px; gap: .8rem; max-height: 42dvh; } .dene-eylem { grid-template-columns: 1fr 1fr; } .dene-not { display: none; } .pdp-dene { font-size: 0; gap: 0; padding: 12px; } .pdp-dene svg { width: 18px; height: 18px; } .pdp-sayac { right: auto; left: 70px; } }
.ana-secki { grid-template-columns: repeat(4, 1fr); margin-top: 0; gap: 22px; }
@media (max-width: 980px) { .ana-secki { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ana-secki { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---------- 22. Hover dili: çizgi = metin linki, mavi = buton, hafif büyüyen görsel = içerik ---------- */
.medya-yazi:hover .mg img, .hg-buyuk:hover img, .hg-kucuk:hover img, .yazi-kapak:hover img { transform: scale(1.03); }
.medya-yazi .mg img, .hg-buyuk img, .hg-kucuk img { transition: transform 1.2s var(--kolay); }
.pdp-kucuk:hover { box-shadow: inset 0 0 0 1.5px var(--mavi); }
.galeri-kucukler button:hover { box-shadow: inset 0 0 0 1.5px var(--mavi); }
.od-metin:hover, .baglanti-kucuk:hover, .sepet-kaldir:hover, .od-kaldir:hover, .kirinti a:hover, .alt-bolum ul a:hover { color: var(--mavi); }
.odeme-adimlar button:not(:disabled):hover { color: var(--mavi); }


/* ---------- 23. Kart önizleme (açık kart, logolu) ---------- */
.od-kart { aspect-ratio: 1.586; border-radius: 18px; container-type: inline-size; background: linear-gradient(135deg, #ffffff 0%, #f1eee8 55%, #e6e1d8 100%); color: var(--murekkep); padding: 20px 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(20,20,22,.08), 0 24px 40px -28px rgba(20,20,22,.35); transition: background .4s; }
.od-kart::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.55) 50%, transparent 56%); pointer-events: none; }
.od-kart-ust { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.od-kart-banka, .od-kart-sema { display: inline-flex; align-items: center; }
.od-kart-banka img { height: 26px; width: auto; max-width: 150px; display: block; }
.od-kart-sema img { height: 30px; width: auto; max-width: 72px; display: block; }
.od-kart-banka > span, .od-kart-sema > span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--yazi-2); }
.od-kart img[hidden] { display: none; }
.od-kart-no { align-self: center; font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: clamp(.9rem, 1.2vw, 1.15rem); letter-spacing: .08em; white-space: nowrap; overflow: hidden; }
.od-kart-alt { display: grid; grid-template-columns: 1.4fr 1fr .6fr; gap: 10px; }
.od-kart-alt small { display: block; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--yazi-2); margin-bottom: 3px; }
.od-kart-alt b { font-weight: 600; font-size: .85rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.od-kart[data-sema="visa"] { background: linear-gradient(135deg, #ffffff 0%, #eef2fa 60%, #dfe6f5 100%); }
.od-kart[data-sema="mastercard"], .od-kart[data-sema="maestro"] { background: linear-gradient(135deg, #ffffff 0%, #f7efea 60%, #f1e2d8 100%); }
.od-kart[data-sema="troy"] { background: linear-gradient(135deg, #ffffff 0%, #eaf4f3 60%, #d9ebe8 100%); }
.od-kart[data-sema="american-express"] { background: linear-gradient(135deg, #ffffff 0%, #e9f1f6 60%, #d6e6ef 100%); }
.pdp-zoom-ic { position: relative; }
.pdp-zoom-sayac { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.pdp-zoom-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(246,243,238,.85); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px var(--cizgi); color: var(--yazi); transition: background .3s, color .3s; }
.pdp-zoom-ok svg { width: 20px; height: 20px; }
.pdp-zoom-ok:hover { background: var(--mavi); color: #fff; }
.pdp-zoom-geri { left: 6px; } .pdp-zoom-ileri { right: 6px; }
.pdp-zoom-ok[hidden] { display: none; }
.arama-kart .sag b { font-size: .88rem; color: var(--yazi); font-weight: 600; }

/* iç sayfa giriş metinleri 14px */
.katalog-baslik p, .giris-sol p.giris, .pdp-ozet { font-size: .875rem; }
@media (max-width: 1200px) { .mega-ray { padding-inline: 1.2rem; } .mega-grup-bas { width: 150px; margin: 0 1.2rem 0 .6rem; padding-right: 1.2rem; } }