/* ==========================================================================
   Hadi Sende - Ortak Tasarım Sistemi (v7)
   Açık mod dili: beyaz zeminler, tek vurgu rengi (gökyüzü mavisi #0EA5E9),
   keskin köşeler, tek yazı tipi ailesi (Inter, ağırlık hiyerarşisiyle).
   Lacivert/altın marka kimliği yalnızca küçük logo rozetinde korunur; geri
   kalan her yerde --brand-* merdiveni nötr (gri) bir ölçek olarak kullanılır.
   Mobilde alt sekme çubuklu native-app hissi, büyük ekranlarda sabit sol
   menülü kontrol paneli hissi.
   ========================================================================== */

@import url('/css/fonts.css');

:root {
  /* -- Marka nötrleri (açık temada hafif soğuk-gri bir ölçek; gerçek
     lacivert yalnızca --logo-navy-* ile küçük logo rozetinde kullanılır,
     bkz. .brand-hero__mark) ------------------------------------------------ */
  --brand-50:  #F1F5F9;
  --brand-100: #E2E8F0;
  --brand-200: #CBD5E1;
  --brand-300: #94A3B8;
  --brand-400: #64748B;
  --brand-500: #334155;
  --brand-600: #0F172A;
  --brand-700: #0B1220;
  --brand-800: #060A12;
  --brand-900: #000000;
  --logo-navy-a: #2E4D75;
  --logo-navy-b: #0F1F38;

  /* -- Birincil vurgu rengi: gökyüzü mavisi (#0EA5E9) --------------------- */
  --copper-100: #E0F2FE;
  --copper-300: #38BDF8;
  --copper-500: #0EA5E9;  /* birincil aksiyon - gökyüzü mavisi */
  --copper-600: #0284C7;
  --copper-700: #0369A1;  /* açık zeminde okunaklı koyu ton (metin için) */

  /* -- Altın (ikincil/miras vurgu - rozet, onay, yıldız) ------------------ */
  --accent-500: #E2B93B;
  --accent-100: #FEF3C7;

  /* -- Nötrler (metin) ------------------------------------------------------ */
  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #94A3B8;
  --ink-100: #E2E8F0;

  /* -- Açık zemin (saf beyaz yerine, ana vurgu rengiyle uyumlu çok hafif
     mavimsi bir ton - kartların "beyaz" yüzeyi sayfa zemininden hafifçe
     ayrışsın diye; --surface hep saf beyaz kalır) ---------------------- */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #E4F1FA;
  --surface-raised: #FFFFFF;
  --border: #D6E6F2;

  --success: #16A34A;
  --success-bg: #DCFCE7;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --warning: #CA8A04;
  --warning-bg: #FEF3C7;
  --info: #0284C7;
  --info-bg: #E0F2FE;

  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-full: 999px;

  /* Kullanıcı isteğiyle kaldırıldı: kutu/kart/form alanlarında artık hiçbir
     box-shadow yok - tanım tamamen border (--border) ile sağlanıyor. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.18);

  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);

  --font-display: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  --topbar-h: 72px;
  --sidebar-w: 248px;
  --sidebar-w-rail: 84px;
  --bottom-nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea, button { font-family: inherit; font-size: 15px; }

/* Fraunces yalnızca büyük başlıklarda / öne çıkan rakamlarda kullanılır -
   geri kalan her yer (form, buton, etiket, tablo) Inter ile okunaklı kalır. */
.font-display { font-family: var(--font-display); }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------- */
/* Geniş ekran zemini                                                      */
/* ---------------------------------------------------------------------- */
@media (min-width: 720px) {
  body.has-app-shell {
    background: #FFFFFF;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 32px 20px;
  }
}

/* ---------------------------------------------------------------------- */
/* Sayfa iskeleti                                                          */
/* ---------------------------------------------------------------------- */
.app-shell {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}
@media (min-width: 720px) {
  .app-shell {
    min-height: 780px;
    max-height: 900px;
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 20px 0 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink-900);
  flex-shrink: 0;
}
.topbar__back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--brand-400);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s var(--ease-smooth), transform .15s var(--ease-spring), border-color .15s ease;
}
.topbar__back:hover { background: var(--brand-50); border-color: var(--brand-300); }
.topbar__back:active { transform: scale(0.88); }

/* Sağa hizalı "Geri Dön" metin butonu - okla değil yazıyla geri dönüş */
.topbar__back-text {
  display: flex; align-items: center; gap: 6px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--brand-500);
  font-weight: 700; font-size: 13.5px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s var(--ease-smooth), transform .15s var(--ease-spring), border-color .15s ease;
}
.topbar__back-text:hover { background: var(--brand-50); border-color: var(--brand-300); }
.topbar__back-text:active { transform: scale(0.96); }
.topbar__back-text svg { flex-shrink: 0; }

.topbar__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: var(--ink-900);
}
.topbar__logo {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--brand-500);
  white-space: nowrap; flex: 1;
}
.topbar__logo .dot { color: var(--copper-500); font-family: var(--font-body); }
.topbar__action {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1px solid var(--border); color: var(--brand-400); cursor: pointer;
  transition: background .15s ease, transform .15s var(--ease-spring);
}
.topbar__action:hover { background: var(--brand-50); }
.topbar__action:active { transform: scale(0.88); }

/* Üst barda sağa hizalı çıkış yap eylemi (dashboard sayfaları) - yalnızca ikon */
.topbar__logout {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--danger-bg);
  border: 1px solid rgba(229, 72, 77, 0.3);
  color: var(--danger);
  font-size: 18px;
  flex-shrink: 0; cursor: pointer;
  transition: background .15s ease, transform .15s var(--ease-spring);
}
.topbar__logout svg { display: block; }
.topbar__logout:hover { background: rgba(229, 72, 77, 0.28); }
.topbar__logout:active { transform: scale(0.9); }

.page-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  padding: 18px 16px calc(28px + var(--safe-bottom)) 16px;
  animation: page-in .32s var(--ease-smooth) both;
}
.page-content.no-pad { padding: 0 0 calc(24px + var(--safe-bottom)) 0; }

.page-content--fixed {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 16px calc(12px + var(--safe-bottom)) 16px;
  animation: page-in .32s var(--ease-smooth) both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dashboard kartlarının sayfa açılışında art arda, düzenli bir sırayla
   belirmesi için tek seferlik "reveal" hareketi (HS.staggerIn ile tetiklenir). */
.stagger-in {
  animation: stagger-up .5s var(--ease-smooth) both;
  animation-delay: calc(var(--stagger-i, 0) * 55ms);
}
@keyframes stagger-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .stagger-in { animation: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Shell v2 — panel iskeleti (mobilde alt sekme çubuğu, masaüstünde sabit  */
/* sol menü). Oturum açılmış rol sayfaları (iş arayan/işveren/yönetici)   */
/* için kullanılır; giriş/kayıt ekranları eski .app-shell/.auth-app-shell */
/* kart düzenini korur.                                                   */
/* ---------------------------------------------------------------------- */
.shell-v2 {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--bg);
}
.shell-v2__sidebar { display: none; }
.shell-v2__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.shell-v2__topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 20px 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.shell-v2__topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.shell-v2__topbar-title {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Mobil üst bardaki çıkış eylemi masaüstündeki sol menüde zaten etiketli
   şekilde var; burada sessiz/nötr bir simge olarak kalır, alarm rengiyle
   dikkat çekmez. */
.shell-v2__topbar .topbar__logout {
  width: 38px; height: 38px;
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--ink-500);
}
.shell-v2__topbar .topbar__logout:hover { background: var(--danger-bg); color: var(--danger); }

/* Üst bardaki profil fotoğrafı butonu + tıklanınca açılan hesap menüsü */
.topbar__avatar {
  width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  flex-shrink: 0; overflow: hidden; background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s var(--ease-spring), box-shadow .15s ease;
  box-shadow: 0 0 0 2px var(--border);
}
.topbar__avatar:active { transform: scale(0.9); }
.topbar__avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--copper-500); }
.topbar__avatar .avatar, .topbar__avatar img {
  width: 100% !important; height: 100% !important; border-radius: 0 !important; border: none !important;
}
/* Üst bardaki bildirim zili + okunmamış sayısı rozeti */
.topbar__notif-btn {
  position: relative; width: 38px; height: 38px; flex-shrink: 0; padding: 0;
  border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-alt);
  color: var(--ink-700); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s var(--ease-spring);
}
.topbar__notif-btn:hover { background: var(--border); }
.topbar__notif-btn:active { transform: scale(0.9); }
.topbar__notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-full); background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.topbar__notif-badge.hidden { display: none; }

