/* =====================================================================
   MNEMOS — Giriş ekranı v4 "Yeni nesil" (2026-10-19, düzeltme turu 2:
   ülke menüsü kırpılmadan açılır + klavye; yer tutucu / rol hapı karşıtlığı AA)
   app-nextgen.css'ten SONRA yüklenir; davranış katmanı js/auth-nextgen.js.
   Hedeflenen pencereler — YALNIZCA:
     • #loginModal (giriş / kayıt / yönetici)
     • #authModal:has(#forgotForm, #resetForm) (şifremi unuttum / yeni şifre)
   #authModal, app.js'te authModal() ile açılan ORTAK bir kaptır (aile adı, kişi
   etiketleme, banka ödeme, aile bağları sihirbazı, API anahtarı, medya yeniden
   adlandırma…). Bu yüzden #authModal hiçbir kuralda tek başına kullanılmaz; hep
   :has(#forgotForm, #resetForm) ile daraltılır. .login-modal sınıfını paylaşan
   #familySetupModal / #mediaModal da etkilenmez. Hiçbir id / data-* / JS sınıfı değişmez.

   Kök neden (eski "ezilmiş sekmeler"):
     app-nextgen.css  .app-body .setup-tabs { display:inline-flex }   (0,2,0)
       → app.css'teki .setup-tabs / .auth-sub { display:flex } kuralını ezer;
         kap içerik genişliğine büzülür.
     app.css          .setup-tab / .auth-sub .setup-tab { flex:1 }  (= 1 1 0%)
       → büzülen kapta esas genişlik 0 olunca her düğme min-content'e iner;
         metin her boşlukta kırılır: "👤 / Kullanıcı", "Kayıt / Ol".
     (app-shell.js emoji→SVG dönüştürücüsü yalnız ".modal .btn" seçer;
      .setup-tab düğmeleri .btn olmadığından ona dokunmaz — emoji ham metin.)
   Çözüm: sekmeler grid (1fr 1fr) + nowrap; emojiler sıfır genişlikli
   "MxBlank" yazı tipiyle yutulur, yerine maske SVG ikon çizilir.

   İçindekiler
     0. Yazı tipi (emoji yutucu) · tokenlar
     1. Kabuk: arka plan odak dışı · perde
     2. Kart (ortak)
     3. Segment kontroller
     4. Alanlar · şifre göster
     5. Düğmeler · bağlantılar · yükleniyor
     6. Kayıt formu · yönetici notu · güven maddeleri
     6b. Satır içi hata / bilgi kutusu · giriş sırasında bildirim (toast)
     7. Masaüstü ≥ 900px — iki sütun
     8. Dar < 900px — üst marka + yükselen sayfa · ≤ 600px tam ekran
     9. RTL
    10. Şifre pencereleri (#authModal:has(#forgotForm, #resetForm))
    11. Hareket · hareket tercihi
   ===================================================================== */

/* ---------- 0. YAZI TİPİ + TOKENLAR ---------- */
/* Sıfır genişlikli boş glif: yalnızca giriş ekranındaki süs emojilerini görünmez kılar
   (👤 🛡️ 🔑 🌐 📨 ✅ 🔒 ✏️ 👁 …). unicode-range dışındaki her karakter Inter ile çizilir.
   Yazı tipinde boş bir COLR/CPAL katmanı var: Chrome ve Firefox VS16'lı (🛡️ gibi) emoji
   dizilerinde yalnızca "renkli" yazı tiplerini kabul ediyor; bu katman olmadan 🛡️ görünür kalıyordu.
   Yazı tipi listede olmayan emoji normal şekilde (renkli emoji fontundan) çizilir. */
@font-face {
  font-family: "MxBlank";
  src: url("data:font/ttf;base64,AAEAAAAMAIAAAwBAQ09MUgADACUAAAP0AAAAGENQQUwAAQAQAAAEDAAAABJPUy8yJO3LmwAAAUgAAABgY21hcJx01R4AAAGwAAABlGdseWYzAzI4AAADTAAAABRoZWFkLQ8CzwAAAMwAAAA2aGhlYQMj/zkAAAEEAAAAJGhtdHgAAAAAAAABqAAAAAhsb2NhAAAACgAAA0QAAAAIbWF4cAAFAAUAAAEoAAAAIG5hbWUmMIDwAAADYAAAAGBwb3N05EhwyAAAA8AAAAAyAAEAAAABAADAwXDtXw889QADA+gAAAAA5vvg9wAAAADm++D3AAAAAAABAAEAAAADAAIAAAAAAAAAAQAAAyD/OAAAAAAAAP//AAEAAQAAAAAAAAAAAAAAAAAAAAEAAQAAAAMAAwABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAADAAABkAAFAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAACAMAACAAAAAAAAAA/Pz8/AAAgDf//AyD/OAAAAyAAyAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAwAAAAMAAAAcAAMAAQAAABwAAwAKAAAAfAAEAGAAAAAUABAAAwAEIA0moCcFJwknDycUJygnTP4P//8AACANJqAnBScJJw8nFCcoJ0z+D///3/TZYdj82PjY8tjt2NnYtQHyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAEYAAAAAAAAABYAACANAAAgDQAAAAEAACagAAAmoAAAAAEAACcFAAAnBQAAAAEAACcJAAAnCQAAAAEAACcPAAAnDwAAAAEAACcUAAAnFAAAAAEAACcoAAAnKAAAAAEAACdMAAAnTAAAAAEAAP4PAAD+DwAAAAEAAfMNAAHzDQAAAAEAAfMQAAHzEAAAAAEAAfRBAAH0QQAAAAEAAfRkAAH0ZAAAAAEAAfTnAAH05wAAAAEAAfToAAH06AAAAAEAAfUQAAH1EAAAAAEAAfURAAH1EQAAAAEAAfUSAAH1EgAAAAEAAfUTAAH1EwAAAAEAAfXdAAH13QAAAAEAAfarAAH2qwAAAAEAAfbhAAH24QAAAAEAAAAAAAAACgABAAAAAAABAAEAAgAAMTUzAQEAAAAABAA2AAEAAAAAAAEABwAAAAEAAAAAAAIABwAHAAMAAQQJAAEADgAOAAMAAQQJAAIADgAcTXhCbGFua1JlZ3VsYXIATQB4AEIAbABhAG4AawBSAGUAZwB1AGwAYQByAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwVibGFuawNkb3QAAAAAAAEAAAAOAAAAFAABAAEAAAABAAIAAAAAAAEAAQABAAAADgAAAAAAAAAA") format("truetype");
  unicode-range: U+200D, U+FE0F, U+2600-27BF, U+1F300-1F6FF;
  font-display: block;
}

