/* ContraCORE · Eklenti sayfası sahnesi.
   Ortak token ve bileşenler: sistem.css. Bu dosya yalnız eklenti sahnesi ve sayfanın kendi bölümleri.

   İmza hareketi — GEÇİT:
   Metin sütunuyla portal ekranı arasında sabit duran ince altın dikiş. Portal ekranları bu dikişten
   geçerek gelir; her geçişte dikiş parlar. Dikişin solu ContraCORE'un sesi, sağı portalın kendisi.
   Dört portal boyunca dikiş yer değiştirmez: değişen portal, sabit kalan eklentidir. */

/* ── Sahne kabı ── */
.sahne .ln { padding: .12em 0 .3em; margin: -.12em 0 -.24em; }
.sahne .bas-yazi .ln { padding: 0 0 .08em; margin: 0; }
.sahne { position: relative; min-height: calc(100vh + 44px); min-height: calc(100lvh + 44px); }
.perde-alan { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }

/* ── Portal dünyası: 2560 px'lik kendi piksel düzleminde duran gerçek ekran ── */
.dunya { position: absolute; inset: 0; perspective: 1900px; perspective-origin: 50% 40%;
  animation: ek-acilis 1.7s cubic-bezier(.22,.72,.12,1) both; }
@keyframes ek-acilis { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
.dunya-bulanik { z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 58%); }
#dunya { z-index: 0; }
.duzlem { position: absolute; left: 0; top: 0; width: 2560px; height: 1278px; transform-origin: 50% 50%;
  will-change: transform; background: #0b1120; }
/* Kâğıt: ekran görüntüsünün kendisi. Köşesi yuvarlak, taşan her şeyi kırpar. */
.kagit { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; }
/* Kâğıdın dışı: bölümün KENDİ zemini. Tek bir yayılım gölgesiyle boyanır — ayrı eleman
   yok, ayrı birleştirme katmanı yok (ayrı eleman kullanıldığında kare hızı yarıya iniyordu).
   Böylece tanıtım kadrajlarında ekran, bölümün zemini üstünde duran bir kart gibi okunur;
   yakın planlarda da kadrajda basamak oluşmaz. */
.kagit { box-shadow: 0 0 0 1px var(--kenar-cizgi, rgba(255,255,255,.10)),
  0 60px 130px -60px rgba(0,0,0,.85), 0 0 0 4000px var(--zemin, #050918); }
.ekran { position: absolute; left: 0; top: 0; width: 2560px; height: auto; max-width: none; }
#duzlemB .ekran { height: 1278px; }
.ton-ekran { opacity: .999; }

/* Geçit geçişi: kırpma kutusu ve içindeki ekran ters yönde kayar (yeniden çizim yok) */
/* GEÇİT · yeni portal ekranı, yumuşak bir gradyan perdesiyle eskisinin üstüne açılır.
   Önceden kırpma kutusu soldan kayıyor, içindeki görüntü ters yöne kayarak yerinde
   duruyordu. Kamera sağ tarafa bakarken açılma oraya varana kadar altta boş kâğıt
   görünüyordu — ekranın ortası bomboş beyaz kalıyordu. Kayma kaldırıldı: perde artık
   yönden bağımsız, geniş ve yumuşak kenarlı bir maske. */
.gecis { position: absolute; left: 0; top: 0; width: 2560px; height: 1278px; overflow: hidden; opacity: 0; }
/* Geçit kenarı: geçiş sırasında ekranla birlikte yol alan ışık */
.gecit-kenar { position: absolute; top: 0; left: 0; width: 320px; height: 1300px; margin-left: -160px; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,9,24,0), rgba(219,157,27,.55) 42%, rgba(255,255,255,.9) 50%, rgba(219,157,27,.55) 58%, rgba(5,9,24,0));
  opacity: 0; visibility: hidden; }
.gecit-kenar.acik-kenar { background: linear-gradient(90deg, rgba(243,245,248,0), rgba(176,124,16,.5) 42%, rgba(255,255,255,.95) 50%, rgba(176,124,16,.5) 58%, rgba(243,245,248,0)); }

/* ── Dikiş: sahnenin sabit ekseni. Ekran koordinatında durur, kamerayla oynamaz. ── */
.dikis { position: absolute; z-index: 6; top: 0; bottom: 0; width: 1px; pointer-events: none;
  left: var(--dikis-x, 40%); transform-origin: 50% 50%;
  background: linear-gradient(180deg, rgba(219,157,27,0) 0%, rgba(219,157,27,.5) 22%, rgba(219,157,27,.5) 78%, rgba(219,157,27,0) 100%);
  opacity: 0; visibility: hidden; }
.dikis::after { content: ""; position: absolute; left: -1000px; right: -1000px; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(219,157,27,0), rgba(219,157,27,.18), rgba(219,157,27,0)); opacity: 0; }
.dikis.parla::after { opacity: 1; }
.dikis.acik-dikis { background: linear-gradient(180deg, rgba(176,124,16,0) 0%, rgba(176,124,16,.5) 22%, rgba(176,124,16,.5) 78%, rgba(176,124,16,0) 100%); }