.account-menu-backdrop { position: fixed; inset: 0; z-index: 1500; background: transparent; }
.account-menu-backdrop.hidden { display: none; }
.account-menu {
  position: fixed; z-index: 1600; width: 252px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: menu-in .16s var(--ease-spring) both;
}
.account-menu.hidden { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.account-menu__head { display: flex; align-items: center; gap: 11px; padding: 14px; border-bottom: 1px solid var(--border); }
.account-menu__head .avatar { width: 42px; height: 42px; font-size: 15px; flex-shrink: 0; }
.account-menu__meta { min-width: 0; }
.account-menu__name { font-weight: 800; font-size: 14px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu__list { display: flex; flex-direction: column; padding: 6px; }
.account-menu__item {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--radius-md);
  color: var(--ink-700); font-weight: 600; font-size: 13.5px; transition: background .15s ease, color .15s ease;
}
.account-menu__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-menu__item span:first-of-type { flex: 1; }
.account-menu__item:hover { background: var(--surface-alt); }
.account-menu__item.active { background: var(--copper-100); color: var(--copper-700); }
.account-menu__logout {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: none; border-top: 1px solid var(--border);
  background: none; color: var(--danger); font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: left;
  transition: background .15s ease;
}
.account-menu__logout svg { flex-shrink: 0; }
.account-menu__logout:hover { background: var(--danger-bg); }

/* Üst bardaki profil fotoğrafını ilk kez gören kullanıcıya, tıklanınca bir
   hesap menüsü açtığını fark ettiren, yalnızca bir kez (rol başına, bu
   tarayıcıda) görünen küçük balon ipucu - bkz. app-nav.js maybeShowAvatarHint(). */
.avatar-hint {
  position: fixed; z-index: 1650; max-width: 230px;
  background: var(--brand-600); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  padding: 11px 30px 11px 13px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  animation: menu-in .2s var(--ease-spring) both;
}
.avatar-hint::after {
  content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px;
  background: var(--brand-600); transform: rotate(45deg); z-index: -1;
}
.avatar-hint__close {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; background: transparent;
  color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.avatar-hint__close:hover { color: #fff; }
.avatar-hint--out { opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }

.shell-v2__content {
  flex: 1;
  padding: 20px 18px calc(var(--bottom-nav-h) + var(--safe-bottom) + 26px);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  animation: page-in .32s var(--ease-smooth) both;
}
.shell-v2__content.narrow { max-width: 560px; }

/* Harita gibi tam ekran/dolu (bleed) sayfalar için: sayfa kaydırmaz, içerik
   üst bar ile alt sekme çubuğu (veya masaüstünde sol menü) arasını tam doldurur. */
.shell-v2__main--fixed { height: 100vh; height: 100dvh; overflow: hidden; }
@media (max-width: 959px) {
  .shell-v2__main--fixed .map-legend { padding-bottom: calc(10px + var(--bottom-nav-h) + var(--safe-bottom)); }
}

/* Alt sekme çubuğu (mobil, <960px) */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 7px 6px calc(7px + var(--safe-bottom));
  max-width: 720px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 100%;
  transition: transform .25s ease;
}
/* Aşağı kaydırırken gizlenir, yukarı kaydırırken geri gelir (app-nav.js tarafından tetiklenir). */
.bottom-nav--hidden { transform: translateX(-50%) translateY(130%); }
.bottom-nav__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px;
  border-radius: var(--radius-md);
  color: var(--ink-300);
  transition: color .15s ease, transform .15s var(--ease-spring);
  cursor: pointer;
}
.bottom-nav__item svg { width: 21px; height: 21px; }
.bottom-nav__item span { font-size: 10.5px; font-weight: 700; letter-spacing: .1px; }
.bottom-nav__item.active { color: var(--copper-600); }
.bottom-nav__item:active { transform: scale(0.92); }

/* Sol menü (masaüstü, >=960px) */
.sidebar-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 24px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 19px;
  color: var(--brand-600);
}
.sidebar-brand .dot { color: var(--copper-500); font-family: var(--font-body); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-md);
  color: var(--ink-700); font-weight: 600; font-size: 14px;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}
.sidebar-nav__item svg { width: 19px; height: 19px; flex-shrink: 0; }
.sidebar-nav__item:hover { background: var(--surface-alt); }
.sidebar-nav__item.active { background: var(--copper-100); color: var(--copper-700); }
.sidebar-foot { padding-top: 14px; margin-top: auto; border-top: 1px solid var(--border); }
.sidebar-logout {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-md);
  color: var(--danger); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s ease;
  width: 100%; background: none; border: none; text-align: left; margin-top: 10px;
}
.sidebar-logout:hover { background: var(--danger-bg); }
.sidebar-logout svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (min-width: 960px) {
  .shell-v2__sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--surface-raised);
    border-right: 1px solid var(--border);
    padding: 22px 16px;
  }
  .bottom-nav { display: none; }
  /* Masaüstünde sol menü zaten TÜM sayfaları listeliyor; üst bardaki avatar
     tetiklemeli hesap menüsü (mobilde "diğer sayfalar + çıkış" için) burada
     aynı sayfaların tekrarı anlamına geliyordu - masaüstünde tamamen kapalı. */
  .topbar__avatar { display: none; }
  .account-menu, .account-menu-backdrop { display: none !important; }
  .shell-v2__content,
  .shell-v2__content.narrow {
    max-width: 900px;
    padding: 36px 44px 56px;
  }
  .shell-v2__topbar {
    padding-left: 44px; padding-right: 44px;
    height: var(--topbar-h);
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    position: static;
  }
  .shell-v2__topbar-actions.mobile-only { display: none; }

  .shell-v2__content .dash-grid { grid-template-columns: repeat(3, 1fr); }
  .shell-v2__content .dash-grid .wide { grid-column: auto; }
}

/* ---------------------------------------------------------------------- */
/* Marka / Auth ekranları                                                  */
/* ---------------------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: calc(28px + var(--safe-top)) 22px calc(28px + var(--safe-bottom)) 22px;
  animation: page-in .35s var(--ease-smooth) both;
}
.brand-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; margin-bottom: 26px;
}
.brand-hero__mark {
  width: 76px; height: 76px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--logo-navy-a), var(--logo-navy-b));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  color: #fff; font-family: var(--font-display); font-size: 28px; font-weight: 600;
  animation: mark-pop .5s var(--ease-spring) both;
}
@keyframes mark-pop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.brand-hero__title { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--brand-500); letter-spacing: -.2px; }
.brand-hero__subtitle { font-size: 14px; color: var(--ink-500); max-width: 320px; line-height: 1.5; }

/* Marka simgesi topbar'a taşındığında (giriş sayfaları) daha az yer kaplayan kompakt başlık */
.brand-hero--compact { margin-bottom: 18px; gap: 6px; }
.brand-hero--compact .brand-hero__title { font-size: 20px; }

.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 20px;
}
/* Giriş/kayıt formlarındaki input alanlarının ince çerçevesini kaldırıyoruz -
   zemin rengiyle (surface-alt) ayrışması yeterli, ayrı bir çerçeveye gerek yok. */
.auth-card .input { border-color: var(--border); }
.auth-card .input:focus { border-color: var(--copper-500); }
/* Şifremi Unuttum / Kayıt Ol bağlantıları - net görsel hiyerarşi ile */
.auth-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.auth-btn-row .btn { width: 100%; text-align: center; }

.auth-links { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; text-align: center; }
.auth-links a { transition: color .15s ease, background .15s ease; }
.auth-links__forgot { color: var(--ink-500); font-weight: 600; font-size: 13.5px; }
.auth-links__forgot:hover { color: var(--brand-500); }
.auth-links__register {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px; border-radius: var(--radius-md); background: var(--brand-50);
  font-size: 13.5px; color: var(--ink-700); font-weight: 600;
}
.auth-links__register strong { color: var(--brand-600); font-weight: 800; }
.auth-links__register:hover { background: var(--brand-100); }

/* Giriş/kayıt sayfaları - tam sayfa yükseklik, marka logosu üst barda.
   NOT: önceden "justify-content: center" kullanılıyordu - içerik (özellikle
   çok alanlı kayıt formları) mobilde viewport'tan uzun olduğunda, flex'in
   ortalama davranışı yüzünden sayfa ilk açıldığında formun EN BAŞI değil
   ORTASI görünüyordu ve kısa ekranlarda form aşağıda/görünmez kalıyordu.
   Üstten hizalamaya (flex-start) geçilerek içerik her zaman en baştan
   (topbar'ın hemen altından) başlıyor ve normal şekilde aşağı kaydırılabiliyor. */