#loginModal, :is(#authModal:has(#forgotForm, #resetForm)) {
  --au-split: 42%;
  --au-ease: cubic-bezier(.16, 1, .3, 1);
  --au-cream: #f7f3e8;
  --au-field: #fbfaf6;
  --au-field-line: rgba(28, 38, 30, .15);
  --au-field-line-2: rgba(28, 38, 30, .26);
  /* Yer tutucu: 5.2:1 alan zemininde (#fbfaf6), 5.4:1 beyazda — WCAG AA (eski ink-400: 2.5:1).
     Girilen metinden (ink-900, 16:1) belirgin biçimde açık kalır. */
  --au-placeholder: #636c64;
  /* Alan ikonları (süs): ink-500 → 4.6:1 (grafik için gereken 3:1'in üstünde) */
  --au-icon: var(--mx-ink-500);
  --au-brand-bg:
    radial-gradient(120% 70% at 100% 0%, rgba(196, 154, 69, .26) 0%, rgba(196, 154, 69, 0) 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(63, 148, 104, .38) 0%, rgba(63, 148, 104, 0) 60%),
    linear-gradient(165deg, #0f3a21 0%, #14532d 52%, #1a6239 100%);
  --au-brand-bg-admin:
    radial-gradient(120% 70% at 100% 0%, rgba(196, 154, 69, .34) 0%, rgba(196, 154, 69, 0) 58%),
    radial-gradient(90% 60% at 0% 100%, rgba(167, 129, 47, .22) 0%, rgba(167, 129, 47, 0) 60%),
    linear-gradient(165deg, #0a2615 0%, #0f3a21 55%, #14532d 100%);
  --au-font-deco: "MxBlank", var(--mx-sans, "Inter", system-ui, sans-serif);
  --au-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20c.8-3.4 3.8-5.4 7.5-5.4s6.7 2 7.5 5.4'/%3E%3C/svg%3E");
  --au-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.8-7 9-4-1.2-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --au-i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.8 12.2 9.2-9.2M17 6l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E");
  --au-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
  --au-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --au-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --au-i-eyeoff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.6A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.9 3.7M6.6 6.6C4 8.3 2.5 12 2.5 12S6 18.5 12 18.5c1.6 0 3-.4 4.3-1.1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
  --au-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E");
  --au-i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.5 13.5'/%3E%3Cpath d='M21 3 14.5 21l-4-7.5L3 9.5z'/%3E%3C/svg%3E");
  --au-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --au-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.2M12 16.3v.2'/%3E%3C/svg%3E");
  --au-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12.3 2.5 2.5 4.8-5'/%3E%3C/svg%3E");
  --au-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --au-i-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20 7.2v9.6L12 21.2 4 16.8V7.2z'/%3E%3Cpath d='M4 7.2 12 11.6l8-4.4M12 11.6v9.6'/%3E%3C/svg%3E");
  --au-i-user2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3.5'/%3E%3Cpath d='M5 20.5c.7-3.6 3.6-5.6 7-5.6s6.3 2 7 5.6'/%3E%3C/svg%3E");
  --au-i-shieldplain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.8-7 9-4-1.2-7-4.5-7-9V6z'/%3E%3C/svg%3E");
  --au-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='840' height='840' viewBox='0 0 840 840' fill='none' stroke='%23e5cf97' stroke-opacity='.11' stroke-width='1.2'%3E%3Ccircle cx='420' cy='420' r='40'/%3E%3Ccircle cx='420' cy='420' r='70'/%3E%3Ccircle cx='420' cy='420' r='100'/%3E%3Ccircle cx='420' cy='420' r='130'/%3E%3Ccircle cx='420' cy='420' r='160'/%3E%3Ccircle cx='420' cy='420' r='190'/%3E%3Ccircle cx='420' cy='420' r='220'/%3E%3Ccircle cx='420' cy='420' r='250'/%3E%3Ccircle cx='420' cy='420' r='280'/%3E%3Ccircle cx='420' cy='420' r='310'/%3E%3Ccircle cx='420' cy='420' r='340'/%3E%3Ccircle cx='420' cy='420' r='370'/%3E%3Ccircle cx='420' cy='420' r='400'/%3E%3C/svg%3E");
  --au-g-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5cf97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.8-7 9-4-1.2-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --au-g-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5cf97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20 7.2v9.6L12 21.2 4 16.8V7.2z'/%3E%3Cpath d='M4 7.2 12 11.6l8-4.4M12 11.6v9.6'/%3E%3C/svg%3E");
  --au-g-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5cf97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.8 12.2 9.2-9.2M17 6l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E");
  --au-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b746c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 1. KABUK + PERDE ---------- */
/* Giriş açıkken mobil alt çubuk, sohbet FAB'ı ve bildirim bandı perdenin üstüne binmesin */
html:has(#loginModal:not([hidden])) :is(.mx-tabbar, .chat-fab, #pushBanner) { display: none !important; }
/* Odak perdenin arkasına kaçmasın (WCAG 2.4.3 / 2.4.11): giriş açıkken pencere dışındaki
   her şey (üst çubuk, arama, dil, kenar menü, "Üye ekle", komut paleti…) görünmez →
   Tab sırasından ve erişilebilirlik ağacından çıkar. Perde zaten %80–95 opak olduğundan
   görüntü değişmez. Yalnız giriş penceresi, şifre penceresi ve bildirim kalır.
   (JS katmanı ayrıca role=dialog / aria-modal, açılışta odak ve Tab döngüsü ekler.) */
body:has(> #loginModal:not([hidden])) > :not(#loginModal, #authModal, #toast) { visibility: hidden !important; }
/* Şifre penceresi açıkken alttaki giriş kartının etkileşimli kısmı da odak dışı
   (logo, başlık, güven maddeleri bulanık zemin olarak görünür kalır) */
html:has(#authModal:not([hidden]) :is(#forgotForm, #resetForm)) #loginModal :is(.auth-role-tabs, .auth-pane) { visibility: hidden; }
#loginModal .login-modal:focus, :is(#authModal:has(#forgotForm, #resetForm)) .mc-card:focus { outline: none; }

.app-body #loginModal {
  padding: 24px;
  background:
    radial-gradient(900px 620px at 12% 8%, rgba(196, 154, 69, .16), transparent 62%),
    radial-gradient(1000px 720px at 92% 100%, rgba(43, 125, 80, .32), transparent 62%),
    radial-gradient(130% 120% at 50% 45%, rgba(10, 38, 21, .80) 0%, rgba(4, 16, 9, .95) 100%); /* bulanıklık desteklenmese de arka plan dikkat dağıtmasın */
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  animation: auFade 360ms ease both;
}

/* ---------- 2. KART (ORTAK) ---------- */
#loginModal .login-modal {
  position: relative; isolation: isolate; overflow: hidden;
  border: 0; text-align: start;
  font-family: var(--mx-sans);
  animation: auCardIn 560ms var(--au-ease) both;
}
#loginModal .login-modal::before,
#loginModal .login-modal::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
#loginModal .login-modal::before { background: var(--au-brand-bg); transition: opacity 400ms ease; }
/* Yönetici sekmesinde marka paneli daha derin, altın vurgulu */
#loginModal:has(.auth-pane[data-pane="admin"]:not([hidden])) .login-modal::before { background: var(--au-brand-bg-admin); }
/* Yıllık halka deseni (anı / kuşak metaforu) */
#loginModal .login-modal::after { background: var(--au-rings) no-repeat; }

#loginModal .modal-body { position: relative; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(28, 38, 30, .25) transparent; }

/* Logo: krem madalyon (logo-mark.png beyaz zeminli → koyu panelde karo içinde) */
#loginModal .login-logo {
  display: block; box-sizing: border-box;
  width: 64px; height: 64px; padding: 7px; object-fit: contain;
  border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(229, 207, 151, .45), 0 0 0 6px rgba(229, 207, 151, .08), 0 14px 30px -10px rgba(0, 0, 0, .55);
}
#loginModal #authTitle {
  font-family: var(--mx-serif); font-weight: 600; letter-spacing: -.01em;
  color: var(--au-cream); text-wrap: balance;
}
#loginModal #authSub { color: rgba(247, 243, 232, .74); line-height: 1.55; text-wrap: pretty; }

/* ---------- 3. SEGMENT KONTROLLER ---------- */
/* Ortak: eşit bölmeli grid + kayan gösterge (::before) */
#loginModal .auth-sub,
#loginModal .auth-role-tabs {
  position: relative; box-sizing: border-box;
  grid-template-columns: 1fr 1fr; gap: 0;
}
#loginModal .auth-sub::before,
#loginModal .auth-role-tabs::before {
  content: ""; position: absolute; z-index: 0;
  inset-inline-start: var(--seg-pad); top: var(--seg-pad); bottom: var(--seg-pad);
  width: calc(50% - var(--seg-pad));
  transition: transform 340ms var(--au-ease), background-color 200ms;
}
/* Seçili segment .active sınıfından DEĞİL, görünen form/panelden okunur:
   app.js'teki aile kurulum işleyicisi (document.querySelectorAll(".setup-tab")) giriş
   sekmelerinin .active sınıfını da siliyor (integrationTodo). Böylece gösterge hep doğru. */
