/* ===================================================================
   Skillify Academy — premium rötuşlar + duyarlılık düzeltmeleri
   app.css ve home.css'ten SONRA yüklenir.
   =================================================================== */

/* ---------- Yatay taşma koruması (mobilde en sık görülen hata) ---------- */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,canvas,table,pre{max-width:100%}
.tbl__scroll,.chips,.tbl-wrap{max-width:100%}
*{min-width:0}                       /* grid/flex çocuklarının taşmasını engeller */

/* ---------- Tipografi rafinesi ---------- */
body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
h1,h2,h3,h4,.display{text-wrap:balance}
p,li,.hero__lead,.shead p{text-wrap:pretty}
.display{font-optical-sizing:auto}

/* ---------- Butonlar: daha derin, daha premium ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn--primary{
  background:linear-gradient(160deg,var(--ink-700) 0%,var(--ink-900) 55%,var(--ink-950) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 6px 18px rgba(15,30,51,.20);
}
.btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 26px rgba(15,30,51,.28)}
.btn--primary:active,.btn--gold:active,.btn--ghost:active{transform:translateY(1px)}
.btn--gold{
  background:linear-gradient(160deg,#E0B54A 0%,var(--gold-500) 48%,var(--gold-600) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 22px rgba(201,150,43,.32);
  color:#3A2A06;
}
.btn--gold:hover{color:#2E2105;filter:brightness(1.04)}
.btn--ghost{box-shadow:0 1px 2px rgba(15,30,51,.05)}
.btn--lg{border-radius:14px}
/* dokunmatik hedef boyutu */
@media(pointer:coarse){.btn,.chip,.side__nav a,.nav a{min-height:44px}}

/* ---------- Form alanları ---------- */
.inp{box-shadow:0 1px 2px rgba(15,30,51,.04) inset}
.inp:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-600) 14%,transparent),
                     0 1px 2px rgba(15,30,51,.04) inset}
/* iOS'ta odaklanınca sayfayı zoomlamasın */
@media(max-width:820px){.inp,.otp input,select,textarea{font-size:16px}}

/* ---------- Kartlar ---------- */
.card,.pcard,.cert,.stat{will-change:transform}
.pcard,.cert,.card--hover{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
@media(pointer:coarse){
  .pcard:hover,.cert:hover,.card--hover:hover{transform:none;box-shadow:var(--sh-xs)}
  .pcard:hover .pcard__media img{transform:none}
}

/* ---------- Header ---------- */
.hdr{box-shadow:0 1px 0 rgba(15,30,51,.04)}
.hdr__in{min-height:var(--nav-h)}
@media(max-width:940px){
  .hdr__cta .btn{padding:.55rem .9rem;font-size:.88rem}
  .nav{box-shadow:0 12px 28px rgba(15,30,51,.12)}
}
@media(max-width:400px){
  .hdr__cta .btn--primary{display:none}   /* dar ekranda logo + menü yeter */
}

/* ---------- Auth: son rötuşlar ---------- */
.auth__aside .auth__pt span{max-width:34ch}
.auth__main .alert{text-align:left}
@media(max-width:999px){
  .auth{background:
    radial-gradient(680px 380px at 50% -12%, rgba(201,150,43,.07), transparent 60%),
    var(--bg)}
  .auth__brand{margin-bottom:1.9rem}
}
/* çok kısa ekranlarda dikey ortalama yerine akış */
@media(max-height:700px) and (min-width:1000px){
  .auth__main{justify-content:flex-start;padding-top:3rem}
  .auth__aside{justify-content:center;gap:2.5rem}
}

/* ---------- Hero ---------- */
@media(max-width:960px){
  .hero:not(.hero--stage){background:
    radial-gradient(600px 380px at 78% -6%, rgba(201,150,43,.10), transparent 62%),
    var(--surface)}
  .hero__copy h1{font-size:clamp(1.9rem,1.35rem + 2.6vw,2.6rem)}
}
@media(max-width:380px){.hero__pts li{font-size:.88rem}}

/* ---------- Ürün kartları ---------- */
.pcard__body h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:600px){
  .pcard{flex-direction:row;align-items:stretch}
  .pcard__media{width:38%;flex:none;aspect-ratio:auto;min-height:100%}
  .pcard__body{padding:.85rem .95rem .3rem}
  .pcard__body h4{font-size:.96rem;-webkit-line-clamp:3}
  .pcard__body p{display:none}
  .pcard__foot{padding:.3rem .95rem .9rem;flex-direction:column;align-items:flex-start;gap:.5rem}
  .pcard__foot .btn{width:100%}
  .pcard__kind{font-size:.63rem;margin-bottom:.4rem}
}
@media(max-width:380px){
  .pcard{flex-direction:column}
  .pcard__media{width:100%;aspect-ratio:16/10}
  .pcard__body p{display:-webkit-box}
}

