/* =========================================================
   kuafor.css — Kuaför liste sayfası (index.css ile birlikte)
   (v4.1.1)
   - Filtre modalı .filter-overlay (saat modalıyla çakışmaz)
   - Zaman alanı input yerine buton (.when-btn)
   - Navbardaki zaman modalları erişilebilir ve üstte kalma düzeltildi
   - Auth butonları navbar’daki --accent ile eşitlenir
   - A11y + performans iyileştirmeleri
   - Katman kilidi: Saat modalı EN ÜSTTE
   ========================================================= */

:root{
  --bg:#f6f7f9; --card:#ffffff; --ink:#0b0b0b; --muted:#6b7280;
  --border:#e6e8ec; --shadow:0 12px 30px rgba(0,0,0,.08);
  --btn:#111; --btn-ink:#fff; --btn-muted:#1f1f1f;
  --ok:#0aa36b; --off:#9b1c1c; --brand:#0b6ef4;
  --ring: color-mix(in oklab, var(--brand) 35%, transparent);

  /* Danger (İptal) */
  --danger:#dc2626;
  --danger-ink:#fff;
  --danger-ring: color-mix(in oklab, var(--danger) 35%, transparent);

  /* JS ile güncellenen vurgu */
  --accent: var(--brand);
  --accent-ink:#fff;

  /* Katman hiyerarşisi */
  --z-filter: 10030;   /* .filter-overlay (Filtre) */
  --z-date:   10040;   /* #sb-date-overlay */
  --z-time:   10050;   /* #timeOverlay — tarih modundan YÜKSEK */
  --z-auth:   11050;   /* .modal-overlay (auth) */
  --z-dob:    11500;   /* .dobp-overlay (DOB picker) */
  --z-toast:  12000;   /* #toast/#toastWrap*/

  /* Toast konumu */
  --nav-offset-desktop: 84px;
  --nav-offset-mobile: 72px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font:16px/1.45 "Inter",system-ui,-apple-system,Segoe UI,Roboto }
img{ display:block; max-width:100%; height:auto }
[hidden]{ display:none !important }

/* === Sticky footer düzeni === */
html, body { height:100%; }
body{
  min-height:100dvh;
  min-height:100vh;
  display:flex; flex-direction:column; overflow-x:hidden;
}
header{ flex:0 0 auto }
main{ flex:1 0 auto }
.footer{ margin-top:auto }

a{ color:inherit; text-decoration:none }
body.no-scroll{ overflow:hidden } /* overlay açıkken scroll kilidi */

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

/* ==== Layout ==== */
.container{ max-width:1280px; margin:0 auto; padding:0 20px }
.list-page{ padding-top:96px; padding-bottom:48px }
@media (max-width:860px){ .list-page{ padding-top:76px; padding-bottom:40px } }

.page-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:8px 0 12px;
}
.page-head h1{ margin:0; font-size:clamp(22px, 2.2vw, 30px); letter-spacing:-.2px }
.muted{ color:var(--muted) }
.small{ font-size:.95rem }
.tiny{ font-size:.875rem }

/* ==== Navbar popover düzeltmeleri ==== */
.navbar{ overflow:visible; z-index:3000 }
.navbar .search-section{ position:relative; overflow:visible }
.search-box{ position:relative }
/* Nav “Ne zaman?” görsel ipucu */
#qWhen{ cursor:pointer }

/* === Navbar sağ taraf: Profil butonu === */
.right-section .profile{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  border:0; padding:10px 14px; border-radius:999px;
  font-weight:800; cursor:pointer; pointer-events:auto;
}
.right-section .profile i{ font-size:18px }
.right-section .profile:hover{ filter:brightness(1.05) }
.right-section .profile:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring);
}

/* ==== Filters ==== */
.filters{
  display:flex; gap:10px; align-items:center; margin:14px 0 18px; flex-wrap:wrap;
}
.filters select{
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff;
  min-width:160px;
}
#fProvince{ min-width:180px }
#fNeighborhood{ min-width:200px }

/* Genel buton görünümü */
.btn-outline{
  border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer;
}
.btn-outline:hover{ background:#f5f5f7 }
.btn-outline:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring);
}
/* Disabled varyantları */
.btn-outline:disabled,
.btn:disabled,
.auth-btn:disabled{
  opacity:.65; cursor:not-allowed; filter:grayscale(.1);
}