#loginModal:has(#userRegisterForm:not([hidden])) .auth-sub::before,
#loginModal:has(.auth-pane[data-pane="admin"]:not([hidden])) .auth-role-tabs::before { transform: translateX(100%); }
#loginModal :is(.auth-sub, .auth-role-tabs) .setup-tab {
  position: relative; z-index: 1; min-width: 0; min-height: 0; height: 100%;
  margin: 0; border: 0 !important; box-shadow: none !important;
  background: transparent !important; transform: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: color 200ms ease;
}

/* Giriş / Kayıt Ol — belirgin, tam genişlik */
#loginModal .auth-sub {
  --seg-pad: 4px;
  display: grid !important; width: 100%; height: 50px;
  padding: var(--seg-pad) !important; margin: 0 0 24px;
  border-radius: 15px; background: #f0ece1 !important;
  box-shadow: inset 0 0 0 1px rgba(28, 38, 30, .06), inset 0 1px 2px rgba(28, 38, 30, .05);
}
#loginModal .auth-sub::before {
  border-radius: 11px; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 32, 24, .08), 0 6px 16px -6px rgba(20, 32, 24, .22), 0 0 0 1px rgba(20, 32, 24, .04);
}
#loginModal .auth-sub .setup-tab {
  padding: 0 12px !important; border-radius: 11px !important;
  color: var(--mx-ink-600) !important;
  font: 600 .9375rem/1 var(--mx-sans) !important; letter-spacing: -.005em;
}
#loginModal .auth-sub .setup-tab:hover { color: var(--mx-ink-900) !important; }
#loginModal:has(#userLoginForm:not([hidden])) .auth-sub [data-umode="login"],
#loginModal:has(#userRegisterForm:not([hidden])) .auth-sub [data-umode="register"] { color: var(--mx-brand-800) !important; }
#loginModal :is(.auth-sub, .auth-role-tabs) .setup-tab:focus-visible { outline: none; box-shadow: var(--mx-ring) !important; }

/* Kullanıcı / Yönetici — sakin, küçük hap */
#loginModal .auth-role-tabs {
  --seg-pad: 3px;
  display: inline-grid !important; height: 36px; max-width: 100%;
  padding: var(--seg-pad) !important; margin: 0;
  border-radius: 999px;
}
#loginModal .auth-role-tabs::before { border-radius: 999px; }
#loginModal .auth-role-tabs .setup-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 0 14px 0 12px; border-radius: 999px !important;
  font: 600 .8125rem/1 var(--au-font-deco);
  color: var(--rt-c);
}
#loginModal .auth-role-tabs .setup-tab:hover { color: var(--rt-c-hover); }
#loginModal:has(.auth-pane[data-pane="user"]:not([hidden])) .auth-role-tabs [data-role="user"],
#loginModal:has(.auth-pane[data-pane="admin"]:not([hidden])) .auth-role-tabs [data-role="admin"] { color: var(--rt-c-sel); }
#loginModal .auth-role-tabs .setup-tab::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-inline-end: 3px;
  background-color: currentColor;
  -webkit-mask: var(--au-i-user2) center / contain no-repeat; mask: var(--au-i-user2) center / contain no-repeat;
}
#loginModal .auth-role-tabs .setup-tab[data-role="admin"]::before { -webkit-mask-image: var(--au-i-shieldplain); mask-image: var(--au-i-shieldplain); }

