/* ============================================================
GIRIS.CSS — /onlinedershane/login (yeni tema) 2026-09-09
------------------------------------------------------------
View : views/yeni/giris.php
Controller : onlinedershane/Login.php → nk_giris_bas()
Plan : memory-bank/giris-sayfasi-analiz-ve-plan.md
Sayfa ayrıca ortak.css + kurs.css + vitrin.css yüklüyor:
· hero iskeleti (.vit-hero / .vit-h1 / .vit-yol / .lede)
→ vitrin.css
· akordiyon (details/summary/.ans), .sec-head, .kicker, .btn
→ kurs.css + ortak.css
⛔ O bileşenleri BURADA yeniden yazma.
İMZA RENGİ: MARKA MAVİSİ (--brand #2F6BD0). Yeni bir imza rengi
uydurulmadı — burası ürün sayfası değil, hesabın kapısı; markanın
kendi mavisi doğru olan. (Takvim yeşil · ana altın · kategori nane ·
SSS mor · yasal çelik mavisi · canlı teal — hepsi ürün sayfaları.)
🔴 BU DOSYANIN VAR OLMA SEBEBİ SAYILABİLİR TEK KURAL:
INPUTLAR 16px'İN ALTINA İNMEZ. Eski görünümde beş alanın beşi de
14px'ti; iOS 16px altı bir alana odaklanınca sayfayı otomatik
yakınlaştırıyor ve aday elle geri çıkmak zorunda kalıyordu — üstelik
sitenin en çok mobil giriş yapılan ekranında. Aşağıdaki
`font-size:16px` satırlarını küçültme.
============================================================ */
.lg-sayfa{
--lg: #1F52AC; /* koyu marka mavisi — beyaz üstünde metin */
--lg-2: #2F6BD0; /* marka mavisi — düğme, çerçeve */
--lg-a: #8FB6F0; /* KOYU hero üstünde açık ton */
--lg-w: #E8F0FC; /* tint (ortak.css --brand-w ile aynı) */
}
/* 🔴 SİTE GENELİ KONTRAST — burada da yerel olarak kapatıldı.
`.sec-head .kicker` kurs.css'te `--ink-3` (#8695AF) ile tanımlı ve
12,5px büyük harf metinde `--bg` üstünde **2,82** veriyor (eşik 4,5).
Yeni temanın HER sayfasında var; canlı ders turunda da aynı override
yazıldı. Kalıcı düzeltme kurs.css'te ve ayrı bir turun işi —
envanter §D md.1i. */
.lg-sayfa .sec-head .kicker{ color:var(--ink-2) }
/* ---- HERO DÜZENİ ---------------------------------------------
⚠️ Sütunlar AÇIKÇA yazılı: sütunsuz grid max-content'e pinlenir
(tuzak §K). Sağ sütun forma göre sabit tavanlı. */
.lg-hero{ padding-block:clamp(22px,3.4vw,40px) clamp(30px,4.4vw,52px) }
/* ---- HERO ZEMİNİ — RESMİ TON ----------------------------------
🆕 2026-09-09 (kullanıcı: "dershane girişi olduğu için hero
arkaplanı daha resmi bir renk yapabilirsin").
Devraldığımız `.vit-hero::before` VİTRİN kimliğini taşıyordu:
sağdaki ikinci ışık TURKUAZ (#40E0C3) ve o renk vitrin.css'in kendi
yorumunda yazdığı gibi "liste/vitrin sayfasındayım" imzası —
kategori sayfasıyla ortak. Giriş ekranı bir pazarlama sayfası değil,
hesabın kapısı; pazarlama imzası burada yanlış yerde duruyordu.
Yerine KAYIT sayfasının (`uye-hero`) muamelesi geldi:
· turkuaz YOK, iki katman da marka mavisi ve daha kısık
· üstüne ince ızgara dokusu (64px), tepeden maskeli
Izgara bu tasarım dilinde "hesap / form ekranı" dokusu. Kayıt ve
giriş ikiz ekranlar; aynı zemini paylaşmaları bilinçli.
Yan kazanç: sol alttaki boş bant artık düz karanlık değil, dokulu —
boşluk hissi azalıyor.
⚠️ Özgüllük: `.vit-hero::before` ile aynı ağırlıkta olmasın diye
`.lg-sayfa` ile sarıldı (giris.css zaten sonra yükleniyor ama
sıraya bel bağlamıyoruz).
⚠️ `.vit-hero-ic` z-index:1 taşıyor → iki katman da metnin ALTINDA. */
.lg-sayfa .lg-hero::before{
background:
radial-gradient(62% 82% at 6% 0%, rgb(47 107 208 / .26), transparent 62%),
radial-gradient(52% 76% at 94% 10%, rgb(126 176 255 / .10), transparent 64%);
}
.lg-sayfa .lg-hero::after{
content:''; position:absolute; inset:0; pointer-events:none;
opacity:.5;
background-image:
linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(75% 60% at 50% 0%, #000, transparent 75%);
mask-image:radial-gradient(75% 60% at 50% 0%, #000, transparent 75%);
}
.lg-duzen{
display:grid; gap:clamp(22px,3vw,44px);
grid-template-columns:minmax(0,1fr) minmax(0,420px);
align-items:start;
}
.lg-metin{ min-width:0 }
.lg-hero .vit-kicker{ color:var(--lg-a) }
/* ---- TEKİL DÜZEN — şifre sıfırlama ailesi -------------------
🆕 2026-09-09. remember · do_remember · reset(mail/sms) · attemp
ekranları (views/yeni/sifre_*.php + oturum_sonlandi.php).
Giriş sayfasının iki sütunundan farkı: bunlarda sol anlatı YOK,
tek bir form kartı ORTALANIYOR. Aynı `.lg-kart`/`.lg-alan`/`.lg-gonder`
bileşenleri; yalnız kapsayıcı farklı.
Kart genişliği giriş sayfasının sağ sütunuyla aynı (460px) — iki
ekran arası görsel süreklilik. */
.lg-tekil{
max-width:460px; margin-inline:auto;
display:flex; flex-direction:column; gap:16px;
}
.lg-tekil .vit-yol{ margin-bottom:0 }
.lg-tekil .lg-kart{ width:100% }
/* Kart içi açıklama — başlık ile form arası tek satırlık yönlendirme. */
.lg-kart-lede{
margin:-6px 0 18px; font-size:14.2px; line-height:1.55; color:var(--ink-2);
}
/* Nötr bilgi kutusu — ne başarı ne hata (do_remember çift anlamlı
$error, attemp bilgilendirmesi). Marka mavisi tint. */
.lg-bilgi{
margin:0 0 16px; padding:11px 14px;
border-radius:var(--r);
background:var(--lg-w); border:1px solid rgb(47 107 208 / .22);
font-size:14.2px; line-height:1.55; color:var(--lg);
}
/* İkincil buton — "Geri dön" gibi (dolu kırmızı değil, çerçeveli). */
.lg-gonder-alt{
background:var(--surface); color:var(--lg);
border:1px solid var(--line); text-decoration:none;
display:flex; align-items:center; justify-content:center;
}
.lg-gonder-alt:hover{ background:var(--lg-w); transform:none }
/* `.lg-gonder` bir olabiliyor (geri/kick_all/oturum) — buton
görünümünü 'da da ver. */
a.lg-gonder{
display:flex; align-items:center; justify-content:center;
text-decoration:none;
}
/* Kanal seçimi (mail / sms radio) — remember formu. */
.lg-secim{
display:flex; gap:10px; margin:0 0 16px;
}
.lg-secim-op{
flex:1 1 0; min-width:0;
display:flex; align-items:center; justify-content:center; gap:8px;
min-height:46px; padding:10px 12px;
border:1px solid var(--line); border-radius:var(--r);
background:var(--surface); cursor:pointer;
font-size:14.5px; font-weight:700; color:var(--ink-2);
transition:border-color .16s ease, background .16s ease;
}
.lg-secim-op input{ accent-color:var(--lg-2); cursor:pointer }
/* Seçili kanalı vurgula — :has ile (input:checked olan label). */
.lg-secim-op:has(input:checked){
border-color:var(--lg-2); background:var(--lg-w); color:var(--lg);
}
/* ---- SOLDAKİ OLGU LİSTESİ ------------------------------------ */
.lg-olgu{
list-style:none; margin:20px 0 0; padding:0;
display:grid; gap:12px; grid-template-columns:minmax(0,1fr);
}
.lg-olgu li{
min-width:0;
display:flex; align-items:flex-start; gap:12px;
padding-top:12px; border-top:1px solid rgb(255 255 255 / .12);
}
.lg-olgu li:first-child{ border-top:0; padding-top:0 }
.lg-olgu-ikon{
flex:none; display:grid; place-items:center;
width:38px; height:38px; border-radius:11px;
background:rgb(143 182 240 / .16); color:var(--lg-a);
}
.lg-olgu-ikon svg{ width:19px; height:19px }
.lg-olgu-metin{ min-width:0; display:flex; flex-direction:column; gap:3px }
.lg-olgu-metin b{ font-size:15.5px; font-weight:800; color:#fff }
.lg-olgu-metin span{ font-size:14.2px; line-height:1.6; color:#A9BCD8 }
/* ---- MASKOT --------------------------------------------------
🆕 2026-09-09. Sol sütunun altındaki boş alanı dolduruyor:
1440/1280'de 238px, 1024'te 178px ölçüldü. Gerekçe view'da
(kimlik ekranında marka tanıdıklığı = güven işareti).
⚠️ AKIŞTA duruyor, `position:absolute` DEĞİL. Mutlak konumlansaydı
metnin ÜSTÜNE binerdi: sol sütun uzadığında (uzun lede, büyük yazı
ayarı, farklı dil) maskot son olgu satırını örterdi. Akışta
`margin-top:auto` ile dibe itiliyor; yer kalmazsa auto sıfırlanıp
maskot aşağı taşıyor ve `.vit-hero`nun `overflow:hidden`i onu
kırpıyor — metne asla değmiyor.
⚠️ Dar ekranda GİZLİ: 1023px altında düzen tek sütuna iniyor ve
form `order` ile yukarı alınıyor; maskot orada formu ekranın
dışına iter (kardeş kayıt sayfasında da aynı kural). */
.lg-baykus{ display:none }
@media (min-width:1024px){
/* `.lg-duzen`de `align-items:start` var; sol sütun kendi
içeriği kadar kalıyordu. `stretch` onu satır yüksekliğine
(form kartı) uzatıyor ki `margin-top:auto` dibi bulsun. */
.lg-metin{
align-self:stretch;
display:flex; flex-direction:column;
}
.lg-baykus{
display:flex; /* img'in yüksekliği kutuya bağlansın */
margin-top:auto; /* sol sütunun DİBİ */
align-self:flex-end; /* boşluğun sağı — forma bakıyor */
/* 🔑 BOŞLUĞU DOLDURUR, BOŞLUK ÜRETMEZ (prova 2026-09-09).
İlk sürüm 195px genişlikteydi ve HERO'YU ~74px UZATIYORDU
(canlıya enjekte edilip ölçüldü) — "boş alanı doldur" niyetiyle
konan öğe kendi boşluğunu yaratıyordu. Sebep: ızgara satırı
içeriğe göre büyüdüğü için taşma hiç oluşmuyor, dolayısıyla
`flex-shrink` de devreye girmiyor. Çözüm ÖLÇÜYLE bulundu.
── BÜTÇE (yeni lede ile, canlıda ölçüldü 2026-09-09) ──────────
genişlik satır bütçesi + hero alt dolgusu
1280-1920 207px 259px
1200 139px ← EN DAR 191px
1100 149px 197px
1024 150px 195px
1200px en dar, çünkü metin orada dört satıra çıkıyor.
⚠️ NEGATİF ALT BOŞLUK: maskot hero'nun alt dolgusunun İÇİNE
oturuyor ve o kadarını satır yüksekliğine SAYDIRMIYOR (negatif
margin öğenin dış ölçüsünü küçültür). Böylece görsel 259px'e
kadar büyüyebiliyor ama satır 207px'lik bütçeyi hiç aşmıyor.
Değer hero'nun kendi alt dolgusuyla BİREBİR aynı ifade — maskot
tam hero kenarına basıyor, `overflow:hidden` onu kırpmıyor.
⛔ `.lg-hero` padding-bottom'unu değiştirirsen BURAYI DA değiştir.
♻️ POZ DEĞİŞİNCE TAVAN YENİDEN HESAPLANDI (2026-09-09):
`uc-ceyrek` 480×664 (oran 0,723) → `on-alt` 280×350 (oran 0,800).
Yükseklik artık genişlik × 1,25, yani aynı genişlik DAHA UZUN.
Bütçeden geri çözüm (yükseklik ≤ bütçe + hero alt dolgusu):
1280-1920 → 259px ⇒ en fazla 207px genişlik
1200 → 191px ⇒ en fazla 152px ← EN DAR
1100 → 197px ⇒ en fazla 157px
1024 → 195px ⇒ en fazla 156px
clamp(130,12vw,200) denendi: 1920'de +3px, 1200'de +1px kaldı
(bütçe hesabı yeni lede'nin gerçek satır yüksekliğiyle birkaç px
oynuyor). 11.5vw / 192px tavanında sekiz genişlikte de SIFIR.
Maskot yine de bir öncekinden belirgin BÜYÜK — kullanıcı
"sol tarafın altı çok boş kalmış" demişti. */
width:clamp(128px,11.5vw,192px);
margin-bottom:calc(-1 * clamp(30px,4.4vw,52px));
/* Emniyet ağı: ileride sol sütuna kesin yükseklik verilirse maskot
büyümek yerine küçülsün, oranı da bozulmasın. */
flex:0 1 auto; min-height:0;
pointer-events:none;
/* Kayıt sayfasındaki maskot ~290px ve bulanıklık 14px; buradaki
daha küçük olduğu için 12px yetiyor (maliyet alanla büyüyor). */
filter:drop-shadow(0 10px 12px rgb(0 0 0 / .45));
}
.lg-baykus img{
width:100%; height:100%; display:block;
/* Kutu daraldığında görsel oranını korusun ve SAĞ ALTA yaslansın
(kutunun sol tarafında boşluk kalır, maskot forma yakın durur). */
object-fit:contain; object-position:100% 100%;
}
}
/* ---- FORM KARTI ---------------------------------------------- */
.lg-kart{
min-width:0;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-x);
padding:clamp(22px,2.6vw,30px);
box-shadow:var(--sh-3);
}
.lg-kart-bas{
margin:0 0 18px; font-size:19px; font-weight:800;
letter-spacing:-.2px; color:var(--ink);
}
/* Hata / uyarı şeridi — sunucudan gelen $error ve oturum uyarısı. */
.lg-uyari{
margin:0 0 16px; padding:11px 14px;
border-radius:var(--r);
background:var(--red-w); border:1px solid rgb(225 16 65 / .22);
font-size:14.2px; line-height:1.55; color:var(--red-d);
}
/* 🐞 2026-09-09: $error metinleri Login.php'de ETİKETLİ yazılıyor
("Hata: …" ve bazı dallarda "Kayıt Ol" bağlantısı).
View artık beyaz listeyle basıyor; burası o iki parçanın görünümü.
Bağlantı şeridin İÇİNDE olduğu için kendi rengini alır — mavi
bağlantı kırmızı zeminde 2,1 kontrast veriyordu (ölçüldü). */
.lg-uyari strong,
.lg-uyari b{ font-weight:800 }
.lg-uyari-bag{
color:var(--red-d); font-weight:700;
text-decoration:underline; text-underline-offset:2px;
/* §K: dokunma hedefi 24px'in altına düşmesin. */
display:inline-block; min-height:24px; line-height:24px;
}
.lg-uyari-bag:hover,
.lg-uyari-bag:focus-visible{ text-decoration-thickness:2px }
/* 🐞 2026-09-09 — BAŞARI ŞERİDİ (yeşil).
`$error` hem hata hem başarı taşıyor (miras); parola sıfırlama
sonrası "başarıyla güncellendi" mesajı KIRMIZI `.lg-uyari` kutusunda
çıkıyordu (canlıda görüldü). Controller `nk_giris_ton='basari'`
gönderince view bu sınıfı basıyor.
Renkler ödeme sayfasının kanıtlı `.od-basari` deseninden birebir
(#065f46 metin / #ecfdf5 zemin → kontrast 8+); yeni ton uydurulmadı. */
.lg-basari{
margin:0 0 16px; padding:11px 14px;
border-radius:var(--r);
background:#ecfdf5; border:1px solid #a7f3d0;
font-size:14.2px; line-height:1.55; color:#065f46;
}
.lg-basari strong,
.lg-basari b{ font-weight:800 }
/* ---- ALANLAR ------------------------------------------------- */
.lg-alan{ display:block; margin-bottom:15px }
/* 🐞 2026-09-09 — ÇİFT ALAN. sifre_unuttum'da e-posta/SMS alanları JS
ile `hidden` yapılıyordu ama İKİSİ DE görünüyordu: `.lg-alan`in
`display:block`ı `[hidden]`in `display:none`unu EZİYOR (özgüllük 1-0
vs 0-1). `.lg-alan[hidden]` iki seçici → kazanır. Aynı ders bu
dosyada `.lg-onay-uyari[hidden]` için zaten yazılıydı; alan tipinde
atlanmış. */
.lg-alan[hidden]{ display:none }
.lg-alan-lbl{
display:block; margin-bottom:6px;
font-size:13px; font-weight:800; color:var(--ink-2);
}
.lg-alan-kutu{
display:flex; align-items:center; gap:10px;
padding:0 12px;
background:var(--surface);
border:1px solid var(--line); border-radius:var(--r);
transition:border-color .16s ease, box-shadow .16s ease;
}
.lg-alan-kutu:focus-within{
border-color:var(--lg-2);
box-shadow:0 0 0 3px rgb(47 107 208 / .16);
}
.lg-alan-kutu > svg{ width:18px; height:18px; flex:none; color:var(--ink-3) }
.lg-alan-kutu input{
flex:1 1 auto; min-width:0;
border:0; background:transparent; outline:0;
padding:13px 0;
/* 🔴 16px — DAHA AŞAĞI İNMEZ. Gerekçe dosya başlığında. */
font-size:16px; line-height:1.4; color:var(--ink);
font-family:inherit;
}
.lg-alan-kutu input::placeholder{ color:var(--ink-3) }
/* Şifreyi göster düğmesi — 44px dokunma hedefi. */
.lg-goz{
flex:none; display:grid; place-items:center;
width:44px; height:44px; margin-right:-10px;
border:0; background:transparent; cursor:pointer;
color:var(--ink-3); border-radius:var(--r);
}
.lg-goz:hover{ color:var(--lg) }
.lg-goz svg{ width:19px; height:19px }
.lg-goz[aria-pressed="true"]{ color:var(--lg) }
/* ---- SATIR: hatırla + şifremi unuttum ------------------------ */
.lg-satir{
display:flex; flex-wrap:wrap; align-items:center;
justify-content:space-between; gap:10px 16px;
margin:4px 0 18px;
}
.lg-check{
display:inline-flex; align-items:center; gap:9px;
min-height:44px; /* dokunma hedefi (tuzak §K) */
cursor:pointer;
}
.lg-check input{
width:18px; height:18px; flex:none;
accent-color:var(--lg-2); cursor:pointer;
}
.lg-check span{ font-size:14.5px; line-height:1.5; color:var(--ink-2) }
.lg-unuttum{
display:inline-flex; align-items:center; min-height:44px;
font-size:14.5px; font-weight:700; color:var(--lg);
text-underline-offset:2px;
}
.lg-unuttum:hover{ text-decoration:underline }
.lg-dogrulama{ margin:0 0 16px; display:flex; justify-content:center }
/* ---- GÖNDER -------------------------------------------------- */
.lg-gonder{
display:block; width:100%;
min-height:50px; padding:14px 20px;
border:0; border-radius:var(--r);
background:var(--red); color:#fff;
font:800 16px/1.2 inherit; cursor:pointer;
transition:background .16s ease, transform .16s ease;
}
.lg-gonder:hover{ background:var(--red-d); transform:translateY(-1px) }
.lg-gonder:focus-visible{ outline:2px solid var(--lg-2); outline-offset:3px }
/* ---- AYRAÇ + SOSYAL ------------------------------------------ */
.lg-veya{
display:flex; align-items:center; gap:12px;
margin:20px 0 16px;
/* ⚠️ --ink-3 DEĞİL: 13px metinde beyaz üstünde kontrast 3,03 çıkıyor
(ölçüldü). `--ink-3` küçük metinde dördüncü kez düşük kaldı —
kural tasarim-tuzaklari.md §T'de: yalnız 16px+ metinde.
(§T önce §L diye açılmıştı; o harf CSS bölümünün, taşındı.) */
font-size:13px; font-weight:700; color:var(--ink-2);
}
.lg-veya::before, .lg-veya::after{
content:''; flex:1 1 auto; height:1px; background:var(--line);
}
.lg-sosyal-liste{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr) }
.lg-sosyal{
min-width:0;
display:flex; align-items:center; justify-content:center; gap:10px;
min-height:46px; padding:12px 16px;
border:1px solid var(--line); border-radius:var(--r);
background:var(--surface); text-decoration:none;
font-size:14.8px; font-weight:700; color:var(--ink);
transition:border-color .16s ease, background .16s ease;
}
.lg-sosyal:hover{ border-color:var(--lg-2); background:var(--lg-w) }
.lg-sosyal svg{ width:19px; height:19px; flex:none }
/* ---- SÖZLEŞME ONAYI ------------------------------------------ */
.lg-onay{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line-2) }
/* ⚠️ min-height 0'a ÇEKİLMİYOR: iki satırlık etiket 41px ölçüldü,
44'ün altı. Etiketin tamamı tıklanabilir olduğu için hedef odur. */
.lg-onay .lg-check{ align-items:flex-start; min-height:44px }
.lg-onay .lg-check input{ margin-top:3px }
.lg-onay .lg-check span{ font-size:13.8px }
.lg-onay a{ color:var(--lg); font-weight:700; text-underline-offset:2px }
.lg-onay a:hover{ text-decoration:underline }
.lg-onay-uyari{
margin:10px 0 0; padding:9px 12px;
border-radius:var(--r);
background:var(--red-w); border:1px solid rgb(225 16 65 / .2);
font-size:13.5px; line-height:1.5; color:var(--red-d);
}
/* ⚠️ ŞART: `hidden`'ın display:none'u UA kuralıdır ve özgüllüğü 0;
bileşene display verilmese bile kardeş kuralı yazmak alışkanlık
olsun (SSS turunda temizle düğmesi tam bu yüzden hep görünüyordu). */
.lg-onay-uyari[hidden]{ display:none }
.lg-kart-alt{
margin:16px 0 0; padding-top:14px;
border-top:1px solid var(--line-2);
font-size:14.5px; color:var(--ink-2); text-align:center;
}
.lg-kart-alt a{ color:var(--lg); font-weight:800; text-underline-offset:2px }
.lg-kart-alt a:hover{ text-decoration:underline }
/* ---- SSS + KAPANIŞ ------------------------------------------- */
.lg-sss{ padding-block:clamp(34px,5vw,56px); background:var(--bg) }
/* ⛔ Açık akordiyon başlığının rengine DOKUNMA: kurs.css açık
summary'ye lacivert zemin + beyaz metin veriyor; buraya mavi metin
yazılırsa koyu üstünde koyu olur (SSS turunda birebir yaşandı). */
.lg-sss-liste{ max-width:none }
.lg-baglanti{ margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px }
.lg-baglanti a{
display:inline-flex; align-items:center; gap:5px;
font-size:14px; font-weight:800; color:var(--lg);
text-decoration:none;
}
.lg-baglanti a:hover{ text-decoration:underline; text-underline-offset:2px }
.lg-baglanti svg{ width:15px; height:15px }
/* ⚠️ 2026-09-09 — ŞU AN KULLANILMIYOR. `.lg-kapanis` bloğu view'da
yorum içine alındı (footer'ın CTA şeridiyle sırt sırta basılıp
tekrar üretiyordu — kullanıcı bildirdi). Kurallar SİLİNMEDİ: blok
geri açılırsa görünümü hazır olsun. Silinecekse ikisi birlikte. */
.lg-kapanis{
margin-top:26px;
display:grid; gap:20px;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
background:var(--lg-w); border:1px solid rgb(47 107 208 / .18);
border-radius:var(--r-x); padding:clamp(22px,2.8vw,32px);
}
.lg-kapanis h3{ margin:0 0 6px; font-size:19px; color:var(--ink) }
.lg-kapanis p{ margin:0; font-size:14.8px; line-height:1.65; color:var(--ink-2) }
.lg-kapanis-eylem{ display:flex; flex-wrap:wrap; gap:10px; justify-self:end }
.lg-kapanis-eylem .btn-outline{ background:var(--surface) }
/* ============================================================
DAR EKRAN — ⚠️ DOSYANIN SONUNDA (tuzak §N).
============================================================ */
@media (max-width:1023px){
/* 🔑 FORM ÖNE ALINIYOR. Bu sayfaya gelen ziyaretçinin niyeti tek:
giriş yapmak. Anlatı bloğu formun ÜSTÜNDE kalırsa mobilde form
ekranın altına düşer. */
.lg-duzen{ grid-template-columns:minmax(0,1fr) }
.lg-metin{ order:2 }
.lg-kart{ order:1 }
.lg-kapanis{ grid-template-columns:minmax(0,1fr) }
.lg-kapanis-eylem{ justify-self:start }
}
@media (max-width:759px){
.lg-kart{ padding:20px 18px; border-radius:var(--r-l) }
.lg-satir{ gap:4px 16px }
.lg-kapanis-eylem .btn{ flex:1 1 auto; justify-content:center; min-height:44px }
.lg-baglanti a{ min-height:44px }
}
@media (max-width:389px){
/* 320'de "Bilgilerimi hatırla" ile "Şifremi unuttum" yan yana
sığmıyor; alt alta geçsinler. */
.lg-satir{ flex-direction:column; align-items:flex-start; gap:0 }
.lg-sosyal{ font-size:14px; padding:12px 12px }
}
/* 🐞 320px'te reCAPTCHA KARTIN DIŞINA TAŞIYOR — canlıda ölçüldü ve
ekran görüntüsüyle doğrulandı (2026-09-09).
Google widget'ı SABİT 304px. 320px ekranda kartın iç genişliği
238px kalıyor; widget iki yandan 33'er px taşıp koyu hero zeminine
biniyor, kart yırtılmış görünüyor. Sayfa geneli yatay taşma YOK
(304 + 8 < 320), o yüzden `scrollWidth` denetiminde görünmüyordu —
kusuru gösteren şey ekran görüntüsü oldu.
Kırılma noktası: kart genişliği = viewport − 44. Widget'ın kartın
içinde kalması için kart ≥ 304 gerekiyor → viewport ≥ 348px.
360px'te ölçüldü: widget 28→332, kart 22→338 → sorun yok.
⚠️ Google widget'ın genişliğini CSS ile değiştirmeye izin vermiyor
(sabit ölçülü iframe) — tek yol `transform:scale`.
⚠️ `transform` DÜZEN KUTUSUNU küçültmez; kapsayıcıya elle yükseklik
verilmezse altta ~17px hayalet boşluk kalır. `transform-origin:0 0`
+ sabit yükseklik ikisini birden çözüyor.
⚠️ YALNIZ gerçekten bozulduğu genişlikte: 348px ve üstünde ölçek
uygulanmıyor, çünkü küçültmek widget'ın İÇİNDEKİ onay kutusunu da
küçültüyor (~28px → ~22px, dokunma hedefi eşiğinin altı). 320px'te
başka seçenek yok; taşan kart daha kötü. */
@media (max-width:347px){
.lg-dogrulama{
justify-content:flex-start;
height:61px; /* 78 × .78 */
overflow:hidden;
}
.lg-dogrulama .g-recaptcha{
transform:scale(.78); /* 304 × .78 ≈ 237 ≤ 238 iç genişlik */
transform-origin:0 0;
}
}