/* ── Işık ve perdeler ── */
.derece { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 47%, rgba(5,9,24,.84) 0%, rgba(5,9,24,.52) 55%, rgba(5,9,24,0) 100%),
    linear-gradient(180deg, rgba(5,9,24,.92) 0%, rgba(5,9,24,.16) 26%, rgba(5,9,24,.26) 70%, var(--ink) 100%),
    linear-gradient(90deg, rgba(5,9,24,.55) 0%, rgba(5,9,24,0) 30%, rgba(5,9,24,0) 70%, rgba(5,9,24,.55) 100%); }
.karart { position: absolute; inset: 0; background: rgba(5,9,24,.82); opacity: 0; visibility: hidden; pointer-events: none; }
.karart.acik-karart { background: rgba(243,245,248,.42); }
.hedef { position: absolute; visibility: hidden; pointer-events: none; }
.yan-perde { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 34%, rgba(5,9,24,.88) 40%, rgba(5,9,24,.45) 46%, rgba(5,9,24,0) 53%); }

/* ── Açılış yazısı ── */
.bas-yazi { position: absolute; z-index: 7; left: 50%; top: 50%; width: min(92vw, 1180px); transform: translate(-50%, -52%); text-align: center; }
.bas-yazi h1 { font-family: var(--display); font-weight: 400; font-size: clamp(50px, 6.4vw, 100px); line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.bas-alt { margin-top: 26px; font-size: clamp(17px, 1.4vw, 21px); color: var(--muted-d); letter-spacing: -.005em; }
.bas-dg { margin-top: 38px; }
.bas-yazi .ln > span { animation: ek-satir .95s cubic-bezier(.16,1,.3,1) .22s both; }
.bas-yazi h1 .ln:nth-child(2) > span { animation-delay: .32s; }
.bas-alt { animation: ek-belir .66s cubic-bezier(.22,.72,.12,1) .5s both; }
.bas-dg { animation: ek-belir .66s cubic-bezier(.22,.72,.12,1) .58s both; }
.nav { animation: ek-belir .6s cubic-bezier(.22,.72,.12,1) .1s both; }
.acilis-bitti .bas-yazi .ln > span, .acilis-bitti .bas-alt, .acilis-bitti .bas-dg, .acilis-bitti .nav { animation: none; }
@keyframes ek-satir { from { transform: translateY(110%); } to { transform: none; } }
@keyframes ek-belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dunya, .bas-yazi .ln > span, .bas-alt, .bas-dg, .nav { animation: none; }
}

/* ── Sahne yazıları: dikişin solunda, güvenli alanın optik merkezinde ──
   top ve transform JavaScript'ten gelir (sabit üst bar düşülmüş görünür alanın merkezi). */
