/* ──────────────────────────────────────────────────────────────────────────
   v3 · MOBİL KATMAN 2 (≤720px) — ekranları KESMEDEN okunur ve profesyonel sunum
   --------------------------------------------------------------------------
   • Masaüstü (ray modu: min-width:901px & min-height:721px) bu kuralların
     HİÇBİRİNİ görmez. Sarmalayıcılar (.panview/.mdeck) masaüstünde
     display:contents ile ŞEFFAFtır → düzen bayt bayt aynı kalır.
   • Bu dosya index.html'de EN SON yüklenir; eşit özgüllükte lp-v3-mobile.css'i
     yük sırasıyla ezer.
   • İki mekanik: (1) telefon "device deck" (yatay kaydır-yapış),
     (2) panel "pannable board" (720px kutu + overflow-x → --s otomatik 0.61).
   ────────────────────────────────────────────────────────────────────────── */

/* Sarmalayıcılar masaüstünde şeffaf; yardımcı öğeler gizli */
.panview,.mdeck{display:contents}
.panhint,.lb-btn,.lb-scrim,.lb-close{display:none}

/* ───────── CANLI EKRAN "KALKANI" — ekranlar etkileşimsiz ─────────
   Her canlı ekranın üstünde şeffaf, fiziksel bir örtü: dokunuş/tıklama burada yakalanır,
   iframe'in içine HİÇ ulaşmaz (pointer-events:none'ın bazı mobil tarayıcılarda iframe'de
   çalışmaması sorununu kesin çözer). Native kaydırma (deck/board/sayfa) ve "Büyüt" çalışır,
   çünkü kaydırma tarayıcının compositor'ı tarafından konteynerde yapılır; otomatik demolar oynar. */
.v3 .screen-shield{position:absolute;inset:0;z-index:9;background:transparent}

/* ───────── .pts madde işaretleri (MASAÜSTÜ + MOBİL) ─────────
   li `display:flex;gap:10px` olduğu için kalın <b> baş kısım ve cümlenin kalanı AYRI iki flex
   öğesi olup yan yana iki (yanlış hizalı) sütuna düşüyordu. Blok akış + konumlu nokta ile
   "kalın giriş + metin" normal satır içi akar. Global (medya sorgusu dışında). */
.v3 .rail .pts li{display:block;position:relative;padding-left:16px;gap:0}
.v3 .rail .pts li::before{position:absolute;left:0;top:7px;margin:0}

/* ───────── YATAY AŞIRI-KAYDIRMA ENGELİ ─────────
   Sayfanın yana sürüklenmesini (over-scroll/rubber-band) önler: KÖKTE (html) yatay taşmayı kırp.
   body'de overflow-x:hidden vardı ama html'de yoktu; iOS'ta kaydırıcı html olduğu için yana kayabiliyordu.
   Deck/board'lar kendi overflow-x:auto'larıyla İÇERİDE kaydırmaya devam eder; dikey kaydırma etkilenmez. */
@media (max-width:720px),(pointer:coarse){
  html{overflow-x:clip}
  html,body{overscroll-behavior-x:none}
}

/* ───────── CANLI EKRANLAR ETKİLEŞİMSİZ (dokunmatik cihazlar) ─────────
   Telefon/tablet (pointer:coarse, HER genişlik) ve dar ekranlarda canlı ekranlara dokunmak
   hiçbir hareket yaratmasın: dokunuş iframe'in İÇİNE değil, onu saran deck/board/sayfa kaydırma
   konteynerine geçer → kaydırma ve "Büyüt" çalışır, ekranın kendisi tepki vermez.
   Otomatik demolar oynamaya devam eder. Masaüstü FARE etkileşimi korunur (pointer:fine eşleşmez). */
@media (max-width:720px),(pointer:coarse){
  .v3 .live iframe{pointer-events:none}
}

