:root{
  --bg: #0b0f17;
  --card: rgba(255,255,255,.08);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --stroke: rgba(255,255,255,.12);
  --ok: rgba(52,199,89,.9);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --blur: blur(16px);
  --font: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font);
  background: radial-gradient(1200px 700px at 20% 10%, rgba(52,199,89,.18), transparent 55%),
              radial-gradient(1000px 600px at 70% 30%, rgba(10,132,255,.16), transparent 50%),
              radial-gradient(900px 500px at 60% 85%, rgba(255,159,10,.12), transparent 55%),
              var(--bg);
  color:var(--txt);
  overflow-x:hidden; /* ✅ mobilde sağa taşmayı kes */
}

.shell{max-width:1040px; margin:0 auto; padding:28px 18px 40px}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
  position: sticky;
  top: 14px;
  z-index: 10;
  gap: 12px;
  min-width:0;
}

.brand{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid var(--stroke);
  border-radius:999px; background:rgba(255,255,255,.06);
  backdrop-filter:var(--blur);
  min-width:0;              /* ✅ taşmayı engeller */
  max-width:100%;
}

.dot{
  width:10px; height:10px; border-radius:999px;
  background:var(--ok);
  box-shadow:0 0 0 6px rgba(52,199,89,.12)
}
.brand b{font-size:14px; letter-spacing:.2px; white-space:nowrap}

.pill{
  font-size:12px; color:var(--muted);
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.05);
  backdrop-filter:var(--blur);
  display:flex; align-items:center; gap:10px;
  min-width:0;              /* ✅ taşmayı engeller */
  max-width:100%;
}

.pill a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  white-space:nowrap;
}

/* Grid */
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start}
@media (max-width:820px){ .grid{grid-template-columns:1fr} }

/* Cards */
.card{
  border:1px solid var(--stroke);
  background:var(--card);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  backdrop-filter:var(--blur);
  overflow:hidden;
}
.card .hd{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 12px}
.card .hd h1, .card .hd h2{margin:0; font-size:16px}
.card .bd{padding:0 18px 18px}
.hr{height:1px; background:var(--stroke); margin:12px 0}

/* Badges */
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
.badge.lost{color:rgba(255,255,255,.92); background:rgba(255,69,58,.12); border-color:rgba(255,69,58,.35)}
.badge.safe{color:rgba(255,255,255,.92); background:rgba(52,199,89,.12); border-color:rgba(52,199,89,.35)}

/* Hero */
.heroTitle{font-size:22px; letter-spacing:-0.2px; line-height:1.15; margin:0}
.heroText{margin:10px 0 0; color:rgba(255,255,255,.70); line-height:1.65; font-size:14px}

/* Buttons */
button, .btn{
  appearance:none; border:0; cursor:pointer;
  padding:13px 14px; border-radius:16px;
  font-weight:650; font-size:14px;
  color:var(--txt);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  backdrop-filter:var(--blur);
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
button:active, .btn:active{transform:scale(.99)}
.btnRow{display:grid; gap:10px; margin-top:16px}
.btn.primary{
  background:linear-gradient(180deg, rgba(10,132,255,.38), rgba(10,132,255,.18));
  border-color:rgba(10,132,255,.50);
}
.btn.secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.14);
}

/* Features chips */
.features{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.chip{
  padding:8px 10px; border-radius:999px; font-size:12px;
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:var(--blur);
}

/* Steps */
.steps{margin:0; padding-left:18px; color:rgba(255,255,255,.70); line-height:1.85; font-size:14px}
.steps li{margin:8px 0}

/* Forms */
small{color:var(--muted); line-height:1.45}
.field{display:flex; flex-direction:column; gap:6px; margin-top:10px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
  color:var(--txt);
  outline:none;
}
textarea{min-height:88px; resize:vertical}

/* Pet summary (t.php) */
.pet{display:flex; gap:14px; align-items:center}
.avatar{
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.meta{display:flex; flex-direction:column; gap:4px}
.meta .name{font-size:18px; font-weight:700}
.meta .sub{font-size:13px; color:var(--muted)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  padding:12px 14px; border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  color:var(--txt);
  backdrop-filter:var(--blur);
  display:none;
  z-index:9999;
}
.toast.show{display:block}

/* Footer */
.footer{display:flex; justify-content:space-between; align-items:center; gap:10px; color:rgba(255,255,255,.55); font-size:12px}

/* ===== TOPBAR MOBILE (BOZMADAN) ===== */
@media (max-width: 720px) {

  .topbar{
    position: relative;   /* ✅ sticky iptal */
    top:auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }

  .brand{ width:100%; justify-content:flex-start; }

  /* ✅ pill taşmasın: satır satır sar */
  .pill{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;        /* ✅ taşma yerine alta geç */
    gap:10px;
    padding:10px 12px;
  }

  /* ✅ mail kısmı varsa mobilde gizle */
  .pill .userInfo{
    display:none !important;
  }
}
/* ===== TOPBAR RIGHT ACTIONS ===== */
.topActions{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* Brand text */
.brandText{display:flex; flex-direction:column; line-height:1.05}
.brandTitle{font-weight:800; font-size:14px; letter-spacing:.2px}
.brandSub{font-size:11px; opacity:.7; margin-top:3px}

/* Avatar icon */
.userAvatar{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  font-size:18px;
  text-decoration:none;
  color:var(--txt);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  backdrop-filter:var(--blur);
}

/* Mobile: topbar stack + actions full width */
@media (max-width:720px){
  .topActions{width:100%; justify-content:space-between;}
  .brand{justify-content:flex-start;}
  .brandSub{display:none;} /* mobilde alt yazıyı sakla daha temiz */
}
/* =========================
   THEME: LIGHT OVERRIDES
   ========================= */

/* Light tema aktifken (html[data-theme="light"]) renkleri değiştir */
html[data-theme="light"]{
  --bg: #f4f6fb;
  --card: rgba(0,0,0,.04);
  --txt: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.55);
  --stroke: rgba(0,0,0,.10);
  --ok: rgba(52,199,89,.95);
  --shadow: 0 18px 50px rgba(0,0,0,.10);
}

/* Light tema arkaplanı (body) */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(52,199,89,.14), transparent 55%),
    radial-gradient(1000px 600px at 70% 30%, rgba(10,132,255,.12), transparent 50%),
    radial-gradient(900px 500px at 60% 85%, rgba(255,159,10,.10), transparent 55%),
    var(--bg);
}

