/* =================================================================================================
   GİRİŞ SAYFASI (2026-08-04) — iki panelli düzen: solda döngüsel video, sağda marka + form.
   Yalnız login.php kullanır ($extraCss ile yüklenir); app.css'i her sayfa için şişirmemek adına ayrı.

   ‼ PALET KARARI: mockup mor/lila bir hazır şablondan geliyordu; CLAUDE.md "bluish-purple SaaS
     gradyanı YASAK" diyor. Kullanıcı onayıyla düzen mockup'tan, renkler PROJE PALETİNDEN alındı
     (yaprak yeşili ailesi). Giriş sayfası bilinçli olarak KOYU; uygulamanın geri kalanı açık kalır.
   ‼ Buradaki --lg-* değişkenleri sayfaya özeldir; global token'ları EZMEZ.
   ================================================================================================= */

.sk-login {
  --lg-zemin:  #062B24;   /* leaf-900'ün bir tık altı — video siyahına yumuşak geçer */
  --lg-yuzey:  #0B3A31;   /* form panelinin kutusu */
  --lg-alan:   #0E4539;   /* input dolgusu */
  --lg-kenar:  #1A5C4D;
  --lg-metin:  #EDF5F2;
  --lg-soluk:  #9CBDB3;

  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  gap: 0;
  /* ‼ TAM EKRAN (2026-08-04, kullanıcı "C" seçeneğini seçti): kenar boşluğu YOK, iki yarı ekranı
     baştan sona doldurur. Önceki hâlde 18 px zemin çerçevesi + yuvarlatılmış kartlar vardı;
     çerçeve kalkınca video belirgin şekilde büyüdü. Çerçeveli hâle dönmek istenirse:
     padding: 18px + .sk-login__gorsel `border-radius: 20px 0 0 20px`
     + .sk-login__panel `border-radius: 0 20px 20px 0`. */
  padding: 0;
  overflow: hidden;   /* kaydırma sağ panelin KENDİSİNDE — iki ayrı kaydırma çubuğu olmasın */
  background: var(--lg-zemin);
  color: var(--lg-metin);
}

/* ---------- Sol sütun: video + üzerine binen tanıtım altbilgisi ----------
   ‼ `position: relative` ŞART: altbilgi mutlak konumlanır ve KAPSAYICI BLOĞU burasıdır.
     İlk sürümde altbilgi akıştaydı ve videoyu yukarı itip yerini daraltıyordu (kullanıcı
     bildirdi: "vidyo eski uzunluğunda kalsın, foter üzerine gelsin"). Artık akış dışında —
     video sütunun TAM yüksekliğini alır, altbilgi onun üzerine biner. */
.sk-login__sol {
  position: relative;
  flex: 1 1 74%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Sol panel: video ---------- */
.sk-login__gorsel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* ‼ Sütun payı (74%) artık `.sk-login__sol`'da — burada yatay flex tanımı OLMAMALI, yoksa
     dikey akışta yüksekliği yanlış hesaplanır.
     2026-08-04 oran turları: 46% → 58% → 66% → 82% → 74%. Video `contain` ile çizildiğinden ve
     bu genişlikte EN'e göre sığdığından, panelin bir kısmı zaten siyah banttı; altbilgi o boşluğu
     kullanır — küre küçülmez (ölçüldü). */
  /* Tam ekran düzende yuvarlatma yok — video sol kenara dayanır. */
  border-radius: 0;
  overflow: hidden;
  background: #000;
}

/* ‼ `cover` DEĞİL `contain` (2026-08-04 kullanıcı geri bildirimi: "videoya yakınlaştırma yapma,
   olduğu gibi kullan"). cover, panelin en-boy oranı videonunkinden farklı olduğunda kareyi kırpar —
   panel %82'ye genişleyince dünya küresi tanınmayacak kadar yakınlaşmıştı. contain tüm kareyi
   gösterir; artan yer siyah kalır ve videonun KENDİ siyah zemini + panelin siyah zemini sayesinde
   bu boşluk görünmez. Videonun kaynağı da artık kırpılmadan (tam 16:9) kodlanıyor. */