.auth-app-shell .page-content--fixed { justify-content: flex-start; overflow-y: auto; overscroll-behavior: none; }
.role-pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.role-pick a {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-weight: 700; color: var(--ink-900); box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-spring), border-color .15s ease, box-shadow .2s ease;
}
.role-pick a:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.role-pick a:active { transform: scale(0.97); }
.role-pick .role-icon {
  font-size: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-50);
  display: flex; align-items: center; justify-content: center;
}
.role-pick small { color: var(--ink-500); font-weight: 500; font-size: 12px; }

/* ---------------------------------------------------------------------- */
/* Form elemanları                                                        */
/* ---------------------------------------------------------------------- */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
/* Bir form, sayfanın kendisinin ana içeriğiyse (liste içindeki bir kart değil)
   etrafında ayrı bir çerçeve/gölge olması gereksiz görsel gürültü yaratıyor -
   bu yüzden .card ile birlikte kullanılan form-stack'lerin çerçevesini/gölgesini
   kaldırıp sayfanın geri kalanıyla aynı zeminde akmasını sağlıyoruz. */
.form-stack.card { border: none; box-shadow: none; background: transparent; padding: 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Temizlenebilir arama kutusu: input'un sağında, bir şey yazılınca beliren ve
   tek tıkla temizleyen küçük bir "×" butonu (admin arama/filtre alanları). */
.search-field { position: relative; }
.search-field .input { padding-right: 34px; }
.search-field__clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--surface-alt); color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.search-field__clear:hover { color: var(--ink-900); }
.search-field__clear.hidden { display: none; }

.admin-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.admin-filter-row .search-field { flex: 2 1 200px; }
.admin-filter-row .field { flex: 1 1 130px; margin-bottom: 0; }
.field label {
  font-size: 12.5px; font-weight: 700; color: var(--ink-700); letter-spacing: .1px;
}
.field .hint { font-size: 11.5px; color: var(--ink-300); }
.field .error-text { font-size: 12px; color: var(--danger); font-weight: 600; }

.input, select.input, textarea.input {
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--ink-900);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
textarea.input { resize: vertical; min-height: 84px; line-height: 1.4; }
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--copper-500); background: var(--surface);
}
.input.invalid { border-color: var(--danger); }

/* Tarayıcı (Chrome/Edge) tarih ve saat alanlarında, henüz bir değer
   seçilmeden önce placeholder segmentleri (gün/ay/yıl, saat/dakika) daha
   ince/soluk bir renkle çiziliyor; değer seçildikten sonra ana metin
   rengine döndüğü için "seçilmeden önce ince, seçtikten sonra kalın"
   görünümü oluşuyor. Tüm alt parçaları standart, sabit bir renk/ağırlıkla
   sabitleyerek bu tutarsızlığı gideriyoruz. */
input[type="date"], input[type="time"] { color: var(--ink-900); }
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  color: var(--ink-900) !important;
  -webkit-text-fill-color: var(--ink-900) !important;
  font-weight: inherit;
  opacity: 1 !important;
}
.input:disabled, select.input:disabled, textarea.input:disabled {
  background: var(--surface-alt); color: var(--ink-500); cursor: not-allowed; opacity: .85;
}

select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* iki sütunlu seçilebilir alan grid'i - mobil ve masaüstünde aynı (2'li) */
.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-grid-2 .field { min-width: 0; }
.field-grid-2 select.input { padding-left: 10px; padding-right: 28px; font-size: 13.5px; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
  transition: all .18s var(--ease-spring);
  user-select: none;
  display: inline-block;
}
.chip span:hover { border-color: var(--brand-300); }
.chip input:checked + span {
  background: linear-gradient(135deg, var(--copper-500), var(--copper-600)); border-color: var(--copper-500); color: #fff;
  box-shadow: var(--shadow-sm); transform: scale(1.03);
}
.chip input:focus-visible + span { outline: 2px solid var(--copper-500); outline-offset: 2px; }

/* Yatay kaydırılabilir chip satırı (ehliyet / SRC gibi taşan listeler için) */
.chip-row {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.chip-row .chip { scroll-snap-align: start; flex: 0 0 auto; }
.chip-row::-webkit-scrollbar { height: 5px; }
.chip-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.toggle-row span.label { font-size: 13.5px; font-weight: 600; color: var(--ink-700); }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .track {
  position: absolute; inset: 0; background: var(--ink-100); border-radius: var(--radius-full);
  transition: background .2s ease;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-spring);
}
.switch input:checked ~ .track { background: var(--copper-500); }
.switch input:checked ~ .thumb { transform: translateX(18px); }

fieldset.field { border: none; padding: 0; margin: 0; }
legend { padding: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-700); margin-bottom: 6px; }

/* ---------------------------------------------------------------------- */
/* Butonlar                                                                */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-md);
  padding: 14px 20px;
  font-weight: 700; font-size: 14.5px;
  cursor: pointer;
  transition: transform .15s var(--ease-spring), box-shadow .15s ease, background .15s ease, opacity .15s ease;
  width: 100%;
  position: relative;
}
.btn:hover { box-shadow: var(--shadow-md); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, var(--copper-500), var(--copper-600)); color: #fff; box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--brand-50); color: var(--brand-600); }
.btn-outline { background: transparent; color: var(--brand-500); border: 1.5px solid var(--brand-300); }
.btn-outline:hover { background: var(--brand-50); }
.btn-ghost { background: transparent; color: var(--ink-500); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-outline { background: var(--danger-bg); color: var(--danger); }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 9px 14px; font-size: 13px; width: auto; border-radius: var(--radius-sm); }
.btn-block-row { display: flex; gap: 10px; }
.btn-block-row .btn { flex: 1; }
.btn-icon { width: 42px; flex: none; padding: 0; }

/* ---------------------------------------------------------------------- */
/* Kartlar / Liste bileşenleri                                             */
/* ---------------------------------------------------------------------- */
.card {
  background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); padding: 18px; position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card + .card { margin-top: 12px; }

/* "Acil" ilan rozeti - başlık metniyle karışmasın diye kartın sol üst köşesine
   iliştirilmiş bir köşe rozeti (ribbon) olarak gösterilir; kartın üst kenarından
   hafifçe taşar, böylece başlıkla asla çakışmaz. */
.urgent-badge-corner {
  position: absolute; top: -9px; left: 14px; z-index: 2;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 3px 10px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 3px; letter-spacing: .2px; white-space: nowrap;
}
.section-title {
  font-size: 12.5px; font-weight: 800; color: var(--ink-900); text-transform: uppercase; letter-spacing: .5px;
  margin: 30px 2px 12px; border-left: 3px solid var(--copper-500); padding-left: 9px;
}
.section-title:first-child { margin-top: 0; }

/* Başlık + sağında küçük "Ekle" ikon butonu (özgeçmiş bölümleri gibi listeler için) */
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 30px 0 12px; }
.section-title-row:first-child { margin-top: 0; }
.section-title-row .section-title { margin: 0; }
.section-add-btn {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-full); border: none;
  background: var(--copper-500); color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .15s var(--ease-spring), background .15s ease;
}
.section-add-btn:hover { background: var(--copper-600); }
.section-add-btn:active { transform: scale(0.88); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 16px; text-align: center; color: var(--ink-500); }
.empty-state .emoji { font-size: 42px; }
.empty-state h3 { font-size: 15px; color: var(--ink-700); }
.empty-state p { font-size: 13px; }

