/* ==========================================================================
   CSKPEDIA — muhur.css  ·  "Signature Mühür"
   Halka açık vitrin sayfaları: ana sayfa, OPTIVERA tanıtımı ve alt
   sayfaları, CSKDINE / PASTORIA / CSKBOOKPEDIA tanıtımları, 404.

   Fikir: her sistem darphaneden çıkmış bir madalyon. Zemin gece laciverti
   taş; altın yalnız metal yüzeylerde (madalyon kenarı, plaket düğme, eksen
   çizgisi). Müşterinin 3D logoları fildişi mine yüzlerde durur — logoların
   beyaz zemini "multiply" ile mineye karışır, kesim izi kalmaz.

   Durum dili (dürüst durum ilkesi):
     .muhur.basili  → basılmış altın mühür   (Kullanımda / Açılıyor)
     .muhur.kor     → kör kabartma, renksiz  (Yakında)

   Bu dosya tek başına yeterli: base.css / cskpedia.css YÜKLENMEZ.
   Panel ve hesap sayfaları cskpedia.css + hesap.css ile kalır.
   ========================================================================== */

:root{
  --tas:        #070D1F;   /* gece taşı — sayfa zemini */
  --tas-2:      #0B1530;   /* yükseltilmiş taş */
  --tas-3:      #111D3D;
  --lacivert:   #0C205B;   /* logolardan ölçülen aile laciverti */
  --altin-koyu: #8C6A24;
  --altin:      #C9A24A;
  --altin-acik: #E9CF8A;
  --altin-isik: #F6E7BE;
  --mine:       #F4EFE4;   /* fildişi mine — madalyon yüzü, plaket */
  --mine-2:     #E7DEC9;
  --yazi:       #EFEAE0;   /* taş üstünde gövde — 15.9:1 */
  --yazi-2:     #BDB7AA;   /* açıklama — 9.4:1 */
  --yazi-3:     #9A958B;   /* not — 6.3:1 */
  --cizgi:      rgba(233,207,138,.18);
  --cizgi-guclu:rgba(233,207,138,.42);
  --murekkep:   #101828;   /* mine üstünde yazı */

  /* sistem kimlikleri — yalnız madalyon kenarındaki ince halkada ve adda */
  --optivera:   #2F55D4;
  --cskbook:    #F0A23A;
  --cskdine:    #FC5E30;
  --pastoria:   #B5733A;

  --font-baslik: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-marka:  "Outfit", "Manrope", system-ui, sans-serif;
  --font-govde:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --kenar:    clamp(20px, 4.4vw, 64px);
  --genislik: clamp(1240px, 82vw, 1520px);
  --bolum:    clamp(96px, 12vw, 168px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* fırçalanmış pirinç — madalyon kenarı ve plaket düğmeler */
  --pirinc: conic-gradient(from 210deg,
              #7A5A1C, #D9B862 12%, #F7E6B5 20%, #B88E36 32%, #6E5016 45%,
              #C9A24A 58%, #F3DFA6 68%, #A57E2C 80%, #7A5A1C);
  --pirinc-duz: linear-gradient(180deg, #F3DFA6 0%, #D6B45E 38%, #B88E36 72%, #9C7628 100%);
  /* mat bronz — "yakında" madalyonların işlenmemiş kenarı */
  --bronz: conic-gradient(from 210deg,
              #2A2416, #5A4C2E 18%, #3A3220 40%, #4C4128 62%, #2A2416);

  color-scheme: dark;
}

/* --- temel ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box }
[hidden]{ display: none !important }   /* düğmelerin display kuralı hidden'ı ezmesin */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #070D1F }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth } }

body.muhur-sayfa{
  margin: 0;
  min-height: 100vh;
  background-color: var(--tas);
  /* Taş: üstten düşen sıcak ışık + çok ince tane. Dekor değil, malzeme. */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -8%, rgba(233,207,138,.11), 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;
  color: var(--yazi);
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
:where(.muhur-sayfa) img{ display: block; max-width: 100%; height: auto }
:where(.muhur-sayfa) a{ color: inherit; text-decoration: none }
.muhur-sayfa p a, .muhur-sayfa dd a{
  color: var(--altin-acik); text-decoration: underline;
  text-decoration-color: rgba(233,207,138,.45); text-underline-offset: 3px;
}
.muhur-sayfa p a:hover, .muhur-sayfa dd a:hover{ text-decoration-color: var(--altin-acik) }
:where(.muhur-sayfa) :is(h1, h2, h3){ margin: 0; text-wrap: balance }
:where(.muhur-sayfa) p{ margin: 0; text-wrap: pretty }
.muhur-sayfa ::selection{ background: rgba(233,207,138,.32); color: #FFFFFF }
.muhur-sayfa :focus-visible{
  outline: 2px solid var(--altin-acik); outline-offset: 3px; border-radius: 6px;
}
.muhur-sayfa{ scrollbar-color: #3A3424 var(--tas) }
.muhur-sayfa ::-webkit-scrollbar{ width: 12px }
.muhur-sayfa ::-webkit-scrollbar-track{ background: var(--tas) }
.muhur-sayfa ::-webkit-scrollbar-thumb{ background: #2E2A1E; border: 3px solid var(--tas); border-radius: 8px }

.muhur-sayfa .atla{
  position: absolute; left: 12px; top: -64px; z-index: 80;
  background: var(--mine); color: var(--murekkep);
  padding: 10px 14px; border-radius: 8px; font-weight: 700; font-size: 14px;
}
.muhur-sayfa .atla:focus{ top: 12px }

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

.ic{ width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto }


/* ==========================================================================
   BAŞLIK ÇUBUĞU — fildişi plaket logolu
   ========================================================================== */
.ust{
  position: relative; z-index: 20;
  padding-block: 18px;
}
.ust-ic{
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
}

/* Plaket: mine yüz + pirinç çerçeve. İçinde 3D amblem ve yazı. */
.plaket{
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FBF8F1, var(--mine) 60%, var(--mine-2));
  box-shadow:
    0 0 0 1px rgba(140,106,36,.55),
    0 0 0 3px rgba(233,207,138,.22),
    0 14px 28px -14px rgba(0,0,0,.75),
    inset 0 1px 0 #FFFFFF;
  transition: transform 220ms var(--ease-out);
}
.plaket img{ width: 46px; height: auto; mix-blend-mode: multiply }
.plaket .kelime{
  font-family: var(--font-marka); font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; line-height: 1;
}
.kelime .n{ color: var(--lacivert) }
.kelime .t{ color: #A9811F }   /* logodaki altın, mine üstünde 4.6:1 */
@media (hover: hover) and (pointer: fine){
  .plaket:hover{ transform: translateY(-1px) }
}

.ust-nav{ display: flex; gap: 26px; margin-left: 12px }
.ust-nav a{
  font-family: var(--font-marka); font-weight: 500; font-size: 14.5px;
  color: var(--yazi-2); padding-block: 8px;
  background: linear-gradient(var(--altin-acik), var(--altin-acik)) no-repeat 0 100% / 0 1px;
  transition: color 160ms ease, background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .ust-nav a:hover{ color: var(--yazi); background-size: 100% 1px }
}

.uyelik-yeri{ margin-left: auto }
.ust-bar{ display: flex; gap: 10px; align-items: center }
.ust-dugme{
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border-radius: 999px; font-family: var(--font-marka); font-weight: 600; font-size: 14px;
  color: var(--yazi); box-shadow: inset 0 0 0 1px var(--cizgi-guclu);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.ust-dugme.birincil{
  background: var(--pirinc-duz); color: #1B1405;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px -10px rgba(0,0,0,.8);
}
@media (hover: hover) and (pointer: fine){
  .ust-dugme:hover{ background-color: rgba(233,207,138,.08) }
  .ust-dugme.birincil:hover{ filter: brightness(1.06) }
}
.ust-dugme:active{ transform: scale(.97) }

.geri-bag{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-marka); font-weight: 600; font-size: 14px; color: var(--yazi-2);
  min-height: 44px; padding: 0 4px;
}
.geri-bag svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transform: scaleX(-1) }
@media (hover: hover) and (pointer: fine){ .geri-bag:hover{ color: var(--altin-acik) } }

/* Telefonda menü gizlenmez: başlığın altında yatay kaydırılan şerit (OptiLens handoff'u §2) */
.dil-yeri{ margin-left: 4px }
@media (max-width: 460px){
  .ust .ust-ic{ column-gap: 6px }
  .ust-ic .ust-bar{ gap: 6px }
  .ust-ic .ust-dugme{ padding: 0 10px; font-size: 13px; min-height: 44px }
  .dil-yeri{ margin-left: 0 }
  .dil-yeri .dil-dugme svg{ display: none }
  .dil-yeri .dil-dugme{ padding: 0 8px }
}
.ust-nav a, .ust-dugme{ white-space: nowrap }
/* OptiLens menüde OPTIVERA'nın altında: köşe çizgisiyle bağlı alt bağlantı. */
.nav-grup{ display: inline-flex; align-items: center; gap: 12px; flex: none }
.ust-nav .nav-alt{ position: relative; padding-left: 14px; font-size: 13.5px; color: var(--yazi-3) }
.ust-nav .nav-alt::before{
  content: ""; position: absolute; left: 0; top: calc(50% - 8px); width: 8px; height: 8px;
  border-left: 1px solid var(--altin); border-bottom: 1px solid var(--altin); border-bottom-left-radius: 3px; opacity: .8;
}
@media (max-width: 1180px){
  .ust-ic{ flex-wrap: wrap; row-gap: 10px }
  .ust-nav{ order: 3; flex: 1 0 100%; margin: 0; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent) }
  .ust-nav::-webkit-scrollbar{ display: none }
  .ust-nav a{ flex: none; min-height: 44px; display: inline-flex; align-items: center; padding-block: 0 }
}
@media (max-width: 460px){
  .ust-ic{ gap: 12px }
  .plaket{ padding: 5px 12px 5px 6px; gap: 7px }
  .plaket img{ width: 36px }
  .plaket .kelime{ font-size: 18px }
  .ust-dugme{ padding: 0 12px; font-size: 13.5px }
  .ust-bar{ gap: 6px }
}


/* ==========================================================================
   DÜĞMELER — pirinç plaket ve çerçeveli ikincil
   ========================================================================== */
.eylemler{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px }

.dugme-ana, .dugme-ikinci{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 10px;
  font-family: var(--font-marka); font-size: 16px; font-weight: 600; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), filter 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.dugme-ana{
  color: #1B1405;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    var(--pirinc-duz);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(92,66,16,.45),
    0 16px 30px -16px rgba(0,0,0,.9);
}
.dugme-ana svg, .dugme-ikinci svg{
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--ease-out);
}
.dugme-ikinci{
  color: var(--yazi);
  box-shadow: inset 0 0 0 1px var(--cizgi-guclu);
}
@media (hover: hover) and (pointer: fine){
  .dugme-ana:hover{ filter: brightness(1.07) saturate(1.05) }
  .dugme-ana:hover svg, .dugme-ikinci:hover svg{ transform: translateX(3px) }
  .dugme-ikinci:hover{ background-color: rgba(233,207,138,.07); box-shadow: inset 0 0 0 1px var(--altin-acik) }
}
.dugme-ana:active, .dugme-ikinci:active{ transform: scale(.97) }
@media (max-width: 640px){
  .eylemler{ flex-direction: column; align-items: stretch }
  .dugme-ana, .dugme-ikinci{ width: 100% }
}


/* ==========================================================================
   MADALYON — imza bileşen
   Kenar fırçalanmış pirinç (yakında olanda mat bronz), ince oluk, mine yüz.
   --boy ile ölçeklenir. İçindeki logo multiply ile mineye karışır.
   ========================================================================== */
.madalyon{
  --boy: 180px;
  --kenar-k: calc(var(--boy) * .055);
  position: relative; display: block;
  width: var(--boy); aspect-ratio: 1;
  border-radius: 50%;
  padding: var(--kenar-k);
  background: var(--pirinc);
  box-shadow:
    0 calc(var(--boy) * .14) calc(var(--boy) * .22) calc(var(--boy) * -.1) rgba(0,0,0,.85),
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(60,40,8,.55);
  flex: none;
}
/* oluk + kazınmış iç halka */
.madalyon::before{
  content: ""; position: absolute; inset: calc(var(--kenar-k) - 1px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(60,40,8,.65), inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events: none; z-index: 2;
}
.madalyon .yuz{
  position: relative; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 38% 30%, #FFFDF8 0%, var(--mine) 46%, var(--mine-2) 100%);
  box-shadow: inset 0 3px 8px rgba(60,40,8,.35), inset 0 -2px 4px rgba(255,255,255,.7);
}
/* sistem rengi: yüzün kenarında ince bir iç halka */
.madalyon .yuz::after{
  content: ""; position: absolute; inset: calc(var(--boy) * .035);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--renk, var(--altin)) 55%, transparent);
  pointer-events: none;
}
.madalyon .yuz img{
  width: 68%; height: auto; mix-blend-mode: multiply;
  transform: translateY(2%);
}
/* koyu rozetli yüz (CSK Dine "Sandalyen Hazır." rozeti) */
.madalyon.koyu-yuz .yuz{ background: #050505 }
.madalyon.koyu-yuz .yuz img{ width: 104%; max-width: none; mix-blend-mode: normal; transform: none }
.madalyon.koyu-yuz .yuz::after{ display: none }

/* yakında: işlenmemiş bronz kenar, yüz hafif solgun */
.madalyon.yakinda{ background: var(--bronz) }
.madalyon.yakinda .yuz img{ filter: saturate(.82) }

/* MÜHÜR — madalyonun sağ altına basılmış küçük durum mührü.
   Metin daire üstüne SVG textPath ile yazılır; okunur ad gizli metinde. */
.muhur{
  --m: 92px;
  position: absolute; right: -10%; bottom: -6%;
  width: var(--m); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  z-index: 3;
  transform: rotate(-12deg);
}
.muhur svg{ width: 100%; height: 100%; overflow: visible }
.muhur text{
  font-family: var(--font-marka); font-weight: 700; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase;
}
.muhur.basili{
  background:
    radial-gradient(circle at 35% 30%, #FFF4D2, #E2C376 40%, #B48A33 78%, #8C6A24);
  box-shadow:
    0 10px 18px -8px rgba(0,0,0,.8),
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(80,56,12,.6);
}
.muhur.basili text{ fill: #2A1E05 }
.muhur.basili .halka{ stroke: rgba(42,30,5,.55) }
.muhur.basili .merkez{ fill: #2A1E05 }
.muhur.kor{
  background: radial-gradient(circle at 35% 30%, #1C2747, #0E1731 70%);
  box-shadow:
    0 10px 18px -8px rgba(0,0,0,.8),
    inset 1px 1px 1px rgba(255,255,255,.14),
    inset -1px -2px 2px rgba(0,0,0,.6);
}
.muhur.kor text{ fill: #A9A49A }
.muhur.kor .halka{ stroke: rgba(233,207,138,.28) }
.muhur.kor .merkez{ fill: #A9A49A }
.muhur .halka{ fill: none; stroke-width: 1 }

/* basılma hareketi: önce yukarıda ve büyük, sonra yerine oturur */
@media (prefers-reduced-motion: no-preference){
  .muhur.bekliyor{ opacity: 0; transform: rotate(-12deg) scale(1.6) }
  .muhur{ transition: opacity 260ms ease-out, transform 520ms cubic-bezier(.2,1.25,.4,1) }
  .istasyon .no{ transition: opacity 260ms ease-out, transform 520ms cubic-bezier(.2,1.25,.4,1) }
  .istasyon .no.bekliyor{ opacity: 0; transform: scale(1.7) }

  /* açılış: yaydaki madalyonlar darphaneden sırayla çıkar — önce parlak ve
     büyük, sonra yerine oturur. OPTIVERA önce. */
  /* backwards: bitince dönüşü JS'teki 3D eğilmeye bırakır */
  .yay .madalyon{ animation: darp 1100ms var(--ease-out) backwards }
  .yay .bas .madalyon{ animation-delay: 80ms }
  .yay .y1 .madalyon{ animation-delay: 380ms }
  .yay .y2 .madalyon{ animation-delay: 520ms }
  .yay .y3 .madalyon{ animation-delay: 660ms }
  .yay .muhur{ animation: damga 560ms cubic-bezier(.2,1.25,.4,1) both }
  .yay .bas .muhur{ animation-delay: 900ms }
  .yay .y1 .muhur, .yay .y2 .muhur, .yay .y3 .muhur{ animation-delay: 1150ms }
  @keyframes darp{
    from{ opacity: 0; transform: translateY(22px) scale(.92); filter: brightness(1.7) saturate(1.2) }
    60% { opacity: 1; filter: brightness(1.12) }
    to  { opacity: 1; transform: none; filter: none }
  }
  @keyframes damga{
    from{ opacity: 0; transform: rotate(-12deg) scale(1.7) }
    to  { opacity: 1; transform: rotate(-12deg) scale(1) }
  }
}


/* ==========================================================================
   ANA SAYFA — KAPAK
   ========================================================================== */
.kapak{
  position: relative; isolation: isolate;
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center; gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 120px);
  min-height: clamp(640px, calc(100svh - 90px), 1080px);
  /* imleç derinliği: -1..1 (muhur.js §4b); katmanlar farklı hızla kayar */
  --px: 0; --py: 0;
}
.kapak h1{
  font-family: var(--font-baslik); font-weight: 600;
  font-size: clamp(36px, 4.4vw, 90px); line-height: 1.04; letter-spacing: .005em;
  color: var(--mine);
  max-width: 15ch; text-wrap: balance;
}
.kapak h1 em{
  font-style: normal; color: var(--altin-acik);
}
.kapak-ozet{
  margin-top: 26px; max-width: 46ch;
  font-size: clamp(17px, 1.1vw, 21px); line-height: 1.6; color: var(--yazi-2);
}
.kapak-ozet b{ color: var(--yazi); font-weight: 700 }
.kapak .eylemler{ margin-top: 36px }
.kapak-not{ margin-top: 18px; font-size: 14px; color: var(--yazi-3) }

/* madalyon yayı — OPTIVERA önde, diğerleri öncelik sırasıyla arkada */
.yay{
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%; max-width: clamp(560px, 40vw, 800px); justify-self: center;
}
.yay::before{   /* asıldıkları taş nişin ışığı */
  content: ""; position: absolute; inset: 6% 6% 0;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(ellipse at 50% 42%, rgba(233,207,138,.16), transparent 66%);
}
.yay .madalyon{ position: absolute }
.yay a{ display: block; border-radius: 50%; position: absolute; transition: transform 300ms var(--ease-out) }
.yay a:focus-visible{ outline-offset: 6px; border-radius: 50% }
@media (hover: hover) and (pointer: fine){
  .yay a:hover{ transform: translateY(-6px) }
}
.yay .bas{ left: 50%; top: 44%; translate: -50% -50% }
.yay .bas .madalyon{ position: relative; --boy: clamp(230px, 22vw + 30px, 440px) }
.yay .yan{ --boy: clamp(104px, 8vw + 32px, 184px) }
.yay .y1{ left: -5%; top: 3% }
.yay .y2{ right: -5%; top: 3% }
/* PASTORIA ayrı sistem değil, CSKDINE'ın hizmeti (16 Ekim 2026): CSKDINE'ın altında küçük uydu */
.yay .y3{ right: 1%; top: 38% }
.yay .y1 .madalyon, .yay .y2 .madalyon{ position: relative; --boy: clamp(104px, 8vw + 32px, 184px) }
.yay .y3 .madalyon{ position: relative; --boy: clamp(62px, 4vw + 22px, 104px) }
.yay .y3 .ad{ font-size: 11px }
.yay .y1 .muhur, .yay .y2 .muhur{ --m: 50px; right: -18%; bottom: -10% }
.yay .y3 .muhur{ display: none }
.yay .y1 .muhur text, .yay .y2 .muhur text, .yay .y3 .muhur text{ font-size: 14px; letter-spacing: .12em }
.yay .ad{
  position: absolute; left: 50%; top: 100%; translate: -50% 10px;
  font-family: var(--font-baslik); font-weight: 600; font-size: 12.5px; letter-spacing: .14em;
  color: var(--yazi-2); white-space: nowrap;
  z-index: 3; text-shadow: 0 1px 2px var(--tas), 0 0 14px var(--tas);
}
.yay .y1, .yay .y2, .yay .y3{ z-index: 2 }
.yay .bas .ad{ font-size: 15px; color: var(--altin-acik); translate: -50% 16px }

@media (max-width: 900px){
  .kapak{ grid-template-columns: 1fr; min-height: 0; padding-top: 24px; text-align: left }
  .yay{ max-width: 440px; margin-top: 8px }
}
/* telefonda yay düzleşir: OPTIVERA üstte büyük, diğerleri altında sıra (PASTORIA küçük, CSKDINE'ın yanında) */
@media (max-width: 600px){
  .yay{
    aspect-ratio: auto; max-width: 380px;
    display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 56px; justify-items: center;
    padding: 12px 0 34px;
  }
  .yay a, .yay .bas, .yay .y1, .yay .y2, .yay .y3{ position: relative; inset: auto; translate: none }
  .yay .bas{ grid-column: 1 / -1 }
  .yay .bas .madalyon{ --boy: 236px }
  .yay .y1 .madalyon, .yay .y2 .madalyon{ --boy: 92px }
  .yay .y3 .madalyon{ --boy: 64px }
  .yay .y3{ align-self: center }
  .yay .y1 .muhur, .yay .y2 .muhur, .yay .y3 .muhur{ display: none }
  .yay .ad{ font-size: 11.5px }
  .sira-satir .madalyon .muhur, .tanitim-bas .madalyon .muhur{ --m: 58px; right: -8%; bottom: -8% }
  .muhur text{ font-size: 12px }
}


/* ==========================================================================
   EKSEN — sayfayı ortadan bölen ince altın çizgi (Versay ekseni)
   ========================================================================== */
.eksen{
  display: block; width: 1px; height: clamp(64px, 9vw, 120px); margin: 0 auto;
  background: linear-gradient(var(--altin), transparent);
  opacity: .7;
}


/* ==========================================================================
   BÖLÜM BAŞLIKLARI
   ========================================================================== */
.bolum{ padding-block: var(--bolum) 0 }
.bolum-bas{ max-width: 760px }
.bolum-bas.orta{ margin-inline: auto; text-align: center }
.bolum-bas h2{
  font-family: var(--font-baslik); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: .01em;
  color: var(--mine);
}
.bolum-bas p{ margin-top: 18px; font-size: 17.5px; color: var(--yazi-2); max-width: 60ch }
.bolum-bas.orta p{ margin-inline: auto }


/* ==========================================================================
   VİTRİN — ana sayfadaki OPTIVERA bölümü: büyük mağaza görseli + yanında
   madalyon ve açıklama. Görsel taş çerçeve içinde, altında künye.
   ========================================================================== */
.vitrin{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 64px);
}
.cerceve{
  position: relative; margin: 0;
  border-radius: 14px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(233,207,138,.30),
    0 0 0 7px rgba(7,13,31,.9),
    0 0 0 8px rgba(233,207,138,.18),
    0 40px 80px -36px rgba(0,0,0,.95);
}
.cerceve img{ width: 100%; height: 100%; object-fit: cover }
.cerceve figcaption, .kunye{
  position: absolute; left: 14px; bottom: 14px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(7,13,31,.78); backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--yazi-2);
}
.vitrin-yazi .madalyon{ --boy: 128px; margin-bottom: 26px }
.vitrin-yazi h3{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15; color: var(--mine);
}
.vitrin-yazi > p{ margin-top: 16px; color: var(--yazi-2); font-size: 17px; max-width: 46ch }
.vitrin-yazi .eylemler{ margin-top: 30px }
@media (max-width: 900px){ .vitrin{ grid-template-columns: 1fr } }

/* katman listesi — altın noktalı satırlar */
.katman-liste{ list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--cizgi) }
.katman-liste li{ border-bottom: 1px solid var(--cizgi) }
.katman-liste a, .katman-liste .satir{
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 16px 2px; min-height: 60px;
}
.katman-liste b{ display: block; font-family: var(--font-marka); font-weight: 600; font-size: 17px; color: var(--yazi) }
.katman-liste small{ display: block; margin-top: 2px; font-size: 14.5px; color: var(--yazi-3) }
.katman-liste svg{ width: 18px; height: 18px; fill: none; stroke: var(--altin); stroke-width: 1.8; transition: transform 220ms var(--ease-out) }
@media (hover: hover) and (pointer: fine){
  .katman-liste a:hover b{ color: var(--altin-acik) }
  .katman-liste a:hover svg{ transform: translateX(4px) }
}


/* ==========================================================================
   SİSTEM SIRASI — diğer üç sistem, öncelik sırasıyla. Her satır: madalyon
   + ad + açıklama + bağlantı. Eksen ortadan geçer; satırlar sağa-sola.
   ========================================================================== */
.sira{ list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; gap: clamp(56px, 7vw, 96px) }
.sira-satir{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: 100%; max-width: 960px; margin-inline: auto;
}
.sira-satir:nth-child(even){ grid-template-columns: minmax(0, 1fr) auto }
.sira-satir .muhur{ --m: 70px }
.sira-satir:nth-child(even) .madalyon{ order: 2 }
.sira-satir .madalyon{ --boy: clamp(150px, 16vw, 210px) }
.sira-satir h3{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: .04em; color: var(--mine);
}
.sira-satir .sektor{
  margin-top: 4px; font-family: var(--font-marka); font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--renk-metin, var(--altin));
}
.sira-satir .tanim{ margin-top: 16px; color: var(--yazi-2); font-size: 16.5px; max-width: 54ch }
.sira-satir ul{ margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--yazi-2); font-size: 15.5px }
.sira-satir li{ display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline }
.sira-satir li::before{
  content: ""; width: 7px; height: 7px; transform: rotate(45deg) translateY(-2px);
  background: var(--altin); border-radius: 1px;
}
.sira-satir .oku{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 44px;
  font-family: var(--font-marka); font-weight: 600; font-size: 15px; color: var(--altin-acik);
}
.sira-satir .oku svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; transition: transform 220ms var(--ease-out) }
@media (hover: hover) and (pointer: fine){ .sira-satir .oku:hover svg{ transform: translateX(4px) } }
@media (max-width: 720px){
  .sira-satir, .sira-satir:nth-child(even){ grid-template-columns: 1fr }
  .sira-satir:nth-child(even) .madalyon{ order: 0 }
  .sira-satir .madalyon{ --boy: 150px }
}


/* ==========================================================================
   VERİ BANDI — lacivert mine plaka üzerinde üç ilke
   ========================================================================== */
.veri{
  margin-top: var(--bolum);
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(233,207,138,.10), transparent 60%),
    linear-gradient(180deg, #0E2266, var(--lacivert));
  border-block: 1px solid rgba(233,207,138,.28);
}
.veri-ic{
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(72px, 9vw, 128px);
}
.veri h2{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.12; color: var(--mine);
}
.veri-ic > div > p{ margin-top: 18px; color: #C9CFE3; max-width: 40ch }
.ilkeler{ margin: 0; display: grid; gap: 0 }
.ilkeler > div{ padding: 22px 0; border-top: 1px solid rgba(233,207,138,.25) }
.ilkeler > div:last-child{ border-bottom: 1px solid rgba(233,207,138,.25) }
.ilkeler dt{ font-family: var(--font-marka); font-weight: 600; font-size: 18px; color: #FFFFFF }
.ilkeler dd{ margin: 6px 0 0; color: #C9CFE3; font-size: 15.5px; max-width: 58ch }
.ilkeler dd a{ color: var(--altin-isik) }
@media (max-width: 900px){ .veri-ic{ grid-template-columns: 1fr } }


/* ==========================================================================
   KAPANIŞ
   ========================================================================== */
.kapanis{
  width: min(820px, 100% - 2 * var(--kenar)); margin-inline: auto;
  padding-block: var(--bolum); text-align: center;
  display: grid; justify-items: center;
}
.kapanis .madalyon{ --boy: 112px; margin-bottom: 30px }
.kapanis h2{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.1; color: var(--mine);
}
.kapanis p{ margin-top: 18px; color: var(--yazi-2); font-size: 17px; max-width: 52ch }
.kapanis .eylemler{ margin-top: 34px; justify-content: center }
@media (max-width: 640px){ .kapanis .eylemler{ width: 100% } }


/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.alt{
  border-top: 1px solid var(--cizgi);
  padding-block: 40px 48px;
}
.alt-ic{
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px;
}
.alt .slogan{
  font-family: var(--font-baslik); font-weight: 500; font-size: 13px; letter-spacing: .22em;
  color: var(--altin);
}
.alt-nav{ margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 24px }
.alt-nav a{ font-size: 14.5px; color: var(--yazi-2); min-height: 44px; display: inline-flex; align-items: center }
@media (hover: hover) and (pointer: fine){ .alt-nav a:hover{ color: var(--altin-acik) } }
@media (max-width: 640px){ .alt-nav{ margin-left: 0 } }


/* ==========================================================================
   TANITIM SAYFALARI (optivera/*, cskdine/tanitim, pastoria, cskbook)
   Başlıkta madalyon + kazınmış ad + mühür; altında bölümler.
   ========================================================================== */
.tanitim-bas{
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto;
  padding-block: clamp(32px, 5vw, 72px) 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.tanitim-bas .madalyon{ --boy: clamp(150px, 17vw, 220px) }
.tanitim-bas .muhur{ --m: 78px }
.tanitim-bas h1{
  font-family: var(--font-baslik); font-weight: 600;
  font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: .03em; color: var(--mine);
}
.ust-sistem{
  margin-top: 8px; font-family: var(--font-marka); font-weight: 600; font-size: 13.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--altin);
}
.tanitim-ozet{
  margin-top: 20px; max-width: 58ch; font-size: clamp(17px, 1.3vw, 19px); color: var(--yazi-2);
}
@media (max-width: 720px){
  .tanitim-bas{ grid-template-columns: 1fr }
  .tanitim-bas .madalyon{ --boy: 150px }
}

.tanitim-bolum{
  width: min(980px, 100% - 2 * var(--kenar)); margin-inline: auto;
  padding-top: clamp(72px, 9vw, 120px);
}
.tanitim-bolum > h2{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.15; color: var(--mine);
  display: flex; align-items: center; gap: 18px;
}
.tanitim-bolum > h2::after{
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cizgi-guclu), transparent);
}
.tanitim-bolum > p{ margin-top: 16px; color: var(--yazi-2); max-width: 64ch }

/* özellik tablosu — altın noktalı yönlendirme */
.ozellikler{ margin: 28px 0 0; display: grid }
.ozellikler > div{
  display: grid; grid-template-columns: minmax(170px, 15rem) minmax(0, 1fr); gap: 8px 28px;
  padding: 18px 0; border-bottom: 1px solid var(--cizgi);
}
.ozellikler > div:first-child{ border-top: 1px solid var(--cizgi) }
.ozellikler dt{ font-family: var(--font-marka); font-weight: 600; font-size: 16.5px; color: var(--yazi) }
.ozellikler dd{ margin: 0; color: var(--yazi-2); font-size: 15.5px }
@media (max-width: 640px){ .ozellikler > div{ grid-template-columns: 1fr } }

.mini-yakinda, .mini-canli{
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-marka); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: 2px;
}
.mini-yakinda{ color: var(--yazi-3); box-shadow: inset 0 0 0 1px rgba(233,207,138,.3) }
.mini-canli{ color: #1B1405; background: var(--pirinc-duz) }

/* dikey adımlar — eksen boyunca istasyonlar */
.adimlar{ list-style: none; margin: 32px 0 0; padding: 0; position: relative; display: grid; gap: 0 }
.adimlar li{
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px;
  padding-bottom: 30px;
}
.adimlar li::before{
  content: ""; position: absolute; left: 27px; top: 54px; bottom: 4px; width: 1px;
  background: linear-gradient(var(--cizgi-guclu), rgba(233,207,138,.08));
}
.adimlar li:last-child::before{ display: none }
.adim-no{
  grid-row: span 2;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-baslik); font-weight: 700; font-size: 19px; color: #2A1E05;
  background: radial-gradient(circle at 35% 30%, #FFF4D2, #E2C376 40%, #B48A33 78%, #8C6A24);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 3px rgba(80,56,12,.6);
}
.adimlar h3{ font-family: var(--font-marka); font-weight: 600; font-size: 18.5px; color: var(--yazi); padding-top: 13px }
.adimlar p{ margin-top: 6px; color: var(--yazi-2); font-size: 15.5px; max-width: 58ch }

/* not kutusu — mine yüzlü plaka */
.not-kutu{
  margin-top: 26px; padding: 22px 24px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.025));
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
.not-kutu b{ display: block; font-family: var(--font-marka); font-weight: 600; font-size: 17px; color: var(--altin-acik) }
.not-kutu p{ margin-top: 8px; color: var(--yazi-2); font-size: 15.5px }

/* giriş karoları — tıklanamayan ad listesi */
.giris-karolari{
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi);
}
.giris-karolari li{
  padding: 18px 18px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
  font-family: var(--font-marka); font-weight: 500; font-size: 15.5px; color: var(--yazi);
}

.tanitim-kapanis{
  width: min(820px, 100% - 2 * var(--kenar)); margin-inline: auto;
  padding-block: clamp(88px, 11vw, 150px); text-align: center;
}
.tanitim-kapanis h2{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12; color: var(--mine);
}
.tanitim-kapanis p{ margin: 16px auto 0; color: var(--yazi-2); max-width: 52ch }
.tanitim-kapanis .eylemler{ margin-top: 32px; justify-content: center }


/* ==========================================================================
   OPTIVERA — imza sayfa
   ========================================================================== */

/* sahne: tam genişlik mağaza görseli, solda koyulaşan taş */
.sahne{
  position: relative; isolation: isolate;
  min-height: min(860px, calc(100vh - 20px));
  display: grid; align-items: end;
  margin-top: -88px;   /* başlık çubuğu görselin üstünde dursun */
  padding-top: 120px;
}
.sahne-gorsel{ position: absolute; inset: 0; z-index: -2; margin: 0 }
.sahne-gorsel img{ width: 100%; height: 100%; object-fit: cover; object-position: 60% 45% }
.sahne::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,13,31,.96) 0%, rgba(7,13,31,.86) 30%, rgba(7,13,31,.35) 62%, rgba(7,13,31,.1) 100%),
    linear-gradient(0deg, var(--tas) 0%, rgba(7,13,31,0) 34%),
    linear-gradient(180deg, rgba(7,13,31,.85) 0%, rgba(7,13,31,0) 22%);
}
.sahne-ic{
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin-inline: auto;
  padding-bottom: clamp(56px, 7vw, 104px);
}
.sahne .madalyon{ --boy: clamp(124px, 12vw, 164px); margin-bottom: 28px }
.sahne .muhur{ --m: 62px; right: -16%; bottom: -8% }
.sahne .muhur text{ font-size: 12.5px }
.sahne h1{
  font-family: var(--font-baslik); font-weight: 600;
  font-size: clamp(40px, 5vw, 76px); line-height: 1.04; letter-spacing: .01em; color: var(--mine);
  max-width: 14ch;
}
.sahne h1 span{ display: block; color: var(--altin-acik) }
.sahne .ozet{ margin-top: 24px; max-width: 44ch; font-size: clamp(17px, 1.35vw, 19.5px); color: #D7D2C6 }
.sahne .eylemler{ margin-top: 34px }
.sahne .kunye{ left: auto; right: var(--kenar); bottom: 24px }
@media (max-width: 720px){
  .sahne{ min-height: 0; padding-top: 300px }
  .sahne::before{
    background:
      linear-gradient(0deg, var(--tas) 18%, rgba(7,13,31,.82) 52%, rgba(7,13,31,.15) 100%),
      linear-gradient(180deg, rgba(7,13,31,.8) 0%, rgba(7,13,31,0) 30%);
  }
  .sahne-gorsel img{ object-position: 70% 30%; height: 68%;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent) }
  .sahne .kunye{ top: 250px; bottom: auto; right: 16px }
}

