/* ==========================================================================
   portal.benomyazilim.com — Müşteri Portalı giriş ekranı
   Sürüm 1.1.0

   Bağımlılık yok: harici font, ikon kütüphanesi veya CSS çatısı kullanılmaz
   (Content-Security-Policy 'self' ile uyumlu).

   Arka plan tamamen CSS ile üretilir. Kurumsal bina fotoğrafı eklemek
   isterseniz --hero-foto değişkenine bir url() verin; kod değişikliği
   gerekmez.
   ========================================================================== */

:root {
  /* Marka mavileri */
  --mavi-900: #05265f;
  --mavi-800: #073591;
  --mavi-700: #0a49b4;
  --mavi-600: #0d5ad6;
  --mavi-500: #1f7bea;
  --mavi-400: #4f9df3;
  --mavi-200: #a9d2fb;
  --mavi-50:  #eef5ff;

  --beyaz: #ffffff;
  --murekkep: #10203c;
  --gri-700: #43536e;
  --gri-500: #6b7c99;
  --gri-300: #c8d4e6;
  --gri-100: #eaf0f9;

  --kart-golge: 0 40px 90px -32px rgba(3, 25, 70, 0.55);
  --radius: 18px;
  --radius-sm: 12px;

  --hero-foto: none;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  color: var(--beyaz);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  background:
    radial-gradient(72rem 48rem at 76% -6%, rgba(140, 194, 252, 0.55), transparent 56%),
    radial-gradient(60rem 46rem at 6% 104%, rgba(4, 34, 92, 0.85), transparent 62%),
    linear-gradient(156deg, #093f9f 0%, #0b52c8 38%, #1a76e6 70%, #63aaf5 100%);
  background-attachment: fixed;
}

a { color: inherit; }

/* --------------------------------------------------------------------------
   Dekor: kurumsal arka plan görseli

   Görsel kare (1:1) olduğu için ekran oranına göre FARKLI kırpılır:
     - Yatay ekran  → bina sol altta kalacak, üst gökyüzü kırpılır
     - Dikey ekran  → bina alta oturur, sağdaki boşluk kırpılır
   object-fit/object-position ile yapılır; tarayıcı ölçeklemeyi kendisi yapar.

   Dosya yoksa (404) auth.js .dekor--yedek sınıfını ekler ve saf CSS
   dekorasyonu devreye girer; sayfa hiçbir koşulda bozulmaz.
   -------------------------------------------------------------------------- */
.dekor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.dekor__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Yatay (varsayılan): binayı ve akan çizgileri birlikte tut */
  object-position: 50% 74%;
  display: block;
}

/* Dikey ekran: bina alta otursun, sağdaki gökyüzü kırpılsın */
@media (orientation: portrait) {
  .dekor__foto { object-position: 34% 88%; }
}

/* Çok geniş ekran: kare görsel aşırı büyüdüğü için biraz yukarı çek */
@media (orientation: landscape) and (min-aspect-ratio: 2/1) {
  .dekor__foto { object-position: 50% 64%; }
}

/* Okunabilirlik perdesi: sol taraftaki beyaz metni ve sağdaki kartı korur */
.dekor__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg,
      rgba(3, 28, 78, 0.82) 0%,
      rgba(5, 40, 108, 0.62) 34%,
      rgba(9, 62, 152, 0.30) 62%,
      rgba(12, 80, 190, 0.12) 100%),
    linear-gradient(180deg, rgba(3, 26, 74, 0.42) 0%, transparent 26%);
}

@media (orientation: portrait) {
  .dekor__perde {
    background:
      linear-gradient(180deg,
        rgba(3, 28, 78, 0.74) 0%,
        rgba(5, 40, 108, 0.58) 42%,
        rgba(6, 46, 122, 0.72) 100%);
  }
}

/* ---- Görsel yokken devreye giren saf CSS yedeği ---- */
.dekor__cizgiler,
.dekor__silu { display: none; }

.dekor--yedek .dekor__foto,
.dekor--yedek .dekor__perde { display: none; }

.dekor--yedek .dekor__cizgiler,
.dekor--yedek .dekor__silu { display: block; }

.dekor__cizgiler {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(40rem 26rem at 86% 14%, transparent 39%, rgba(255,255,255,.20) 40%, transparent 41.3%),
    radial-gradient(46rem 30rem at 90% 22%, transparent 44%, rgba(255,255,255,.15) 45%, transparent 46.2%),
    radial-gradient(54rem 34rem at 94% 31%, transparent 48%, rgba(255,255,255,.11) 49%, transparent 50.1%),
    radial-gradient(62rem 38rem at 98% 41%, transparent 51%, rgba(255,255,255,.08) 52%, transparent 53%),
    radial-gradient(36rem 24rem at 4% 88%, transparent 42%, rgba(255,255,255,.13) 43%, transparent 44.2%),
    radial-gradient(44rem 28rem at 0% 96%, transparent 46%, rgba(255,255,255,.09) 47%, transparent 48.1%);
}