/* ---------------------------------------------------------------------- */
/* Profil önizleme (dashboard üst alan)                                    */
/* ---------------------------------------------------------------------- */
.avatar {
  border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--copper-500), var(--copper-300));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
  flex-shrink: 0;
}
.verified-badge { color: #3897F0; flex-shrink: 0; vertical-align: middle; }
.company-name-row { display: inline-flex; align-items: center; gap: 5px; }
.employer-head-card {
  display: flex; align-items: center; gap: 14px; padding: 4px 0 18px;
}
.employer-head-card__photo { flex-shrink: 0; }
.employer-head-card__body { min-width: 0; flex: 1; }
.employer-head-card__name {
  display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 18px; color: var(--ink-900);
  line-height: 1.25; overflow-wrap: anywhere;
}
.employer-head-card__followers { color: var(--ink-500); font-size: 13px; margin-top: 4px; }
.employer-head-card__followers b { color: var(--ink-900); font-weight: 800; }
.employer-head-card__follow-btn { flex-shrink: 0; white-space: nowrap; }
.profile-preview {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--surface), var(--brand-50));
  border-radius: var(--radius-lg);
  padding: 18px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left; width: 100%;
  transition: transform .15s var(--ease-spring), box-shadow .2s ease;
}
.profile-preview:hover { box-shadow: var(--shadow-md); }
.profile-preview:active { transform: scale(0.99); }
.profile-preview .avatar { width: 58px; height: 58px; font-size: 20px; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.profile-preview__meta { flex: 1; min-width: 0; }
.profile-preview__name { font-size: 16px; font-weight: 800; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-preview__no { font-size: 12px; color: var(--ink-300); margin-top: 2px; }
.profile-preview__chev { color: var(--brand-400); font-size: 20px; }
.pending-badge {
  display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:11px; font-weight:700;
  color: var(--warning); background: var(--warning-bg); padding: 3px 9px; border-radius: var(--radius-full);
}


/* Panel kartları (iş arayan / iş veren dashboard) - liste yerine modern kart ızgarası */
.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: none;
  align-content: start;
}
.dash-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 15px; box-shadow: var(--shadow-sm); cursor: pointer; position: relative;
  transition: transform .15s var(--ease-spring), box-shadow .2s ease, border-color .15s ease;
}
.dash-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-card:active { transform: scale(0.97); background: var(--brand-50); }
.dash-card__icon {
  width: 44px; height: 44px; border-radius: 14px; background: var(--brand-50); color: var(--brand-400);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
  transition: transform .2s var(--ease-spring);
}
.dash-card:hover .dash-card__icon { transform: scale(1.08) rotate(-4deg); }
.dash-card__label { font-weight: 700; font-size: 14px; color: var(--ink-900); line-height: 1.3; }
.dash-card__badge {
  position: absolute; top: 12px; right: 12px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dash-card.danger { background: var(--danger-bg); border-color: rgba(192, 57, 43, 0.22); }
.dash-card.danger .dash-card__icon { background: rgba(255,255,255,0.6); color: var(--danger); }
.dash-card.danger .dash-card__label { color: var(--danger); }
.dash-card.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }

.dash-section-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-300); margin: 22px 2px 10px;
}
.dash-section-title:first-child { margin-top: 0; }

/* İş arayan panelinde özgeçmiş doldurma/tamamlanma durumunu gösteren, tıklanınca
   özgeçmiş sayfasına götüren bilgi kartı. Durumuna göre (dolu/eksik) renk ve ikon
   değişir - eksikse dikkat çekici (uyarı), doluysa sakin (başarı) tonda gösterilir. */
.resume-status-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .15s var(--ease-spring), box-shadow .2s ease, border-color .15s ease;
}
.resume-status-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.resume-status-card:active { transform: scale(0.99); }
.resume-status-card__icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-500);
}
.resume-status-card.is-complete .resume-status-card__icon { background: var(--success-bg); color: var(--success); }
.resume-status-card.is-incomplete .resume-status-card__icon { background: var(--warning-bg); color: var(--warning); }
.resume-status-card__body { flex: 1; min-width: 0; }
.resume-status-card__title { font-weight: 800; font-size: 15px; color: var(--ink-900); }
.resume-status-card__sub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.resume-status-card__chev { color: var(--brand-400); font-size: 22px; flex-shrink: 0; }

.stat-cards {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.stat-card {
  flex: 1 1 170px; max-width: 240px; min-width: 150px; min-height: 90px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 13px;
  transition: box-shadow .2s ease, transform .15s var(--ease-spring), border-color .15s ease;
}
.stat-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card[data-href] { cursor: pointer; }
.stat-card[data-href]:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
@media (max-width: 460px) {
  .stat-card { flex-basis: calc(50% - 6px); max-width: none; min-height: 84px; padding: 14px; gap: 11px; }
}
@media (min-width: 720px) {
  .stat-card { flex-basis: 200px; max-width: 260px; }
}
.stat-card__icon {
  width: 44px; height: 44px; border-radius: 13px; background: var(--brand-50); color: var(--brand-400);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px;
}
.stat-card__meta { min-width: 0; }
.stat-card__value { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--ink-900); line-height: 1.15; }
.stat-card__label { font-size: 11px; color: var(--ink-300); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-top: 4px; line-height: 1.3; }

/* İstatistik kartlarında ikonun etrafında animasyonlu, diğer kartlara göre
   oransal dolan bir ilerleme halkası (basit, kütüphanesiz SVG "grafik"). */
.stat-ring { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.stat-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.stat-ring__svg circle { fill: none; stroke-width: 3; }
.stat-ring__track { stroke: var(--surface-alt); }
.stat-ring__fill {
  stroke: var(--copper-500); stroke-linecap: round;
  stroke-dasharray: 100.53; stroke-dashoffset: 100.53;
  transition: stroke-dashoffset 1.1s var(--ease-smooth);
}
.stat-ring .stat-card__icon {
  position: absolute; inset: 0; width: auto; height: auto; border-radius: 0;
  background: none; color: var(--ink-700);
}

/* ---------------------------------------------------------------------- */
/* Analitik grafik kartları (görüntülenme demografisi, ziyaretçi istatistikleri) */
/* ---------------------------------------------------------------------- */
.chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 16px; box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.chart-card__title { font-weight: 800; font-size: 14px; color: var(--ink-900); margin-bottom: 3px; }
.chart-card__sub { font-size: 12px; color: var(--ink-500); margin-bottom: 14px; }
.chart-card__empty { color: var(--ink-500); font-size: 13px; text-align: center; padding: 18px 0; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { position: relative; width: 128px; height: 128px; flex-shrink: 0; border-radius: 50%; }
.donut__svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.donut__svg circle { fill: none; stroke-width: 14; }
.donut__track { stroke: var(--surface-alt); }
.donut__seg { transition: stroke-dashoffset 1s var(--ease-smooth); }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut__center-value { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink-900); line-height: 1; }
.donut__center-label { font-size: 10px; color: var(--ink-300); font-weight: 700; text-transform: uppercase; margin-top: 3px; }
.legend { display: flex; flex-direction: column; gap: 8px; min-width: 140px; flex: 1; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-700); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-item b { color: var(--ink-900); margin-left: auto; }

.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row__head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.bar-row__head .lbl { color: var(--ink-700); font-weight: 600; }
.bar-row__head .val { color: var(--ink-900); font-weight: 800; }
.bar-row__track { height: 8px; border-radius: var(--radius-full); background: var(--surface-alt); overflow: hidden; }
.bar-row__fill { height: 100%; border-radius: var(--radius-full); background: var(--copper-500); width: 0; transition: width 1s var(--ease-smooth); }

.avg-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-alt); color: var(--ink-700); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full); margin-top: 10px; }
.avg-pill b { color: var(--ink-900); }

/* ---------------------------------------------------------------------- */
/* Rozet / Durum etiketleri                                                */
/* ---------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 700; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: var(--ink-100); color: var(--ink-500); }

/* ---------------------------------------------------------------------- */
/* İlan / işletme kartları                                                 */
/* ---------------------------------------------------------------------- */
.job-card { display: flex; gap: 12px; align-items: flex-start; transition: transform .15s var(--ease-spring); }
/* Kısa (1-2 satırlık) içerikli kartlarda (admin işletme/müşteri listeleri gibi)
   fotoğrafla metni dikey ortalamak için - uzun/çok satırlı .job-card kullanımlarını
   (ilan/başvuru listeleri vb.) etkilemeden yalnızca bu sınıfla işaretli kartlarda. */
.job-card--center { align-items: center; }
.job-card.openJob:hover, .job-card.openApplicant:hover, .job-card.openBranch:hover, .job-card.openItem:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.job-card__info { flex: 1; min-width: 0; }
.job-card__title { font-size: 15px; font-weight: 800; color: var(--ink-900); }
.job-card__sub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.job-card__deadline { font-size: 11.5px; color: var(--ink-300); margin-top: 6px; }
.list-actions { display: flex; gap: 8px; margin-top: 10px; }