/* :has desteklemeyen tarayıcılar: gösterge yerine seçili düğme boyanır */
@supports not selector(:has(*)) {
  #loginModal :is(.auth-sub, .auth-role-tabs)::before { display: none; }
  #loginModal .auth-sub .setup-tab.active { background: #fff !important; box-shadow: 0 1px 3px rgba(20, 32, 24, .12) !important; }
  #loginModal .auth-role-tabs .setup-tab.active { background: rgba(255, 255, 255, .9) !important; color: var(--mx-ink-900); }
  #loginModal .auth-sub .setup-tab.active { color: var(--mx-brand-800) !important; }
}

/* ---------- 4. ALANLAR ---------- */
#loginModal .auth-pane { text-align: start; }
#loginModal .auth-form, :is(#authModal:has(#forgotForm, #resetForm)) .auth-form { gap: 16px; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  margin: 0; text-align: start;
  font: 500 .8125rem/1.3 var(--mx-sans); color: var(--mx-ink-700);
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label > span:first-child { font: inherit; color: inherit; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label small { font-size: .75rem; font-weight: 400; color: var(--mx-ink-500); }

:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form :is(input[type="email"], input[type="password"], input[type="text"], select) {
  width: 100%; box-sizing: border-box;
  height: 48px; min-height: 48px !important;
  padding: 0 16px !important;
  border: 0 !important; border-radius: 12px !important;
  background-color: var(--au-field) !important;
  box-shadow: inset 0 0 0 1px var(--au-field-line) !important;
  color: var(--mx-ink-900);
  font: 400 1rem/1.2 var(--mx-sans) !important; /* 16px: iOS yakınlaştırmasını önler */
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form select:not([multiple]) { padding-right: 38px !important; background-position: right 14px center; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form :is(input, select):hover { box-shadow: inset 0 0 0 1px var(--au-field-line-2) !important; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form :is(input, select):focus {
  outline: none; background-color: #fff !important;
  box-shadow: inset 0 0 0 1.5px var(--mx-brand-600), 0 0 0 4px rgba(63, 148, 104, .18) !important;
}
/* Hata durumu: kullanıcı dokunduktan / gönderdikten sonra geçersizse */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form :is(input:user-invalid, input[aria-invalid="true"]) {
  background-color: #fffafa !important;
  box-shadow: inset 0 0 0 1.5px var(--mx-danger), 0 0 0 4px rgba(180, 50, 43, .12) !important;
}
/* opacity: 1 → Firefox'un varsayılan %54 yer tutucu saydamlığı karşıtlığı düşürmesin */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form input::placeholder { color: var(--au-placeholder); opacity: 1; }
/* Otomatik doldurma: Chrome'un mavi zeminini markaya uydur */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--mx-ink-900);
  box-shadow: inset 0 0 0 1px var(--au-field-line), inset 0 0 0 100px #f3f8f4 !important;
}

/* Alan önü ikonları (etiketin ::after'ı — otomatik doldurma zeminini de aşar) */
/* Fiziksel dolgu (app.css'teki padding-right !important ile aynı mantıksal grupta çakışmasın) */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(> input[type="email"], > input[id="urName"]) > input,
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label .pw-wrap > input { padding-left: 46px !important; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(> input[type="email"], > input[id="urName"], .pw-wrap > input)::after {
  content: ""; position: absolute; bottom: 14px; inset-inline-start: 15px;
  width: 20px; height: 20px; pointer-events: none;
  background-color: var(--au-icon);
  -webkit-mask: var(--au-i-mail) center / contain no-repeat; mask: var(--au-i-mail) center / contain no-repeat;
  transition: background-color 180ms ease;
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(.pw-wrap > input)::after { -webkit-mask-image: var(--au-i-lock); mask-image: var(--au-i-lock); }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(> input[id="urName"])::after { -webkit-mask-image: var(--au-i-user2); mask-image: var(--au-i-user2); }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(input:focus)::after { background-color: var(--mx-brand-600); }

/* Şifre göster / gizle — 👁 emojisi yerine çizgi ikon */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-wrap { display: block; position: relative; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-wrap input { padding-right: 52px !important; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-eye {
  position: absolute; top: 50%; right: 6px; left: auto;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--mx-ink-500); opacity: 1;
  font-size: 0 !important; line-height: 0;
  transform: translateY(-50%);
  cursor: pointer; transition: background-color 160ms, color 160ms;
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-eye::before {
  content: ""; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: var(--au-i-eye) center / contain no-repeat; mask: var(--au-i-eye) center / contain no-repeat;
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-eye:hover { background: var(--mx-surface-2); color: var(--mx-ink-800); opacity: 1; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-eye.on { color: var(--mx-brand-700); transform: translateY(-50%); }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-eye.on::before { -webkit-mask-image: var(--au-i-eyeoff); mask-image: var(--au-i-eyeoff); }

/* ---------- 5. DÜĞMELER · BAĞLANTILAR ---------- */
#loginModal .auth-form .btn-gold,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; height: auto; padding: 12px 22px;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #1f6c43 0%, #14532d 100%);
  color: #fff;
  font: 600 .9375rem/1.25 var(--au-font-deco); letter-spacing: .005em;
  white-space: normal; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(10, 38, 21, .30), 0 12px 26px -12px rgba(10, 38, 21, .75);
  transition: transform 160ms ease, box-shadow 220ms ease, filter 220ms ease;
}
#loginModal .auth-form .btn-gold { margin-top: 6px; }
#loginModal .auth-form .btn-gold::after,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes::after {
  content: ""; position: static; flex: none; width: 18px; height: 18px;
  left: auto; transform: none; animation: none;
  background: currentColor;
  -webkit-mask: var(--au-i-arrow) center / contain no-repeat; mask: var(--au-i-arrow) center / contain no-repeat;
  transition: transform 220ms var(--au-ease);
}
#loginModal .auth-form .btn-gold:hover,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes:hover {
  color: #fff; filter: brightness(1.08) saturate(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(10, 38, 21, .25), 0 18px 32px -14px rgba(10, 38, 21, .8);
}
#loginModal .auth-form .btn-gold:hover::after,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes:hover::after { transform: translateX(3px); }
#loginModal .auth-form .btn-gold:active,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes:active { transform: translateY(0) scale(.99); filter: brightness(.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(10, 38, 21, .3); }
#loginModal .auth-form .btn-gold > svg.mx-ic { display: none; } /* app-shell ikonu eklerse ok ikonuyla çakışmasın */
/* Gönderiliyor (JS: .au-busy): ok yerine dönen halka, çift gönderim engeli */
#loginModal .auth-form .btn-gold.au-busy,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes.au-busy { pointer-events: none; cursor: progress; filter: saturate(.85); transform: none; }
#loginModal .auth-form .btn-gold.au-busy::after,
:is(#authModal:has(#forgotForm, #resetForm)) .mc-yes.au-busy::after {
  -webkit-mask: none; mask: none; background: transparent;
  box-sizing: border-box; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: auSpin 700ms linear infinite;
}

/* Şifremi unuttum — zarif bağlantı */
#loginModal .auth-forgot {
  align-self: center; display: inline-flex; align-items: center; gap: 2px;
  margin: -4px 0 0; padding: 7px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--mx-ink-600);
  font: 500 .8125rem/1.2 var(--au-font-deco);
  cursor: pointer; transition: color 160ms, background-color 160ms;
}
#loginModal .auth-forgot::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-inline-end: 4px;
  background-color: currentColor;
  -webkit-mask: var(--au-i-key) center / contain no-repeat; mask: var(--au-i-key) center / contain no-repeat;
}
#loginModal .auth-forgot:hover { color: var(--mx-brand-700); background: var(--mx-brand-50); text-decoration: none; }

/* ---------- 6. KAYIT · YÖNETİCİ NOTU · GÜVEN MADDELERİ ---------- */
#loginModal #userRegisterForm .form-row { gap: 14px; }
#loginModal #userRegisterForm > .login-sub {
  display: flex; align-items: flex-start; gap: 2px;
  margin: -4px 0 0 !important; text-align: start;
  font: 400 .75rem/1.45 var(--au-font-deco) !important; color: var(--mx-ink-500);
  text-indent: -.25em; /* yutulan emojiden sonra kalan boşluğu dengeler */
}
#loginModal #userRegisterForm > .login-sub::before {
  content: ""; flex: none; width: 14px; height: 14px; margin: 1px 4px 0 0;
  background-color: currentColor;
  -webkit-mask: var(--au-i-globe) center / contain no-repeat; mask: var(--au-i-globe) center / contain no-repeat;
}
/* Bayraklı ülke seçici — alanlarla aynı dil */
#loginModal .cselect-btn {
  min-height: 48px; padding: 0 14px; gap: 10px; box-sizing: border-box;
  border: 0; border-radius: 12px; text-align: start;
  background: var(--au-field); box-shadow: inset 0 0 0 1px var(--au-field-line);
  font: 400 1rem/1.2 var(--mx-sans); color: var(--mx-ink-900);
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
#loginModal .cselect-btn:hover { border: 0; box-shadow: inset 0 0 0 1px var(--au-field-line-2); }
#loginModal .cselect-btn:focus-visible { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--mx-brand-600), 0 0 0 4px rgba(63, 148, 104, .18) !important; }
#loginModal .cselect-btn .ci-caret {
  flex: none; width: 12px; height: 8px; font-size: 0;
  background: var(--au-chev) center / 12px 8px no-repeat;
}
#loginModal .cselect-btn .ci-caret { transition: transform 220ms var(--au-ease); }
#loginModal .cselect-btn[aria-expanded="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--mx-brand-600), 0 0 0 4px rgba(63, 148, 104, .18); }
#loginModal .cselect-btn[aria-expanded="true"] .ci-caret { transform: rotate(180deg); }
/* Menü yönü: kart (overflow:hidden) ve kaydırma alanı menüyü kırpıyordu (aşağı açılınca
   1000×650'de 112px, 1440×900'de 116px kesik). js/auth-nextgen.js açılışta kartın görünür
   alanını ölçer → data-au-place="up|down" + --au-menu-max (sığan yükseklik).
   JS yoksa varsayılan YUKARI: alan her yerleşimde formun altında, üstünde ≥ 260px var. */
