/* ==========================================================================
   OptiPedia (eski adı OptiLens) — OPTIVERA optik eğitim ekranı
   Dünya: optisyen duvarındaki okuma levhası. Beyaz levha, mürekkep
   satırlar, OPTIVERA mavisi numaralar; levhanın altında duokrom
   (kırmızı–yeşil) şerit. Gölge yok; derinlik çizgi ve odakla.

   Bu dosya base.css'i YÜKLEMEZ (orası CSKDINE'ın gece teması).
   Ortak olan yalnız fontlar.css.
   ========================================================================== */

:root{
  /* 2 Ekim 2026 — OptiPedia (eski OptiLens) "Signature Mühür" dünyasına
     taşındı: gece taşı zemin, fildişi yazı, pirinç vurgu. Çizimler eski
     açık renkleriyle fildişi mine plakalarda durur (.cizim, dosya sonu). */
  --mavi:        #E9CF8A;   /* vurgu: açık pirinç — taşta 12:1 */
  --mavi-2:      #C9A24A;
  --mavi-acik:   rgba(233,207,138,.13);
  --murekkep:    #EFEAE0;
  --murekkep-2:  #BDB7AA;
  --murekkep-3:  #A39E93;
  --kagit:       #070D1F;
  --zemin-2:     rgba(244,239,228,.05);
  --cizgi:       rgba(233,207,138,.20);
  --cizgi-y:     rgba(233,207,138,.10);
  --duo-kirmizi: #8E2A24;   /* beyaz yazıyla 8:1 */
  --duo-yesil:   #17533A;   /* beyaz yazıyla 8.6:1 */
  --uyari-zemin: rgba(242,201,138,.12);
  --uyari:       #F2C98A;
  --pirinc-duz:  linear-gradient(180deg, #F3DFA6 0%, #D6B45E 38%, #B88E36 72%, #9C7628 100%);

  --font-marka:  "Outfit", "Manrope", system-ui, sans-serif;
  --font-baslik: "Cinzel", Georgia, serif;
  --font-metin:  "Manrope", system-ui, -apple-system, sans-serif;

  --kenar:       clamp(20px, 4vw, 56px);
  --olcek:       1;          /* mağaza modunda büyür */
  --ease-cikis:  cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*,
*::before,
*::after{ box-sizing: border-box }

html{
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--cizgi) transparent;
  scrollbar-width: thin;
}
body{
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--kagit); color: var(--murekkep);
  font-family: var(--font-metin); font-size: calc(17px * var(--olcek)); line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--mavi); color: #FFFFFF }
:focus-visible{ outline: 3px solid var(--mavi); outline-offset: 3px; border-radius: 4px }
a{ color: var(--mavi); text-underline-offset: 3px; text-decoration-thickness: 1px }
img, svg{ display: block; max-width: 100% }
[hidden]{ display: none !important }   /* sınıf kuralları (grid vb.) hidden'ı ezmesin; SVG'de de çalışsın */
button{ font: inherit; color: inherit }

.gizli{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Sayfalar arası geçiş: levha satırının başlığı konu sayfasının başlığına
   dönüşür (destekleyen tarayıcılarda). */
@view-transition{ navigation: auto }
::view-transition-old(root),
::view-transition-new(root){ animation-duration: .32s; animation-timing-function: var(--ease-cikis) }
::view-transition-group(*){ animation-duration: .42s; animation-timing-function: var(--ease-cikis) }


/* ==========================================================================
   ÜST ŞERİT
   ========================================================================== */
.serit{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--kenar); border-bottom: 1px solid var(--cizgi);
  min-height: calc(64px * var(--olcek));
}
.lp-marka{
  display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--murekkep);
}
.lp-marka b{
  font-family: var(--font-marka); font-weight: 600; font-size: calc(19px * var(--olcek));
  letter-spacing: .04em;
}
.lp-marka b span{ color: var(--mavi) }
.lp-marka small{
  font-family: var(--font-marka); font-weight: 600; font-size: 12px; letter-spacing: .2em;
  color: var(--murekkep-3);
}
.serit-sag{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end }
.onizleme{
  font-size: 12.5px; font-weight: 600; color: var(--uyari);
  background: var(--uyari-zemin); border-radius: 999px; padding: 6px 12px;
}

.geri{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: calc(44px * var(--olcek)); padding: 0 16px 0 12px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: var(--kagit);
  font-family: var(--font-marka); font-weight: 600; font-size: calc(14px * var(--olcek));
  color: var(--murekkep); text-decoration: none;
  transition: border-color .18s, background-color .18s;
}
.geri svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; fill: none }


/* ==========================================================================
   LEVHA (ana ekran)
   ========================================================================== */
.levha-sayfa{ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh }

.levha{
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(12px, 3vh, 40px) var(--kenar);
}
.levha h1{ margin: 0 0 clamp(8px, 2vh, 20px) }
.levha-baslik{
  font-family: var(--font-marka); font-weight: 300; font-size: clamp(18px, 2.2vw, 24px);
  color: var(--murekkep-2); letter-spacing: 0; line-height: 1.3;
}
.levha-baslik em{ font-style: normal; color: var(--murekkep); font-weight: 500 }

.levha ol{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi) }
.levha li{ border-bottom: 1px solid var(--cizgi) }

.satir{
  display: grid; align-items: center;
  grid-template-columns: clamp(52px, 6vw, 88px) minmax(0, 1fr) minmax(0, 28ch) 40px;
  gap: clamp(12px, 2.4vw, 32px);
  min-height: calc(clamp(64px, 10.5vh, 104px) * var(--olcek));
  padding: 8px 4px; text-decoration: none; color: var(--murekkep);
  position: relative; outline-offset: -3px;
  transition: background-color .2s;
}
.satir-no{
  font-family: var(--font-marka); font-weight: 300; font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1; color: var(--mavi); letter-spacing: -.02em;
}
.satir-ad{
  font-family: var(--font-marka); font-weight: 500; text-transform: uppercase;
  font-size: clamp(24px, 3.3vw, 50px); line-height: 1.04; letter-spacing: .09em;
  text-wrap: balance;   /* kesilmez; sığmazsa iki satıra sarılır */
}
.satir-aciklama{ font-size: calc(15px * var(--olcek)); line-height: 1.45; color: var(--murekkep-2) }
.satir-ok{ width: 28px; height: 28px; stroke: var(--mavi); stroke-width: 1.6; fill: none; justify-self: end;
  transition: transform .25s var(--ease-cikis) }

/* Odak: açılışta satırlar yukarıdan aşağı netleşir — göz levhaya alışır gibi.
   İçerik baştan görünür; yalnız netlik gelir. */
.js .levha li{ animation: netles .9s var(--ease-cikis) both; animation-delay: calc(var(--i) * 90ms + 120ms) }
@keyframes netles{
  from{ filter: blur(7px); opacity: .55 }
  to  { filter: blur(0);   opacity: 1 }
}
/* Dokunulan satır net kalır, diğerleri bulanıklaşır; sonra sayfa açılır. */
.levha.secim li{ transition: filter .28s var(--ease-cikis), opacity .28s var(--ease-cikis) }
.levha.secim li:not(.secili){ filter: blur(5px); opacity: .35 }
.levha.secim li.secili .satir{ background: var(--mavi-acik) }

/* Duokrom şerit — kırmızı/yeşil iki yarım; optisyenin bildiği son satır. */
.duokrom{ display: grid; grid-template-columns: 1fr 1fr; color: #FFFFFF }
.duokrom > *{ padding: 18px var(--kenar); display: flex; align-items: center; gap: 18px; min-height: 96px }
.duokrom-k{ background: var(--duo-kirmizi) }
.duokrom-y{ background: var(--duo-yesil); justify-content: space-between }
.duokrom p{ margin: 0; font-size: calc(14.5px * var(--olcek)); line-height: 1.5; max-width: 52ch }
.duokrom b{ font-family: var(--font-marka); font-weight: 600; letter-spacing: .02em }
.qr-kutu{
  flex: 0 0 auto; width: calc(84px * var(--olcek)); height: calc(84px * var(--olcek));
  background: #FFFFFF; border-radius: 6px; padding: 5px;
}
.qr-kutu svg{ width: 100%; height: 100% }

@media (max-width: 900px){
  .satir{ grid-template-columns: 48px minmax(0, 1fr) 28px; row-gap: 2px }
  .satir-aciklama{ grid-column: 2; grid-row: 2; font-size: 14px }
  .satir-ok{ grid-column: 3; grid-row: 1 / span 2 }
  .satir-ad{ white-space: normal; font-size: clamp(22px, 6vw, 34px); letter-spacing: .07em }
}
@media (max-width: 640px){
  .duokrom{ grid-template-columns: 1fr }
  .duokrom > *{ min-height: 0 }
  .serit{ flex-wrap: wrap }
  .onizleme{ font-size: 12px; padding: 5px 10px }
}


/* ==========================================================================
   KONU SAYFASI ("levha sayfası")
   ========================================================================== */
.konu-ust{
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0 clamp(16px, 3vw, 40px);
  padding: clamp(28px, 5vh, 56px) var(--kenar) clamp(20px, 3vh, 32px);
  border-bottom: 1px solid var(--cizgi);
}
.konu-no{
  font-family: var(--font-marka); font-weight: 300; line-height: .8; letter-spacing: -.04em;
  font-size: clamp(64px, 9vw, 120px); color: var(--mavi);
}
.konu-ust h1{
  margin: 0; font-family: var(--font-marka); font-weight: 500; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 64px); line-height: 1; letter-spacing: .08em;
}
.konu-ust .giris{
  grid-column: 2; margin: 14px 0 0; max-width: 60ch; font-size: calc(18px * var(--olcek)); color: var(--murekkep-2);
}

/* Konular arası küçük dizin: 01–06, levhanın özeti */
.mini-dizin{ display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 }
.mini-dizin a{
  display: grid; place-items: center; min-width: calc(40px * var(--olcek)); height: calc(40px * var(--olcek));
  border-radius: 8px; text-decoration: none; color: var(--murekkep-2);
  font-family: var(--font-marka); font-weight: 600; font-size: calc(14px * var(--olcek));
  transition: background-color .18s, color .18s;
}
.mini-dizin a[aria-current="page"]{ background: var(--mavi); color: #FFFFFF }

.bolum{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: clamp(32px, 6vh, 64px) var(--kenar);
  border-bottom: 1px solid var(--cizgi-y);
}
.bolum.tek{ grid-template-columns: minmax(0, 1fr) }
.bolum h2{
  margin: 0 0 12px; font-family: var(--font-marka); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.005em; text-wrap: balance;
}
.bolum h3{ margin: 22px 0 6px; font-family: var(--font-marka); font-weight: 600; font-size: calc(18px * var(--olcek)) }
.bolum p{ margin: 0 0 12px; max-width: 64ch }
.bolum ul{ margin: 0 0 12px; padding-left: 1.2em; max-width: 64ch }
.bolum li{ margin: 4px 0 }
.bolum li::marker{ color: var(--mavi) }
.bolum .not{ font-size: calc(14.5px * var(--olcek)); color: var(--murekkep-3) }

.cizim{ margin: 0 }
.cizim svg{ width: 100%; height: auto }
.cizim figcaption{ margin-top: 10px; font-size: 13.5px; color: var(--murekkep-3) }
.etiket-temsili{
  display: inline-block; font-family: var(--font-marka); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--uyari);
  background: var(--uyari-zemin); border-radius: 4px; padding: 3px 8px; margin-right: 6px;
}