/* yolculuk — yedi istasyon, ortadan geçen altın eksen */
.yolculuk{ position: relative; margin-top: clamp(48px, 6vw, 88px) }
.yolculuk::before{
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(transparent, var(--cizgi-guclu) 6%, var(--cizgi-guclu) 94%, transparent);
}
.istasyon{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: center; gap: 0;
  padding-block: clamp(36px, 5vw, 64px);
}
.istasyon .gorsel{ grid-column: 1; grid-row: 1 }
.istasyon .ist-yazi{ grid-column: 3; grid-row: 1 }
.istasyon:nth-child(even) .gorsel{ grid-column: 3; grid-row: 1 }
.istasyon:nth-child(even) .ist-yazi{ grid-column: 1; grid-row: 1; text-align: right; justify-self: end }
.istasyon .no{
  grid-column: 2; grid-row: 1; justify-self: center;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--font-baslik); font-weight: 700; font-size: 22px; color: #2A1E05;
  background: radial-gradient(circle at 35% 30%, #FFF4D2, #E2C376 40%, #B48A33 78%, #8C6A24);
  box-shadow: 0 0 0 8px var(--tas), 0 10px 18px -8px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 3px rgba(80,56,12,.6);
}
.ist-yazi{ max-width: 420px }
.ist-yazi h3{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: .03em; color: var(--mine);
}
.ist-yazi .alt-baslik{
  margin-top: 4px; font-family: var(--font-marka); font-weight: 600; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--altin);
}
.ist-yazi p:not(.alt-baslik){ margin-top: 14px; color: var(--yazi-2); font-size: 16.5px }
.ist-yazi .oku{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 44px;
  font-family: var(--font-marka); font-weight: 600; color: var(--altin-acik);
}
.ist-yazi .oku svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9 }
.istasyon .cerceve{ aspect-ratio: 3 / 2 }
.istasyon .ikili{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.istasyon .ikili .cerceve{ aspect-ratio: 4 / 5 }
.istasyon.kat figcaption{ left: auto; right: 14px; bottom: auto; top: 14px }
.istasyon.kat .cerceve{ aspect-ratio: 1076 / 720; background: #FFFFFF }
.istasyon.kat .cerceve img{ object-fit: contain }
@media (max-width: 820px){
  .yolculuk::before{ left: 31px }
  .istasyon, .istasyon:nth-child(even){ grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 22px }
  .istasyon .no, .istasyon:nth-child(even) .no{ grid-column: 1; grid-row: 1; align-self: start }
  .istasyon .ist-yazi, .istasyon:nth-child(even) .ist-yazi{ grid-column: 2; grid-row: 1; text-align: left; justify-self: start }
  .istasyon .gorsel, .istasyon:nth-child(even) .gorsel{ grid-column: 2; grid-row: 2 }
}

/* galeri — temsili tasarımlar; yatay kaydırmalı şerit */
.galeri{
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 400px);
  gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar);
  padding: 8px var(--kenar) 28px;
  scrollbar-width: thin;
}
.galeri .cerceve{ aspect-ratio: 4 / 5; scroll-snap-align: start }
.galeri .cerceve:nth-child(3n+2){ aspect-ratio: 4 / 5; margin-top: 36px }
.galeri-not{
  width: min(var(--genislik), 100% - 2 * var(--kenar)); margin: 6px auto 0;
  font-size: 13.5px; color: var(--yazi-3);
}