#loginModal .cselect-menu {
  top: auto; bottom: calc(100% + 6px);
  max-height: var(--au-menu-max, 260px);
  border: 0; border-radius: 14px; padding: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 32, 24, .06), 0 24px 48px -16px rgba(20, 32, 24, .32), 0 0 0 1px rgba(28, 38, 30, .08);
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(28, 38, 30, .25) transparent;
  transform-origin: 50% 100%;
  animation: auPopUp 200ms var(--au-ease) both;
}
#loginModal .cselect-menu[data-au-place="down"] { top: calc(100% + 6px); bottom: auto; transform-origin: 50% 0; animation-name: auPopDown; }
/* Menü segment düğmelerinin (z-index 1) ALTINDA kalıyordu: form animasyonu kendi katmanını
   açtığı için menünün z-index'i form içinde kalır. Panel + kayıt formu sekmelerin üst katmanında. */
#loginModal .auth-pane, #loginModal #userRegisterForm { position: relative; z-index: 2; }
#loginModal .cselect-menu:focus { outline: none; }
#loginModal .cselect-item { padding: 10px 12px; border-radius: 10px; font: 400 .9375rem/1.2 var(--mx-sans); color: var(--mx-ink-800); text-align: start; }
#loginModal .cselect-item:hover { background: var(--mx-surface-2); }
#loginModal .cselect-item.sel { background: var(--mx-brand-50); color: var(--mx-brand-800); font-weight: 600; }
/* Klavyeyle gezinme (↑ ↓ Home End, harfle arama): odaktaki seçenek. Halka uygulamanın
   ortak altın odak halkası (app-nextgen.css --mx-ring); 6px menü dolgusu halkayı kırpmaz. */
#loginModal .cselect-item:focus { outline: none; }
#loginModal .cselect-item:focus-visible { background: var(--mx-surface-2); }
#loginModal .cselect-item.sel:focus-visible { background: var(--mx-brand-50); }

/* Yönetici notu */
#loginModal .admin-login-note {
  display: flex; align-items: flex-start; gap: 2px;
  margin: 0 0 22px; padding: 12px 14px;
  border: 0; border-radius: 12px; text-align: start;
  background: var(--mx-gold-50); box-shadow: inset 0 0 0 1px rgba(196, 154, 69, .30);
  color: var(--mx-gold-800);
  font: 500 .8125rem/1.45 var(--au-font-deco);
  text-indent: -.25em;
}
#loginModal .admin-login-note::before {
  content: ""; flex: none; width: 16px; height: 16px; margin: 1px 6px 0 0;
  background-color: var(--mx-gold-600);
  -webkit-mask: var(--au-i-shield) center / contain no-repeat; mask: var(--au-i-shield) center / contain no-repeat;
}