/* Çizim dili: ince mürekkep çizgi, mavi vurgu, ışın kırmızısı yok */
.c-cizgi{ fill: none; stroke: var(--murekkep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.c-ince{ fill: none; stroke: var(--murekkep-3); stroke-width: 1; stroke-dasharray: 3 4 }
.c-isin{ fill: none; stroke: var(--mavi); stroke-width: 1.8; stroke-linecap: round }
.c-dolgu{ fill: var(--mavi-acik); stroke: var(--mavi); stroke-width: 1.4 }
.c-zemin{ fill: var(--zemin-2) }
.c-yazi{ font-family: var(--font-marka); font-size: 16px; font-weight: 600; fill: var(--murekkep); letter-spacing: .02em }
.c-yazi-k{ font-family: var(--font-metin); font-size: 14.5px; fill: var(--murekkep-2) }
.c-nokta{ fill: var(--mavi) }
/* Vurgulanabilir parçalar (kaplama katmanları, çerçeve ölçüleri) */
.katman{ fill: var(--zemin-2); stroke: var(--cizgi); stroke-width: 1.2; transition: fill .2s, stroke .2s }
[data-vurgu].vurgulu .katman{ fill: var(--mavi-acik); stroke: var(--mavi); stroke-width: 2 }
[data-vurgu] .olcu-cizgi{ stroke: var(--murekkep-3); stroke-width: 1.4; opacity: .5; transition: opacity .2s, stroke .2s }
[data-vurgu].vurgulu .olcu-cizgi{ stroke: var(--mavi); stroke-width: 2.4; opacity: 1 }
[data-vurgu] .olcu-yazi{ opacity: .45; transition: opacity .2s }
[data-vurgu].vurgulu .olcu-yazi{ opacity: 1; fill: var(--mavi) }

/* Segment düğmeleri (durum seçici) */
.secici{ display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; padding: 0; list-style: none }
.secici button{
  min-height: calc(44px * var(--olcek)); padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--kagit);
  font-family: var(--font-marka); font-weight: 600; font-size: calc(14.5px * var(--olcek));
  transition: border-color .18s, background-color .18s, color .18s;
}
.secici button[aria-pressed="true"]{ background: var(--mavi); border-color: var(--mavi); color: #FFFFFF }

/* Kaydırıcı */
.kaydirici{ display: grid; gap: 8px; margin: 8px 0 18px; max-width: 460px }
.kaydirici label{ font-family: var(--font-marka); font-weight: 600; font-size: calc(14.5px * var(--olcek)); display: flex; justify-content: space-between }
.kaydirici output{ color: var(--mavi) }
input[type="range"]{ width: 100%; accent-color: var(--mavi); height: 32px }

/* Ölçü tablosu (reçete, kalınlık) */
.olcu{ width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: calc(15px * var(--olcek)) }
.olcu th, .olcu td{ text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--cizgi-y); vertical-align: top }
.olcu th{ font-family: var(--font-marka); font-weight: 600; color: var(--mavi); white-space: nowrap; width: 1%; padding-right: 18px }

/* İşaret listesi (Çocuğumun Gözü) — dokunarak işaretlenir, hiçbir yere kaydedilmez */
.isaretler{ list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) }
.isaretler button{
  width: 100%; min-height: calc(56px * var(--olcek)); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kagit);
  font-size: calc(15px * var(--olcek)); line-height: 1.35;
  transition: border-color .18s, background-color .18s;
}
.isaretler .kutu{ flex: 0 0 22px; height: 22px; border: 1.5px solid var(--murekkep-3); border-radius: 5px; display: grid; place-items: center }
.isaretler .kutu svg{ width: 14px; height: 14px; stroke: #FFFFFF; stroke-width: 2.4; fill: none; opacity: 0 }
.isaretler button[aria-pressed="true"]{ border-color: var(--mavi); background: var(--mavi-acik) }
.isaretler button[aria-pressed="true"] .kutu{ background: var(--mavi); border-color: var(--mavi) }
.isaretler button[aria-pressed="true"] .kutu svg{ opacity: 1 }
.isaret-sonuc{ min-height: 1.6em; font-weight: 600; color: var(--mavi) }

/* Optisyenine sor */
.sor{
  padding: clamp(28px, 5vh, 48px) var(--kenar);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start;
  background: var(--zemin-2); border-bottom: 1px solid var(--cizgi);
}
.sor h2{ margin: 0 0 10px; font-family: var(--font-marka); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px) }
.sor ol{ margin: 0; padding-left: 1.3em; max-width: 64ch }
.sor li{ margin: 6px 0 }
.sor li::marker{ color: var(--mavi); font-family: var(--font-marka); font-weight: 600 }
.sor-qr{ display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--murekkep-2); max-width: 160px }
.sor-qr .qr-kutu{ width: calc(120px * var(--olcek)); height: calc(120px * var(--olcek)); border: 1px solid var(--cizgi) }

.sonraki{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px var(--kenar); text-decoration: none; color: var(--murekkep);
  border-bottom: 1px solid var(--cizgi); transition: background-color .2s;
}
.sonraki small{ display: block; font-size: 13px; color: var(--murekkep-3) }
.sonraki b{ font-family: var(--font-marka); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(20px, 2.6vw, 30px) }
.sonraki svg{ width: 28px; height: 28px; stroke: var(--mavi); stroke-width: 1.6; fill: none; flex: 0 0 auto }

.dip{
  padding: 22px var(--kenar) 32px; font-size: 13.5px; color: var(--murekkep-3);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
.dip a{ color: var(--murekkep-2); display: inline-block; padding: 4px 0 }   /* dokunma hedefi ≥ 24px */

@media (max-width: 860px){
  .bolum{ grid-template-columns: minmax(0, 1fr) }
  .bolum .cizim{ order: -1 }
  .sor{ grid-template-columns: minmax(0, 1fr) }
  .sor-qr{ display: none }  /* telefonda zaten telefondasın */
  .konu-ust{ grid-template-columns: minmax(0, 1fr) }
  .konu-ust .giris{ grid-column: 1 }
  .serit .mini-dizin{ display: none }

  /* Seçicili bölümlerde sıra: başlık → düğmeler → çizim → açıklama.
     Yoksa düğmeye basınca değişen çizim ekranın dışında kalır. */
  .bolum:has(.secici){ gap: 0 }
  .bolum:has(.secici) > div{ display: contents }
  .bolum:has(.secici) .cizim{ order: 1; margin: 4px 0 20px }
  .bolum:has(.secici) .secici ~ *{ order: 2 }
  .bolum:has(.secici) > .sahne-kap{ display: grid; order: 1; margin: 4px 0 20px }
  .bolum:has(.secici) > .lens-goz-sahne{ display: block; order: 1; margin: 4px 0 20px }
}


/* ==========================================================================
   GÖRÜŞÜNÜ DENE — Net Görüş Alanı sahnesi
   ========================================================================== */
.bolum.sahne-bolum{ grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) }
.sahne-kap{ display: grid; gap: 14px }
.sahne{
  position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cizgi); background: #EEF1F5; touch-action: pan-y; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.sahne:active{ cursor: grabbing }
.sahne-net, .sahne-bulanik{ position: absolute; inset: 0 }
.sahne-katman{ position: absolute; top: 0; bottom: 0; left: 0; width: 140%; will-change: transform }
.sahne svg{ position: absolute; inset: 0; width: 100%; height: 100% }
.sahne-bulanik{ filter: blur(var(--bulaniklik, 4px)) saturate(.9) }
.sahne-net{ -webkit-mask-image: var(--maske); mask-image: var(--maske); -webkit-mask-size: 100% 100%; mask-size: 100% 100% }
.sahne-cerceve{ pointer-events: none }
.sahne-ipucu{
  position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--murekkep); background: rgba(255,255,255,.88);
  padding: 6px 10px; border-radius: 999px; pointer-events: none;
  transition: opacity .4s;
}
.sahne-ipucu svg{ position: static; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none }
.sahne.kaydirildi .sahne-ipucu{ opacity: 0 }
@media (max-width: 860px){
  .bolum.sahne-bolum{ grid-template-columns: minmax(0, 1fr) }
  .sahne{ aspect-ratio: 4 / 3 }   /* telefonda daha yüksek; kenarlar kırpılır */
}
.alanlar{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none }
.alanlar li{ border-top: 2px solid var(--mavi); padding-top: 8px; font-size: calc(14.5px * var(--olcek)); line-height: 1.45; color: var(--murekkep-2) }
.alanlar b{ display: block; font-family: var(--font-marka); color: var(--murekkep); font-size: calc(15.5px * var(--olcek)) }
@media (max-width: 560px){ .alanlar{ grid-template-columns: minmax(0, 1fr) } }


/* ==========================================================================
   GÜNLÜK YAŞAMIM — etkinlik seçimi
   ========================================================================== */
.etkinlikler{ display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; padding: 0; list-style: none }
.etkinlikler button{
  min-height: calc(48px * var(--olcek)); padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--kagit);
  font-weight: 600; font-size: calc(15px * var(--olcek));
  transition: border-color .18s, background-color .18s, color .18s;
}
.etkinlikler button[aria-pressed="true"]{ background: var(--mavi); border-color: var(--mavi); color: #FFFFFF }
.konusma{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi) }
.konusma > li{ display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 28px; padding: 18px 0; border-bottom: 1px solid var(--cizgi-y) }
.konusma h3{ margin: 0; font-family: var(--font-marka); font-weight: 600; font-size: calc(17px * var(--olcek)) }
.konusma ul{ margin: 0; padding-left: 1.1em }
.konusma .bag{ margin-top: 6px; font-size: calc(14px * var(--olcek)) }
.konusma-bos{ padding: 22px 0; color: var(--murekkep-3) }
@media (max-width: 640px){ .konusma > li{ grid-template-columns: minmax(0, 1fr) } }


/* ==========================================================================
   MAĞAZA MODU (?mod=magaza) — Workshop masası ekranı
   ========================================================================== */