/* “Kayıtlı adresim” — SADECE SAYFADA (#btnMyAddress) */
#btnMyAddress{ font-weight:600 }
#btnMyAddress:hover{ border-color:#dfe3ea; background:#f6f8ff }
/* Filtre/Saat overlay içinde görünmesin */
.time-overlay #btnMyAddress,
#filterOverlay #btnMyAddress,
.filter-overlay #btnMyAddress{ display:none !important }

/* === “Filtreler” butonu (özet + ellipsis) === */
#btnFilters{
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#btnFilters i{ color:#64748b }
#btnFilters[data-active="1"]{
  border-color:var(--accent);
  background:color-mix(in oklab, var(--accent) 7%, white);
}
@media (max-width:480px){
  #btnFilters{ max-width:200px }
}

/* En Yakınım butonu (opsiyonel) */
#btnNearMe{
  display:inline-flex; align-items:center; gap:8px;
  border:1px dashed var(--border); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer;
}
#btnNearMe i{ color:#64748b }
#btnNearMe:hover{ background:#f5f7fb; border-color:#dfe3ea }

/* ==== Grid ==== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (min-width:1360px){ .grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr); gap:16px } }
@media (max-width:620px){ .grid{ grid-template-columns:1fr; gap:14px } }

/* Yükleniyor durumu */
.grid[aria-busy="true"]{ pointer-events:none; }
.grid[aria-busy="true"] > *{ opacity:.92 }

/* Performans */
.grid > .card{ content-visibility:auto; contain-intrinsic-size:auto 300px }

/* ==== Card ==== */
.card{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12) }

.card .cover{ display:block; aspect-ratio:16/9; background:#f3f4f6; overflow:hidden }
.card .cover img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease }
.card:hover .cover img{ transform:scale(1.03) }

a.card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring), var(--shadow);
}

.card .body{ padding:14px 14px 16px; display:grid; gap:10px }
.row1{ display:flex; align-items:center; justify-content:space-between; gap:10px }