/* Güven maddeleri — app.html'e eklenecek <ul class="auth-trust"> için (integrationTodo) */
#loginModal .auth-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
#loginModal .auth-trust li {
  display: flex; align-items: center; gap: 12px; margin: 0;
  color: rgba(247, 243, 232, .88); font: 500 .875rem/1.4 var(--mx-sans);
  text-wrap: balance;
}
#loginModal .auth-trust li::before {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(229, 207, 151, .10) var(--au-g-shield) center / 17px 17px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(229, 207, 151, .24);
}
#loginModal .auth-trust .at-chain::before { background-image: var(--au-g-cube); }
#loginModal .auth-trust .at-own::before { background-image: var(--au-g-key); }

/* ---------- 6b. SATIR İÇİ HATA / BİLGİ (js/auth-nextgen.js: .au-msg) ---------- */
/* Forma bağlı kutu: formun başında, role=alert (hata) / role=status (bilgi);
   ilgili alanlar aria-invalid + aria-describedby alır. */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .au-msg {
  display: flex; align-items: flex-start; gap: 10px;
  box-sizing: border-box; width: 100%; margin: 0; padding: 11px 14px;
  border-radius: 12px; text-align: start;
  font: 500 .875rem/1.45 var(--mx-sans); letter-spacing: 0;
  overflow-wrap: anywhere;
  animation: auMsgIn 320ms var(--au-ease) both;
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .au-msg[data-kind="error"] {
  background: var(--mx-danger-50); color: #8c2620; box-shadow: inset 0 0 0 1px rgba(180, 50, 43, .24);
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .au-msg[data-kind="info"] {
  background: var(--mx-brand-50); color: var(--mx-brand-800); box-shadow: inset 0 0 0 1px rgba(43, 125, 80, .24);
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .au-msg::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: var(--au-i-alert) center / contain no-repeat; mask: var(--au-i-alert) center / contain no-repeat;
}
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .au-msg[data-kind="info"]::before { -webkit-mask-image: var(--au-i-ok); mask-image: var(--au-i-ok); }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .au-msg-t { flex: 1 1 auto; min-width: 0; }
/* Hatalı alan: çerçeve (bölüm 4) + ikon ve etiket de kırmızı; odaktayken de kırmızı kalır */
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(input[aria-invalid="true"])::after { background-color: var(--mx-danger); }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(input[aria-invalid="true"]) > span:first-child { color: #8c2620; }
:is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form input[aria-invalid="true"]:focus {
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1.5px var(--mx-danger), 0 0 0 4px rgba(180, 50, 43, .16) !important;
}

/* Giriş açıkken bildirim (#toast). JS katmanı giriş sırasındaki bildirimleri forma taşır;
   bu kurallar yalnız geriye kalanlar (ya da JS yüklenmemişse) için:
   · dar ekran: i18n.js'in satır içi "left:50%" değeri yüzünden ekranın yarısına sıkışmasın
     → iki yanda 16px boşlukla, içeriğe göre ortalı
   · masaüstü: kartın alt kenarına / yeşil-beyaz birleşimine binmesin → form sütununun
     ortasında, kartın İÇİNDE alt boşlukta (kart yüksekliği bölüm 7'deki tabanla aynı) */
html:has(#loginModal:not([hidden])) #toast {
  box-sizing: border-box;
  left: 16px !important; right: 16px !important; margin-inline: auto;
  width: fit-content !important; max-width: calc(100vw - 32px);
  transform: none !important; text-align: center; line-height: 1.45;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 900px) {
  html:has(#loginModal:not([hidden])) #toast {
    --au-card-w: min(960px, 100vw - 48px);
    left: calc(50vw + .21 * var(--au-card-w)) !important; right: auto !important; margin: 0;
    width: max-content !important; max-width: calc(.58 * var(--au-card-w) - 64px);
    transform: translateX(-50%) !important; padding: 10px 18px !important;
    bottom: calc((100dvh - 600px) / 2 + 8px) !important;
  }
  [dir="rtl"]:has(#loginModal:not([hidden])) #toast { left: calc(50vw - .21 * var(--au-card-w)) !important; }
}
@media (min-width: 900px) and (max-height: 720px) {
  html:has(#loginModal:not([hidden])) #toast { bottom: calc((100dvh - min(580px, 100dvh - 32px)) / 2 + 8px) !important; }
}

/* ---------- 7. MASAÜSTÜ ≥ 900px — İKİ SÜTUN ---------- */
@media (min-width: 900px) {
  #loginModal .login-modal {
    width: min(960px, 100%);
    max-height: min(720px, calc(100dvh - 48px));
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  }
  /* Giriş ↔ Kayıt ↔ Yönetici geçişinde kart zıplamasın: ortak taban yükseklik */
  #loginModal .login-modal { min-height: min(600px, calc(100dvh - 48px)); }
  #loginModal .login-modal::before,
  #loginModal .login-modal::after { inset-block: 0; inset-inline-start: 0; width: var(--au-split); }
  #loginModal .login-modal::after { background-size: 760px 760px; background-position: left -330px bottom -330px; }

  /* Gövde kartı tam doldurur (flex: 1): güven maddeleri hep kartın altında, sekme
     değişince marka panelindeki içerik zıplamaz. Form sağ sütunda üstten hizalı: tıklanan
     Giriş / Kayıt Ol kontrolü yerinde kalır, içerik aşağı doğru uzar. */
  #loginModal .modal-body {
    display: grid; overflow-y: auto;
    flex: 1 1 auto; min-height: 0;
    grid-template-columns: var(--au-split) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    padding: 0;
  }
  #loginModal .login-logo { grid-column: 1; grid-row: 1; margin: 40px 48px 0; justify-self: start; }
  #loginModal #authTitle { grid-column: 1; grid-row: 2; margin: 40px 48px 0; font-size: 2.75rem; line-height: 1.04; }
  #loginModal #authSub { grid-column: 1; grid-row: 3; margin: 14px 48px 0; max-width: 30ch; font-size: .9375rem; }
  #loginModal .auth-trust { grid-column: 1; grid-row: 5; margin: 32px 48px 44px; }

  #loginModal .auth-role-tabs {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    margin: 40px 48px 0;
    background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line);
  }
  #loginModal .auth-role-tabs::before { background: #fff; box-shadow: 0 1px 2px rgba(20, 32, 24, .1), 0 0 0 1px rgba(20, 32, 24, .05); }
  /* Seçili olmayan hap: ink-600 → 6.2:1 (#f7f4ec üzerinde; ink-500 4.4:1 idi, AA altı) */
  #loginModal .auth-role-tabs { --rt-c: var(--mx-ink-600); --rt-c-hover: var(--mx-ink-900); --rt-c-sel: var(--mx-ink-900); }

  #loginModal .auth-pane { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin: 24px 56px 44px; }

  /* Kayıt: Ad + E-posta yan yana → 650px yükseklikte kaydırmasız sığar */
  #loginModal #userRegisterForm:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 16px; }
  #loginModal #userRegisterForm > :not(label:nth-of-type(1), label:nth-of-type(2)) { grid-column: 1 / -1; }
}
/* Kısa masaüstü pencereleri (≈ 650px): boşlukları sıkılaştır */
@media (min-width: 900px) and (max-height: 720px) {
  #loginModal .login-modal { max-height: calc(100dvh - 32px); }
  #loginModal .login-modal { min-height: min(580px, calc(100dvh - 32px)); }
  .app-body #loginModal { padding: 16px 24px; }
  #loginModal .login-logo { margin-top: 32px; width: 56px; height: 56px; border-radius: 18px; }
  #loginModal .auth-role-tabs { margin-top: 32px; }
  #loginModal #authTitle { margin-top: 28px; font-size: 2.5rem; }
  #loginModal .auth-trust { margin-bottom: 32px; gap: 12px; }
  #loginModal .auth-pane { margin-top: 20px; margin-bottom: 32px; }
  #loginModal .auth-sub { margin-bottom: 20px; }
  #loginModal .auth-form { gap: 14px; }
}

/* ---------- 8. DAR < 900px — ÜST MARKA + YÜKSELEN SAYFA ---------- */
@media (max-width: 899.98px) {
  #loginModal .login-modal {
    width: min(480px, 100%);
    max-height: calc(100dvh - 32px);
    border-radius: 28px;
    background: #0f3a21;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  }
  #loginModal .login-modal::before { inset: 0; }
  #loginModal .login-modal::after { top: 0; inset-inline: 0; height: 420px; background-size: 640px 640px; background-position: right -300px top -330px; }

  #loginModal .modal-body {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; padding: 32px 28px 0; text-align: center;
  }
  #loginModal .modal-body > * { flex-shrink: 0; }
  #loginModal .login-logo { margin: 0 auto; width: 60px; height: 60px; border-radius: 19px; }
  #loginModal #authTitle { margin: 18px 0 0; font-size: 2rem; line-height: 1.1; }
  #loginModal #authSub { margin: 8px auto 0; max-width: 34ch; font-size: .875rem; }
  #loginModal .auth-trust { display: none; }

  /* Rol seçimi: koyu zeminde cam hap */
  #loginModal .auth-role-tabs {
    align-self: center; margin: 22px auto 24px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(247, 243, 232, .16);
  }
  #loginModal .auth-role-tabs::before { background: var(--au-cream); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35); }
  /* .88 → en açık yeşil zeminde de ≥ 5:1 (.72 ile 4.6:1, sınırda idi) */
  #loginModal .auth-role-tabs { --rt-c: rgba(247, 243, 232, .88); --rt-c-hover: #fff; --rt-c-sel: var(--mx-brand-900); }

  /* Form = alttan yükselen beyaz sayfa */
  #loginModal .auth-pane:not([hidden]) {
    flex: 1 0 auto;
    margin: 0 -28px; padding: 26px 28px 28px;
    border-radius: 26px 26px 0 0;
    background: #fff;
    box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .6);
  }
  #loginModal .auth-pane::before { /* tutamaç */
    content: ""; display: block; width: 40px; height: 4px; margin: -12px auto 18px;
    border-radius: 999px; background: rgba(28, 38, 30, .14);
  }
}
@media (max-width: 600px) {
  .app-body #loginModal { padding: 0; align-items: stretch; justify-content: stretch; }
  #loginModal .login-modal {
    width: 100%; height: 100%; max-width: none; max-height: none;
    border-radius: 0; box-shadow: none;
    animation: auFade 320ms ease both;
  }
  #loginModal .modal-body { padding: calc(28px + env(safe-area-inset-top, 0px)) 20px 0; }
  #loginModal .login-logo { width: 56px; height: 56px; border-radius: 18px; }
  #loginModal #authTitle { margin-top: 16px; font-size: 1.875rem; }
  #loginModal .auth-role-tabs { margin: 20px auto 22px; }
  #loginModal .auth-pane:not([hidden]) {
    margin: 0 -20px; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    animation: auSheetUp 620ms var(--au-ease) both;
  }
  #loginModal .auth-sub { margin-bottom: 22px; }
}
@media (max-width: 360px) {
  #loginModal .auth-role-tabs .setup-tab { padding: 0 10px 0 8px; font-size: .75rem; }
  #loginModal .auth-sub .setup-tab { padding: 0 8px !important; font-size: .875rem !important; }
}