/* mağaza sistemi — üç katman madalyonları */
.katmanlar{
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px);
}
.katman{ display: grid; justify-items: center; text-align: center; align-content: start }
.katman .madalyon{ --boy: 150px; margin-bottom: 26px }
.katman .muhur{ --m: 58px; right: -12%; bottom: -8% }
.katman .muhur text{ font-size: 12.5px }
.katman h3{ font-family: var(--font-baslik); font-weight: 600; font-size: 24px; letter-spacing: .04em; color: var(--mine) }
.katman .alt-baslik{ margin-top: 4px; font-family: var(--font-marka); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--altin) }
.katman p:not(.alt-baslik){ margin-top: 12px; color: var(--yazi-2); font-size: 15.5px; max-width: 34ch }
.katman .oku{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 44px;
  font-family: var(--font-marka); font-weight: 600; color: var(--altin-acik);
}
.katman .oku svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; transition: transform 220ms var(--ease-out) }
@media (hover: hover) and (pointer: fine){ .katman .oku:hover svg{ transform: translateX(4px) } }
/* yazılı madalyon: logosu olmayan katman için kazınmış harf */
.madalyon .yuz .harf{
  font-family: var(--font-baslik); font-weight: 700; font-size: calc(var(--boy) * .12);
  letter-spacing: .04em; color: var(--lacivert); text-align: center; line-height: 1.05;
}
.madalyon .yuz .harf small{ display: block; font-size: .6em; letter-spacing: .18em; color: #6E5016; margin-top: 4px }
@media (max-width: 900px){ .katmanlar{ grid-template-columns: 1fr; gap: 56px } }

/* signature — müşterinin rozet görseli, geniş */
.imza{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.imza .cerceve{ aspect-ratio: 720 / 479 }
@media (max-width: 900px){ .imza{ grid-template-columns: 1fr } }


/* ==========================================================================
   404
   ========================================================================== */
.kayip{
  width: min(720px, 100% - 2 * var(--kenar)); margin-inline: auto;
  min-height: calc(100vh - 200px); display: grid; place-content: center; justify-items: center; text-align: center;
  padding-block: 64px;
}
.kayip .madalyon{ --boy: 150px; margin-bottom: 32px }
.kayip h1{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(34px, 4.4vw, 56px); color: var(--mine) }
.kayip p{ margin-top: 16px; color: var(--yazi-2) }
.kayip .eylemler{ margin-top: 30px; justify-content: center }


/* ==========================================================================
   Kaydırmaya bağlı yumuşak beliriş — yalnız destekleyen tarayıcıda ve
   hareket tercihi açıksa. İçerik varsayılan olarak görünür.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sira-satir, .katman, .galeri .cerceve{
      animation: belir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes belir{
      from{ opacity: .15; transform: translateY(28px); filter: blur(3px) }
      to  { opacity: 1;   transform: none;              filter: none }
    }
  }
}


/* ==========================================================================
   SİNEMATİK VİTRİN (2 Ekim 2026)
   Arkada dönen mağaza görselleri, madalyonlarda ışık, perde açılışları.
   Hepsi süs: içerik onlarsız da tam okunur. Hareket azaltmada durağan.
   ========================================================================== */

/* --- dönen arka plan (Ken Burns) ---------------------------------------
   6 kare × 7 sn = 42 sn döngü. Her kare kendi diliminde 1.6 sn'de belirir,
   yavaşça yakınlaşıp kayar, sonrakine karışarak söner. Kayma yönü her
   karede --x0/--y0 → --x1/--y1 ile farklı; aynı hareket tekrar etmez. */
.perde{ overflow: hidden; background: var(--tas) }
.perde img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 45%;
  opacity: 0;
  animation: perde-kare 42s linear infinite;
  animation-delay: calc(var(--i) * 7s);
  will-change: opacity, transform;
}
.perde img:first-child{ animation-delay: 0s }
@keyframes perde-kare{
  0%    { opacity: 0; transform: scale(1.05) translate(var(--x0), var(--y0)) }
  3.8%  { opacity: 1 }
  16.7% { opacity: 1 }
  20.5% { opacity: 0; transform: scale(1.17) translate(var(--x1), var(--y1)) }
  100%  { opacity: 0; transform: scale(1.17) translate(var(--x1), var(--y1)) }
}
/* kare ilerleme çizgisi — her 7 sn'de soldan sağa dolan ince altın tel */
.perde-ilerleme{
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--altin-acik) 30%, var(--altin) 70%, transparent);
  transform-origin: left; opacity: .55;
  animation: perde-ilerle 7s linear infinite;
}
@keyframes perde-ilerle{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }
.perde.durdu img, .perde.durdu .perde-ilerleme{ animation-play-state: paused }

