/* =========================================================
   PriceONN v2 · GİRİŞ VE KAYIT MODALI (A2), kabuk
   Bileşen dili site kabuğuyla aynı (priceonn.css / site.css); görünüm parçalarının ve MARKA PANELİNİN biçimi
   auth.css'te (sayfa ve modal AYNI parçaları basar; burada yalnız kabuk ve modala özgü ölçüler var).

   İki panelli kart (1 Ekim 2026, operatör: "modal çok daha iyi olabilir"). Referans: Linear, Stripe, Vercel,
   Raycast giriş pencereleri. Sol panel marka + gerçek canlı fiyat (auth/_panel.php), sağ panel form.
   - < 600: alttan açılan tam genişlik sayfa; üstte ince marka şeridi (logo + fiyat), form tek sütun, kaydırılır.
   - 600-899: ortalanmış 680 px kart; şerit üstte, formun ilk iki alanı ve sağlayıcılar yan yana.
   - >= 900: 800 px kart, paneller yan yana (280 + form). Kart yüksekliği pencereye sığar, form gövdesi kayar.
   Yazı boyutları yalnız TASARIM-PLANI 6.2 ölçeğinden (12 14 16 18 24 30); 12 px altı yok.
   Başlık önünde CSS ile kısa çizgi süsü YOK (operatör kuralı).

   Derinlik: aydınlıkta yumuşak, uzun gölge; karanlıkta ton farkı + üst kenarda 1 px iç ışık (plan 7).
   Hareket: açılışta kart yükselir + solar (tek an), panel içeriği kademeli (auth.css), görünüm geçişinde 6 px kayma;
   reduced-motion'da hiçbiri.
   ========================================================= */

.auth-sheet{
  padding:0;max-height:calc(100% - 12px);max-height:calc(100dvh - 12px);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;overscroll-behavior:contain;
  background:var(--bg-surface);border-color:var(--border-subtle);
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
}
:root[data-theme=dark] .auth-sheet{background:linear-gradient(180deg,#111727,#0e1320);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -8px 48px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .auth-sheet{background:linear-gradient(180deg,#111727,#0e1320);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -8px 48px rgba(0,0,0,.5)}
}
.auth-sheet .grab{margin:8px auto 4px}

/* Perde: modal açıkken arka plan hafif bulanır (odak diyalogdadır; arama sayfası etkilenmez). */
body:has(#auth-modal:not([hidden])) #scrim{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- kapat düğmesi: kartın sağ üstünde, şeridin üstünde ---------- */
.auth-sheet .auth-x{position:absolute;top:16px;right:10px;z-index:3;color:rgba(242,244,248,.78);border-radius:var(--r-md);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.auth-sheet .auth-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.auth-sheet .auth-x:focus-visible{outline:2px solid var(--onn-1);outline-offset:-2px}

/* ---------- marka şeridi (telefon): kapat düğmesine yer bırakır ---------- */
.auth-sheet .auth-brand{padding-right:64px;border-radius:0}

/* ---------- form paneli ---------- */
.auth-sheet .auth-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.auth-sheet-b{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px));scrollbar-width:thin;scrollbar-color:var(--border-control) transparent}
.auth-sheet-b::-webkit-scrollbar{width:8px}
.auth-sheet-b::-webkit-scrollbar-thumb{background:var(--border-control);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.auth-sheet .auth-tabs{margin:0 0 20px}
.auth-sheet .auth-h{font-size:1.5rem;line-height:2rem}
.auth-sheet .auth-sub{margin:0 0 20px}

/* Görünüm geçişi: yeni gövde 6 px aşağıdan solarak gelir (auth-modal.js swap, .is-swap). */
.auth-sheet-b.is-swap{animation:auth-swap var(--t-mid) var(--ease)}
@keyframes auth-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Yükleniyor duyurusu: ekran okuyucuya gider, görsel karşılığı üst şeritteki akış. */
.auth-busy{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Üst kenardaki marka şeridi (karttaki ile aynı imza; çizgi süsü değil, kabuk kenarı). Yüklenirken akar. */
.auth-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:linear-gradient(90deg,var(--onn-1),var(--onn-2),var(--onn-3),var(--onn-4),var(--onn-1));background-size:200% 100%;opacity:.9;z-index:2}
.auth-sheet.is-loading::before{animation:auth-flow 1.1s linear infinite}
@keyframes auth-flow{to{background-position:-200% 0}}

/* ---------- tablet: ortalanmış 680 px kart, şerit üstte ---------- */
@media (min-width:600px){
  .auth-sheet{
    left:50%;right:auto;bottom:auto;top:50%;
    width:min(680px,calc(100vw - 32px));
    max-height:min(calc(100vh - 48px),920px);
    grid-template-rows:auto minmax(0,1fr);
    border-radius:var(--r-xl);
    transform:translate(-50%,-47%) scale(.985);
    opacity:0;
    transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease);
    box-shadow:0 24px 64px -16px rgba(11,18,32,.28),0 2px 8px rgba(11,18,32,.06);
  }
  :root[data-theme=dark] .auth-sheet{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 80px -16px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.3)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme=light]) .auth-sheet{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 80px -16px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.3)}
  }
  .auth-sheet.show{transform:translate(-50%,-50%) scale(1);opacity:1}
  .auth-sheet .grab{display:none}
  .auth-sheet .auth-brand{padding:14px 72px 14px 24px;min-height:64px}
  .auth-sheet .auth-x{top:12px;right:12px}
  .auth-sheet-b{padding:20px 28px 28px}
  .auth-sheet .auth-tabs{margin:0 0 20px}
}

