/* ==========================================================================
   osp-theme.css — Online Sipariş Paneli tema katmanı
   --------------------------------------------------------------------------
   Amaç: yeni ana sayfanın (project-files/onlinesiparispaneli.html) renk,
   tipografi, yuvarlaklık ve gölge dilini panelin diğer frontend sayfalarına
   (login, sign-up, pricing, users, contacts, terms, cookies-privacy, reviews)
   HTML yapısına dokunmadan taşımak.

   YÜKLEME SIRASI (önemli):
   header.php içinde responsive.css satırından HEMEN SONRA yüklenir. Yani
   tema CSS'lerinin tamamından sonra, custom_color.php'nin satır içi
   <style> bloğundan ÖNCE gelir. Eşit özgüllükte biz kazanırız; custom_color
   `!important` yazdığı iki-üç noktada karşılık olarak biz de yazarız ve her
   birinin yanında gerekçesi durur.

   ÖZGÜLLÜK STRATEJİSİ:
   - Satın alınmış temanın CSS dosyaları (public/frontend/css/*) bu depoda
     yok, ölçülemedi. Bu yüzden temel bileşenlerde (.btn, .form-control)
     `body .x[class]` kalıbı kullanıldı: `[class]` niteliği her zaman doğru,
     anlamı değiştirmez, ama özgüllüğü bir sınıf basamağı yükseltir.
       Bootstrap  .btn                 → (0,1,0)
       tema       .login_form .btn     → (0,2,0)
       bu dosya   body .btn[class]     → (0,2,1)  ← kazanır
   - Geri kalan her yerde tek `body` öneki yeterli.

   İÇİNDEKİLER
     1. Token'lar (:root) + koyu tema eşlemesi
     2. Temel katman: gövde, tipografi, bağlantı, odak halkası
     3. Butonlar
     4. Form alanları
     5. Yüzeyler: kart, panel, uyarı kutusu
     6. Giriş / kayıt sayfası
     7. Üst menü (yeni home_menu.php ile birlikte çalışır)
     8. Alt bilgi (yeni home_footer.php ile birlikte çalışır)
     9. Çerez şeridi, ön yükleyici, tema düğmesi
    10. Hareket azaltma
   ========================================================================== */

/* ==========================================================================
   1. TOKEN'LAR
   Ana sayfadan alındı; metin renkleri WCAG 2.2 AA için ölçülüp gerektiğinde
   koyulaştırıldı. Ölçüm (kontrast oranı):
     --osp-ink      #0f1b33 / beyaz → 17,14:1
     --osp-muted    #5a6a89 / beyaz →  5,44:1   (yumuşak zeminde 5,07:1)
     --osp-brand    #2f6bff / beyaz →  4,50:1   → metin/dolgu için KULLANILMAZ
     --osp-brand-600#2a5fe6 / beyaz →  5,42:1   → bağlantı ve buton dolgusu
     --osp-brand-700#1e4fd8 / beyaz →  6,63:1   → hover / active
     --osp-accent   #ff6a35          → yalnız dekor; metin zemini değil
     --osp-accent-ink #c2410c/beyaz →  5,18:1   → turuncu metin gerekirse
     --osp-ok       #15803d / beyaz →  5,02:1
     --osp-danger   #b91c1c / beyaz →  6,47:1
     --osp-warn     #b45309 / beyaz →  5,02:1
   ========================================================================== */
:root {
  /* yüzey */
  --osp-bg: #ffffff;
  --osp-bg-soft: #f4f7fb;
  --osp-surface: #ffffff;
  --osp-surface-2: #f3f6fc;
  --osp-line: rgba(15, 23, 42, .10);
  --osp-line-strong: rgba(15, 23, 42, .18);

  /* mürekkep */
  --osp-ink: #0f1b33;
  --osp-muted: #5a6a89;
  --osp-on-brand: #ffffff;

  /* marka */
  --osp-brand: #2f6bff;
  --osp-brand-2: #00c4e6;   /* ana sayfanin --brand-2 si; ust bar gradyani icin */
  --osp-brand-600: #2a5fe6;
  --osp-brand-700: #1e4fd8;
  --osp-brand-tint: rgba(47, 107, 255, .10);
  --osp-brand-tint-2: rgba(47, 107, 255, .18);

  /* durum */
  --osp-accent: #ff6a35;
  --osp-accent-ink: #c2410c;
  --osp-accent-tint: rgba(255, 106, 53, .12);
  --osp-ok: #15803d;
  --osp-ok-tint: rgba(21, 128, 61, .10);
  --osp-danger: #b91c1c;
  --osp-danger-tint: rgba(185, 28, 28, .10);
  --osp-warn: #b45309;
  --osp-warn-tint: rgba(180, 83, 9, .12);

  /* başlık şeridi */
  --osp-header-bg: rgba(255, 255, 255, .92);

  /* yuvarlaklık */
  --osp-r-sm: 10px;
  --osp-r: 14px;
  --osp-r-lg: 20px;
  --osp-r-pill: 999px;

  /* gölge */
  --osp-shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30);
  --osp-shadow-2: 0 20px 50px -24px rgba(15, 23, 42, .22);
  --osp-shadow-brand: 0 12px 30px -12px rgba(47, 107, 255, .45);

  /* boşluk — 4 tabanlı */
  --osp-1: 4px;
  --osp-2: 8px;
  --osp-3: 12px;
  --osp-4: 16px;
  --osp-5: 20px;
  --osp-6: 24px;
  --osp-8: 32px;
  --osp-10: 40px;
  --osp-14: 56px;
  --osp-18: 72px;

  /* tipografi */
  --osp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --osp-lh: 1.65;

  /* hareket */
  --osp-ease: cubic-bezier(.16, .84, .44, 1);
  --osp-t-fast: 140ms;
  --osp-t: 200ms;

  /* katman sırası — anlamlı ölçek, keyfi 9999 yok */
  --osp-z-header: 50;
  --osp-z-dropdown: 60;
  --osp-z-overlay: 80;
  --osp-z-toast: 90;
}

/* Koyu tema: panel ayarlarında site_theme = 2 ise <body class="theme-dark">.
   Token'ları yeniden eşliyoruz, kural gövdelerine dokunmuyoruz.
   Ölçüm: #e6ecf7 / #0c1428 → 15,45:1 · #9fb0cc / #0c1428 → 8,34:1
          #7aa2ff / #0c1428 →  7,36:1 */
body.theme-dark {
  --osp-bg: #0c1428;
  --osp-bg-soft: #0e1730;
  --osp-surface: #111c33;
  --osp-surface-2: #16223d;
  --osp-line: rgba(255, 255, 255, .12);
  --osp-line-strong: rgba(255, 255, 255, .22);
  --osp-ink: #e6ecf7;
  --osp-muted: #9fb0cc;
  --osp-brand: #7aa2ff;
  --osp-brand-2: #4fd9f0;   /* koyu temada gradyanin ikinci ucu da acilir */
  --osp-brand-600: #7aa2ff;
  --osp-brand-700: #a8c2ff;
  --osp-brand-tint: rgba(122, 162, 255, .14);
  --osp-brand-tint-2: rgba(122, 162, 255, .24);
  --osp-on-brand: #061024;
  --osp-accent-ink: #ffa273;
  --osp-ok: #4ade80;
  --osp-danger: #fca5a5;
  --osp-warn: #fcd34d;
  --osp-header-bg: rgba(12, 20, 40, .92);
  --osp-shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -20px rgba(0, 0, 0, .8);
  --osp-shadow-2: 0 20px 50px -24px rgba(0, 0, 0, .9);
}

/* ==========================================================================
   2. TEMEL KATMAN
   ========================================================================== */

/* Yazı tipi ailesi: yönetim panelinden seçilen fontu ezer. İstenmezse bu tek
   bildirimi silmek yeterli — dosyanın geri kalanı fonttan bağımsız çalışır.
   Inter kurulu değilse system-ui'ye düşer, ana sayfayla aynı stack. */
body {
  font-family: var(--osp-font);
  line-height: var(--osp-lh);
  color: var(--osp-ink);
  background-color: var(--osp-bg);
  -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4,
body h5 {
  color: var(--osp-ink);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-wrap: balance;
}

body h1 { font-size: 1.75rem; }
body h2 { font-size: 1.375rem; }
body h3 { font-size: 1.1875rem; }
body h4 { font-size: 1.0625rem; }

body p { text-wrap: pretty; }

/* Bağlantı: custom_color.php `a { color: <site_color> }` yazıyor (önemsiz,
   0,0,1). `body a` (0,0,2) onu geçer. */
body a {
  color: var(--osp-brand-600);
  transition: color var(--osp-t-fast) var(--osp-ease);
}

body a:hover,
body a:focus {
  color: var(--osp-brand-700);
}

/* Odak halkası — klavye kullanıcısı için her yerde görünür.
   :focus-visible desteklenmeyen tarayıcıda :focus'a düşer. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible {
  outline: 3px solid var(--osp-brand);
  outline-offset: 2px;
  border-radius: var(--osp-r-sm);
}

body ::selection {
  background-color: var(--osp-brand-tint-2);
}

/* Uzun metin sayfaları (terms, cookies-privacy, pages) satır uzunluğu.
   65-75ch aralığı. */
body .terms_page .terms_content,
body .terms_page p,
body .terms_page li {
  max-width: 70ch;
  color: var(--osp-ink);
}

/* ==========================================================================
   3. BUTONLAR
   Bootstrap 4 .btn = (0,1,0), border-radius .25rem, padding .375rem .75rem.
   Buradaki `body .btn[class]` = (0,2,1) ve daha sonra yüklenir → kazanır.
   ========================================================================== */
body .btn[class] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--osp-2);
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--osp-r);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--osp-t) var(--osp-ease),
    border-color var(--osp-t) var(--osp-ease),
    color var(--osp-t) var(--osp-ease),
    box-shadow var(--osp-t) var(--osp-ease),
    transform var(--osp-t) var(--osp-ease);
}

body .btn[class]:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

body .btn[class]:active {
  transform: translateY(0);
}