/* ana sayfa: kapak arkasında tam genişlik; başlık çubuğunun altına da uzanır */
.kapak > .perde{
  position: absolute; z-index: -2;
  top: -96px; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (min-width: 901px){
  .kapak > .perde img{ scale: 1.06; translate: calc(var(--px) * -18px) calc(var(--py) * -12px); transition: translate 1400ms var(--ease-out) }
  .kapak-sol{ translate: calc(var(--px) * 6px) calc(var(--py) * 4px); transition: translate 1200ms var(--ease-out) }
  .yay .bas{ translate: calc(-50% + var(--px) * 12px) calc(-50% + var(--py) * 10px); transition: translate 1000ms var(--ease-out), transform 300ms var(--ease-out) }
  .yay .y1, .yay .y2{ translate: calc(var(--px) * 26px) calc(var(--py) * 20px); transition: translate 900ms var(--ease-out), transform 300ms var(--ease-out) }
  .yay .y3{ translate: calc(var(--px) * 22px) calc(var(--py) * 18px); transition: translate 900ms var(--ease-out), transform 300ms var(--ease-out) }
  .yay::before{ translate: calc(var(--px) * 8px) calc(var(--py) * 6px); transition: translate 1200ms var(--ease-out) }
}
.kapak > .perde::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 46% 60% at 74% 50%, rgba(7,13,31,.62), transparent 70%),
    linear-gradient(90deg, rgba(7,13,31,.95) 0%, rgba(7,13,31,.84) 36%, rgba(7,13,31,.5) 66%, rgba(7,13,31,.58) 100%),
    linear-gradient(0deg, var(--tas) 0%, rgba(7,13,31,0) 32%),
    linear-gradient(180deg, rgba(7,13,31,.8) 0%, rgba(7,13,31,0) 24%);
}
.perde-not{ display: block; margin-top: 4px }
@media (max-width: 900px){
  .kapak > .perde::after{
    background:
      linear-gradient(180deg, rgba(7,13,31,.86) 0%, rgba(7,13,31,.72) 42%, rgba(7,13,31,.42) 72%, var(--tas) 100%);
  }
}

/* --- altın toz (muhur.js çizer) --------------------------------------- */
.toz{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none }
.kapak > .toz{ top: -96px; left: 50%; width: 100vw; margin-left: -50vw; height: calc(100% + 96px) }

/* --- madalyon ışığı ----------------------------------------------------
   İki katman: fareyi izleyen yumuşak parlama (--gx/--gy, JS) ve birkaç
   saniyede bir kenardan geçen ışık şeridi. soft-light: mineyi ve pirinci
   boyamaz, yalnız aydınlatır. */
.madalyon::after{
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--gx, 32%) var(--gy, 22%), rgba(255,250,232,.7), rgba(255,250,232,0) 46%),
    linear-gradient(112deg, transparent 38%, rgba(255,251,238,.75) 50%, transparent 62%);
  background-size: 100% 100%, 320% 100%;
  background-position: 0 0, 160% 0;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  opacity: var(--go, .55);
  transition: opacity 400ms ease;
}
.madalyon.egik{ --go: .95 }
@media (prefers-reduced-motion: no-preference){
  .yay .bas .madalyon::after, .sahne .madalyon::after, .vitrin-yazi .madalyon::after,
  .kapanis .madalyon::after, .tanitim-bas .madalyon::after{
    animation: isik-gecer 7.5s cubic-bezier(.65,0,.35,1) 2.2s infinite;
  }
  .yay .y1 .madalyon::after{ animation: isik-gecer 9s cubic-bezier(.65,0,.35,1) 3.4s infinite }
  .yay .y2 .madalyon::after{ animation: isik-gecer 9s cubic-bezier(.65,0,.35,1) 5.1s infinite }
  .yay .y3 .madalyon::after{ animation: isik-gecer 9s cubic-bezier(.65,0,.35,1) 6.8s infinite }
}
@keyframes isik-gecer{
  0%   { background-position: 0 0, 160% 0 }
  18%  { background-position: 0 0, -60% 0 }
  100% { background-position: 0 0, -60% 0 }
}
/* JS eğerken madalyonun döndüğü sahne */
.madalyon{ transform-style: preserve-3d; backface-visibility: hidden }

/* --- pirinç düğmeden geçen ışık (yalnız ince işaretçide, üzerine gelince) */
.dugme-ana{ overflow: hidden; isolation: isolate }
.dugme-ana::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,252,240,.65) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .dugme-ana:hover::after{ transform: translateX(120%); transition: transform 700ms cubic-bezier(.65,0,.35,1) }
}

/* --- açılış: başlık ve metin sırayla yükselir -------------------------- */
@media (prefers-reduced-motion: no-preference){
  .kapak-sol > *, .sahne-ic > *{
    animation: yuksel 1000ms var(--ease-out) backwards;
  }
  .kapak-sol > :nth-child(1), .sahne-ic > :nth-child(1){ animation-delay: 120ms }
  .kapak-sol > :nth-child(2), .sahne-ic > :nth-child(2){ animation-delay: 260ms }
  .kapak-sol > :nth-child(3), .sahne-ic > :nth-child(3){ animation-delay: 400ms }
  .kapak-sol > :nth-child(4), .sahne-ic > :nth-child(4){ animation-delay: 540ms }
  @keyframes yuksel{
    from{ opacity: 0; transform: translateY(26px); filter: blur(6px) }
    to  { opacity: 1; transform: none; filter: none }
  }
}

/* --- perde açılışı: istasyon görselleri ortadan iki yana açılır --------
   Yalnız sayfa açıldığında ekranın altında kalanlar kapanır (muhur.js);
   son değer gölgeyi kesmesin diye dışa taşan inset. */
.istasyon .gorsel .cerceve{
  transition: clip-path 1300ms cubic-bezier(.77,0,.175,1);
  clip-path: inset(-20px -20px -100px -20px round 14px);
}
.istasyon .gorsel .cerceve img{ transition: transform 1800ms var(--ease-out), filter 1400ms ease }
.istasyon .gorsel.kapali .cerceve{ clip-path: inset(0 50% 0 50% round 14px) }
.istasyon .gorsel.kapali .cerceve img{ transform: scale(1.18); filter: brightness(1.5) }
.istasyon .gorsel .ikili .cerceve:nth-child(2){ transition-delay: 160ms }
.istasyon .gorsel .ikili .cerceve:nth-child(2) img{ transition-delay: 160ms }

/* --- eksen kaydırdıkça kendini çizer; mühür numaraları üstüne basılır -- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .yolculuk::before{
      transform-origin: top;
      animation: eksen-ciz linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 85%;
    }
    @keyframes eksen-ciz{ from{ transform: scaleY(0) } to{ transform: scaleY(1) } }

    /* ana sayfadaki büyük mağaza görseli çerçevesinde yavaş kayar */
    .vitrin .cerceve img{
      animation: icinde-kay linear both;
      animation-timeline: view();
    }
    @keyframes icinde-kay{
      from{ transform: scale(1.14) translateY(-4%) }
      to  { transform: scale(1.14) translateY(4%) }
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .perde img{ animation: none }
  .perde img:first-child{ opacity: 1 }
  .perde-ilerleme{ display: none }
  .istasyon .gorsel.kapali .cerceve{ clip-path: none }
}


/* ==========================================================================
   OPTIVERA — ALTI DEKOR MODELİ (2 Ekim 2026, müşteri handoff'u)
   Eşit önemde altı kart: 3D kapak, ad + Türkçe karşılık, açıklama, renk
   paleti, ayrıntılar, "Bu modeli seç". Seçilen kart pirinç çerçeve alır,
   altta seçim çubuğu belirir ve başvuruya modeli not olarak taşır.
   ========================================================================== */
.dekor-izgara{
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px);
}
.dekor-kart{
  position: relative; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #0F1A3A, #0B1430);
  box-shadow: 0 0 0 1px rgba(233,207,138,.20), 0 30px 60px -36px #000;
  transition: box-shadow 300ms ease, transform 400ms var(--ease-out);
}
.dekor-gorsel{ margin: 0; aspect-ratio: 496 / 320; overflow: hidden; position: relative }
.dekor-gorsel img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out) }
.dekor-gorsel::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,20,48,.9), transparent 42%);
}
.dekor-govde{ display: flex; flex-direction: column; gap: 10px; padding: 0 22px 22px; margin-top: -34px; position: relative; flex: 1 }
.dekor-kart h3{
  font-family: var(--font-baslik); font-weight: 600; font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: .1em; color: #FFFFFF;
}
.dekor-tr{ font-family: var(--font-marka); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--altin) }
.dekor-tr span{ color: var(--yazi-3); letter-spacing: .04em; text-transform: none; font-weight: 500 }
.dekor-aciklama{ color: var(--yazi-2); font-size: 15px; line-height: 1.55 }
.palet{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px }
.palet li{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--yazi-2) }
.renk-cip{
  width: 18px; height: 18px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 1px rgba(0,0,0,.4);
}
.dekor-ayrinti{ margin-top: 2px; border-top: 1px solid var(--cizgi); padding-top: 10px }
.dekor-ayrinti summary{
  cursor: pointer; list-style: none; min-height: 36px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-marka); font-weight: 600; font-size: 14px; color: var(--yazi);
}
.dekor-ayrinti summary::-webkit-details-marker{ display: none }
.dekor-ayrinti summary::after{ content: "+"; font: 400 20px/1 var(--font-marka); color: var(--altin); transition: transform 250ms var(--ease-out) }
.dekor-ayrinti[open] summary::after{ transform: rotate(45deg) }
.dekor-ayrinti dl{ margin: 6px 0 0; display: grid; gap: 8px }
.dekor-ayrinti dt{ font-family: var(--font-marka); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--altin) }
.dekor-ayrinti dd{ margin: 2px 0 0; font-size: 14.5px; color: var(--yazi-2) }
.dekor-sec{
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px;
  font-family: var(--font-marka); font-weight: 600; font-size: 14.5px; color: var(--yazi);
  box-shadow: inset 0 0 0 1px var(--cizgi-guclu);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 160ms var(--ease-out);
}
.dekor-sec svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; transition: transform 220ms var(--ease-out) }
.dekor-sec:active{ transform: scale(.97) }
.dekor-ayrinti + .dekor-sec{ margin-top: 12px }

/* seçili kart: pirinç çerçeve + mühür */
.dekor-kart.secili{
  box-shadow: 0 0 0 2px #D6B45E, 0 0 0 8px rgba(7,13,31,.9), 0 0 0 9px rgba(233,207,138,.35), 0 40px 70px -30px #000;
}
.dekor-kart.secili .dekor-sec{ background: var(--pirinc-duz); color: #1B1405; box-shadow: none }
.dekor-kart.secili::before{
  content: "SEÇİLDİ"; position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 999px; transform: rotate(-6deg);
  font: 700 11px/1 var(--font-marka); letter-spacing: .2em; color: #2A1E05;
  background: radial-gradient(circle at 35% 30%, #FFF4D2, #E2C376 45%, #B48A33);
  box-shadow: 0 8px 16px -8px #000;
}

@media (hover: hover) and (pointer: fine){
  .dekor-kart:hover{ transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(233,207,138,.45), 0 40px 70px -34px #000 }
  .dekor-kart:hover .dekor-gorsel img{ transform: scale(1.06) }
  .dekor-sec:hover{ background-color: rgba(233,207,138,.08) }
  .dekor-sec:hover svg{ transform: translateX(3px) }
}
@media (max-width: 980px){ .dekor-izgara{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .dekor-izgara{ grid-template-columns: 1fr } }

/* kaydırdıkça kartlar sırayla yükselir */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .dekor-kart{ animation: belir linear both; animation-timeline: view(); animation-range: entry 0% entry 45% }
  }
}

/* kendi dekorunu tasarla — akış şeridi */
.kendi-dekor{
  margin-top: clamp(56px, 7vw, 96px); padding: clamp(24px, 3vw, 40px); border-radius: 18px;
  background: linear-gradient(135deg, rgba(233,207,138,.08), rgba(233,207,138,.02));
  box-shadow: inset 0 0 0 1px var(--cizgi);
  display: grid; gap: 24px;
}
.kendi-dekor h3{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); color: var(--mine) }
.kendi-dekor > div > p{ margin-top: 8px; color: var(--yazi-2) }
.akis-serit{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: ad }
.akis-serit li{ position: relative; padding: 46px 14px 0 0; counter-increment: ad }
.akis-serit li::before{
  content: counter(ad); position: absolute; left: 0; top: 0; width: 34px; height: 34px; 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);
}
.akis-serit li::after{
  content: ""; position: absolute; left: 42px; right: 8px; top: 17px; height: 1px;
  background: linear-gradient(90deg, var(--cizgi-guclu), transparent);
}
.akis-serit li:last-child::after{ display: none }
.akis-serit b{ display: block; font-family: var(--font-marka); font-weight: 600; color: var(--yazi) }
.akis-serit span{ display: block; margin-top: 4px; font-size: 14px; color: var(--yazi-2) }
.kendi-dekor-not{ color: var(--yazi-2); font-size: 15px }
.kendi-dekor-not .mini-yakinda{ margin: 0 8px 0 0 }
.kendi-dekor-eylem{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px }
.kendi-dekor-eylem .kendi-dekor-not{ flex: 1 1 320px; max-width: 62ch }
@media (max-width: 820px){
  .akis-serit{ grid-template-columns: 1fr; gap: 16px }
  .akis-serit li{ padding: 4px 0 0 50px; min-height: 34px }
  .akis-serit li::after{ display: none }
}