.dekor__silu {
  position: absolute;
  left: -2%;
  bottom: -1px;
  width: 58%;
  height: 42%;
  background:
    linear-gradient(178deg, rgba(9, 44, 108, 0) 0%, rgba(8, 38, 96, 0.62) 46%, rgba(6, 28, 74, 0.85) 100%);
  clip-path: polygon(0% 100%, 0% 42%, 17% 30%, 34% 44%, 34% 20%, 55% 8%, 72% 26%, 72% 55%, 100% 68%, 100% 100%);
  opacity: 0.85;
}

.dekor__silu::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 20px);
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Kenar mikro metinleri
   -------------------------------------------------------------------------- */
.mikro {
  position: fixed;
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(228, 240, 255, 0.62);
  line-height: 1.85;
  pointer-events: none;
}

.mikro--sagust  { top: 34px;  right: 44px; text-align: right; }
.mikro--solalt  { bottom: 34px; left: 44px; max-width: 92px; }
.mikro--sagalt  { bottom: 34px; right: 44px; text-align: right; }

.mikro--sagalt::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  margin: 0 0 10px auto;
}

.yan-seritt {
  position: fixed;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  gap: 9px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(228, 240, 255, 0.68);
  text-align: right;
  pointer-events: none;
}

.yan-seritt::before {
  content: "";
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  margin-left: auto;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Kurumsal logo

   Tek dosya kullanılır: assets/img/logo.svg (noktalı küre + BENOMYAZILIM).
   Mavi zeminde tek renk beyaza çevrilir; beyaz kartta özgün renkleriyle durur.
   Böylece iki ayrı logo dosyası bakımı gerekmez.
   -------------------------------------------------------------------------- */
.marka-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 260px;
}

.marka-logo--beyaz {
  filter: brightness(0) invert(1);
}

.marka-logo--kucuk { height: 30px; max-width: 190px; }
.marka-logo--orta  { height: 34px; max-width: 215px; }