body .btn[class]:disabled,
body .btn[class].disabled {
  opacity: .55;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Birincil eylem */
body .btn.btn-primary {
  background-color: var(--osp-brand-600);
  border-color: var(--osp-brand-600);
  color: var(--osp-on-brand);
  box-shadow: var(--osp-shadow-brand);
}

body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body .btn.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--osp-brand-700);
  border-color: var(--osp-brand-700);
  color: var(--osp-on-brand);
}

/* Giriş / kayıt / iletişim formlarının gönder butonu .btn-info.
   !important GEREKÇE: custom_color.php (header.php'de bizden SONRA gelen
   satır içi <style>) şunu yazıyor:
       .topSigin .btn-info, .login_wrapper .btn-info {
           background: <site_color> !important; }
       .home_pricing .btn-custom,
       button.btn.btn-info.c_btn.mail_send_btn.custom_btn {
           background: <site_color> !important; }
   `!important` özgüllükten bağımsız kazandığı için yalnız `background-color`
   bildirimi karşılık veriyor. Diğer tüm özellikler (kenarlık, yuvarlaklık,
   renk, gölge) !important'sız yazıldı.
   Not: yönetim panelinden site rengi #2f6bff yapılırsa bu üç !important
   gereksiz hâle gelir; KURULUM.md'de yazılı. */
body .btn.btn-info,
body .btn.btn-custom {
  background-color: var(--osp-brand-600) !important;
  border-color: var(--osp-brand-600);
  color: var(--osp-on-brand);
  box-shadow: var(--osp-shadow-brand);
}

body .btn.btn-info:hover,
body .btn.btn-info:focus,
body .btn.btn-info:not(:disabled):not(.disabled):active,
body .btn.btn-custom:hover,
body .btn.btn-custom:focus {
  background-color: var(--osp-brand-700) !important;
  border-color: var(--osp-brand-700);
  color: var(--osp-on-brand);
}

/* İki nokta daha yüksek özgüllükle yazılmış; onlara birebir karşılık:
     custom_color.php  button.btn.btn-info.c_btn.mail_send_btn.custom_btn (0,5,1) !important
     buradaki karşılık  body button.btn...custom_btn                       (0,5,2)
   (iletişim sayfasının "gönder" butonu) */
body button.btn.btn-info.c_btn.mail_send_btn.custom_btn {
  background-color: var(--osp-brand-600) !important;
  border-color: var(--osp-brand-600);
  color: var(--osp-on-brand);
}

body button.btn.btn-info.c_btn.mail_send_btn.custom_btn:hover,
body button.btn.btn-info.c_btn.mail_send_btn.custom_btn:focus {
  background-color: var(--osp-brand-700) !important;
  border-color: var(--osp-brand-700);
}

/* Fiyat kartındaki buton: tema `.pricing_3 .btn.price_btn` (0,3,0) ile
   zemin veriyor (önemsiz). `body .btn.btn-primary.price_btn` (0,3,1) geçer —
   burada !important gerekmiyor. */
body .btn.btn-primary.price_btn {
  background-color: var(--osp-brand-600);
  border-color: var(--osp-brand-600);
  color: var(--osp-on-brand);
}

body .btn.btn-primary.price_btn:hover,
body .btn.btn-primary.price_btn:focus {
  background-color: var(--osp-brand-700);
  border-color: var(--osp-brand-700);
}

/* İkincil / sessiz eylem */
body .btn.btn-secondary,
body .btn.btn-default,
body .btn.btn-light {
  background-color: var(--osp-surface-2);
  border-color: var(--osp-line);
  color: var(--osp-ink);
}

body .btn.btn-secondary:hover,
body .btn.btn-secondary:focus,
body .btn.btn-default:hover,
body .btn.btn-light:hover {
  background-color: var(--osp-surface);
  border-color: var(--osp-line-strong);
  color: var(--osp-ink);
}

/* Anahat butonlar */
body .btn.btn-outline-primary,
body .btn.btn-outline-info {
  background-color: transparent;
  border-color: var(--osp-brand-600);
  color: var(--osp-brand-600);
}

body .btn.btn-outline-primary:hover,
body .btn.btn-outline-info:hover {
  background-color: var(--osp-brand-tint);
  border-color: var(--osp-brand-700);
  color: var(--osp-brand-700);
}

/* Uyarı / silme */
body .btn.btn-danger {
  background-color: var(--osp-danger);
  border-color: var(--osp-danger);
  color: #ffffff;
}

body .btn.btn-success {
  background-color: var(--osp-ok);
  border-color: var(--osp-ok);
  color: #ffffff;
}

/* Boyutlar */
body .btn.btn-sm {
  min-height: 38px;
  padding: 9px 16px;
  font-size: 14px;
  border-radius: var(--osp-r-sm);
}

body .btn.btn-lg {
  min-height: 54px;
  padding: 16px 30px;
  font-size: 16px;
}

body .btn.btn-block {
  width: 100%;
}

/* ==========================================================================
   4. FORM ALANLARI
   Bootstrap .form-control = (0,1,0). `body .form-control[class]` = (0,2,1).
   ========================================================================== */
body .form-control[class],
body select.form-control[class],
body textarea.form-control[class] {
  min-height: 48px;
  height: auto;
  padding: 12px 14px;
  border: 1px solid var(--osp-line-strong);
  border-radius: var(--osp-r);
  background-color: var(--osp-surface);
  color: var(--osp-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: none;
  transition:
    border-color var(--osp-t-fast) var(--osp-ease),
    box-shadow var(--osp-t-fast) var(--osp-ease),
    background-color var(--osp-t-fast) var(--osp-ease);
}

body textarea.form-control[class] {
  min-height: 120px;
}

body .form-control[class]:focus {
  border-color: var(--osp-brand-600);
  background-color: var(--osp-surface);
  color: var(--osp-ink);
  box-shadow: 0 0 0 4px var(--osp-brand-tint);
  outline: none;
}

/* Yer tutucu da 4.5:1 istiyor; #5a6a89 beyaz üstünde 5,44:1. */
/* Klavye odağı: Bootstrap `.form-control:focus { outline: 0 }` (0,2,0) ve
   `.btn:focus { outline: 0 }` yazıyor; genel `body input:focus-visible`
   kuralı (0,1,2) onları geçemiyor. Ölçüldü (Tab ile gezinti, Chromium):
   bu iki kural eklenmeden önce odak çerçevesi `outline-style: none`
   hesaplanıyordu. Aşağıdaki (0,4,1) ve (0,3,1) kuralları geçiyor. */
body .form-control[class]:focus-visible {
  outline: 3px solid var(--osp-brand);
  outline-offset: 2px;
}

body .btn[class]:focus-visible {
  outline: 3px solid var(--osp-brand);
  outline-offset: 2px;
}

body .form-control::placeholder {
  color: var(--osp-muted);
  opacity: 1;
}

body .form-control[class]:disabled,
body .form-control[class][readonly] {
  background-color: var(--osp-bg-soft);
  color: var(--osp-muted);
  cursor: not-allowed;
}

body .form-control[class].is-invalid,
body .form-control[class][aria-invalid="true"] {
  border-color: var(--osp-danger);
}

body .form-control[class].is-invalid:focus {
  box-shadow: 0 0 0 4px var(--osp-danger-tint);
}

body .form-group {
  margin-bottom: var(--osp-5);
}

body .form-group > label,
body .form_content label {
  display: block;
  margin-bottom: var(--osp-2);
  color: var(--osp-ink);
  font-size: 14px;
  font-weight: 600;
}

/* Girişteki ikon kutusu (.input-group-addon.fa_icon) — alanla aynı dilde */
body .input-group {
  border-radius: var(--osp-r);
}

body .input-group .input-group-addon,
body .input-group .fa_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 0 var(--osp-3);
  border: 1px solid var(--osp-line-strong);
  border-right: 0;
  border-radius: var(--osp-r) 0 0 var(--osp-r);
  background-color: var(--osp-surface-2);
  color: var(--osp-muted);
}

body .input-group .input-group-addon + .form-control[class] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Onay kutusu / seçenek düğmesi vurgusu */
body input[type="checkbox"],
body input[type="radio"] {
  accent-color: var(--osp-brand-600);
  width: 18px;
  height: 18px;
}

/* select2 — panelin bazı formlarında kullanılıyor */
body .select2-container--default .select2-selection--single {
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid var(--osp-line-strong);
  border-radius: var(--osp-r);
  background-color: var(--osp-surface);
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--osp-ink);
  line-height: 34px;
}

/* ==========================================================================
   5. YÜZEYLER
   ========================================================================== */

/* Sayfa bölümleri arasında nefes payı */
body .homeSection,
body .terms_page,
body .home_pricing,
body .users_section,
body .review_section,
body .home_contact {
  padding-top: var(--osp-10);
  padding-bottom: var(--osp-14);
  background-color: var(--osp-bg);
}

/* Bölüm başlıkları */
body .heading-text,
body .section_heading,
body .terms_heading,
body .sction_title h2 {
  color: var(--osp-ink);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

body .sction_title p,
body .contact_content > p {
  color: var(--osp-muted);
  font-size: 1rem;
  max-width: 68ch;
}

/* Kart / panel kapsayıcıları */
body .contact_content,
body .terms_page .terms_body,
body .single_pricing,
body .pricing_1,
body .pricing_2,
body .pricing_3,
body .singleSearchUser,
body .user_card,
body .single_rating {
  background-color: var(--osp-surface);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  box-shadow: var(--osp-shadow-1);
}

body .single_pricing,
body .pricing_1,
body .pricing_2,
body .pricing_3 {
  padding: var(--osp-8) var(--osp-6);
  transition:
    border-color var(--osp-t) var(--osp-ease),
    box-shadow var(--osp-t) var(--osp-ease),
    transform var(--osp-t) var(--osp-ease);
}

body .single_pricing:hover,
body .pricing_1:hover,
body .pricing_2:hover,
body .pricing_3:hover {
  transform: translateY(-4px);
  border-color: var(--osp-brand-tint-2);
  box-shadow: var(--osp-shadow-2);
}

/* Uyarı kutuları — sessiz gri değil, durumu söyleyen renk */
body .alert {
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r);
  padding: var(--osp-4) var(--osp-5);
  box-shadow: none;
}