.magaza{ --olcek-taban: 1.2 }
.magaza .dis-bag{ display: none }   /* mağaza ekranından ana siteye çıkış yok */
/* Dokunmatik kiosk: uzun basınca metin seçimi / kopyala menüsü açılmasın */
.magaza body{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
/* Levha satırları da büyüsün (masaüstü clamp'lerinin üstüne) */
.magaza .levha .satir{ min-height: 108px }
.magaza .satir-aciklama{ font-size: 17px }
/* Dikey tutulan tablette de QR görünsün: müşteri sayfayı telefonuna alır */
.magaza .sor-qr{ display: grid }
/* Personel modun açık olduğunu görsün */
.mod-rozet{
  display: none; font-size: 12.5px; font-weight: 600; color: #FFFFFF;
  background: var(--mavi); border-radius: 999px; padding: 6px 12px;
}
.magaza .mod-rozet{ display: inline-block }
.magaza .onizleme{ display: none }

/* Normal (web) modda telefondan girene "telefonunla okut" QR'ı anlamsız */
@media (max-width: 860px){
  html:not(.magaza) .duokrom{ grid-template-columns: 1fr }
  html:not(.magaza) .duokrom-y{ display: none }
}


/* ==========================================================================
   HAREKET AZALTMA — odak hâlâ anlatılır, ama anlık
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .js .levha li{ animation: none }
  .levha.secim li:not(.secili){ filter: none; opacity: .35 }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root){ animation: none }
  .satir-ok{ transition: none }
}


/* Hover yalnız fareli cihazda: Workshop masasındaki dokunmatik ekranda
   dokunulan satır "üzerinde" durumunda takılı kalmasın. */
@media (hover: hover) and (pointer: fine){
  .geri:hover{ border-color: var(--mavi); background: var(--mavi-acik) }
  .satir:hover{ background: var(--zemin-2) }
  .satir:hover .satir-ok{ transform: translateX(4px) }
  .mini-dizin a:hover{ background: var(--zemin-2); color: var(--murekkep) }
  .secici button:hover{ border-color: var(--mavi) }
  .isaretler button:hover{ border-color: var(--mavi) }
  .sonraki:hover{ background: var(--zemin-2) }
  .etkinlikler button:hover{ border-color: var(--mavi) }
}


/* ==========================================================================
   SIGNATURE MÜHÜR — OptiPedia koyu dünya (2 Ekim 2026)
   ========================================================================== */
html{ background: #070D1F; scrollbar-color: #3A3424 #070D1F }
body{
  background-color: #070D1F;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -8%, rgba(233,207,138,.12), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat; background-attachment: fixed, scroll;
}
::selection{ background: rgba(233,207,138,.32); color: #FFFFFF }

/* marka plaketi: pirinç halkalı mine üstünde OptiPedia logosu */
.lp-marka{ align-items: center; gap: 14px; color: var(--murekkep) }
.lp-logo{
  display: grid; place-items: center; flex: none;
  width: calc(54px * var(--olcek)); height: calc(54px * var(--olcek)); border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, #7A5A1C, #D9B862 12%, #F7E6B5 20%, #B88E36 32%, #6E5016 45%, #C9A24A 58%, #F3DFA6 68%, #A57E2C 80%, #7A5A1C);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.9);
}
.lp-logo img{
  width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 6px;
  background: radial-gradient(circle at 38% 30%, #FFFDF8, #F4EFE4 46%, #E7DEC9);
}
.lp-ad{ display: grid; gap: 2px }
.lp-marka b{ font-family: var(--font-marka); font-weight: 700; letter-spacing: -.01em; font-size: calc(21px * var(--olcek)); color: #FFFFFF }
.lp-marka b span{ color: var(--mavi) }
.lp-marka small{ font-size: 11.5px; letter-spacing: .2em; color: var(--mavi-2); text-wrap: balance; max-width: 30ch }
@media (max-width: 520px){ .lp-marka small{ font-size: 10.5px; letter-spacing: .12em; line-height: 1.5; max-width: 22ch } }

/* levha: kazınmış harf, pirinç numaralar */
.levha-baslik{ color: var(--murekkep-2) }
.levha-baslik em{ color: #FFFFFF }
.satir-no{ font-family: var(--font-baslik); font-weight: 500; color: var(--mavi); letter-spacing: 0 }
.satir-ad{ font-family: var(--font-baslik); font-weight: 600; text-transform: none; letter-spacing: .03em; color: #F4EFE4 }
.satir-alt{
  display: block; margin-top: 6px; font-family: var(--font-marka); font-weight: 600;
  font-size: calc(12.5px * var(--olcek)); letter-spacing: .2em; text-transform: uppercase; color: var(--mavi-2);
}
.satir-lens .satir-no{ color: #9FD4F2 }
.satir{ transition: background-color .25s, padding-left .35s var(--ease-cikis) }
@media (hover: hover) and (pointer: fine){
  .satir:hover{ background: linear-gradient(90deg, rgba(233,207,138,.10), transparent 70%); padding-left: 14px }
}

/* konu başlığı */
.konu-no{ font-family: var(--font-baslik); font-weight: 500; letter-spacing: 0; color: var(--mavi) }
.konu-ust h1{ font-family: var(--font-baslik); font-weight: 600; text-transform: none; letter-spacing: .03em; color: #F4EFE4 }
.bolum h2, .sor h2{ font-family: var(--font-baslik); font-weight: 600; letter-spacing: .02em; color: #F4EFE4 }
.bolum h3, .konusma h3{ color: #FFFFFF }
.sonraki b{ font-family: var(--font-baslik); font-weight: 600; text-transform: none; letter-spacing: .04em; color: #F4EFE4 }
.sor{ background: rgba(244,239,228,.035) }

/* basılı (seçili) durumlar: pirinç plaket, koyu yazı */
.mini-dizin a[aria-current="page"],
.secici button[aria-pressed="true"],
.etkinlikler button[aria-pressed="true"],
.isaretler button[aria-pressed="true"] .kutu,
.mod-rozet{
  background: var(--pirinc-duz); border-color: transparent; color: #1B1405;
}
.isaretler .kutu svg{ stroke: #1B1405 }
.secici button, .etkinlikler button, .isaretler button, .geri{ background: rgba(244,239,228,.04) }
.secici button:active, .etkinlikler button:active, .isaretler button:active, .geri:active{ transform: scale(.97) }
input[type="range"]{ accent-color: #C9A24A }

/* çizim plakaları: fildişi mine; eski açık çizim renkleri burada yerel olarak geri gelir */
.cizim, .sahne-kap{
  --murekkep: #0C1730; --murekkep-2: #56637E; --murekkep-3: #5A6680;
  --mavi: #002695; --mavi-acik: #E8ECFA; --zemin-2: #F5F7FA;
  --cizgi: #DCE3EB; --cizgi-y: #EEF2F6; --kagit: #FFFFFF;
  --uyari: #8A5200; --uyari-zemin: #FFF6E5;
  color: var(--murekkep);
  padding: clamp(14px, 2vw, 22px); border-radius: 16px;
  background: radial-gradient(circle at 30% 0%, #FFFDF8, #F4EFE4 55%, #ECE4D2);
  box-shadow:
    0 0 0 1px rgba(233,207,138,.45),
    0 0 0 7px rgba(7,13,31,.9),
    0 0 0 8px rgba(233,207,138,.18),
    0 34px 70px -34px #000;
}
.sahne-kap .secici button{ background: #FFFFFF }
.sahne-kap .secici button[aria-pressed="true"]{ background: #0C205B; color: #FFFFFF }

.duokrom{ border-top: 1px solid var(--cizgi) }


/* --- OptiLens (kontakt lens) — buz mavisi ikinci vurgu ------------------ */
.lens-ust{ grid-template-columns: auto minmax(0, 1fr); align-items: center }
.lens-isaret svg{ width: clamp(76px, 9vw, 116px); height: auto; display: block }
.li-dis{ fill: rgba(159,212,242,.06); stroke: rgba(159,212,242,.5); stroke-width: 1.5 }
.li-kubbe{ fill: none; stroke: #9FD4F2; stroke-width: 3; stroke-linecap: round }
.li-ic{ fill: none; stroke: rgba(233,207,138,.7); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 5 }
.li-nokta{ fill: #E9CF8A }
.lens-ust h1 span{ color: #9FD4F2 }
@media (max-width: 860px){
  .lens-ust{ grid-template-columns: auto minmax(0, 1fr) }
  .lens-ust .giris{ grid-column: 1 / -1 }
  .lens-isaret svg{ width: 64px }
  .lens-ust h1{ font-size: clamp(34px, 10vw, 48px) }
}
.bolum.acil > div{
  border-radius: 14px; padding: 18px 22px;
  background: rgba(255,138,128,.08); box-shadow: inset 0 0 0 1px rgba(255,138,128,.35);
}
.bolum.acil h2{ color: #FFB4AC }
.bolum.acil p{ margin: 0; color: #FFE1DD }
.altin-kurallar{ list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; counter-reset: kural; max-width: 72ch }
.altin-kurallar li{ position: relative; padding: 4px 0 4px 52px; counter-increment: kural; color: var(--murekkep-2) }
.altin-kurallar li b{ display: block; color: #FFFFFF }
.altin-kurallar li::before{
  content: counter(kural); position: absolute; left: 0; top: 2px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 var(--font-baslik); color: #2A1E05;
  background: radial-gradient(circle at 35% 30%, #FFF4D2, #E2C376 40%, #B48A33 78%, #8C6A24);
}
.kategori-liste{ list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--cizgi) }
.kategori-liste li{ border-bottom: 1px solid var(--cizgi-y) }
.kategori-liste a{
  display: grid; grid-template-columns: 52px minmax(0, 15rem) minmax(0, 1fr) auto; gap: 6px 22px; align-items: baseline;
  padding: 16px 4px; color: inherit; text-decoration: none; border-radius: 10px;
  transition: background-color .2s, padding-left .3s var(--ease-cikis);
}
.kategori-liste a:focus-visible{ outline: 2px solid #9FD4F2; outline-offset: 2px }
@media (hover: hover) and (pointer: fine){
  .kategori-liste a:hover{ background: linear-gradient(90deg, rgba(159,212,242,.10), transparent 75%); padding-left: 14px }
  .kategori-liste a:hover .k-ad{ color: #9FD4F2 }
}
.kategori-liste a:active{ background: rgba(159,212,242,.12) }
.k-no{ font-family: var(--font-baslik); color: #9FD4F2; font-size: 20px }
.k-ad{ font-family: var(--font-marka); font-weight: 600; color: #FFFFFF; font-size: calc(17px * var(--olcek)) }
.k-acik{ color: var(--murekkep-2); font-size: calc(15px * var(--olcek)) }
.k-durum{
  font-family: var(--font-marka); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #9FD4F2; padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(233,207,138,.3); white-space: nowrap;
}
@media (max-width: 760px){
  .kategori-liste a{ grid-template-columns: 40px minmax(0, 1fr) }
  .k-acik, .k-durum{ grid-column: 2 }
  .k-durum{ justify-self: start }
}

/* açılış: başlık yükselir; plakalar ve satırlar kaydırdıkça belirir */
@media (prefers-reduced-motion: no-preference){
  .konu-ust > *{ animation: lp-yuksel .9s var(--ease-cikis) backwards }
  .konu-ust > :nth-child(2){ animation-delay: 90ms }
  .konu-ust > :nth-child(3){ animation-delay: 180ms }
  @keyframes lp-yuksel{ from{ opacity: 0; transform: translateY(18px); filter: blur(5px) } to{ opacity: 1; transform: none; filter: none } }
  @supports (animation-timeline: view()){
    .cizim, .sahne-kap, .kategori-liste li, .altin-kurallar li{
      animation: lp-belir linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
    @keyframes lp-belir{ from{ opacity: .2; transform: translateY(24px) } to{ opacity: 1; transform: none } }
  }
}


/* ==========================================================================
   EKRAN ARAÇLARI, GÖZ SAĞLIĞIM, MUAYENE, A–Z (3 Ekim 2026)
   ========================================================================== */

/* metin boyutu: mağaza tabanı × kullanıcı çarpanı (optipedia-arac.js) */
:root{ --olcek: calc(var(--olcek-taban, 1) * var(--olcek-k, 1)) }
.magaza{ --olcek: calc(var(--olcek-taban, 1.2) * var(--olcek-k, 1)) }

/* --- araç çubuğu --- */
.serit-sag{ gap: 8px }
.arac-cubugu{ display: flex; gap: 6px; flex-wrap: wrap }
.arac{
  display: inline-flex; align-items: center; gap: 7px;
  min-height: calc(44px * var(--olcek)); padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi); background: rgba(244,239,228,.04); color: var(--murekkep);
  font-family: var(--font-marka); font-weight: 600; font-size: calc(13.5px * var(--olcek));
  transition: border-color .18s, background-color .18s, transform .16s var(--ease-cikis);
}
.arac svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none }
.arac:active{ transform: scale(.96) }
.arac[aria-pressed="true"]{ background: var(--pirinc-duz); color: #1B1405; border-color: transparent }
.arac-yazi[data-kademe="1"] .arac-ad::after{ content: " +" }
.arac-yazi[data-kademe="2"] .arac-ad::after{ content: " ++" }
@media (hover: hover) and (pointer: fine){ .arac:hover{ border-color: var(--mavi); background: var(--mavi-acik) } }
@media (max-width: 1180px){ .arac .arac-ad{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } .arac{ padding: 0; width: calc(44px * var(--olcek)); justify-content: center } }
@media (max-width: 640px){ .serit{ row-gap: 10px } .serit-sag{ width: 100%; justify-content: space-between } }

/* --- arama penceresi --- */
.ara-pencere{
  width: min(680px, calc(100vw - 24px)); max-height: min(78vh, 720px); padding: 0; border: 0; border-radius: 18px;
  background: #0E1834; color: var(--murekkep);
  box-shadow: 0 0 0 1px rgba(233,207,138,.35), 0 40px 90px -20px #000;
  margin-top: 10vh;
}
.ara-pencere::backdrop{ background: rgba(4,8,20,.72); backdrop-filter: blur(6px) }
.ara-pencere[open]{ animation: ara-gir .26s var(--ease-cikis) }
@keyframes ara-gir{ from{ opacity: 0; transform: translateY(14px) scale(.98) } to{ opacity: 1; transform: none } }
.ara-ust{ display: flex; gap: 8px; align-items: center; padding: 14px; border-bottom: 1px solid var(--cizgi) }
.ara-ust input, .dizin-ara input{
  flex: 1; width: 100%; min-height: 54px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(233,207,138,.35); background: rgba(244,239,228,.06); color: #FFFFFF;
  font: 500 calc(18px * var(--olcek)) var(--font-metin);
}
.ara-ust input:focus, .dizin-ara input:focus{ outline: none; border-color: var(--mavi); background: rgba(244,239,228,.09) }
.ara-ust input::placeholder, .dizin-ara input::placeholder{ color: #8C877D }
.ara-kapat{
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cizgi); background: transparent; color: var(--murekkep); cursor: pointer;
  display: grid; place-items: center;
}
.ara-kapat svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none }
.ara-sonuc{ list-style: none; margin: 0; padding: 6px 8px 10px; overflow: auto; max-height: calc(78vh - 100px) }
.ara-sonuc a{
  display: grid; gap: 2px; padding: 12px 12px; border-radius: 10px; text-decoration: none; color: inherit;
}
.ara-sonuc b{ font-family: var(--font-marka); font-weight: 600; font-size: calc(16.5px * var(--olcek)); color: #FFFFFF }
.ara-sonuc span{ font-size: calc(13.5px * var(--olcek)); color: var(--murekkep-3) }
.ara-sonuc a:focus-visible, .ara-sonuc li:first-child a{ background: rgba(233,207,138,.08) }
@media (hover: hover) and (pointer: fine){ .ara-sonuc a:hover{ background: rgba(233,207,138,.1) } }
.ara-bos{ padding: 4px 22px 18px; color: var(--murekkep-2) }

/* --- sesli anlatım paneli ve okunan paragraf --- */
.ses-panel{
  position: fixed; z-index: 60; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 10px 10px 10px 18px; border-radius: 16px; max-width: calc(100vw - 24px);
  background: rgba(14,24,52,.94); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(233,207,138,.35), 0 20px 50px -10px #000;
}
.ses-durum{ font-weight: 600; font-size: 14.5px; color: var(--mavi); margin-right: 4px }
.ses-panel button{
  min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi); background: transparent; color: #FFFFFF; font: 600 14px var(--font-marka);
  display: inline-grid; place-items: center;
}
.ses-panel button[data-ses="oynat"]{ background: var(--pirinc-duz); color: #1B1405; border-color: transparent }
.ses-panel button svg{ width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none }
.okunuyor{
  outline: 2px solid rgba(233,207,138,.75); outline-offset: 6px; border-radius: 6px;
  background: rgba(233,207,138,.07);
  transition: outline-color .2s, background-color .2s;
}

/* --- yardım iste (mağaza) --- */

/* --- madde sayfaları (Göz sağlığım, Muayene ve tedavi) --- */
.acil-liste{ margin: 4px 0 0; padding-left: 1.2em; color: #FFE1DD }
.acil-liste li{ margin: 6px 0 }
.acil-liste li::marker{ color: #FF8A80 }
.hizli-gecis{ padding: 4px var(--kenar) 8px }
.hizli-gecis ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.hizli-gecis a{
  display: inline-flex; align-items: center; min-height: calc(40px * var(--olcek)); padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--cizgi); color: var(--murekkep); text-decoration: none; font: 600 calc(14px * var(--olcek)) var(--font-marka);
  transition: border-color .18s, background-color .18s;
}
@media (hover: hover) and (pointer: fine){ .hizli-gecis a:hover{ border-color: var(--mavi); background: var(--mavi-acik) } }
.madde{ scroll-margin-top: 16px }
.madde h2{ margin-bottom: 4px }
.madde-es{ margin: 0 0 12px !important; font-size: calc(14px * var(--olcek)); color: var(--murekkep-3) }
.madde-ozet{ font-size: calc(18px * var(--olcek)); color: #FFFFFF; max-width: 70ch !important }
.madde-alan{ margin: 16px 0 0; display: grid; gap: 0; max-width: 78ch; border-top: 1px solid var(--cizgi-y) }
.madde-alan > div{ display: grid; grid-template-columns: minmax(150px, 13rem) minmax(0, 1fr); gap: 6px 24px; padding: 12px 0; border-bottom: 1px solid var(--cizgi-y) }
.madde-alan dt{ font: 600 calc(13px * var(--olcek)) var(--font-marka); letter-spacing: .12em; text-transform: uppercase; color: var(--mavi-2); padding-top: 3px }
.madde-alan dd{ margin: 0; color: var(--murekkep-2) }
.madde-alan dd ul{ margin: 0; padding-left: 1.1em }
.madde-acil{
  margin: 16px 0 0 !important; padding: 12px 16px; border-radius: 12px; max-width: 78ch !important;
  background: rgba(255,138,128,.08); box-shadow: inset 0 0 0 1px rgba(255,138,128,.35); color: #FFE1DD;
}
.madde-acil b{ color: #FFB4AC }
.madde-ilgili{ margin-top: 14px !important; font-size: calc(14.5px * var(--olcek)); color: var(--murekkep-3) }
.madde-ilgili span{ font: 600 12px var(--font-marka); letter-spacing: .14em; text-transform: uppercase; color: var(--mavi-2); margin-right: 6px }
.grup-baslik{ font-size: clamp(30px, 3.6vw, 44px) !important; color: var(--mavi) !important }
@media (max-width: 640px){ .madde-alan > div{ grid-template-columns: 1fr } }
:target.madde > div{ animation: madde-isaret 1.6s ease-out }
@keyframes madde-isaret{ from{ background: rgba(233,207,138,.12); box-shadow: 0 0 0 12px rgba(233,207,138,.12) } to{ background: transparent; box-shadow: 0 0 0 12px transparent } }

/* --- ilgili konular --- */
.ilgili{ padding: clamp(24px, 4vh, 40px) var(--kenar); border-bottom: 1px solid var(--cizgi) }
.ilgili h2{ margin: 0 0 12px; font: 600 calc(13px * var(--olcek)) var(--font-marka); letter-spacing: .18em; text-transform: uppercase; color: var(--mavi-2) }
.ilgili ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px }
.ilgili a{
  display: inline-flex; align-items: center; min-height: calc(46px * var(--olcek)); padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(233,207,138,.35); color: #FFFFFF; text-decoration: none; font: 600 calc(15px * var(--olcek)) var(--font-marka);
  transition: border-color .18s, background-color .18s;
}
@media (hover: hover) and (pointer: fine){ .ilgili a:hover{ border-color: var(--mavi); background: var(--mavi-acik) } }

/* --- A–Z dizin --- */
.dizin-ara{ max-width: 620px; margin-top: 8px }
.dizin-ara + .ara-sonuc{ padding: 8px 0 0; max-height: none }
.harf-nav{ position: sticky; top: 0; z-index: 5; padding: 10px var(--kenar); background: rgba(7,13,31,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cizgi) }
.harf-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px }
.harf-nav a{
  display: grid; place-items: center; min-width: calc(40px * var(--olcek)); height: calc(40px * var(--olcek)); border-radius: 8px;
  color: var(--mavi); text-decoration: none; font: 600 calc(16px * var(--olcek)) var(--font-baslik);
}
@media (hover: hover) and (pointer: fine){ .harf-nav a:hover{ background: var(--mavi-acik) } }
.harf-blok{ display: grid; grid-template-columns: clamp(52px, 7vw, 96px) minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px); padding: 22px var(--kenar); border-bottom: 1px solid var(--cizgi-y); scroll-margin-top: 64px }
.harf{ margin: 0; font: 500 clamp(40px, 5vw, 64px)/1 var(--font-baslik); color: var(--mavi) }
.dizin-liste{ list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 28px }
.dizin-liste li{ break-inside: avoid }
.dizin-liste a{ display: grid; gap: 1px; padding: 9px 0; text-decoration: none; color: inherit }
.dizin-liste b{ font: 600 calc(16.5px * var(--olcek)) var(--font-marka); color: #FFFFFF }
.dizin-liste span{ font-size: calc(13px * var(--olcek)); color: var(--murekkep-3) }
@media (hover: hover) and (pointer: fine){ .dizin-liste a:hover b{ color: var(--mavi) } }

/* levhadaki A–Z satırı: numara yerinde harf aralığı, tek satır */
.satir[href="dizin.html"] .satir-no{ white-space: nowrap; font-size: clamp(22px, 2.6vw, 34px) }

/* --- OptiLens bölüm sayfaları --- */
.lens-yol{
  grid-column: 1 / -1; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font: 600 calc(13px * var(--olcek)) var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--murekkep-3);
}
.lens-yol a{ color: #9FD4F2; text-decoration: none; letter-spacing: .08em; text-transform: none; font: 600 calc(17px * var(--olcek)) var(--font-baslik) }
.lens-yol a span{ color: #E9CF8A }
.lens-yol a:hover{ text-decoration: underline; text-underline-offset: 4px }
.lens-bolum-ust .konu-no{ color: #9FD4F2 }
.madde-alan dd ol{ margin: 0; padding-left: 1.3em }
.madde-alan dd li{ margin: 3px 0 }
.madde-alan dd ol li::marker{ color: #9FD4F2; font-weight: 700 }
.sozluk dt{ text-transform: none; letter-spacing: .04em; font-size: calc(15px * var(--olcek)); color: #9FD4F2 }
.sozluk dd a{ margin-left: 6px; font-size: calc(13.5px * var(--olcek)); color: var(--mavi) }

/* ==========================================================================
   SADELEŞTİRME (3 Ekim 2026) — daha az yazı, daha çok yön
   Aile renkleri: göz ve gözlük pirinç · OptiLens buz · sağlık mercan ·
   muayene adaçayı. Maddeler kapalı kart; açılınca ayrıntı.
   ========================================================================== */
:root{ --aile-gozluk: #E9CF8A; --aile-lens: #9FD4F2; --aile-saglik: #FF9E8A; --aile-muayene: #9ED8B5 }

/* --- levha: üstte boşluk yok, altta "daha derine in" kartları --- */
.levha{ justify-content: flex-start; padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(32px, 6vh, 64px) }
.ozel{ margin-top: clamp(36px, 6vh, 64px) }
.ozel-baslik{
  margin: 0 0 18px; display: flex; align-items: center; gap: 16px;
  font: 600 calc(13px * var(--olcek)) var(--font-marka); letter-spacing: .22em; text-transform: uppercase; color: var(--mavi-2);
}
.ozel-baslik::after{ content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cizgi), transparent) }
.ozel-izgara{
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "lens saglik muayene" "lens az az";
}
.ok-lens{ grid-area: lens } .ok-saglik{ grid-area: saglik } .ok-muayene{ grid-area: muayene } .ok-az{ grid-area: az }
@media (max-width: 900px){
  .ozel-izgara{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lens lens" "saglik muayene" "az az" }
}
@media (max-width: 480px){
  .ozel-izgara{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "lens" "saglik" "muayene" "az" }
}
.ozel-kart{
  --vurgu: var(--aile-gozluk);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: end; gap: 4px; min-height: calc(176px * var(--olcek));
  padding: 22px 24px; border-radius: 20px; text-decoration: none; color: #FFFFFF;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vurgu) 16%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.02));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vurgu) 28%, transparent), 0 24px 50px -30px #000;
  transition: transform .22s var(--ease-cikis), box-shadow .22s ease;
}
.ozel-kart:active{ transform: scale(.98) }
.ozel-kart:focus-visible{ outline: 3px solid var(--vurgu); outline-offset: 3px }
@media (hover: hover) and (pointer: fine){
  .ozel-kart:hover{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vurgu) 60%, transparent), 0 30px 60px -30px #000 }
  .ozel-kart:hover .ok-ok{ transform: translateX(4px) }
}
.ok-lens{ --vurgu: var(--aile-lens); min-height: calc(370px * var(--olcek)) }
.ok-saglik{ --vurgu: var(--aile-saglik) }
.ok-muayene{ --vurgu: var(--aile-muayene) }
.ok-az{ --vurgu: var(--aile-gozluk) }
.ok-no{ font: 500 calc(15px * var(--olcek)) var(--font-baslik); letter-spacing: .1em; color: var(--vurgu) }
.ok-ad{ font: 600 clamp(24px, 2.4vw, 34px)/1.1 var(--font-baslik); letter-spacing: .02em; color: #F4EFE4 }
.ok-ad span{ color: var(--vurgu) }
.ok-lens .ok-ad{ font-size: clamp(34px, 3.6vw, 52px) }
.ok-alt{ font-size: calc(14.5px * var(--olcek)); color: var(--murekkep-2) }
.ok-sayi{
  justify-self: start; margin-top: 10px; padding: 4px 11px; border-radius: 999px;
  font: 700 calc(11.5px * var(--olcek)) var(--font-marka); letter-spacing: .12em; text-transform: uppercase;
  color: var(--vurgu); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vurgu) 45%, transparent);
}
.ok-ok{ position: absolute; right: 22px; bottom: 24px; width: 26px; height: 26px; fill: none; stroke: var(--vurgu); stroke-width: 1.7; transition: transform .25s var(--ease-cikis) }
.ok-ikon{ position: absolute; top: 20px; right: 20px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--vurgu) 10%, transparent) }
.ok-ikon svg{ width: 34px; height: 34px; fill: none; stroke: var(--vurgu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
/* OptiLens: büyük lens çizimi, yavaş ışık */
.ok-gorsel{ position: absolute; z-index: -1; top: -6%; right: -10%; width: min(78%, 330px); aspect-ratio: 1 }
.ok-gorsel svg{ width: 100%; height: 100%; overflow: visible }
.ok-halka{ fill: none; stroke: rgba(159,212,242,.28); stroke-width: 1.2 }
.ok-halka.ince{ stroke-dasharray: 2 6; stroke: rgba(233,207,138,.45) }
.ok-kubbe{ stroke: #9FD4F2; stroke-width: 3; stroke-linecap: round }
.ok-yansima{ fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 30 200 }
.ok-nokta{ fill: #E9CF8A }
@media (prefers-reduced-motion: no-preference){
  .ok-halka.ince{ transform-origin: 100px 100px; animation: ok-don 40s linear infinite }
  .ok-yansima{ animation: ok-isik 6s var(--ease-cikis) infinite }
  @keyframes ok-don{ to{ transform: rotate(360deg) } }
  @keyframes ok-isik{ 0%, 40%{ stroke-dashoffset: 30 } 75%, 100%{ stroke-dashoffset: -200 } }
}
/* A–Z kartı: harf şeridi */
.ok-harfler{
  position: absolute; z-index: -1; inset: 14px 18px auto auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 2px 12px; max-width: 72%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%);
  font: 600 clamp(22px, 2.4vw, 34px)/1.1 var(--font-baslik); color: rgba(233,207,138,.16);
}
.ok-harfler span:nth-child(3n+1){ color: rgba(233,207,138,.34) }
@media (max-width: 480px){ .ok-harfler{ max-width: 92% } }

/* duokrom: göz muayenesindeki kırmızı-yeşil test; koyu temada derin tonlar */
.duokrom-k{ background: linear-gradient(90deg, #3B1512, #2A0F0E) !important; box-shadow: inset 0 1px 0 rgba(255,120,100,.35) }
.duokrom-y{ background: linear-gradient(90deg, #0F2A1C, #0C2217) !important; box-shadow: inset 0 1px 0 rgba(120,220,150,.3) }
.duokrom p{ color: rgba(255,255,255,.82) }

/* --- madde kartları --- */
.madde-bolum{ padding: clamp(20px, 3vh, 32px) var(--kenar) clamp(28px, 4vh, 40px); border-bottom: 1px solid var(--cizgi) }
.madde-arac{ display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px }
.madde-arac-yazi{ display: grid; gap: 2px }
.madde-arac .grup-baslik{ margin: 0; font: 600 clamp(26px, 3vw, 38px)/1.1 var(--font-baslik) !important }
.grup-acik{ margin: 2px 0 0; color: var(--murekkep-2); font-size: calc(15px * var(--olcek)) }
.madde-sayi{ font: 700 calc(12px * var(--olcek)) var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--murekkep-3) }
.hepsini-ac{
  min-height: calc(42px * var(--olcek)); padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 calc(14px * var(--olcek)) var(--font-marka); color: var(--mavi); background: transparent;
  box-shadow: inset 0 0 0 1px rgba(233,207,138,.42); transition: background-color .16s ease, transform .14s var(--ease-cikis);
}
.hepsini-ac:active{ transform: scale(.97) }
@media (hover: hover) and (pointer: fine){ .hepsini-ac:hover{ background: var(--mavi-acik) } }
.madde-izgara{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; align-items: start; grid-auto-flow: dense }
details.madde{
  border-radius: 16px; scroll-margin-top: 16px;
  background: linear-gradient(180deg, rgba(244,239,228,.05), rgba(244,239,228,.02));
  box-shadow: inset 0 0 0 1px var(--cizgi);
  transition: box-shadow .2s ease, background-color .2s ease;
}
details.madde[open]{ grid-column: 1 / -1; background: rgba(244,239,228,.04); box-shadow: inset 0 0 0 1px rgba(233,207,138,.45) }
details.madde > summary{
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: 16px; min-height: calc(72px * var(--olcek));
}
details.madde > summary::-webkit-details-marker{ display: none }
details.madde > summary:focus-visible{ outline: 3px solid var(--mavi); outline-offset: 2px }
@media (hover: hover) and (pointer: fine){ details.madde:not([open]) > summary:hover{ background: rgba(233,207,138,.06) } }
.madde-bas{ display: grid; gap: 3px; min-width: 0 }
details.madde h2{ margin: 0 !important; font: 600 calc(18px * var(--olcek))/1.25 var(--font-marka) !important; letter-spacing: 0 !important; color: #FFFFFF !important; text-transform: none !important }
details.madde[open] h2{ font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--font-baslik) !important; color: #F4EFE4 !important }
.madde-kisa{ font-size: calc(14px * var(--olcek)); line-height: 1.45; color: var(--murekkep-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
details.madde[open] .madde-kisa{ display: none }
.kart-acil{
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font: 700 calc(10.5px * var(--olcek)) var(--font-marka); letter-spacing: .12em; text-transform: uppercase;
  color: #FFB4AC; box-shadow: inset 0 0 0 1px rgba(255,138,128,.45);
}
.madde-arti{ position: relative; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cizgi); transition: background-color .2s }
.madde-arti::before, .madde-arti::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--mavi); transform: translate(-50%, -50%) }
.madde-arti::after{ transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s var(--ease-cikis) }
details.madde[open] .madde-arti{ background: var(--mavi-acik) }
details.madde[open] .madde-arti::after{ transform: translate(-50%, -50%) rotate(0deg) }
.madde-govde{ padding: 0 22px 22px }
.madde-govde .madde-ozet{ margin: 0 0 4px; font-size: calc(17.5px * var(--olcek)); color: #FFFFFF; max-width: 72ch }
.madde-govde .madde-alan{ max-width: 86ch }
@media (prefers-reduced-motion: no-preference){
  details.madde[open] .madde-govde{ animation: kart-ac .32s var(--ease-cikis) }
  @keyframes kart-ac{ from{ opacity: 0; transform: translateY(-6px) } to{ opacity: 1; transform: none } }
}
@media (max-width: 520px){
  details.madde > summary{ grid-template-columns: minmax(0, 1fr) auto; padding: 14px }
  .kart-acil{ grid-column: 1; grid-row: 2; justify-self: start }
  .madde-arti{ grid-column: 2; grid-row: 1 / span 2 }
  .madde-govde{ padding: 0 14px 18px }
}
/* acil kutusu daha sıkı */
.bolum.acil{ padding-block: clamp(16px, 2.5vh, 28px) }
.bolum.acil > div{ padding: 14px 20px }
.bolum.acil h2{ font-size: clamp(18px, 1.8vw, 22px) !important; margin-bottom: 6px }
.acil-liste{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px 28px; font-size: calc(14.5px * var(--olcek)) }
.acil-liste li{ margin: 3px 0 }

/* --- A–Z --- */
.az-ara-alan{ padding: clamp(20px, 3vh, 32px) var(--kenar) 16px; display: grid; gap: 12px }
.dizin-ara{ position: relative; max-width: 760px; margin: 0 }
.dizin-ara svg{ position: absolute; left: 20px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); fill: none; stroke: var(--mavi); stroke-width: 2; stroke-linecap: round; pointer-events: none }
.dizin-ara input{ min-height: calc(64px * var(--olcek)); padding-left: 56px !important; border-radius: 18px !important; font-size: calc(19px * var(--olcek)) !important }
.dizin-ara + .ara-sonuc{ max-width: 760px }
.dizin-ara + .ara-sonuc:empty{ display: none }
.az-filtre{ display: flex; flex-wrap: wrap; gap: 8px }
.az-sec{
  --vurgu: var(--mavi);
  display: inline-flex; align-items: center; gap: 8px; min-height: calc(42px * var(--olcek)); padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 calc(14px * var(--olcek)) var(--font-marka); color: var(--murekkep-2); background: rgba(244,239,228,.04);
  box-shadow: inset 0 0 0 1px var(--cizgi); transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .14s var(--ease-cikis);
}
.az-sec i{ width: 10px; height: 10px; border-radius: 50%; background: var(--vurgu) }
.az-sec small{ font-size: .85em; color: var(--murekkep-3); font-variant-numeric: tabular-nums }
.az-sec[aria-pressed="true"]{ color: #FFFFFF; background: color-mix(in srgb, var(--vurgu) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--vurgu) }
.az-sec:active{ transform: scale(.97) }
.az-hepsi{ --vurgu: #F4EFE4 } .az-gozluk{ --vurgu: var(--aile-gozluk) } .az-lens{ --vurgu: var(--aile-lens) } .az-saglik{ --vurgu: var(--aile-saglik) } .az-muayene{ --vurgu: var(--aile-muayene) }
.harf-duvar{
  position: sticky; top: 0; z-index: 5; padding: 10px var(--kenar);
  background: rgba(7,13,31,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
}
.harf-duvar ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(46px * var(--olcek)), 1fr)); gap: 6px }
.harf-duvar a{
  position: relative; display: grid; place-items: center; height: calc(46px * var(--olcek)); border-radius: 12px; text-decoration: none;
  background: rgba(244,239,228,.04); box-shadow: inset 0 0 0 1px var(--cizgi); transition: background-color .16s ease, transform .14s var(--ease-cikis), opacity .2s;
}
.harf-duvar b{ font: 600 calc(20px * var(--olcek))/1 var(--font-baslik); color: #F4EFE4 }
.harf-duvar small{ position: absolute; right: 5px; top: 3px; font: 700 9.5px var(--font-marka); color: var(--murekkep-3) }
.harf-duvar a:active{ transform: scale(.95) }
@media (hover: hover) and (pointer: fine){ .harf-duvar a:hover{ background: var(--mavi-acik) } }
.harf-duvar a.bos{ opacity: .25; pointer-events: none }
@media (max-width: 640px){
  .harf-duvar ul{ display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px }
  .harf-duvar li{ flex: 0 0 calc(44px * var(--olcek)) }
}
.az-liste .harf-blok{ grid-template-columns: clamp(48px, 6vw, 80px) minmax(0, 1fr); padding-block: 16px; scroll-margin-top: calc(80px * var(--olcek)) }
.az-liste .harf{ font-size: clamp(36px, 4vw, 52px) }
.az-liste .dizin-liste{ columns: 3 240px; column-gap: 24px }
.az-liste .dizin-liste a{ display: flex; align-items: baseline; gap: 10px; padding: 7px 0 }
.az-liste .dizin-liste a > span:not(.gizli){ font: 600 calc(16px * var(--olcek)) var(--font-marka); color: #FFFFFF }
@media (hover: hover) and (pointer: fine){ .az-liste .dizin-liste a:hover > span:not(.gizli){ color: var(--mavi) } }
.az-nokta{ flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--aile-gozluk); transform: translateY(-1px) }
li[data-aile="lens"] .az-nokta{ background: var(--aile-lens) }
li[data-aile="saglik"] .az-nokta{ background: var(--aile-saglik) }
li[data-aile="muayene"] .az-nokta{ background: var(--aile-muayene) }

/* --- OptiLens girişi: ikonlu bölüm kartları, kural şeridi --- */
.lens-kartlar{ border-top: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 16px !important }
.lens-kartlar li{ border: 0 !important }
@media (min-width: 1100px){
  .lens-kartlar{ grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .lens-kartlar li:last-child{ grid-column: span 2 }
}
.lens-kartlar a{
  position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto 1fr auto; gap: 2px 14px !important; align-items: start !important;
  height: 100%; padding: 18px !important; border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(159,212,242,.07), rgba(159,212,242,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(159,212,242,.2);
  transition: transform .22s var(--ease-cikis), box-shadow .2s ease !important;
}
.lens-kartlar a:active{ transform: scale(.98) }
@media (hover: hover) and (pointer: fine){
  .lens-kartlar a:hover{ padding-left: 18px !important; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(159,212,242,.55), 0 20px 40px -24px #000 }
  .lens-kartlar a:hover .lk-ikon{ background: rgba(159,212,242,.2) }
}
.lk-ikon{ grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(159,212,242,.1); transition: background-color .2s }
.lk-ikon svg{ width: 26px; height: 26px; fill: none; stroke: #9FD4F2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.lens-kartlar .k-no{ grid-column: 2; font-size: 14px !important; letter-spacing: .12em; color: var(--mavi-2) !important }
.lens-kartlar .k-ad{ grid-column: 2; font-size: calc(18px * var(--olcek)) !important; line-height: 1.2 }
.lens-kartlar .k-acik{ grid-column: 1 / -1; margin-top: 10px; font-size: calc(14px * var(--olcek)) !important; line-height: 1.45; color: var(--murekkep-3) !important }
.lens-kartlar .k-durum{ grid-column: 1 / -1; justify-self: start; margin-top: 10px }
.kural-serit{ padding: 0 var(--kenar) clamp(24px, 4vh, 40px) }
.kural-serit ol{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; counter-reset: kural }
.kural-serit li{
  counter-increment: kural; position: relative; padding: 16px 16px 16px 60px; border-radius: 16px;
  background: rgba(233,207,138,.05); box-shadow: inset 0 0 0 1px var(--cizgi);
}
.kural-serit li::before{
  content: counter(kural); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 700 14px/1 var(--font-baslik); color: #2A1E05; background: radial-gradient(circle at 35% 30%, #FFF4D2, #E2C376 40%, #B48A33 78%, #8C6A24);
}
.kural-serit b{ display: block; font: 600 calc(16px * var(--olcek)) var(--font-marka); color: #FFFFFF }
.kural-serit span{ display: block; margin-top: 2px; font-size: calc(13.5px * var(--olcek)); line-height: 1.45; color: var(--murekkep-3) }
.lens-sinir{ margin: 0; padding: 18px var(--kenar) 28px; font-size: calc(13.5px * var(--olcek)); color: var(--murekkep-3); border-bottom: 1px solid var(--cizgi) }

/* sözlük: terim kutuları */
.sozluk-bolum{ padding: clamp(20px, 3vh, 32px) var(--kenar) clamp(28px, 4vh, 40px); border-bottom: 1px solid var(--cizgi) }
.sozluk-bolum .grup-baslik{ margin: 0 0 16px; font: 600 clamp(26px, 3vw, 38px)/1.1 var(--font-baslik) !important }
dl.sozluk{ margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px }
dl.sozluk > div{ padding: 14px 16px; border-radius: 14px; background: rgba(159,212,242,.05); box-shadow: inset 0 0 0 1px rgba(159,212,242,.18) }
dl.sozluk dt{ font: 600 calc(17px * var(--olcek)) var(--font-baslik); letter-spacing: .04em; color: #9FD4F2 }
dl.sozluk dd{ margin: 4px 0 0; font-size: calc(14px * var(--olcek)); line-height: 1.45; color: var(--murekkep-2) }
dl.sozluk dd a{ margin-left: 4px; font-size: .92em }

/* --- levha kartları: 01–06 çizimli kart; uzun açıklama yerine kısa etiket --- */
.levha ol.levha-kartlar{
  border-top: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.levha-kartlar li{ border-bottom: 0 }
.levha-kartlar .satir{
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto;
  align-items: start; gap: 6px 16px;
  min-height: calc(214px * var(--olcek)); padding: 22px 24px 24px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.015));
  box-shadow: inset 0 0 0 1px rgba(233,207,138,.2), 0 24px 50px -32px #000;
  transition: transform .22s var(--ease-cikis), box-shadow .22s ease, background-color .2s;
}
.levha-kartlar .satir-no{ grid-column: 1; grid-row: 1; font-size: calc(22px * var(--olcek)); color: var(--mavi-2) }
.levha-kartlar .satir-cizim{ grid-column: 2; grid-row: 1 / span 2; justify-self: end }
.levha-kartlar .satir-cizim svg{
  width: calc(84px * var(--olcek)); height: calc(84px * var(--olcek)); display: block;
  fill: none; stroke: var(--mavi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-cikis);
}
.levha-kartlar .satir-cizim .ince{ stroke-width: 1.4; opacity: .55 }
.levha-kartlar .satir-cizim .dolu{ fill: var(--mavi); stroke: none }
.levha-kartlar .satir-ad{ grid-column: 1 / -1; grid-row: 3; align-self: end; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: .04em; line-height: 1.1 }
.levha-kartlar .satir-aciklama{
  grid-column: 1 / -1; grid-row: 4; font: 600 calc(12px * var(--olcek)) var(--font-marka);
  letter-spacing: .14em; text-transform: uppercase; color: var(--murekkep-3);
}
.levha-kartlar .satir-ok{ position: absolute; right: 22px; bottom: 22px; width: 24px; height: 24px }
.levha-kartlar .satir:active{ transform: scale(.98) }
@media (hover: hover) and (pointer: fine){
  .levha-kartlar .satir:hover{
    padding-left: 24px; transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(233,207,138,.1), rgba(233,207,138,.02));
    box-shadow: inset 0 0 0 1px rgba(233,207,138,.55), 0 30px 60px -30px #000;
  }
  .levha-kartlar .satir:hover .satir-cizim svg{ transform: scale(1.06) rotate(-3deg) }
  .levha-kartlar .satir:hover .satir-ok{ transform: translateX(4px) }
}
.levha.secim .levha-kartlar li.secili .satir{ background: var(--mavi-acik) }
@media (max-width: 900px){ .levha ol.levha-kartlar{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px){
  .levha ol.levha-kartlar{ gap: 10px }
  .levha-kartlar .satir{ min-height: calc(168px * var(--olcek)); padding: 16px 16px 18px; border-radius: 16px; gap: 4px 8px }
  .levha-kartlar .satir-cizim svg{ width: calc(52px * var(--olcek)); height: calc(52px * var(--olcek)) }
  .levha-kartlar .satir-ad{ font-size: calc(19px * var(--olcek)); letter-spacing: .02em }
  .levha-kartlar .satir-aciklama{ font-size: calc(10.5px * var(--olcek)); letter-spacing: .08em }
  .levha-kartlar .satir-ok{ display: none }
}
.magaza .levha-kartlar .satir{ min-height: calc(240px * var(--olcek)) }

/* --- Çocuğumun gözü: işaretler + öneri paneli --- */
.isaret-duzen{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; margin-top: 8px }
.isaret-duzen .isaretler{ margin: 0; grid-template-columns: minmax(0, 1fr) }
@media (max-width: 860px){ .isaret-duzen{ grid-template-columns: minmax(0, 1fr) } }
.isaret-panel{
  position: sticky; top: 16px; display: grid; gap: 12px; padding: 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(244,239,228,.05), rgba(244,239,228,.015));
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
@media (max-width: 860px){ .isaret-panel{ position: static } }
.ip-bos{ margin: 0 !important; color: var(--murekkep-3); font-size: calc(15px * var(--olcek)) }
.ip-bos b{ color: var(--murekkep-2) }
.ip-oneri{ --ton: #E9CF8A; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--ton) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ton) 60%, transparent) }
.ip-oneri.k2{ --ton: #F0A23A }
.ip-oneri.k3{ --ton: #FF8A80 }
.ip-seviye{ display: block; font: 700 calc(11px * var(--olcek)) var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--ton) }
.ip-oneri b{ display: block; margin-top: 4px; font: 600 clamp(20px, 2vw, 26px)/1.2 var(--font-baslik); color: #FFFFFF }
.ip-oneri p{ margin: 6px 0 0 !important; font-size: calc(15px * var(--olcek)); color: var(--murekkep-2) }
.ip-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.ip-liste li{ display: grid; gap: 4px; padding: 12px 14px 12px 16px; border-radius: 12px; background: rgba(244,239,228,.035); border-left: 3px solid #E9CF8A }
.ip-liste li.ip-k2{ border-left-color: #F0A23A }
.ip-liste li.ip-k3{ border-left-color: #FF8A80 }
.ip-liste b{ font: 600 calc(15.5px * var(--olcek)) var(--font-marka); color: #FFFFFF }
.ip-liste span{ font-size: calc(14.5px * var(--olcek)); line-height: 1.5; color: var(--murekkep-2) }
.ip-liste a{ justify-self: start; font: 600 calc(14px * var(--olcek)) var(--font-marka); color: var(--mavi) }
.ip-not{ margin: 0 !important; font-size: calc(13px * var(--olcek)); color: var(--murekkep-3) }

.ip-cubuk{
  position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 18px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  font: 500 calc(14px * var(--olcek)) var(--font-marka); color: #FFFFFF;
  background: rgba(17,29,61,.96); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px #E9CF8A, 0 18px 40px -12px #000;
}
.ip-cubuk[data-kademe="2"]{ box-shadow: inset 0 0 0 1.5px #F0A23A, 0 18px 40px -12px #000 }
.ip-cubuk[data-kademe="3"]{ box-shadow: inset 0 0 0 1.5px #FF8A80, 0 18px 40px -12px #000 }
.ip-cubuk[hidden]{ display: none }
.ip-cubuk b{ font-weight: 700 }
.ip-cubuk-git{ flex: 0 0 auto; font-weight: 700; color: var(--mavi) }
.ip-cubuk:active{ transform: scale(.98) }
@media (min-width: 861px){ .ip-cubuk{ display: none !important } }

/* --- Günlük yaşamım: konuşma özeti ve kartlar --- */
.konusma-ozet{
  margin: 0 0 14px; padding: 16px 18px; border-radius: 16px;
  background: rgba(233,207,138,.08); box-shadow: inset 0 0 0 1.5px rgba(233,207,138,.5);
}
.konusma-ozet[hidden]{ display: none }
.ko-baslik{ display: block; margin-bottom: 10px; font: 700 calc(11.5px * var(--olcek)) var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--mavi) }
.konusma-ozet ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.konusma-ozet li{ padding: 7px 13px; border-radius: 999px; font: 600 calc(14.5px * var(--olcek)) var(--font-marka); color: #FFFFFF; background: rgba(244,239,228,.06); box-shadow: inset 0 0 0 1px var(--cizgi) }
.konusma{ border-top: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px }
.konusma > li{
  grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding: 18px 20px !important; border-bottom: 0 !important;
  border-radius: 16px; background: linear-gradient(180deg, rgba(244,239,228,.05), rgba(244,239,228,.015)); box-shadow: inset 0 0 0 1px var(--cizgi);
}
.konusma > li[hidden]{ display: none }
.konusma h3{ font-family: var(--font-baslik) !important; font-size: calc(20px * var(--olcek)) !important; color: #F4EFE4 }
.konusma ul li{ margin: 4px 0; color: var(--murekkep-2) }

/* --- CSKPEDIA ana sayfa bağlantısı (mağaza ekranında gizli) --- */
.ana-don{
  order: -1; display: inline-flex; align-items: center; gap: 8px; min-height: calc(44px * var(--olcek)); padding: 0 14px 0 8px;
  border-radius: 999px; text-decoration: none; color: var(--murekkep-2);
  font: 700 calc(12px * var(--olcek)) var(--font-marka); letter-spacing: .14em;
  box-shadow: inset 0 0 0 1px var(--cizgi); transition: color .16s ease, background-color .16s ease;
}
.ana-don img{ width: 30px; height: auto }
.ana-don:active{ transform: scale(.97) }
@media (hover: hover) and (pointer: fine){ .ana-don:hover{ color: #FFFFFF; background: var(--mavi-acik) } }
@media (max-width: 640px){
  .serit{ position: relative }
  .ana-don{ position: absolute; top: 18px; right: var(--kenar); min-height: 40px; padding: 0 12px 0 6px; letter-spacing: .06em }
  .ana-don img{ width: 26px }
  .ana-don span{ font-size: 0 }
  .ana-don span::after{ content: "Ana sayfa"; font-size: calc(12.5px * var(--olcek)) }
}
/* Mağaza masasında ana sayfa bağlantısı masanın ilk ekranına gider (lenspedia.js) */

/* --- Master Handoff 2.0 menü sırası: 06 Kontakt lensler · OptiLens ana levhada,
       Günlük yaşamım "Daha derine in" içinde büyük kart --- */
.levha-kartlar .satir-lens{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aile-lens) 40%, transparent), 0 24px 50px -32px #000;
  background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--aile-lens) 14%, transparent), transparent 60%), linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.015)) }
.levha-kartlar .satir-lens .satir-no{ color: var(--aile-lens) }
.levha-kartlar .satir-lens .satir-cizim svg{ stroke: var(--aile-lens) }
.levha-kartlar .satir-lens .satir-cizim .dolu{ fill: var(--aile-gozluk) }
@media (hover: hover) and (pointer: fine){
  .levha-kartlar .satir-lens:hover{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aile-lens) 70%, transparent), 0 30px 60px -30px #000;
    background: linear-gradient(180deg, color-mix(in srgb, var(--aile-lens) 12%, transparent), rgba(159,212,242,.02)) }
}
.ok-yasam{ grid-area: lens; --vurgu: var(--aile-gozluk); min-height: calc(370px * var(--olcek)) }
.ok-yasam .ok-ad{ font-size: clamp(30px, 3.2vw, 46px) }
.ok-yasam .ok-halka{ stroke: rgba(233,207,138,.22) }
.ok-cizgi{ fill: none; stroke: rgba(233,207,138,.7); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.ok-cizgi.ince{ stroke-width: 1.6; opacity: .6 }
.ok-gunes{ fill: rgba(233,207,138,.18); stroke: #E9CF8A; stroke-width: 2.4 }
.sahne-temsili{
  position: absolute; left: 12px; top: 12px; z-index: 3; pointer-events: none;
  padding: 5px 10px; border-radius: 6px; font: 700 calc(11px * var(--olcek)) var(--font-marka);
  letter-spacing: .14em; text-transform: uppercase; color: #3A2A00; background: rgba(255,226,150,.92);
}

/* --- Gözümü tanı / Camını tanı: sözlük kartları (Master Handoff 2.0) --- */
.ek-sozluk{ border-bottom: 0; padding-bottom: 0 }
.ek-sozluk .giris-alt{ color: var(--murekkep-2); margin-bottom: 0 }
.ek-sozluk + .madde-bolum{ padding-top: 8px }

/* ==========================================================================
   GÖRÜŞÜNÜ DENE — Camın öteki özellikleri (optipedia-sim.js)
   ========================================================================== */
.ozellik-sahne{
  position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cizgi); background: #E6EAF0;
}
.ozellik-tuval{ display: block; width: 100%; height: 100% }
.ozellik-durum{
  position: absolute; left: 12px; bottom: 12px; z-index: 2; pointer-events: none; max-width: 68%;
  padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0C1730;
  font: 600 calc(13px * var(--olcek)) / 1.3 var(--font-marka); font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px -8px rgba(7,13,31,.45);
}
.ozellik-durum:empty{ display: none }
.ozellik-kontrol{ display: grid; gap: 10px }
.ozellik-kontrol[hidden]{ display: none }
.ozellik-satir{ display: grid; grid-template-columns: minmax(92px, auto) minmax(0, 1fr); align-items: center; gap: 4px 12px }
.ozellik-etiket{ font: 600 calc(13.5px * var(--olcek)) var(--font-marka); color: var(--murekkep-2) }
.ozellik-satir .secici{ margin: 0 }
.ozellik-kontrol .kaydirici{ margin: 2px 0 0 }
.kaydirici.pasif{ opacity: .45 }
.kaydirici.pasif label::after{ content: none }
.ozellik-kutu{
  display: inline-flex; align-items: center; gap: 10px; min-height: calc(44px * var(--olcek)); cursor: pointer;
  font: 600 calc(14.5px * var(--olcek)) var(--font-marka); color: var(--murekkep)
}
.ozellik-kutu input{ width: 22px; height: 22px; accent-color: #0C205B; color-scheme: light; margin: 0 }
@media (max-width: 560px){
  .ozellik-satir{ grid-template-columns: minmax(0, 1fr) }
  .ozellik-sahne{ aspect-ratio: auto }
  .ozellik-tuval{ aspect-ratio: 16 / 10; height: auto }
  .ozellik-durum{ position: static; display: block; max-width: none; border-radius: 0; box-shadow: none; padding: 9px 12px; border-top: 1px solid var(--cizgi) }
}


/* ==========================================================================
   OPTILENS BAĞIMSIZ (3 Ekim 2026) — kendi markası, geçiş, arama, kısayollar
   ========================================================================== */
.lp-logo-lens{ padding: 3px }
.lp-logo-lens svg{ width: 100%; height: 100%; display: block; border-radius: 50% }
.lenspedia .lp-marka b span{ color: #9FD4F2 }
.lenspedia .mini-dizin a[aria-current="page"]{ background: linear-gradient(180deg, #CDEBFA, #8FC6E6); color: #0C1730 }

/* OptiPedia ↔ OptiLens geçişi: şeritte her zaman görünür */
.pedia-gecis{
  order: -1; display: inline-flex; align-items: center; gap: 8px; min-height: calc(44px * var(--olcek)); padding: 0 14px 0 6px;
  border-radius: 999px; text-decoration: none; color: #FFFFFF;
  font: 700 calc(13px * var(--olcek)) var(--font-marka); letter-spacing: .02em;
  background: rgba(159,212,242,.08); box-shadow: inset 0 0 0 1px rgba(159,212,242,.4);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.lenspedia .pedia-gecis{ background: rgba(233,207,138,.08); box-shadow: inset 0 0 0 1px rgba(233,207,138,.45) }
.pedia-gecis img, .pedia-gecis svg{ width: 32px; height: 32px; border-radius: 50%; flex: none }
.pedia-gecis img{ background: #F4EFE4; padding: 3px; object-fit: contain }
.pedia-gecis span span{ color: #9FD4F2 }
.lenspedia .pedia-gecis span span{ color: var(--mavi) }
.pedia-gecis:active{ transform: scale(.97) }
@media (hover: hover) and (pointer: fine){ .pedia-gecis:hover{ background: rgba(159,212,242,.16) } .lenspedia .pedia-gecis:hover{ background: rgba(233,207,138,.16) } }

/* Büyük geçiş kartı (levhanın ve OptiLens girişinin altında) */
.lens-gecis{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin: clamp(20px, 4vh, 36px) var(--kenar) clamp(28px, 5vh, 48px); padding: clamp(16px, 2.4vw, 24px);
  border-radius: 20px; text-decoration: none; color: var(--murekkep);
  background: linear-gradient(120deg, rgba(159,212,242,.10), rgba(159,212,242,.02) 60%);
  box-shadow: inset 0 0 0 1px rgba(159,212,242,.35);
  transition: transform .22s var(--ease-cikis), box-shadow .2s ease;
}
.optipedia-gecis{ background: linear-gradient(120deg, rgba(233,207,138,.12), rgba(233,207,138,.02) 60%); box-shadow: inset 0 0 0 1px rgba(233,207,138,.4) }
.lg-isaret{ width: clamp(56px, 7vw, 76px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(159,212,242,.1) }
.lg-isaret svg{ width: 70%; height: 70%; fill: none; stroke: #9FD4F2; stroke-width: 2.4; stroke-linecap: round }
.lg-isaret svg .ince{ stroke-width: 1.4; opacity: .7 }
.lg-isaret svg .dolu{ fill: #E9CF8A; stroke: none }
.lg-isaret img{ width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 8px; background: radial-gradient(circle at 38% 30%, #FFFDF8, #F4EFE4 46%, #E7DEC9) }
.lg-yazi{ display: grid; gap: 4px; min-width: 0 }
.lg-yazi small{ font: 700 calc(11.5px * var(--olcek)) var(--font-marka); letter-spacing: .2em; text-transform: uppercase; color: #9FD4F2 }
.optipedia-gecis .lg-yazi small{ color: var(--mavi) }
.lg-yazi b{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); color: #F4EFE4; letter-spacing: .02em }
.lg-yazi > span{ color: var(--murekkep-2); font-size: calc(15px * var(--olcek)) }
.lg-yazi > span span span, .lg-yazi > span > span{ color: inherit }
.lens-gecis > svg{ width: 28px; height: 28px; fill: none; stroke: var(--mavi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.lens-gecis:active{ transform: scale(.985) }
@media (hover: hover) and (pointer: fine){ .lens-gecis:hover{ transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(159,212,242,.65), 0 22px 44px -26px #000 } .optipedia-gecis:hover{ box-shadow: inset 0 0 0 1px rgba(233,207,138,.7), 0 22px 44px -26px #000 } }
@media (max-width: 520px){ .lens-gecis{ grid-template-columns: auto minmax(0, 1fr) } .lens-gecis > svg{ display: none } }

/* OptiLens giriş: büyük arama ve altı kısayol */
.lens-ara{ padding: 0 var(--kenar); margin-bottom: clamp(18px, 3vh, 28px) }
.dizin-ara.buyuk{ max-width: 860px }
.dizin-ara.buyuk input{ min-height: calc(72px * var(--olcek)); font-size: calc(21px * var(--olcek)) !important; box-shadow: inset 0 0 0 1px rgba(159,212,242,.35) }
.lens-ara .ara-sonuc{ max-width: 860px }
.lens-kisayol{ padding: 0 var(--kenar); margin-bottom: clamp(8px, 2vh, 16px) }
.lens-kisayol ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px }
.lens-kisayol a{
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; align-items: center;
  min-height: calc(76px * var(--olcek)); padding: 14px 16px; border-radius: 16px; text-decoration: none;
  background: rgba(244,239,228,.035); box-shadow: inset 0 0 0 1px var(--cizgi);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s var(--ease-cikis);
}
.lens-kisayol .lk-ikon{ width: 44px; height: 44px }
.lens-kisayol b{ font-family: var(--font-marka); font-weight: 700; font-size: calc(17px * var(--olcek)); color: #FFFFFF; align-self: end }
.lens-kisayol small{ grid-column: 2; font-size: calc(13.5px * var(--olcek)); line-height: 1.35; color: var(--murekkep-3); align-self: start }
.lens-kisayol a:active{ transform: scale(.98) }
@media (hover: hover) and (pointer: fine){ .lens-kisayol a:hover{ background: rgba(159,212,242,.08); box-shadow: inset 0 0 0 1px rgba(159,212,242,.5) } }
@media (min-width: 1100px){ .lens-kisayol ul{ grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* 3D eğitim */
.lens3d-sahne{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
.lens3d-pano{ margin: 0; display: grid; gap: 6px }
.lens3d-pano canvas{ display: block; width: 100%; height: auto; aspect-ratio: 8 / 7; border-radius: 14px; border: 1px solid var(--cizgi); background: #E9EEF4; touch-action: pan-y }
.lens3d-goz{ cursor: grab }
.lens3d-goz:active{ cursor: grabbing }
.lens3d-pano figcaption{ font: 600 calc(12.5px * var(--olcek)) var(--font-marka); color: var(--murekkep-2); text-align: center }
.lens3d-olcu{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0 }
.lens3d-olcu div{ border-top: 2px solid #9FD4F2; padding-top: 8px }
.lens3d-olcu dt{ font: 700 calc(12px * var(--olcek)) var(--font-marka); letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-3); overflow-wrap: anywhere; hyphens: auto }
.lens3d-olcu div{ min-width: 0 }
.lens3d-olcu dd{ margin: 4px 0 0; font-family: var(--font-marka); font-weight: 600; font-size: calc(16px * var(--olcek)); color: var(--murekkep); font-variant-numeric: tabular-nums }
@media (max-width: 560px){ .lens3d-sahne{ grid-template-columns: minmax(0, 1fr) } .lens3d-olcu{ grid-template-columns: minmax(0, 1fr) } }
.bolum.sahne-bolum.lens3d-bolum{ grid-template-columns: minmax(0, 1fr) }
.lens3d-bolum > div:last-child{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 32px; align-items: start }
.lens3d-bolum > div:last-child > h2, .lens3d-bolum > div:last-child > .secici{ grid-column: 1 / -1 }
.lens3d-bolum > div:last-child > .not{ grid-column: 2 }
@media (max-width: 860px){ .lens3d-bolum > div:last-child{ display: block } }

/* ==========================================================================
   UYGULAMA MASASI — ilk ekran (masa.html): iki büyük giriş ve dil seçimi
   ========================================================================== */
.masa-serit{ justify-content: space-between }
.masa-marka{ display: inline-flex; align-items: center; gap: 12px }
.masa-marka img{ width: 48px; height: auto }
.masa-marka b{ display: block; font: 700 calc(18px * var(--olcek)) var(--font-marka); letter-spacing: .08em; color: #FFFFFF }
.masa-marka small{ font: 700 calc(11.5px * var(--olcek)) var(--font-marka); letter-spacing: .22em; text-transform: uppercase; color: var(--mavi-2) }
.masa{ padding: clamp(24px, 5vh, 56px) var(--kenar) clamp(32px, 6vh, 64px); display: grid; gap: clamp(20px, 3.4vh, 32px); max-width: 1240px; margin: 0 auto }
.masa-baslik{ margin: 0; font-family: var(--font-baslik); font-weight: 600; font-size: clamp(36px, 5.4vw, 68px); line-height: 1.05; letter-spacing: .01em; color: #F4EFE4; text-wrap: balance }
.masa-giris{ margin: 0; max-width: 60ch; font-size: calc(18px * var(--olcek)); color: var(--murekkep-2) }
.masa-kartlar{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px) }
.masa-kart{
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 8px;
  min-height: clamp(300px, 46vh, 460px); padding: clamp(22px, 3vw, 36px); border-radius: 26px; text-decoration: none; color: var(--murekkep);
  background: radial-gradient(90% 80% at 85% 0%, rgba(233,207,138,.16), transparent 62%), linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.015));
  box-shadow: inset 0 0 0 1px rgba(233,207,138,.35), 0 36px 70px -36px #000;
  transition: transform .24s var(--ease-cikis), box-shadow .2s ease;
}
.masa-lens{ background: radial-gradient(90% 80% at 85% 0%, rgba(159,212,242,.2), transparent 62%), linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.015)); box-shadow: inset 0 0 0 1px rgba(159,212,242,.4), 0 36px 70px -36px #000 }
.mk-logo{ position: absolute; top: clamp(20px, 3vw, 32px); inset-inline-end: clamp(20px, 3vw, 32px); width: clamp(84px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #FFFDF8, #F4EFE4 46%, #E7DEC9); box-shadow: 0 0 0 3px rgba(233,207,138,.55), 0 18px 34px -16px #000 }
.mk-logo img{ width: 82%; height: auto }
.mk-logo-lens{ background: none; box-shadow: 0 18px 34px -16px #000 }
.mk-logo-lens svg{ width: 100%; height: 100% }
.masa-kart small{ font: 700 calc(12.5px * var(--olcek)) var(--font-marka); letter-spacing: .2em; text-transform: uppercase; color: var(--mavi) }
.masa-lens small, .masa-lens .mk-git{ color: #9FD4F2 }
.masa-kart b{ font-family: var(--font-marka); font-weight: 700; font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: -.02em; color: #FFFFFF }
.masa-kart b span{ color: var(--mavi) }
.masa-lens b span{ color: #9FD4F2 }
.mk-acik{ max-width: 34ch; font-size: calc(17px * var(--olcek)); color: var(--murekkep-2) }
.mk-git{ margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font: 700 calc(17px * var(--olcek)) var(--font-marka); color: var(--mavi) }
.mk-git svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s var(--ease-cikis) }
[dir="rtl"] .mk-git svg{ transform: scaleX(-1) }
.masa-kart:active{ transform: scale(.985) }
@media (hover: hover) and (pointer: fine){ .masa-kart:hover{ transform: translateY(-4px) } .masa-kart:hover .mk-git svg{ transform: translateX(4px) } }
.masa-dil h2{ margin: 0 0 12px; font: 700 calc(14px * var(--olcek)) var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--mavi) }
.masa-onizleme{ margin: 0; padding: 12px 16px; border-radius: 12px; font-size: calc(14px * var(--olcek)); color: var(--murekkep-2); border: 1px dashed rgba(233,207,138,.35) }
.magaza .masa-onizleme{ display: none }
.masa-dip{ align-items: center }
.masa-bitir{
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(233,207,138,.45); background: transparent; color: #F4EFE4; font: 700 calc(15px * var(--olcek)) var(--font-marka)
}
.masa-bitir svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8 }
.masa-bitir:active{ transform: scale(.97) }
@media (max-width: 720px){ .masa-kartlar{ grid-template-columns: minmax(0, 1fr) } .masa-kart{ min-height: 0; align-content: start } .mk-logo{ position: static; width: 72px; margin-bottom: 8px } }

/* --- OptiLens karşılaştırma laboratuvarı (optilens/karsilastir.html) --- */
.kars-secim{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px }
.kars-secim button{
  width: 100%; min-height: calc(56px * var(--olcek)); text-align: left; cursor: pointer; display: grid; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--cizgi); border-radius: 12px; background: rgba(244,239,228,.03); color: var(--murekkep);
  transition: border-color .18s, background-color .18s, transform .16s var(--ease-cikis);
}
.kars-secim button b{ font: 600 calc(15px * var(--olcek)) var(--font-marka) }
.kars-secim button small{ font-size: calc(12.5px * var(--olcek)); color: var(--murekkep-3) }
.kars-secim button[aria-pressed="true"]{ border-color: #9FD4F2; background: rgba(159,212,242,.12); box-shadow: inset 0 0 0 1px #9FD4F2 }
.kars-secim button[aria-disabled="true"]{ opacity: .45 }
.kars-secim button:active{ transform: scale(.98) }
.kars-secim button:focus-visible{ outline: 2px solid #9FD4F2; outline-offset: 2px }
.kars-sayac{ font: 600 14px var(--font-marka); color: #9FD4F2; margin-left: 8px; font-variant-numeric: tabular-nums }
.kars-uyari{ margin: 10px 0 0; color: var(--uyari) }
.kars-kaydir{ overflow-x: auto; margin: 6px 0 14px; border-radius: 14px; border: 1px solid var(--cizgi) }
.kars-tablo{ width: 100%; border-collapse: collapse; font-size: calc(14.5px * var(--olcek)); min-width: 560px }
.kars-tablo th, .kars-tablo td{ text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--cizgi-y) }
.kars-tablo thead th{ font: 600 calc(14px * var(--olcek)) var(--font-marka); color: #9FD4F2; background: rgba(159,212,242,.06) }
.kars-tablo tbody th{ width: 22%; font: 600 calc(13.5px * var(--olcek)) var(--font-marka); color: var(--murekkep-2) }
.kars-tablo tbody tr:last-child th, .kars-tablo tbody tr:last-child td{ border-bottom: 0 }
.kars-tablo tr.farkli th{ color: var(--mavi) }
.kars-tablo tr.farkli th::after{ content: " •"; color: var(--mavi) }
.kars-tablo td.degisir{ color: var(--murekkep-3); font-style: italic }
.kars-acil{ padding-top: 0 }

/* 3D göz: takma ve çıkarma (optilens/3d.html, lens-goz-3d.js) */
.bolum.lens-goz-bolum{ grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); align-items: start }
.lens-goz-sahne{
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; touch-action: none;
  background: radial-gradient(120% 90% at 50% 25%, #2B3550 0%, #121A30 55%, #070D1F 100%);
  box-shadow: 0 0 0 1px rgba(233,207,138,.35), 0 30px 60px -32px #000;
}
.lens-goz-tuval{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab }
.lens-goz-tuval:active{ cursor: grabbing }
.lens-goz-sahne .sahne-temsili{
  position: absolute; top: 12px; left: 12px; z-index: 2; font: 600 11px var(--font-marka); letter-spacing: .14em; text-transform: uppercase;
  color: #F2C98A; background: rgba(7,13,31,.72); border: 1px solid rgba(242,201,138,.35); padding: 4px 9px; border-radius: 6px;
}
.lens-goz-ipucu{ position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 12px; color: rgba(244,239,228,.72); pointer-events: none }
.lens-goz-sahne:not(.lens-goz-var) .lens-goz-ipucu{ display: none }
.lens-goz-adimlar{ counter-reset: adim; list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px }
.lens-goz-adimlar li{ counter-increment: adim }
.lens-goz-adimlar button{
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; text-align: start;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cizgi); background: rgba(244,239,228,.03); color: var(--murekkep-2);
  font: inherit; font-size: calc(15px * var(--olcek)); line-height: 1.45; cursor: pointer;
  transition: border-color .18s, background-color .18s, color .18s;
}
.lens-goz-adimlar button::before{
  content: counter(adim); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--cizgi); font: 700 13px var(--font-marka); color: var(--mavi);
}
.lens-goz-adimlar li[aria-current="step"] button{ border-color: var(--mavi); color: var(--murekkep); background: rgba(233,207,138,.08) }
.lens-goz-adimlar li[aria-current="step"] button::before{ background: var(--pirinc-duz); color: #1B1405; border-color: transparent }
.lens-goz-dugmeler{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.lens-goz-dugmeler button{
  min-height: calc(44px * var(--olcek)); padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--cizgi);
  background: rgba(244,239,228,.04); color: var(--murekkep); font: 600 calc(14px * var(--olcek)) var(--font-marka);
}
.lens-goz-dugmeler [data-goz="oynat"]{ background: var(--pirinc-duz); color: #1B1405; border-color: transparent }
.lens-goz-dugmeler button:active, .lens-goz-adimlar button:active{ transform: scale(.98) }
@media (hover: hover){ .lens-goz-adimlar button:hover, .lens-goz-dugmeler button:hover{ border-color: var(--mavi) } }
.lens-goz-yedek{ display: none }
.lens-goz-yok .lens-goz-sahne, .lens-goz-yok .lens-goz-panel > :not(h2):not(.lens-goz-yedek){ display: none }
.lens-goz-yok .lens-goz-yedek{ display: block }
.lens-goz-yok.bolum{ grid-template-columns: minmax(0, 1fr) }
@media (max-width: 860px){ .bolum.lens-goz-bolum{ grid-template-columns: minmax(0, 1fr) } }

/* telefon performansı (9 Ekim 2026): yapışkan çubuklarda bulanıklık ve sonsuz dönüş kapalı */
@media (hover: none), (max-width: 760px){
  .harf-nav, .harf-duvar{ backdrop-filter: none; background: rgba(7,13,31,.98) }
  .ok-halka.ince, .ok-yansima{ animation: none }
}

/* OptiSmart'tan gelince geri dönüş düğmesi */
.donus-optismart{ position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #10204A; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 10px 28px -10px rgba(0,0,0,.55); cursor: pointer }
.donus-optismart:focus-visible{ outline: 3px solid #E9CF8A; outline-offset: 2px }