a.marka-bag {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a.marka-bag:hover { opacity: 0.86; }

/* --------------------------------------------------------------------------
   Sayfa yerleşimi
   -------------------------------------------------------------------------- */
.tepe {
  position: relative;
  z-index: 3;
  padding: 30px 44px 0;
}

.sayfa {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 56px;
  padding: 0 44px 64px;
  max-width: 1560px;
  margin: 0 auto;
}

/* Sol taraf: tanıtım */
.tanit { max-width: 660px; padding-top: 24px; padding-bottom: 8px; }

.tanit__ust {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(224, 238, 255, 0.78);
  margin: 0 0 22px;
}

.tanit__baslik {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.032em;
  margin: 0 0 22px;
  text-wrap: balance;
}

.tanit__aciklama {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: rgba(229, 240, 255, 0.9);
  margin: 0 0 44px;
  max-width: 52ch;
}

.deger-listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

/* İkon solda, metin sağda — referans yerleşim */
.deger-listesi li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.deger-listesi li:first-child { padding-left: 0; border-left: 0; }

/* span varsayılan olarak inline: genişlik/yükseklik uygulanmaz.
   flex öğesi yapıp sabit boyut veriyoruz. */
.deger__ikon {
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  color: rgba(236, 245, 255, 0.95);
}

.deger__ikon svg { width: 100%; height: 100%; display: block; }

.deger__metin { min-width: 0; }

.deger__ad {
  font-size: 15px;
  font-weight: 660;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.deger__not {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(220, 234, 253, 0.78);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Sağ taraf: giriş kartı
   -------------------------------------------------------------------------- */
.kart-sar { display: flex; justify-content: flex-end; }

.kart {
  width: 100%;
  max-width: 470px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 38px 38px 32px;
  color: var(--murekkep);
  box-shadow: var(--kart-golge);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.kart__basi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}



.kart__basi-sag { text-align: right; padding-top: 3px; }

.kart__portal {
  font-size: 16.5px;
  font-weight: 650;
  color: var(--murekkep);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.kart__alt-baslik {
  font-size: 12.5px;
  color: var(--gri-500);
  margin: 0;
}

/* Alanlar */
.alan { margin-bottom: 14px; }

.alan__sar {
  position: relative;
  display: flex;
  align-items: center;
}

.alan__ikon {
  position: absolute;
  left: 16px;
  width: 19px;
  height: 19px;
  color: var(--gri-500);
  pointer-events: none;
}

.alan__ikon svg { width: 100%; height: 100%; display: block; }

.alan input[type="email"],
.alan input[type="password"],
.alan input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--murekkep);
  background: var(--gri-100);
  border: 1.5px solid transparent;
  border-radius: 13px;
  padding: 15px 16px 15px 48px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.alan input::placeholder { color: var(--gri-500); }

.alan input:hover { background: #e3ebf7; }

.alan input:focus {
  outline: none;
  background: var(--beyaz);
  border-color: var(--mavi-500);
  box-shadow: 0 0 0 4px rgba(31, 123, 234, 0.15);
}

.alan input:-webkit-autofill {
  -webkit-text-fill-color: var(--murekkep);
  -webkit-box-shadow: 0 0 0 1000px var(--gri-100) inset;
}

.alan--sifre input { padding-right: 50px; }

.goz {
  position: absolute;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--gri-500);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.goz:hover { color: var(--mavi-600); background: rgba(31, 123, 234, 0.09); }
.goz:focus-visible { outline: 2px solid var(--mavi-500); outline-offset: 1px; }
.goz svg { width: 19px; height: 19px; }
.goz .kapali { display: none; }
.goz[aria-pressed="true"] .acik { display: none; }
.goz[aria-pressed="true"] .kapali { display: block; }

/* Hatırla + şifremi unuttum */
.alt-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 20px;
  font-size: 13.5px;
}

.onay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gri-700);
  cursor: pointer;
  user-select: none;
}

.onay input {
  width: 17px;
  height: 17px;
  accent-color: var(--mavi-600);
  cursor: pointer;
}

.baglanti {
  color: var(--mavi-600);
  text-decoration: none;
  font-weight: 550;
}

.baglanti:hover { text-decoration: underline; }

/* Butonlar */
.btn {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 640;
  border-radius: 13px;
  padding: 15px 20px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.btn--birincil {
  color: #fff;
  background: linear-gradient(135deg, var(--mavi-600), var(--mavi-500));
  border: 0;
  box-shadow: 0 16px 32px -14px rgba(13, 90, 214, 0.75);
}

.btn--birincil:hover { filter: brightness(1.06); }
.btn--birincil:active { transform: translateY(1px); }
.btn--birincil:focus-visible { outline: 3px solid var(--mavi-200); outline-offset: 2px; }
.btn--birincil[disabled] { opacity: 0.7; cursor: progress; filter: none; }

.btn__ok { width: 19px; height: 19px; transition: transform 0.18s ease; }
.btn--birincil:hover .btn__ok { transform: translateX(3px); }

.btn__yazi { transition: opacity 0.15s ease; }
.btn.yukleniyor .btn__yazi,
.btn.yukleniyor .btn__ok { opacity: 0; }

.btn__fircildak {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: don 0.7s linear infinite;
}

.btn.yukleniyor .btn__fircildak { opacity: 1; }

@keyframes don { to { transform: rotate(360deg); } }

.btn--ikincil {
  color: var(--mavi-700);
  background: var(--beyaz);
  border: 1.5px solid var(--gri-300);
  font-weight: 600;
  font-size: 14.5px;
}

.btn--ikincil:hover { background: var(--mavi-50); border-color: var(--mavi-200); }
.btn--ikincil:focus-visible { outline: 3px solid var(--mavi-200); outline-offset: 2px; }
.btn--ikincil svg { width: 19px; height: 19px; color: var(--mavi-600); }

/* Ayraç */
.ayrac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--gri-500);
  font-size: 13px;
}

.ayrac::before,
.ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gri-300);
}

/* Uyarılar */
.uyari {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.uyari svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }

.uyari--hata {
  background: #fdecec;
  border: 1px solid #f6c9c9;
  color: #91232c;
}

.uyari--bilgi {
  background: var(--mavi-50);
  border: 1px solid #c9def9;
  color: var(--mavi-800);
}

/* Kart dipnotu */
.kart__dipnot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--gri-500);
}

.kart__dipnot a { color: var(--mavi-600); text-decoration: none; }
.kart__dipnot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Panel seçim ekranı
   -------------------------------------------------------------------------- */
.secim {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  padding: 64px 24px;
}

.secim__basi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.secim__basi h1 {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 720;
  letter-spacing: -0.025em;
  margin: 0 0 5px;
}

.secim__basi p { margin: 0; font-size: 14px; color: rgba(226, 238, 254, 0.85); }