body .alert.alert-success,
body .single_alert.alert-success {
  background-color: var(--osp-ok-tint);
  border-color: var(--osp-ok);
  color: var(--osp-ink);
}

body .alert.alert-danger,
body .single_alert.alert-danger {
  background-color: var(--osp-danger-tint);
  border-color: var(--osp-danger);
  color: var(--osp-ink);
}

body .alert.alert-warning {
  background-color: var(--osp-warn-tint);
  border-color: var(--osp-warn);
  color: var(--osp-ink);
}

body .alert.alert-info {
  background-color: var(--osp-brand-tint);
  border-color: var(--osp-brand-600);
  color: var(--osp-ink);
}

/* Form altındaki hata/başarı mesaj alanı boş kalmasın diye görünür kalır */
body .reg_msg:not(:empty) {
  display: block;
  margin-bottom: var(--osp-4);
  color: var(--osp-danger);
  font-size: 14px;
  font-weight: 600;
}

/* Tablolar (paket karşılaştırma vb.) */
body .table thead th {
  border-bottom: 1px solid var(--osp-line-strong);
  color: var(--osp-ink);
  font-weight: 700;
}

body .table td,
body .table th {
  border-top-color: var(--osp-line);
}

/* ==========================================================================
   6. GİRİŞ / KAYIT SAYFASI
   ========================================================================== */

/* .login_wrapper üzerinde satır içi background-image var (login_banner2.jpg).
   Satır içi stili ezmiyoruz; üstüne ::before ile açık bir örtü koyuyoruz.
   Böylece fotoğraf kalıyor ama sayfa yeni tasarımın açık zeminine yaklaşıyor
   ve kart metni kontrastını koruyor. */
body .login_wrapper {
  position: relative;
  background-size: cover;
  background-position: center;
}

body .login_wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(244, 247, 251, .90);
  pointer-events: none;
}

body.theme-dark .login_wrapper::before {
  background-color: rgba(12, 20, 40, .90);
}

body .login_wrapper > .container {
  position: relative;
  z-index: 1;
}

body .signupSection {
  padding: var(--osp-10) 0 var(--osp-14);
}

/* Form kartı */
body ._form_login,
body .right_form_login,
body .topSigin {
  background-color: var(--osp-surface);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  box-shadow: var(--osp-shadow-2);
}

body ._form_login,
body .right_form_login {
  padding: var(--osp-6);
}

/* Kart içindeki kart görüntüsünü engelle: iç içe kutulara ikinci bir
   çerçeve/gölge binmesin. */
body ._form_login .topSigin,
body .right_form_login .topSigin,
body ._form_login .login_content {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body .user_login_header .heading {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--osp-2);
}

body .user_login_header p {
  color: var(--osp-muted);
  margin-bottom: var(--osp-6);
}

/* "Şifremi unuttum" gibi etiket içi bağlantılar */
body .form-group label a {
  font-weight: 600;
}

body .othersLogin {
  margin-top: var(--osp-6);
  padding-top: var(--osp-5);
  border-top: 1px solid var(--osp-line);
}

body .othersLogin ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--osp-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

body .othersLogin ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r);
  background-color: var(--osp-surface-2);
  color: var(--osp-ink);
  transition:
    background-color var(--osp-t-fast) var(--osp-ease),
    border-color var(--osp-t-fast) var(--osp-ease);
}

body .othersLogin ul li a:hover {
  background-color: var(--osp-brand-tint);
  border-color: var(--osp-brand-tint-2);
}

/* ==========================================================================
   7. ÜST MENÜ
   Bu bölüm yeni home_menu.php işaretlemesiyle çalışır. Bootstrap'ın
   collapse mekanizması (navbar-expand-lg, 992px) korunduğu için menünün
   açılıp kapanma eşiği 992px'tir; diğer bölümlerde 768/1024 kullanılıyor.
   ========================================================================== */
body .osp-header {
  position: sticky;
  top: 0;
  z-index: var(--osp-z-header);
  background-color: var(--osp-header-bg);
  border-bottom: 1px solid var(--osp-line);
}

@supports (backdrop-filter: blur(2px)) {
  body .osp-header {
    backdrop-filter: blur(14px);
  }
}

body .osp-header .osp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--osp-3);
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--osp-3) var(--osp-4);
}

/* Marka */
body .osp-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--osp-2);
  min-width: 0;
  color: var(--osp-ink);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
}

body .osp-logo:hover {
  color: var(--osp-ink);
}

body .osp-logo__mark {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: contain;
}

body .osp-logo__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hamburger — .navbar-toggler sınıfı Bootstrap collapse için korunuyor */
body .navbar-toggler.osp-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--osp-line-strong);
  border-radius: var(--osp-r-sm);
  background-color: transparent;
  color: var(--osp-ink);
  cursor: pointer;
}

body .navbar-toggler.osp-burger:hover {
  background-color: var(--osp-surface-2);
}

body .navbar-toggler.osp-burger svg {
  display: block;
  stroke: currentColor;
}

/* Açılan panel */
body .osp-nav__panel {
  width: 100%;
}

body .osp-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: var(--osp-2) 0 0;
}

body .osp-nav__links .nav-item {
  border-top: 1px solid var(--osp-line);
}

body .osp-nav__links .nav-link {
  display: block;
  padding: var(--osp-3) 0;
  color: var(--osp-ink);
  font-size: 16px;
  font-weight: 500;
}

body .osp-nav__links .nav-link:hover,
body .osp-nav__links .nav-item.active .nav-link {
  color: var(--osp-brand-600);
}

body .osp-nav__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--osp-3);
  padding: var(--osp-4) 0 var(--osp-2);
}

/* Dil seçici — hap biçimli */
body .osp-lang {
  display: inline-flex;
  align-self: flex-start;
  gap: 0;   /* ana sayfada .lang-switch dugmeleri bitisik */
  padding: 3px;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-surface-2);
}

body .osp-lang__btn {
  display: inline-flex;
  align-items: center;
  /* Ana sayfadaki .lang-btn ile ayni: 6px 13px. Onceden 7px 14px idi,
     hap ~4px genisleyip tema ikonunu sola kaydiriyordu. */
  padding: 6px 13px;
  border-radius: var(--osp-r-pill);
  color: var(--osp-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color var(--osp-t-fast) var(--osp-ease),
    color var(--osp-t-fast) var(--osp-ease);
}

body .osp-lang__btn:hover {
  color: var(--osp-ink);
}

body .osp-lang__btn.is-active {
  /* Ana sayfadaki .lang-btn.on ile ayni: duz renk degil gradyan, koyu metin */
  background-image: linear-gradient(120deg, var(--osp-brand), var(--osp-brand-2));
  color: #04122e;
}

/* Çok dilli kurulumda hap yerine açılır liste kullanılıyor */
body .osp-lang-dropdown .nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--osp-2);
  padding: 9px 16px;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-surface-2);
  color: var(--osp-ink);
  font-size: 14px;
  font-weight: 600;
}

body .osp-lang-dropdown .dropdown-menu {
  z-index: var(--osp-z-dropdown);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r);
  padding: var(--osp-1);
  background-color: var(--osp-surface);
  box-shadow: var(--osp-shadow-2);
}

body .osp-lang-dropdown .dropdown-item {
  border-radius: var(--osp-r-sm);
  padding: 9px 12px;
  color: var(--osp-ink);
  font-size: 14px;
}

body .osp-lang-dropdown .dropdown-item:hover,
body .osp-lang-dropdown .dropdown-item:focus {
  background-color: var(--osp-brand-tint);
  color: var(--osp-brand-700);
}

/* Giriş / panel bağlantısı */
body .osp-nav__login {
  display: inline-flex;
  align-items: center;
  gap: var(--osp-2);
  padding: var(--osp-2) 0;
  color: var(--osp-muted);
  font-size: 15px;
  font-weight: 600;
}

body .osp-nav__login:hover {
  color: var(--osp-ink);
}

body .osp-nav__cta {
  width: 100%;
}

/* Ana sayfadaki .btn-primary ile ayni: duz mavi degil gradyan, koyu metin */
body .btn.osp-nav__cta,
body .btn.osp-nav__cta:hover,
body .btn.osp-nav__cta:focus {
  border: 0;
  background-image: linear-gradient(120deg, var(--osp-brand), var(--osp-brand-2));
  background-color: var(--osp-brand);
  color: #04122e;
  box-shadow: 0 12px 30px -8px rgba(61, 123, 255, .6);
}


/* Tema düğmesi — ana sayfadaki .theme-switch'ten türetildi (2026-08-30).
   Ana sayfa gövdesi kopyalanmadı; ölçüler ve geçiş süreleri buradaki
   token'lara bağlandı (yeni renk tanımlanmadı).

   İki yuva basılıyor (bkz. inc/home_menu.php): `--bar` collapse panelinin
   DIŞINDA, hamburgerin solunda; `--menu` panelin içinde, dil hapının solunda.
   Her eşikte yalnız biri görünür — öteki display:none olduğu için erişilebilirlik
   ağacına da girmez, yani kullanıcı iki ayrı düğme duymaz. */