.ttl, .ttl-link{ font-size:18px; font-weight:800; line-height:1.2; color:#111; margin:0 }
.ttl a{ color:inherit }
.ttl-link:hover, .ttl a:hover{ color:var(--accent) }

.loc{ color:var(--muted) }
.today{ color:#94a3b8 }

.row2{ display:flex; align-items:center; justify-content:space-between; margin-top:4px }
.price{ font-weight:800 }

/* CTA — Profilim ile aynı accent rengi */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-weight:800;
}
.cta:hover{ filter:brightness(.95) }

/* Rozetler */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
.badge.ok{ background:#0aa36b18; color:#0b7c54; border:1px solid #0aa36b44 }
.badge.off{ background:#9b1c1c18; color:#7a1313; border:1px solid #9b1c1c44 }

/* Empty */
.empty{
  border:1px dashed var(--border); border-radius:14px; padding:16px; text-align:center; margin:10px 0;
}
.empty .sugg-wrap{
  margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.empty .sugg-btn{
  border:1px solid var(--border); background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer;
  font:600 14px/1 'Inter',sans-serif;
}
.empty .sugg-btn:hover{ background:#f8fafc }
.empty .sugg-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.empty .sugg-btn[data-sugg="myaddr"]{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}
.empty .sugg-btn[data-sugg="myaddr"]:hover{ filter:brightness(.95) }

/* ==== Skeleton ==== */
.skel{ pointer-events:none }
.skel .img{
  height:160px; background:linear-gradient(90deg,#eee,#f6f6f6,#eee);
  background-size:200% 100%; animation:sh 1.2s linear infinite;
}
.skel .lines{ padding:12px }
.skel .l{
  height:12px; background:linear-gradient(90deg,#eee,#f6f6f6,#eee);
  background-size:200% 100%; animation:sh 1.2s linear infinite; border-radius:6px; margin:8px 0;
}
.skel .w1{ width:60% } .skel .w2{ width:80% } .skel .w3{ width:40% }
@keyframes sh{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

/* ==== Toasts (compact, BOTTOM-CENTER) ==== */
#toastWrap{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  display:grid;
  gap:8px;
  justify-items:center;
  pointer-events:none;
  z-index:var(--z-toast);
  width:max-content;
  max-width:min(92vw, 420px);
}
.toast{
  display:inline-flex;
  align-items:center; justify-content:center;
  background:var(--accent);
  color:var(--accent-ink);
  padding:12px 16px;
  border-radius:10px;
  font:700 14px/1.25 "Inter",system-ui,-apple-system,Segoe UI,Roboto;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(92vw, 380px);
  white-space:normal;
  border:0;
  pointer-events:auto;
}
#toast.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  z-index:var(--z-toast);
}
.toast.show,
#toast.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast.success{ background:var(--ok);  color:#fff; }
.toast.error  { background:var(--off); color:#fff; }
.toast.info   { background:var(--brand); color:#fff; }
@media (max-width:860px){
  #toastWrap, #toast.toast{ bottom:20px }
}

/* =========================================================
   NAVBAR/HERO ARAMA POPOVER (searchbar.js)
   ========================================================= */
.sg-popover{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.12); padding:8px; display:none;
  z-index:5000; max-height:320px; overflow:auto; width:auto; max-width:96vw;
  color:var(--ink);
}
.sg-popover.portal{ position:fixed; left:auto; right:auto; top:auto; bottom:auto }
.sg-popover.open{ display:block }
.sg-popover .sg-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer;
  background:transparent; border:0; color:inherit;
}
.sg-popover .sg-item i{ width:18px; text-align:center; color:#6b7280 }
.sg-popover .sg-item:hover{ background:#f8fafc }
.sg-popover .group-title{
  font:700 12px/1 'Inter',sans-serif; color:#64748b; margin:3px 8px 6px; text-transform:uppercase; letter-spacing:.04em
}

/* Eski sınıflar için uyumluluk */
.sb-popover{ position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.12); padding:8px; display:none;
  z-index:5000; max-height:320px; overflow:auto; width:auto; max-width:96vw; color:var(--ink); }
.sb-popover.portal{ position:fixed; left:auto; right:auto; top:auto; bottom:auto }
.sb-popover.open{ display:block }
.sb-group + .sb-group{ border-top:1px solid #f1f5f9; margin-top:6px; padding-top:8px }
.sb-head{ font:700 12px/1 'Inter',sans-serif; color:#64748b; margin:3px 8px 6px; text-transform:uppercase; letter-spacing:.04em }
.sb-list{ list-style:none; margin:0; padding:0 }
.sb-list li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; color:inherit; }
.sb-list li i{ width:16px; text-align:center; color:#6b7280 }
.sb-list li:hover{ background:#f8fafc }

/* =========================================================
   TARİH MODALI
   ========================================================= */
#sb-date-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  display:none; place-items:center; z-index:var(--z-date); backdrop-filter:blur(4px);
}
#sb-date-overlay.open{ display:grid }
.sb-date-box{
  width:min(520px, 94vw); background:var(--card); border-radius:16px;
  border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.25); padding:16px 16px 12px; position:relative; color:var(--ink);
}
@media (min-width:900px){
  .sb-date-box{ width:min(640px, 94vw) }
}
.sb-date-close, #sb-date-close{
  position:absolute; top:10px; right:10px; border:1px solid var(--border); background:var(--card);
  width:34px; height:34px; border-radius:10px; cursor:pointer; color:var(--ink);
}
.sb-date-close:focus-visible,
#sb-date-close:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.sb-date-head{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px }
.sb-date-head .month{ font-weight:800 }
.sb-date-head .nav{ width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--card); cursor:pointer; color:var(--ink) }
.sb-date-head .nav:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.days-head{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:10px 0 6px; padding:0 4px; color:#64748b; font-size:12px; text-align:center }
.sb-date-box .grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:0 4px }
.sb-date-box .grid span{ height:38px }
.sb-date-box .grid button{
  height:38px; border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:10px; cursor:pointer;
}
.sb-date-box .grid button[disabled],
.sb-date-box .grid button[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; text-decoration:line-through
}
.sb-date-box .grid button.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.sb-date-box .grid button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}

.sb-date-box .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 4px 10px }
.sb-date-box .chips button{ border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 12px; cursor:pointer }
.sb-date-box .chips button.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }

.sb-date-box .actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px }
.sb-date-box .actions .clear{
  border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:12px; padding:10px 14px;
}
.sb-date-box .actions .clear:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.sb-date-box .actions .ok{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:12px; padding:10px 14px
}
.sb-date-box .actions .ok:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}

/* =========================================================
   SAAT MODALI — (auth modalı ile çakışmaz)
   ========================================================= */
/* Not: Saat modalinin overlay'i ID ile hedeflenir: #timeOverlay */
#timeOverlay{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  display:none; place-items:center; z-index:var(--z-time); backdrop-filter:blur(4px);
}
#timeOverlay.active{ display:grid }
/* Geriye dönük uyumluluk için (eski sınıf kullanan yerler varsa) */
.time-overlay{ position:fixed; inset:0; background:rgba(2,6,23,.45); display:none; place-items:center; z-index:var(--z-time); backdrop-filter:blur(4px); }
.time-overlay.active{ display:grid }