/* ---------- masaüstü: 800 px kart, paneller yan yana ---------- */
@media (min-width:900px){
  .auth-sheet{width:min(800px,calc(100vw - 48px));grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .auth-sheet .auth-brand{padding:28px 24px 24px;border-radius:var(--r-xl) 0 0 var(--r-xl)}
  .auth-sheet .auth-x{top:14px;right:14px;color:var(--text-tertiary)}
  .auth-sheet .auth-x:hover{color:var(--text-primary);background:var(--bg-raised)}
  .auth-sheet .auth-x:focus-visible{outline-color:var(--focus)}
  .auth-sheet-b{padding:28px 32px 32px}
  .auth-sheet .auth-tabs{margin:0 0 24px}
}

/* Hareket azaltıldığında: yalnız görünürlük değişir (priceonn.css geçiş sürelerini sıfırlar; burada da
   dönüşüm ve animasyon hiç uygulanmaz, böylece kart kaymadan gelir). */
@media (prefers-reduced-motion:reduce){
  .auth-sheet{transform:none;opacity:1}
  .auth-sheet-b.is-swap,.auth-sheet.is-loading::before{animation:none}
  @media (min-width:600px){
    .auth-sheet,.auth-sheet.show{transform:translate(-50%,-50%)}
  }
}

/* Çok kısa ekran (yatay telefon): kart tam yüksekliğe yayılır, gövde kendi içinde kaydırılır. */
@media (max-height:520px) and (min-width:600px){
  .auth-sheet{max-height:calc(100vh - 16px)}
}

/* Kısa ekran (1280x720, 1366x768): kayıt görünümü 672-720 px pencere boyuna sığmalı; dikey boşluklar sıkıştırılır
   ki birincil düğme kaydırmadan görünsün; metin boyutları değişmez (başlık bir adım küçük: 24/32). */
@media (min-width:600px) and (max-height:760px){
  .auth-sheet-b{padding:16px 28px 20px}
  .auth-sheet .auth-h{font-size:1.5rem;line-height:2rem}
  .auth-sheet .auth-form{gap:12px}
  .auth-sheet .auth-or{margin:12px 0}
  .auth-sheet .auth-prov{gap:8px}
  .auth-sheet .auth-sub{margin-bottom:12px}
  .auth-sheet .auth-tabs{margin-bottom:12px}
  .auth-sheet .auth-fine{margin-top:-2px}
  .auth-sheet .fld{gap:4px}
  .auth-sheet .auth-brand{padding-top:20px;padding-bottom:16px;gap:14px}
  .auth-sheet .ab-spark{height:44px}
}
@media (min-width:900px) and (max-height:760px){
  .auth-sheet-b{padding:20px 32px 24px}
}