/* İlan detayında işletme tanıtım satırı (tıklanınca "İşletmeyi Görüntüle" ipucu çıkar) */
.job-employer-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 13px 14px; margin-bottom: 10px; cursor: pointer; position: relative;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .15s var(--ease-spring);
}
.job-employer-row:hover { box-shadow: var(--shadow-md); }
.job-employer-row:active { transform: scale(0.99); }
.job-employer-row .avatar { width: 46px; height: 46px; font-size: 17px; }
.job-employer-row__meta { flex: 1; min-width: 0; }
.job-employer-row__name { font-weight: 800; font-size: 14.5px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-employer-row__sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-employer-row__chev { color: var(--brand-400); font-size: 19px; flex-shrink: 0; }

/* İşletme satırının altında, normal akışta yer açan kısa ipucu (üst-alt kartlarla
   çakışmaması için mutlak konumlandırma yerine yükseklik animasyonu kullanılır) */
.job-employer-hint {
  display: block; text-align: center; font-size: 12px; font-weight: 700; color: var(--brand-600);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
  max-height: 0; opacity: 0; overflow: hidden; padding: 0 12px;
  transition: max-height .25s var(--ease-smooth), opacity .2s ease, margin .25s var(--ease-smooth), padding .25s var(--ease-smooth);
}
.job-employer-hint.show { max-height: 40px; opacity: 1; margin-bottom: 10px; padding: 9px 12px; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.detail-item { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.detail-item .k { font-size: 11px; color: var(--ink-300); font-weight: 700; text-transform: uppercase; }
.detail-item .v { font-size: 13.5px; color: var(--ink-900); font-weight: 700; margin-top: 3px; }

/* ---------------------------------------------------------------------- */
/* Modal / Onay kutusu                                                     */
/* ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 14, 22, 0.5);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  /* Leaflet'in kendi kontrol katmanları (.leaflet-top/.leaflet-bottom) z-index:1000
     kullanıyor - harita sayfalarında (ör. çıkış yap onayı) bu popup'ın haritanın
     ALTINDA kalmaması ve düzgün boyanması için hesap menüsüyle aynı üst katmana alındı. */
  z-index: 1700;
  padding: 0; animation: fade-in .18s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
  background: var(--surface); width: 100%; max-width: 480px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px calc(22px + var(--safe-bottom)) 20px;
  box-shadow: var(--shadow-lg);
  animation: sheet-up .28s var(--ease-spring) both;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-sheet h3 { font-size: 17.5px; font-weight: 800; margin-bottom: 8px; }
.modal-sheet p { font-size: 13.5px; color: var(--ink-500); margin-bottom: 18px; }
.modal-sheet--confirm { text-align: center; padding-top: 28px; }
.modal-sheet--confirm h3, .modal-sheet--confirm p { text-align: center; }
.modal-sheet__icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-500);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.modal-sheet__icon.danger { background: var(--danger-bg); color: var(--danger); }

/* Masaüstünde (>=960px) onay/modern popup pencereleri mobildeki gibi alttan
   değil, sayfanın ortasında bir modal olarak açılır. */
@media (min-width: 960px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal-sheet {
    border-radius: var(--radius-lg);
    animation: modal-pop .22s var(--ease-spring) both;
  }
  @keyframes modal-pop { from { transform: scale(.94) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
}

/* Bildirim popup'ı - onay kutusuyla (.modal-sheet--confirm) aynı alt sayfa/
   modal iskeletini (.modal-overlay/.modal-sheet) kullanır ama kısa metin
   yerine kaydırılabilir bir liste barındırdığı için kendi boy/iç düzenine
   sahiptir. */
.modal-sheet--notifications {
  max-height: 82vh; display: flex; flex-direction: column; padding-top: 20px;
}
.notif-popup__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; }
.notif-popup__head h3 { margin-bottom: 0; }
.notif-popup__list {
  flex: 1; min-height: 60px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; margin: 0 -2px; padding: 2px;
}
.notif-popup__footer { flex-shrink: 0; margin-top: 14px; }
@media (min-width: 960px) {
  .modal-sheet--notifications { max-width: 430px; max-height: min(640px, 82vh); }
}

/* Ana sayfadaki canlı haritada, giriş yapmamış ziyaretçinin bir ilana
   tıklayınca gördüğü ilan önizleme popup'ı - bildirim popup'ıyla aynı
   kaydırılabilir gövde + sabit alt eylem alanı iskeletini kullanır.
   DÜZELTME (kullanıcı geri bildirimi): önceki sürümde bu popup'ı kapatmanın
   TEK yolu, sayfanın kararmış (dimmed) arka planına dokunmaktı - görünür bir
   kapatma (✕) düğmesi yoktu, bu yüzden kullanıcılar popup'ı "kapatamıyoruz"
   diye bildirdi. Artık sağ üstte her zaman görünen, belirgin bir yuvarlak ✕
   düğmesi var (bkz. .modal-sheet__close) ve popup'ın yüksekliği ekranın
   tamamına değil, en fazla %78'ine kadar açılıyor - böylece üstte her zaman
   dokunulabilir, kararmış bir şerit kalıyor ve popup "tüm ekranı kaplıyor"
   hissi vermiyor. */
.modal-sheet--job-preview { position: relative; max-height: 78vh; display: flex; flex-direction: column; padding-top: 50px; }
.modal-sheet__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-alt); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background .15s var(--ease-smooth), transform .15s var(--ease-spring), border-color .15s ease;
}
.modal-sheet__close:hover { background: var(--brand-50); border-color: var(--brand-300); }
.modal-sheet__close:active { transform: scale(0.88); }
.job-preview__body { flex: 1; min-height: 60px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 -2px; padding: 2px; }
.job-preview__footer { flex-shrink: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.job-preview__footer p { margin-bottom: 10px; }
.job-preview__login-row { display: flex; gap: 10px; }
.job-preview__login-row .btn { flex: 1; width: auto; }
@media (min-width: 960px) {
  .modal-sheet--job-preview { max-width: 460px; max-height: min(680px, 82vh); }
}

/* Ana sayfada üst bardaki "Giriş Yap" düğmesine tıklayınca açılan hesap türü
   seçim popup'ı ("İş Arıyorum" / "İşletme Sahibiyim") - alttan açılan aynı
   modal iskeletini kullanır, içeriği yalnızca iki büyük seçim kartından oluşur. */
.role-pick-list { display: flex; flex-direction: column; gap: 12px; }
.role-pick-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border-radius: var(--radius-md); border: 1.5px solid var(--border);
  background: var(--surface); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s var(--ease-spring);
}
.role-pick-card:hover, .role-pick-card:active { border-color: var(--brand-400); background: var(--brand-50); transform: translateY(-1px); }
.role-pick-card__icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--brand-50); color: var(--brand-500);
}
.role-pick-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-pick-card__title { font-size: 15px; font-weight: 800; color: var(--ink-900); }
.role-pick-card__sub { font-size: 12px; color: var(--ink-500); }

/* Bildirim satırı - hem zil popup'ında hem de tam bildirimler sayfasında
   (public/js/pages/notifications.js) ortak kullanılır. Sola kaydırınca
   (bkz. HS.attachSwipeToDelete) altındaki kırmızı "Sil" katmanı açığa çıkar. */
