/* Modüller sayfası.
   Giriş (kahraman + modül dizini) olduğu gibi korundu.
   Modül anlatımları ana sayfanın diliyle çalışır: sabitlenen koyu sahne, gerçek ekran
   kadrajı doldurur, kamera scroll'a birebir bağlı olarak ilgili bölgeye yaklaşır,
   solda altın etiket ve büyük başlık. Ortak token/bileşenler: sistem.css */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 80px); }
.modules-page { --tour-gutter: clamp(24px,5vw,96px); }
.modules-page .nav::before,.modules-page .nav::after { bottom:0; }
.modules-page .nav-logo::before { display:none; }
.modules-page .nav { background:var(--ink); }
.modules-page .nav.acik-tema { background:var(--mist); }

/* ── Giriş: kahraman ───────────────────────────────────────────────────── */
.eyebrow,.edition,.hero-bottom,.chapter-label,.reading-bar { font-size: 12px; letter-spacing: .07em; }
.eyebrow { color: var(--gold); font-weight: 600; }
.modules-hero { padding: calc(var(--nav-h) + 55px) var(--tour-gutter) 0; overflow: hidden; position: relative; }
.hero-topline,.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.edition { color:var(--muted-d); }
.hero-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:660px; }
.hero-heading { position:relative; z-index:2; padding:50px 0 70px; }
.hero-heading h1 { animation:module-arrive .8s both; }
.hero-heading p,.tour-link { animation:module-arrive .8s .12s both; }
@keyframes module-arrive { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.hero-heading h1 { font-size:clamp(72px,7.2vw,132px); font-weight:400; line-height:.96; letter-spacing:-.065em; }
.hero-heading em { color:var(--gold); font-style:normal; }
.hero-heading p { font-size:clamp(17px,1.3vw,21px); color:var(--muted-d); line-height:1.6; margin-top:32px; max-width:490px; }
.tour-link { display:inline-flex; align-items:center; gap:50px; border-bottom:1px solid #686051; padding:16px 0; margin-top:26px; font-size:16px; }
.tour-link span { color:var(--gold); font-size:28px; }
.hero-composition { position:relative; height:570px; perspective:1400px; margin-right:-9vw; }
.hero-composition::before { content:''; position:absolute; inset:0 0 0 -80px; background:radial-gradient(ellipse,rgba(126,146,191,.14),transparent 65%); }
.orbit-label { position:absolute; top:4%; left:14%; font-size:10px; letter-spacing:.15em; color:#a8afbf; display:flex; gap:12px; align-items:center; }
.live-dot { display:inline-block; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero-screen { position:absolute; width:94%; border:1px solid #67718755; border-radius:12px; padding:7px; background:#222a3b; box-shadow:0 35px 90px #0007; overflow:hidden; }
.hero-screen img { width:100%; height:auto; border-radius:6px; }
.hero-screen-back { top:12%; left:12%; transform:translateY(calc(var(--hero-scroll,0) * -35px)) rotateY(-15deg) rotateX(8deg) rotateZ(5deg); opacity:.48; }
.hero-screen-front { top:34%; left:0; transform:translateY(calc(var(--hero-scroll,0) * 35px)) rotateY(calc(-15deg + var(--hero-scroll,0) * 10deg)) rotateX(8deg) rotateZ(-5deg); }
.hero-seal { position:absolute; bottom:-2%; left:0; display:flex; align-items:center; gap:16px; z-index:3; background:var(--ink); padding:14px 24px 10px 8px; border-radius:0 14px 0 0; }
.hero-seal strong { font-size:80px; font-weight:400; letter-spacing:-.07em; line-height:1; color:var(--gold); }
.hero-seal span { font-size:14px; color:var(--muted-d); line-height:1.4; }
.hero-bottom { border-top:1px solid var(--line-d); padding:25px 0; color:var(--muted-d); }
.hero-bottom i { font-style:normal; padding:0 16px; color:var(--gold); }
.hero-bottom a { color:white; display:flex; gap:30px; }

/* ── Giriş: modül dizini ───────────────────────────────────────────────── */
.module-index { padding:110px var(--tour-gutter) 120px; display:grid; grid-template-columns:1fr 1.5fr; gap:8vw; }
.index-intro h2 { font-size:clamp(32px,3vw,54px); letter-spacing:-.045em; line-height:1.08; font-weight:400; margin:24px 0; }
.index-intro p { color:var(--muted-d); font-size:16px; }
.index-links { display:grid; grid-template-columns:1fr 1fr; column-gap:35px; }
.index-links a { display:flex; align-items:center; gap:14px; padding:17px 0; border-bottom:1px solid var(--line-d); font-size:15px; transition:color .2s; }
.index-links a:hover { color:var(--gold); }
.index-links a span { color:var(--gold); font-size:11px; }
.index-links b { font-size:18px; margin-left:auto; font-weight:400; color:var(--muted-d); }

/* ── Gezinti şeridi: hangi modüldeyiz ──────────────────────────────────── */
.reading-bar { position:sticky; top:var(--nav-h); z-index:30; background:rgba(5,9,24,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; padding:15px var(--tour-gutter); display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line-d); }
.reading-current { color:var(--gold); display:flex; gap:20px; }
.reading-current b { color:#fff; font-weight:400; }
.reading-all,.reading-next { display:flex; gap:15px; letter-spacing:0; color:var(--muted-d); transition:color .2s; }
.reading-all:hover,.reading-next:hover { color:#fff; }
.reading-progress { position:absolute; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--gold); }

/* ══ Modül anlatımı ═════════════════════════════════════════════════════
   JavaScript yokken de okunur: giriş kartı + ilk ekran + adım listesi.
   .ms-hazir ile sahne devreye girer. */
.ms { position:relative; z-index:var(--z,20); }
.ms-giris { border-radius:42px 42px 0 0; margin-top:-42px; padding:clamp(76px,11vh,140px) var(--tour-gutter) clamp(60px,9vh,110px); }
.ms-giris.acik { background:var(--mist); color:var(--navy); }
.ms-giris.koyu { background:var(--ink); color:#fff; }
.ms-giris-ic { max-width:1180px; margin:0 auto; }
.ms .no { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:26px; color:var(--gold); }
.ms-giris.acik .no { color:#8a6412; }
.ms .baslik { font-size:clamp(44px,5vw,86px); font-weight:400; line-height:.98; letter-spacing:-.04em; }
.ms .lede { margin-top:26px; max-width:52ch; font-size:clamp(17px,1.2vw,20px); line-height:1.55; color:var(--muted-d); }
.ms-giris.acik .lede { color:var(--muted-l); }
.ms-etiket { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 0; padding:0; }
.ms-etiket li { font-size:12px; letter-spacing:.02em; border:1px solid var(--line-d); border-radius:30px; padding:7px 15px; color:var(--muted-d); }
.ms-giris.acik .ms-etiket li { border-color:var(--line-l); color:var(--muted-l); }
.ms-ipucu { display:flex; align-items:center; gap:12px; margin-top:34px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-d); }
.ms-giris.acik .ms-ipucu { color:var(--muted-l); }
.ms-ipucu span { color:var(--gold); }
.ms-giris.acik .ms-ipucu span { color:#8a6412; }
.ms-ipucu i { font-style:normal; }

.ms-iz { position:relative; background:var(--ink); color:#fff; border-radius:42px 42px 0 0; margin-top:-42px; padding:0 0 clamp(20px,4vh,60px); }
.ms-sahne { position:relative; }
.ms-kadraj { position:relative; margin:0 var(--tour-gutter); aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-lg); background:#0b1120; }
.ms-plan { position:absolute; inset:0; margin:0; }
.ms-plan:not([data-i="0"]) { opacity:0; visibility:hidden; }
.ms-plan img { width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.ms-perde,.ms-cerceve,.ms-ilerleme,.ms-kunye { display:none; }
.ms-yazilar { padding:clamp(34px,5vh,60px) var(--tour-gutter) 0; display:grid; gap:34px; }
.ms-yazi { max-width:60ch; }
.ms-sayac { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-d); }
.ms-sayac b { color:var(--gold); font-weight:500; }
.ms-yazi h3 { margin-top:16px; font-size:clamp(26px,2.4vw,40px); font-weight:400; line-height:1.04; letter-spacing:-.035em; }
.ms-metin { margin-top:14px; font-size:17px; line-height:1.55; color:var(--muted-d); }
.ms-buyut { display:inline-flex; align-items:center; gap:18px; margin-top:16px; padding:8px 0; background:none; border:0; border-bottom:1px solid var(--line-d); font-size:13px; letter-spacing:.02em; color:#fff; cursor:pointer; }
.ms-buyut span { color:var(--gold); }

/* ── Sahne devrede ─────────────────────────────────────────────────────── */
.ms-hazir .ms-iz { padding:0; }
.ms-hazir .ms-sahne { position:sticky; top:0; height:100vh; height:100lvh; overflow:hidden; background:var(--ink); }
.ms-hazir .ms-kadraj { position:absolute; inset:0; margin:0; aspect-ratio:auto; border-radius:0; }
.ms-hazir .ms-plan { will-change:opacity; }
.ms-hazir .ms-plan img { position:absolute; left:50%; top:50%; width:auto; height:auto; max-width:none; object-fit:fill;
  transform:translate(-50%,-50%); transform-origin:50% 50%; will-change:transform; }
/* Metnin arkası: anlatılan bölge hiçbir zaman perdenin altında kalmasın diye
   perde, metnin bulunduğu yöne göre seçilir (sol / sağ / alt). */
.ms-hazir .ms-perde,.ms-hazir .ms-kunye { display:block; }
.ms-hazir .ms-kunye { display:grid; }
.ms-hazir .ms-perde { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; }
.ms-hazir .ms-perde.sol { background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 27%,rgba(5,9,24,.93) 35%,rgba(5,9,24,.6) 43%,rgba(5,9,24,.14) 54%,rgba(5,9,24,0) 78%,rgba(5,9,24,.16) 100%),
             linear-gradient(180deg,rgba(5,9,24,.6),rgba(5,9,24,.04) 22%,rgba(5,9,24,0) 74%,rgba(5,9,24,.3)); }
.ms-hazir .ms-perde.sag { background:linear-gradient(270deg,var(--ink) 0%,var(--ink) 27%,rgba(5,9,24,.93) 35%,rgba(5,9,24,.6) 43%,rgba(5,9,24,.14) 54%,rgba(5,9,24,0) 78%,rgba(5,9,24,.16) 100%),
             linear-gradient(180deg,rgba(5,9,24,.6),rgba(5,9,24,.04) 22%,rgba(5,9,24,0) 74%,rgba(5,9,24,.3)); }
.ms-hazir .ms-perde.dip { background:linear-gradient(0deg,var(--ink) 0%,var(--ink) 24%,rgba(5,9,24,.94) 34%,rgba(5,9,24,.62) 43%,rgba(5,9,24,.18) 54%,rgba(5,9,24,0) 72%),
             linear-gradient(180deg,rgba(5,9,24,.62),rgba(5,9,24,0) 24%); }
/* Tek çerçeve: kameranın baktığı bölgeyi işaretler */
.ms-hazir .ms-cerceve { display:block; position:absolute; z-index:3; left:0; top:0; width:10px; height:10px;
  border:2px solid var(--gold); border-radius:12px; opacity:0; pointer-events:none; will-change:transform,width,height; }
.ms-hazir .ms-cerceve span { position:absolute; left:12px; top:-11px; padding:0 8px; border-radius:4px;
  background:var(--gold); color:var(--ink); font:500 10px/21px var(--mono); letter-spacing:.1em; }
.ms-hazir .ms-yazilar { position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:min(38vw,560px); height:60vh; padding:0; display:block; opacity:var(--cikis,1); }
.ms-hazir .ms-yazilar.sol { left:var(--gutter); right:auto; }
.ms-hazir .ms-yazilar.sag { right:var(--gutter); left:auto; }
.ms-hazir .ms-yazilar.dip { left:var(--gutter); right:var(--gutter); width:auto; top:auto; bottom:6vh;
  transform:none; height:auto; min-height:34vh; }
.ms-hazir .ms-yazilar.dip .ms-yazi { justify-content:flex-end; }
.ms-hazir .ms-yazilar.dip .ms-yazi h3 { max-width:20ch; font-size:clamp(32px,3.4vw,54px); }
.ms-hazir .ms-yazilar.dip .ms-metin { max-width:58ch; }
.ms-hazir .ms-cerceve { filter:opacity(var(--cikis,1)); }

/* Modül künyesi: sahne açılırken hangi modülün anlatılacağı büyük yazılır */
.ms-kunye { position:absolute; inset:0; z-index:5; display:grid; place-items:center; pointer-events:none; }
.ms-kunye-perde { position:absolute; inset:0; background:rgba(5,9,24,.72); }
.ms-kunye-ic { position:relative; text-align:center; padding:0 var(--gutter); }
.ms-kunye-no { font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.ms-kunye-no span { color:var(--muted-d); }
.ms-kunye-ad { margin-top:20px; font-size:clamp(46px,6vw,104px); font-weight:400; line-height:1; letter-spacing:-.045em; }
.ms-kunye-not { margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-d); }
.ms-hazir .ms-yazi { position:absolute; inset:0; max-width:none; display:flex; flex-direction:column; justify-content:center;
  padding-left:26px; border-left:2px solid rgba(219,157,27,.55); opacity:0; visibility:hidden; will-change:transform,opacity; }
.ms-hazir .ms-yazi h3 { margin-top:20px; font-size:clamp(36px,4.3vw,70px); line-height:.99; letter-spacing:-.045em; max-width:13ch; }
.ms-hazir .ms-metin { margin-top:24px; max-width:32ch; font-size:clamp(16px,1.3vw,20px); line-height:1.45; }
.ms-hazir .ms-buyut { align-self:flex-start; margin-top:26px; }
.ms-hazir .ms-ilerleme { display:block; position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.12); }
.ms-hazir .ms-ilerleme i { display:block; height:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.ms-hazir .ms-giris { padding-bottom:clamp(70px,11vh,130px); }

/* ── Kapanış ───────────────────────────────────────────────────────────── */
.ms-final { position:relative; z-index:60; background:var(--mist); color:var(--navy); border-radius:42px 42px 0 0; margin-top:-42px;
  padding:clamp(90px,14vh,170px) var(--tour-gutter) clamp(110px,18vh,200px); }
.ms-final-ic { max-width:1180px; margin:0 auto; }
.ms-final .no { color:#8a6412; }
.ms-final .baslik { font-size:clamp(46px,5.4vw,96px); font-weight:400; line-height:.98; letter-spacing:-.04em; }
.ms-final .lede { margin-top:24px; max-width:50ch; font-size:clamp(17px,1.2vw,20px); line-height:1.55; color:var(--muted-l); }
.ms-final-dugme { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:38px; }
.ms-geri { display:inline-block; margin-top:44px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-l); }
.alt { position:relative; z-index:61; }

/* ── Büyütme penceresi ─────────────────────────────────────────────────── */
.ms-pencere { position:fixed; inset:0; width:96vw; max-width:2000px; height:94dvh; max-height:94dvh; margin:auto; padding:0;
  border:1px solid rgba(255,255,255,.18); border-radius:14px; background:#070c1b; color:#fff; overflow:hidden; }
.ms-pencere[open] { display:flex; flex-direction:column; }
.ms-pencere::backdrop { background:rgba(2,6,17,.93); }
.ms-pencere-ust { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 22px; font-size:14px; flex:none; }
.ms-pencere-kapat { background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; white-space:nowrap; }
.ms-pencere-alan { flex:1; min-height:0; display:flex; background:#0b1120; }
.ms-pencere-alan img { width:100%; height:100%; object-fit:contain; margin:auto; }
.ms-pencere-not { padding:12px 22px 16px; font-size:11px; letter-spacing:.04em; color:var(--muted-d); flex:none; }

/* ── Dar masaüstü ──────────────────────────────────────────────────────── */
@media(max-width:1050px) {
 .hero-layout { min-height:570px; } .hero-composition { height:460px; } .hero-heading h1 { font-size:80px; }
 .module-index { gap:35px; grid-template-columns:1fr 1.4fr; } .index-links { column-gap:22px; } .index-links a { font-size:13px; }
 .ms-hazir .ms-yazilar { width:min(44vw,460px); }
 .ms-hazir .ms-yazi h3 { font-size:clamp(30px,3.8vw,46px); }
}
/* Alçak masaüstü ekranı: metin bloğu ekrana sığsın */
@media(min-width:901px) and (max-height:820px) {
 .ms-hazir .ms-yazilar { height:68vh; }
 .ms-hazir .ms-yazi h3 { font-size:clamp(30px,3.4vw,50px); }
 .ms-hazir .ms-metin { margin-top:16px; font-size:16px; }
}

/* ── Telefon ───────────────────────────────────────────────────────────── */
@media(max-width:800px) {
 .modules-hero { padding-top:calc(var(--nav-h) + 25px); }
 .edition { display:none; } .hero-layout { grid-template-columns:1fr; }
 .hero-heading { padding:36px 0 20px; } .hero-heading h1 { font-size:clamp(65px,12vw,96px); }
 .hero-heading p { font-size:16px; max-width:440px; }
 .hero-composition { height:350px; width:min(100%,600px); margin:0 auto 32px; }
 .hero-screen { width:80%; } .hero-screen-back { top:5%; left:18%; } .hero-screen-front { top:22%; left:5%; }
 .orbit-label { display:none; } .hero-seal { bottom:0; left:5%; } .hero-seal strong { font-size:54px; } .hero-seal span { font-size:12px; }
 .hero-bottom { font-size:9px; gap:12px; } .hero-bottom i { padding:0 5px; } .hero-bottom a { gap:8px; white-space:nowrap; }
 .module-index { grid-template-columns:1fr; padding:65px var(--tour-gutter); gap:30px; } .index-intro p br { display:none; }
 .index-links a { font-size:14px; } .index-intro h2 { font-size:40px; }
 .reading-bar { padding:12px 18px; font-size:12.5px; letter-spacing:0; } .reading-current { gap:10px; }
 .reading-current b { font-size:12.5px; }
 .reading-all { font-size:0; gap:0; } .reading-all span { font-size:20px; }
 .reading-next { font-size:0; gap:0; } .reading-next span { font-size:20px; }
 .ms-giris,.ms-final { border-radius:30px 30px 0 0; margin-top:-30px; }
 .ms-iz { border-radius:30px 30px 0 0; margin-top:-30px; }
 .ms .baslik { font-size:clamp(34px,8.4vw,52px); }
 .ms .lede { font-size:16px; }
 .ms-hazir .ms-sahne { height:100svh; }
 .ms-hazir .ms-perde { background:linear-gradient(180deg,rgba(5,9,24,.5) 0%,rgba(5,9,24,.12) 26%,rgba(5,9,24,.55) 52%,rgba(5,9,24,.97) 72%,var(--ink) 100%); }
 .ms-hazir .ms-yazilar,.ms-hazir .ms-yazilar.sol,.ms-hazir .ms-yazilar.sag,.ms-hazir .ms-yazilar.dip {
   left:22px; right:22px; top:auto; bottom:6vh; transform:none; width:auto; height:40vh; min-height:0; }
 .ms-hazir .ms-yazilar.dip .ms-yazi h3 { font-size:clamp(28px,8.6vw,42px); max-width:none; }
 .ms-kunye-ad { font-size:clamp(38px,11vw,56px); }
 .ms-hazir .ms-yazi { padding-left:18px; }
 .ms-hazir .ms-yazi h3 { font-size:clamp(28px,8.6vw,42px); max-width:none; }
 .ms-hazir .ms-metin { margin-top:14px; font-size:15px; max-width:none; }
 .ms-hazir .ms-buyut { margin-top:16px; font-size:12px; }
 .ms-hazir .ms-plan img { border-radius:10px; box-shadow:0 26px 60px rgba(0,0,0,.6); }
 .ms-hazir .ms-cerceve { border-width:1.5px; border-radius:8px; }
 .ms-hazir .ms-cerceve span { font-size:9px; line-height:17px; top:-9px; left:8px; }
 .ms-pencere { width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
}
@media(max-width:400px) { .index-links { grid-template-columns:1fr; } .hero-composition { height:270px; } .hero-heading h1 { font-size:64px; } }

@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .hero-heading h1,.hero-heading p,.tour-link { animation:none; }
}
@media print {
 .nav,.reading-bar,.module-index,.hero-composition,.ms-pencere,.ms-buyut,.ms-ilerleme,.ms-cerceve,.ms-perde { display:none !important; }
 .ms-hazir .ms-sahne { position:static; height:auto; }
 .ms-hazir .ms-kadraj { position:relative; aspect-ratio:16/10; }
 .ms-hazir .ms-yazilar { position:static; width:auto; height:auto; transform:none; padding:20px 0; }
 .ms-hazir .ms-yazi { position:static; opacity:1 !important; visibility:visible !important; }
}

/* ── Telefonda etiketler ──────────────────────────────────────────────────
   Künye, sayaç ve rozet yazıları masaüstü ölçüsünde (10-12px, geniş harf
   aralığı) telefonda okunmuyordu. */
@media(max-width:767px) {
  .ms .no { font-size:13px; letter-spacing:.1em; margin-bottom:20px; }
  .ms-etiket li { font-size:13px; padding:7px 14px; }
  .ms-ipucu { font-size:12.5px; letter-spacing:.08em; }
  .ms-sayac { font-size:12.5px; letter-spacing:.1em; }
  .ms-kunye-no { font-size:13px; letter-spacing:.16em; }
  .ms-kunye-not { font-size:12.5px; letter-spacing:.1em; }
  .ms-geri { font-size:12.5px; }
  .ms-pencere-not { font-size:12.5px; }
  .index-links a span { font-size:12.5px; }
  .hero-bottom { font-size:12px; }
  .modules-hero .kod, .module-index .kod, .ms-kunye-ad + p { font-size:13px; letter-spacing:.1em; }
  .ms-hazir .ms-cerceve span { font-size:11px; line-height:19px; top:-10px; }
  .reading-current b { font-size:12.5px; }
}
@media(max-width:400px) { .reading-current b { font-size:12px; } }