/* ---------- 9. RTL ---------- */
[dir="rtl"] #loginModal:has(#userRegisterForm:not([hidden])) .auth-sub::before,
[dir="rtl"] #loginModal:has(.auth-pane[data-pane="admin"]:not([hidden])) .auth-role-tabs::before { transform: translateX(-100%); }
[dir="rtl"] :is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .pw-eye { right: auto; left: 6px; }
[dir="rtl"] :is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label:has(> input[type="email"], > input[id="urName"]) > input { padding-left: 16px !important; padding-right: 46px !important; }
[dir="rtl"] :is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form label .pw-wrap > input { padding-left: 52px !important; padding-right: 46px !important; }
[dir="rtl"] #loginModal .auth-form .btn-gold::after,
[dir="rtl"] :is(#authModal:has(#forgotForm, #resetForm)) .mc-yes::after { transform: scaleX(-1); }
[dir="rtl"] #loginModal .auth-form .btn-gold:hover::after,
[dir="rtl"] :is(#authModal:has(#forgotForm, #resetForm)) .mc-yes:hover::after { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] #authModal:has(#resetForm) .mc-yes::after, [dir="rtl"] #authModal:has(#resetForm) .mc-yes:hover::after { transform: none; }
[dir="rtl"] #loginModal #userRegisterForm > .login-sub::before { margin: 1px 0 0 4px; }
[dir="rtl"] #loginModal .admin-login-note::before { margin: 1px 0 0 6px; }
[dir="rtl"] :is(#loginModal, #authModal:has(#forgotForm, #resetForm)) .auth-form select:not([multiple]) { padding-right: 16px !important; padding-left: 38px !important; background-position: left 14px center; }
[dir="rtl"] #loginModal .login-modal::after { background-position: right -330px bottom -330px; }
@media (max-width: 899.98px) { [dir="rtl"] #loginModal .login-modal::after { background-position: left -300px top -330px; } }
/* Arapça: Cormorant Arapça glif içermez → başlık sans, harf aralığı sıfır */
[dir="rtl"] #loginModal #authTitle,
[dir="rtl"] :is(#authModal:has(#forgotForm, #resetForm)) .mc-card h3 { font-family: var(--mx-sans); font-weight: 700; letter-spacing: 0; }
@media (min-width: 900px) { [dir="rtl"] #loginModal #authTitle { font-size: 2.25rem; line-height: 1.25; } }

/* ---------- 10. #authModal:has(#forgotForm, #resetForm) — ŞİFREMİ UNUTTUM · YENİ ŞİFRE ---------- */
#authModal:has(#forgotForm, #resetForm).mc-overlay {
  padding: 16px;
  background:
    radial-gradient(800px 560px at 50% 30%, rgba(20, 83, 45, .30), transparent 65%),
    rgba(4, 16, 9, .70);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  animation: auFade 260ms ease both;
}
#authModal:has(#forgotForm, #resetForm) .mc-card {
  box-sizing: border-box; width: min(440px, 100%);
  padding: 32px 32px 26px; border-radius: 24px;
  background: #fff; text-align: center;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(28, 38, 30, .06);
  font-family: var(--mx-sans);
  animation: auCardIn 480ms var(--au-ease) both;
}
#authModal:has(#forgotForm, #resetForm) .mc-icons { margin: 0 0 18px; }
#authModal:has(#forgotForm, #resetForm) .mc-ic {
  position: relative; width: 56px; height: 56px;
  border: 0; border-radius: 18px; font-size: 0;
  background: linear-gradient(160deg, #1c6a3f 0%, #0f3a21 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 6px var(--mx-brand-50), 0 14px 28px -12px rgba(10, 38, 21, .7);
  animation: none;
}
#authModal:has(#forgotForm, #resetForm) .mc-ic::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px;
  background-color: var(--mx-gold-300);
  -webkit-mask: var(--au-i-key) center / contain no-repeat; mask: var(--au-i-key) center / contain no-repeat;
}
#authModal:has(#resetForm) .mc-ic::before { -webkit-mask-image: var(--au-i-lock); mask-image: var(--au-i-lock); }
#authModal:has(#forgotForm, #resetForm) .mc-card h3 {
  margin: 0 0 8px; color: var(--mx-ink-900);
  font: 600 1.75rem/1.15 var(--mx-serif); letter-spacing: -.01em;
}
#authModal:has(#forgotForm, #resetForm) .mc-card p { margin: 0 auto 22px; max-width: 36ch; color: var(--mx-ink-600) !important; font: 400 .9375rem/1.55 var(--mx-sans); }
#authModal:has(#forgotForm, #resetForm) .auth-form label { margin: 0; }
#authModal:has(#forgotForm, #resetForm) .mc-btns { display: flex; gap: 10px; margin-top: 10px; }
#authModal:has(#forgotForm, #resetForm) .mc-btns button { flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 14px; }
#authModal:has(#forgotForm, #resetForm) .mc-no {
  border: 0; background: var(--mx-surface-2); color: var(--mx-ink-700);
  box-shadow: inset 0 0 0 1px var(--mx-line-2);
  font: 600 .9375rem/1.2 var(--mx-sans);
  transition: background-color 160ms, color 160ms;
}
#authModal:has(#forgotForm, #resetForm) .mc-no:hover { background: var(--mx-surface-3); color: var(--mx-ink-900); }
#authModal:has(#forgotForm, #resetForm) .mc-btns .mc-no { flex: 0 1 auto; padding: 0 22px; }
#authModal:has(#forgotForm, #resetForm) .mc-btns .mc-yes { flex: 1 1 auto; width: auto; padding: 12px 16px; }
#authModal:has(#forgotForm, #resetForm) .mc-yes::after { -webkit-mask-image: var(--au-i-send); mask-image: var(--au-i-send); width: 17px; height: 17px; }
#authModal:has(#resetForm) .mc-yes::after { -webkit-mask-image: var(--au-i-check); mask-image: var(--au-i-check); }
#authModal:has(#forgotForm, #resetForm) .mc-btns button:focus-visible { outline: none; box-shadow: var(--mx-ring) !important; }
@media (max-width: 600px) {
  #authModal:has(#forgotForm, #resetForm).mc-overlay { padding: 0; place-items: end stretch; }
  #authModal:has(#forgotForm, #resetForm) .mc-card {
    width: 100%; max-height: 92dvh;
    padding: 28px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    animation: auSheetUp 520ms var(--au-ease) both;
  }
  #authModal:has(#forgotForm, #resetForm) .mc-btns { flex-direction: column-reverse; }
  #authModal:has(#forgotForm, #resetForm) .mc-btns :is(.mc-no, .mc-yes) { flex: 0 0 auto; width: 100%; }
}

/* ---------- 11. HAREKET ---------- */
@keyframes auFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes auRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes auMsgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes auSpin { to { transform: rotate(360deg); } }
@keyframes auSheetUp { from { opacity: .3; transform: translateY(64px); } to { opacity: 1; transform: none; } }
@keyframes auPopUp { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes auPopDown { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

#loginModal :is(.login-logo, #authTitle, #authSub, .auth-trust) { animation: auRise 620ms var(--au-ease) both; }
#loginModal #authTitle { animation-delay: 70ms; }
#loginModal #authSub { animation-delay: 130ms; }
#loginModal .auth-trust { animation-delay: 200ms; }
#loginModal .auth-form:not([hidden]), #loginModal .admin-login-note { animation: auRise 360ms var(--au-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .app-body #loginModal, #loginModal *, #loginModal *::before, #loginModal *::after,
  :is(#authModal:has(#forgotForm, #resetForm)), :is(#authModal:has(#forgotForm, #resetForm)) *, :is(#authModal:has(#forgotForm, #resetForm)) *::before, :is(#authModal:has(#forgotForm, #resetForm)) *::after {
    animation: none !important; transition: none !important;
  }
}