.notif-item { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px; }
.notif-item:last-child { margin-bottom: 0; }
.notif-item__bg {
  position: absolute; inset: 0; background: var(--danger); color: #fff;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 22px;
  font-weight: 700; font-size: 13px;
}
.notif-item__fg {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-300);
  border-radius: var(--radius-md); padding: 12px 13px; cursor: pointer; touch-action: pan-y;
}
.notif-item__fg--info { border-left-color: var(--info); }
.notif-item__fg--success { border-left-color: var(--success); }
.notif-item__fg--warning { border-left-color: var(--warning); }
.notif-item__fg--danger { border-left-color: var(--danger); }
.notif-item--unread .notif-item__fg { background: var(--surface-alt); }
.notif-item__dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--copper-500); flex-shrink: 0; }
.notif-item__dot--hidden { visibility: hidden; }
.notif-item__body-wrap { flex: 1; min-width: 0; }
.notif-item__title { font-weight: 800; font-size: 13.5px; color: var(--ink-900); }
.notif-item__text {
  font-size: 12.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Tam bildirim sayfasında (popup'ın aksine) metin kısaltılmadan tam gösterilir. */
.notif-list .notif-item__text {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.notif-item__time { font-size: 11px; color: var(--ink-300); margin-top: 6px; font-weight: 700; }
.notif-item__actions { display: flex; gap: 6px; flex-shrink: 0; }
.notif-item__action-btn {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--ink-500); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.notif-item__action-btn:hover { background: var(--border); }
.notif-item__action-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Bildirimler sayfasındaki Aktif/Arşiv sekme geçişi */
.notif-tabs { display: inline-flex; gap: 4px; background: var(--surface-alt); border-radius: var(--radius-full); padding: 4px; margin-bottom: 16px; }
.notif-tab { border: none; background: none; padding: 8px 16px; border-radius: var(--radius-full); font-weight: 700; font-size: 13px; color: var(--ink-500); cursor: pointer; }
.notif-tab.active { background: var(--surface); color: var(--copper-700); box-shadow: var(--shadow-sm); }
.notif-list { display: flex; flex-direction: column; }

/* Sağdan sola açılan tam-yükseklik panel (özgeçmiş formları vb.) */
.side-panel-overlay {
  position: fixed; inset: 0; background: rgba(10, 14, 22, 0.45);
  z-index: 110; display: flex; justify-content: flex-end;
  animation: fade-in .18s ease both;
}
.side-panel {
  background: var(--surface); width: 100%; max-width: 420px; height: 100%;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: side-in .3s var(--ease-smooth) both;
}
@keyframes side-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.side-panel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(14px + var(--safe-top)) 16px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.side-panel__title { font-size: 16px; font-weight: 800; color: var(--ink-900); }
.side-panel__close {
  width: 34px; height: 34px; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--ink-700); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.side-panel__body { flex: 1; overflow-y: auto; padding: 18px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.side-panel__footer {
  display: flex; gap: 10px; padding: 14px 16px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}

/* Kapalı liste satırı + Ekle butonu (özgeçmiş bölümleri) */
.collapsed-list { display: flex; flex-direction: column; gap: 10px; }
.collapsed-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 13px 14px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow .2s ease, border-color .15s ease;
}
.collapsed-item:hover { border-color: var(--brand-200); box-shadow: var(--shadow-md); }
.collapsed-item__main { flex: 1; min-width: 0; }
.collapsed-item__title { font-weight: 800; font-size: 14px; color: var(--ink-900); }
.collapsed-item__sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.collapsed-item__del {
  width: 34px; height: 34px; border-radius: var(--radius-full); border: 1px solid var(--danger-bg);
  background: var(--danger-bg); color: var(--danger); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; font-size: 15px;
}
.add-entry-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--brand-300); border-radius: var(--radius-md);
  background: var(--brand-50); color: var(--brand-500); font-weight: 700; font-size: 13.5px;
  padding: 13px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.add-entry-btn:hover { background: var(--brand-100); border-color: var(--brand-400); }

/* Toast bildirimleri */
.toast-host { position: fixed; left: 0; right: 0; bottom: calc(18px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
/* Alt sekme çubuğu varsa (mobil shell-v2 sayfaları) bildirimler onun üzerinde belirir */
@media (max-width: 959px) {
  body:has(.bottom-nav) .toast-host { bottom: calc(var(--bottom-nav-h) + 40px + var(--safe-bottom)); }
}
.toast {
  background: #262626; color: #fff; padding: 12px 20px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); max-width: 88%;
  animation: toast-in .25s var(--ease-spring) both;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------------------------------------------------------------------- */
/* Yükleniyor durumları                                                    */
/* ---------------------------------------------------------------------- */
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin .7s linear infinite; }
.spinner.dark { border: 3px solid var(--border); border-top-color: var(--copper-500); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block { display: flex; align-items: center; justify-content: center; padding: 60px 0; }

/* ---------------------------------------------------------------------- */
/* Harita sayfası                                                          */
/* ---------------------------------------------------------------------- */
.map-wrap {
  position: relative; flex: 1; min-height: 0; background: var(--brand-50);
  display: flex; flex-direction: column;
}
.tr-province { fill: #E2E8F0; stroke: #FFFFFF; stroke-width: 0.6; transition: fill .15s ease; }
.tr-province.has-jobs { fill: var(--copper-300); }
.tr-province.is-me { fill: var(--accent-100); stroke: var(--accent-500); stroke-width: 1.1; }
.map-legend {
  display: flex; gap: 14px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-500); flex-wrap: wrap;
}
.map-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Gerçek harita (Leaflet + OpenStreetMap) - il/ilçe/sokak düzeyinde gerçek harita */
.leaflet-map-holder { flex: 1; min-height: 0; position: relative; background: var(--brand-50); }
.map-recenter-btn {
  position: absolute; left: 12px; bottom: 14px; z-index: 1000;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--brand-400);
  box-shadow: var(--shadow-md); cursor: pointer;
}
.map-recenter-btn:active { transform: scale(0.95); }

/* Haritayı büyütme (tam ekran) düğmesi - ana sayfadaki tanıtım haritasında,
   sağ üst köşede, yakınlaştırma kontrollerinden ve "Konumuma Dön"
   düğmesinden ayrı bir konumda. */
.map-expand-btn {
  position: absolute; right: 12px; top: 12px; z-index: 1000;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--brand-400);
  box-shadow: var(--shadow-md); cursor: pointer;
}
.map-expand-btn:active { transform: scale(0.95); }

/* Büyütülmüş (tam ekran) harita durumu - çerçeve tüm ekranı kaplayacak
   şekilde sabitlenir, Leaflet iç boyutu invalidateSize() ile yeniden
   hesaplanır (bkz. landing-map.js). Modal popup'lar (z-index: 1700) her
   zaman büyütülmüş haritanın üstünde kalabilsin diye z-index daha düşük
   tutuldu. */
.landing-map-preview__frame.is-fullscreen {
  position: fixed; inset: 0; z-index: 1500;
  width: 100vw; height: 100vh; margin: 0; border-radius: 0; border: none;
}
body.map-fullscreen-lock { overflow: hidden; }

/* Harita üzerindeki profil-fotoğraflı işaretçiler (kalın nokta yerine) - her
   zaman dairesel, taşmasız ve orantılı görünmesi için sabit boyutlu bir çerçeve
   içine alınır; HS.avatarHtml zaten fotoğraf/baş-harf düşümünü tutarlı yapıyor. */
.map-marker-photo {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-sizing: border-box;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,0.35);
  background: var(--brand-100); cursor: pointer;
}
.map-marker-photo .avatar { width: 100% !important; height: 100% !important; border: none !important; border-radius: 0 !important; }
.map-marker-photo { border-color: var(--surface); }

/* "Acil" olarak işaretlenen ilanların harita pinini kırmızı, nabız animasyonlu bir
   halka ile diğer ilanlardan ayırt edilir hale getirir. */
.map-marker-photo.job-urgent {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.25), 0 2px 8px rgba(15,23,42,0.35);
  animation: map-urgent-pulse 1.8s ease-in-out infinite;
}
@keyframes map-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220,38,38,0.25), 0 2px 8px rgba(15,23,42,0.35); }
  50% { box-shadow: 0 0 0 7px rgba(220,38,38,0.12), 0 2px 8px rgba(15,23,42,0.35); }
}

/* "Konumunuz" artık büyük bir fotoğraf balonu değil, yakındaki ilan
   işaretçilerini örtmeyen küçük, nabız (pulse) animasyonlu bir nokta -
   klasik harita uygulaması "buradasınız" göstergesi. */
.map-me-marker { position: relative; width: 34px; height: 34px; pointer-events: none; }
.map-me-marker__pulse {
  position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  background: var(--success); opacity: .45; animation: map-me-pulse 2.2s ease-out infinite;
}
.map-me-marker__dot {
  position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  background: var(--success); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
@keyframes map-me-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Leaflet kontrolleri (yakınlaştır/uzaklaştır, attribution) - koyu tema */
.leaflet-control-zoom { border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; }
.leaflet-control-zoom a {
  background: var(--surface-raised) !important; color: var(--ink-700) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--surface-alt) !important; color: var(--ink-900) !important; }
.leaflet-control-zoom-in { border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; }
.leaflet-control-zoom-out { border-bottom-left-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }
.leaflet-control-attribution {
  background: rgba(20,20,20,0.72) !important; color: var(--ink-300) !important;
  font-size: 9.5px !important; padding: 1px 6px !important; opacity: .8;
}
.leaflet-control-attribution a { color: var(--ink-500) !important; }

/* İlan önizleme balonu (harita pinine tıklayınca açılan Leaflet popup) */
.leaflet-popup-content-wrapper {
  background: var(--surface-raised) !important; color: var(--ink-900) !important;
  border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-tip { background: var(--surface-raised) !important; }
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-500) !important; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--ink-900) !important; }
.leaflet-container a.btn { color: var(--brand-600) !important; }
.leaflet-container a.btn.btn-primary { color: #fff !important; }
.map-preview-card { padding: 12px 14px 14px; min-width: 200px; max-width: 240px; }
.map-preview-card__urgent { text-align: left; margin-bottom: 6px; }
.map-preview-card__title { font-weight: 800; font-size: 13.5px; line-height: 1.3; margin-bottom: 3px; }
.map-preview-card__company { font-size: 12px; color: var(--ink-500); margin-bottom: 10px; }
.map-preview-card__actions { display: flex; flex-direction: column; gap: 6px; }
.map-preview-card__actions .btn { width: 100%; padding: 8px 10px; font-size: 12.5px; }

/* Konum işaretleme modali (iş veren - ilan konumu gerçek haritadan seçme) */
.location-picker-holder {
  height: 280px; border-radius: var(--radius-lg); margin: 2px 0 4px; overflow: hidden; position: relative;
}
.location-picker-hint { font-size: 12px; color: var(--ink-500); margin: -4px 0 4px; }
.location-picker-marker {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-500);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,0.4);
}

