/* =====================================================================
   TUBİM Kartela — tek stil dosyası
   Fikir: kartela (terzinin kumaş numune defteri). Her ürün tırtıklı kenarlı bir
   kumaş numunesi; vitrinde yelpaze gibi açılan bir kartela. Gerisi sade.
   Renkler TUBİM'den: lacivert kumaş, mezura kırmızısı, marka mavisi, mezura sarısı.
   Yazı: tek aile Archivo; kişilik genişlik ekseniyle (wdth) verilir.
   ===================================================================== */

:root {
  color-scheme: light;
  --kagit: #F3F5F8;          /* sayfa zemini */
  --yuzey: #FFFFFF;          /* kart */
  --yuzey-2: #F7F8FB;        /* kart içi alan */
  --metin: #13213B;
  --soluk: #56627A;
  --soluk-2: #7C879B;
  --cizgi: #DDE2EA;
  --cizgi-2: #C9D0DB;
  --lacivert: #0B1B33;       /* koyu bant */
  --lacivert-2: #132A4A;
  --lacivert-metin: #E8EDF5;
  --mezura: #D80000;         /* ana eylem */
  --mezura-koyu: #A80000;
  --mavi: #0070BA;           /* bağlantı */
  --sari: #E5A00D;           /* yıldız: mezura sarısı */
  --basari: #1E7A4A;
  --u: #0070BA;              /* ürün rengi (her ürün kendi değerini verir) */
  --golge-1: 0 1px 2px rgba(11, 27, 51, .06), 0 2px 8px -2px rgba(11, 27, 51, .08);
  --golge-2: 0 2px 4px rgba(11, 27, 51, .06), 0 18px 40px -18px rgba(11, 27, 51, .28);
  --kap: 1240px;
  --yazi: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --r-k: 6px;
  --r-o: 12px;
  --r-b: 18px;
  --ust-y: 68px;
}

:root[data-tema="koyu"] {
  color-scheme: dark;
  --kagit: #0A1424;
  --yuzey: #111F36;
  --yuzey-2: #0E1A2E;
  --metin: #E7ECF4;
  --soluk: #A5B0C3;
  --soluk-2: #7F8BA1;
  --cizgi: #22334F;
  --cizgi-2: #2E4264;
  --lacivert: #060E1B;
  --lacivert-2: #0D1C33;
  --mezura: #F0423A;
  --mezura-koyu: #D12C25;
  --mavi: #5AB0EA;
  --sari: #F2B630;
  --basari: #5CC98C;
  --golge-1: 0 1px 2px rgba(0, 0, 0, .3);
  --golge-2: 0 20px 44px -20px rgba(0, 0, 0, .7);
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-y) + 16px); }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: 16px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--mavi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 750; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--mavi); outline-offset: 2px; border-radius: 4px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lacivert); color: #fff; padding: 10px 14px; border-radius: var(--r-k); }
.atla:focus { top: 12px; }
.kap { width: min(var(--kap), 100% - 32px); margin-inline: auto; }

/* Başlık ölçeği — geniş Archivo başlıklara karakter verir */
.b-dev { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem); font-variation-settings: "wdth" 116; font-weight: 820; letter-spacing: -.025em; line-height: 1.02; }
.b-1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); font-variation-settings: "wdth" 112; font-weight: 800; letter-spacing: -.02em; }
.b-2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-variation-settings: "wdth" 108; font-weight: 760; letter-spacing: -.012em; }
.b-3 { font-size: 1.08rem; font-variation-settings: "wdth" 104; font-weight: 700; }
.dar { font-variation-settings: "wdth" 86; }
.soluk { color: var(--soluk); }
.kucuk { font-size: .875rem; }

/* ---------- Düğmeler ---------- */
.btn {
  --b-zemin: var(--yuzey); --b-metin: var(--metin); --b-cizgi: var(--cizgi-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--b-cizgi); background: var(--b-zemin); color: var(--b-metin);
  font-weight: 650; font-size: .95rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--metin); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-mezura { --b-zemin: var(--mezura); --b-metin: #fff; --b-cizgi: var(--mezura); }
.btn-mezura:hover { --b-zemin: var(--mezura-koyu); border-color: var(--mezura-koyu); }
.btn-koyu { --b-zemin: var(--metin); --b-metin: var(--kagit); --b-cizgi: var(--metin); }
.btn-hayalet { --b-zemin: transparent; --b-cizgi: transparent; }
.btn-hayalet:hover { --b-zemin: var(--yuzey-2); border-color: transparent; }
.btn-kucuk { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn-genis { width: 100%; }
.btn-ikon { width: 44px; padding: 0; }
.btn .ik { flex: none; }
.secili-dugme { --b-zemin: var(--metin); --b-metin: var(--kagit); --b-cizgi: var(--metin); }

/* Çip (süzgeç, etiket) */
.cip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey);
  font-size: .875rem; font-weight: 550; color: var(--metin); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.cip:hover { border-color: var(--metin); }
.cip[aria-pressed="true"], .cip.secili { background: var(--metin); color: var(--kagit); border-color: var(--metin); }
.cip .sayi { font-variation-settings: "wdth" 86; color: var(--soluk-2); font-weight: 600; }
.cip[aria-pressed="true"] .sayi, .cip.secili .sayi { color: inherit; opacity: .7; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; }

.rozet { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 650; background: var(--yuzey-2); color: var(--soluk); border: 1px solid var(--cizgi); white-space: nowrap; }
.rozet-yeni { background: color-mix(in srgb, var(--mezura) 10%, var(--yuzey)); color: var(--mezura); border-color: color-mix(in srgb, var(--mezura) 30%, transparent); }
.rozet-dogru { background: color-mix(in srgb, var(--basari) 12%, var(--yuzey)); color: var(--basari); border-color: color-mix(in srgb, var(--basari) 30%, transparent); }

/* ---------- Üst çubuk ---------- */
.ust { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--kagit) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.ust.kaydi { border-bottom-color: var(--cizgi); }
.ust-ic { height: var(--ust-y); display: flex; align-items: center; gap: 22px; }
.marka { display: flex; align-items: center; gap: 10px; color: var(--metin); text-decoration: none; flex: none; }
.marka img { width: 34px; height: auto; }
.marka-ad { display: flex; flex-direction: column; line-height: 1; }
.marka-ad b { font-size: 1.32rem; font-variation-settings: "wdth" 120; font-weight: 820; letter-spacing: -.02em; }
.marka-ad small { font-size: .7rem; color: var(--soluk); font-weight: 600; margin-top: 3px; font-variation-settings: "wdth" 90; letter-spacing: .02em; }
.menu { display: flex; gap: 4px; }
.menu a { padding: 8px 12px; border-radius: 999px; color: var(--soluk); text-decoration: none; font-weight: 600; font-size: .95rem; }
.menu a:hover { color: var(--metin); background: var(--yuzey-2); }
.menu a[aria-current="page"] { color: var(--metin); background: var(--yuzey); box-shadow: var(--golge-1); }
.ust-ara { flex: 1; max-width: 380px; margin-left: auto; position: relative; }
.ust-ara input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); padding: 0 16px 0 42px; font-size: .92rem; }
.ust-ara input:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 22%, transparent); }
.ust-ara .ik { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk-2); pointer-events: none; }
.ust-sag { display: flex; align-items: center; gap: 6px; }
.dil-sec { display: flex; border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px; background: var(--yuzey); }
.dil-sec button { border: 0; background: none; padding: 4px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--soluk); }
.dil-sec button[aria-pressed="true"] { background: var(--metin); color: var(--kagit); }
.sepet-dugme { position: relative; }
.sepet-sayi { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mezura); color: #fff; font-size: .7rem; font-weight: 750; display: grid; place-items: center; }
.sepet-sayi:empty, .sepet-sayi[data-sifir] { display: none; }
.ust .menu-ac { display: none; }

/* Öneri kutusu (üst arama) */
.oneri { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); box-shadow: var(--golge-2); padding: 6px; z-index: 50; }
.oneri a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--metin); text-decoration: none; }
.oneri a:hover, .oneri a.aktif { background: var(--yuzey-2); }
.oneri small { display: block; color: var(--soluk); font-size: .8rem; }
.oneri-bos { padding: 10px; color: var(--soluk); font-size: .9rem; }

/* Mobil alt sekme çubuğu */
.alt-sekme { display: none; }

/* ---------- Ürün ikonu (kumaş dokulu kare) ---------- */
.uikon {
  --boy: 56px;
  width: var(--boy); height: var(--boy); flex: none; border-radius: 24%;
  background-color: var(--u); color: #fff; display: grid; place-items: center; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(11, 27, 51, .12);
}
.uikon img { width: 100%; height: 100%; object-fit: cover; }
.uikon .ik { width: 48%; height: 48%; position: relative; }
.uikon.dosya { background: none; box-shadow: 0 1px 2px rgba(11, 27, 51, .14); }

/* Kumaş desenleri — ürün rengi üstüne ince doku */
.desen-duz { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px); }
.desen-dimi { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 2px, transparent 2px 6px); }
.desen-balikSirti { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0,0,0,.1) 0 2px, transparent 2px 7px); background-size: 14px 14px, 14px 14px; background-position: 0 0, 7px 0; }
.desen-kareli { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 5px, transparent 5px 10px), repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 5px, transparent 5px 10px); }

/* Tırtıklı makas kenarı */
.tirtik-alt {
  /* Terzi makası: yuvarlak, oval dilimli kenar. --dg dilim genişliği, --dy dilim derinliği */
  --dg: 18px; --dy: 7px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--dy) + 1px) no-repeat,
                radial-gradient(50% 100% at 50% 0, #000 94%, #0000 100%) bottom / var(--dg) var(--dy) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--dy) + 1px) no-repeat,
        radial-gradient(50% 100% at 50% 0, #000 94%, #0000 100%) bottom / var(--dg) var(--dy) repeat-x;
}
.tirtik-ust {
  --dg: 18px; --dy: 7px;
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dy) + 1px) no-repeat,
                radial-gradient(50% 100% at 50% 100%, #000 94%, #0000 100%) top / var(--dg) var(--dy) repeat-x;
  mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dy) + 1px) no-repeat,
        radial-gradient(50% 100% at 50% 100%, #000 94%, #0000 100%) top / var(--dg) var(--dy) repeat-x;
}