.time-box{
  width:min(520px, 94vw); background:var(--card); color:var(--ink); border-radius:16px;
  border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.25);
  padding:16px 16px 12px; position:relative;
}
@media (min-width:900px){
  .time-box{ width:min(640px, 94vw) }
}
.time-close{
  position:absolute; top:10px; right:10px; border:1px solid var(--border); background:var(--card); color:var(--ink);
  width:34px; height:34px; border-radius:10px; cursor:pointer
}
.time-close:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.time-grid{ display:flex; flex-wrap:wrap; gap:8px; max-width:640px }
.time-chip{
  border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 12px;
  cursor:pointer; font:600 14px/1 'Inter',sans-serif;
}
.time-chip:hover{ background:#f8fafc }
.time-chip.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.time-chip[disabled],
.time-chip[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; text-decoration:line-through }
.time-chip:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}

.time-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px }
.time-actions .btn{
  border:1px solid var(--border); background:var(--card); color:var(--ink) !important;
  border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:700;
}
.time-actions .btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.time-actions .auth-btn{
  background:var(--accent) !important; color:var(--accent-ink) !important; border:none; border-radius:12px; padding:10px 16px; font-weight:700;
}
.time-actions .auth-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}

/* ======= FİLTRE MODALI (AYRI OVERLAY) ======= */
.filter-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  display:none; place-items:center; z-index:var(--z-filter); backdrop-filter:blur(4px);
}
.filter-overlay.active{ display:grid }

/* Zaman — tek buton (input görünümünde) */
.when-btn{
  display:flex; align-items:center; gap:8px; justify-content:flex-start;
  width:100%;
  border:1px solid var(--border); background:var(--card); color:var(--ink);
  border-radius:12px; padding:10px 12px; cursor:pointer; font-weight:700;
}
.when-btn i{ color:#64748b }
.when-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 3px var(--ring);
}
.when-btn.filled{ border-color:color-mix(in oklab, var(--accent) 35%, var(--border)); }

/* ===== NAVBAR: #qWhen alanını buton değil düz yazı gibi göster ===== */
.navbar #qWhen{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  min-height:auto !important;
  height:auto !important;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.navbar #qWhen:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.navbar #qWhen .when-text{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--muted);
  font-weight:500;
}
.navbar #qWhen.filled .when-text{
  color:var(--ink);
  font-weight:600;
}

/* Filtre overlay içindeki select’ler & hizmet kutuları */
.time-box select{ /* time-box hem saat hem filtre içinde kullanılıyor */
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--card); color:var(--ink);
}
/* ---- HİZMET “Seç/Seçildi” butonları (buton tabanlı toggler) ---- */
.svc-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--border); border-radius:12px; padding:8px 10px; background:#fff;
}
.svc-name{ font-weight:600; line-height:1.2 }
.svc-select{
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-weight:800;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  transition:filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.svc-select:hover{ filter:brightness(.98) }
.svc-select[aria-pressed="true"]{
  background:var(--ok);
  color:#fff;
  border-color:var(--ok);
}
.svc-select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring);
}

.svc-list label{
  border:1px solid var(--border); background:var(--card); color:var(--ink);
}

/* Modal başlık hizalaması */
.modal-title-center{ text-align:center; font-weight:800 }