/* Formdaki konum alanının sağ üst köşesinde duran küçük harita önizlemesi -
   tıklanınca yukarıdaki tam ekran modern harita popup'ını (aynı gerçek
   Leaflet haritası) açar. İşaretlenmiş bir konum yoksa boş/işaretsiz bir
   durum gösterir. */
.location-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.location-field-head label { margin: 0; }
.location-mini-map {
  width: 72px; height: 48px; border-radius: var(--radius-md); overflow: hidden; position: relative;
  border: 1px solid var(--border); background: var(--surface-alt); cursor: pointer; flex-shrink: 0; padding: 0;
  transition: border-color .15s ease;
}
.location-mini-map:hover { border-color: var(--copper-500); }
.location-mini-map .leaflet-container { background: var(--surface-alt); font: inherit; }
.location-mini-map__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-300); font-size: 18px;
}
.location-mini-map__expand {
  position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 4px;
  background: rgba(20,20,20,0.7); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 10px; pointer-events: none;
}

.phone-link { color: var(--copper-700); font-weight: 700; text-decoration: none; }
.phone-link:active { opacity: .7; }

/* İşletme profili - sosyal medya hesap linkleri (yönetici/iş arayan/iş veren görünümü).
   Round 24: her platform kendi marka renginde yuvarlak bir simge rozetiyle,
   dokununca hafifçe büyüyen modern bir kart olarak gösterilir (eski düz liste yerine). */
.social-links { display: flex; flex-direction: column; padding: 4px 0; gap: 2px; }
.social-link-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  text-decoration: none; color: var(--ink-900); border-radius: 12px;
  transition: background .15s ease, transform .1s ease;
}
.social-link-row:hover { background: var(--brand-50); }
.social-link-row:active { transform: scale(.98); background: var(--brand-50); }
.social-link-row__icon {
  font-size: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.social-link-row__label { flex: 1; font-weight: 700; font-size: 14.5px; }
.social-link-row__chev { color: var(--ink-400); font-size: 14px; }

/* İşletme profili düzenleme - sosyal medya hesap ekleme alanları (Round 24: masaüstünde
   2 sütun ızgara + her alanın başında platformun marka rengiyle simgesi olan modern görünüm). */
.social-field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .social-field-grid { grid-template-columns: 1fr 1fr; } }
.social-field { position: relative; }
.social-field label { display: flex; align-items: center; gap: 8px; }
.social-field__icon {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.social-field input.input { padding-left: 14px; }

.il-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.il-picker-group-label {
  font-size: 11px; font-weight: 800; color: var(--brand-500); text-transform: uppercase; letter-spacing: .6px;
  padding: 10px 4px 4px;
}
.il-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 10px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 14px;
  color: var(--ink-900); transition: background .12s ease;
}
.il-picker-item:hover { background: var(--brand-50); }
.il-picker-item.active { background: var(--brand-50); color: var(--brand-600); font-weight: 800; }
.il-picker-search {
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------- */
/* Fotoğraf yükleme                                                        */
/* ---------------------------------------------------------------------- */
.photo-upload { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.photo-upload .avatar { width: 96px; height: 96px; font-size: 30px; position: relative; overflow: hidden; border: 3px solid var(--surface); box-shadow: var(--shadow-md); }
.photo-upload__edit {
  font-size: 12.5px; font-weight: 700; color: var(--brand-400); background: var(--brand-50);
  padding: 9px 16px; border-radius: var(--radius-full); cursor: pointer; border: none;
  transition: background .15s ease, transform .15s var(--ease-spring);
}
.photo-upload__edit:hover { background: var(--brand-100); }

/* ---------------------------------------------------------------------- */
/* Şube seçici (merkez ilan formunda)                                      */
/* ---------------------------------------------------------------------- */
.branch-picker { display: flex; flex-direction: column; gap: 10px; }
.branch-picker__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.branch-picker__list { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.branch-pick-card {
  scroll-snap-align: start; flex: 0 0 auto; width: 190px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s var(--ease-spring);
}
.branch-pick-card.selected { border-color: var(--copper-500); border-width: 2px; }
.branch-pick-card__name { font-weight: 800; font-size: 13.5px; color: var(--ink-900); }
.branch-pick-card__loc { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
.branch-pick-card__no { font-size: 11px; color: var(--ink-300); margin-top: 4px; }
.branch-pick-card button { margin-top: 10px; }
.branch-selected-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--brand-50); border: 1.5px solid var(--brand-200); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--brand-600);
}

/* ---------------------------------------------------------------------- */
/* Round 24 (düzeltme): yana kaydırılabilir (yatay) kart listeleri - ana     */
/* sayfadaki "Öne Çıkan İşletmeler" ve "Güncel İlanlar" bölümleri ile iş     */
/* arayan tarafındaki işletmeler sayfası kartlarında kullanılır.            */
/* ÖNEMLİ (kullanıcı geri bildirimiyle düzeltildi): önceki sürüm, şeridi     */
/* negatif kenar boşluğuyla (-20px) tam ekran genişliğine yayıp sonra aynı   */
/* miktarda iç boşlukla telafi eden bir teknik kullanıyordu; bu bazı mobil   */
/* tarayıcılarda kartların sayfanın geri kalanıyla (başlıklar, harita        */
/* kartı vb.) hizasız/kaymış görünmesine yol açıyordu. Artık böyle bir       */
/* "bleed" tekniği YOK - şerit doğrudan üst kapsayıcının (.landing) zaten    */
/* sahip olduğu standart sayfa iç boşluğunun İÇİNDE kalıyor, bu yüzden       */
/* hizalama her zaman garantili şekilde sayfanın geri kalanıyla birebir      */
/* eşleşiyor. Yatay taşma da mümkün değil: yalnızca bu iç şerit kayar,       */
/* üst kapsayıcı zaten overflow-x:hidden taşıyor.                           */
/* ---------------------------------------------------------------------- */
.hcards-section { margin-top: 48px; }
.hcards-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.hcards-section__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink-900); }
.hcards-section__sub { font-size: 13px; color: var(--ink-500); margin-top: 6px; line-height: 1.5; }
.hcards {
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 6px 2px 20px; scrollbar-width: thin;
}
.hcards::-webkit-scrollbar { height: 6px; }
.hcards::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
.hcards__empty { padding: 24px 4px; color: var(--ink-500); font-size: 13.5px; }

.hcard-company, .hcard-job {
  scroll-snap-align: start; flex: 0 0 auto; width: 226px; max-width: 80vw;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block;
  transition: transform .15s var(--ease-spring), box-shadow .15s ease;
}
.hcard-company:hover, .hcard-job:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hcard-company__top { display: flex; align-items: center; gap: 12px; }
.hcard-company__name { font-weight: 800; font-size: 14.5px; color: var(--ink-900); line-height: 1.35; }
.hcard-company__loc { font-size: 12px; color: var(--ink-500); margin-top: 5px; }
.hcard-company__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.hcard-company__jobs { font-size: 11.5px; font-weight: 700; color: var(--copper-700); }