/* ---------- Numune kartı (ürün kartı) ---------- */
.numune {
  display: flex; flex-direction: column; position: relative; color: var(--metin); text-decoration: none;
  background: var(--yuzey); border-radius: var(--r-o) var(--r-o) 0 0; box-shadow: var(--golge-1);
  transition: box-shadow .2s, transform .2s;
}
.numune:hover { box-shadow: var(--golge-2); transform: translateY(-2px); }
.numune-etiket { padding: 16px 16px 14px; display: grid; gap: 10px; flex: 1; }
.numune-bas { display: flex; gap: 12px; align-items: center; }
.numune-bas h3 { font-size: 1.02rem; font-variation-settings: "wdth" 104; font-weight: 730; line-height: 1.2; }
.numune-bas .kat { font-size: .8rem; color: var(--soluk); }
.numune p { font-size: .9rem; color: var(--soluk); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.numune-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .84rem; }
.numune-alt .fiyat { font-weight: 700; font-variation-settings: "wdth" 92; }
.numune-alt .fiyat small { font-weight: 500; color: var(--soluk); }
.modeller { display: inline-flex; gap: 4px; color: var(--soluk); }
.modeller .ik { width: 17px; height: 17px; }
.numune-kumas { height: 30px; background-color: var(--u); transition: height .2s; }
.numune:hover .numune-kumas { height: 38px; }
.numune .rozet-kose { position: absolute; top: 12px; right: 12px; }
.numune-puan { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.numune-puan .ik { color: var(--sari); width: 15px; height: 15px; }
.numune-puan.yok { color: var(--soluk-2); font-weight: 500; }

.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 20px; }

/* ---------- Raf (yatay kaydırılan liste) ---------- */
.raf { margin-top: 56px; }
.raf-bas { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.raf-bas p { color: var(--soluk); margin-top: 4px; font-size: .95rem; }
.raf-oklar { display: flex; gap: 6px; }
.raf-serit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 270px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 20px; margin: 0 -4px; scrollbar-width: thin; }
.raf-serit > * { scroll-snap-align: start; }

/* ---------- Vitrin: kahraman + kartela yelpazesi ---------- */
.kahraman { padding: 56px 0 32px; overflow: hidden; }
.kahraman-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; align-items: center; }
.kahraman h1 { max-width: 13ch; }
.kahraman .alt { margin-top: 18px; font-size: 1.12rem; color: var(--soluk); max-width: 46ch; }
.buyuk-ara { margin-top: 28px; position: relative; max-width: 520px; }
.buyuk-ara input { width: 100%; height: 58px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); padding: 0 140px 0 52px; font-size: 1.02rem; box-shadow: var(--golge-1); }
.buyuk-ara input:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mavi) 20%, transparent); }
.buyuk-ara > .ik { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--soluk-2); }
.buyuk-ara .btn { position: absolute; right: 7px; top: 7px; min-height: 44px; }
.kahraman .cipler { margin-top: 16px; }