/* === KIRMIZI İPTAL (btn-danger) === */
.btn-danger{
  background:var(--danger); color:var(--danger-ink) !important; border:1px solid var(--danger);
}
.btn-danger:hover{ filter:brightness(0.98) }
.btn-danger:focus-visible{
  outline:2px solid var(--danger); outline-offset:2px; box-shadow:0 0 0 3px var(--danger-ring);
}

/* =========================================================
   AUTH MODALLARI — index.css uyumlu + accent eşitleme
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(15,23,42,.45); backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
  padding:20px; z-index:var(--z-auth);
  opacity:0; transition:opacity .2s ease;
}
.modal-overlay.active{ display:grid; opacity:1 }
.modal-box{
  width:min(520px,92vw);
  background:
    radial-gradient(120% 140% at 100% 0%, #ffffff 0%, #f8fafc 70%) no-repeat;
  color:#0f172a; border:1px solid rgba(2,6,23,.06); border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4) inset;
  position:relative; overflow:hidden; animation:pop .2s ease-out;
}
.modal-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border-radius:12px; border:1px solid rgba(2,6,23,.08);
  background:var(--card); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  z-index:2; transition:all .15s ease;
}
.modal-close:hover{ background:#f3f4f6; transform:translateY(-1px) }

.modal-title-center{ text-align:center; font-weight:800; font-size:20px; margin-bottom:4px }
.modal-subtitle{ text-align:center; color:#475569; font-size:13.5px; margin:-2px 0 10px }

.auth-container{ padding:22px 20px 24px; display:grid; gap:16px }
.auth-tabs{ display:flex; gap:8px; justify-content:center }
.auth-tab{
  padding:8px 14px; border-radius:999px; border:1px solid rgba(2,6,23,.08);
  background:#f8fafc; cursor:pointer; font-weight:700; color:#0f172a; transition:all .15s ease;
}
.auth-tab.active{ background:#111827; color:#fff; border-color:#111827 }

.auth-form{ display:none; max-width:380px; margin:0 auto }
.auth-form.active{ display:block }
.auth-form h2{ text-align:center; margin:6px 0 12px }

.field-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form-row{ display:flex; align-items:center; gap:10px }
.field{ display:block }

.auth-input{
  width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:12px;
  font-size:15px; background:var(--card); color:var(--ink);
  transition:border .12s, box-shadow .12s; margin-bottom:10px;
}
.auth-input:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 4px rgba(59,130,246,.15) }

.phone-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.cc-box{
  display:flex; align-items:center; gap:8px;
  min-width:110px; justify-content:center;
  padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--ink); font-weight:800;
}
.cc-box .flag{ font-size:16px; line-height:1 }
.cc-box .cc{ letter-spacing:.2px }
.phone-input{ flex:1 }
.phone-row .auth-input{ margin-bottom:0 }
.phone-hint{ color:#6b7280; font-size:12px; margin-top:4px; margin-bottom:8px }

.password-wrap{ position:relative }
.auth-form input[type="password"]{ padding-right:48px }
.toggle-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center;
  border:0; background:transparent; color:#6b7280; cursor:pointer; border-radius:8px;
}
.toggle-eye:hover{ background:#f3f4f6; color:#111 }
.toggle-eye:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px }

#otpForm input[name="code"]{ text-align:center; letter-spacing:6px; font-weight:800; font-size:20px }
#otpForm input[name="code"]::placeholder{ letter-spacing:6px; color:#9ca3af }

.resend-otp{
  background:transparent; border:0; padding:8px 8px; margin-top:6px;
  font-weight:700; color:#0b6ef4; cursor:pointer; border-radius:8px;
  text-decoration:none !important;
}
.resend-otp:hover{ background:#eef2ff; text-decoration:none !important }

.form-hint, .phone-hint{ color:#475569; font-size:12.5px }
.info-card{
  background:#f1f5f9; border:1px solid #e2e8f0; color:#334155;
  padding:10px 12px; border-radius:12px; font-size:13px; margin:6px 0 10px;
}

.link{ color:#0b6ef4; text-decoration:none; font-weight:600 }
.link:hover{ text-decoration:underline }

/* ÖNEMLİ: Auth + onay butonları accent ile aynı (navbar eşleşmesi) */
.auth-btn,
.time-actions .auth-btn,
.sb-date-box .actions .ok{
  background:var(--accent) !important;
  color:var(--accent-ink) !important;
  border:none !important;
  box-shadow:0 6px 18px color-mix(in oklab, var(--accent) 25%, transparent);
}
.auth-btn{ width:100%; padding:13px; border-radius:12px; font-weight:800; cursor:pointer; letter-spacing:.2px; transition:transform .06s ease, filter .15s ease, box-shadow .15s ease; }
.auth-btn:hover{ filter:brightness(1.02) }
.auth-btn:active{ transform:translateY(1px) }