.hcard-job__badges { display: flex; gap: 6px; margin-bottom: 10px; min-height: 20px; }
.hcard-job__title { font-weight: 800; font-size: 14.5px; color: var(--ink-900); line-height: 1.4; }
.hcard-job__company { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.hcard-job__company-name { font-size: 12.5px; font-weight: 700; color: var(--ink-700); }
.hcard-job__loc { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.hcard-job__deadline { font-size: 11px; color: var(--ink-300); margin-top: 14px; }

/* İş arayan - "İşletmeler" gözat sayfası kartları (dikey liste) */
.company-list-card { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.company-list-card__badge { flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Yardımcı sınıflar                                                       */
/* ---------------------------------------------------------------------- */
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.gap-8 { gap: 8px; }
.row.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.muted { color: var(--ink-500); }
.small { font-size: 12.5px; }
.text-center { text-align: center; }
.divider { height: 1px; background: var(--border); margin: 16px 0; border: none; }
.sticky-bottom-bar {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + var(--safe-bottom)) 16px; display: flex; gap: 10px;
}

/* ---------------------------------------------------------------------- */
/* Tanıtım (index) sayfası                                                 */
/* ---------------------------------------------------------------------- */
.landing {
  max-width: 1080px; margin: 0 auto; padding: 0 20px calc(60px + var(--safe-bottom));
  /* NOT: burada AYRICA "overflow-x: hidden" yoktu - body zaten aynı kuralı
     taşıyor (bkz. yukarıdaki body { overflow-x: hidden }). Bu elemanın kendi
     üzerinde tekrar tanımlanması, tarayıcının overflow-y'yi zımnen "auto"ya
     çevirip bu div'i kendi iç kaydırma alanı haline getirmesine yol açıyordu
     - bu da içindeki .landing-nav'ın "position: sticky" ile sayfanın gerçek
     kaydırmasına değil, bu (asla kendi içinde kaymayan) iç alana göre
     sabitlenmeye çalışmasına, dolayısıyla üst barın kaydırınca sabit
     KALMAYIP sayfayla birlikte kaybolmasına neden oluyordu. */
}
.landing-nav {
  position: sticky;
  top: 0;
  /* NOT: Bu değer bilerek 40 değil, 1050 - çünkü .landing-map-preview__frame
     içindeki gerçek Leaflet haritası (harita karoları, işaretçiler, yakınlaştırma
     kontrolleri) kendi iç katmanlarını z-index: 200-1000 aralığında konumlandırıyor
     (bkz. leaflet.css) ve bu çerçeve kendi ayrı bir stacking context OLUŞTURMUYOR
     (yalnızca position:relative + overflow:hidden, z-index:auto - CSS'te tek
     başına yeni bir stacking context açmaz). Bu yüzden harita katmanlarının
     z-index'i, kök seviyede bu sticky üst barla doğrudan karşılaştırılıyordu;
     üst bar 40 iken harita her zaman kazanıyor ve sayfa aşağı kaydırılırken
     harita çerçevesinin üst kısmı (kontroller dahil) üst menü barının ÜSTÜNE
     biniyordu. 1050, Leaflet'in en yüksek iç katmanından (1000) yüksek, ama
     tam ekran harita (1500) ve modal popup'lardan (1700) düşük tutuldu. */
  z-index: 1050;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 0 0;
  margin: 0 -20px;
  padding-left: 20px; padding-right: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.landing-nav .topbar__logo { font-size: 19px; }
/* Dar ekranlarda (ör. 375px ve altı) logo + "Ana Sayfaya Dön" yazılı geri
   dön düğmesi + "Giriş Yap" düğmesi üst üste sığmayıp taşabiliyordu (bkz.
   kullanıcı geri bildirimiyle daha önce düzeltilen yatay taşma sorunu) -
   bu yüzden çok dar ekranlarda geri dön düğmesi yalnızca ok simgesine
   daralıyor, metin gizleniyor; erişilebilirlik için aria-label korunuyor. */
@media (max-width: 480px) {
  .landing-nav .topbar__back-text { padding: 0; width: 38px; justify-content: center; }
  .landing-nav .topbar__back-text__label { display: none; }
}
.landing-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px; padding: 40px 0 30px;
}
.landing-hero__badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--copper-100); color: var(--copper-700);
  font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--copper-300); animation: fade-up .5s var(--ease-smooth) both;
}
.landing-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 48px); font-weight: 600; letter-spacing: -.4px; line-height: 1.16;
  color: var(--ink-900); max-width: 720px;
  animation: fade-up .6s .05s var(--ease-smooth) both;
}
.landing-hero h1 span { position: relative; white-space: nowrap; }
.landing-hero p.lead {
  font-size: 16px; color: var(--ink-500); max-width: 520px; line-height: 1.6;
  animation: fade-up .6s .1s var(--ease-smooth) both;
}
/* Not: eski "İş Arayan/İşletme Olarak Başla" CTA çiftinin (.landing-hero__ctas)
   yerini artık üst bardaki "Giriş Yap" düğmesine tıklayınca açılan hesap
   türü seçim popup'ı (.role-pick-list, aşağıda) aldı. */
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Canlı harita önizleme (kayıt olmadan da görülebilen tanıtım haritası) */
.landing-map-preview {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 20px; margin: 8px 0 30px; box-shadow: var(--shadow-sm);
}
.landing-map-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.landing-map-preview__title { font-size: 16px; font-weight: 800; color: var(--ink-900); }
.landing-map-preview__sub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.landing-map-preview__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.landing-map-preview__stat {
  background: var(--brand-50); color: var(--brand-600); font-weight: 800; font-size: 12.5px;
  padding: 7px 13px; border-radius: var(--radius-full);
}
.landing-map-preview__frame {
  position: relative; height: 420px; border-radius: var(--radius-md); overflow: hidden;
  background: radial-gradient(circle at 50% 30%, var(--copper-100), var(--surface-alt));
  border: 1px solid var(--border);
}
.landing-map-preview__frame svg { width: 100%; height: 100%; display: block; }
.landing-map-preview__frame .tr-province { cursor: pointer; }
/* Gerçek canlı harita (Leaflet) - önizleme çerçevesinin tamamını kaplar. */
.landing-map-preview__frame .leaflet-container { width: 100%; height: 100%; background: var(--surface-alt); font-family: var(--font-body); }
.landing-map-preview__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.landing-map-preview__cta p { font-size: 12.5px; color: var(--ink-500); }
.landing-map-preview__cta .btn { width: auto; padding: 11px 20px; }

.landing-footer {
  margin-top: 20px; padding-top: 30px; border-top: 1px solid var(--border);
}
.landing-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; padding-bottom: 24px;
}
.landing-footer__brand .topbar__logo { font-size: 18px; margin-bottom: 8px; }
.landing-footer__brand p { font-size: 13px; color: var(--ink-500); line-height: 1.6; max-width: 320px; }
.landing-footer__social { display: flex; gap: 10px; margin-top: 14px; }
.landing-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand-50); color: var(--brand-500);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, transform .15s var(--ease-spring);
}
.landing-footer__social a:hover { background: var(--copper-500); color: #fff; transform: translateY(-2px); }
.landing-footer__col h5 { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-900); margin-bottom: 12px; }
.landing-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.landing-footer__col a { font-size: 13.5px; color: var(--ink-500); }
.landing-footer__col a:hover { color: var(--brand-500); }
.landing-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 18px 0 30px;
  font-size: 12px; color: var(--ink-300);
}
@media (max-width: 640px) {
  .landing-footer__grid { grid-template-columns: 1fr 1fr; }
  .landing-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .landing-map-preview__frame { height: 320px; }
}

/* ---------------------------------------------------------------------- */
/* Sabit/basit içerik sayfaları (Hakkımızda, Blog, KVKK)                  */
/* ---------------------------------------------------------------------- */
.content-page {
  max-width: 720px; margin: 0 auto; padding: calc(28px + var(--safe-top)) 20px calc(50px + var(--safe-bottom));
}
.content-page h1 { font-family: var(--font-display); font-size: clamp(28px, 5vw, 38px); font-weight: 600; color: var(--ink-900); margin-bottom: 10px; letter-spacing: -.2px; }
.content-page .content-page__lead { font-size: 15px; color: var(--ink-500); line-height: 1.6; margin-bottom: 30px; }
.content-page h2 { font-size: 18px; font-weight: 800; color: var(--ink-900); margin: 30px 0 10px; }
.content-page p { font-size: 14.5px; color: var(--ink-700); line-height: 1.75; margin-bottom: 14px; }
.content-page ul { padding-left: 20px; margin-bottom: 14px; }
.content-page li { font-size: 14.5px; color: var(--ink-700); line-height: 1.75; margin-bottom: 6px; }
.content-page__meta { font-size: 12.5px; color: var(--ink-300); margin-bottom: 6px; }
.blog-list { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.blog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.blog-card__meta { font-size: 12px; color: var(--ink-300); margin-bottom: 6px; }
.blog-card h3 { font-size: 16.5px; font-weight: 800; color: var(--ink-900); margin-bottom: 8px; }
.blog-card p { font-size: 13.5px; color: var(--ink-500); line-height: 1.6; }

@media (min-width: 900px) {
  body.admin-body.has-app-shell .app-shell { max-width: 620px; }
}

@media (max-width: 360px) {
  .field-grid-2 { gap: 8px; }
  .role-pick { gap: 8px; }
}