.yelpaze { position: relative; height: 470px; }
.yelpaze-percin { position: absolute; right: 178px; bottom: 34px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F4F6FA, #9AA4B5 70%); box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 -1px 2px rgba(0,0,0,.25); z-index: 20; }
.yaprak {
  --aci: 0deg; --kalk: 0px;
  position: absolute; right: 12px; bottom: 12px; width: 210px; height: 400px;
  transform-origin: 33px calc(100% - 33px);
  transform: rotate(calc(var(--aci) * var(--yayilim, 1))) translateY(var(--kalk));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; text-decoration: none; color: var(--metin);
  filter: drop-shadow(0 10px 16px rgba(11, 27, 51, .18));
}
.yaprak:hover, .yaprak:focus-visible { --kalk: -22px; z-index: 15; }
.yaprak-kumas { flex: 1; background-color: var(--u); border-radius: 4px 4px 0 0; position: relative; padding: 22px 18px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.yaprak-kumas .uikon { --boy: 50px; background-color: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.yaprak-kumas b { font-size: 1.32rem; font-variation-settings: "wdth" 112; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.yaprak-etiket { height: 74px; background: var(--yuzey); border-radius: 0 0 6px 6px; padding: 12px 16px 12px 66px; font-size: .78rem; color: var(--soluk); display: flex; flex-direction: column; justify-content: center; line-height: 1.3; border-top: 1px dashed var(--cizgi-2); }
.yaprak-etiket strong { color: var(--metin); font-size: .84rem; font-variation-settings: "wdth" 90; }
.yelpaze[data-acik="hayir"] .yaprak { --aci: 0deg !important; }

/* Kurulum modeli kutuları */
.modeller-serit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.model-kutu { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 20px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); color: var(--metin); text-decoration: none; transition: border-color .15s; }
.model-kutu:hover { border-color: var(--metin); }
.model-kutu .ik { width: 30px; height: 30px; color: var(--mavi); grid-row: span 2; margin-top: 2px; }
.model-kutu b { font-size: 1.05rem; font-variation-settings: "wdth" 106; display: flex; justify-content: space-between; gap: 8px; }
.model-kutu b span { font-weight: 600; color: var(--soluk-2); font-variation-settings: "wdth" 86; font-size: .9rem; }
.model-kutu p { color: var(--soluk); font-size: .9rem; }

/* Öne çıkan büyük kart */
.one-izgara { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.one-kart { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--yuzey); border-radius: var(--r-b); overflow: hidden; color: var(--metin); text-decoration: none; box-shadow: var(--golge-1); transition: box-shadow .2s; }
.one-kart:hover { box-shadow: var(--golge-2); }
.one-gorsel { aspect-ratio: 16 / 9; background-color: var(--u); position: relative; overflow: hidden; }
.one-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.one-kart:not(:first-child) .one-gorsel { aspect-ratio: 16 / 7; }
.one-izgara > .one-kart { grid-template-rows: 1fr auto; }
.one-izgara > .one-kart .one-gorsel { aspect-ratio: auto; min-height: 260px; }
.one-yan .one-kart { grid-template-rows: auto 1fr; }
.one-yan .one-kart .one-gorsel { aspect-ratio: 16 / 7; min-height: 0; }
.one-metin { padding: 18px 20px 20px; display: flex; gap: 14px; align-items: center; }
.one-metin h3 { font-size: 1.15rem; font-variation-settings: "wdth" 106; }
.one-metin p { color: var(--soluk); font-size: .92rem; margin-top: 2px; }
.one-yan { display: grid; gap: 20px; }

/* Ürün maketi: ekran görüntüsü yokken çizilen sade uygulama penceresi */
.maket { position: absolute; inset: 14% 8% -10% 8%; background: var(--yuzey); border-radius: 10px 10px 0 0; box-shadow: 0 20px 40px -10px rgba(0,0,0,.35); display: grid; grid-template-columns: 22% 1fr; overflow: hidden; }
.maket-yan { background: var(--yuzey-2); border-right: 1px solid var(--cizgi); padding: 10% 12%; display: grid; align-content: start; gap: 9px; }
.maket-yan i { height: 7px; border-radius: 4px; background: var(--cizgi); display: block; }
.maket-yan i:first-child { background: var(--u); width: 70%; }
.maket-ic { padding: 6%; display: grid; gap: 8%; align-content: start; }
.maket-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.maket-kutular span { height: 38px; border-radius: 6px; background: var(--yuzey-2); border: 1px solid var(--cizgi); position: relative; }
.maket-kutular span::after { content: ""; position: absolute; left: 10%; bottom: 22%; height: 5px; border-radius: 3px; width: 52%; background: var(--u); opacity: .7; }
.maket-grafik { display: flex; align-items: end; gap: 5px; height: 70px; }
.maket-grafik span { flex: 1; background: color-mix(in srgb, var(--u) 75%, var(--yuzey)); border-radius: 3px 3px 0 0; }

/* Kategoriler */
.kat-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kat-sekme { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-o); background: var(--yuzey); border: 1px solid var(--cizgi); text-decoration: none; color: var(--metin); font-weight: 650; position: relative; overflow: hidden; }
.kat-sekme::before { content: ""; width: 10px; align-self: stretch; margin: -14px 0 -14px -16px; background: var(--u); }
.kat-sekme span { margin-left: auto; color: var(--soluk-2); font-variation-settings: "wdth" 86; font-weight: 600; }
.kat-sekme:hover { border-color: var(--metin); }

/* Oyun bandı */
.oyun-bant { margin-top: 72px; background: var(--lacivert); color: var(--lacivert-metin); position: relative; overflow: hidden; }
.oyun-bant-ic { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 56px 0; }
.oyun-bant p { color: #A9B6CC; margin-top: 12px; max-width: 46ch; }
.oyun-bant .btn { margin-top: 22px; }
.oyun-onizleme { aspect-ratio: 16 / 10; border-radius: var(--r-o); background: #061021; border: 1px solid #1E3354; position: relative; overflow: hidden; }
.oyun-onizleme canvas { width: 100%; height: 100%; display: block; }
.mini-liste { margin-top: 18px; display: grid; gap: 6px; max-width: 360px; list-style: none; }
.mini-liste li { display: flex; gap: 10px; font-size: .9rem; color: #C7D2E4; }
.mini-liste li b { margin-left: auto; color: #fff; font-variation-settings: "wdth" 88; }

.olcu-cta { margin: 72px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--r-b); background: var(--yuzey); border: 1px dashed var(--cizgi-2); }
.olcu-cta p { color: var(--soluk); margin-top: 6px; }

/* ---------- Sayfa başı (iç sayfalar) ---------- */
.sayfa-bas { padding: 36px 0 20px; }
.sayfa-bas p { color: var(--soluk); margin-top: 8px; max-width: 60ch; }
.yol { display: flex; gap: 8px; font-size: .85rem; color: var(--soluk); margin-bottom: 14px; flex-wrap: wrap; }
.yol a { color: var(--soluk); }

/* ---------- Katalog ---------- */
.katalog { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 40px; }
.suzgec { position: sticky; top: calc(var(--ust-y) + 16px); display: grid; gap: 22px; max-height: calc(100vh - var(--ust-y) - 32px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.suzgec fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.suzgec legend { font-weight: 700; font-size: .92rem; margin-bottom: 6px; font-variation-settings: "wdth" 104; }
.secim { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.secim:hover { background: var(--yuzey); }
.secim input { width: 17px; height: 17px; accent-color: var(--metin); margin: 0; }
.secim span:last-child { margin-left: auto; color: var(--soluk-2); font-size: .82rem; font-variation-settings: "wdth" 86; }
.katalog-arac { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.katalog-arac .ara-kutu { flex: 1; min-width: 220px; position: relative; }
.katalog-arac .ara-kutu input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); padding: 0 16px 0 42px; }
.katalog-arac .ara-kutu .ik { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk-2); }
.sec-kutu { height: 44px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); padding: 0 36px 0 16px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px top 50%, right 13px top 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.sonuc-sayi { color: var(--soluk); font-size: .9rem; }
.suzgec-ac { display: none; }
.suzgec-kapat { display: none !important; }
.cip .ik { width: 15px; height: 15px; }
.etkin-suzgecler { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.bos-durum { padding: 56px 24px; text-align: center; background: var(--yuzey); border: 1px dashed var(--cizgi-2); border-radius: var(--r-o); }
.bos-durum p { color: var(--soluk); margin: 8px auto 18px; max-width: 44ch; }

/* ---------- Ürün sayfası ---------- */
.urun-bas { padding: 28px 0 8px; }
.urun-bas-ic { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.urun-bas-ic > div { min-width: 0; }
.urun-bas .uikon { --boy: 124px; border-radius: 26%; }
.urun-bas .uikon .ik { width: 46%; height: 46%; }
.urun-yayinci { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--soluk); font-size: .95rem; }
.urun-yayinci a { color: var(--mavi); font-weight: 600; text-decoration: none; }
.urun-istatistik { display: flex; flex-wrap: wrap; margin-top: 20px; }
.urun-istatistik > * { padding: 0 22px; border-left: 1px solid var(--cizgi); display: grid; gap: 2px; justify-items: start; min-width: 0; }
.urun-istatistik > *:first-child { padding-left: 0; border-left: 0; }
.urun-istatistik b { font-size: 1.05rem; font-variation-settings: "wdth" 96; display: inline-flex; align-items: center; gap: 5px; }
.urun-istatistik span { font-size: .8rem; color: var(--soluk); }
.urun-istatistik b .ik { width: 17px; height: 17px; }
.urun-istatistik .yildiz-ik { color: var(--sari); }
a.istatistik-link { text-decoration: none; color: inherit; }
.urun-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.urun-eylem .btn-mezura { min-width: 180px; }

.galeri { margin-top: 28px; }
.galeri-bas { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.galeri-serit { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.galeri-oge { flex: none; scroll-snap-align: start; border: 0; padding: 0; background: none; cursor: zoom-in; text-align: left; color: var(--metin); }
.galeri-oge .cerceve { border-radius: 10px; overflow: hidden; background: var(--yuzey); box-shadow: var(--golge-1); border: 1px solid var(--cizgi); }
.galeri-oge .cerceve-cubuk { height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 9px; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); }
.galeri-oge .cerceve-cubuk i { width: 7px; height: 7px; border-radius: 50%; background: var(--cizgi-2); }
.galeri-oge img { height: 300px; width: auto; max-width: none; }
.galeri-oge.mobil .cerceve { border-radius: 22px; padding: 6px; background: #0B1220; border-color: #0B1220; }
.galeri-oge.mobil img { height: 380px; border-radius: 16px; }
.galeri figcaption { font-size: .85rem; color: var(--soluk); margin-top: 8px; max-width: 46ch; }
.galeri figcaption b { color: var(--metin); display: block; font-weight: 650; }
.galeri-maket { position: relative; width: 520px; height: 300px; background-color: var(--u); border-radius: 10px; overflow: hidden; flex: none; }

.urun-govde { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; margin-top: 12px; padding-bottom: 56px; }
.bolum { padding-top: 40px; }
.bolum > h2 { margin-bottom: 14px; }
.bolum-bas { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.metin-blok { display: grid; gap: 12px; max-width: 68ch; color: var(--metin); font-size: 1.02rem; }
.liste-tik { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.liste-tik li { display: flex; gap: 10px; align-items: flex-start; }
.liste-tik .ik { color: var(--basari); width: 18px; height: 18px; flex: none; margin-top: 3px; }

.sekme-cubuk { position: sticky; top: var(--ust-y); z-index: 20; background: color-mix(in srgb, var(--kagit) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); margin-top: 24px; }
.sekme-cubuk nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.sekme-cubuk a { padding: 13px 14px; color: var(--soluk); text-decoration: none; font-weight: 600; font-size: .93rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.sekme-cubuk a:hover { color: var(--metin); }
.sekme-cubuk a[aria-current="true"] { color: var(--metin); border-bottom-color: var(--mezura); }

.yenilik { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 18px 20px; }
.yenilik-bas { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--soluk); font-size: .9rem; margin-bottom: 8px; }
.yenilik-bas b { color: var(--metin); font-size: 1rem; }
.yenilik ul { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }

.pil-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pil { padding: 18px; background: var(--yuzey); border-radius: var(--r-o); border: 1px solid var(--cizgi); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.pil .ikon-yuva { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--u) 14%, var(--yuzey)); color: var(--u); display: grid; place-items: center; }
.pil h3 { font-size: 1rem; font-variation-settings: "wdth" 104; font-weight: 700; }
.pil p { color: var(--soluk); font-size: .92rem; }

.adimlar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: adim; }
.adimlar li { counter-increment: adim; padding: 18px 20px 4px 0; position: relative; border-top: 2px solid var(--cizgi); }
.adimlar li::before { content: counter(adim); position: absolute; top: -15px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--kagit); border: 2px solid var(--metin); font-weight: 750; font-size: .85rem; display: grid; place-items: center; font-variation-settings: "wdth" 90; }
.adimlar li:first-child { border-top-color: var(--u); }
.adimlar h3 { font-size: 1rem; margin: 10px 0 4px; font-variation-settings: "wdth" 104; }
.adimlar p { color: var(--soluk); font-size: .92rem; }

.kazanim-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 28px; }
.kazanim { padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.kazanim h3 { font-size: 1rem; font-variation-settings: "wdth" 104; }
.kazanim p { color: var(--soluk); font-size: .92rem; margin-top: 2px; }

/* Kurulum modelleri (sekmeli) */
.model-sekme { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.model-sekme button { flex: none; }
.model-sekme button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 650; font-size: .9rem; color: var(--soluk); display: inline-flex; gap: 7px; align-items: center; }
.model-sekme button .ik { width: 17px; height: 17px; }
.model-sekme button[aria-selected="true"] { background: var(--metin); color: var(--kagit); }
.model-sekme button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.model-panel { margin-top: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 22px; display: grid; gap: 16px; }
.model-bilgi { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.model-bilgi div { display: grid; }
.model-bilgi span { font-size: .8rem; color: var(--soluk); }
.model-bilgi b { font-variation-settings: "wdth" 96; }
.gereksinim { list-style: none; display: grid; gap: 6px; border-top: 1px solid var(--cizgi); padding-top: 14px; }
.gereksinim li { display: flex; gap: 10px; font-size: .93rem; }
.gereksinim .ik { width: 17px; height: 17px; color: var(--soluk); flex: none; margin-top: 2px; }

/* Paketler */
.donem-sec { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; }
.anahtar { width: 44px; height: 26px; border-radius: 999px; background: var(--cizgi-2); border: 0; position: relative; cursor: pointer; padding: 0; flex: none; }
.anahtar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.anahtar[aria-checked="true"] { background: var(--basari); }
.anahtar[aria-checked="true"]::after { transform: translateX(18px); }
.indirim { color: var(--basari); font-weight: 700; }
.paket-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.paket { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.paket.onerilen { border: 2px solid var(--metin); padding: 21px 19px; }
.paket.onerilen .rozet { position: absolute; top: -12px; left: 18px; background: var(--metin); color: var(--kagit); border-color: var(--metin); }
.paket h3 { font-size: 1.08rem; font-variation-settings: "wdth" 106; }
.paket-fiyat { font-size: 1.7rem; font-weight: 800; font-variation-settings: "wdth" 92; letter-spacing: -.01em; line-height: 1.1; }
.paket-fiyat small { font-size: .85rem; font-weight: 500; color: var(--soluk); letter-spacing: 0; }
.paket-fiyat.teklif { font-size: 1.25rem; }
.paket > p { color: var(--soluk); font-size: .9rem; }
.paket ul { list-style: none; display: grid; gap: 6px; font-size: .9rem; flex: 1; }
.paket li { display: flex; gap: 8px; }
.paket li .ik { width: 16px; height: 16px; color: var(--basari); flex: none; margin-top: 3px; }
.not-satir { color: var(--soluk); font-size: .85rem; margin-top: 12px; }

/* Veri güvenliği */
.guvenlik { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); }
.guvenlik-satir { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.guvenlik-satir:last-child { border-bottom: 0; }
.guvenlik-satir .ik { grid-row: span 2; width: 22px; height: 22px; color: var(--soluk); margin-top: 2px; }
.guvenlik-satir b { font-size: .95rem; }
.guvenlik-satir p { color: var(--soluk); font-size: .92rem; }

/* SSS */
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 650; list-style: none; position: relative; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--soluk); border-bottom: 2px solid var(--soluk); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.sss details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sss details p { padding: 0 0 18px; color: var(--soluk); max-width: 70ch; }

/* Yan kart */
.yan-kart { position: sticky; top: calc(var(--ust-y) + 64px); background: var(--yuzey); border-radius: var(--r-b); box-shadow: var(--golge-1); border: 1px solid var(--cizgi); overflow: hidden; }
.yan-kart-ust { padding: 20px 20px 16px; }
.yan-kart-ust .etiket { font-size: .85rem; color: var(--soluk); }
.yan-kart-ust .fiyat { font-size: 1.85rem; font-weight: 820; font-variation-settings: "wdth" 92; letter-spacing: -.015em; line-height: 1.1; margin-top: 2px; }
.yan-kart-ust .fiyat small { font-size: .9rem; font-weight: 500; color: var(--soluk); letter-spacing: 0; }
.yan-kart-ust .btn { margin-top: 12px; }
.yan-liste { list-style: none; border-top: 1px solid var(--cizgi); }
.yan-liste li { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--cizgi); font-size: .9rem; align-items: flex-start; }
.yan-liste li:last-child { border-bottom: 0; }
.yan-liste .ik { width: 18px; height: 18px; color: var(--soluk); flex: none; margin-top: 2px; }
.yan-liste span { color: var(--soluk); display: block; font-size: .8rem; }
.yan-kart-kumas { height: 14px; background-color: var(--u); }

/* ---------- Yıldızlar ve yorumlar ---------- */
.yildizlar { display: inline-flex; gap: 1px; color: var(--sari); vertical-align: middle; }
.yildizlar .ik { width: var(--yb, 16px); height: var(--yb, 16px); }
.yildizlar .bos { color: var(--cizgi-2); }

.puan-ozet { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 22px 24px; }
.puan-buyuk { text-align: center; }
.puan-buyuk b { display: block; font-size: 3.4rem; font-weight: 820; font-variation-settings: "wdth" 96; line-height: 1; letter-spacing: -.02em; }
.puan-buyuk .yildizlar { --yb: 18px; margin-top: 6px; }
.puan-buyuk > span:not(.yildizlar) { display: block; font-size: .85rem; color: var(--soluk); margin-top: 4px; }
.dagilim { display: grid; gap: 6px; }
.dagilim button { display: grid; grid-template-columns: 26px 1fr 34px; gap: 10px; align-items: center; border: 0; background: none; padding: 2px 4px; border-radius: 6px; cursor: pointer; font-size: .85rem; color: var(--soluk); font-variation-settings: "wdth" 90; }
.dagilim button:hover, .dagilim button[aria-pressed="true"] { background: var(--yuzey-2); color: var(--metin); }
.dagilim .cubuk { height: 9px; border-radius: 999px; background: var(--yuzey-2); overflow: hidden; border: 1px solid var(--cizgi); }
.dagilim .cubuk i { display: block; height: 100%; background: var(--sari); border-radius: 999px; }
.yorum-arac { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 6px; }
.yorum-arac .btn-mezura { margin-left: auto; }
.yorum { padding: 20px 0; border-bottom: 1px solid var(--cizgi); display: grid; gap: 8px; }
.yorum-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; color: #fff; font-size: .9rem; flex: none; }
.yorum-bas .kim { display: grid; line-height: 1.25; }
.yorum-bas .kim b { font-size: .95rem; }
.yorum-bas .kim span { font-size: .8rem; color: var(--soluk); }
.yorum-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--soluk); }
.yorum h3 { font-size: 1rem; font-variation-settings: "wdth" 104; }
.yorum-metin { color: var(--metin); max-width: 72ch; white-space: pre-line; }
.yorum-metin.kisa { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.yorum-alt { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--soluk); }
.faydali { border: 1px solid var(--cizgi-2); background: none; border-radius: 999px; padding: 4px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--soluk); }
.faydali .ik { width: 15px; height: 15px; }
.faydali[aria-pressed="true"] { border-color: var(--basari); color: var(--basari); }
.yanit { margin-top: 6px; background: var(--yuzey-2); border-left: 3px solid var(--u); border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: .93rem; }
.yanit b { display: flex; gap: 8px; align-items: center; font-size: .88rem; margin-bottom: 4px; }
.yanit b span { font-weight: 500; color: var(--soluk); }
.onizleme-not { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--soluk); background: var(--yuzey-2); border: 1px dashed var(--cizgi-2); padding: 8px 12px; border-radius: 8px; margin-top: 10px; }
.yorum-bos { padding: 28px 24px; text-align: center; border: 1px dashed var(--cizgi-2); border-radius: var(--r-o); margin-top: 14px; }
.yorum-bos p { color: var(--soluk); margin: 6px auto 14px; max-width: 42ch; }

.yildiz-sec { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.yildiz-sec input { position: absolute; opacity: 0; pointer-events: none; }
.yildiz-sec label { cursor: pointer; color: var(--cizgi-2); transition: color .1s, transform .1s; }
.yildiz-sec label .ik { width: 34px; height: 34px; }
.yildiz-sec label:hover, .yildiz-sec label:hover ~ label, .yildiz-sec input:checked ~ label { color: var(--sari); }
.yildiz-sec input:focus-visible + label { outline: 3px solid var(--mavi); border-radius: 6px; }
.yildiz-sec label:active { transform: scale(.9); }
.yildiz-yazi { font-size: .9rem; color: var(--soluk); margin-left: 10px; min-height: 1.4em; }

/* ---------- Formlar ---------- */
.alan { display: grid; gap: 6px; align-content: start; }
.alan > span { font-size: .88rem; font-weight: 650; }
.alan > span i { color: var(--mezura); font-style: normal; margin-left: 2px; }
.alan input, .alan select, .alan textarea { width: 100%; min-height: 46px; border-radius: 10px; border: 1px solid var(--cizgi-2); background: var(--yuzey); padding: 10px 14px; font-size: .97rem; }
.alan textarea { min-height: 120px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 20%, transparent); }
.alan small { font-size: .8rem; color: var(--soluk); }
.alan.hatali input, .alan.hatali select, .alan.hatali textarea { border-color: var(--mezura); }
.alan.hatali small.hata { color: var(--mezura); }
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
[hidden] { display: none !important; }
.onay-kutu { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--soluk); cursor: pointer; }
.onay-kutu input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--metin); flex: none; }
.onay-kutu.hatali { color: var(--mezura); }
.uyari { padding: 12px 14px; border-radius: 10px; background: var(--yuzey-2); border: 1px solid var(--cizgi-2); font-size: .92rem; }
.uyari.hata { border-color: color-mix(in srgb, var(--mezura) 40%, transparent); background: color-mix(in srgb, var(--mezura) 7%, var(--yuzey)); color: var(--mezura); }
.uyari.tamam { border-color: color-mix(in srgb, var(--basari) 40%, transparent); background: color-mix(in srgb, var(--basari) 8%, var(--yuzey)); color: var(--basari); }

/* ---------- Pencere (modal) ve çekmece ---------- */
.ortu { position: fixed; inset: 0; background: rgba(6, 14, 27, .55); z-index: 80; display: grid; place-items: center; padding: 16px; animation: belir .15s ease-out; }
.pencere { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--yuzey); border-radius: var(--r-b); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.pencere-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; background: var(--yuzey); z-index: 1; }
.pencere-govde { padding: 20px; display: grid; gap: 16px; }
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--yuzey); z-index: 90; box-shadow: -20px 0 60px -20px rgba(0,0,0,.4); display: flex; flex-direction: column; animation: kay .22s cubic-bezier(.2,.8,.2,1); }
.cekmece-govde { flex: 1; overflow: auto; padding: 8px 20px; }
.cekmece-alt { padding: 16px 20px; border-top: 1px solid var(--cizgi); display: grid; gap: 10px; }
.sepet-kalem { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); align-items: center; }
.sepet-kalem .uikon { --boy: 44px; }
.sepet-kalem b { display: block; font-size: .95rem; }
.sepet-kalem span { font-size: .82rem; color: var(--soluk); }
.toplam { display: flex; justify-content: space-between; font-weight: 750; }
@keyframes belir { from { opacity: 0; } }
@keyframes kay { from { transform: translateX(40px); opacity: 0; } }