body .osp-theme-switch {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  /* Mobilde dokunma hedefi hamburgerle aynı: 44px (WCAG 2.2 hedef boyutu) */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-surface-2);
  /* Ikon marka renginde olsun (kullanici talebi 2026-08-30). Ham panel rengi
     acik zeminde kaliyor — olculdu: #01a0ff / #eef2f8 = 2,50:1, WCAG 1.4.11
     grafik esigi 3:1. O yuzden ayni renk %22 koyulastirilarak kullaniliyor:
     3,77:1. Eski tarayicilar icin once duz yedek, sonra color-mix. */
  color: var(--osp-brand-600);
  color: color-mix(in srgb, var(--dcolor, #2f6bff) 78%, #000);
  cursor: pointer;
  transition:
    background-color var(--osp-t-fast) var(--osp-ease),
    color var(--osp-t-fast) var(--osp-ease);
}

body .osp-theme-switch:hover {
  color: var(--osp-ink);
}

body .osp-theme-switch svg {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity var(--osp-t) var(--osp-ease),
    transform var(--osp-t) var(--osp-ease);
}

/* Açık temada güneş, koyu temada ay — ikisi üst üste, opacity ile geçiyor */
body .osp-theme-switch__moon {
  opacity: 0;
  transform: scale(.6) rotate(-30deg);
}

body.theme-dark .osp-theme-switch__sun {
  opacity: 0;
  transform: scale(.6) rotate(30deg);
}

body.theme-dark .osp-theme-switch__moon {
  opacity: 1;
  transform: none;
}

/* <768px: panel kapalı, düğme bardaki yuvada kalır ve hamburgere yaslanır.
   .osp-nav `space-between` olduğu için auto-margin olmadan ortada asılı kalırdı. */
body .osp-theme-switch--bar {
  margin-left: auto;
}

body .osp-theme-switch--menu {
  display: none;
}

/* ==========================================================================
   8. ALT BİLGİ
   ========================================================================== */
body .osp-footer {
  margin-top: var(--osp-14);
  padding: var(--osp-10) 0 var(--osp-6);
  border-top: 1px solid var(--osp-line);
  background-color: var(--osp-bg-soft);
  color: var(--osp-ink);
}

body .osp-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--osp-4);
}

body .osp-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--osp-8);
  margin-bottom: var(--osp-8);
}

body .osp-footer__logo {
  display: block;
  width: 160px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

body .osp-footer__brand-name {
  margin: var(--osp-3) 0 var(--osp-2);
  font-size: 1.0625rem;
  font-weight: 700;
}

body .osp-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--osp-2);
  color: var(--osp-muted);
  font-size: 15px;
  word-break: break-word;
}

body .osp-footer__mail:hover {
  color: var(--osp-brand-700);
}

body .osp-footer__title {
  margin-bottom: var(--osp-4);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--osp-ink);
}

body .osp-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body .osp-footer__list li {
  margin-bottom: var(--osp-3);
}

body .osp-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--osp-2);
  color: var(--osp-muted);
  font-size: 15px;
}

body .osp-footer__list a:hover {
  color: var(--osp-ink);
}

body .osp-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--osp-2);
  list-style: none;
  padding: 0;
  margin: var(--osp-4) 0 0;
}

body .osp-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-sm);
  background-color: var(--osp-surface);
  color: var(--osp-muted);
  transition:
    background-color var(--osp-t-fast) var(--osp-ease),
    color var(--osp-t-fast) var(--osp-ease),
    transform var(--osp-t-fast) var(--osp-ease);
}

body .osp-social a:hover {
  background-color: var(--osp-surface-2);
  color: var(--osp-ink);
  transform: translateY(-2px);
}

body .osp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--osp-2);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--osp-5);
  border-top: 1px solid var(--osp-line);
  color: var(--osp-muted);
  font-size: 14px;
}

body .osp-footer__bottom p {
  margin: 0;
}

/* ==========================================================================
   9. ÇEREZ ŞERİDİ · ÖN YÜKLEYİCİ · TEMA DÜĞMESİ
   ========================================================================== */
body .cookie-container {
  z-index: var(--osp-z-toast);
  background-color: var(--osp-ink);
  color: #ffffff;
  border-radius: var(--osp-r-lg) var(--osp-r-lg) 0 0;
  padding: var(--osp-5);
  box-shadow: var(--osp-shadow-2);
}

body .cookie-container p {
  color: #ffffff;
  font-size: 14.5px;
  margin: 0 0 var(--osp-3);
  max-width: 70ch;
}

body .cookie-container a {
  color: #ffffff;
  text-decoration: underline;
}

body .cookie-btn {
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--osp-r);
  background-color: var(--osp-brand-600);
  color: var(--osp-on-brand);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--osp-t) var(--osp-ease);
}

body .cookie-btn:hover {
  background-color: var(--osp-brand-700);
}

/* Ön yükleyici: örtü rengi her durumda uygulanır. Dönen halkanın kendisi
   temanın loader.css'inde tanımlı; kenarlıkla çiziliyorsa aşağıdaki iki
   bildirim onu markaya çeker, başka bir teknikse (arka plan, maske)
   bildirimler etkisiz kalır ve görünüm bozulmaz. */
body #preloader {
  background-color: var(--osp-bg);
  z-index: var(--osp-z-overlay);
}

body #preloader .preloader_1 span,
body #preloader .loader_position span {
  border-top-color: var(--osp-brand-600);
  border-right-color: var(--osp-brand-600);
}

/* Açık/koyu tema düğmesi — sabit konumlu, id="theme-toggle-btn" korunuyor.
   themeToggle.php'nin kendi <style>'ı `.theme-toggle-btn` (0,1,0) yazıyor;
   buradaki `.theme-toggle .theme-toggle-btn` (0,2,0) onu geçer. */
body .theme-toggle .theme-toggle-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-surface);
  box-shadow: var(--osp-shadow-1);
  color: var(--osp-ink);
}

body .theme-toggle .theme-toggle-btn:hover {
  background-color: var(--osp-surface-2);
}

body .theme-toggle .theme-toggle-btn:focus-visible {
  outline: 3px solid var(--osp-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sabit konumlu tema düğmesi — GÖVDE (2026-08-30'da themeToggle.php'nin satır
   içi <style>'ından buraya taşındı; tema katmanının tek yeri burası).

   KİM KULLANIYOR: yalnız dükkân sayfaları (footer.php:231, role='user').
   Tanıtım/iç sayfalarda düğme artık üst barda (.osp-theme-switch, § 7);
   themeToggle.php orada bu işaretlemeyi hiç basmıyor, çift düğme çıkmaz.

   SIRA ÖNEMLİ — taşımadan önceki bileşke korunsun diye:
   · Bu blok yukarıdaki `body .theme-toggle .theme-toggle-btn` (0,2,1)
     kuralının ALTINDA duruyor; genişlik/çerçeve/yuvarlaklık/zemin hâlâ oranın
     işi, o yüzden bu özellikler aşağıya KOPYALANMADI (eskiden de satır içi
     sürümü (0,1,1) ile kaybediyordu).
   · `body.theme-dark ...` kuralları o bloğun altında kalmalı ki koyu temadaki
     renk/hover eskisi gibi kazansın.
   · Konum kuralları § 12.2'nin (max-width:767.98px) ÜSTÜNDE: orası hâlâ
     `transform: none` diyor. `.user` kuralları (0,2,1) olduğu için alt/sağ
     değerleri § 12.2'yi geçer — canlıdaki bileşkenin aynısı:
       ≥768px: bottom 191px · right 34px · translateY(-50%)
       <768px: bottom 191px · right 17px · transform yok
   -------------------------------------------------------------------------- */
body .theme-toggle {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

body .theme-toggle.user {
  top: auto;
  bottom: 191px;
  right: 34px;
}

@media (max-width: 767.98px) {
  body .theme-toggle.user {
    right: 17px;
  }
}

body .theme-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  transition: all .3s ease;
}

body .theme-toggle-btn:hover {
  background-color: rgba(0, 0, 0, .1);
}

body.theme-dark .theme-toggle-btn {
  color: var(--dark-text);
}

body.theme-dark .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, .1);
}

/* İkonlar üst üste; geçiş opacity + scale ile. Özgüllükler taşımadan önceki
   sırayı koruyor: taban (0,2,0) < koyu tema (0,2,1). */
body .sun-icon,
body .moon-icon {
  position: absolute;
  transition: all .3s ease;
}

body .sun-icon svg,
body .moon-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--dcolor);
  stroke: var(--dcolor);
}

body .sun-icon {
  opacity: 1;
  transform: scale(1);
}

body .moon-icon {
  opacity: 0;
  transform: scale(.5);
}

body.theme-dark .sun-icon {
  opacity: 0;
  transform: scale(.5);
}

body.theme-dark .moon-icon {
  opacity: 1;
  transform: scale(1);
}


/* ==========================================================================
   BREAKPOINT'LER — mobil önce (375 tabanı yukarıda)
   ========================================================================== */

/* ≥768px: tablet */
@media (min-width: 768px) {
  body h1 { font-size: 2.25rem; }
  body h2 { font-size: 1.75rem; }

  body .heading-text,
  body .section_heading,
  body .terms_heading,
  body .sction_title h2 {
    font-size: 2.25rem;
  }

  body .homeSection,
  body .terms_page,
  body .home_pricing,
  body .users_section,
  body .review_section,
  body .home_contact {
    padding-top: var(--osp-14);
    padding-bottom: var(--osp-18);
  }

  body ._form_login,
  body .right_form_login {
    padding: var(--osp-10);
  }

  body .osp-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--osp-10);
  }

  body .cookie-container {
    display: flex;
    align-items: center;
    gap: var(--osp-5);
  }

  body .cookie-container p {
    margin-bottom: 0;
  }
}

/* ≥992px: Bootstrap navbar-expand-lg eşiği — menü yatay açılır */
@media (min-width: 992px) {
  body .osp-header .osp-nav {
    flex-wrap: nowrap;
    gap: var(--osp-5);
    /* Ana sayfadaki .nav-inner ile ayni yukseklik (72px) */
    min-height: 72px;
    padding: 0 var(--osp-6);
  }

  /* Bağlantılar ana sayfadaki gibi ORTADA dursun.
     Yapı: nav > [logo] [panel]; `space-between` yalnız bu ikisini ayırıyordu,
     panel de menüyü + dil hapını + giriş/CTA'yı birlikte taşıdığı için menü
     sağa yapışıyor ve logodan sonra geniş bir boşluk kalıyordu. Ana sayfada
     üç kardeş var (logo | menü | eylemler) ve space-between menüyü ortalıyor.
     Panel'i kalan genişliğe yayıp menüye çift taraflı otomatik kenar boşluğu
     vererek aynı dengeyi kuruyoruz. Yalnız ≥992px'te: altında Bootstrap
     collapse menüyü dikey açıyor ve ortalama anlamsız. */
  body .osp-header .osp-nav__panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--osp-4);
    min-width: 0;
  }

  body .osp-header .osp-nav__links {
    margin-inline: auto;
  }

  body .osp-logo {
    font-size: 17px;
  }

  /* Bootstrap `.navbar-expand-lg .navbar-toggler { display: none }` (0,2,0)
     yazıyor; yukarıdaki `body .navbar-toggler.osp-burger` (0,2,1) onu
     geçtiği için hamburgeri bu eşikte biz gizliyoruz. */
  body .navbar-toggler.osp-burger {
    display: none;
  }

  body .osp-nav__panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--osp-5);
    width: auto;
  }

  body .osp-nav__links {
    flex-direction: row;
    align-items: center;
    gap: var(--osp-5);
    margin: 0;
  }

  body .osp-nav__links .nav-item {
    border-top: 0;
  }

  body .osp-nav__links .nav-link {
    padding: var(--osp-2) 0;
    font-size: 14.5px;
    color: var(--osp-muted);
  }

  body .osp-nav__links .nav-link:hover,
  body .osp-nav__links .nav-item.active .nav-link {
    color: var(--osp-ink);
  }

  body .osp-nav__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--osp-3);
    padding: 0;
  }

  body .osp-lang {
    align-self: auto;
  }

  /* Panel açık: düğme bardan menüye geçer, ana sayfadaki 38px ölçüsüne döner */
  body .osp-theme-switch--bar {
    display: none;
  }

  body .osp-theme-switch--menu {
    display: grid;
    width: 38px;
    height: 38px;
  }

  body .osp-nav__login {
    padding: 0;
  }

  body .osp-nav__cta {
    width: auto;
  }

  body .btn.osp-nav__cta {
    min-height: 42px;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* ≥1024px: geniş tablet / küçük masaüstü */
@media (min-width: 1024px) {
  body h1 { font-size: 2.5rem; }

  body .heading-text,
  body .section_heading,
  body .terms_heading,
  body .sction_title h2 {
    font-size: 2.5rem;
  }

  body .osp-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--osp-8);
  }
}

/* ≥1280px: masaüstü */
@media (min-width: 1280px) {
  body .osp-header .osp-nav,
  body .osp-footer__inner {
    padding-left: var(--osp-6);
    padding-right: var(--osp-6);
  }

  body .signupSection {
    padding: var(--osp-14) 0 var(--osp-18);
  }
}

/* ==========================================================================
   10. HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body .btn[class],
  body .btn[class]:hover,
  body .osp-social a,
  body .osp-social a:hover,
  body .single_pricing,
  body .single_pricing:hover,
  body .pricing_1:hover,
  body .pricing_2:hover,
  body .pricing_3:hover {
    transform: none;
  }

  body *,
  body *::before,
  body *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

/* ==========================================================================
   11. GİRİŞ / KAYIT / ŞİFRE SIFIRLAMA — YENİ GÖVDE
   --------------------------------------------------------------------------
   Bu bölüm yeni login.php / signup.php / forgot.php işaretlemesiyle
   (deliverables/panel-sayfalar/) birlikte çalışır. Bölüm 6 yerinde kalıyor:
   staff_login.php, login1.php, customer/forgot.php gibi henüz yazılmamış
   sayfalar hâlâ eski sınıfları (_form_login, right_form_login, login_wrapper)
   kullanıyor ve o kurallara muhtaç.

   ÖLÇÜM NOTLARI (canlı siteden indirilen dosyalar üzerinde):
   - public/frontend/css/style.css:842  `span.reg_msg{display:none}` — görünürlüğü
     jQuery yönetiyor (fadeIn/fadeOut). display'e DOKUNMUYORUZ; yalnız içeri
     basılan `.alert` kutusunu biçimlendiriyoruz.
   - style.css:853 `span.reg_msg .alert::before` 7px'lik yan şerit çiziyor.
     Yan şerit yasak (impeccable mutlak yasaklar) → `content:none` ile kaldırıldı,
     yerine tam kenarlık + durum zemini geldi.
   - style.css:194 `.success{color:#4CAF50}` → beyaz üstünde 2,78:1 (AA altı).
     style.css:216 `.c_red,.error{color:red !important}` → 4,00:1 (AA altı).
     İkisi de token renklerle değiştirildi; `.error` !important yazdığı için
     karşılığı da !important — tek gerekçe kontrast.
   - style.css:987 `.searching::after{content:'Please wait, Searching...'}` ve
     style.css:926 `span.ajax_submit::after{content:'Submiting...'}` — CSS'e
     gömülü İngilizce metin, site TR/EN olduğu hâlde çevrilemiyor. İkisi de
     dilden bağımsız ilerleme çubuğuna çevrildi.
   ========================================================================== */

/* Yükleme örtüsünün rengi — yüzey tonunun yarı saydamı. */
:root {
  --osp-scrim: rgba(255, 255, 255, .72);
}

body.theme-dark {
  --osp-scrim: rgba(12, 20, 40, .72);
}

/* --------------------------------------------------------------- kabuk --- */
body .osp-auth {
  position: relative;
  padding: var(--osp-8) 0 var(--osp-14);
  background-color: var(--osp-bg-soft);
}

/* Marka ışıması: fotoğraf yerine geçen tek dekoratif öğe. */
body .osp-auth::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 320px;
  background-image: radial-gradient(120% 100% at 50% 0, var(--osp-brand-tint), transparent 70%);
  pointer-events: none;
}

body .osp-auth__wrap {
  position: relative;
  display: grid;
  gap: var(--osp-6);
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--osp-5);
}

body .osp-auth__main {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* ----------------------------------------------------------------- kart --- */
body .osp-auth__card {
  padding: var(--osp-6);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  background-color: var(--osp-surface);
  box-shadow: var(--osp-shadow-2);
}

body .osp-auth__head {
  margin-bottom: var(--osp-6);
}

body .osp-auth__title {
  margin: 0 0 var(--osp-2);
  color: var(--osp-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}

body .osp-auth__lede {
  max-width: 60ch;
  margin: 0;
  color: var(--osp-muted);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- alan --- */
body .osp-auth__form .form-group {
  margin-bottom: var(--osp-5);
}

body .osp-field .osp-field__label {
  display: block;
  margin-bottom: var(--osp-2);
  color: var(--osp-ink);
  font-size: 14px;
  font-weight: 600;
}

/* Etiket + "şifremi unuttum" aynı satırda; etiketin alt boşluğu satıra taşınır */
body .osp-field .osp-field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--osp-3);
  margin-bottom: var(--osp-2);
}

body .osp-field .osp-field__labelrow .osp-field__label {
  margin-bottom: 0;
}

body .osp-field__link {
  color: var(--osp-brand-600);
  font-size: 14px;
  font-weight: 600;
}

body .osp-field--ltr .form-control[class] {
  direction: ltr;
}

/* İki alanı yan yana koyan çift (e-posta + telefon, şifre + tekrar) */
body .osp-auth__pair {
  display: grid;
  gap: 0 var(--osp-4);
}

body .osp-auth__rule {
  height: 1px;
  margin: 0 0 var(--osp-6);
  border: 0;
  background-color: var(--osp-line);
}

/* Onay kutusu satırı: kutu ve etiket aynı taban çizgisinde, tıklama alanı geniş */
body .osp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--osp-3);
}

body .osp-check .osp-check__input {
  flex: none;
  margin-top: 3px;
}

body .osp-check .osp-check__label {
  margin-bottom: 0;
  color: var(--osp-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  cursor: pointer;
}

body .osp-check .osp-check__label a {
  font-weight: 600;
}

/* reCAPTCHA 304px sabit genişlikte; 375px'te taşmasın */
body .osp-auth__captcha {
  max-width: 100%;
  overflow-x: auto;
}

/* -------------------------------------------------------------- eylem --- */
body .osp-auth__actions {
  margin-bottom: 0;
}

body .osp-auth__form .btn.osp-auth__submit {
  width: 100%;
}

body .osp-auth__switch {
  margin: var(--osp-5) 0 0;
  padding-top: var(--osp-5);
  border-top: 1px solid var(--osp-line);
  color: var(--osp-muted);
  font-size: 15px;
  text-align: center;
}

body .osp-auth__switch a {
  font-weight: 600;
}

/* ------------------------------------------------------------- mesaj --- */
/* Sunucudan gelen HTML: <div class="alert alert-danger alert-dismissible">…
   `span.reg_msg .alert` (0,2,1) ile yarışıyoruz, bu yüzden `body` öneki. */
body span.reg_msg .alert {
  margin-bottom: var(--osp-5);
  padding: var(--osp-3) var(--osp-4);
  border: 1px solid var(--osp-line-strong);
  border-radius: var(--osp-r);
  color: var(--osp-ink);
}

/* Yan şerit yasak — kaldırıldı, durumu zemin + kenarlık söylüyor */
body span.reg_msg .alert::before {
  content: none;
}

body span.reg_msg .alert.alert-danger {
  border-color: var(--osp-danger);
  background-color: var(--osp-danger-tint);
}

body span.reg_msg .alert.alert-success {
  border-color: var(--osp-ok);
  background-color: var(--osp-ok-tint);
}

body span.reg_msg .alert.alert-info {
  border-color: var(--osp-brand-600);
  background-color: var(--osp-brand-tint);
}

body span.reg_msg .alert {
  padding-inline-end: var(--osp-10);
}

body span.reg_msg .alert strong {
  font-weight: 700;
}

/* Sunucu mesajının kapatma düğmesi (<a class="close">) — dokunma hedefi 40px,
   odak halkası görünür. style.css:5377 aynı düğmeyi (0,2,1) ile biçimlendiriyor,
   buradaki (0,3,2) geçiyor. */
body span.reg_msg .alert .close {
  position: absolute;
  top: var(--osp-2);
  inset-inline-end: var(--osp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--osp-r-sm);
  color: var(--osp-ink);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  opacity: 1;
}

body span.reg_msg .alert .close:hover {
  background-color: var(--osp-surface-2);
}

body span.reg_msg .alert .close:focus-visible {
  outline: 3px solid var(--osp-brand);
  outline-offset: 2px;
}

/* Kullanıcı adı müsaitlik sonucu (#username keyup → auth.js) */
body .osp-field .alert_msg {
  margin-top: var(--osp-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* GEREKÇE (!important): style.css `.c_red,.error{color:red !important}`.
   #ff0000 beyaz üstünde 4,00:1 — WCAG 2.2 AA gövde metni 4,5:1 istiyor.
   #b91c1c ile 6,47:1. Tek karşılık yolu aynı ağırlıkta yazmak. */
body .alert_msg.error {
  color: var(--osp-danger) !important;
}

/* style.css `.c_green,.success{color:#4CAF50}` → 2,78:1. !important yok,
   özgüllük yetiyor. #15803d ile 5,02:1. */
body .alert_msg.success {
  color: var(--osp-ok);
}

/* ---------------------------------------------------- yükleniyor hâli --- */
/* Kullanıcı adı sorgusu sürerken açılan çubuk (jQuery slideDown/slideUp) */
body .register_loader {
  display: none;
}

body .register_loader .searching {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: var(--osp-2);
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-brand-tint);
  overflow: hidden;
}

body .register_loader .searching::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  border-radius: inherit;
  background-color: var(--osp-brand-600);
  animation: osp-indeterminate 1.1s var(--osp-ease) infinite;
}

/* Form gönderilirken auth.js formu `.submit_form` yapıp içine
   `<span class="ajax_submit">` ekliyor. İkisini de burada devralıyoruz. */
body .submit_form {
  cursor: progress;
}

body .submit_form::before {
  z-index: var(--osp-z-overlay);
  background-color: var(--osp-scrim);
  border-radius: var(--osp-r-lg);
  padding: 0;
}

/* Çubuk formun üst kenarının hemen üstünde durur; ilk etiketin üzerine binmez. */
body span.ajax_submit {
  top: calc(var(--osp-3) * -1);
  left: 0;
  right: 0;
  width: auto;
  height: 4px;
  margin-top: 0;
  border: 0;
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-brand-tint);
  transform: none;
  overflow: hidden;
  z-index: var(--osp-z-toast);
}