@media (max-width:720px){

  /* ===================== TELEFON DECK'İ ===================== */
  /* Ortak deck: yatay kaydır-yapış, ekran başına ~%86 + sonrakinin ucu görünür */
  .v3 .mdeck{
    display:flex;gap:14px;align-items:stretch;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;padding:2px 2px 10px;scroll-padding-inline:2px;
  }
  .v3 .mdeck::-webkit-scrollbar{display:none}
  .v3 .mdeck>*{flex:0 0 86%;scroll-snap-align:center;min-width:0}

  /* İkili sahneler: #ogrenci #sonuc #akademisyen #sinif → başlık + telefon deck'i */
  .v3 .stagebox:not(.single){
    display:flex;flex-direction:column;align-items:stretch;gap:14px;
    height:auto;min-height:0;padding:16px 10px 16px;
  }
  .v3 .stagebox:not(.single) .cap{position:static;align-self:flex-start;margin:0;left:auto;top:auto}
  /* NOT: .pw'nin flex-basis'i burada verilmeli — lp-v3-mobile.css'teki ".stagebox .pw{flex:1 1 0}"
     (0,3,0) daha özgül; deck slaytının ~%86 genişliği ancak bu (0,4,0) kuralla kazanır. */
  .v3 .stagebox:not(.single) .mdeck .pw,
  .v3 .stagebox:not(.single) .mdeck .pw.back{flex:0 0 86%;scroll-snap-align:center;min-width:0;display:flex;justify-content:center;align-items:flex-start;margin:0}
  .v3 .stagebox:not(.single) .mdeck .phone{width:100%;max-width:none;margin:0}

  /* Hero telefonları: kırık 2-kolon grid yerine aynı deck (eşitsiz kolon + taşma biter) */
  .v3 .tphones{
    display:flex;gap:14px;align-items:stretch;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;padding:2px 2px 8px;scroll-padding-inline:2px;
  }
  .v3 .tphones::-webkit-scrollbar{display:none}
  .v3 .tphones .tphone{
    flex:0 0 78%;scroll-snap-align:center;min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .v3 .tphones .tphone .phone{width:100%;max-width:none;margin:0}
  .v3 .tphones .tcap{order:-1;margin:0}

  /* ===================== PANEL PANNABLE BOARD ===================== */
  /* Kutuyu 720px yap → fitOne --s'i 720/1180≈0.61'e çıkarır (JS değişmeden);
     board, kolon genişliğindeki .panview içinde yatay kaydırılarak gezilir. */
  /* NOT: panview'e mask VERİLMEZ — mask, position:fixed çocuk için containing-block oluşturur ve
     lightbox'ı panview'e hapsederdi. Mask yok → lightbox doğal olarak viewport'a kaçar (:has hack'i gerekmez). */
  .v3 .panview{
    display:block;position:relative;overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-radius:16px;
  }
  .v3 .panview::-webkit-scrollbar{display:none}
  .v3 .panview .browser.live{width:720px;min-width:720px;max-width:none;transform:none;margin:0}

  /* "yana kaydır" ipucu — board'un altında, statik */
  .v3 .panhint{
    display:inline-flex;align-items:center;gap:6px;margin:10px auto 0;
    padding:5px 11px;border-radius:999px;background:var(--cool);
    font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--deep);
  }
  .v3 .panhint svg{width:14px;height:14px;opacity:.85}
  .dark .v3 .panhint,.v3 .dark .panhint{background:rgba(143,208,221,.14);color:#9FDCE8}

  /* Hero trio bir GRID: tek kolonu içindeki 720px panele göre büyümesin (viewport taşması olmasın) */
  .v3 .trio{grid-template-columns:minmax(0,1fr)}
  .v3 .trio>*{min-width:0;max-width:100%}
  /* Hero paneli + #kurum geniş panel: panview tam kolon genişliği, ortalı ipucu */
  .v3 .tpanel{display:flex;flex-direction:column;align-items:center;min-width:0}
  .v3 .tpanel .panview,.v3 .panelwide .panview{width:100%;min-width:0}
  .v3 .panelwide{display:flex;flex-direction:column;align-items:center}

  /* ===================== #raporlar: yatay karusel → dikey yığın ===================== */
  /* Her rapor paneli kendi pannable board'ı; iç içe yatay kaydırma kalmaz. */
  .v3 #hcar .hcar-track{display:block;overflow:visible;scroll-snap-type:none;gap:0;padding:0}
  .v3 #hcar .hslide{width:100%;flex:none;margin:0 0 26px;scroll-snap-align:none;align-items:center}
  .v3 #hcar .hslide:last-child{margin-bottom:0}
  .v3 #hcar .hslide .panview{width:100%}
  .v3 #hcar .hslide figcaption{margin-top:12px}
  .v3 #hcar .hdots,.v3 #hcar .hbtn{display:none}

  /* ===================== Tekli & galeri telefonları (tutarlı büyüklük) ===================== */
  /* Zaten okunur (~0.6); deck'lerle tutarlı olsun diye hafif büyütülür (~0.72). */
  .v3 .stagebox.single .phone{width:min(100%,300px)}
  .v3 .gal.g3 .fig .phone,.v3 .gal.g2 .fig.row .phone{width:min(82vw,300px)}


  /* ===================== BÜYÜT (lightbox) — paneli tam 1.0× ayrıntıyla oku ===================== */
  /* Konteynerler konumlu → Büyüt butonu board'un sağ-üstüne oturur */
  .v3 .tpanel,.v3 .panelwide,.v3 #hcar .hslide{position:relative}
  .v3 .lb-btn{
    display:inline-flex;align-items:center;gap:5px;position:absolute;top:10px;right:10px;z-index:6;
    padding:6px 11px 6px 9px;border:0;border-radius:999px;cursor:pointer;font:inherit;
    font-size:11px;font-weight:800;letter-spacing:.03em;
    background:rgba(14,90,107,.92);color:#fff;box-shadow:0 6px 16px -6px rgba(10,60,71,.6)}
  .v3 .lb-btn svg{width:13px;height:13px}
  .v3 .dark .lb-btn{background:rgba(255,255,255,.94);color:var(--deep)}
  /* açık durum: panel ekranı tam ekran, iframe YENİDEN OLUŞTURULMAZ (sadece sınıf) → yeniden yükleme yok */
  .v3 .lb-scrim{display:block;position:fixed;inset:0;z-index:205;background:rgba(8,26,28,.74)}
  .v3 .browser.live.lb-open{
    position:fixed;inset:10px;z-index:210;width:auto;max-width:none;min-width:0;height:auto;
    overflow:auto;-webkit-overflow-scrolling:touch;border-radius:14px;transform:none;
    -webkit-mask:none;mask:none;background:#fff;box-shadow:0 30px 90px -20px rgba(0,0,0,.6)}
  .v3 .browser.live.lb-open .bar{width:1180px;position:sticky;top:0;z-index:2}
  .v3 .browser.live.lb-open .body{width:1180px;min-width:1180px}  /* --s = 1180/1180 = 1.0 (native) */
  .v3 .lb-close{
    display:grid;place-items:center;position:fixed;top:16px;right:16px;z-index:220;
    width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
    background:#fff;color:var(--deep);box-shadow:0 10px 24px -8px rgba(0,0,0,.55)}
  .v3 .lb-close svg{width:20px;height:20px}
}