/* ---------- Panel ---------- */
.side{scrollbar-width:thin}
.main{max-width:100%}
.stat b{font-variant-numeric:tabular-nums lining-nums}
@media(max-width:1000px){
  .topbar{box-shadow:0 1px 0 rgba(15,30,51,.05)}
  .main{padding-bottom:3rem}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr 1fr;gap:.7rem}
  .stat{padding:.9rem;gap:.65rem;flex-direction:column;align-items:flex-start}
  .stat__ico{width:36px;height:36px}
  .stat b{font-size:1.35rem}
  .stat span{font-size:.75rem}
  .certs{grid-template-columns:1fr}
  .cert__acts .btn{flex:1}
}

/* ---------- Teşekkür sayfası ---------- */
@media(max-width:560px){
  .thanks__seal{width:78px;height:78px}
  .thanks__seal svg{width:36px;height:36px}
  .receipt__r{flex-direction:column;gap:.15rem;align-items:flex-start}
  .receipt__r dd{text-align:left}
  .thanks .row .btn{width:100%}
}

/* ---------- Footer ---------- */
.ftr__grid{align-items:start}
@media(max-width:520px){
  .ftr__bot{flex-direction:column;gap:.5rem;text-align:center;align-items:center}
}

/* ---------- Seçim & kaydırma çubuğu ---------- */
::selection{background:color-mix(in srgb,var(--gold-400) 40%,transparent);color:var(--ink-950)}
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}
}

/* ---------- Yazdırma ---------- */
@media print{
  .hdr,.ftr,.side,.topbar,.cta,.btn,.chips{display:none!important}
  body{background:#fff}
  .card,.receipt{box-shadow:none;border-color:#ccc}
}

/* ===================================================================
   Panel düzeltmeleri
   =================================================================== */

/* HATA: .btn içindeki SVG'lerin boyutu tanımlı değildi → ikon-only butonlar
   (indirme butonu) tamamen boş görünüyordu. */
.btn svg{width:17px;height:17px;flex:none;stroke-width:1.9}
.btn--lg svg{width:19px;height:19px}
.btn--sm svg{width:15px;height:15px}
.btn--icon{padding-inline:.7rem}
.alert svg,.empty__ico svg,.feat__ico svg,.stat__ico svg,.cert__seal svg{flex:none}

/* Tablo aksiyon sütunu — buton görünür ve hizalı olsun */
.tbl td:last-child{white-space:nowrap;text-align:right}
.tbl td:last-child .btn{min-width:auto}
@media(max-width:760px){
  .tbl--stack td:last-child{justify-content:flex-end}
  .tbl--stack td:last-child .btn{width:auto}
}

/* Dosya adları uzun olabilir — taşmasın */
.tbl td .b{overflow-wrap:anywhere}
.tbl--stack td{overflow-wrap:anywhere}

/* Kenar çubuğu logosu hizası */
.side .logo{padding:.25rem .3rem .1rem}

/* Doğrulama uyarısı — CTA belirgin olsun */
.alert a{font-weight:650;text-decoration:underline;text-underline-offset:2px}
.alert--warn a{color:var(--warn-600)}

/* Boş tip rozetleri */
.badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ===================================================================
   Logo boyut güvencesi (önbellekten eski CSS gelse bile taşmasın)
   =================================================================== */
.logo{max-width:220px}
.logo picture,.logo img{max-height:44px;width:auto}
.logo--full .logo__img{height:38px!important;width:auto!important;max-width:190px}
.logo--sm .logo__img{height:32px!important}
.logo--light .logo__mark-img{height:30px!important;width:auto!important}
@media(max-width:520px){
  .logo--full .logo__img{height:30px!important;max-width:150px}
  .logo{max-width:170px}
}
.hdr .logo{flex:0 1 auto;min-width:0}

/* ===================================================================
   Arka plan dokusu — görseller gelene kadar sayfa boş görünmesin
   (tamamı CSS, ek istek yok, 0 KB)
   =================================================================== */
.hero:not(.hero--stage){
  background-image:
    radial-gradient(900px 520px at 84% -6%, rgba(201,150,43,.13), transparent 60%),
    radial-gradient(720px 500px at 4% 104%, rgba(37,99,235,.08), transparent 58%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
  position:relative;
}
/* ince ızgara — kurumsal derinlik */
.hero:not(.hero--stage)::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,30,51,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,30,51,.032) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 65% at 30% 45%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 30% 45%,#000 25%,transparent 75%);
}
.hero:not(.hero--stage)>*{position:relative;z-index:1}

.section--tint{
  background-image:
    radial-gradient(700px 420px at 92% 8%, rgba(201,150,43,.07), transparent 62%),
    linear-gradient(180deg,#F5F8FB,#EFF4F9);
}

.section--dark{position:relative;overflow:hidden;isolation:isolate}
.section--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 90% 75% at 55% 40%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 55% 40%,#000 25%,transparent 80%);
}
.section--dark::after{
  content:"";position:absolute;z-index:-1;width:620px;height:620px;border-radius:50%;
  border:1px solid rgba(224,181,74,.10);top:-230px;right:-190px;
}

.cta{isolation:isolate}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 20%,transparent 78%);
}