body span.ajax_submit::before {
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--osp-brand-600);
  animation: osp-indeterminate 1.1s var(--osp-ease) infinite;
}

/* "Submiting..." metni CSS'e gömülüydü ve çevrilemiyordu */
body span.ajax_submit::after {
  content: none;
}

@keyframes osp-indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(320%);
  }
}

/* -------------------------------------------------------- oturum uyarı --- */
body .osp-auth__flash {
  position: relative;
  margin-bottom: var(--osp-5);
  padding-inline-end: var(--osp-10);
}

body .osp-auth__flash .osp-auth__flash-title {
  display: flex;
  align-items: center;
  gap: var(--osp-2);
  margin: 0 0 var(--osp-1);
  color: var(--osp-ink);
  font-size: 15px;
  font-weight: 700;
}

body .osp-auth__flash .close {
  position: absolute;
  top: var(--osp-2);
  inset-inline-end: var(--osp-2);
  float: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--osp-r-sm);
  background-color: transparent;
  color: var(--osp-ink);
  font-size: 22px;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
}

body .osp-auth__flash .close:hover {
  background-color: var(--osp-surface-2);
}

body .osp-auth__flash .close:focus-visible {
  outline: 3px solid var(--osp-brand);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- yan sütun --- */
body .osp-auth__aside {
  display: grid;
  align-content: start;
  gap: var(--osp-5);
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

body .osp-auth__brand-title {
  margin: 0 0 var(--osp-2);
  color: var(--osp-ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

body .osp-auth__brand-text {
  max-width: 46ch;
  margin: 0;
  color: var(--osp-muted);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Diğer giriş yolları — bölüm 6'daki ikon kareleri yerine okunur satırlar.
   Bölüm 6: `body .othersLogin ul li a` (0,1,4) · burası (0,2,4) → geçer. */
body .osp-auth__aside .othersLogin {
  margin-top: 0;
  padding-top: var(--osp-5);
  border-top: 1px solid var(--osp-line);
}

body .osp-auth__aside .othersLogin ul {
  display: grid;
  gap: var(--osp-1);
  justify-content: stretch;
}

body .osp-auth__aside .othersLogin ul li a {
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: flex-start;
  gap: var(--osp-3);
  min-width: 0;
  min-height: 48px;
  padding: var(--osp-2) var(--osp-3);
  border: 0;
  border-radius: var(--osp-r);
  background-color: transparent;
  color: var(--osp-ink);
  font-size: 15px;
  font-weight: 600;
}

body .osp-auth__aside .othersLogin ul li a i {
  color: var(--osp-brand-600);
  font-size: 18px;
}

body .osp-auth__aside .othersLogin ul li a:hover,
body .osp-auth__aside .othersLogin ul li a:focus {
  background-color: var(--osp-brand-tint);
  border-color: transparent;
  color: var(--osp-brand-700);
  text-decoration: none;
}

/* Demo erişim bilgileri — yalnız is_demo() == 1 iken basılır */
body .osp-demo {
  display: grid;
  gap: var(--osp-4);
  padding-top: var(--osp-5);
  border-top: 1px solid var(--osp-line);
}

body .osp-demo__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--osp-2);
}

/* Demo düğmeleri ikincil kalır: sayfadaki tek birincil eylem giriş butonudur.
   Kaynak dosyada `btn btn-info` yazıyordu (marka dolgusu); `btn-info` sınıfı
   JS'te bağlı değil (ölçüldü) ve kaldırıldığı için burada !important gerekmedi. */
body .osp-demo__btns .btn[class] {
  flex: 1 1 auto;
  border-color: var(--osp-line-strong);
  background-color: var(--osp-surface);
  color: var(--osp-brand-700);
  box-shadow: none;
}

body .osp-demo__btns .btn[class]:hover,
body .osp-demo__btns .btn[class]:focus {
  border-color: var(--osp-brand-600);
  background-color: var(--osp-brand-tint);
  color: var(--osp-brand-700);
}

body .osp-demo__grid {
  display: grid;
  gap: var(--osp-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body .osp-demo__item {
  padding: var(--osp-3) var(--osp-4);
  border: 1px dashed var(--osp-line-strong);
  border-radius: var(--osp-r);
  background-color: var(--osp-surface);
}

body .osp-demo__label {
  margin: 0 0 var(--osp-1);
  color: var(--osp-ink);
  font-size: 14px;
  font-weight: 700;
}

body .osp-demo code {
  display: block;
  padding: 0;
  background-color: transparent;
  color: var(--osp-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* --------------------------------------------------------- 768px ve üstü --- */
@media (min-width: 768px) {
  body .osp-auth {
    padding: var(--osp-10) 0 var(--osp-18);
  }

  body .osp-auth__wrap {
    padding-inline: var(--osp-6);
  }

  body .osp-auth__card {
    padding: var(--osp-8);
  }

  body .osp-auth__title {
    font-size: 1.75rem;
  }

  body .osp-auth__pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------------------------------------------- 1024px ve üstü --- */
@media (min-width: 1024px) {
  body .osp-auth__wrap {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--osp-10);
    align-items: start;
  }

  body .osp-auth__main,
  body .osp-auth__aside {
    margin-inline: 0;
  }

  body .osp-auth__card {
    padding: var(--osp-10);
  }

  /* Şifre sıfırlama: yan sütun yok, kart ortada ve dar kalır */
  body .osp-auth--solo .osp-auth__wrap {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
  }

  body .osp-auth--solo .osp-auth__main {
    margin-inline: auto;
  }

  body .osp-auth__aside {
    position: sticky;
    top: var(--osp-14);
  }
}

/* -------------------------------------------------------- 1280px ve üstü --- */
@media (min-width: 1280px) {
  body .osp-auth__wrap {
    max-width: 1120px;
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  body .osp-auth__title {
    font-size: 2rem;
  }
}

/* ------------------------------------------------------- hareket azaltma --- */
/* Bölüm 10 süreleri zaten .01ms'e çekiyor; ilerleme çubuğu donmuş 40'lık bir
   parça olarak kalmasın diye tam genişliğe sabitleniyor. */
@media (prefers-reduced-motion: reduce) {
  body .register_loader .searching::after,
  body span.ajax_submit::before {
    width: 100%;
    animation: none;
  }
}

/* ==========================================================================
   12. Mobil geri bildirim düzeltmeleri (2026-08-28)
   Kaynak: gerçek cihazda (iPhone, 4G) çekilen giriş sayfası görüntüsü.
   ========================================================================== */

/* 12.1 — Tanıtım metni iki yana yaslıydı.
   Eski temanın style.css'i bu bloğa `text-align: justify` veriyor; dar
   ekranda kelime araları aşırı açılıp "nehir" oluşturuyordu. Türkçe uzun
   sözcüklerle bu etki daha belirgin. Sola yaslama okunabilirliği düzeltir.
   Özgüllük: (0,3,1) — tema kuralının (0,2,0) üzerinde. */
body .osp-auth__aside .osp-auth__brand-text[class],
body .osp-auth__aside p[class] {
  text-align: left;
  hyphens: none;
}

/* 12.2 — Açık/koyu tema düğmesi form alanlarının üstüne biniyordu.
   themeToggle.php'nin kendi <style>'ı `top: 50%` ile dikey ortaya sabitliyor;
   dar ekranda bu, şifre alanının sağ kenarına denk geliyor. Mobilde alt köşeye
   alınıp dokunma hedefi korunur (44px), geniş ekranda eski yeri kalır.
   2026-08-30: bu blok artık yalnız DÜKKÂN sayfaları için geçerli — giriş
   dahil tanıtım/iç sayfalarda sabit düğme basılmıyor, düğme üst barda
   (.osp-theme-switch, § 7). Konum kuralları için bkz. § 9 sonundaki blok. */
@media (max-width: 767.98px) {
  body .theme-toggle {
    top: auto;
    bottom: 84px;
    right: 12px;
    transform: none;
  }
}

/* 12.3 — Yapışkan başlık, altından geçen içerikle aynı beyazdı; "Giriş yap"
   gibi büyük başlıklar menünün altına girerken kesilmiş görünüyordu.
   İnce bir alt çizgi + gölge, örtüşmeyi kasıtlı bir katman hâline getirir. */
body .osp-header {
  border-bottom: 1px solid var(--osp-line);
  box-shadow: 0 1px 12px rgba(15, 23, 42, .06);
}

/* 12.4 — Sayfa içi bağlantıyla gelindiğinde başlık menünün altında kalmasın. */
body .osp-auth__title,
body .osp-auth h1,
body .osp-auth h2 {
  scroll-margin-top: 88px;
}

/* ==========================================================================
   13. PERSONEL / MÜŞTERİ / TESLİMAT GİRİŞİ (staff_login.php)
   --------------------------------------------------------------------------
   Bu bölüm yeni deliverables/panel-sayfalar/staff_login.php ile birlikte
   çalışır. Sayfanın kabuğu (osp-auth, osp-auth__card, osp-field, othersLogin,
   osp-demo) § 11'den geliyor; burada dört şey var: sabit üst menü payı,
   birleşik telefon alanı, alan ipucu / zorunluluk işareti ve yan sütundaki
   "şu an buradasın" işareti.

   GERÇEK CİHAZDA GÖRÜLEN KUSURLAR ve ölçülen sebepleri:

   1) Telefon alanı üç ayrı kutu görünüyordu.
      style.css:7513 `.w-30{width:30px!important}` + :7517 `.w-50{width:55px!important}`
      iki sarmalayıcıyı sabit genişlikte kutulara çeviriyordu; :7529
      `.customPhone .input-group-text{padding:.37rem 0}` "+" kutusunu alanların
      48px'ine hiç ulaştırmıyordu; :7549 `.customPhone .group-color` ülke koduna
      kendi kenarlığını ve zeminini veriyordu. Yeni işaretlemede o sarmalayıcılar
      yok: kenarlık ve yuvarlaklık TEK bir kabukta yaşıyor, iki alan kabuğu
      uçtan uca dolduruyor.
   2) E-posta / şifre alanının solundaki gri ikon kutusu (`.input-group-addon`)
      kaldırıldı; referans sayfalarda (login.php) alanlar sade. Bu sınıflar
      auth.js ve main.js'te hiç geçmiyor (ölçüldü), kaldırmak davranışı
      değiştirmiyor.
   3) Alt bağlantıların altı çiziliydi: § 6 `body .othersLogin ul li a` kuralı
      `text-decoration` yazmıyor, tarayıcı varsayılanı kalıyordu. Bağlantılar
      yan sütuna taşındı; oradaki § 11 kuralı zaten `text-decoration: none`
      veriyor. Buraya yalnız aktif durum eklendi.
   4) Başlıklar büyük harfe zorlanıyordu: § 6 `.user_login_header .heading`
      yolundan geliyordu; yeni gövde `osp-auth__title` kullanıyor, o yol artık
      hiç çalışmıyor.
   5) Gri-mor zemin `.login_wrapper` üzerindeki satır içi arka plan görseliydi
      (login_banner2.jpg); yeni gövdede o sarmalayıcı yok, zemin `--osp-bg-soft`.

   ÖLÇÜLEN AMA LİSTEDE OLMAYAN ALTINCI KUSUR (13.1'de düzeltildi):
   `frontend.css:845 #headers{position:fixed}` — ID seçicisi (1,0,0), § 7'nin
   `body .osp-header{position:sticky}` kuralını (0,1,1) geçiyor. Yani üst menü
   akıştan çıkıyor ama `.osp-auth` bunun payını hiç bırakmıyor: 375px'de menü
   0-69px arasını kaplarken başlık 57px'ten başlıyordu, yani başlığın üstü
   kesiliyordu; 768px ve üstünde kartın üst köşesi menünün altında kalıyordu.
   Bu, yalnız bu sayfada değil login/signup/forgot'ta da böyleydi — düzeltme
   `.osp-auth` üzerinde olduğu için dördü birden düzelir.

   KONTRAST (hesaplandı): ipucu #5a6a89/beyaz 5,44:1 · zorunluluk yıldızı
   #b91c1c/beyaz 6,47:1 · "+" ve ülke kodu #0f1b33/#f3f5f9 15,88:1 · aktif
   bağlantı #1e4fd8 / marka tonu 5,44:1. Koyu temada 7,72 · 8,94 · 14,31 ·
   7,93. Hepsi AA (4,5:1) üstünde.
   ========================================================================== */

/* Sabit üst menünün ölçülen yüksekliği: 375/768'de 69px, 1024/1440'ta 67px.
   72px hepsini kapsar ve menü yeniden sticky yapılırsa yalnız fazladan boşluk
   kalır — kırılma üretmez. */
:root {
  --osp-header-h: 72px;
}

/* --------------------------------------------------- 13.1 üst menü payı --- */
/* § 11 `body .osp-auth` (0,1,1) ile aynı özgüllük; bu dosyada sonra geldiği
   için kazanır. Yalnız üst boşluk değişiyor, alt boşluk § 11'de kalıyor. */
body .osp-auth {
  padding-top: calc(var(--osp-header-h) + var(--osp-4));
}

@media (min-width: 768px) {
  body .osp-auth {
    padding-top: calc(var(--osp-header-h) + var(--osp-6));
  }
}

/* -------------------------------------------- 13.2 birleşik telefon alanı --- */
/* Kabuk kenarlığı ve yuvarlaklığı tek elden verir; içerideki iki alan kabuğu
   uçtan uca doldurur. Kabuk KASTEN saydam: style.css:2797
   `.form-control{background-color:var(--body-color)!important}` alanların
   zeminini zaten boyuyor ve `!important` yazıyor. Kabuğa ayrı bir zemin
   vermek, o zeminle uyuşmayan bir dikiş çizgisi üretirdi (ölçüldü: alanlar
   #f3f5f9, kabuk #ffffff → "+" ile "90" arasında görünür bir kenar).
   `[class]` ile (0,3,1): style.css'in `.customPhone …` (0,2,0) kurallarını geçer. */
body .osp-phone .osp-phone__shell[class] {
  --osp-phone-code-w: calc(30px + 4.5ch);

  position: relative;
  display: flex;
  align-items: stretch;
  direction: ltr;
  min-height: 48px;
  border: 1px solid var(--osp-line-strong);
  border-radius: var(--osp-r);
  overflow: hidden;
  transition:
    border-color var(--osp-t-fast) var(--osp-ease),
    box-shadow var(--osp-t-fast) var(--osp-ease);
}

/* Odak halkası kabuğa taşındı: iki alandan hangisi odaklanırsa alanın tamamı
   işaretlenir. `overflow: hidden` dış gölgeyi kırpmaz. */
body .osp-phone .osp-phone__shell[class]:focus-within {
  border-color: var(--osp-brand-600);
  box-shadow: 0 0 0 4px var(--osp-brand-tint);
}

/* Zorlanmış renk kipinde box-shadow çizilmez; halka outline ile verilir. */
@media (forced-colors: active) {
  body .osp-phone .osp-phone__shell[class]:focus-within {
    outline: 3px solid CanvasText;
    outline-offset: 1px;
  }
}

/* Alanlar kabuğun içinde erir: kendi kenarlığı, yuvarlaklığı ve halkası yok.
   (0,3,1) — `.theme-dark input.form-control.only_number` (0,3,1) ile eşit
   özgüllükte ama bu dosya sonra yükleniyor; zaten aynı şeyi istiyoruz. */
body .osp-phone__shell .form-control[class] {
  min-height: 0;
  height: auto;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* GEREKÇE (!important): frontend.css:592
   `.form-control:focus{box-shadow: 0 0 0 .1rem rgba(41,199,172,.25) !important}`
   odaklanan alanın çevresine turkuaz bir hâle çiziyor. Kabuğun dışında bu hâle
   göze çarpmıyor, ama kabuğun İÇİNDE ayırıcı çizginin çevresinde yeşil bir iz
   olarak görünüyor (ölçüldü, ekran görüntüsüyle doğrulandı). Odak halkasının
   sahibi kabuktur; içeride hiç gölge olmamalı. !important'ın tek gerekçesi
   karşı taraftaki !important — ve kapsamı yalnız bu kabuğun içi. */
body .osp-phone__shell .form-control[class]:focus,
body .osp-phone__shell .form-control[class]:focus-visible {
  border: 0;
  box-shadow: none !important;
  outline: none;
}

/* Ülke kodu alanı; sol boşluğu "+" işaretine ayrılmış. 4,5ch dört haneyi
   taşır (en uzun ülke kodu dört hane), boşta da geniş durmaz. */
body .osp-phone__shell .form-control[class].osp-phone__code {
  flex: 0 0 auto;
  width: var(--osp-phone-code-w);
  min-width: 0;
  padding-inline: 26px 4px;
  font-variant-numeric: tabular-nums;
}

/* "+" ülke kodunun etiketidir (`<label for>`): tıklanınca alana odaklanır,
   ekran okuyucu dilden bağımsız bir ad duyar. Alanın ÜSTÜNDE duruyor, yanında
   değil — böylece zemini alan boyuyor ve "+90" tek parça okunuyor. */
body .osp-phone__shell .osp-phone__plus {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline-start: 14px;
  /* "+" ile hemen yanındaki hanelerin rengi BİREBİR aynı olmalı, yoksa "+90"
     tek parça okunmaz. Haneleri style.css:2798 `color: var(--color) !important`
     boyuyor; bu yüzden aynı kaynaktan okuyoruz. Token yoksa kendi mürekkebimize
     düşer. Ölçüm: #4b566b/#f3f5f9 6,77:1 (açık) · #c2c7d0/#191d2b 9,88:1 (koyu). */
  color: var(--color, var(--osp-ink));
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

/* Ayırıcı çizgi. Kenarlık olarak yazılamaz: style.css:2799
   `.form-control{border-color:var(--border-color)!important}` ve
   `--border-color: #f3f5f9` çizgiyi zeminle aynı renge boyardı. Bu yüzden
   alanların üstünde duran bağımsız bir çizgi. */
body .osp-phone__shell .osp-phone__sep {
  position: absolute;
  z-index: 1;
  top: 50%;
  inset-inline-start: var(--osp-phone-code-w);
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background-color: var(--osp-line-strong);
  pointer-events: none;
}

body .osp-phone__shell .form-control[class].osp-phone__number {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-start: 12px;
}

/* --------------------------------------- 13.3 yardımcı metin ve yıldız --- */
/* Kaynakta `<small>` idi; boyutu tarayıcıya bırakmak yerine token'a bağlandı. */
body .osp-field .osp-field__hint {
  margin: var(--osp-2) 0 0;
  color: var(--osp-muted);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Kaynakta `<span class="error">*</span>` idi. style.css:216 o sınıfa
   `color: red !important` veriyor — beyaz üstünde 4,00:1, AA altı. Sınıf JS'te
   bağlı değil (ölçüldü), bu yüzden `!important` yarışına girmek yerine sınıf
   değiştirildi: #b91c1c ile 6,47:1. */
body .osp-field .osp-field__req {
  color: var(--osp-danger);
  font-weight: 700;
}

/* ----------------------------------- 13.4 yan sütunda aktif giriş yolu --- */
/* Üç giriş yolundan hangisinde olduğun görünsün. Ayrım yalnız renkte değil:
   `aria-current="page"` ekran okuyucuya söylüyor, tam kenarlık ve kalın yazı
   renk körlüğünde de okunuyor. (Yan şerit kasten kullanılmadı — tam kenarlık
   + zemin tonu tercih edildi.) § 11 kuralı (0,2,4) ile yarıştığı için (0,3,4);
   kenarlık eklenirken iç boşluk 1px azaltıldı, satır yüksekliği kaymıyor. */
body .osp-auth__aside .othersLogin ul li a[aria-current="page"] {
  padding-block: calc(var(--osp-2) - 1px);
  padding-inline: calc(var(--osp-3) - 1px);
  border: 1px solid var(--osp-brand-tint-2);
  background-color: var(--osp-brand-tint);
  color: var(--osp-brand-700);
  font-weight: 700;
}

body .osp-auth__aside .othersLogin ul li a[aria-current="page"] i {
  color: var(--osp-brand-700);
}

/* --------------------------------------------------------- 768px ve üstü --- */
@media (min-width: 768px) {
  body .osp-phone__shell .form-control[class].osp-phone__number {
    padding-inline-start: 14px;
  }
}

/* ==========================================================================
   14. Yasal metin sayfaları (şartlar, gizlilik) — 2026-08-30
   ========================================================================== */
body .osp-legal {
  padding-block: var(--osp-8, 2rem) var(--osp-10, 3rem);
}
body .osp-legal__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 700;
  color: var(--osp-ink);
  margin-bottom: var(--osp-5, 1.25rem);
}
body .osp-legal__body,
body .osp-legal__empty {
  max-width: 68ch;
  color: var(--osp-ink-muted);
  line-height: 1.7;
}
body .osp-legal__empty {
  padding: var(--osp-5, 1.25rem);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-2, 14px);
  background-color: var(--osp-surface-soft, #f4f7fb);
}
body .osp-legal__empty p + p { margin-top: .5rem; }
body .osp-legal__link {
  color: var(--osp-brand-ink, #2a5fe6);
  font-weight: 600;
  text-decoration: underline;
}

/* ==========================================================================
   11. GİRİŞ EKRANI — marka paneli (clara, 2026-08-30)
   View'den taşındı: her istekte ~4 KB stilin tekrar inmesini ve tema
   katmanının ikiye bölünmesini önlemek için.
   ========================================================================== */
/* Marka yıkaması: tek radyal yerine ana sayfanın üç katmanı.
   Özgüllük tema kuralıyla eşit (0,1,2); bu blok stil sayfasından sonra
   geldiği için kaynak sırası kazanır. */
body .osp-auth--split::before {
  height: 420px;
  background-image:
    radial-gradient(700px 400px at 80% -5%, var(--osp-brand-tint-2), transparent 60%),
    radial-gradient(600px 400px at 5% 20%, var(--osp-brand-tint), transparent 55%),
    radial-gradient(700px 500px at 60% 110%, var(--osp-accent-tint), transparent 60%);
}

/* -------------------------------------------------- dekoratif marka paneli --
   Mobilde hiç basılmaz: dar ekranda görevin önüne geçer ve yan sütundaki
   İŞLEVSEL bağlantıları (personel/müşteri girişi) aşağı iter. */
body .osp-authbrand {
  display: none;
}

@media (min-width: 1024px) {
  body .osp-authbrand {
    display: grid;
    gap: var(--osp-5);
    justify-items: center;
  }

  /* Tema `minmax(0,1fr) 320px` veriyor ama `.osp-auth__main` 560px'de
     duruyor; aradaki fark geniş ekranda ölü boşluk olarak kalıyordu.
     Form sütununu içeriğine oturtup ızgarayı ortalıyoruz. `--solo`
     (şifre sıfırlama) varyantına dokunulmuyor. */
  body .osp-auth--split .osp-auth__wrap {
    grid-template-columns: minmax(0, 560px) 320px;
    justify-content: center;
  }
}

@media (min-width: 1280px) {
  body .osp-auth--split .osp-auth__wrap {
    grid-template-columns: minmax(0, 560px) 360px;
  }
}

/* Ana sayfadaki .eyebrow hapı — ama BÜYÜK HARF ve geniş harf aralığı yok:
   Türkçe büyük harf dönüşümü (İ/ı) okunurluğu düşürüyor.
   Kontrast: --osp-brand-700 (#1e4fd8) / --osp-brand-tint zemin → 5,6:1. */
body .osp-authbrand__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--osp-2);
  padding: var(--osp-2) var(--osp-3);
  border: 1px solid var(--osp-brand-tint-2);
  border-radius: var(--osp-r-pill);
  background-color: var(--osp-brand-tint);
  color: var(--osp-brand-700);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Cihaz kabuğu — ana sayfadaki .phone.
   #0c1428 uydurma değil: temanın koyu kipteki --osp-bg değeri, ana sayfada
   da telefon gövdesi bu renk. Açık kipte token karşılığı yok, o yüzden ham. */
body .osp-authbrand__device {
  width: 100%;
  max-width: 248px;
  padding: var(--osp-2);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: calc(var(--osp-r-lg) + var(--osp-3));
  background-color: #0c1428;
  box-shadow: var(--osp-shadow-2);
}

/* Oran telefonu anlatır: kısa bir kutu kart gibi okunur, uzun olan cihaz gibi.
   Orta satır 1fr olduğu için alt şerit her zaman ekranın dibine oturur. */
body .osp-authbrand__screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 348px;
  overflow: hidden;
  border-radius: var(--osp-r-lg);
  background-image: linear-gradient(180deg, var(--osp-surface), var(--osp-surface-2));
}

/* Ana sayfadaki .ps-top gradyanı. Metin rengi #04122e — tema bunu zaten
   `body .btn.osp-nav__cta` içinde kullanıyor.
   KONTRAST: #04122e / gradyanın koyu ucu #2f6bff → 4,11:1. Bu yüzden strip
   içinde YALNIZ 20px/800 (büyük metin, eşik 3:1) yazı var; küçük metinlerin
   hepsi aşağıdaki açık zemine taşındı. */
body .osp-authbrand__top {
  padding: var(--osp-5) var(--osp-4);
  background-image: linear-gradient(120deg, var(--osp-brand), var(--osp-brand-2));
  color: #04122e;
}

/* Hoparlör çizgisi: metinsiz, cihaz okunurluğunu tek çizgiyle veriyor. */
body .osp-authbrand__top::before {
  content: "";
  display: block;
  width: 52px;
  height: 5px;
  margin: 0 auto var(--osp-4);
  border-radius: var(--osp-r-pill);
  background-color: rgba(4, 18, 46, .32);
}

body .osp-authbrand__name {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body .osp-authbrand__body {
  display: grid;
  align-content: start;
  padding: var(--osp-4);
}

body .osp-authbrand__points {
  display: grid;
  gap: var(--osp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .osp-authbrand__points li {
  display: flex;
  align-items: center;
  gap: var(--osp-3);
  padding: var(--osp-2) var(--osp-3);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r);
  background-color: var(--osp-surface);
  color: var(--osp-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

body .osp-authbrand__points svg {
  flex: none;
  color: var(--osp-brand-600);
}

body .osp-authbrand__lede {
  max-width: 34ch;
  margin: 0;
  color: var(--osp-muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Ana sayfadaki .ps-bar. #3a1400 / --osp-accent (#ff6a35) → 5,79:1. */
body .osp-authbrand__bar {
  margin: 0 var(--osp-4) var(--osp-4);
  padding: var(--osp-3);
  border-radius: var(--osp-r);
  background-color: var(--osp-accent);
  color: #3a1400;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* Ana sayfadaki .hero-trust satırı */
body .osp-authbrand__trust {
  display: grid;
  gap: var(--osp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--osp-muted);
  font-size: 14px;
  line-height: 1.45;
}

body .osp-authbrand__trust li {
  display: flex;
  align-items: center;
  gap: var(--osp-2);
}

body .osp-authbrand__trust li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--osp-ok);
}

/* ------------------------------------------------------- meşgul durumu ----
   Tek hareket bu: durumu anlatıyor, süs değil. */
body .osp-auth__submit[aria-busy="true"] {
  cursor: progress;
}

body .osp-auth__spin,
body .osp-auth__label--busy {
  display: none;
}

body .osp-auth__submit[aria-busy="true"] .osp-auth__spin {
  display: inline-block;
}

body .osp-auth__submit[aria-busy="true"] .osp-auth__label--busy {
  display: inline;
}

body .osp-auth__submit[aria-busy="true"] .osp-auth__ico,
body .osp-auth__submit--swap[aria-busy="true"] .osp-auth__label--idle {
  display: none;
}

body .osp-auth__spin {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: osp-auth-spin .7s linear infinite;
}

@keyframes osp-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tema § 10 süreleri .01ms'e çekiyor; donmuş bir yay parçası bozuk görünür,
   tam halkaya sabitleniyor. */
@media (prefers-reduced-motion: reduce) {
  body .osp-auth__spin {
    border-right-color: currentColor;
    animation: none;
  }
}