/* Light tema için input/textarea daha okunaklı olsun */
html[data-theme="light"] input,
html[data-theme="light"] textarea{
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.88);
}

/* Light tema buton/pill/brand kontrastı */
html[data-theme="light"] .brand,
html[data-theme="light"] .pill{
  background: rgba(255,255,255,.70);
}

/* Light tema kart kontrastı */
html[data-theme="light"] .card{
  background: rgba(255,255,255,.65);
}
html[data-theme="light"]{
  --bg: #f4f6fb;
  --card: rgba(0,0,0,.04);
  --txt: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.55);
  --stroke: rgba(0,0,0,.10);
  --ok: rgba(52,199,89,.95);
  --shadow: 0 18px 50px rgba(0,0,0,.10);
}

html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(52,199,89,.14), transparent 55%),
    radial-gradient(1000px 600px at 70% 30%, rgba(10,132,255,.12), transparent 50%),
    radial-gradient(900px 500px at 60% 85%, rgba(255,159,10,.10), transparent 55%),
    var(--bg);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea{
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.88);
}

html[data-theme="light"] .brand,
html[data-theme="light"] .pill{
  background: rgba(255,255,255,.70);
}

html[data-theme="light"] .card{
  background: rgba(255,255,255,.65);
}
/* ================================
   LIGHT MODE FIX: hard-coded beyaz yazıları düzelt
   ================================ */
html[data-theme="light"] .card,
html[data-theme="light"] .brand,
html[data-theme="light"] .pill,
html[data-theme="light"] .sideGlass,
html[data-theme="light"] .contentGlass,
html[data-theme="light"] .tagBox,
html[data-theme="light"] .rowCard{
  color: var(--txt);
}

/* Dashboard içinde kalan sabit beyaz metinleri yakala */
html[data-theme="light"] .petMeta,
html[data-theme="light"] .metaLine,
html[data-theme="light"] .petName,
html[data-theme="light"] .tagTitle,
html[data-theme="light"] .tagSub,
html[data-theme="light"] .phoneLabel,
html[data-theme="light"] small,
html[data-theme="light"] .hint{
  color: rgba(0,0,0,.68) !important;
}

/* Butonların içindeki yazılar / linkler */
html[data-theme="light"] a,
html[data-theme="light"] .btn{
  color: rgba(0,0,0,.86);
}

/* Badge / durum pill yazıları görünür olsun */
html[data-theme="light"] .badge{
  color: rgba(0,0,0,.62);
}

/* Sidebar nav yazıları (panel.css bazen sabit beyaz basıyor) */
html[data-theme="light"] .navItem,
html[data-theme="light"] .navItem span{
  color: rgba(0,0,0,.80) !important;
}

/* Seçili menü / hover arka planı açık temada daha okunur */
html[data-theme="light"] .navItem.active{
  background: rgba(10,132,255,.14) !important;
  border-color: rgba(10,132,255,.22) !important;
}
/* ================================
   LIGHT THEME POLISH PACK
   (assets.css en altına)
   ================================ */

html[data-theme="light"]{
  /* genel yüzey / gölge */
  --bg: #f4f6fb;
  --card: rgba(255,255,255,.92);
  --stroke: rgba(15,23,42,.10);
  --shadow: 0 16px 50px rgba(15,23,42,.10);
  --txt: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);
}

/* Sayfa arka planını light'a uygun yap */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(52,199,89,.12), transparent 55%),
    radial-gradient(1000px 600px at 70% 30%, rgba(10,132,255,.10), transparent 50%),
    radial-gradient(900px 500px at 60% 85%, rgba(255,159,10,.08), transparent 55%),
    var(--bg);
  color: var(--txt);
}