.modal-box .btn{
  background:var(--card); border:1px solid var(--border); color:var(--ink);
  border-radius:12px; padding:11px 14px; font-weight:700; cursor:pointer;
}
.modal-box .btn:hover{ background:#f8fafc }

/* “İptal”in kırmızı görünümü modal içinde de geçerli */
.modal-box .btn.btn-danger{ background:var(--danger); color:var(--danger-ink); border-color:var(--danger) }
.modal-box .btn.btn-danger:hover{ filter:brightness(0.98) }
.modal-box .btn.btn-danger:focus-visible{
  outline:2px solid var(--danger); outline-offset:2px; box-shadow:0 0 0 3px var(--danger-ring);
}

.error{ color:#dc2626; font-size:13px; min-height:18px; margin:8px 0 4px }

/* =========================================================
   DOB PICKER (components/dob-picker.js)
   ========================================================= */
.dobp-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  display:grid; place-items:center; backdrop-filter:blur(4px);
  z-index:var(--z-dob);
}
.dobp-box{
  width:min(520px, 94vw); background:var(--card); color:var(--ink); border-radius:16px;
  border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.25);
  padding:16px; position:relative;
}
.dobp-head{ text-align:center; font-weight:800; margin:4px 0 12px }
.dobp-wheel{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; position:relative; margin-bottom:10px;
}
.dobp-col{
  max-height:220px; overflow:auto; padding:6px; border:1px solid var(--border); border-radius:12px;
  scroll-snap-type:y mandatory; background:var(--card); color:var(--ink);
}
.dobp-opt{
  display:block; width:100%; padding:8px 10px; margin:2px 0; border:0; background:transparent;
  border-radius:8px; cursor:pointer; font:600 14px/1 'Inter',sans-serif; scroll-snap-align:start; color:var(--ink);
}
.dobp-col .dobp-opt[aria-selected="true"]{ background:var(--accent); color:var(--accent-ink) }
.dobp-mask{
  position:absolute; inset:0; pointer-events:none; border-radius:12px;
  box-shadow: inset 0 24px 24px -24px rgba(2,6,23,.25), inset 0 -24px 24px -24px rgba(2,6,23,.25);
}
.dobp-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px }
.btn-ghost{
  border:1px solid var(--border); background:var(--card); color:var(--ink);
  border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:700;
}

/* Küçük ekran iyileştirmeleri */
@media (max-width:620px){
  .card:hover{ transform:none; box-shadow:var(--shadow) }
  .card .body{ padding:12px 12px 14px }
  .cta{ padding:8px 10px }
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce){
  .card, .card .cover img, .toast, .skel .img, .skel .l {
    transition:none !important; animation:none !important;
  }
}

/* Animasyon (auth modal) */
@keyframes pop{ from{ transform:translateY(8px) scale(.985); opacity:0 } to{ transform:none; opacity:1 } }

/* =========================================================
   KATMAN KİLİDİ — saat modali daima en üstte
   (Inline <style> ve JS ile verilen z-index'leri de ezmek için !important)
   ========================================================= */
#sb-date-overlay{ z-index: 2147483600 !important; }   /* Tarih */
#timeOverlay{     z-index: 2147483630 !important; }   /* Saat  (HER ZAMAN EN ÜSTTE) */
.time-overlay{    z-index: 2147483630 !important; }   /* Geriye dönük */

.filter-overlay{  z-index: 2147483500 !important; }   /* Filtre */
.modal-overlay{   z-index: 2147483500 !important; }   /* Auth / diğer modal */
#toast, #toastWrap{ z-index: 2147483646 !important; } /* Toast (en üste yakın) */