.cikis-btn {
  font: inherit;
  font-size: 13.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 11px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cikis-btn:hover { background: rgba(255, 255, 255, 0.24); }

.site-listesi { display: grid; gap: 12px; }

.site-kart {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--murekkep);
  box-shadow: 0 22px 46px -30px rgba(3, 25, 70, 0.6);
  transition: transform 0.14s ease, box-shadow 0.16s ease;
}

.site-kart:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 56px -28px rgba(3, 25, 70, 0.7);
}

.site-kart__ikon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--mavi-600), var(--mavi-400));
}

.site-kart__govde { min-width: 0; flex: 1; }
.site-kart__ad { font-size: 16px; font-weight: 640; margin: 0 0 2px; }
.site-kart__alan { font-size: 13px; color: var(--gri-500); margin: 0; word-break: break-all; }

.etiket {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 620;
  padding: 5px 11px;
  border-radius: 999px;
}

.etiket--aktif { color: #0b6b4f; background: #dcf5ec; }
.etiket--pasif { color: var(--gri-500); background: var(--gri-100); }

.bos-durum {
  padding: 48px 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius);
  color: var(--murekkep);
  box-shadow: 0 22px 46px -30px rgba(3, 25, 70, 0.6);
}

.bos-durum h2 { font-size: 18px; margin: 0 0 8px; font-weight: 650; }
.bos-durum p { margin: 0 auto; max-width: 46ch; font-size: 14px; color: var(--gri-700); }

/* --------------------------------------------------------------------------
   Hata / bakım kutusu
   -------------------------------------------------------------------------- */
.mesaj-sayfa {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.mesaj-kutu {
  max-width: 470px;
  text-align: center;
  padding: 44px 38px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 22px;
  color: var(--murekkep);
  box-shadow: var(--kart-golge);
}

.mesaj-kutu .marka-logo { margin: 0 auto 22px; }
.mesaj-kutu h1 { font-size: 21px; margin: 0 0 8px; font-weight: 680; letter-spacing: -0.02em; }
.mesaj-kutu p { margin: 0 0 24px; color: var(--gri-700); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .yan-seritt, .mikro--sagust { display: none; }
  .sayfa { gap: 34px; padding: 0 32px 56px; }
  .tepe { padding: 26px 32px 0; }
  .mikro--solalt, .mikro--sagalt { display: none; }
}

@media (max-width: 940px) {
  .sayfa {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 22px 48px;
    gap: 30px;
    align-items: start;
  }
  .tepe { padding: 24px 22px 0; }
  .tanit { max-width: none; padding-top: 8px; }
  .tanit__baslik { font-size: clamp(29px, 7vw, 40px); }
  .tanit__aciklama { margin-bottom: 28px; }
  .deger-listesi { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .deger-listesi li { padding: 0 0 0 16px; border-left: 1px solid rgba(255,255,255,.24); }
  .deger-listesi li:first-child { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.24); }
  .deger__ikon { width: 26px; height: 26px; }
  .kart-sar { justify-content: stretch; }
  .kart { max-width: none; }
  .dekor__silu { display: none; }
}

@media (max-width: 560px) {
  .sayfa { padding: 4px 16px 40px; }
  .tepe { padding: 20px 16px 0; }
  .kart { padding: 28px 22px 24px; border-radius: 20px; }
  .kart__basi { flex-direction: column; gap: 14px; }
  .kart__basi-sag { text-align: left; }
  .marka-logo { height: 34px; }
  .deger-listesi { display: none; }
  .secim { padding: 36px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   Yardımcı: ekran okuyucuya görünür, gözle görünmez etiket
   -------------------------------------------------------------------------- */
.gizli-etiket {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Geniş ekran ince ayarı
   Sağdaki dikey şerit (İNSAN / TEKNOLOJİ / ÇÖZÜM) kartın altında kalmasın:
   içeriğe sağdan pay bırakılır.
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  .sayfa { padding-right: 136px; }
  .tepe  { padding-right: 136px; }
}

@media (min-width: 1500px) {
  .sayfa { padding-right: 168px; padding-left: 64px; }
  .tepe  { padding-right: 168px; padding-left: 64px; }
}

/* Kart içindeki logo referanstaki kadar okunur olsun */
.kart__basi .marka-logo--kucuk { height: 34px; max-width: 210px; }

/* ==========================================================================
   Giriş hedefi sekmeleri — kartın sağ kenarına yapışan klasör sekmeleri

   Müşteri, girişten ÖNCE nereye gideceğini seçer:
     Web Sitesi    → kendi site paneli
     Kurumsal Mail → kurumsal e-posta

   Aktif sekme kartla aynı zemini alır ve araya bırakılan negatif boşlukla
   karta fiziksel olarak bağlanmış görünür.
   ========================================================================== */
.kart-blok {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 470px;
}

.kart-blok .kart {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.yan-tablar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: -2px;   /* kartın kenarına otur */
  padding-top: 34px;
}

.yan-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-align: left;

  padding: 12px 16px 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-left: 0;
  border-radius: 0 14px 14px 0;

  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, padding 0.16s ease,
              box-shadow 0.16s ease, border-color 0.16s ease;
}

.yan-tab svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  opacity: 0.9;
}

.yan-tab:hover {
  background: rgba(255, 255, 255, 0.26);
  padding-right: 19px;
}

.yan-tab:focus-visible {
  outline: 3px solid var(--mavi-200);
  outline-offset: 2px;
  z-index: 2;
}

/* Aktif sekme: kartın devamı gibi görünür */
.yan-tab--aktif {
  color: var(--mavi-700);
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(255, 255, 255, 0.7);
  padding-right: 20px;
  box-shadow: 14px 18px 40px -22px rgba(3, 25, 70, 0.6);
}

.yan-tab--aktif:hover {
  background: #fff;
  padding-right: 20px;
}

.yan-tab--aktif svg { opacity: 1; color: var(--mavi-600); }

/* Kartla arasındaki dikişi kapat */
.yan-tab--aktif::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(255, 255, 255, 0.97);
}