/* Tam ekran görüntüleyici */
.isik-kutu { position: fixed; inset: 0; z-index: 95; background: rgba(4, 9, 18, .92); display: grid; grid-template-rows: auto 1fr auto; color: #fff; }
.isik-kutu-ust { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.isik-kutu figure { margin: 0; display: grid; place-items: center; padding: 0 64px; min-height: 0; }
.isik-kutu img { max-height: calc(100vh - 160px); max-width: 100%; object-fit: contain; border-radius: 8px; }
.isik-kutu figcaption { text-align: center; padding: 14px 18px 22px; color: #C4CEDE; font-size: .95rem; }
.isik-kutu figcaption b { color: #fff; display: block; }
.isik-kutu .ok { position: absolute; top: 50%; transform: translateY(-50%); }
.isik-kutu .ok.sol { left: 14px; } .isik-kutu .ok.sag { right: 14px; }
.isik-kutu .btn { --b-zemin: rgba(255,255,255,.1); --b-metin: #fff; --b-cizgi: rgba(255,255,255,.2); }

/* Bildirim */
.bildirim { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 99; background: var(--metin); color: var(--kagit); padding: 12px 18px; border-radius: 999px; font-size: .92rem; font-weight: 600; box-shadow: var(--golge-2); transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100% - 32px); }
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }

/* Yan yana tepsisi */
.tepsi { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; background: var(--lacivert); color: #fff; border-radius: 999px; padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--golge-2); font-size: .9rem; }
.tepsi .uikon { --boy: 30px; }
.tepsi-ikonlar { display: flex; gap: 4px; }
.tepsi .btn { min-height: 38px; }
.tepsi .btn-hayalet { --b-metin: #fff; }
.tepsi .btn-hayalet:hover { --b-zemin: rgba(255,255,255,.1); }

/* ---------- Karşılaştırma ---------- */
.kiyas-sar { overflow-x: auto; padding-bottom: 40px; position: relative; }
.kiyas { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); overflow: hidden; }
.kiyas th, .kiyas td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi); font-size: .93rem; }
.kiyas tbody th { width: 190px; color: var(--soluk); font-weight: 600; background: var(--yuzey-2); }
.kiyas thead th { vertical-align: bottom; border-bottom: 2px solid var(--cizgi-2); }
.kiyas tr:last-child th, .kiyas tr:last-child td { border-bottom: 0; }
.kiyas-urun { display: grid; gap: 10px; }
.kiyas-urun .uikon { --boy: 52px; }
.kiyas-urun a { color: var(--metin); font-weight: 750; text-decoration: none; font-size: 1.02rem; font-variation-settings: "wdth" 104; }
.kiyas-bos { display: grid; gap: 8px; color: var(--soluk); font-weight: 500; }
.var { color: var(--basari); } .yok { color: var(--soluk-2); }
.kiyas .ik { width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- Başvuru ---------- */
.form-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; padding: 24px 0 64px; align-items: start; }
.form-yan h1 { margin-top: 14px; }
.form-yan > p { color: var(--soluk); margin-top: 12px; max-width: 44ch; }
.form-kart { background: var(--yuzey); border-radius: var(--r-b); box-shadow: var(--golge-1); border: 1px solid var(--cizgi); padding: 26px; display: grid; gap: 16px; }
.mod-sekme { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.mod-sekme button { flex: 1; border: 0; background: none; padding: 9px 10px; border-radius: 999px; font-weight: 650; font-size: .9rem; cursor: pointer; color: var(--soluk); }
.mod-sekme button[aria-selected="true"] { background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-1); }
.form-ozet { display: grid; gap: 10px; margin-top: 24px; }
.form-ozet .sepet-kalem { border-color: var(--cizgi); }
.tamam-ekran { text-align: center; padding: 72px 16px; display: grid; justify-items: center; gap: 12px; }
.tamam-ekran .daire { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--basari) 14%, var(--yuzey)); color: var(--basari); }
.tamam-ekran .daire.kirmizi { background: color-mix(in srgb, var(--mezura) 12%, var(--yuzey)); color: var(--mezura); }
.tamam-ekran .daire .ik { width: 36px; height: 36px; }
.tamam-ekran p { color: var(--soluk); max-width: 46ch; }
.tamam-ekran .eylemler { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ---------- Oyun ---------- */
.oyun-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding: 8px 0 64px; align-items: start; }
.oyun-alan { position: relative; background: #061021; border-radius: var(--r-b); overflow: hidden; border: 1px solid #1B2E4D; aspect-ratio: 4 / 3; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.oyun-alan canvas { width: 100%; height: 100%; display: block; }
.oyun-katman { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #E6ECF6; background: rgba(6, 16, 33, .78); }
.oyun-katman[hidden] { display: none; }
.oyun-katman-ic { display: grid; gap: 14px; justify-items: center; max-width: 440px; }
.oyun-katman h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); font-variation-settings: "wdth" 120; font-weight: 850; letter-spacing: -.02em; color: #fff; }
.oyun-katman p { color: #AFBBD0; }
.oyun-katman .skor-buyuk { font-size: 3.4rem; font-weight: 850; font-variation-settings: "wdth" 96; color: #F2C12E; line-height: 1; }
.oyun-katman form { display: flex; gap: 8px; width: 100%; max-width: 340px; }
.oyun-katman input { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid #2B4268; background: #0B1A31; color: #fff; padding: 0 16px; }
.tus-ipucu { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: .85rem; color: #AFBBD0; }
.tus-ipucu kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 5px; border: 1px solid #3A5078; border-bottom-width: 3px; background: #0E203C; color: #fff; font: 600 .8rem var(--yazi); margin-right: 4px; }
.oyun-tuslar { display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.oyun-tuslar button { min-height: 58px; border-radius: 14px; border: 1px solid var(--cizgi-2); background: var(--yuzey); font-weight: 700; font-size: .82rem; display: grid; place-items: center; gap: 2px; cursor: pointer; padding: 6px 4px; color: var(--metin); }
.oyun-tuslar button .ik { width: 22px; height: 22px; }
.oyun-tuslar button.sil { color: var(--mezura); }
.oyun-yan { display: grid; gap: 18px; }
.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 18px 20px; }
.kutu h2 { font-size: 1.05rem; font-variation-settings: "wdth" 106; margin-bottom: 10px; }
.kural { list-style: none; display: grid; gap: 10px; font-size: .92rem; }
.kural li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.kural .ornek { width: 30px; height: 24px; border-radius: 5px; display: grid; place-items: center; color: #fff; }
.kural .ornek .ik { width: 15px; height: 15px; }
.lider { list-style: none; counter-reset: lider; display: grid; }
.lider li { counter-increment: lider; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); font-size: .92rem; }
.lider li:last-child { border-bottom: 0; }
.lider li::before { content: counter(lider); color: var(--soluk-2); font-weight: 700; font-variation-settings: "wdth" 86; }
.lider li:nth-child(1)::before { color: var(--sari); }
.lider li b { font-variation-settings: "wdth" 90; }
.lider li.ben { background: color-mix(in srgb, var(--sari) 12%, transparent); border-radius: 6px; }
.lider-bos { color: var(--soluk); font-size: .9rem; }

/* ---------- Alt bilgi ---------- */
.site-alt { margin-top: 80px; background: var(--lacivert); color: #B8C4D8; font-size: .92rem; }
.site-alt-ic { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding: 52px 0 36px; }
.site-alt h2 { color: #fff; font-size: .95rem; margin-bottom: 12px; font-variation-settings: "wdth" 104; }
.site-alt ul { list-style: none; display: grid; gap: 8px; }
.site-alt a { color: #B8C4D8; text-decoration: none; }
.site-alt a:hover { color: #fff; text-decoration: underline; }
.site-alt .marka { color: #fff; }
.site-alt-tanitim { margin-top: 14px; max-width: 34ch; }
.site-alt-son { border-top: 1px solid #1B2D4B; padding: 18px 0 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: #8494AE; }
.site-alt-kumas { height: 10px; background: repeating-linear-gradient(90deg, var(--mezura) 0 2px, transparent 2px 10px), var(--lacivert); opacity: .9; }

/* İskelet (yüklenirken) */
.iskelet { background: linear-gradient(90deg, var(--yuzey) 0%, var(--yuzey-2) 50%, var(--yuzey) 100%); background-size: 200% 100%; animation: parla 1.2s infinite linear; border-radius: var(--r-o); min-height: 200px; }
@keyframes parla { to { background-position: -200% 0; } }
.hata-blok { padding: 48px 20px; text-align: center; color: var(--soluk); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1100px) {
  .ust-ara { max-width: 260px; }
  .menu a { padding: 8px 9px; }
  .urun-govde { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
}
@media (max-width: 960px) {
  .kahraman-ic { grid-template-columns: 1fr; }
  .yelpaze { height: 400px; margin: 0 auto; width: 100%; max-width: 520px; }
  .one-izgara { grid-template-columns: 1fr; }
  .oyun-bant-ic { grid-template-columns: 1fr; }
  .katalog { grid-template-columns: 1fr; }
  .suzgec { display: none; position: fixed; inset: 0; top: auto; max-height: 82vh; overflow: auto; z-index: 85; background: var(--yuzey); padding: 20px; border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.3); }
  .suzgec.acik { display: grid; }
  .suzgec .suzgec-kapat { display: inline-flex !important; position: sticky; bottom: 0; }
  .suzgec-ac { display: inline-flex; }
  .urun-govde { grid-template-columns: 1fr; }
  .yan-kart { position: static; }
  .form-sayfa, .oyun-sayfa { grid-template-columns: 1fr; }
  .site-alt-ic { grid-template-columns: 1fr 1fr; }
  .menu { display: none; }
}
@media (max-width: 760px) {
  :root { --ust-y: 60px; }
  .ust-ara { display: none; }
  .dil-sec { display: none; }
  .alt-sekme { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: color-mix(in srgb, var(--yuzey) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--cizgi); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .alt-sekme a { display: grid; justify-items: center; gap: 2px; font-size: .7rem; font-weight: 650; color: var(--soluk); text-decoration: none; padding: 4px; border-radius: 10px; }
  .alt-sekme a[aria-current="page"] { color: var(--metin); }
  .alt-sekme a[aria-current="page"] .ik { color: var(--mezura); }
  .alt-sekme .ik { width: 22px; height: 22px; }
  body { padding-bottom: 68px; }
  .bildirim, .tepsi { bottom: 84px; }
  .kahraman { padding-top: 28px; }
  .yelpaze { height: 340px; }
  .yaprak { width: 168px; height: 320px; }
  .yelpaze { --yayilim: .72; }
  .yelpaze-percin { right: 136px; }
  .yaprak-kumas b { font-size: 1.1rem; }
  .yaprak-etiket { height: 64px; padding-left: 58px; }
  .modeller-serit { grid-template-columns: 1fr; }
  .urun-bas-ic { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .urun-bas .uikon { --boy: 84px; }
  .urun-istatistik > * { padding: 0 14px; }
  .urun-eylem .btn { flex: 1; }
  .pil-izgara, .kazanim-izgara { grid-template-columns: 1fr; }
  .adimlar { grid-template-columns: 1fr; gap: 26px; }
  .galeri-oge img { height: 210px; }
  .galeri-oge.mobil img { height: 340px; }
  .galeri-maket { width: 340px; height: 210px; }
  .puan-ozet { grid-template-columns: 1fr; gap: 16px; }
  .yorum-arac .btn-mezura { margin-left: 0; width: 100%; }
  .raf-oklar .btn-ikon { display: none; }
  .buyuk-ara input { padding-right: 18px; }
  .buyuk-ara .btn { display: none; }
  .urun-istatistik { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .urun-istatistik > * { flex: none; }
  .yan-kart { margin-top: 8px; }
  .alan-ikili { grid-template-columns: 1fr; }
  .olcu-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .site-alt-ic { grid-template-columns: 1fr; gap: 24px; }
  .oyun-tuslar { display: grid; }
  .oyun-alan { aspect-ratio: 3 / 4; }
  .tepsi { left: 16px; right: 16px; transform: none; justify-content: space-between; }
  .raf-serit { grid-auto-columns: 78%; }
  .form-kart { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.lider li.lider-bos::before { content: none; }

/* =====================================================================
   OYUNLAR (oyun seçici, sahne)
   ===================================================================== */
.oyun-secici { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 4px 0 20px; }
.oyun-kart { --o: var(--mavi); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; padding: 14px; border-radius: var(--r-o); border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin); cursor: pointer; font: inherit; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.oyun-kart:hover { border-color: color-mix(in srgb, var(--o) 55%, var(--cizgi)); transform: translateY(-1px); }
.oyun-kart[aria-selected="true"] { border-color: var(--o); box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 22%, transparent), var(--golge-1); }
.oyun-kart[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--o); }
.oyun-kart-ikon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--o) 16%, var(--yuzey)); color: var(--o); }
.oyun-kart-ikon .ik { width: 22px; height: 22px; }
.oyun-kart-metin { display: grid; gap: 3px; min-width: 0; }
.oyun-kart-metin b { font-size: .98rem; font-variation-settings: "wdth" 104; line-height: 1.2; }
.oyun-kart-metin > span { font-size: .8rem; color: var(--soluk); line-height: 1.35; }
.oyun-kart-metin small { font-size: .74rem; color: var(--soluk-2); font-weight: 650; }
.oyun-sahne { position: absolute; inset: 0; }
.oyun-sahne canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.oyun-alan[data-oyun="deploy"] .oyun-sahne canvas { touch-action: manipulation; }
.oyun-katman-alt { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.oyun-tuslar[hidden] { display: none !important; }
.madalya { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .72rem; font-weight: 800; margin-right: 8px; color: #061021; vertical-align: 1px; }
.madalya.m1 { background: #F2C12E; } .madalya.m2 { background: #C9D2DF; } .madalya.m3 { background: #D89463; }
.oyun-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.oyun-cip { --o: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid #23395E; background: #0E1E38; color: #E6ECF6; text-decoration: none; font-weight: 650; font-size: .86rem; transition: border-color .15s, background .15s; }
.oyun-cip:hover { border-color: var(--o); background: #12274A; }
.oyun-cip i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--o) 22%, #0E1E38); color: var(--o); }
.oyun-cip i .ik { width: 15px; height: 15px; }
@media (max-width: 1100px) {
  .oyun-secici { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; scroll-snap-type: x proximity; }
  .oyun-kart { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .oyun-secici { grid-auto-columns: 78%; }
}

/* =====================================================================
   FAVORİLER, KAMPANYA BANDI, AKILLI ARAMA
   ===================================================================== */
.numune-sar { position: relative; display: flex; flex-direction: column; min-width: 0; }
.numune-sar > .numune { flex: 1; }
.numune-sar .numune-bas { padding-right: 34px; }
.favori-dugme { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cizgi); background: color-mix(in srgb, var(--yuzey) 92%, transparent); color: var(--soluk-2); display: grid; place-items: center; cursor: pointer; transition: transform .2s, color .15s, background .15s; }
.favori-dugme .ik { width: 18px; height: 18px; }
.favori-dugme:hover { color: var(--mezura); }
.favori-dugme[aria-pressed="true"] { color: var(--mezura); border-color: color-mix(in srgb, var(--mezura) 35%, var(--cizgi)); }
.favori-dugme[aria-pressed="true"] .ik path { fill: currentColor; }
.numune-sar:hover .favori-dugme { transform: translateY(-2px); }
.favori-dugme:active { transform: scale(.9); }
.favori-bag .ik path { transition: fill .15s; }
.alt-sekme a { position: relative; }
.alt-sekme .favori-sayi { top: 0; right: calc(50% - 22px); font-style: normal; }

.kampanya-bant { --k: var(--mezura); background: var(--k); color: #fff; font-size: .88rem; position: relative; z-index: 41; }
.kampanya-bant-ic { display: flex; align-items: center; gap: 14px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.kampanya-bant-metin { flex: 1; min-width: 0; }
.kampanya-bant-metin b { font-weight: 750; }
.kampanya-bant-metin span { opacity: .92; }
.kampanya-bant-metin em { font-style: normal; font-weight: 700; background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
.kampanya-bant a { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.kampanya-bant a:hover { text-decoration: underline; }
.kampanya-bant a .ik { width: 16px; height: 16px; }
.kupon-cip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .12); color: #fff; border-radius: 8px; padding: 3px 10px; font: 750 .82rem var(--yazi); letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.kupon-cip:hover { background: rgba(255, 255, 255, .22); }
.kupon-cip .ik { width: 15px; height: 15px; }
.kampanya-kapat { border: 0; background: none; color: #fff; opacity: .8; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.kampanya-kapat:hover { opacity: 1; background: rgba(0, 0, 0, .15); }
.kampanya-kapat .ik { width: 16px; height: 16px; }

.oneri-not { padding: 6px 8px 2px; font-size: .78rem; color: var(--soluk); font-weight: 650; }
.oneri-cipler { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px; border-top: 1px solid var(--cizgi); margin-top: 4px; }
.oneri .oneri-cipler a.cip { padding: 5px 11px; font-size: .82rem; gap: 6px; border-radius: 999px; }
.oneri .oneri-cipler a.cip .ik { width: 15px; height: 15px; }
.oneri-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-top: 1px solid var(--cizgi); margin-top: 4px; padding-top: 4px; }
.oneri-alt a { font-size: .84rem; font-weight: 650; color: var(--mavi) !important; }
.oneri-alt a .ik { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .alt-sekme { grid-template-columns: repeat(5, 1fr); }
  .kampanya-bant-ic { flex-wrap: wrap; gap: 6px 12px; font-size: .82rem; padding-right: 36px; }
  .kampanya-kapat { position: absolute; top: 6px; right: 8px; }
  .kampanya-bant-metin { flex-basis: 100%; }
}

/* =====================================================================
   ÜRÜN SAYFASI: favori, video, fiyat hesaplayıcı · REFERANSLAR · KUPON
   ===================================================================== */
.favori-buyuk[aria-pressed="true"] { --b-metin: var(--mezura); }
.favori-buyuk[aria-pressed="true"] .ik path { fill: currentColor; }
.favori-dugme.favori-satir { position: static; margin-left: auto; }

.galeri-video { position: relative; width: 520px; height: 324px; border-radius: 10px; overflow: hidden; background-color: var(--u); cursor: pointer; display: grid; place-items: center; box-shadow: var(--golge-1); }
.galeri-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(6, 16, 33, .1), rgba(6, 16, 33, .55)); }
.galeri-video .video-oynat { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--mezura); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .2s; }
.galeri-video .video-oynat .ik { width: 34px; height: 34px; margin-left: 4px; }
.galeri-video:hover .video-oynat { transform: scale(1.07); }
.galeri-video .video-etiket { position: absolute; z-index: 1; left: 16px; bottom: 14px; color: #fff; font-weight: 750; font-size: 1rem; }
.galeri-video.oynuyor { cursor: default; background: #000; }
.galeri-video.oynuyor::after { content: none; }
.galeri-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.hesap { margin-top: 22px; border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: var(--r-o); padding: 20px; display: grid; gap: 16px; }
.hesap-bas { display: flex; gap: 14px; align-items: flex-start; }
.hesap-bas > .ik { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--u) 14%, var(--yuzey)); color: var(--u); flex: none; }
.hesap-bas h3 { font-size: 1.1rem; font-variation-settings: "wdth" 104; }
.hesap-bas p { color: var(--soluk); font-size: .9rem; }
.hesap-girdi { display: flex; gap: 16px; align-items: center; }
.hesap-girdi input[type=range] { flex: 1; accent-color: var(--u); height: 32px; }
.hesap-sayi { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cizgi-2); border-radius: 10px; padding: 0 12px 0 4px; background: var(--yuzey-2); }
.hesap-sayi input { width: 72px; height: 42px; border: 0; background: none; font: 750 1.1rem var(--yazi); text-align: right; color: var(--metin); }
.hesap-sayi span { color: var(--soluk); font-size: .88rem; }
.hesap-sonuc { display: grid; gap: 8px; }
.hesap-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--yuzey-2); border: 1px solid transparent; }
.hesap-satir > div { display: grid; gap: 2px; }
.hesap-satir b { font-weight: 720; }
.hesap-satir .rozet { justify-self: start; margin-top: 2px; }
.hesap-satir small { color: var(--soluk); font-size: .8rem; }
.hesap-satir strong { font-size: 1.15rem; font-variation-settings: "wdth" 92; white-space: nowrap; }
.hesap-satir strong small { font-size: .78rem; font-weight: 500; }
.hesap-satir.en { border-color: color-mix(in srgb, var(--basari) 45%, transparent); background: color-mix(in srgb, var(--basari) 7%, var(--yuzey)); }
.hesap-satir.pasif { opacity: .55; }
.hesap-sonuc .btn { justify-self: start; margin-top: 6px; }

.ref-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 18px; }
.ref-izgara.genis { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ref-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ref-bas { display: flex; gap: 12px; align-items: center; }
.ref-bas b { display: block; font-size: 1.02rem; }
.ref-bas span { color: var(--soluk); font-size: .84rem; }
.ref-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); padding: 6px; flex: none; }
.ref-harf { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: var(--lacivert); color: #fff; font-weight: 800; font-variation-settings: "wdth" 110; flex: none; }
.ref-sonuc { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--basari); }
.ref-sonuc .ik { flex: none; margin-top: 1px; }
.ref-hikaye { color: var(--soluk); font-size: .92rem; }
.ref-kart blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--mezura); font-size: .95rem; }
.ref-kart cite { font-style: normal; color: var(--soluk); font-size: .84rem; margin-top: -4px; }
.ref-urunler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.ref-urunler a { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--metin); text-decoration: none; padding: 3px 9px 3px 3px; border: 1px solid var(--cizgi); border-radius: 999px; }
.ref-web { font-size: .84rem; }
.ref-logolar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ref-logolar > span { display: grid; place-items: center; height: 72px; min-width: 120px; padding: 10px 18px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); }
.ref-logolar .ref-logo { width: auto; height: 46px; max-width: 140px; border: 0; padding: 0; background: none; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.ref-logolar span:hover .ref-logo { filter: none; opacity: 1; }
.ref-logolar .ref-harf { width: 44px; height: 44px; }

.kupon-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px; border-top: 1px dashed var(--cizgi-2); margin-top: 6px; }
.kupon-form input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--cizgi-2); border-radius: 8px; padding: 0 12px; background: var(--yuzey); color: var(--metin); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.kupon-form small { flex-basis: 100%; color: var(--mezura); font-size: .82rem; }
.kupon-form small:empty { display: none; }
.kupon-uygulandi { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 8px; border-radius: 10px; background: color-mix(in srgb, var(--basari) 9%, var(--yuzey)); border: 1px dashed color-mix(in srgb, var(--basari) 50%, transparent); color: var(--basari); }
.kupon-uygulandi > div { flex: 1; display: grid; }
.kupon-uygulandi span { font-size: .84rem; color: var(--metin); }
.toplam s { color: var(--soluk-2); font-weight: 500; margin-right: 4px; }

/* =====================================================================
   ÜRÜN BULUCU
   ===================================================================== */
.bulucu { max-width: 860px; margin: 28px auto 64px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-b); padding: clamp(20px, 4vw, 40px); box-shadow: var(--golge-1); }
.bulucu h1:focus { outline: none; }
.bulucu-ilerleme { height: 6px; border-radius: 6px; background: var(--yuzey-2); overflow: hidden; margin-bottom: 18px; }
.bulucu-ilerleme span { display: block; height: 100%; background: linear-gradient(90deg, var(--mezura), var(--sari)); border-radius: 6px; transition: width .3s; }
.bulucu-adim { display: inline-flex; align-items: center; gap: 8px; color: var(--mezura); font-weight: 750; font-size: .86rem; margin-bottom: 8px; }
.bulucu-adim .ik { width: 18px; height: 18px; }
.bulucu-secenek { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 22px 0 8px; }
.bul-secenek { --o: var(--mavi); display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: var(--r-o); border: 1.5px solid var(--cizgi); background: var(--yuzey); color: var(--metin); cursor: pointer; font: inherit; transition: border-color .15s, background .15s, transform .15s; }
.bul-secenek:hover { border-color: color-mix(in srgb, var(--o) 50%, var(--cizgi)); transform: translateY(-1px); }
.bul-secenek > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.bul-secenek small { color: var(--soluk); font-size: .8rem; }
.bul-ikon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--o) 13%, var(--yuzey)); color: var(--o); flex: none; }
.bul-tik { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cizgi-2); display: grid; place-items: center; color: transparent; flex: none; }
.bul-tik .ik { width: 15px; height: 15px; }
.bul-secenek[aria-pressed="true"] { border-color: var(--o); background: color-mix(in srgb, var(--o) 7%, var(--yuzey)); }
.bul-secenek[aria-pressed="true"] .bul-tik { background: var(--o); border-color: var(--o); color: #fff; }
.bulucu-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.bulucu-eylem { display: flex; gap: 8px; flex-wrap: wrap; }
.bul-sonuclar { display: grid; gap: 14px; margin-top: 20px; }
.bul-sonuc { border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 18px; display: grid; gap: 12px; position: relative; overflow: hidden; }
.bul-sonuc.ilk { border: 2px solid var(--u); }
.bul-sonuc.ilk::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--u); }
.bul-sonuc-bas { display: flex; gap: 14px; align-items: center; }
.bul-sonuc-bas > div:nth-child(2) { flex: 1; min-width: 0; }
.bul-sonuc h2 { font-size: 1.2rem; font-variation-settings: "wdth" 104; }
.bul-sonuc-bas span { color: var(--soluk); font-size: .86rem; }
.bul-sonuc p { color: var(--soluk); }
.uyum { --y: 50; width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none; background: radial-gradient(closest-side, var(--yuzey) 78%, transparent 80% 100%), conic-gradient(var(--basari) calc(var(--y) * 1%), var(--yuzey-2) 0); }
.uyum b { font-size: .98rem; line-height: 1; }
.uyum small { font-size: .66rem; color: var(--soluk); }
.bul-eksik { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bul-eksik li { display: flex; gap: 8px; color: var(--soluk-2); font-size: .88rem; }
.bul-eksik .ik { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bul-sonuc-alt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Vitrin: kampanya kartı, bulucu bandı, koleksiyon rafı */
.kampanya-kart { --k: var(--mezura); position: relative; overflow: hidden; margin-top: 40px; border-radius: var(--r-b); background: var(--k); color: #fff; }
.kampanya-kart-desen { position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 12px); -webkit-mask: linear-gradient(90deg, transparent 30%, #000); mask: linear-gradient(90deg, transparent 30%, #000); }
.kampanya-kart-ic { position: relative; padding: clamp(22px, 4vw, 36px); display: grid; gap: 10px; max-width: 720px; }
.kampanya-kart h2 { color: #fff; }
.kampanya-kart p { color: rgba(255, 255, 255, .9); max-width: 56ch; }
.kampanya-etiket { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.kampanya-etiket .ik { width: 16px; height: 16px; }
.kampanya-kart-alt { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.kampanya-kart .btn { --b-zemin: #fff; --b-metin: #0B1B33; --b-cizgi: #fff; }
.kampanya-kart .kupon-cip { padding: 8px 14px; font-size: .95rem; }
.kampanya-kart .kupon-cip small { font-weight: 600; opacity: .8; letter-spacing: 0; text-transform: none; margin-left: 4px; }
.bulucu-bant { margin-top: 56px; border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); position: relative; overflow: hidden; }
.bulucu-bant::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--mezura), var(--sari)); }
.bulucu-bant-ic { display: flex; gap: 20px; align-items: center; padding: 26px 28px 26px 34px; }
.bulucu-bant-ic > div { flex: 1; }
.bulucu-bant p { color: var(--soluk); margin-top: 6px; max-width: 64ch; }
.bulucu-bant-ikon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--mezura) 10%, var(--yuzey)); color: var(--mezura); flex: none; }
.bulucu-bant-ikon .ik { width: 28px; height: 28px; }
.kol-etiket { display: inline-flex; align-items: center; gap: 6px; color: var(--k); font-weight: 750; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.kol-etiket .ik { width: 15px; height: 15px; }
.raf-kol .raf-bas h2 { position: relative; }

/* Koleksiyon sayfası */
.kol-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kol-kart { --k: var(--lacivert); display: grid; gap: 8px; padding: 20px; border-radius: var(--r-o); background: var(--yuzey); border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; position: relative; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.kol-kart::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--k); }
.kol-kart:hover { box-shadow: var(--golge-2); transform: translateY(-2px); }
.kol-kart-bas { display: flex; justify-content: space-between; align-items: center; color: var(--k); }
.kol-kart-bas span { color: var(--soluk); font-size: .82rem; font-weight: 650; }
.kol-kart h2 { font-size: 1.15rem; font-variation-settings: "wdth" 104; }
.kol-kart p { color: var(--soluk); font-size: .9rem; }
.kol-ikonlar { display: flex; margin-top: 6px; }
.kol-ikonlar .uikon { margin-right: -8px; box-shadow: 0 0 0 3px var(--yuzey); }
.kol-bas { --k: var(--lacivert); background: var(--k); color: #fff; padding: 28px 0 0; margin-bottom: 26px; position: relative; }
.kol-bas .yol, .kol-bas .yol a { color: rgba(255, 255, 255, .8); }
.kol-bas-ic { display: flex; gap: 18px; align-items: center; padding-bottom: 30px; }
.kol-bas h1 { color: #fff; }
.kol-bas p { color: rgba(255, 255, 255, .88); max-width: 62ch; margin-top: 6px; }
.kol-simge { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.kol-simge .ik { width: 32px; height: 32px; }
.kol-bas-kumas { height: 14px; background: var(--k); position: absolute; left: 0; right: 0; bottom: -13px; }
.fav-arac { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.fav-arac > span { margin-right: auto; }
.bos-durum > .ik { width: 34px; height: 34px; color: var(--mezura); }
@media (max-width: 760px) {
  .galeri-video { width: 340px; height: 212px; }
  .hesap-girdi { flex-direction: column; align-items: stretch; }
  .hesap-sayi { align-self: flex-start; }
  .bulucu-bant-ic { flex-direction: column; align-items: flex-start; padding: 22px 20px 22px 26px; }
  .bulucu { margin-top: 12px; border-radius: var(--r-o); }
  .bulucu-secenek { grid-template-columns: 1fr; }
  .bul-sonuc-bas { flex-wrap: wrap; }
  .kol-bas-ic { flex-direction: column; align-items: flex-start; }
  .ref-logolar > span { min-width: calc(50% - 6px); flex: 1; }
}

/* =====================================================================
   Cila: sayfa geçişi, belirme, komut paleti, yukarı düğmesi, konfeti,
   sayaç şeridi, yapışkan ürün çubuğu, liste görünümü, farkları göster
   ===================================================================== */

/* Sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda; diğerlerinde hiçbir şey olmaz) */
@view-transition { navigation: auto; }
.ust { view-transition-name: ust; }
::view-transition-old(root) { animation: vt-cik .18s ease-in both; }
::view-transition-new(root) { animation: vt-gel .28s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(urun-ikon) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.urun-bas-ic > .uikon { view-transition-name: urun-ikon; }
@keyframes vt-cik { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-gel { from { opacity: 0; transform: translateY(10px); } }

/* Kaydırınca belirme (yalnız JS açıp hareket azaltma kapalıysa) */
.belir-acik .belir { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.belir-acik .belir.goster { opacity: 1; transform: none; }
.belir-acik .izgara > .numune-sar.belir { transform: translateY(14px) scale(.985); }
.belir-acik .izgara > .numune-sar.belir.goster { transform: none; }

/* Üst çubukta Ctrl K ipucu, mobilde ara düğmesi */
.ust-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 3px; border: 0; background: none; padding: 4px; cursor: pointer; border-radius: 8px; }
.ust-kbd:hover kbd { border-color: var(--cizgi-2); color: var(--metin); }
.ust-ara input:focus ~ .ust-kbd, .ust-ara input:not(:placeholder-shown) ~ .ust-kbd { display: none; }
.ust-ara input { padding-right: 88px; }
kbd { font: 600 .72rem/1 var(--yazi); color: var(--soluk); background: var(--yuzey-2); border: 1px solid var(--cizgi); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; min-width: 22px; text-align: center; display: inline-block; }
.ara-dugme { display: none; }
@media (max-width: 760px) { .ara-dugme { display: inline-flex; } }
@media (max-width: 760px) { html { scroll-padding-bottom: 84px; } }
@media (max-width: 430px) { .ust .marka-ad small { display: none; } .ust-sag { gap: 0; } }

/* Komut paleti */
.palet-ortu { place-items: start center; padding-top: min(14vh, 120px); }
.palet { width: min(620px, 100%); background: var(--yuzey); border-radius: var(--r-b); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); border: 1px solid var(--cizgi); overflow: hidden; display: flex; flex-direction: column; max-height: min(72vh, 620px); animation: palet-gel .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes palet-gel { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.palet-ara { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--cizgi); }
.palet-ara .ik { color: var(--soluk-2); flex: none; }
.palet-ara input { flex: 1; min-width: 0; height: 58px; border: 0; background: none; font-size: 1.05rem; color: var(--metin); outline: none; }
.palet-liste { overflow: auto; padding: 6px; scrollbar-width: thin; }
.palet-grup { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk-2); padding: 12px 12px 6px; }
.palet-oge { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.palet-oge .uikon { --boy: 30px; flex: none; }
.palet-oge > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.palet-oge b { font-weight: 650; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palet-oge small { color: var(--soluk); font-size: .8rem; }
.palet-ik { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--soluk); flex: none; }
.palet-ik .ik { width: 17px; height: 17px; }
.palet-git { color: var(--soluk-2); opacity: 0; transition: opacity .1s, transform .15s; }
.palet-oge[aria-selected="true"] { background: color-mix(in srgb, var(--mavi) 11%, var(--yuzey)); }
.palet-oge[aria-selected="true"] .palet-git { opacity: 1; transform: translateX(2px); }
.palet-oge[aria-selected="true"] .palet-ik { color: var(--mavi); border-color: color-mix(in srgb, var(--mavi) 30%, var(--cizgi)); }
.palet-bos { padding: 28px 16px; text-align: center; color: var(--soluk); }
.palet-alt { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--cizgi); font-size: .78rem; color: var(--soluk); background: var(--yuzey-2); }
.palet-alt kbd { margin-right: 2px; }
@media (max-width: 760px) { .palet-ortu { padding-top: 12px; } .palet-alt { display: none; } .palet { max-height: calc(100vh - 100px); } }

/* Yukarı çık */
.yukari-dugme { position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-2); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), bottom .2s; }
.yukari-dugme.gorunur { opacity: 1; transform: none; pointer-events: auto; }
.yukari-dugme:hover { color: var(--mezura); transform: translateY(-2px); }
.yukari-dugme.tepsili { bottom: 84px; }
.urun-yapiskan-acik .yukari-dugme { bottom: 92px; }
@media (max-width: 760px) {
  .yukari-dugme { right: 14px; bottom: 82px; width: 42px; height: 42px; }
  .yukari-dugme.tepsili { bottom: 146px; }
  .urun-yapiskan-acik .yukari-dugme { bottom: 150px; }
}

/* Konfeti */
.konfeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; }

/* Vitrin: sayaç şeridi */
.sayac-serit { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--cizgi-2); }
.sayac-serit a { display: grid; text-decoration: none; color: var(--soluk); font-size: .84rem; font-weight: 550; }
.sayac-serit b { font-size: 2rem; line-height: 1.05; font-weight: 800; color: var(--metin); font-variation-settings: "wdth" 88; font-variant-numeric: tabular-nums; }
.sayac-serit a:hover b { color: var(--mezura); }
/* Fare kartelanın üstündeyken yapraklar biraz daha açılır (düz 2B; 3B eğim üst üste binme sırasını bozuyordu) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .yelpaze[data-acik="evet"]:hover { --acilma: 1.08; } }
.yaprak { transform: rotate(calc(var(--aci) * var(--yayilim, 1) * var(--acilma, 1))) translateY(var(--kalk)); }

/* Ürün sayfası: yapışkan satın alma çubuğu */
.urun-yapiskan { position: fixed; left: 50%; bottom: 16px; z-index: 50; width: min(820px, calc(100% - 32px)); transform: translate(-50%, 140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); background: color-mix(in srgb, var(--yuzey) 94%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border: 1px solid var(--cizgi); border-radius: 999px; box-shadow: var(--golge-2); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; }
.urun-yapiskan.gorunur { transform: translate(-50%, 0); }
.urun-yapiskan .uikon { --boy: 40px; flex: none; }
.urun-yapiskan-ad { flex: 1; min-width: 0; display: grid; }
.urun-yapiskan-ad b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 750; }
.urun-yapiskan-ad span { font-size: .82rem; color: var(--soluk); }
.urun-yapiskan .btn { min-height: 42px; }
.urun-yapiskan-acik .tepsi { bottom: 92px; }
@media (max-width: 760px) {
  .urun-yapiskan { bottom: 78px; border-radius: 16px; padding: 8px; }
  .urun-yapiskan-ad span { display: none; }
  .urun-yapiskan .btn-paket { display: none; }
  .urun-yapiskan-acik .tepsi { bottom: 146px; }
}

/* Katalog: ızgara / liste görünümü */
.gorunum-sec { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px; background: var(--yuzey); }
.gorunum-sec button { width: 36px; height: 34px; border: 0; background: none; border-radius: 999px; display: grid; place-items: center; color: var(--soluk); cursor: pointer; }
.gorunum-sec button .ik { width: 18px; height: 18px; }
.gorunum-sec button[aria-pressed="true"] { background: var(--metin); color: var(--kagit); }
.izgara.liste-gorunum { grid-template-columns: 1fr; gap: 12px; }
.liste-gorunum .numune { flex-direction: row; border-radius: var(--r-o); overflow: hidden; }
.liste-gorunum .numune-kumas { order: -1; width: 14px; height: auto; flex: none; -webkit-mask: none; mask: none; }
.liste-gorunum .numune:hover .numune-kumas { height: auto; width: 20px; }
.liste-gorunum .numune-etiket { grid-template-columns: 250px minmax(0, 1fr) 150px 112px; align-items: center; gap: 8px 24px; padding: 14px 60px 14px 18px; }
.liste-gorunum .numune-etiket p { min-height: 0; -webkit-line-clamp: 2; }
.liste-gorunum .numune-alt { flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; white-space: nowrap; }
.liste-gorunum .favori-dugme { top: 50%; transform: translateY(-50%); }
.liste-gorunum .numune-sar:hover .favori-dugme { transform: translateY(-50%); }
@media (max-width: 1080px) { .liste-gorunum .numune-etiket { grid-template-columns: 220px minmax(0, 1fr) auto auto; } }
@media (max-width: 760px) {
  .liste-gorunum .numune-etiket { grid-template-columns: 1fr auto; padding: 12px 52px 12px 14px; gap: 8px 12px; }
  .liste-gorunum .numune-bas { grid-column: 1 / -1; }
  .liste-gorunum .numune-etiket p { display: none; }
  .liste-gorunum .numune-alt { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
}

/* Yan yana: farkları göster */
.kiyas-arac { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; }
.fark-anahtar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .92rem; user-select: none; }
.fark-anahtar input { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--cizgi-2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.fark-anahtar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.fark-anahtar input:checked { background: var(--mavi); }
.fark-anahtar input:checked::after { transform: translateX(16px); }
.fark-anahtar input:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
.kiyas.farklar tr.ayni { display: none; }
.kiyas.farklar tr.farkli td { background: color-mix(in srgb, var(--sari) 9%, var(--yuzey)); }
.kiyas.farklar tr.farkli th[scope="row"] { box-shadow: inset 3px 0 0 var(--sari); }
.kiyas-ayni-not { font-size: .85rem; color: var(--soluk); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .urun-yapiskan, .yukari-dugme { transition: none; }
}

/* ---------- Kolay yorum: tek tıkla puan, kısa form ---------- */
.hizli-puan { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 6px 8px 6px 14px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey); }
.hizli-puan > span { font-weight: 650; font-size: .9rem; }
.hizli-puan > div { display: inline-flex; }
.hizli-puan button { border: 0; background: none; padding: 3px; cursor: pointer; color: var(--cizgi-2); border-radius: 8px; display: grid; place-items: center; transition: color .1s, transform .12s; }
.hizli-puan button .ik { width: 26px; height: 26px; }
.hizli-puan button.dolu { color: var(--sari); }
.hizli-puan button:hover { transform: scale(1.12); }
.hizli-puan button:active { transform: scale(.92); }
.hizli-puan button:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }
.hizli-puan.buyuk { margin: 4px auto 0; flex-direction: column; gap: 6px; border: 0; background: none; padding: 0; }
.hizli-puan.buyuk > span { display: none; }
.hizli-puan.buyuk button .ik { width: 40px; height: 40px; }
.yorum-bos .b-3 { margin-bottom: 2px; }
.yorum-ek { border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 0 16px; background: var(--yuzey-2); transition: background .15s; }
.yorum-ek[open] { padding-bottom: 18px; background: var(--yuzey); }
.yorum-ek > :not(summary) { margin-top: 16px; }   /* details içinde grid gap güvenilir değil; boşluk margin ile */
.yorum-ek .alan-ikili { gap: 16px 14px; }
.yorum-ek[open] summary { border-bottom: 1px dashed var(--cizgi); margin: 0 -16px; padding: 12px 16px; }
.yorum-ek .onay-kutu { padding: 12px 14px; border-radius: 10px; background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.yorum-ek summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 600; font-size: .92rem; color: var(--soluk); }
.yorum-ek summary::-webkit-details-marker { display: none; }
.yorum-ek summary .ik { width: 18px; height: 18px; transition: transform .2s; }
.yorum-ek[open] summary .ik { transform: rotate(45deg); }
.yorum-ek summary:hover { color: var(--metin); }
#yorumForm textarea[name=metin] { min-height: 90px; }
@media (max-width: 760px) {
  .hizli-puan:not(.buyuk) { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Yelpaze: arkadaki yaprakların adları üst üste binince yarım harfler ("Z", "T") görünüyordu.
   Ad yalnız öndeki yaprakta ve fareyle/klavyeyle öne alınan yaprakta görünür. */
.yaprak .yaprak-kumas b { transition: opacity .2s; }
.yaprak:not(:first-of-type) .yaprak-kumas b { opacity: 0; }
.yaprak:hover .yaprak-kumas b, .yaprak:focus-visible .yaprak-kumas b { opacity: 1; }
.yelpaze:has(.yaprak:not(:first-of-type):hover) .yaprak:first-of-type .yaprak-kumas b { opacity: 0; }
.yaprak { z-index: var(--z, 1); }   /* sıra değişkenle: üstüne gelinen yaprak (:hover → 15) gerçekten öne çıksın */

/* ---------- Çerez onayı (KVKK) ---------- */
.cerez-bant { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; display: flex; justify-content: center; pointer-events: none; animation: cerez-gel .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cerez-gel { from { opacity: 0; transform: translateY(16px); } }
.cerez-bant-ic { pointer-events: auto; width: min(980px, 100%); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-b); box-shadow: 0 24px 60px -20px rgba(11, 27, 51, .45); padding: 18px 20px; display: flex; gap: 20px; align-items: center; position: relative; overflow: hidden; }
.cerez-bant-ic::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(45deg, var(--mezura) 0 6px, color-mix(in srgb, var(--mezura) 70%, #fff) 6px 12px); }
.cerez-bant-metin { flex: 1; min-width: 0; padding-left: 6px; }
.cerez-bant-metin b { font-size: 1rem; font-weight: 750; }
.cerez-bant-metin p { margin: 4px 0 0; color: var(--soluk); font-size: .88rem; line-height: 1.5; }
.cerez-bant-metin a { color: var(--mavi); font-weight: 600; }
.cerez-bant-dugmeler { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.cerez-bant-dugmeler .btn { min-height: 42px; }
@media (max-width: 860px) {
  .cerez-bant-ic { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 16px 16px 20px; }
  .cerez-bant-dugmeler { display: grid; grid-template-columns: 1fr 1fr; }
  .cerez-bant-dugmeler [data-cerez-hepsi] { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) { .cerez-bant { left: 10px; right: 10px; bottom: 78px; } }
.cerez-pencere { width: min(620px, 100%); }
.cerez-kat { border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 14px 16px; display: grid; gap: 8px; }
.cerez-kat-bas { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.cerez-kat-bas b { font-weight: 700; }
.cerez-kat-bas p { margin: 4px 0 0; color: var(--soluk); font-size: .88rem; line-height: 1.5; }
.cerez-kat input:disabled { opacity: .55; cursor: not-allowed; }
.cerez-kat details summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--mavi); }
.cerez-kat ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cerez-kat li { display: grid; gap: 2px; font-size: .84rem; color: var(--soluk); }
.cerez-kat code, .cerez-tablo code { font-size: .78rem; color: var(--metin); background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 5px; padding: 1px 6px; justify-self: start; }
.cerez-pencere-alt { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.baglanti-dugme { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-alt-yasal { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.site-alt-yasal a, .site-alt-yasal .baglanti-dugme { color: inherit; }
.kap-dar { max-width: 860px; }
.cerez-durum { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: var(--r-o); background: var(--yuzey); }
.cerez-durum > div { display: flex; gap: 12px; align-items: center; }
.cerez-durum p { margin: 0; }
.cerez-durum .ik { color: var(--basari); flex: none; }
.cerez-tablo-bas { display: flex; align-items: center; gap: 12px; }
.cerez-tablo table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); overflow: hidden; font-size: .9rem; }
.cerez-tablo th, .cerez-tablo td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.cerez-tablo th { background: var(--yuzey-2); font-size: .8rem; color: var(--soluk); }
.cerez-tablo tr:last-child td { border-bottom: 0; }
.cerez-tablo td:first-child { width: 38%; }
.kap-dar .bolum p { line-height: 1.6; }

/* ---------- Yasal metinler (KVKK, gizlilik) ---------- */
.kvkk-metin { display: grid; gap: 14px; line-height: 1.65; color: var(--metin); }
.kvkk-metin h2 { margin-top: 18px; }
.kvkk-metin p { margin: 0; }
.kvkk-metin ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.kvkk-metin a { color: var(--mavi); font-weight: 600; }
.kvkk-kimlik { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; padding: 16px 18px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); }
.kvkk-kimlik dt { color: var(--soluk); font-size: .88rem; }
.kvkk-kimlik dd { margin: 0; font-weight: 600; }
.kvkk-tablo-sar { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r-o); background: var(--yuzey); }
.kvkk-tablo { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .86rem; line-height: 1.5; }
.kvkk-tablo th, .kvkk-tablo td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); }
.kvkk-tablo thead th { background: var(--yuzey-2); color: var(--soluk); font-size: .78rem; font-weight: 700; }
.kvkk-tablo tbody th { font-weight: 700; width: 15%; }
.kvkk-tablo tr:last-child th, .kvkk-tablo tr:last-child td { border-bottom: 0; }
.kvkk-tarih { margin-top: 24px; }
.gizlilik-ozet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 6px; }
.gizlilik-ozet > div { padding: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-o); display: grid; gap: 4px; }
.gizlilik-ozet .ik { color: var(--basari); width: 22px; height: 22px; }
.gizlilik-ozet b { font-weight: 750; }
.gizlilik-ozet p { color: var(--soluk); font-size: .88rem; line-height: 1.5; }
@media (max-width: 760px) { .gizlilik-ozet { grid-template-columns: 1fr; } .kvkk-kimlik { grid-template-columns: 1fr; gap: 2px; } .kvkk-kimlik dd { margin-bottom: 8px; } }