.sk-login__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Video kenarını panele bağlayan yumuşak geçiş — sert kesik yerine sönümlenir. */
.sk-login__gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,43,36,.55) 0%, rgba(6,43,36,0) 22%,
                                     rgba(6,43,36,0) 88%, rgba(3,20,16,.5) 100%);
}

/* ---------- Sayfa başlığı: "Otomatik Sayaç Okuma ve Hesaplama Platformu" ----------
   İki sürümü var, aynı anda yalnız biri görünür:
     · `.sk-login__baslik-satir` — MASAÜSTÜ: video panelinin üst-ortasında, başlık ölçüsünde.
     · `.sk-login__slogan`       — DAR EKRAN: markanın altında, küçük (video sütunu gizli olduğu
                                   için masaüstü sürümü orada yok).
   ‼ Başlık LOGO ŞERİDİNİN ALTINDA konumlanır (top: 118px). Logo hizasında ortalansaydı 1440 px'te
     yatayda çakışırdı: logo 46–391 arasında, panel ortasına oturan başlık ise ~299'dan başlıyor. */
.sk-login__baslik-satir {
  position: absolute;
  top: 114px;   /* logo şeridinin hemen altı (logo 38–107 arası biter) */
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: 22px;
  /* ‼ Tipografi REFERANS kelime markasıyla AYNI: aynı aile (Inter), aynı kalınlık (700)
     ve aynı harf aralığı (.004em). Yalnız RENK farklı — marka beyaz, başlık marka yeşili.
     `.sk-login__marka-ad` değişirse burayı da güncelle. */
  font-weight: 700;
  letter-spacing: .004em;
  color: var(--brand-leaf-300);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7);
}

.sk-login__slogan {
  margin: 10px 0 0 2px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--brand-leaf-300);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .65);
}

/* Masaüstünde markanın altındaki küçük sürüm gizlenir — başlık artık ortada. */
@media (min-width: 981px) {
  .sk-login__slogan { display: none; }
}

/* ‼ ÇOK GENİŞ EKRANDA BAŞLIK LOGO HİZASINA ÇIKAR (2026-08-04).
   ‼ YATAY ORTALAMA HER ZAMAN PANELE GÖRE (`left:0; right:0`) — yani KÜREYE göre. Bir ara sürümde
     başlık "logodan sonraki boşluğa" ortalanmıştı; yükseğe çıkıyordu ama küreye göre sağa kayıyordu
     ve kullanıcı bunu fark etti. Ortalamayı bozma; yalnız DİKEY konum uyarlanır.
   Neden eşik: başlık metni ~521 px. Panel ortasında dururken logonun (46–391) sağına geçebilmesi
   için panelin ≥1343 px olması gerekiyor; form paneli %26/en az 412 px aldığından bu ancak
   ~1815 px pencerede oluşuyor. Altında başlık logo bandına çıkarsa ÜZERİNE BİNER — o yüzden
   orada logonun altında kalır (top:114). */
@media (min-width: 1815px) {
  .sk-login__baslik-satir { top: 54px; }
}

/* ================================================================================================
   TANITIM ALTBİLGİSİ (2026-08-04) — videonun altında, YALNIZ masaüstünde.
   Amaç kullanıcının kendi ifadesiyle "bu sistemi satabilmek": giriş sayfası herkese açık, bina
   yöneticisi adayı da buraya düşüyor. Bağlantılar www.referansenerji.com'un GERÇEK sayfalarına
   gider (adresler kullanıcının kayıtlı site kopyasından çıkarıldı, ölü link yok).
   ================================================================================================ */
/* ‼ AKIŞ DIŞI, VİDEONUN ÜZERİNDE (2026-08-04 düzeltmesi) — tam boy şerit DEĞİL, kenarlardan
   içeride duran bir KART (kullanıcının referans görselindeki gibi).
   Zemini giriş kartıyla AYNI buzlu cam: aynı bulanıklık, aynı kenar çizgisi, aynı gölge —
   sayfada iki farklı cam dili olmasın. */
.sk-login__ftr {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;   /* sayfanın en altına oturur (2026-08-04 kullanıcı düzeltmesi) */
  /* ‼ Kart kenardan kenara UZANMAZ, ortada toplanır (2026-08-04 kullanıcı isteği).
     `left/right` sınırları içinde `margin-inline: auto` + `max-width` ile ortalanır — böylece
     dar ekranda yine kenar boşluğunu korur, geniş ekranda ortada derli toplu bir blok olur. */
  max-width: 1180px;   /* iletişim iki sütuna geçince genişledi; kullanıcı onaylı */
  margin-inline: auto;
  z-index: 2;
  /* ‼ Alt boşluk kısıldı (20→10): kart alçalsın, dönen dünyanın üzerine az binsin. */
  padding: 16px 26px 10px;
  /* ‼ Alt köşeler DÜZ: kart artık havada durmuyor, sayfa dibine yapışıyor. */
  border-radius: 20px 20px 0 0;
  background: rgba(6, 32, 26, .46);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .46),
              inset 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--lg-soluk);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---- Dört sütun ---- */
.sk-login__ftr-izgara {
  display: grid;
  /* ‼ 3 SÜTUN (tanım bloğu 2026-08-04'te kaldırıldı). Sütunlar `fr` ile eşit dağılırsa
     kart çok geniş olduğundan aralar boş kalıyordu; son sütun (adresler) daha geniş,
     tümü `max-content` yerine oranlı — soldan hizalı ve derli toplu durur. */
  grid-template-columns: 1fr 1.15fr 2.6fr;
  gap: 8px 26px;
}

.sk-login__ftr-blok h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lg-metin);
}

.sk-login__ftr-blok p { margin: 0; }

.sk-login__ftr-blok ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-login__ftr-blok li { margin-bottom: 4px; }

.sk-login__ftr-blok a {
  color: var(--lg-soluk);
  text-decoration: none;
  transition: color .15s;
}
.sk-login__ftr-blok a:hover { color: var(--brand-leaf-300); text-decoration: underline; }
.sk-login__ftr-blok a:focus-visible { outline: 2px solid var(--brand-leaf-600); outline-offset: 2px; border-radius: 3px; }

/* ‼ İletişim başlığı İKİ ADRESİ birden kapsadığı için ORTALI (2026-08-04 kullanıcı çizimi) —
   diğer sütun başlıkları sola yaslı kalır. */
.sk-login__ftr-blok--iletisim h2 { text-align: center; }

/* İletişim bloğunun İKİ ALT SÜTUNU — iki adres yan yana, altlarında telefon/e-posta. */
.sk-login__ftr-iletisim-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

/* İletişim satırları: simge + metin hizası */
.sk-login__ftr-iletisim li {
  display: flex;
  gap: 8px;
  margin-bottom: 7px;
}
.sk-login__ftr-iletisim .sk-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--brand-leaf-500);
}
/* Telefon VE e-posta ortak vurgusu — ikisi de aynı eylem, aynı ağırlıkta görünmeli.
   ‼ Özgüllük bilerek yükseltildi (`!important` yerine): `.sk-login__ftr-blok a` kuralını ezmeli. */
.sk-login__ftr-blok .sk-login__ftr-vurgu {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: .01em;
}
.sk-login__ftr-blok .sk-login__ftr-vurgu:hover { color: #FFFFFF; }

/* ---------- Sağ panel: form ---------- */
/* ‼ ORTALAMA `align-items/justify-content: center` İLE YAPILMAZ (2026-08-04'te ölçülerek bulundu):
   kaydırılabilir bir kapsayıcıda içerik yüksekliği pencereyi aşınca (ör. güvenlik kodu açıkken
   821 px içerik / 720 px pencere) merkezleme içeriği YUKARI taşırır ve üst kısmı — logo, e-posta
   alanı — kaydırmayla ERİŞİLEMEZ hale gelir. `margin: auto` ise boşluk varken ortalar, boşluk
   negatife dönünce 0'a çözülür → içerik baştan başlar ve tamamı kaydırılabilir kalır. */
.sk-login__panel {
  flex: 1 1 26%;      /* 54% → 42% → 34% → 18% → 26% (son turda biraz geri açıldı) */
  /* ‼ SERT ALT SINIR: kutu (380) + yatay dolgu (32) = 412. Aşağısı formu bozar — güvenlik kodu
     satırı görüntü (268) + boşluk (10) + yenile düğmesi (42) = 320 px yer ister; kutu bunun altına
     inerse kod görseli kırpılır. Dar masaüstünde flex payı yerine bu değer kazanır. */
  min-width: 412px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 16px;

  /* ---------- Arka plan: FOTOĞRAF, HAM (2026-08-04) ----------
     ‼ Fotoğrafın üzerindeki TÜM soldurma katmanları kullanıcı isteğiyle KALDIRILDI
       ("resim olduğu gibi gözüksün"). Kaldırılanlar: soldan sıcak ışık sızıntısı · okunurluk
       perdesi (180° koyu degrade) · tabanda sıcak hâle · marka yeşiline çekme katmanı.
     Fotoğraf: `cover`, merkez. 1024×1024 PNG (1,4 MB) → 758×1024 WebP (92 KB), scratchpad/foto_hazirla.php.
     Alttaki degrade yalnız fotoğraf yüklenene dek ve kenarlarda görünür.
     ‼ Kaydırılabilir öğede arka plan varsayılan `background-attachment: scroll` ile ELEMANA
       sabittir, içerikle kaymaz — istenen de bu. */
  /* Tam ekran düzende yuvarlatma yok — panel sağ kenara dayanır. */
  border-radius: 0;
  background:
    /* ‼ DİKİŞ YUMUŞATMASI: sol kenardan içeri sönümlenen koyu bant. Fotoğrafın sert kenarı
       videonun siyahına karışır, geçiş çizgisi kaybolur. Fotoğrafın kalanına dokunmaz. */
    linear-gradient(90deg, rgba(3,20,16,.92) 0%, rgba(3,20,16,.55) 5%, rgba(3,20,16,0) 16%),
    url("/assets/img/giris-bina.webp") center / cover no-repeat,
    linear-gradient(158deg, #08332B 0%, #04201A 100%);
}

/* ---------- Metin okunurluğu: perde YOK, GÖLGE var ----------
   ‼ Perde kalkınca ölçüldü: ortalama kontrast her yerde iyi (5–15:1) ama metnin parlak bir
   pencerenin üzerinden geçtiği noktalarda EN KÖTÜ DURUM 1,58:1'e düşüyor — yazı orada kayboluyor.
   Fotoğrafa dokunmadan çözüm: her harfin kendi koyu halesi. İki katmanlı gölge — yakın ve sert
   olan kenarı keser, geniş ve yumuşak olan parlak zemini bastırır.
   ‼ Fotoğrafı değiştirirsen (daha parlak bir görsel) bu gölgeler yetmeyebilir; o zaman ya gölgeyi
   güçlendir ya da forma özel yerel bir perde ekle (panelin tamamına DEĞİL). */
.sk-login__baslik,
.sk-login__aciklama,
.sk-login__etiket,
.sk-login__onay,
.sk-login__unut,
.sk-login__ipucu,
.sk-login__marka-ad,
.sk-login__marka-alt {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .65);
}

/* ---------- BUZLU CAM KART (2026-08-04, kullanıcı referansı: glassmorphism login paneli) ----------
   Fotoğraf panelin her yerinde HAM kalır — üstte kulenin tepesi, altta taban aydınlatması,
   yanlarda cam yüzey net görünür; yalnız yazının bulunduğu ~380 px'lik sütun camın ardında.
   ‼ Bu kart SÜS DEĞİL, okunurluk çözümü: perdesiz hâlde metin parlak pencerelerin üzerinde
     en kötü 1,58:1'e düşüyordu (ölçüldü); kartla en kötü 6–12:1.
   Camı "cam" yapan dört ayrıntı — birini çıkarırsan etki dağılır:
     1. güçlü `backdrop-filter: blur` → ardındaki fotoğraf soyut bir yıkamaya dönüşür
     2. `saturate` → bulanıklaşan renkler cansızlaşmasın
     3. üstte ince açık kenar + iç üst çizgi (`inset`) → ışığın cam kenarında kırılması
     4. geniş ve yumuşak dış gölge → kartın zeminden AYRILDIĞI hissi
   ‼ Dolgu KOYU tonda (beyaz cam değil): açık camda üzerindeki açık metinlerin kontrastı düşerdi. */
.sk-login__kutu {
  width: 100%;
  max-width: 380px;
  margin: auto;
  /* ‼ Yatay dolgu 22 px: 28 px'te kartın iç genişliği 324'e düşüp alt yazı iki satıra kırılıyordu.
     22 px ile iç genişlik 336 → hem alt yazı tek satır, hem güvenlik kodu satırı (görüntü 268 +
     boşluk 10 + yenile 42 = 320) rahat sığıyor. Daha fazla daraltma bu iki şeyi bozar. */
  padding: 30px 22px 24px;
  border-radius: 22px;
  background: rgba(6, 32, 26, .46);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .46),
              inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ---------- Marka kilidi (ters/knockout sürüm) ----------
   Beyaz plaka KALDIRILDI (2026-08-04): koyu panelde bir kutu gibi sırıtıyordu. Orijinal logo beyaz
   zeminli ve yazısı LACİVERT olduğundan yalnızca zemini saydamlaştırmak yetmez — yazı okunmaz.
   Çözüm: kırmızı R işareti saydam PNG olarak ayrıldı, yazılar GERÇEK METİN olarak kuruldu.
   ‼ İşaretin kırmızısı (#DF1132) markanın kendi rengidir, değiştirme. */
/* Marka şeridi — MOBİL/dar ekran davranışı (varsayılan): form panelinin en üstünde, form
   kutusuyla aynı sütuna hizalı.
   ‼ `flex: 0 0 auto` şart — aksi halde sütun akışında esner ve formun ortalamasını bozar. */
.sk-login__ust {
  flex: 0 0 auto;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding-bottom: 18px;
}

/* ‼ Masaüstü marka kuralları (sol üste taşıma + %50 büyütme) BU DOSYANIN SONUNDA, diğer medya
   sorgularının yanında. Buraya yazılmamasının sebebi: medya sorgusu ÖZGÜLLÜK EKLEMEZ; aşağıdaki
   temel `.sk-login__marka-*` kuralları aynı özgüllükte olduğundan kaynak sırasında sonra gelen
   kazanır ve blok buraya konursa ETKİSİZ kalır (2026-08-04'te bu tuzağa bir kez düşüldü). */

/* ‼ Marka ölçüleri TEK KAYNAK: 2026-08-04 kullanıcı isteğiyle %50 büyütüldü
   (46→69 px işaret · 25→37,5 px ad · 8,8→13,2 px alt · 12→18 px aralık).
   Masaüstü medya sorgusunda AYRICA tanımlanmaz — tekrar olmasın. Yalnız ≤420 px
   ekranlarda küçültülmüş sürümü var (dosya sonunda). */
.sk-login__marka {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.sk-login__isaret {
  display: block;
  height: 69px;
  width: auto;
}

.sk-login__marka-yazi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sk-login__marka-ad {
  font-size: 37.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .004em;
  color: #FFFFFF;
}

.sk-login__marka-alt {
  font-size: 13.2px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .152em;
  color: var(--lg-soluk);
  white-space: nowrap;
}

.sk-login__baslik {
  margin: 0 0 6px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lg-metin);
}

.sk-login__aciklama {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--lg-soluk);
}

.sk-login__etiket {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lg-soluk);
}

.sk-login__grup { margin-bottom: 16px; }

/* Koyu panel için input — app.css'teki .sk-input açık zemine göre ayarlı, burada ezilir. */
.sk-login .sk-login__input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--lg-kenar);
  border-radius: 12px;
  background: var(--lg-alan);
  color: var(--lg-metin);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.sk-login .sk-login__input::placeholder { color: #6E9186; }
.sk-login .sk-login__input:hover { border-color: #24705E; }
.sk-login .sk-login__input:focus {
  outline: none;
  border-color: var(--brand-leaf-600);
  background: #10503F;
  box-shadow: 0 0 0 3px rgba(44, 156, 133, .22);
}

/* Şifre alanı + göster/gizle düğmesi */
.sk-login__sifre { position: relative; }
.sk-login__sifre .sk-login__input { padding-right: 48px; }

.sk-login__goz {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--lg-soluk);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.sk-login__goz:hover { color: var(--lg-metin); background: rgba(255, 255, 255, .07); }
.sk-login__goz:focus-visible { outline: 2px solid var(--brand-leaf-600); outline-offset: 1px; }
.sk-login__goz .sk-icon { width: 19px; height: 19px; }

/* ---------- Beni hatırla / Beni unut ---------- */
.sk-login__satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 22px;
}

.sk-login__onay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--lg-soluk);
  cursor: pointer;
  user-select: none;
}