.yan { position: absolute; z-index: 7; left: var(--gutter); width: min(38vw, 560px); visibility: hidden; }
.yan .portal { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.yan .etkin { margin-top: 14px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--gold); }
.yan .buyuk { margin-top: 18px; font-weight: 400; font-size: clamp(40px, 4.4vw, 76px); line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; }
.yan .buyuk.cumle { font-size: clamp(34px, 3.4vw, 60px); line-height: 1.02; }
.yan .aciklama { margin-top: 20px; max-width: 32ch; font-size: 18px; line-height: 1.48; color: var(--muted-d); }
.yan.acik-yan .portal { color: rgba(10,16,36,.55); }
.yan.acik-yan .etkin { color: #8a6412; }
.yan.acik-yan .aciklama { color: var(--muted-l); }

/* ── Bölüm başlıkları (sahne içi) ── */
.sahne-baslik { position: absolute; z-index: 7; left: 0; right: 0; text-align: center; padding: 0 var(--gutter);
  font-family: var(--display); font-weight: 400; font-size: clamp(48px, 5.6vw, 100px); line-height: .98; letter-spacing: -.038em;
  visibility: hidden; }

/* ── Açık tabaka: e-YMM bölümü, alttan yükselir ── */
.tabaka { position: absolute; z-index: 20; inset: 0; background: var(--mist); color: var(--navy); overflow: hidden; will-change: transform; }
.tabaka-kose { position: absolute; z-index: 30; top: 0; width: 40px; height: 40px; pointer-events: none; }
.tabaka-kose.sol { left: 0; background: radial-gradient(circle at 100% 100%, transparent 39.5px, var(--ink) 40px); }
.tabaka-kose.sag { right: 0; background: radial-gradient(circle at 0 100%, transparent 39.5px, var(--ink) 40px); }
.tabaka .duzlem { background: #f5f7fa;
  /* Açık bölümde kâğıdın dışı bölümün kendi zemini olmalı; koyu varsayılan burada yanlış olur */
  --zemin: #f3f5f8; --kenar-cizgi: rgba(10,16,36,.12); }
.tabaka .yan-perde { background: linear-gradient(90deg, var(--mist) 0%, var(--mist) 34%, rgba(243,245,248,.9) 40%, rgba(243,245,248,.5) 46%, rgba(243,245,248,0) 53%); }

/* ── Koyu pencere: İnternet Vergi Dairesi ve WhatsApp, ortadan açılır ── */
.pencere { position: absolute; z-index: 30; inset: 0; visibility: hidden; pointer-events: none; }
.pencere > * { pointer-events: auto; }
.pencere-kirp { position: absolute; inset: 0; overflow: hidden; background: var(--ink); transform-origin: 50% 50%; will-change: transform; }
.pencere-ic { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.pencere-dunya { position: absolute; inset: 0; perspective: 1900px; perspective-origin: 50% 40%; }
/* Kapanış perdesi: açık renkli portal ekranı karanlığa gömülür, yazı önünde kalır.
   Ekranın kendisi tamamen kaybolmaz; hafif bir hayalet olarak durur. */
.pencere-derece { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background:
    radial-gradient(72% 58% at 50% 50%, rgba(5,9,24,.74) 0%, rgba(5,9,24,.88) 58%, rgba(5,9,24,.97) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(5,9,24,.78) 26%, rgba(5,9,24,.78) 74%, var(--ink) 100%); }
.pencere-perde-b { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(5,9,24,.92) 22%, rgba(5,9,24,.62) 42%, rgba(5,9,24,.2) 62%, rgba(5,9,24,0) 80%); }
/* Portalların ekranı açık renkli: koyu pencerede kâğıt gibi dursun diye çerçevesine ince ışık verilir */
.pencere .duzlem { background: #f7f8fb; }

/* ── Kapanış ── */
.son-yazi { position: absolute; z-index: 7; left: 50%; top: 50%; width: min(92vw, 1180px); transform: translate(-50%, -52%); text-align: center; visibility: hidden; }
.son-yazi h2 { font-family: var(--display); font-weight: 400; font-size: clamp(50px, 6.4vw, 100px); line-height: .96; letter-spacing: -.035em; }
.son-yazi .bas-dg { animation: none; }

/* Rehber: sayfanın tek çerçevesi (assets/js/eklenti-rehber.js). Üst barın altında,
   her şeyin üstünde kalır. Konum transform ile, boyut/köşe/renk her karede JS'ten gelir. */
.rehber { position: fixed; z-index: 45; left: 0; top: 0; width: 10px; height: 10px; box-sizing: border-box;
  border: 2px solid var(--gold); border-radius: 14px; opacity: 0; pointer-events: none;
  will-change: transform, width, height; contain: layout style; }
@media (prefers-reduced-motion: reduce) { .rehber { transition: none; } }

/* Hareket azaltma: sahneler arası kısa örtü */
.rm-ortu { position: absolute; z-index: 40; inset: 0; background: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Telefon: yazı üstte, ürün ekranı alt yarıda ── */
@media (max-width: 767px) {
  .bas-yazi { width: calc(100vw - 2 * var(--gutter)); transform: translate(-50%, -50%); }
  .bas-yazi h1 { font-size: clamp(40px, 11.6vw, 58px); }
  .bas-alt { margin: 18px auto 0; max-width: 30ch; font-size: 16px; }
  .bas-dg { margin-top: 28px; }
  .yan { width: calc(100vw - 2 * var(--gutter)); }
  .yan .etkin { font-size: 15px; }
  .yan .buyuk { margin-top: 12px; font-size: clamp(30px, 9.6vw, 44px); }
  .yan .buyuk.cumle { font-size: clamp(26px, 8vw, 38px); }
  .yan .aciklama { margin-top: 14px; font-size: 16px; max-width: 34ch; }
  .yan-perde, .pencere-perde-b { background: linear-gradient(180deg, var(--ink) 0%, rgba(5,9,24,.95) 36%, rgba(5,9,24,.55) 46%, rgba(5,9,24,0) 56%); }
  .tabaka .yan-perde { background: linear-gradient(180deg, var(--mist) 0%, var(--mist) 38%, rgba(243,245,248,.8) 46%, rgba(243,245,248,0) 56%); }
  .sahne-baslik { font-size: clamp(40px, 11.6vw, 58px); }
  .son-yazi { width: calc(100vw - 2 * var(--gutter)); transform: translate(-50%, -50%); }
  .son-yazi h2 { font-size: clamp(40px, 11.6vw, 58px); }
  /* Telefonda dikiş yatay: yazı ile ekranı ayıran çizgi */
  .dikis { left: var(--gutter); right: var(--gutter); width: auto; top: var(--dikis-y, 46%); bottom: auto; height: 1px;
    background: linear-gradient(90deg, rgba(219,157,27,0) 0%, rgba(219,157,27,.5) 18%, rgba(219,157,27,.5) 82%, rgba(219,157,27,0) 100%); }
  .dikis::after { left: 0; right: 0; top: -10px; bottom: -10px;
    background: linear-gradient(180deg, rgba(219,157,27,0), rgba(219,157,27,.18), rgba(219,157,27,0)); }
  .dikis.acik-dikis { background: linear-gradient(90deg, rgba(176,124,16,0) 0%, rgba(176,124,16,.5) 18%, rgba(176,124,16,.5) 82%, rgba(176,124,16,0) 100%); }
}

/* ══ Sahneden sonraki bölümler ══════════════════════════════════════════════
   Ton ritmi ana sayfayla aynı dilde: yeni ton, yuvarlak köşeli bir katman olarak öncekinin üstüne biner. */
.ek-bolum { position: relative; }
.ek-bolum .baslik { font-size: clamp(46px, 5vw, 84px); line-height: .98; letter-spacing: -.036em; }
.ek-bolum .no { margin-bottom: 24px; }
.ek-bolum .lede { margin-top: 26px; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.55; max-width: 46ch; }

/* 01 · Dört portal */
.portallar { background: var(--mist); color: var(--navy); border-radius: 42px 42px 0 0; margin-top: -42px; z-index: 21; }
.pr-duzen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.pr-sol { position: sticky; top: calc(var(--nav-h) + 40px); }
.pr-satirlar { list-style: none; margin: 0; padding: 0; }
.pr-satirlar li + li { border-top: 1px solid var(--line-l); }
.pr-satir { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 20px; margin: 3px 0;
  padding: 24px 22px 24px 24px; border-radius: 18px; transition: background .35s var(--ease); }
.pr-satir.aktif { background: #fff; }
.pr-no { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--muted-l); padding-top: 4px; }
.pr-ad { display: block; font-size: clamp(21px, 1.5vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.pr-isler { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-isler li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; color: var(--muted-l); }
.pr-isler li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* 02 · Oturum */
.oturum { background: var(--ink); color: var(--white); border-radius: 42px 42px 0 0; margin-top: -42px; z-index: 22; }
.ot-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.ot-notlar { list-style: none; margin: 34px 0 0; padding: 0; }
.ot-notlar li { padding: 22px 0; border-top: 1px solid var(--line-d); }
.ot-notlar li:last-child { border-bottom: 1px solid var(--line-d); }
.ot-notlar h3 { font-size: clamp(19px, 1.3vw, 23px); font-weight: 500; letter-spacing: -.02em; }
.ot-notlar p { margin-top: 8px; max-width: 48ch; font-size: 16px; line-height: 1.5; color: var(--muted-d); }

/* 03 · Lisans ve kapanış */
.ek-kapanis { background: var(--mist); color: var(--navy); border-radius: 42px 42px 0 0; margin-top: -42px; z-index: 23;
  padding-bottom: clamp(140px, 22vh, 240px); }
.kp-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 100px); align-items: end;
  padding: clamp(44px, 5vw, 80px) 0 clamp(10px, 2vw, 30px); border-top: 1px solid var(--line-l); }
.kp-sol .baslik { font-size: clamp(48px, 5.4vw, 96px); }
.kp-sag .metin { max-width: 40ch; }
.kp-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.kp-gerek { display: grid; gap: 0; margin-top: clamp(44px, 6vh, 72px); }
.kp-gerek > div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px clamp(24px, 3vw, 60px);
  padding: 22px 0; border-top: 1px solid var(--line-l); }
.kp-gerek dt { font-size: 18px; font-weight: 500; letter-spacing: -.015em; }
.kp-gerek dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted-l); }

.alt-ek { position: relative; z-index: 24; border-top: 0; }

@media (max-width: 900px) {
  .pr-duzen, .ot-duzen, .kp-panel { grid-template-columns: minmax(0, 1fr); }
  .pr-sol { position: static; }
  .pr-satirlar { margin-top: 10px; }
  .pr-satir { grid-template-columns: 36px minmax(0, 1fr); padding: 20px 14px; }
  .kp-gerek > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ?fps ile köşede kare ölçer: gerçek bilgisayarda kare hızını gözle doğrulamak için.
   (Yalnız adres satırında ?fps varsa eklenir; normal ziyarette hiç oluşturulmaz.) */
.fps { position: fixed; z-index: 90; right: 14px; bottom: 14px; padding: 8px 12px; border-radius: 8px;
  background: rgba(5,9,24,.88); color: #f0c352; font: 12px/1.3 var(--mono); letter-spacing: .04em;
  pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }