/* Giriş / kayıt sayfası (login.html, signup.html) — 2026-10-02.
   Yerleşim: solda logo, başlık, alt başlık, form kartı ve altında ikincil düğme; sağda köşeleri
   yuvarlak video paneli (ölçüler referans görselden: panel üstte 82, altta 40, sağda 43 px boşluk;
   sol sütun : panel ≈ 738 : 647, araları 35 px). Panel YALNIZ auth.js ölçüp `.with-hero`
   eklediğinde görünür (LOGIN_HERO_MIN_WIDTH); dar ekranda tek sütun.
   Çıplak vw/vh YOK: --vw/--vh auth.js'te ölçülüp yazılır (WebView güvenliği). */
@font-face{font-family:'Geist Sans';src:url('fonts/GeistSans-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

:root{
  --a-bg:#fafaf8;
  --a-card:#ffffff;
  --a-border:#e4e3df;
  --a-border-2:#d9d8d3;
  --a-text:#1a1a1a;
  --a-text-2:#4a4a48;
  --a-muted:#8a8984;
  --a-btn:#ffffff;
  --a-btn-h:#f5f5f3;
  --a-primary:#141413;
  --a-primary-t:#ffffff;
  --a-primary-dis:#c9c8c4;
  --a-err:#c4362f;
  --a-ok:#1a7f3c;
  --a-accent:#00a9c9;
  --a-hero:#e9e8e4;
  --a-shadow:0 8px 28px rgba(20,20,19,.06);
  --logo-mark:url("logo-mark-black.png");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --a-bg:#1c1c1b;
    --a-card:#262625;
    --a-border:#3a3a38;
    --a-border-2:#474744;
    --a-text:#ecebe7;
    --a-text-2:#c2c1bc;
    --a-muted:#93928d;
    --a-btn:#262625;
    --a-btn-h:#2f2f2d;
    --a-primary:#ecebe7;
    --a-primary-t:#141413;
    --a-primary-dis:#4a4a47;
    --a-err:#ff7b72;
    --a-ok:#56c47a;
    --a-accent:#3fd6f2;
    --a-hero:#2a2a28;
    --a-shadow:0 8px 28px rgba(0,0,0,.35);
    --logo-mark:url("logo-mark-white.png");
    color-scheme:dark;
  }
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--a-bg);}
body{
  font-family:'Geist Sans',-apple-system,'Segoe UI',sans-serif;
  color:var(--a-text);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* Logo: sol üst köşe */
.a-top{position:absolute;top:20px;left:16px;z-index:2;display:flex;align-items:center;gap:8px;text-decoration:none;}
/* Yalnız kare işaret (uzun COMPACT yazısı kullanılmaz — kullanıcı kararı 2026-10-03) */
.a-top .lm{width:30px;height:30px;background:var(--logo-mark) center/contain no-repeat;}

/* Izgara */
.a-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  min-height:calc(var(--vh, 1vh) * 100);
}
.a-grid.with-hero{
  grid-template-columns:minmax(420px,738fr) minmax(360px,647fr);
  column-gap:35px;padding:82px 43px 40px 0;
}
.a-left{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:96px 16px 48px;min-width:0;
}
.a-grid.with-hero .a-left{padding:0 16px;}

/* Başlık */
.a-title{
  font-size:clamp(34px, calc(var(--vw, 1vw) * 3.9), 58px);font-weight:500;
  letter-spacing:-.025em;line-height:1.08;text-align:center;
}
.a-sub{font-size:19px;color:var(--a-text-2);text-align:center;margin:20px 0 34px;line-height:1.4;}

/* Kart */
.a-card{
  width:446px;max-width:100%;
  background:var(--a-card);border:1px solid var(--a-border);border-radius:24px;
  padding:28px;box-shadow:var(--a-shadow);
}
/* Giriş yap / Kayıt ol değiştiricisi (kartın üstünde; tek sayfa) */
.a-seg{
  display:flex;gap:3px;padding:3px;margin:0 0 18px;
  background:var(--a-btn-h);border:1px solid var(--a-border);border-radius:10px;
}
.a-seg button{
  flex:1 1 0;height:32px;border:none;border-radius:7px;background:none;
  color:var(--a-text-2);font-size:14px;font-weight:500;
}
.a-seg button:hover{color:var(--a-text);}
.a-seg button[aria-selected="true"]{background:var(--a-card);color:var(--a-text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.a-seg button:focus-visible{outline:2px solid var(--a-accent);outline-offset:1px;}
.a-btn{
  width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--a-btn);color:var(--a-text);border:1px solid var(--a-border-2);border-radius:8px;
  font-size:15px;font-weight:500;text-decoration:none;
}
.a-btn + .a-btn{margin-top:12px;}
/* Sağlayıcı simgeleri aynı kutu: blok öğe, küçülmez → metinle dikeyde aynı eksende */
:root{--auth-icon-size:16px;--auth-icon-gap:9px;}
.a-btn .a-ico{display:block;flex:0 0 var(--auth-icon-size);width:var(--auth-icon-size);height:var(--auth-icon-size);}
.a-in{display:flex;align-items:center;gap:var(--auth-icon-gap);min-width:0;}
/* Uzun yazı / %150 yazı boyutu: yazı kısalır (…), simge asla kırpılmaz */
.a-in > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* YATAY HİZA (2026-10-06): blok ortalı kalırdı ama yazılar farklı uzunlukta olduğu için Apple simgesi
   ve yazısı Google'ınkinden 4,62 px sağdan başlıyordu. İki düğme ORTAK ızgarayı paylaşır: orta sütun
   EN UZUN simge+yazı bloğu kadar (max-content), iki düğmede aynı genişlik → simge kutuları aynı sütunda,
   yazılar aynı x'ten başlar; blok yine düğmede ortalı. Dar ekranda sütun sığdığı kadar daralır
   (minmax 0) ve yazı kısalır. subgrid yoksa (çok eski tarayıcı) eski ortalı düzen kalır. */
.a-oauth{display:grid;row-gap:12px;}
.a-oauth .a-btn + .a-btn{margin-top:0;}
@supports (grid-template-columns:subgrid){
  .a-oauth{grid-template-columns:minmax(0,1fr) minmax(0,max-content) minmax(0,1fr);}
  .a-oauth .a-btn{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;}
  .a-oauth .a-in{grid-column:2;}
}
/* APPLE SİMGESİ OPTİK HİZA (2026-10-04): elma işaretinin mürekkebi kutusunda dengesiz — yaprak üst
   kısmı doldurur, gövde alt yarıda kalır; kutu ortalandığında gövdenin görsel ortası büyük harf
   bölgesinin ortasından AŞAĞIDA görünür. Mürekkep ölçümü (scripts/browser/oauth_icon_align_test.py,
   DPR 1/1,5/2/3 × 414/768/1440 × iki tema) farkı +1,44…+1,95 px buldu; kaydırma bunların ortalaması.
   Simge boyutu, rengi ve düğme ölçüleri DEĞİŞMEZ; yalnız dikey kaydırma. Google simgesi zaten hizalı. */
:root{--apple-icon-optical-y:-1.75px;}
/* 2026-10-06 (brief: gövde büyük harf boyunda, altı taban çizgisinde; yaprak küçük taşar). Önceki
   kaydırma yalnız AĞIRLIK MERKEZİNİ hizalıyordu: yaprak yukarı, sarkan gövde aşağı çekip birbirini
   götürüyordu → gövde taban çizgisinin 1,0–1,5 px altına sarkıyor, gövde büyük harften %16 büyük,
   yaprak 4 px taşıyordu (scripts/browser/oauth_icon_measure.py, gövde/yaprak ayrı ölçüm).
   Ölçek = büyük harf yüksekliği / gövde yüksekliği (10,67 / 12,33 ≈ 0,865); kaydırma, ölçekten
   sonra gövde altını taban çizgisine oturtan değer. Kutu (--auth-icon-size) Google'la aynı kalır. */
:root{--apple-icon-scale:.865;--apple-icon-optical-y:-2px;}
.a-btn[data-oauth="apple"] .a-ico{transform:translateY(var(--apple-icon-optical-y)) scale(var(--apple-icon-scale));}
.a-btn:hover{background:var(--a-btn-h);}
.a-btn[hidden]{display:none;}
.a-or{text-align:center;font-size:12px;color:var(--a-text-2);letter-spacing:.04em;margin:11px 0 10px;}
.a-input{
  width:100%;height:40px;padding:0 15px;
  background:var(--a-card);color:var(--a-text);
  border:1px solid var(--a-border-2);border-radius:8px;
  font-family:inherit;font-size:15.5px;outline:none;
}
.a-input::placeholder{color:var(--a-muted);}
.a-input:focus{border-color:var(--a-text-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--a-accent) 22%, transparent);}
.a-input + .a-input,.a-pw + .a-input,.a-input + .a-pw{margin-top:10px;}
.a-pw{position:relative;}
.a-pw .a-input{padding-right:44px;}
.a-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--a-muted);border-radius:6px;
}
.a-eye:hover,.a-eye[aria-pressed="true"]{color:var(--a-text);}
.a-code{letter-spacing:.5em;text-align:center;font-size:20px;font-variant-numeric:tabular-nums;padding-left:calc(15px + .5em);}
.a-primary{
  width:100%;height:39px;margin-top:17px;
  background:var(--a-primary);color:var(--a-primary-t);border:none;border-radius:8px;
  font-size:15px;font-weight:600;
}
.a-primary:disabled{background:var(--a-primary-dis);cursor:default;}
.a-primary:not(:disabled):hover{opacity:.9;}
.a-legal{font-size:12px;color:var(--a-text-2);text-align:center;margin-top:17px;line-height:1.5;}
.a-legal a{color:var(--a-accent);text-decoration:underline;text-underline-offset:2px;}
/* Kayıt onay kutuları (2026-10-27): koşullar zorunlu, eğitim izni isteğe bağlı (bkz. auth.js onayHtml) */
.a-onay{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.a-kutu{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--a-text-2);line-height:1.45;cursor:pointer;overflow-wrap:anywhere;}
.a-kutu input{width:16px;height:16px;margin:1px 0 0;flex:none;accent-color:var(--a-primary);cursor:pointer;}
.a-kutu a{color:var(--a-accent);text-decoration:underline;text-underline-offset:2px;}
.a-kutu-not{display:block;margin-top:3px;color:var(--a-muted);}
.a-msg{font-size:13px;margin-top:10px;min-height:0;line-height:1.45;}
.a-msg:empty{display:none;}
.a-msg.err{color:var(--a-err);}
.a-msg.ok{color:var(--a-ok);}
.a-msg.info{color:var(--a-text-2);text-align:center;}
.a-note{font-size:13.5px;color:var(--a-text-2);text-align:center;margin:0 0 14px;line-height:1.5;overflow-wrap:anywhere;}
.a-note b{color:var(--a-text);font-weight:600;}
.a-hint{font-size:12.5px;color:var(--a-accent);margin-top:7px;}
.a-hint[hidden]{display:none;}
.a-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:14px;font-size:13px;}
.a-link{background:none;border:none;padding:0;color:var(--a-text-2);font-size:13px;text-decoration:underline;text-underline-offset:2px;}
.a-link:hover{color:var(--a-text);}
.a-link:disabled{color:var(--a-muted);text-decoration:none;cursor:default;}
.a-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--a-text-2);font-size:13px;margin:-6px 0 12px -2px;padding:2px;}
.a-back:hover{color:var(--a-text);}
.a-h2{font-size:17px;font-weight:600;text-align:center;margin-bottom:6px;}

/* Kartın altındaki ikincil düğme (görseldeki "Download desktop app" yeri) */
.a-below{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;margin-top:24px;
  background:var(--a-btn);color:var(--a-text);border:1px solid var(--a-border-2);border-radius:8px;
  font-size:15px;text-decoration:none;
}
.a-below:hover{background:var(--a-btn-h);}

/* Video paneli */
.a-hero{display:none;position:relative;overflow:hidden;border-radius:16px;background:var(--a-hero);min-width:0;}
.a-grid.with-hero .a-hero{display:block;}
.a-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* Şifre gücü göstergesi */
.a-meter{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--a-text-2);min-height:18px;}
.a-meter .bars{display:flex;gap:3px;}
.a-meter .bars i{width:22px;height:4px;border-radius:2px;background:var(--a-border-2);}
.a-meter[data-level="1"] .bars i:nth-child(-n+1){background:#d9534f;}
.a-meter[data-level="2"] .bars i:nth-child(-n+2){background:#e0a030;}
.a-meter[data-level="3"] .bars i{background:#2f9e5b;}

@media (max-width:480px){
  .a-card{padding:22px 18px;border-radius:20px;}
  .a-sub{font-size:16.5px;margin:14px 0 26px;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} }

/* KLAVYE (2026-10-06): iOS odakta 16 px altındaki yazıyı büyütüp sayfayı yakınlaştırıyordu
   (bu sayfada maximum-scale yok) → dokunmatikte alan yazısı 16 px. */
@media (hover:none) and (pointer:coarse){ .a-input{font-size:16px;} }

/* DİKEY ORTALAMA (2026-10-20): içerik görünür alanın (--vh: auth.js'in ölçtüğü dinamik yükseklik — klavye açılınca
   küçülür; çıplak vh/dvh yok) dikey ortasında. Dolgu simetrik (eskiden 96/48 → içerik aşağıda duruyordu); üst dolgu
   sol üstteki logonun altında kalır. Ortalama "güvenli": içerik sığmazsa (kısa ekran, açık klavye) üstten kesilmez,
   sayfa aşağı kayar (justify-content:center yerine otomatik kenar boşlukları). Panelli düzende sol sütun ızgaranın
   asimetrik dolgusunu (82/40) taşar → görünür alanın ortası. */
.a-left{justify-content:flex-start;padding:64px 16px;}
.a-left > :first-child{margin-top:auto;}
.a-left > :last-child{margin-bottom:auto;}
.a-grid.with-hero .a-left{margin:-82px 0 -40px;padding:64px 16px;}
/* APPLE SİMGESİ (2026-10-20, "biraz büyüt"): cap-height ölçeği (0,865 → 13,8 px) kaldırıldı; elma işaretinin dolu
   ve tek renkli olması Google'ın dört renkli G'siyle aynı görsel ağırlığı 17 px'te veriyor. Yaprak üstte kaldığı için
   gövde yarım piksel yukarı alınır (düğme metniyle optik merkez). Google simgesi değişmedi (16 px). */
:root{--apple-icon-scale:1;--apple-icon-optical-y:-.5px;}
.a-btn[data-oauth="apple"] .a-ico{width:17px;height:17px;flex-basis:17px;}