.sk-login__onay input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-leaf-600);
  cursor: pointer;
}

.sk-login__onay:hover { color: var(--lg-metin); }

.sk-login__unut {
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-leaf-300);
  font-family: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sk-login__unut:hover { color: #C7E8DD; }
.sk-login__unut:focus-visible { outline: 2px solid var(--brand-leaf-600); outline-offset: 2px; border-radius: 4px; }

/* ---------- Gönder ---------- */
.sk-login__gonder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s, transform .08s;
}
.sk-login__gonder:hover { background: var(--brand-leaf-600); }
.sk-login__gonder:active { transform: scale(.99); }
.sk-login__gonder:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(44, 156, 133, .35); }

/* ‼ Alt yazı panelin EN AYDINLIK yerine (fotoğraftaki kulenin taban aydınlatması) denk geliyor.
   Ölçüldü: eski #6E9186 ile kontrast 3,39:1 — AA sınırının (4,5) altında. Rengi açıldı ve ince bir
   gölge eklendi; perdeyi koyulaştırmak yerine bu tercih edildi, yoksa fotoğrafın en güzel yeri
   (taban ışığı) sönerdi. Rengi tekrar koyulaştırırsan kontrastı yeniden ölç. */
/* ---------- Kart altı iletişim bloğu (2026-08-04) ----------
   ‼ Kartın en aydınlık zeminine (kulenin taban aydınlatması) denk geliyor → gölgeler
     diğer metinlerden güçlü. Rengi koyulaştırırsan kontrastı yeniden ölç. */
.sk-login__alt {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .75);
}

.sk-login__alt-firma {
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .002em;
  color: var(--lg-metin);
}

.sk-login__alt-metin {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #A8C6BB;
}

.sk-login__alt-iletisim {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.sk-login__alt-iletisim a {
  color: var(--brand-leaf-300);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.sk-login__alt-iletisim a:hover { color: #C7E8DD; text-decoration: underline; }
.sk-login__alt-iletisim a:focus-visible {
  outline: 2px solid var(--brand-leaf-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Telefon en çok işe yarayan bilgi — bir tık büyük ve beyaz.
   ‼ Özgüllük bilerek yükseltildi (`!important` yerine): üstteki `.sk-login__alt-iletisim a`
   kuralını ezmesi gerekiyor, ikisi de aynı blokta. */
.sk-login__alt-iletisim a.sk-login__alt-tel {
  font-size: 15px;
  color: #FFFFFF;
  letter-spacing: .01em;
}
.sk-login__alt-iletisim a.sk-login__alt-tel:hover { color: #FFFFFF; }

/* ---------- Uyarı / hata kutuları (koyu zemin sürümleri) ---------- */
.sk-login__hata,
.sk-login__uyari {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.sk-login__hata {
  border: 1px solid rgba(224, 154, 146, .45);
  background: rgba(196, 69, 54, .16);
  color: #F3C7C1;
}

.sk-login__uyari {
  border: 1px solid rgba(243, 203, 130, .38);
  background: rgba(232, 164, 58, .14);
  color: #F3CB82;
}

.sk-login__hata .sk-icon,
.sk-login__uyari .sk-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }

/* ---------- Güvenlik kodu (CAPTCHA) ---------- */
.sk-login__kod-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sk-login__kod-gorsel {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--lg-kenar);
  border-radius: 12px;
  background: var(--neutral-100);   /* görüntünün kendi kırık-beyaz zemini */
}

.sk-login__kod-yenile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--lg-kenar);
  border-radius: 11px;
  background: var(--lg-alan);
  color: var(--lg-soluk);
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .3s;
}
.sk-login__kod-yenile:hover { color: var(--lg-metin); border-color: #24705E; }
.sk-login__kod-yenile:active .sk-icon { transform: rotate(180deg); }
.sk-login__kod-yenile .sk-icon { width: 18px; height: 18px; transition: transform .3s; }

.sk-login__ipucu {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6E9186;
}

/* ---------- Honeypot ----------
   Görünmez ama display:none DEĞİL — bazı botlar display:none alanları atlar. */
.sk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Uyarlanır düzen ---------- */

/* MASAÜSTÜ: marka SAYFANIN sol üst köşesine taşınır, video panelinin üzerine biner ve %50 büyür
   (2026-08-04 kullanıcı çizimi + "0,50 oranında büyüt").
   ‼ MARKUP PANELİN İÇİNDE KALIYOR — ikinci bir kopya YOK. Dar ekranda bu kural devre dışı kalınca
     marka kendiliğinden akışa, formun üstündeki eski yerine döner (kullanıcı isteği tam olarak bu).
   ‼ Konumlanma `.sk-login`'e göredir: `.sk-login__panel` position:static olduğundan mutlak
     konumlanmış çocuğa kapsayıcı blok OLMAZ; bu sayede marka panelin `overflow-y:auto`
     kırpmasından etkilenmez ve panel kaydırılırken yerinde durur (ölçüldü).
   ‼ Bu blok dosyanın SONUNDA olmalı: medya sorgusu özgüllük eklemez, yukarıdaki temel
     `.sk-login__marka-*` kuralları aynı özgüllükte — kaynak sırasında sonra gelen kazanır.
   ‼ Videonun köşeleri siyah (küre ortada) + metinlerde gölge var → okunurluk sorun değil. */
@media (min-width: 981px) {
  .sk-login__ust {
    position: absolute;
    top: 38px;
    left: 46px;
    z-index: 3;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Ölçüler temel kurallarda (tek kaynak) — burada yalnız KONUM ayarlanır. */
}

/* ‼ DAR MASAÜSTÜ (981–1240 px): form paneli en az 412 px aldığından video sütununa ~550 px kalıyor
   ve altbilgideki ÜÇ sütun sıkışıp her satır ikiye bölünüyordu ("Kalibrasyon ve / Muayene").
   Burada iki sütuna düşülür, İletişim bloğu alt satırı tam genişlikte kullanır — adresler tek
   satıra sığar. Ölçülerek eklendi 2026-08-04. */
@media (min-width: 981px) and (max-width: 1240px) {
  .sk-login__ftr { left: 20px; right: 20px; }
  .sk-login__ftr-izgara { grid-template-columns: 1fr 1fr; gap: 10px 22px; }
  .sk-login__ftr-izgara > :nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  /* Videoyu tamamen kaldır: dar ekranda yer kaplar, üstelik JS src'yi hiç atamaz →
     mobil kullanıcı 2 MB'ı İNDİRMEZ. */
  .sk-login { padding: 0; }
  /* ‼ SOL SÜTUNUN TAMAMI gizlenir (yalnız video değil): tanıtım altbilgisi de mobilde çıkmaz.
     Form tek ekranda kalsın istiyoruz; iletişim bilgisi zaten kartın altında duruyor.
     Ayrıca JS videoyu panelin GERÇEK ölçüsüne bakarak yüklediği için, gizli sütunda
     ölçü 0 kalır ve 1,7 MB'lık dosya telefonda hiç indirilmez. */
  .sk-login__sol { display: none; }
  /* ‼ min-width SIFIRLANMALI: masaüstünde formu ezilmekten koruyan 412 px alt sınır, telefonda
     (390/375 px) ekrandan geniş kalıp sayfayı YATAY TAŞIRIYORDU — 2026-08-04'te ekran
     görüntüsüyle yakalandı. Dar ekranda panel zaten tek sütun, alt sınıra ihtiyaç yok. */
  /* ‼ Marka dar ekranda YATAYDA ORTALANIR (2026-08-04 kullanıcı bildirdi): `.sk-login__marka`
     inline-flex olduğundan kapsayıcısında sola yaslanıyor, kartın sol kenarında asılı duruyordu
     (ölçüm: solunda 0, sağında 166 px boşluk). Masaüstünde bu kural YOK — marka orada sol üst
     köşede duruyor ve sola yaslı olması gerekiyor. */
  /* ‼ `flex-direction: column` ŞART — slogan eklendikten sonra (2026-08-04) düz `display:flex`
     marka ile sloganı YAN YANA diziyordu ve slogan dar bir sütuna sarıyordu. Dikey akış +
     `align-items:center` ile ikisi alt alta ve ortalı durur. */
  .sk-login__ust {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sk-login__slogan { text-align: center; margin-left: 0; }

  /* ‼ Dar ekranda DİKİŞ YOK (video gizli) → ne dış köşe yuvarlatmasına ne de sol kenardaki
     dikiş yumuşatma bandına gerek var; ikisi de burada sıfırlanır. Arka plan yeniden
     bildiriliyor çünkü CSS'te tek bir arka plan katmanı ayrı ayrı kapatılamaz. */
  .sk-login__panel {
    flex: 1 1 100%;
    min-width: 0;
    padding: 32px 20px;
    border-radius: 0;
    background:
      url("/assets/img/giris-bina.webp") center / cover no-repeat,
      linear-gradient(158deg, #08332B 0%, #04201A 100%);
  }
}

@media (max-width: 420px) {
  .sk-login__panel { padding: 26px 16px; }
  .sk-login__ust { padding-bottom: 14px; }
  /* Küçük telefonda da %50 büyük (2026-08-04): 38→57 · 21→31,5 · 7,6→11,4 · 10→15 */
  .sk-login__marka { gap: 15px; }
  .sk-login__isaret { height: 57px; }
  .sk-login__marka-ad { font-size: 31.5px; }
  .sk-login__marka-alt { font-size: 11.4px; letter-spacing: .13em; }
  .sk-login__baslik { font-size: 22px; }
  .sk-login__satir { flex-wrap: wrap; gap: 8px; }
}

/* ‼ EN KÜÇÜK EKRANLAR (Galaxy Fold dış ekranı, 320 px ve altı) — marka bir kademe geri küçülür.
   Sebep: alt satır `white-space: nowrap`; sığmazsa sarmak yerine TAŞAR. %50 büyütülmüş hâli
   320 px'te tam sınırda kalıyordu (marka 288 / kapsayıcı 288 → sıfır pay), bir tık daha dar
   ekranda taşardı. Ölçülerek eklendi 2026-08-04. */
@media (max-width: 360px) {
  .sk-login__marka { gap: 12px; }
  .sk-login__isaret { height: 48px; }
  .sk-login__marka-ad { font-size: 26px; }
  .sk-login__marka-alt { font-size: 9.5px; letter-spacing: .12em; }
}

/* ‼ KISA EKRAN (dizüstü: 1366×768 → tarayıcı çubuklarından sonra ~700 px görüntü alanı) —
   altbilgi videoyla yükseklik için yarışıyor. Burada sıkıştırılır: yazılar küçülür, boşluklar
   kısılır, adres satırları tek satıra iner. Böylece küre kayda değer ölçüde büyük kalır.
   ‼ Altbilgiyi tamamen GİZLEMEK yerine sıkıştırmak tercih edildi: kullanıcı bu alanı satış için
   istedi ve 1366×768 en yaygın dizüstü çözünürlüğü — orada görünmemesi amacı boşa çıkarırdı. */
@media (min-width: 981px) and (max-height: 820px) {
  .sk-login__ftr { padding: 12px 40px 14px; font-size: 12px; line-height: 1.45; }
  .sk-login__ftr-blok h2 { margin-bottom: 5px; font-size: 12px; }
  .sk-login__ftr-blok li { margin-bottom: 2px; }
  .sk-login__ftr-iletisim li { margin-bottom: 5px; }
  .sk-login__ftr-blok .sk-login__ftr-vurgu { font-size: 13.5px; }
  .sk-login__slogan { font-size: 12.5px; margin-top: 8px; }
}

/* Yükseklik dar olduğunda (dizüstü + tarayıcı çubukları) nefes payını kıs. */
@media (max-height: 700px) {
  .sk-login__ust { padding-bottom: 12px; }
  .sk-login__aciklama { margin-bottom: 18px; }
  .sk-login__grup { margin-bottom: 12px; }
}

/* Hareket hassasiyeti: video oynatılmaz, poster karesi durur (JS de bunu denetler). */
@media (prefers-reduced-motion: reduce) {
  .sk-login__video { display: none; }
  .sk-login__gorsel {
    background: #000 url("/assets/video/giris-poster.jpg") center / contain no-repeat;
  }
}