/* Sipariş başarılı sayfası — sıcak, sakin zemin */
body:has(.thanks){
  background-image:radial-gradient(760px 460px at 50% -8%, rgba(21,154,99,.07), transparent 62%);
  background-repeat:no-repeat;
}

/* Ürün kartı görselleri gelene kadar zarif yer tutucu */
.pcard__media{background:linear-gradient(150deg,var(--surface-2),var(--ink-100))}

/* Görsel dosyaları eklendiğinde bu blok devreye girer — dosya yoksa hiçbir şey olmaz */
@supports (background-image:image-set(url("x") 1x)){
  .bg-ready .hero{background-image:
    linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.7) 55%,rgba(255,255,255,.5)),
    url("/assets/img/bg/hero-light.webp");
    background-size:cover;background-position:right center}
}

/* HATA: .hdr__in{width:100%} kuralı .wrap'in max-width'ini eziyordu →
   başlık içeriği tam ekran genişliğine yayılıp logo kenara yapışıyordu. */
.hdr__in{width:min(1200px,calc(100% - 2.5rem))!important;margin-inline:auto}


/* ===================================================================
   MOBIL UYUM YAMALARI  (denetim: 48 dogrulanmis bulgu -> 12 kok neden)
   Bu blok EN SONDA durmali; app.css/home.css/course.css degistirilmedi.
   =================================================================== */

/* K4 — buton etiketi kirpiliyordu (.btn{overflow:hidden} + nowrap) */
.btn{overflow:visible}
@media(max-width:560px){
  .btn--lg{padding:.85rem 1.15rem;font-size:.97rem}
  .btn--block{white-space:normal;line-height:1.3}
}

/* K5 — kirilamayan uzun dizeler (e-posta, URL, oturum kimligi) */
.prose,.prose p,.alert,.alert div,.card,.receipt__r dd,.cert__row dd,
.ck__item p,.field__hint,.mut-3,.xs,td,th,dd,.hero__lead{
  overflow-wrap:anywhere;word-break:normal
}
code,kbd,samp,.mono{overflow-wrap:anywhere}

/* K6 — dokunma hedefi 44px (WCAG 2.5.5) */
@media(max-width:768px){
  .crumb a,.ftr a,.consent a,.field__hint a,.xs a,.side__nav a{
    display:inline-block;min-height:32px;line-height:32px}
  .btn:not(.btn--sm){min-height:44px}
  .chip{min-height:40px}
}

/* K1 — .pcard mobil duzeni: dar ekranda satir cokuyordu */
@media(max-width:600px){
  .pcard{display:grid;grid-template-columns:38% minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
  .pcard__media{grid-column:1;grid-row:1/-1;width:auto;height:100%;aspect-ratio:auto;min-height:120px}
  .pcard__body{grid-column:2;grid-row:1;padding:.85rem .95rem .3rem;flex:none}
  .pcard__body h4{font-size:.96rem}
  .pcard__body p{display:none}
  .pcard__foot{grid-column:2;grid-row:2;padding:.3rem .95rem .9rem;margin-top:0;
    flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}
  .pcard__foot .btn{width:auto;flex:none}
  .pcard .pcard__kind{font-size:.75rem;letter-spacing:.05em;margin-bottom:.4rem}
}
@media(max-width:430px){
  .pcard{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .pcard__media{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:16/10;min-height:0}
  .pcard__body{grid-column:1;grid-row:2}
  .pcard__body p{display:-webkit-box}
  .pcard__foot{grid-column:1;grid-row:3;flex-direction:column;align-items:stretch}
  .pcard__foot .btn{width:100%}
}

/* K12 — hero: mobilde okunmaz kucuk yazi (clamp tabanlari overlay icin kurulmustu) */
@media(max-width:1023px){
  .hero__lead{font-size:1.02rem;line-height:1.7}
  .hero__trust li{font-size:.86rem}
  .hero__copy h1{font-size:clamp(2rem,1.35rem + 2.6vw,2.7rem)}
  .hero__pic img{aspect-ratio:900/844}
}
.hero__pic img{background:#F2F4F7}

/* K9 — 941-1000px arasi menu olu bolgesi */
@media(min-width:941px) and (max-width:1000px){ .burger{display:inline-flex} }