:root{
  --pe-safe-top:env(safe-area-inset-top,0px);
  --pe-safe-right:env(safe-area-inset-right,0px);
  --pe-safe-bottom:env(safe-area-inset-bottom,0px);
  --pe-safe-left:env(safe-area-inset-left,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  width:100%;
  min-width:320px;
  min-height:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  min-width:0!important;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%}
iframe{display:block;max-width:100%;border:0}

/* Her ana sayfa gerçek ekran genişliğini kullanır. */
:where(.main,.app,.wrap,.landing,.page-shell,.admin-page,.dash-content){
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
:where(.admin-topbar,.admin-hero,.admin-overview,.admin-section,.admin-content){
  width:100%!important;
  max-width:none!important;
}

/* Dashboard ekranı ve içerik stüdyoları. */
.dash-shell{width:100%!important;min-height:100vh;min-height:100dvh}
.dash-main{width:100%!important;max-width:none!important;min-width:0!important}
.dash-content{min-width:0!important}
.embedded-studio,.studio-frame-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  min-height:calc(100dvh - 128px)!important;
  overflow:hidden!important;
}
#studio-frame{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:calc(100dvh - 128px)!important;
  min-height:680px;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
}

/* Admin ve veri tabloları ekrandan taşmaz. */
:where(.tablewrap,.table-wrap,.license-table-wrap){
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
:where(table,.license-admin-table,.license-table){max-width:none}

/* Demo ve sesli kitap ekranın tamamına yerleşir. */
.book{width:100%!important;height:100dvh!important;max-width:none!important}
.module-page{width:100%!important;max-width:none!important}
.page-shell{min-height:calc(100dvh - 84px)!important}
.sheet{width:100%!important;max-width:none!important}
.sheet>.page{
  width:min(100vw,150vh)!important;
  max-width:100vw!important;
  max-height:100dvh!important;
}

/*
 * Dikey doluluk yalnız sayfa kabuğunda uygulanır. Kartların kendi display,
 * grid-template ve yükseklik kuralları korunur; böylece özel atölye ızgaraları
 * ve responsive kırılımlar ezilmez.
 */
@media (min-width:1181px) and (min-height:650px){
  body>:where(.main,.app,.wrap){
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    min-height:100dvh!important;
  }
  .dash-main,.dash-content{
    min-height:100dvh!important;
  }
  .admin-page,.admin-main{
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
  }
  .module-page.active,.module-page.active>.page-shell{
    min-height:calc(100dvh - 82px)!important;
  }

  /* Yalnız kontrollü kart ailelerinde nefes alan dikey ölçü. */
  .dash-card{padding-block:clamp(20px,2.2vh,30px)!important}
  .skill-hero{min-height:clamp(260px,34vh,360px)}
  .skill-module-card{
    min-height:clamp(310px,39vh,400px);
    grid-template-rows:auto minmax(135px,1fr) auto auto;
  }
  .skill-tools article{min-height:clamp(145px,18vh,190px)}
  .studio-module-card{min-height:clamp(270px,34vh,360px)}
  body>.main>:where(.card,.panel){padding-block:clamp(22px,2.2vh,32px)}
}

@media (min-width:1400px){
  .main{padding-inline:clamp(30px,3vw,64px)!important}
  .landing{padding-inline:clamp(28px,3vw,60px)!important}
  .page-shell{padding-inline:clamp(18px,2vw,42px)!important}
}

@media (max-width:1100px){
  :where(.topgrid,.bodygrid,.content-grid,.admin-overview,.admin-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  :where(.stats,.skill-tools){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:900px){
  body{padding-left:var(--pe-safe-left);padding-right:var(--pe-safe-right)}
  .dash-shell{display:block!important}
  .dash-main{padding:0 14px calc(24px + var(--pe-safe-bottom))!important}
  .dash-top{
    position:sticky;
    top:0;
    z-index:35;
    width:100%;
    margin:0;
    padding-top:calc(10px + var(--pe-safe-top))!important;
  }
  #studio-frame{
    height:calc(100dvh - 102px)!important;
    min-height:560px;
  }
  .admin-shell{display:block!important;min-height:100dvh}
  .admin-main{width:100%!important;padding:16px 14px calc(30px + var(--pe-safe-bottom))!important}
  .main{padding:16px 14px calc(30px + var(--pe-safe-bottom))!important}
  .app{width:100%!important;max-width:none!important;padding:14px!important}
  .page-shell{padding:12px 12px calc(86px + var(--pe-safe-bottom))!important}
}

@media (max-width:640px){
  :where(.stats,.topgrid,.bodygrid,.content-grid,.admin-overview,.admin-grid,.grid,.cards,.modules,.quests){
    grid-template-columns:1fr!important;
  }
  :where(.card,.panel,.box,.note,.quest,.module-card){
    min-width:0!important;
    max-width:100%!important;
  }
  :where(.topbar,.dash-top,.admin-topbar,.filters,.form-row){
    max-width:100%!important;
  }
  input,select,textarea{max-width:100%;font-size:16px!important}
  button,a{touch-action:manipulation}
  .toolbar{
    width:calc(100vw - 16px)!important;
    max-width:none!important;
    bottom:calc(8px + var(--pe-safe-bottom))!important;
  }
  .sheet>.page{
    width:100vw!important;
    max-height:none!important;
  }
}

@media (orientation:landscape) and (max-height:600px){
  #studio-frame{height:calc(100dvh - 72px)!important;min-height:420px}
  .page-shell{min-height:100dvh!important}
  .toolbar{bottom:calc(4px + var(--pe-safe-bottom))!important}
}

/*
 * v42 — Referans görseldeki dikey doluluk
 * Masaüstünde görüntü alanının altı boş bırakılmaz. Tablet ve mobilde doğal
 * akış korunur; dolayısıyla kartlar taşmaz ve responsive kırılımlar bozulmaz.
 */
@media (min-width:1181px) and (min-height:720px){
  /* 3:2 ders görseli geniş ekranın tamamına yayılır. Yüzdelik etkileşim
     katmanları aynı sayfayla beraber ölçeklendiği için ses ve quiz alanları
     görsellerin üzerinde kalır. */
  .book>.sheet{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    place-items:stretch!important
  }
  .book>.sheet>.page{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    box-shadow:none!important
  }
  .book>.sheet>.page>.page-image{
    width:100%!important;
    height:100%!important
  }

  /* Dashboard ve bütün gömülü stüdyo sayfaları ekranın kalan yüksekliğini
     gerçek içerik satırlarına dağıtır. */
  .pe-embedded .canvas{
    min-height:100dvh!important;
    padding-bottom:clamp(24px,3vh,42px)!important
  }
  .pe-embedded .wrap{
    width:100%!important;
    max-width:none!important;
    min-height:calc(100dvh - 64px)!important
  }
  .pe-embedded .wrap>.hero,
  .pe-embedded .wrap>.dailyrow{
    flex:0 0 auto
  }
  .pe-embedded .wrap>section:has(.lsrw){
    display:flex;
    flex:1 1 24%;
    min-height:210px;
    flex-direction:column
  }
  .pe-embedded .lsrw{
    flex:1 1 auto;
    grid-auto-rows:minmax(150px,1fr)
  }
  .pe-embedded .lsrw>.skill{
    height:100%;
    min-height:150px;
    padding-block:clamp(22px,2.6vh,34px)
  }
  .pe-embedded .widgets{
    flex:1 1 26%;
    grid-auto-rows:minmax(220px,1fr)
  }
  .pe-embedded .widgets>.card{
    display:flex;
    height:100%;
    min-height:220px;
    flex-direction:column;
    justify-content:space-between
  }

  /* Diğer stüdyo sayfalarında ana ızgara kalan alanı doldurur; kartların
     özel sütun şablonları değiştirilmez. */
  .pe-embedded body>.main{
    display:flex;
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
    flex-direction:column
  }
  .pe-embedded body>.main>:is(.grid,.cards,.modules,.content-grid,.bodygrid,.topgrid,.bottom-grid){
    flex:1 1 auto;
    align-content:stretch
  }

  /* Yönetici ekranı tam yükseklik kullanır; tablolar içerik kadar uzarken
     kısa kartların altında yapay boş sayfa oluşmaz. */
  body>.main{
    min-height:100dvh
  }
  body>.main>.topgrid{
    align-items:stretch
  }
  body>.main>.topgrid>.card{
    height:100%
  }
}

/* Orta genişlikte masaüstü/tablet: ızgaralar iki sütuna geçer ve yükseklik
   içerik tarafından belirlenir. Böylece kartların üst üste binmesi önlenir. */
@media (min-width:641px) and (max-width:1180px){
  .pe-embedded .lsrw,
  .pe-embedded .widgets{
    align-items:stretch
  }
  .pe-embedded .lsrw>.skill,
  .pe-embedded .widgets>.card{
    height:auto;
    min-height:0
  }
}

/* Telefonda ders sayfası en-boy oranını korur ve dikey kaydırılır; masaüstü
   uzatması telefona taşınmaz. */
@media (max-width:640px), (orientation:portrait){
  .book>.sheet{
    height:auto!important;
    min-height:100dvh!important;
    place-items:start center!important
  }
  .book>.sheet>.page{
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:3/2!important
  }
}

/*
 * v43 — Görünür bileşen ölçüleri
 * v42 yalnız kabuğu uzatıyordu. Bu katman doğrudan ekranda görünen kartlara
 * ölçü verir ve boşluğu kartların içindeki gerçek satırlara dağıtır.
 */
@media (min-width:1181px) and (min-height:720px){
  /* Dashboard ana görünümü */
  html.pe-embedded body .canvas{
    display:flex!important;
    min-height:100dvh!important;
    flex-direction:column
  }
  html.pe-embedded body .canvas>.wrap{
    display:grid!important;
    min-height:calc(100dvh - 64px)!important;
    grid-template-rows:
      minmax(190px,.78fr)
      minmax(175px,.68fr)
      minmax(330px,1.28fr)
      minmax(260px,1fr)!important;
    align-content:stretch!important
  }
  html.pe-embedded body .hero,
  html.pe-embedded body .dailyrow,
  html.pe-embedded body .widgets{
    height:100%!important
  }
  html.pe-embedded body .hero{
    min-height:190px!important;
    align-items:stretch!important
  }
  html.pe-embedded body .dailyrow{
    min-height:175px!important
  }
  html.pe-embedded body .dailyrow>.card{
    height:100%!important;
    justify-content:center
  }
  html.pe-embedded body .wrap>section:has(>.lsrw){
    display:grid!important;
    min-height:330px!important;
    grid-template-rows:auto minmax(0,1fr)!important
  }
  html.pe-embedded body .lsrw{
    height:100%!important;
    grid-template-rows:repeat(2,minmax(145px,1fr))!important
  }
  html.pe-embedded body .lsrw>.skill{
    min-height:145px!important;
    padding:clamp(24px,2.8vh,36px)!important
  }
  html.pe-embedded body .widgets{
    min-height:260px!important;
    grid-template-rows:minmax(260px,1fr)!important
  }
  html.pe-embedded body .widgets>.card{
    min-height:260px!important;
    padding:clamp(24px,2.6vh,34px)!important
  }
  html.pe-embedded body .wordrow{
    flex:1 1 auto;
    min-height:54px
  }
  html.pe-embedded body .minihm{
    flex:1 1 auto;
    min-height:105px
  }

  /* Dashboard içindeki dört beceri merkezi ve Beceri Atölyeleri */
  .skill-hub{
    min-height:calc(100dvh - 150px)!important;
    grid-template-rows:auto minmax(360px,1fr) auto!important
  }
  .skill-modules{
    align-items:stretch!important;
    grid-auto-rows:minmax(360px,1fr)!important
  }
  .skill-module-card{
    min-height:360px!important;
    grid-template-rows:auto minmax(150px,1fr) auto auto!important;
    padding:clamp(18px,2vh,26px)!important
  }
  .skill-illustration{
    min-height:150px!important
  }
  .skill-illustration .p3d-icon{
    --p3d-size:clamp(96px,8vw,128px)!important
  }
  .skill-module-card>p{
    min-height:58px!important;
    font-size:13px!important;
    line-height:1.55!important
  }
  .skill-enter{
    min-height:52px!important;
    font-size:12px!important
  }
  .skill-tools{
    align-items:stretch!important;
    grid-auto-rows:minmax(175px,1fr)!important
  }
  .skill-tools>article{
    min-height:175px!important;
    padding:clamp(20px,2.2vh,30px)!important
  }

  /* Dinleme, konuşma, okuma ve yazma stüdyo kartları */
  .studio-modules,
  .studio-grid{
    align-items:stretch!important;
    grid-auto-rows:minmax(330px,1fr)!important
  }
  .studio-module-card,
  .studio-writing .studio-module-card,
  .studio-speaking .studio-module-card,
  .studio-listening .studio-module-card{
    min-height:330px!important;
    padding:clamp(18px,2vh,26px)!important
  }

  /* Admin ekranında form ve özet kolonları ekranın altına kadar dengeli uzar. */
  body>.main>.stats{
    grid-auto-rows:minmax(105px,auto)!important
  }
  body>.main>.topgrid{
    min-height:520px!important;
    grid-auto-rows:minmax(520px,auto)!important
  }
  body>.main>.topgrid>.card{
    min-height:520px!important;
    padding:clamp(26px,2.8vh,38px)!important
  }
  body>.main>.topgrid>.card>:last-child{
    margin-bottom:0!important
  }
}

/* 1180 px ve altında kesinlikle masaüstü kart yükseklikleri taşınmaz. */
@media (max-width:1180px){
  html.pe-embedded body .canvas,
  html.pe-embedded body .canvas>.wrap{
    display:block!important;
    min-height:0!important
  }
  html.pe-embedded body .hero,
  html.pe-embedded body .dailyrow,
  html.pe-embedded body .widgets,
  html.pe-embedded body .wrap>section:has(>.lsrw),
  html.pe-embedded body .lsrw,
  html.pe-embedded body .lsrw>.skill,
  html.pe-embedded body .widgets>.card,
  .skill-hub,
  .skill-module-card,
  .skill-tools>article,
  .studio-module-card{
    height:auto!important
  }
}