/* seçim çubuğu — model seçilince alttan kayarak gelir */
.secim-cubugu{
  position: fixed; z-index: 40; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  translate: -50% 0; width: min(720px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 10px 10px 22px; border-radius: 18px;
  background: rgba(11,20,48,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(233,207,138,.35), 0 24px 50px -20px #000;
  transition: transform 450ms var(--ease-out), opacity 300ms ease;
}
.secim-cubugu[hidden]{ display: flex; transform: translateY(140%); opacity: 0; pointer-events: none }
.sc-yazi{ color: var(--yazi-2); font-size: 14.5px }
.sc-yazi b{ display: block; font-family: var(--font-baslik); font-size: 17px; letter-spacing: .06em; color: #FFFFFF }
.secim-cubugu .dugme-ana{ min-height: 48px; padding: 0 20px; font-size: 15px; flex: none; width: auto }
.sc-yazi{ min-width: 0 }
@media (max-width: 520px){
  .secim-cubugu{ padding: 10px; gap: 10px }
  .sc-yazi{ font-size: 12.5px } .sc-yazi b{ font-size: 15px }
  .secim-cubugu .dugme-ana{ padding: 0 14px; font-size: 14px }
}
@media (prefers-reduced-motion: reduce){ .secim-cubugu{ transition: none } }

.dekor-not{ width: auto; margin: 22px 0 0 }


/* ==========================================================================
   SENİN İÇİN — müşteri kapısı (2 Ekim 2026)
   İşletme sahibi olmayan ziyaretçinin girişi. Solda kemerli mağaza kapısı
   (içinden sıcak ışık sızar), sağda madalyonlu kapı satırları. Hesap
   istenmez; durum mühürleri dürüst: Önizleme / Hazırlanıyor / Kullanımda /
   Yakında.
   ========================================================================== */
.kapak-musteri svg{ display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.9 }
.kapak-musteri{
  display: block; margin-bottom: 8px; width: fit-content;
  font-family: var(--font-marka); font-weight: 600; font-size: 15px; color: var(--altin-acik);
  text-decoration: underline; text-decoration-color: rgba(233,207,138,.4); text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine){ .kapak-musteri:hover{ text-decoration-color: var(--altin-acik) } }

.kapi-duzen{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
/* kemer: üstü yarım daire, pirinç çerçeve, içi mağaza görseli */
.kapi-kemer{
  position: relative; margin: 0; aspect-ratio: 3 / 4.2;
  border-radius: 999px 999px 18px 18px; overflow: hidden;
  box-shadow:
    0 0 0 2px #B88E36,
    0 0 0 9px rgba(7,13,31,.92),
    0 0 0 10px rgba(233,207,138,.28),
    0 50px 90px -40px #000;
}
.kapi-kemer img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(.9) }
.kapi-kemer::after{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(255,226,160,.28), transparent 70%),
    linear-gradient(0deg, rgba(7,13,31,.75), rgba(7,13,31,.05) 55%);
}
/* kapı aralığından sızan ışık — yavaş nefes alır */
.kemer-isik{
  position: absolute; left: 50%; bottom: -12%; width: 70%; height: 30%; translate: -50% 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,214,140,.45), transparent 70%);
  filter: blur(12px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .kemer-isik{ animation: nefes 6s ease-in-out infinite }
  @keyframes nefes{ 0%, 100%{ opacity: .55 } 50%{ opacity: 1 } }
  .kapi-kemer img{ transition: transform 1600ms var(--ease-out) }
  .senin-icin:hover .kapi-kemer img{ transform: scale(1.05) }
}

.kapi-liste{ list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--cizgi) }
.kapi-liste li{ border-bottom: 1px solid var(--cizgi) }
.kapi-satir{
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 24px; align-items: center; gap: 18px;
  padding: 18px 6px; color: inherit;
  transition: background-color 250ms ease, padding-left 350ms var(--ease-out);
}
.kapi-satir .madalyon{ --boy: 64px }
.kapi-satir .madalyon .yuz img{ width: 76% }
.kapi-satir .madalyon.koyu-yuz .yuz img{ width: 104% }
.mini-lens{ width: 74%; height: auto }
.kp-yazi{ display: grid; gap: 2px }
.kp-yazi b{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: .02em; color: #FFFFFF }
.kp-yazi small{ font-family: var(--font-marka); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--altin) }
.kp-yazi span{ margin-top: 4px; color: var(--yazi-2); font-size: 15px; max-width: 54ch }
.kp-durum{
  font-family: var(--font-marka); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.kp-durum.basili{ color: #1B1405; background: var(--pirinc-duz) }
.kp-durum.acik{ color: var(--altin-acik); box-shadow: inset 0 0 0 1px var(--altin-acik) }
.kp-durum.kor{ color: var(--yazi-3); box-shadow: inset 0 0 0 1px rgba(233,207,138,.28) }
.kp-ok svg{ width: 20px; height: 20px; fill: none; stroke: var(--altin); stroke-width: 1.8; transition: transform 250ms var(--ease-out) }
@media (hover: hover) and (pointer: fine){
  a.kapi-satir:hover{ background: linear-gradient(90deg, rgba(233,207,138,.09), transparent 75%); padding-left: 16px }
  a.kapi-satir:hover .kp-ok svg{ transform: translateX(4px) }
}
.kapi-not{ margin-top: 18px; font-size: 14px; color: var(--yazi-3) }

@media (max-width: 900px){
  .kapi-duzen{ grid-template-columns: 1fr }
  .kapi-kemer{ max-width: 340px; aspect-ratio: 3 / 3.4; justify-self: center; width: 100% }
}
@media (max-width: 560px){
  .kapi-satir{ grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 14px }
  .kapi-satir .madalyon{ --boy: 52px }
  .kp-durum{ grid-column: 2; grid-row: 2; justify-self: start }
  .kp-ok{ grid-column: 3; grid-row: 1 / span 2 }
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .kapi-liste li{ animation: belir linear both; animation-timeline: view(); animation-range: entry 0% entry 40% }
  }
}

/* ==========================================================================
   DİJİTAL YÜZ (optivera.html#dijital) — OptiPedia, OptiLens, Uygulama
   Masası, OptiSmart. Girişin hemen altında; OptiPedia gerçek ekranıyla.
   ========================================================================== */
.dijital{ padding-top: clamp(64px, 8vw, 112px) }
.dijital .bolum-bas h2{ margin-top: 8px }
.dijital-izgara{
  margin-top: clamp(28px, 3.4vw, 44px); display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "opti lens" "masa smart";
}
.dj-optipedia{ grid-area: opti } .dj-lens{ grid-area: lens } .dj-masa{ grid-area: masa } .dj-smart{ grid-area: smart }
@media (max-width: 900px){ .dijital-izgara{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "opti" "lens" "masa" "smart" } }
@media (min-width: 901px) and (max-width: 1180px){ .dijital-izgara{ grid-template-areas: "opti lens" "masa masa" "smart smart" } }

.dj-kart{
  --vurgu: var(--altin-acik);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: end; gap: 6px; padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px; color: var(--yazi); text-decoration: none;
  background: linear-gradient(180deg, rgba(244,239,228,.055), rgba(244,239,228,.015));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vurgu) 30%, transparent), 0 30px 60px -36px #000;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
a.dj-kart:active{ transform: scale(.985) }
a.dj-kart:focus-visible{ outline: 3px solid var(--vurgu); outline-offset: 3px }
@media (hover: hover) and (pointer: fine){
  a.dj-kart:hover{ transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vurgu) 65%, transparent), 0 36px 70px -34px #000 }
  a.dj-kart:hover .dj-git svg{ transform: translateX(4px) }
}
.dj-kart h3{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--mine) }
.dj-kart h3 span{ color: var(--vurgu) }
.dj-kart p{ color: var(--yazi-2); font-size: 15.5px; max-width: 46ch }
.dj-etiket{ font: 700 12px var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu) }
.dj-etiket .mini-yakinda{ vertical-align: 1px; margin-left: 4px }
.dj-git{ margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--font-marka); color: var(--vurgu) }
.dj-git svg, .dj-ikincil svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out) }

/* OptiPedia: ekran görüntüsü cihaz çerçevesinde */
.dj-pedia{ align-content: start; gap: 22px }
.dj-optipedia{ --vurgu: var(--altin-acik);
  background: radial-gradient(90% 70% at 50% 0%, rgba(233,207,138,.12), transparent 70%), linear-gradient(180deg, rgba(244,239,228,.06), rgba(244,239,228,.015)) }