/* Kartlar: daha net beyaz, daha temiz border */
html[data-theme="light"] .card{
  background: var(--card);
  border-color: var(--stroke);
  box-shadow: var(--shadow);
}

/* Üst bar / pill: cam efekti hafiflet */
html[data-theme="light"] .brand,
html[data-theme="light"] .pill{
  background: rgba(255,255,255,.78);
  border-color: rgba(15,23,42,.10);
}

/* Linkler: koyu temadaki gibi beyaz değil */
html[data-theme="light"] a{
  color: rgba(15,23,42,.86);
}

/* Butonlar: light temada daha “UI” görünüm */
html[data-theme="light"] button,
html[data-theme="light"] .btn{
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.03));
  border-color: rgba(15,23,42,.12);
  color: rgba(15,23,42,.90);
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] button:hover{
  border-color: rgba(10,132,255,.30);
  background: linear-gradient(180deg, rgba(10,132,255,.10), rgba(10,132,255,.05));
}

/* Primary: mavi netleşsin */
html[data-theme="light"] .btn.primary{
  background: linear-gradient(180deg, rgba(10,132,255,.22), rgba(10,132,255,.12));
  border-color: rgba(10,132,255,.35);
  color: rgba(7,61,140,.95);
}

/* Danger varsa (kayboldu) light’ta daha okunur */
html[data-theme="light"] .btn.danger{
  background: linear-gradient(180deg, rgba(255,69,58,.18), rgba(255,69,58,.10));
  border-color: rgba(255,69,58,.30);
  color: rgba(120,20,15,.95);
}

/* Input/textarea: beyaz zemin + net border */
html[data-theme="light"] input,
html[data-theme="light"] textarea{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.14);
  color: rgba(15,23,42,.92);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color: rgba(15,23,42,.45);
}

/* Sidebar yazıları ve hover */
html[data-theme="light"] .navItem{
  color: rgba(15,23,42,.82) !important;
  background: rgba(255,255,255,.60);
  border-color: rgba(15,23,42,.10);
}

html[data-theme="light"] .navItem:hover{
  background: rgba(10,132,255,.08);
  border-color: rgba(10,132,255,.20);
}

html[data-theme="light"] .navItem.active{
  background: rgba(10,132,255,.14) !important;
  border-color: rgba(10,132,255,.26) !important;
  color: rgba(7,61,140,.95) !important;
}

/* Badge: light’ta “chip” gibi */
html[data-theme="light"] .badge{
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.12);
  color: rgba(15,23,42,.62);
}

/* Safe/Lost badge’ler: light’ta okunur kalsın */
html[data-theme="light"] .badge.safe{
  background: rgba(52,199,89,.12);
  border-color: rgba(52,199,89,.22);
  color: rgba(10,90,35,.95);
}
html[data-theme="light"] .badge.lost{
  background: rgba(255,69,58,.10);
  border-color: rgba(255,69,58,.22);
  color: rgba(120,20,15,.95);
}
/* ================================
   REPORTS - LIGHT THEME TEXT FIX
   (assets.css en altına)
   ================================ */

html[data-theme="light"] .contentGlass,
html[data-theme="light"] .contentGlass *{
  color: rgba(15,23,42,.90);
}

/* Başlık / alt başlıklar */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .sectionTitle,
html[data-theme="light"] .hint,
html[data-theme="light"] small{
  color: rgba(15,23,42,.72);
}

/* Kart içi metinler (mesaj, location vs) */
html[data-theme="light"] .rowCard,
html[data-theme="light"] .rowMeta,
html[data-theme="light"] .message,
html[data-theme="light"] .location,
html[data-theme="light"] .reportItem,
html[data-theme="light"] .reportRow,
html[data-theme="light"] .reportCard{
  color: rgba(15,23,42,.88) !important;
}

/* Tab yazıları (Hepsi / Konumlar / Mesajlar) */
html[data-theme="light"] .tabs a,
html[data-theme="light"] .tabs button,
html[data-theme="light"] .tab,
html[data-theme="light"] .tabBtn{
  color: rgba(15,23,42,.80) !important;
}

/* Eğer reports sayfasında “badge/pill” tarzı var ise */
html[data-theme="light"] .badge,
html[data-theme="light"] .pillStatus{
  color: rgba(15,23,42,.75) !important;
}

/* Linkler */
html[data-theme="light"] a{
  color: rgba(10,132,255,.95);
}
/* === AUTH (LOGIN) PAGE FIX === */
.authPage .shell{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px;
}

.authPage{
  background: #f6f7fb;      /* beyaz tema gibi */
  color: #111;
}

.authPage .topbar{
  position: static;         /* login'de sticky istemiyoruz */
  top: auto;
  margin-bottom: 16px;
}

.authPage .card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(10,20,40,.10);
}

.authPage input,
.authPage textarea{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: #111;
}

.authPage .badge,
.authPage small{
  color: rgba(0,0,0,.60);
}