/* --------------------------------------------------------------------------
   Dar ekran: sekmeler kartın ÜSTÜNE yatay olarak geçer
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .kart-blok {
    flex-direction: column-reverse;   /* sekmeler görsel olarak üstte */
    align-items: stretch;
    max-width: none;
  }

  .yan-tablar {
    flex-direction: row;
    gap: 8px;
    margin-left: 0;
    margin-bottom: -1px;
    padding-top: 0;
    padding-left: 4px;
  }

  .yan-tab {
    flex: 1 1 0;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    padding: 11px 12px;
  }

  .yan-tab:hover,
  .yan-tab--aktif,
  .yan-tab--aktif:hover { padding: 11px 12px; }

  .yan-tab--aktif { box-shadow: none; }

  .yan-tab--aktif::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -3px;
    width: auto;
    height: 6px;
  }

  .kart-blok .kart { border-radius: 0 20px 20px 20px; }
}

@media (max-width: 400px) {
  .yan-tab { font-size: 12px; gap: 6px; padding: 10px 8px; }
  .yan-tab svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   Sekme şeridi eklendikten sonraki düzeltmeler
   ========================================================================== */

/* Kart 470px genişliğini korusun; sekmeler onun DIŞINA taşsın.
   (Aksi hâlde sekmeler kartın payından yiyor ve kart daralıyordu.) */
.kart-blok {
  max-width: none;
  width: 100%;
}

.kart-blok .kart {
  flex: 0 1 470px;
  width: auto;
}

@media (max-width: 940px) {
  .kart-blok .kart { flex: 1 1 auto; }
}

/* Arka plan fotoğrafı geldiğinde sol taraftaki beyaz metin cam cepheye
   denk gelebiliyor. Perdeyi solda biraz daha koyulaştır. */
.dekor__perde {
  background:
    linear-gradient(102deg,
      rgba(3, 26, 74, 0.88) 0%,
      rgba(4, 34, 96, 0.74) 30%,
      rgba(7, 52, 132, 0.44) 58%,
      rgba(11, 74, 178, 0.16) 100%),
    linear-gradient(180deg, rgba(3, 24, 70, 0.46) 0%, transparent 22%),
    linear-gradient(0deg, rgba(3, 24, 70, 0.34) 0%, transparent 24%);
}

@media (orientation: portrait) {
  .dekor__perde {
    background:
      linear-gradient(180deg,
        rgba(3, 26, 74, 0.80) 0%,
        rgba(5, 38, 104, 0.62) 38%,
        rgba(5, 42, 116, 0.78) 100%);
  }
}

/* Sekmelerde aktif/pasif ayrımı: pasif sekme mavi tonlu kalır, böylece
   açık gökyüzü önünde bile beyaz aktif sekme net biçimde öne çıkar. */
.yan-tab {
  background: rgba(7, 44, 116, 0.52);
  border-color: rgba(255, 255, 255, 0.26);
}

.yan-tab:hover {
  background: rgba(9, 56, 142, 0.66);
  border-color: rgba(255, 255, 255, 0.42);
}

.yan-tab--aktif,
.yan-tab--aktif:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
}

.yan-tab--aktif::before { background: #ffffff; }