.dj-ekran{ display: block; border-radius: 18px; perspective: 1400px }
.dj-cerceve{
  display: block; padding: 10px; border-radius: 18px;
  background: linear-gradient(160deg, #2A2F3E, #0E1322 55%, #1C2232);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -24px #000, 0 0 0 1px rgba(233,207,138,.25);
  transform: rotateX(6deg); transform-origin: 50% 100%;
  transition: transform 500ms var(--ease-out);
}
.dj-cerceve img{ display: block; width: 100%; height: auto; border-radius: 10px }
@media (hover: hover) and (pointer: fine){ .dj-ekran:hover .dj-cerceve{ transform: rotateX(0) translateY(-4px) } }
.dj-ekran:focus-visible{ outline: 3px solid var(--altin-acik); outline-offset: 4px }
.dj-yazi{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center }
.dj-yazi > div{ display: grid; gap: 4px }
.dj-yazi > p{ grid-column: 1 / -1; margin: 0 }
.dj-logo-lens{ background: none; box-shadow: 0 0 0 3px rgba(159,212,242,.45) }
.dj-logo-lens svg{ width: 100%; height: 100% }
.dj-lens .dj-cerceve{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -24px #000, 0 0 0 1px rgba(159,212,242,.3) }
.dj-lens .dj-ikincil{ color: #9FD4F2; text-decoration-color: rgba(159,212,242,.4) }
.dj-logo{ width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--mine); box-shadow: 0 0 0 3px rgba(233,207,138,.5) }
.dj-logo img{ width: 86%; height: auto; mix-blend-mode: multiply }
.dj-yazi h3{ font-size: clamp(30px, 3vw, 42px) }
.dj-eylem{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px }
.dj-ikincil{ display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 600 15px var(--font-marka); color: var(--altin-acik); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(233,207,138,.4) }
@media (max-width: 520px){ .dj-eylem .dugme-ana{ flex: 1 1 100% } .dj-logo{ width: 56px; height: 56px } }

/* OptiLens: buz mavisi lens */
.dj-lens{ --vurgu: #9FD4F2;
  background: radial-gradient(100% 80% at 100% 0%, rgba(159,212,242,.16), transparent 60%), linear-gradient(180deg, rgba(244,239,228,.05), rgba(244,239,228,.015)) }
.dj-lens-cizim{ position: absolute; z-index: -1; top: -14%; right: -10%; width: min(68%, 280px); aspect-ratio: 1 }
.dj-lens-cizim svg{ width: 100%; height: 100%; overflow: visible }
.dj-halka{ fill: none; stroke: rgba(159,212,242,.28); stroke-width: 1.2 }
.dj-halka.ince{ stroke-dasharray: 2 6; stroke: rgba(233,207,138,.45) }
.dj-kubbe{ stroke: #9FD4F2; stroke-width: 3; stroke-linecap: round }
.dj-yansima{ fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 30 200 }
@media (prefers-reduced-motion: no-preference){
  .dj-halka.ince{ transform-origin: 100px 100px; animation: dj-don 40s linear infinite }
  .dj-yansima{ animation: dj-isik 6s var(--ease-out) infinite }
  @keyframes dj-don{ to{ transform: rotate(360deg) } }
  @keyframes dj-isik{ 0%, 40%{ stroke-dashoffset: 30 } 75%, 100%{ stroke-dashoffset: -200 } }
}

/* Uygulama Masası: mağaza fotoğrafı */
.dj-masa{ --vurgu: var(--altin-acik); min-height: 300px }
.dj-foto{ position: absolute; inset: 0; z-index: -1 }
.dj-foto img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 700ms var(--ease-out) }
.dj-foto::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,31,.15) 0%, rgba(7,13,31,.55) 45%, rgba(7,13,31,.95) 100%) }
@media (hover: hover) and (pointer: fine){ .dj-masa:hover .dj-foto img{ transform: scale(1.04) } }

/* OptiSmart: yatay şerit */
.dj-smart{ grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; gap: 4px 22px; --vurgu: #8FA9F5 }
.dj-smart-logo{ grid-row: 1 / span 3; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--mine); opacity: .8; filter: saturate(.6) }
.dj-smart-logo img{ width: 86%; height: auto; mix-blend-mode: multiply }
.dj-smart .dj-etiket, .dj-smart h3, .dj-smart p{ grid-column: 2 }
.dj-smart h3{ font-size: clamp(22px, 2vw, 28px) }
.dj-smart .dj-git{ grid-column: 3; grid-row: 1 / span 3; margin: 0 }
@media (max-width: 640px){
  .dj-smart{ grid-template-columns: auto minmax(0, 1fr) }
  .dj-smart-logo{ width: 60px; height: 60px; grid-row: 1 / span 2 }
  .dj-smart p{ grid-column: 1 / -1 }
  .dj-smart .dj-git{ grid-column: 1 / -1; grid-row: auto; margin-top: 6px }
}
.sahne .eylemler .dj-sahne{ color: var(--altin-acik) }

/* OptiPedia tanıtım sayfası: başlık altında aç düğmeleri, tıklanır karolar */
.tanitim-eylem{ margin-top: 26px }
a.giris-karo{ color: inherit; text-decoration: none; display: block }

.giris-karolari li:has(a.giris-karo){ padding: 0 }
a.giris-karo{ padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: background-color 180ms ease, color 180ms ease }
a.giris-karo::after{ content: "→"; color: var(--altin); transition: transform 220ms var(--ease-out) }
@media (hover: hover) and (pointer: fine){ a.giris-karo:hover{ background: rgba(233,207,138,.07); color: var(--altin-acik) } a.giris-karo:hover::after{ transform: translateX(3px) } }
a.giris-karo:focus-visible{ outline: 2px solid var(--altin-acik); outline-offset: -2px }

/* ==========================================================================
   OPTIVERA YALNIZ DEKOR (Master Handoff 2.0, 3 Ekim 2026)
   #kesif — beş soruluk dekor keşfi; #dil — ışığın, rengin, mobilyanın dili.
   ========================================================================== */
.kesif{ padding-top: clamp(64px, 8vw, 112px) }
.kesif .bolum-bas h2{ margin-top: 8px }
.kesif-duzen{ margin-top: clamp(26px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start }
@media (max-width: 900px){ .kesif-duzen{ grid-template-columns: minmax(0, 1fr) } }
.kesif-sorular{ display: grid; gap: 18px }
.kesif-sorular fieldset{ border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.kesif-sorular legend{ padding: 0; margin-bottom: 10px; font: 700 12px var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--altin-acik) }
.kesif-sorular label{ position: relative; cursor: pointer }
.kesif-sorular input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.kesif-sorular label span{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font: 500 14.5px var(--font-marka); color: var(--yazi-2);
  background: rgba(244,239,228,.04); box-shadow: inset 0 0 0 1px var(--cizgi);
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.kesif-sorular label span i{ width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.35) }
.kesif-sorular input:checked + span{ color: var(--murekkep); background: var(--altin-acik); box-shadow: inset 0 0 0 1px var(--altin-acik) }
.kesif-sorular input:focus-visible + span{ outline: 3px solid var(--altin-acik); outline-offset: 3px }
.kesif-sorular label:active span{ transform: scale(.97) }
@media (hover: hover) and (pointer: fine){ .kesif-sorular label:hover input:not(:checked) + span{ color: var(--yazi); box-shadow: inset 0 0 0 1px var(--cizgi-guclu) } }

.kesif-sonuc{
  position: sticky; top: 24px; display: grid; gap: 8px; padding: clamp(18px, 2.2vw, 26px); border-radius: 22px; min-height: 220px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(233,207,138,.10), transparent 70%), linear-gradient(180deg, rgba(244,239,228,.055), rgba(244,239,228,.015));
  box-shadow: inset 0 0 0 1px var(--cizgi), 0 30px 60px -36px #000;
}
@media (max-width: 900px){ .kesif-sonuc{ position: static } }
.ks-bos{ display: grid; gap: 6px; align-content: center; min-height: 170px; text-align: center }
.ks-bos b{ font: 600 18px var(--font-marka); color: var(--yazi) }
.ks-bos span{ color: var(--yazi-3); font-size: 14.5px }
.ks-sayac{ font: 700 11.5px var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--yazi-3) }
.ks-gorsel{ margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 496 / 300 }
.ks-gorsel img{ width: 100%; height: 100%; object-fit: cover; display: block }
.ks-etiket{ margin-top: 6px; font: 700 12px var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--altin-acik) }
.ks-ad{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; color: var(--mine) }
.ks-iki{ color: var(--yazi-2); font-size: 14.5px }
.ks-iki a{ color: var(--altin-acik) }
.ks-eylem{ margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px }
.ks-ikincil{ min-height: 44px; display: inline-flex; align-items: center; font: 600 15px var(--font-marka); color: var(--altin-acik); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(233,207,138,.4) }
.ks-not, .kesif-not{ color: var(--yazi-3); font-size: 13.5px }
.kesif-not{ margin-top: 14px }
@media (prefers-reduced-motion: no-preference){
  .ks-gorsel, .ks-ad{ animation: ks-gir 320ms var(--ease-out) both }
  @keyframes ks-gir{ from{ opacity: 0; transform: translateY(6px) } to{ opacity: 1; transform: none } }
}

/* Işığın dili */
.isik-sahne{ margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: center }
@media (max-width: 900px){ .isik-sahne{ grid-template-columns: minmax(0, 1fr) } }
.isik-gorsel{ position: relative; margin: 0; border-radius: 22px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--cizgi), 0 40px 80px -40px #000 }
.isik-gorsel img{ display: block; width: 100%; height: auto; transition: filter 600ms var(--ease-out) }
.isik-ton{ position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; transition: background 600ms var(--ease-out), opacity 600ms var(--ease-out) }
.isik-gorsel figcaption{ position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--yazi); background: rgba(7,13,31,.72) }
.isik-sahne[data-isik="sicak"] .isik-ton{ background: radial-gradient(70% 60% at 50% 30%, rgba(255,170,80,.75), rgba(160,80,20,.55)) }
.isik-sahne[data-isik="sicak"] img{ filter: saturate(1.08) brightness(.98) }
.isik-sahne[data-isik="dogal"] .isik-ton{ background: linear-gradient(180deg, rgba(255,226,180,.45), rgba(220,200,170,.3)) }
.isik-sahne[data-isik="dogal"] img{ filter: brightness(1.03) }
.isik-sahne[data-isik="aydinlik"] .isik-ton{ background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,250,240,.45)) }
.isik-sahne[data-isik="aydinlik"] img{ filter: brightness(1.14) contrast(.94) saturate(.95) }
.isik-sahne[data-isik="net"] .isik-ton{ background: linear-gradient(180deg, rgba(225,238,255,.6), rgba(200,215,240,.4)) }
.isik-sahne[data-isik="net"] img{ filter: brightness(1.06) contrast(1.08) saturate(.9) }
.isik-sahne[data-isik="premium"] .isik-ton{ background: radial-gradient(30% 34% at 30% 40%, rgba(255,200,110,.9), transparent 70%), radial-gradient(30% 34% at 72% 42%, rgba(255,200,110,.85), transparent 70%), rgba(20,10,0,.55) }
.isik-sahne[data-isik="premium"] img{ filter: brightness(.82) contrast(1.15) saturate(1.05) }
.isik-sahne[data-isik="dijital"] .isik-ton{ background: linear-gradient(100deg, rgba(120,190,255,.6), rgba(160,120,255,.35) 55%, rgba(120,230,255,.55)) }
.isik-sahne[data-isik="dijital"] img{ filter: brightness(1.02) contrast(1.06) saturate(1.1) hue-rotate(-8deg) }
@media (prefers-reduced-motion: reduce){ .isik-gorsel img, .isik-ton{ transition: none } }

.isik-panel{ display: grid; gap: 14px }
.isik-secim{ display: flex; flex-wrap: wrap; gap: 8px }
.isik-secim button{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14px var(--font-marka); color: var(--yazi-2); background: rgba(244,239,228,.04); box-shadow: inset 0 0 0 1px var(--cizgi);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.isik-secim button i{ width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c) }
.isik-secim button[aria-checked="true"]{ color: var(--murekkep); background: var(--altin-acik); box-shadow: none }
.isik-secim button:focus-visible{ outline: 3px solid var(--altin-acik); outline-offset: 3px }
.isik-secim button:active{ transform: scale(.97) }
.isik-aciklama{ color: var(--yazi); font-size: 16px; line-height: 1.6; min-height: 3.2em }
.md-baslik{ margin-top: 6px; font: 700 11.5px var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: var(--yazi-3) }
.isik-katman{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.isik-katman li{ padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--yazi-2); background: rgba(244,239,228,.035); box-shadow: inset 0 0 0 1px var(--cizgi) }

/* Renklerin ve mobilyanın dili */
.dil-ikili{ margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px }
@media (max-width: 900px){ .dil-ikili{ grid-template-columns: minmax(0, 1fr) } }
.dil-kart{ display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: linear-gradient(180deg, rgba(244,239,228,.05), rgba(244,239,228,.015)); box-shadow: inset 0 0 0 1px var(--cizgi) }
.dil-kart h3{ font-family: var(--font-baslik); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); color: var(--mine); margin-bottom: 4px }
.renk-dil{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.renk-dil li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center }
.rd-cift{ grid-row: 1 / span 2; display: inline-flex }
.rd-cift i{ width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 2px var(--tas) }
.rd-cift i + i{ margin-left: -8px }
.renk-dil b{ font: 600 15.5px var(--font-marka); color: var(--yazi) }
.renk-dil span:not(.rd-cift){ font-size: 14px; color: var(--yazi-2) }
.dil-kart .palet li{ font-size: 13px }
.md-moduller{ color: var(--yazi-2); font-size: 14.5px }

/* OptiSmart tanıtımı: puan ağırlıkları, marka seçimi */
.secim-ikili{ margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px }
.secim-ikili .not-kutu{ margin: 0 }
@media (max-width: 640px){ .secim-ikili{ grid-template-columns: minmax(0, 1fr) } }
.agirliklar{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 560px }
.agirliklar li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline }
.agirliklar li::after{ content: ""; grid-column: 1 / -1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--altin) calc(var(--w) * 2.5%), rgba(244,239,228,.07) 0) }
.agirliklar span{ color: var(--yazi); font-size: 15px }
.agirliklar b{ font: 600 15px var(--font-marka); color: var(--altin-acik) }
.agirlik-not{ font-size: 14px !important; color: var(--yazi-3) !important }
.tanitim-bolum h2 .mini-yakinda{ vertical-align: middle; margin-left: 8px; font-size: 12px }


/* PASTORIA: CSKDINE'ın içinde bir hizmet (CSKDINE + PASTORIA birleşik handoff'u, 3 Ekim 2026) */
.sira-alt{ margin-inline-start: clamp(28px, 6vw, 96px); position: relative }
.sira-alt::before{ content: ""; position: absolute; inset-inline-start: calc(-1 * clamp(18px, 4vw, 60px)); top: -8px; width: clamp(12px, 3vw, 40px); height: 48px;
  border-inline-start: 1px solid rgba(252,94,48,.45); border-bottom: 1px solid rgba(252,94,48,.45); border-end-start-radius: 14px }
/* geniş ekranda tek dar sütun yerine iki sütun: CSKBOOKPEDIA solda iki satır
   boyunca, CSKDINE sağda, PASTORIA onun altında (içindeki hizmet) */
@media (min-width: 1200px){
  .sira{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kitap dine" "kitap pasta";
         column-gap: clamp(56px, 6vw, 120px); row-gap: clamp(48px, 5vw, 72px); align-items: center }
  .sira-satir, .sira-satir:nth-child(even){ grid-template-columns: auto minmax(0, 1fr); max-width: none; margin-inline: 0 }
  .sira-satir:nth-child(even) .madalyon{ order: 0 }
  #cskbook{ grid-area: kitap; grid-template-columns: minmax(0, 1fr); justify-items: start; padding-inline-end: clamp(24px, 3vw, 56px); border-inline-end: 1px solid var(--cizgi) }
  #cskbook .madalyon{ --boy: clamp(200px, 14vw, 260px) }
  #cskdine{ grid-area: dine }
  #pastoria{ grid-area: pasta }
}

/* OPTIVERA sayfasının altında OptiLens (tek geniş kart: solda ekran, sağda yazı). */
.dijital-izgara.tek{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "lens" }
.optivera-lens .bolum-bas p{ margin-top: 12px; max-width: 60ch; color: var(--yazi-2); font-size: 16.5px; line-height: 1.6 }
.optivera-lens .dj-eylem{ flex-wrap: wrap; row-gap: 12px }
@media (min-width: 901px){
  .optivera-lens .dj-lens{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 4vw, 56px) }
}

/* ==========================================================================
   TELEFON PERFORMANSI (9 Ekim 2026)
   Dokunmatik ve dar ekranda süs hareketleri kapanır: kaydırma akıcı kalsın.
   Sonsuz döngüler, bulanıklık (filter/backdrop-filter) ve büyük katmanlar
   telefon GPU'sunu en çok yoran şeylerdi. İçerik ve geçişler aynı kalır.
   ========================================================================== */
@media (hover: none), (max-width: 760px){
  .perde img{ animation: none; will-change: auto; opacity: 0 }
  .perde img:first-child{ opacity: 1; transform: scale(1.04) }
  /* görünmeyen kareler (loading="lazy") hiç indirilmesin */
  .perde img:not(:first-child){ display: none }
  .perde-ilerleme{ display: none }
  .madalyon::after,
  .yay .bas .madalyon::after, .sahne .madalyon::after, .vitrin-yazi .madalyon::after,
  .kapanis .madalyon::after, .tanitim-bas .madalyon::after,
  .yay .y1 .madalyon::after, .yay .y2 .madalyon::after, .yay .y3 .madalyon::after{ animation: none }
  .kemer-isik{ animation: none; filter: none; opacity: .7 }
  .dj-halka.ince, .dj-yansima{ animation: none }
  .cerceve figcaption, .kunye{ backdrop-filter: none; background: rgba(7,13,31,.9) }
  .secim-cubugu{ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11,20,48,.97) }
  .istasyon .gorsel .cerceve img{ transition: none }
  .istasyon .gorsel.kapali .cerceve img{ transform: none; filter: none }
  @keyframes yuksel{ from{ opacity: 0; transform: translateY(18px) } to{ opacity: 1; transform: none } }
  @keyframes belir{ from{ opacity: .15; transform: translateY(20px) } to{ opacity: 1; transform: none } }
}

/* ==========================================================================
   YOL SEÇİCİ (9 Ekim 2026) — ilk kez gelen "ne yapmak istiyorsun?" sorusuna
   dört kapıyla cevap verir; sistem adlarını bilmeden doğru yere gider.
   ========================================================================== */
.yol-soru{
  margin-top: 30px;
  font-family: var(--font-marka); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--altin-acik);
}
.yol{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 600px }
.yol a{
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 76px; padding: 12px 14px; border-radius: 14px;
  background: rgba(11,21,48,.82);
  box-shadow: inset 0 0 0 1px rgba(233,207,138,.26);
  color: var(--yazi); text-decoration: none;
  transition: box-shadow 200ms ease, background-color 200ms ease, transform 200ms var(--ease-out);
}
.yol img{ width: 48px; height: 48px; object-fit: contain; border-radius: 50%; background: var(--mine) }
.yol li:nth-child(2) img{ background: #0b1530 }
.yol b{ display: block; font-family: var(--font-marka); font-weight: 600; font-size: 15.5px; line-height: 1.25 }
.yol small{ display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--yazi-3) }
.yol .mini-durum{
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-family: var(--font-marka); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.yol .mini-durum.basili{ color: #1B1405; background: var(--altin) }
.yol .mini-durum.kor{ color: var(--yazi-3); box-shadow: inset 0 0 0 1px rgba(233,207,138,.3) }
.yol a:focus-visible{ outline: 2px solid var(--altin-acik); outline-offset: 3px }
.yol a:active{ transform: scale(.98) }
@media (hover: hover) and (pointer: fine){
  .yol a:hover{ background: rgba(17,29,61,.95); box-shadow: inset 0 0 0 1px var(--altin) }
}
.kapak .kapak-not{ margin-top: 14px }
@media (max-width: 420px){ .yol{ grid-template-columns: 1fr } .yol a{ min-height: 68px } }

/* ==========================================================================
   TELEFONDA KISA SAYFA (9 Ekim 2026) — boşluklar ve tekrar eden süsler
   küçülür; içerik aynı, kaydırma yaklaşık yarıya iner.
   ========================================================================== */
@media (max-width: 760px){
  :root{ --bolum: 56px }
  .ust{ padding-block: 10px }
  .ust-nav{ display: none }
  .kapak{ padding-block: 20px 36px; gap: 20px }
  .kapak h1{ font-size: clamp(30px, 8.6vw, 38px) }
  .kapak-ozet{ margin-top: 14px; font-size: 16.5px }
  .yay{ display: none }                       /* dört kapı aynı işi görüyor */
  .eksen{ display: none }
  .kapi-kemer{ display: none }
  .bolum-bas h2, .bolum-bas p{ margin-bottom: 0 }
  .kapanis{ padding-block: 56px }
  .kapanis .madalyon{ --boy: 88px }
  .veri{ margin-top: 56px }
  .sira-alt{ margin-inline-start: 0 }
  .sira-alt::before{ display: none }
  .vitrin-yazi > .madalyon{ display: none }
  .vitrin{ gap: 20px }
  .dj-ekran{ display: none }                  /* ekran görüntüsü telefonda okunmuyordu; logo + metin yeter */
  .dijital{ padding-top: 56px }
  .dijital-izgara{ gap: 14px }
  .kapi-liste{ margin-top: 18px }
  .kapi-satir{ padding-block: 14px !important }
  .kp-yazi b{ font-size: 17px; letter-spacing: .01em }
  .kp-yazi > span{ font-size: 14.5px; line-height: 1.45 }
  .sira{ margin-top: 24px; gap: 14px }
  .sira-satir, .sira-satir:nth-child(even){ grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0 !important; border-bottom: 1px solid var(--cizgi) }
  .sira-satir:nth-child(even) .madalyon{ order: 0 }
  .sira-satir .madalyon{ --boy: 64px }
  .sira-satir .muhur{ display: none }
  .sira-satir h3{ font-size: 20px }
  .sira-satir .tanim{ margin-top: 8px; font-size: 15px }
  .sira-satir .oku{ margin-top: 10px }
}

/* OPTIVERA telefonda (9 Ekim 2026): altı model alt alta 4.700 px tutuyordu;
   yana kaydırılan şerit olur. Yolculuk istasyonları sıkılaşır. */
@media (max-width: 640px){
  .dekor-izgara{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar);
    margin-inline: calc(-1 * var(--kenar)); padding: 6px var(--kenar) 14px;
    scrollbar-width: none; align-items: start;
  }
  .dekor-izgara::-webkit-scrollbar{ display: none }
  .dekor-izgara > *{ scroll-snap-align: start }
  .istasyon, .istasyon:nth-child(even){ grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; padding-block: 20px }
  .yolculuk::before{ left: 21px }
  .istasyon .no{ width: 44px; height: 44px; font-size: 17px; box-shadow: 0 0 0 5px var(--tas), inset 0 1px 1px rgba(255,255,255,.7) }
  .ist-yazi h3{ font-size: 22px }
  .ist-yazi p:not(.alt-baslik){ margin-top: 8px; font-size: 15.5px }
  .istasyon .cerceve{ aspect-ratio: 16 / 10 }
  .istasyon .ikili .cerceve{ aspect-ratio: 1 / 1 }
  .sahne{ padding-top: 230px }
  .sahne .kunye{ top: 190px }
  body:has(.secim-cubugu:not([hidden])) main{ padding-bottom: 96px }
}