:root{
  --font:"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg:#f6f8fd; --card:#ffffff; --ink:#0f172a; --muted:#6b7280;
  --primary:#0b5cff; --info:#3b82f6; --accent:#10b981; --danger:#ef4444; --warn:#eab308;
  --primary-rgb: 11, 92, 255;
  --chip:#eef2ff; --chip-ink:#0f172a; --shadow:0 12px 28px rgba(14,23,41,.12),0 2px 10px rgba(14,23,41,.06);
  --shadow-sm: 0 4px 8px rgba(14, 23, 41, .07);
  --radius:20px; --app-w:420px; --safe-t:max(env(safe-area-inset-top),10px); --safe-b:max(env(safe-area-inset-bottom),10px);
  --line:#e6eaf5; --pill-bg:#eef3ff; --pill-ink:#1e3a8a; --meter-bg:#e8ecf7;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --card:#0f172a; --ink:#e5e7eb; --muted:#9ca3af;
  --chip:#111827; --chip-ink:#e5e7eb; --shadow:0 12px 30px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .25);
  --line:#1e293b; --pill-bg:#0f1b35; --pill-ink:#bcd3ff; --meter-bg:#0f1b35;
}
:root[data-theme="midnight"]{
  --bg:#050510; --card:#101025; --ink:#e0e0ff; --muted:#8b8bba;
  --chip:#1a1a3d; --chip-ink:#e0e0ff; --shadow:0 12px 30px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.5);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .4);
  --line:#2a2a5a; --pill-bg:#1a1a3d; --pill-ink:#a0a0ff; --meter-bg:#1a1a3d;
  --primary:#7c3aed; --primary-rgb: 124, 58, 237; --accent:#8b5cf6; --info:#6366f1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior-y:contain;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;font-weight:500;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Native App Hissi: Seçimi ve menüleri kapat */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* Metin kopyalamaya izin verilecek alanlar */
input, textarea, .selectable, .review-text, .faq-answer, .infoCard p, .pname, .address-text {
  -webkit-user-select:text; user-select:text;
}
/* Resimlerin sürüklenmesini engelle */
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* Tıklanabilir resimler için pointer event'i aç */
.btn img, .brand img, .profile-avatar img, .car-image-container img { pointer-events: auto; }

a{ text-decoration:none; color:inherit; }
.link{ color:#7aa2ff; font-weight:800; }

/* === ÜST MAVİ BAR (status bar arkası) === */
#sys-shelf-top {
  position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px); /* Sadece çentik/durum çubuğu alanı kadar */
  background: linear-gradient(135deg, #6ab1ff, #0b5cff); /* Appbar ile aynı renk */
  z-index: 99; /* Appbar'ın hemen arkasında */
}
:root[data-theme="dark"] #sys-shelf-top { background: linear-gradient(135deg, #1e3a8a, #0b5cff); }
:root[data-theme="midnight"] #sys-shelf-top { background: linear-gradient(135deg, #4c1d95, #7c3aed); }

.app{position:relative;margin:0 auto;max-width:var(--app-w);height:100dvh;height:calc(var(--vh,1vh)*100);display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px;display:block}
.search{flex:1;display:flex;align-items:center;background:var(--card);border-radius:999px;padding:8px 12px;box-shadow:var(--shadow);gap:8px;border:1px solid var(--line)}
.search input{border:0;outline:0;width:100%;font:500 14px/1;background:transparent;color:var(--ink)}
.search button{border:0;background:var(--primary);color:#fff;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer;transform:translateZ(0);transition:transform .15s ease}
.search button:active{transform:scale(.98)}

.content{position:relative;flex:1;overflow:hidden}
.page{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top: 80px; padding-bottom:110px;opacity:0;transform:translateX(8%);transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.page.active{opacity:1;transform:none;pointer-events:auto; padding-top: 64px;}
.page::-webkit-scrollbar{width:0;height:0} /* Scrollbar'ı gizle */
.page.active { padding-top: 64px; } /* Aktif sayfa için üst boşluk */
.card{
  background: linear-gradient(180deg, var(--card) 95%, #f1f1f5 100%); /* Kart rengini daha baskın yap */
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin:0 14px 12px;border:1px solid var(--line);animation:fadeUp .35s ease both
}
:root[data-theme="dark"] .card { background: linear-gradient(180deg, var(--card) 95%, #080d17 100%); } /* Koyu tema için */
:root[data-theme="midnight"] .card { background: linear-gradient(180deg, var(--card) 95%, #02020a 100%); }

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  appearance:none;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700;
  background:var(--chip);color:var(--chip-ink);box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  position: relative; overflow: hidden; /* Shine efekti için */
}
.btn:hover{transform:translateY(-1px)}
/* Buton Shine (Cam Parlama) Animasyonu */
.btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg); pointer-events: none; transition: none;
}
.btn:hover::after { left: 150%; transition: left 0.6s ease-in-out; }

.btn.primary{background:var(--info);border-color:transparent;color:#fff}
.btn.primary:hover {
  background: #1d6ff3; /* --info renginin biraz daha koyusu */
  transform: translateY(-2px);
}
.btn.social-google {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.btn.guest {
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  color: #475569;
  font-weight: 600;
  border-color: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.section-title{margin:0 14px 8px;font-weight:500;letter-spacing:.1px}
.disclaimer{font-size:12px;color:var(--muted);padding:8px 16px 6px}

/* Form UX */
.field{display:flex;flex-direction:column;gap:6px;cursor:text}
/* Modern auth formlarında label'ları gizliyoruz, placeholder yeterli */
.auth-page .field label {
  display: none;
}
.field:active{opacity:.96}
.input{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);color:var(--ink);width:100%;font-size:16px}
.input::placeholder{color:#98a2b3}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* (YENİ) Auth sayfalarındaki input'lar için daha belirgin focus stili */
.auth-page .input:focus {
  background-color: var(--card);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}
.checkbox{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}

/* (YENİ) Şifre Güçlülük Göstergesi Stilleri */
.strength-meter-bar {
  width: 100%;
  height: 6px;
  background-color: var(--chip);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}
.strength-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.strength-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s ease;
}

/* Status & meters */
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--pill-bg);color:var(--pill-ink);border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#ff6b6b}
.status{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;padding:6px 12px;font-weight:800;font-size:13px}
.status.closed { background: var(--danger); }
.status.warn { background: #fefce8; color: #a16207; }
.divider{height:2px;background:var(--line);margin:8px 0 10px;border-radius:4px}
.capacity{font-weight:800;letter-spacing:.2px}
.meter{height:8px;background:var(--meter-bg);border-radius:10px;overflow:hidden}
.meter>i{display:block;height:100%;background:#22c55e;width:0;transition:width .25s ease}
.meter.warn>i{background:var(--warn)} .meter.full>i{background:var(--danger)}

/* Map & list */
.map{height:260px;border-radius:22px;margin:8px 14px;overflow:hidden;box-shadow:var(--shadow);background:var(--chip);border:1px solid var(--line)}
.map iframe{border:0;width:100%;height:100%}
.map-controls{display:flex;gap:8px;margin:0 14px 10px}
.map-controls input{flex:1;border-radius:12px;border:1px solid var(--line);padding:10px 12px;background:var(--card);color:var(--ink)}

.list{padding:0 14px 12px}
.pcard{
  position:relative;border-radius:18px;box-shadow:var(--shadow);padding:14px;margin:10px 0;
  background: linear-gradient(180deg, var(--card) 95%, #f1f1f5 100%); /* Kart rengini daha baskın yap */
  border:1px solid var(--line)
}
:root[data-theme="dark"] .pcard { background: linear-gradient(180deg, var(--card) 95%, #080d17 100%); } /* Koyu tema için */
:root[data-theme="midnight"] .pcard { background: linear-gradient(180deg, var(--card) 95%, #02020a 100%); }

.pcard.full,.pcard.closed{background:#ffecec;border-color:#ffb6b6}
:root[data-theme="dark"] .pcard.full,:root[data-theme="dark"] .pcard.closed{background:#2a0f14;border-color:#7a1f2a} /* Koyu tema için */
:root[data-theme="midnight"] .pcard.full,:root[data-theme="midnight"] .pcard.closed{background:#2e1015;border-color:#5c1822}
.pcard.closed .routebtn{pointer-events:none}
.badge{position:absolute;right:12px;top:12px;border-radius:999px;padding:6px 12px;font-weight:800;color:#fff;background:#10b981}
.badge.closed{background:#ef4444}
.badge.warn { background: #fefce8; color: #a16207; }
.pname{font-weight:500;font-size:17px;margin-bottom:6px;}
.distpill{display:inline-flex;align-items:center;gap:6px;background:var(--pill-bg);color:var(--pill-ink);border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px; line-height: 1;}
.pcard-info-row {
  display: flex; /* Ana düzen flex olarak kalır */
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
/* (YENİ) Mesafe ve TVS'yi gruplamak için */
.pcard-location-info {
  display: flex;
  flex-direction: column; /* Alt alta sıralama */
  gap: 6px; /* Aralarındaki boşluk */
}
.pcard-capacity-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.routebtn{background:var(--primary);color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;border:0;box-shadow:var(--shadow-sm);cursor:pointer}
.listrow{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.miniMeter{height:6px;background:var(--meter-bg);border-radius:6px;overflow:hidden;width:90px}
.miniMeter>i{display:block;height:100%;background:#16a34a; transition: width 0.3s ease;}
.miniMeter.warn > i { background: var(--warn); }
.miniMeter.full > i { background: var(--danger); }
.pcard .listrow {
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 12px;
}
.btn-detail {
    appearance: none;
    border: none;
    background: var(--chip);
    color: var(--chip-ink);
    padding: 8px 12px;
    border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.pcard.full .miniMeter > i, .pcard.closed .miniMeter > i { background-color: #ef4444; }
.btn-icon {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--card);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

/* (YENİ) Doluluk Uyarısı Animasyonu */
@keyframes blinkWarning {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.95); box-shadow: 0 0 8px var(--danger); }
}
.blink-warning {
  animation: blinkWarning 0.3s ease-in-out 3;
}
.btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--muted);
    transition: all .2s ease;
}
.btn-icon.active svg {
    fill: #ffc107; /* Sarı */
    stroke: #ffc107;
}
/* (YENİ) TVS (Tahmini Varış Süresi) Stili */
.eta-pill {
  font-size: 12px;
  color: var(--muted);
}

/* Tabs */
.tabbar{
  position:absolute;
  left:0; right:0; bottom:0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top:1px solid rgba(0,0,0,0.07);
  display:flex; justify-content:space-around; gap:6px;
  padding: 8px 10px; /* Üst, sağ, sol boşluklar */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); /* Alt boşluk + güvenli alan */
  z-index:50
}
:root[data-theme="dark"] .tabbar {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.95));
  border-top-color: rgba(255,255,255,0.1);
}
:root[data-theme="midnight"] .tabbar {
  background: linear-gradient(180deg, rgba(16, 16, 37, 0.75), rgba(16, 16, 37, 0.95));
  border-top-color: rgba(255,255,255,0.1);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  transition: all .2s ease;
  position: relative;
}
.tab:active { transform: scale(.95); }

.tab .ico {
  width: 26px;
  height: 26px;
}
.tab .ico svg {
  width: 100%; height: 100%;
  stroke-width: 2;
  transition: all .2s ease-in-out;
}
.tab .tab-label { font-size: 11px; font-weight: 600; }

.tab.active { color: var(--primary); }
.tab.active .ico svg { fill: var(--primary); }


/* Info pages */
.sheet{padding:16px 16px 120px;min-height:100%}
.infoCard{border-radius:22px;box-shadow:var(--shadow);padding:16px;border:1px solid var(--line)}
:root[data-theme="dark"] .infoCard{background:linear-gradient(135deg,#0f1b35,#0b1430);border:1px solid rgba(255,255,255,.06)}
:root[data-theme="midnight"] .infoCard{background:linear-gradient(135deg,#101025,#0a0a1a);border:1px solid rgba(255,255,255,.06)}
.back{display:inline-flex;align-items:center;gap:6px;padding:10px;border-radius:10px;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);color:inherit}
.h1{font-size:22px;font-weight:800;margin:12px 0}

/* Toast & modal */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + var(--safe-b));background:#111827;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.toast.show{opacity:1}
.modal{
  position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);z-index:60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  padding: 0 16px;
}
.modal.on{
  opacity: 1; visibility: visible; pointer-events: auto;
}
.modal.blur-bg {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal.on .box{
  animation: modalSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform: scale(1) translateY(0); opacity: 1;
}
/* (YENİ) Tam Ekran Modal Stili */
.modal.full-screen {
    padding: 0;
    background: var(--bg); /* Arka planı opak yap */
    z-index: 1000; /* Her şeyin üzerinde olmasını sağla */
}
.modal.full-screen .box {
    height: 100%;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    justify-content: center;
}
.modal .box{
  max-width:var(--app-w);width:100%;margin:0 auto;
  background:rgba(255, 255, 255, 0.65);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);
  padding:20px;border:1px solid rgba(255, 255, 255, 0.6);
  transform: scale(0.95) translateY(10px); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}
:root[data-theme="dark"] .modal .box {
  background:rgba(15, 23, 42, 0.65); border:1px solid rgba(255, 255, 255, 0.1);
}
:root[data-theme="midnight"] .modal .box {
  background:rgba(16, 16, 37, 0.65); border:1px solid rgba(255, 255, 255, 0.1);
}
.modal h3{margin:0 0 6px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

@keyframes modalSpring {
  0% { opacity: 0; transform: scale(0.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Date & Weather */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 14px}
.bigCard{background:linear-gradient(180deg,#e7f0ff,#dfe8ff);border-radius:24px;box-shadow:var(--shadow);padding:18px 16px;border:1px solid var(--line);text-align:center}
.bigNum{font-size:56px;font-weight:800;line-height:1;letter-spacing:.3px}
.bigTitle{font-size:18px;font-weight:700;margin-bottom:6px}
.weatherIcon{font-size:36px;margin-bottom:6px}
:root[data-theme="dark"] .bigCard{background:linear-gradient(180deg,#0a1a3a,#0b1732);border-color:rgba(255,255,255,.06)}
:root[data-theme="midnight"] .bigCard{background:linear-gradient(180deg,#1a1a3d,#101025);border-color:rgba(255,255,255,.06)}

/* iOS switch */
.switch{position:relative;width:54px;height:32px}
.switch input{display:none}
.track{position:absolute;inset:0;background:#d1d5db;border-radius:999px;transition:.2s;border:1px solid #c7ccd4;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.25s}
.switch input:checked + .track{background:#1d5cff;border-color:#1d5cff}
.switch input:checked + .track .thumb{left:25px;background:#fff}

/* Home horizontal slider */
.slider{position:relative;overflow:hidden;margin:8px 14px 0;border-radius:18px}
.slider-track{display:flex;will-change:transform;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.slide{flex:0 0 100%;padding:14px}
.slideCard{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:14px;animation:fadeUp .35s ease both}
.slider-dots{display:flex;gap:6px;justify-content:center;padding:10px 0 6px}
.dot{width:7px;height:7px;border-radius:50%;background:#c3d2ff;transition:transform .2s ease,background .2s ease}
.dot.active{background:#0b5cff;transform:scale(1.1)}
.slider-ghost{position:absolute;inset:0}

/* Modern Profil Sayfası */
/* (YENİ) Apple tarzı yumuşak arka plan */
.page { /* Arka planı tüm sayfalara uygula */
  background-image: radial-gradient(circle at 1% 1%, hsla(212, 100%, 85%, 0.7) 0, transparent 50%),
                    radial-gradient(circle at 99% 1%, hsla(300, 100%, 90%, 0.7) 0, transparent 50%),
                    radial-gradient(circle at 50% 50%, hsla(50, 100%, 95%, 0.5) 0, transparent 40%),
                    radial-gradient(circle at 99% 99%, hsla(280, 100%, 88%, 0.7) 0, transparent 50%),
                    radial-gradient(circle at 1% 99%, hsla(20, 100%, 85%, 0.7) 0, transparent 50%);
}
:root[data-theme="dark"] .page {
  background-image: radial-gradient(circle at 1% 1%, hsla(212, 90%, 30%, 0.45) 0, transparent 50%),
                    radial-gradient(circle at 99% 1%, hsla(300, 80%, 25%, 0.45) 0, transparent 50%),
                    radial-gradient(circle at 99% 99%, hsla(280, 80%, 30%, 0.45) 0, transparent 50%),
                    radial-gradient(circle at 1% 99%, hsla(20, 80%, 25%, 0.45) 0, transparent 50%);
}
:root[data-theme="midnight"] .page {
  background-image: radial-gradient(circle at 1% 1%, hsla(260, 90%, 20%, 0.45) 0, transparent 50%),
                    radial-gradient(circle at 99% 1%, hsla(320, 80%, 15%, 0.45) 0, transparent 50%),
                    radial-gradient(circle at 99% 99%, hsla(280, 80%, 20%, 0.45) 0, transparent 50%),
                    radial-gradient(circle at 1% 99%, hsla(240, 80%, 15%, 0.45) 0, transparent 50%);
}


.profile-header {
  text-align: center;
  padding: 32px 20px 24px;
  background: transparent; /* Arka planı saydam yaptık */
  position: relative;
}
:root[data-theme="dark"] .profile-header { background: transparent; }
:root[data-theme="midnight"] .profile-header { background: transparent; }

/* (YENİ) Profil Arka Plan Efekti */
.profile-cover-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, rgba(11, 92, 255, 0.15) 0%, rgba(11, 92, 255, 0) 100%);
  z-index: -1;
  border-radius: 0 0 50% 50% / 0 0 20px 20px;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 4px solid var(--bg); /* Sayfa arka planıyla eşleşmeli */
  box-shadow: 0 8px 24px rgba(11, 92, 255, 0.25);
  position: relative;
}
.profile-avatar svg { width: 50px; height: 50px; }
.profile-header h2 { margin: 0; font-size: 1.8em; font-weight: 700; letter-spacing: -0.5px; }
.profile-header p { margin: 4px 0 0; color: var(--muted); font-size: 1em; }

/* (YENİ) Profil İstatistik Widget Stilleri */
.stats-widget {
  margin: 16px 14px; /* Üst boşluğu artır */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  color: white;
  text-align: center;
  /* Liquid Glass Base for Stats */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* (YENİ) İstatistik İkonu Stili */
.stat-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.stat-icon svg { width: 20px; height: 20px; stroke-width: 2.5; }

/* Colored Glass Stats (Renkli Cam İstatistikler) */
#stat-favs {
  background: rgba(255, 154, 68, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
#stat-reviews {
  background: rgba(60, 140, 231, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
#stat-membership {
  background: rgba(86, 171, 47, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dark Mode Colored Glass Stats */
:root[data-theme="dark"] #stat-favs {
  background: rgba(233, 117, 26, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.15);
}
:root[data-theme="dark"] #stat-reviews {
  background: rgba(42, 110, 189, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.15);
}
:root[data-theme="dark"] #stat-membership {
  background: rgba(86, 171, 47, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.15);
}
/* Midnight Mode Colored Glass Stats */
:root[data-theme="midnight"] #stat-favs,
:root[data-theme="midnight"] #stat-reviews,
:root[data-theme="midnight"] #stat-membership {
  border-color: rgba(255, 255, 255, 0.1);
}

.stat-card-item .stat-value { font-size: 1.6em; font-weight: 800; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.stat-card-item .stat-label { font-size: 0.85em; font-weight: 600; margin-top: 4px; opacity: 0.95; text-transform: uppercase; letter-spacing: 0.5px; }

/* (YENİ) Profil Sayfası Araç Kartı Stilleri */
.profile-car-card {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.profile-car-card:active {
  background-color: var(--chip);
}
.profile-car-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-car-image {
  width: 70px;
  height: 50px;
  flex-shrink: 0;
}
.profile-car-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));
}
.profile-car-info {
  flex-grow: 1;
}
.profile-car-info h4 {
  margin: 0 0 6px;
  font-size: 1.1em;
  font-weight: 600;
}
.profile-car-info .pill {
  font-size: 13px;
  padding: 6px 10px;
}
.profile-car-add-icon {
  font-size: 1.5em;
}
.profile-car-add-text {
  margin: 0;
  font-weight: 600;
}
.action-list { display: flex; flex-direction: column; gap: 2px; }
.action-item { display: flex; align-items: center; padding: 14px 16px; gap: 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); transition: background-color 0.2s ease; }
.action-list a:last-child { border-bottom: none; }
.action-item:active { background-color: rgba(var(--primary-rgb), 0.05); }
.action-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: white; }
.action-icon svg { width: 18px; height: 18px; stroke-width: 2.5; }
.action-text { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.action-title { font-weight: 600; font-size: 15px; }
.action-desc { font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.action-chevron { color: var(--muted); }
.action-chevron svg { width: 20px; height: 20px; color: #c7c7cc; }
:root[data-theme="dark"] .action-chevron svg { color: #535358; }
:root[data-theme="midnight"] .action-chevron svg { color: #535358; }

.logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 10px;
  color: var(--danger);
  background: transparent;
  border: none; font-size: 1em; text-align: center; cursor: pointer; font-weight: 600; border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #ff6b6b, #ff3b30);
  border: none;
  font-size: 1em;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  border-radius: 16px;
  transition: all 0.2s ease;
  /* Liquid Glass Red Button (Kırmızı Cam Buton) */
  background: rgba(239, 68, 68, 0.75) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* (YENİ) Skeleton Loader Stilleri */
.skeleton .skel {
  border-radius: 8px;
  background: var(--chip);
  background-image: linear-gradient(90deg, var(--chip) 0px, #f5f7ff 40px, var(--chip) 80px);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite linear;
}
:root[data-theme="dark"] .skeleton .skel {
  background-image: linear-gradient(90deg, var(--chip) 0px, #1e293b 40px, var(--chip) 80px);
}
:root[data-theme="midnight"] .skeleton .skel {
  background-image: linear-gradient(90deg, var(--chip) 0px, #2a2a5a 40px, var(--chip) 80px);
}
.pcard.skeleton .pname { width: 60%; height: 20px; margin-bottom: 10px; }
.pcard.skeleton .distpill { width: 120px; height: 26px; }
.pcard.skeleton .pcard-capacity-info { display: none; } /* Kapasiteyi gizle */
.pcard.skeleton .listrow { border-top: none; padding-top: 0; margin-top: 12px; }
.pcard.skeleton .listrow .pcard-actions {
  display: flex;
  gap: 8px;
}
.pcard.skeleton .listrow .skel {
  height: 40px;
  border-radius: 999px;
}
.pcard.skeleton .listrow .skel.w-large { width: 120px; }
.pcard.skeleton .listrow .skel.w-small { width: 90px; }
.pcard.skeleton .listrow .skel.w-icon { width: 40px; border-radius: 50%; }

/* Splash + Konum Loading + Hava anim */
#splash,#locLoading{
  position:fixed; inset:0; display:grid; place-items:center; z-index:90;
  background: rgba(0, 0, 0, 0.3); /* (DÜZELTME) Arka planı karart */
  backdrop-filter: blur(10px); /* (DÜZELTME) Buzlu cam efekti için blur'u artır */
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
#splash.on,#locLoading.on{ opacity: 1; visibility: visible; }
.splash-card{
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px 20px;
  box-shadow:var(--shadow); text-align:center; width:min(320px,90vw);
}
.splash-logo{font-weight:900; font-size:22px; letter-spacing:.3px; color:var(--primary)}
.loader{
  width:26px;height:26px;border-radius:50%;border:3px solid #aac4ff;border-top-color:var(--primary);
  margin:10px auto 0; animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* (YENİ) Plus Splash Stilleri */
#splash.plus .splash-card {
  border: 2px solid #6366f1; /* Plus Rengi */
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.2);
  background: linear-gradient(135deg, var(--card), #e0e7ff);
}
:root[data-theme="dark"] #splash.plus .splash-card {
  background: linear-gradient(135deg, var(--card), #1e1b4b);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.1);
}
#splash.plus .splash-logo {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
#splash.plus .splash-logo::after {
  content: 'PLUS';
  position: absolute;
  top: -8px; right: -24px;
  background: #6366f1;
  color: white;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 6px;
  -webkit-text-fill-color: white;
  font-family: var(--font);
  letter-spacing: 1px;
  transform: rotate(15deg);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

/* (YENİ) Premium Splash Stilleri */
#splash.premium .splash-card {
  border: 2px solid #f59e0b; /* Premium Rengi (Gold/Amber) */
  box-shadow: 0 15px 40px rgba(245, 158, 11, 0.25);
  background: linear-gradient(135deg, var(--card), #fffbeb);
}
:root[data-theme="dark"] #splash.premium .splash-card {
  background: linear-gradient(135deg, var(--card), #451a03);
  box-shadow: 0 15px 40px rgba(245, 158, 11, 0.15);
}
#splash.premium .splash-logo {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
#splash.premium .splash-logo::after {
  content: 'PREMIUM';
  position: absolute;
  top: -12px; right: -40px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: white;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 99px;
  -webkit-text-fill-color: white;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: 1px;
  transform: rotate(10deg);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
  border: 1px solid rgba(255,255,255,0.3);
}

.wx-anim.sun{animation:pulse 1.6s ease-in-out infinite}
.wx-anim.cloud{animation:float 2.4s ease-in-out infinite}
.wx-anim.rain{position:relative}
.wx-anim.rain::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:8px;background:#3b82f6;border-radius:2px;transform:translateX(-50%);animation:drop 0.8s linear infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes drop{0%{opacity:0;transform:translate(-50%,-6px)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,6px)}}

/* Sıralama çubuğu */
.sortbar{display:flex;gap:8px;align-items:center;justify-content:center;margin:8px 14px}
.sortbar .seg{margin:0}
/* Modern seg/chip görünümü (yalnızca Otoparklar üst çubuğu için) */
#sortBar .seg {
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
#sortBar .seg button {
  appearance: none;
  border: 0;
  background: transparent; 
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .1px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #445069;
}
:root[data-theme="dark"] #sortBar .seg button { color: #d1d7e6; }

.filter-btn {
  background-color: var(--chip);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
#sortBar .seg button .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9db6ff; opacity: .9;
  box-shadow: 0 0 0 2px rgba(125,150,255,.15);
}
#sortBar .seg button.active {
  color: #0b3ea8;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
:root[data-theme="dark"] #sortBar .seg button.active { color: #bcd3ff; }
:root[data-theme="midnight"] #sortBar .seg button.active { color: #a0a0ff; }

#sortBar .seg button:active { transform: scale(.98); }

/* Yakındakiler butonları */
.nearby-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.nearby-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 18px;
  background-color: var(--card); /* Düz renk arka plan */
  box-shadow: var(--shadow);
  padding: 12px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative; overflow: hidden;
}
:root[data-theme="dark"] .nearby-btn {
  background-color: var(--card);
  border: 1px solid var(--line);
}
:root[data-theme="midnight"] .nearby-btn {
  background-color: var(--card);
  border: 1px solid var(--line);
}
.nearby-icon { font-size: 2.2em; line-height: 1; }
.nearby-icon {
    font-size: 2.2em; /* İkonların boyutu için */
    line-height: 1;
    color: var(--primary);
}
.nearby-label { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.nearby-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(14,23,41,.1), 0 3px 6px rgba(14,23,41,.05);
  border-color: var(--primary);
}
/* Nearby Buton Shine */
.nearby-btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg); pointer-events: none; transition: none;
}
.nearby-btn:hover::after { left: 150%; transition: left 0.6s ease-in-out; }
.nearby-btn:active {
  transform: scale(.96);
}
/* Otoparklar üst çubuğu — Harita/Liste stili + orantılı butonlar */
#sortBar .seg{
  display:flex;
  flex: 1;
  gap:8px;
  padding: 6px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
#sortBar .seg button{
  flex-grow:1; /* sıralama butonları genişlesin */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border:0;
  border-radius:14px;
  background:transparent;
  font-weight:800;
  letter-spacing:.1px;
  cursor:pointer;
  color:#445069;
  transition:transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.filter-btn {
  flex-shrink: 0; /* küçülmesin */
  position: relative; 
  width: 52px;
  height: 52px;
  border-radius: 14px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted) !important;
}
.filter-btn svg {
  width: 20px;
  height: 20px;
}
.filter-btn.active::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--chip);
}

/* (YENİ) Aktif Filtre Butonu Stili */
#btn-open-filters.active {
  background-color: var(--chip) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: var(--app-w);
  z-index: 100;
  /* Intro ile aynı hareketli arka plan */
  background: linear-gradient(-45deg, #0b5cff, #002b80, #3b82f6, #0b5cff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)); /* İçeriği çentikten aşağı it */
  min-height: 64px;
  box-shadow: 0 4px 12px rgba(0, 91, 255, 0.25);
  transition: background 0.3s ease, box-shadow 0.3s ease; /* Geçiş efekti ekle */
  overflow: hidden; /* Yıldızların taşmasını engelle */
}
/* Header içindeki öğeleri yıldızların üzerine çıkar */
.appbar > * {
  position: relative;
  z-index: 5;
}
.appbar.scrolled {
  background: var(--primary); /* Kaydırıldığında daha opak/koyu arka plan */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Daha belirgin gölge */
}
:root[data-theme="dark"] .appbar.scrolled {
  background: var(--primary); /* Koyu temada da aynı birincil renk */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Koyu temaya uygun daha koyu gölge */
}
:root[data-theme="dark"] .appbar {
    background: linear-gradient(-45deg, #1e3a8a, #002b80, #3b82f6, #1e3a8a);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
:root[data-theme="midnight"] .appbar {
    background: linear-gradient(-45deg, #4c1d95, #2e1065, #5b21b6, #4c1d95);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

/* (YENİ) Premium Header Stilleri */
@keyframes gradientBG-premium {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.appbar.premium {
    background: linear-gradient(-45deg, #f59e0b, #d97706, #fbbf24, #f59e0b);
    background-size: 400% 400%;
    animation: gradientBG-premium 15s ease infinite;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

:root[data-theme="dark"] .appbar.premium,
:root[data-theme="midnight"] .appbar.premium {
    background: linear-gradient(-45deg, #92400e, #d97706, #f59e0b, #92400e);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25);
}

/* Premium header için kaydırıldığında da aynı kalsın */
.appbar.premium.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
:root[data-theme="dark"] .appbar.premium.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }

/* (YENİ) Plus Header Stilleri */
@keyframes gradientBG-plus {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.appbar.plus {
    background: linear-gradient(-45deg, #6366f1, #4338ca, #818cf8, #6366f1);
    background-size: 400% 400%;
    animation: gradientBG-plus 15s ease infinite;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

:root[data-theme="dark"] .appbar.plus,
:root[data-theme="midnight"] .appbar.plus {
    background: linear-gradient(-45deg, #3730a3, #312e81, #4338ca, #3730a3);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
}

.appbar.plus .plus-badge {
    display: inline-flex;
}

.appbar.premium .premium-badge {
    display: inline-flex;
}

.appbar.plus.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
:root[data-theme="dark"] .appbar.plus.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }

/* (YENİ) Özel Üye Header Stilleri */
.appbar.ozel-uye {
    background: linear-gradient(-45deg, #8b5cf6, #ec4899, #d946ef, #8b5cf6);
    background-size: 400% 400%;
    animation: gradientBG-plus 15s ease infinite;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
:root[data-theme="dark"] .appbar.ozel-uye,
:root[data-theme="midnight"] .appbar.ozel-uye {
    background: linear-gradient(-45deg, #5b21b6, #9d174d, #a21caf, #5b21b6);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
}
.appbar.ozel-uye .ozel-uye-badge {
    display: inline-flex;
}
.appbar.ozel-uye.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
:root[data-theme="dark"] .appbar.ozel-uye.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }

/* (YENİ) Geliştirici Mesajı Kartı (Özel Üye) */
.dev-message-card {
    /* Modern Dark Tech Tasarım */
    background: linear-gradient(145deg, #0f172a, #1e293b) !important; /* Koyu lacivert tonları */
    border: 1px solid rgba(56, 189, 248, 0.3) !important; /* Neon mavi çerçeve */
    color: white !important;
    display: none; /* JS ile açılır */
    box-shadow: 0 15px 35px -5px rgba(14, 165, 233, 0.35) !important; /* Parlak mavi gölge */
    position: relative;
    overflow: hidden;
}
/* Üst kısımda neon parlama çizgisi */
.dev-message-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #22d3ee, #818cf8);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.8);
}
.dev-message-card h3 { 
    background: linear-gradient(to right, #38bdf8, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(56, 189, 248, 0.15);
}
.dev-message-card p { color: #cbd5e1 !important; font-weight: 500 !important; }


/* Header Logosu Parlama Efekti */
.appbar .brand {
  position: relative;
  display: inline-flex; /* Maskeleme için gerekli */
}
.appbar .brand::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  background-size: 200% 100%; background-position: 150% 0;
  -webkit-mask-image: url('images/parkyolu-logo-beyaz.png');
  mask-image: url('images/parkyolu-logo-beyaz.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  animation: shineEffect 3s infinite linear;
  pointer-events: none;
}

/* (YENİ) Header Başlık Animasyonu */
.title-anim-wrapper {
  position: relative;
  height: 32px; /* Metin yüksekliğine göre ayarlandı */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
}
.title-main {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size: 1.4em;
  transform: translateX(0);
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.title-slogan {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  font-family: 'Pacifico', cursive;
  font-size: 1.4em;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  width: auto;
  clip-path: inset(0 100% 0 0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
/* Slogan Gösterim Durumu */
.title-anim-wrapper.show-slogan .title-main {
  transform: translateX(-150%); /* Sola kaybol */
  opacity: 0;
}
.title-anim-wrapper.show-slogan .title-slogan {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  animation: handwriting 3s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

@keyframes handwriting {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@media (max-width: 380px) {
  .title-slogan { font-size: 1.1em; }
}

/* (YENİ) Plus Üyelik Rozeti */
.plus-badge {
    display: none; /* JS ile .appbar.plus üzerinden gösterilir */
    align-items: center;
    gap: 4px;
    font-family: 'Pacifico', cursive;
    font-size: 0.6em; /* Ana başlığa göre oranlı */
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 999px; /* Tam yuvarlak */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-left: 8px;
    text-shadow: none; /* Ana başlığın gölgesini almasın */
}
.plus-badge svg {
    width: 10px;
    height: 10px;
    stroke-width: 3;
}

/* (YENİ) Premium Üyelik Rozeti */
.premium-badge {
    display: none; /* JS ile .appbar.premium üzerinden gösterilir */
    align-items: center;
    gap: 4px;
    font-family: 'Pacifico', cursive;
    font-size: 0.6em;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-left: 8px;
    text-shadow: none;
}
.premium-badge svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

/* (YENİ) Özel Üye Rozeti */
.ozel-uye-badge {
    display: none; /* JS ile gösterilir */
    align-items: center;
    gap: 4px;
    font-family: 'Pacifico', cursive;
    font-size: 0.6em;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-left: 8px;
    text-shadow: none;
}
.ozel-uye-badge svg { width: 12px; height: 12px; stroke-width: 2.5; }
/* === ALT MAVİ BAR (navigasyon bar arkası) === */
#sys-shelf-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: env(safe-area-inset-bottom, 0px); /* Sadece sistem çubuğu kadar yükseklik */
  background: var(--card); /* Tabbar ile aynı renk */
  z-index: 49; /* Tabbar'ın hemen arkasında */
}
:root[data-theme="dark"] #sys-shelf-bottom { background: var(--card); }

:root[data-theme="dark"] #sortBar .seg button{ color:var(--muted) }
#sortBar .seg button.active{
  background:var(--chip);
  color:var(--primary);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
:root[data-theme="dark"] #sortBar .seg button.active{ background: #1e2b3b; }
:root[data-theme="midnight"] #sortBar .seg button.active{ background: #2a2a5a; }
#sortBar .seg button:active{ transform:scale(.97) }

/* Toggle satırı spacing */
#hideFullWrap{ gap:10px; align-items:center; justify-content:center; margin:8px 14px 0 }

/* Fiyat Tarifesi Butonları */
.tariff-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background-color: var(--chip);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.tariff-btn {
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 10px 6px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tariff-btn.active {
  background-color: var(--card);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* (YENİ) Çevresel Etki Kartı Stilleri */
.eco-card {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important; /* Yeşil tonları */
  border-color: #a7f3d0 !important;
  text-align: center;
}
:root[data-theme="dark"] .eco-card {
  background: linear-gradient(135deg, #064e3b, #065f46) !important;
  border-color: #047857 !important;
}
:root[data-theme="midnight"] .eco-card {
  background: linear-gradient(135deg, #064e3b, #065f46) !important;
  border-color: #047857 !important;
}
.eco-icon { font-size: 3em; margin-bottom: 8px; display: block; }
.eco-stats { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.eco-stat-item {
  background: rgba(255,255,255,0.6);
  padding: 12px;
  border-radius: 16px;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid rgba(0,0,0,0.05);
}
:root[data-theme="dark"] .eco-stat-item { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
:root[data-theme="midnight"] .eco-stat-item { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
.eco-val { font-size: 1.6em; font-weight: 800; color: #059669; line-height: 1; }
:root[data-theme="dark"] .eco-val { color: #34d399; }
.eco-unit { font-size: 0.9em; font-weight: 600; opacity: 0.8; margin-top: 2px; }
.eco-label { font-size: 0.75em; color: var(--muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* Filtreleme Modalı Stilleri */
.filter-group { margin-bottom: 20px; }
.filter-group-title { font-size: 1em; font-weight: 600; color: var(--muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.filter-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.filter-option {
  position: relative;
  cursor: pointer;
}
.filter-option input { display: none; }
.filter-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background-color: var(--chip);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.filter-option span::before {
  content: '☐';
  font-size: 1.2em;
  color: var(--muted);
}
.filter-option input:checked + span {
  background-color: var(--pill-bg);
  border-color: var(--primary);
  color: var(--primary);
}
.filter-option input:checked + span::before {
  content: '☑';
  color: var(--primary);
}
/* Otopark Detay Sayfası Modernizasyon */
.park-detail-header { display: flex; align-items: center; margin-bottom: 10px; }
.park-detail-map {
    height: auto;
    border-radius: 18px;
    background: var(--chip);
    margin-bottom: 12px;
    border: 1px solid var(--line);
    padding: 8px;
}
.park-detail-map iframe { width: 100%; height: 180px; border: 0; border-radius: 12px; display: block; }

.park-detail-title-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; }
.park-detail-title-card h1 { font-size: 22px; font-weight: 500; margin: 0; line-height: 1.3; }
.park-detail-title-card .badge { position: static; flex-shrink: 0; }
.park-detail-info-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.info-item { display: flex; align-items: center; gap: 12px; }
.info-icon { font-size: 1.2em; }
.capacity-gauge-card { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; text-align: center; padding: 16px; background: linear-gradient(135deg, #eaf1ff, #e6edff); }
:root[data-theme="dark"] .capacity-gauge-card { background: linear-gradient(135deg, #0f1b35, #0b1430); }
:root[data-theme="midnight"] .capacity-gauge-card { background: linear-gradient(135deg, #1a1a3d, #101025); }
.gauge-container { position: relative; grid-column: 1 / 2; display: flex; align-items: center; justify-content: center; }
.gauge { width: 80px; height: 80px; transform: rotate(-90deg); }
.gauge-bg { fill: none; stroke: rgba(0,0,0,0.08); stroke-width: 10; }
.gauge-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.5s ease; }
.gauge-fg.warn { stroke: var(--warn); }
.gauge-fg.full { stroke: var(--danger); }
.gauge-text { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-text span:first-child { font-size: 20px; font-weight: 800; color: var(--ink); }
.gauge-text span:last-child { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.capacity-gauge-card .capacity-item { grid-column: span 1; }
.capacity-item { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid rgba(0,0,0,0.05); }
:root[data-theme="dark"] .capacity-item { border-left-color: rgba(255,255,255,0.05); }
:root[data-theme="midnight"] .capacity-item { border-left-color: rgba(255,255,255,0.05); }
.capacity-item span:first-child { font-size: 22px; font-weight: 800; color: var(--primary); }
.capacity-item span:last-child { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.services-card { padding: 16px; }
.services-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-item { display: flex; align-items: flex-start; gap: 16px; }
.service-item.disabled {
  color: var(--muted);
  opacity: 0.7;
}
.service-icon { font-size: 1.8em; line-height: 1.2; flex-shrink: 0; width: 30px; text-align: center; }
.service-text { display: flex; flex-direction: column; gap: 2px; }
.service-title { font-weight: 600; font-size: 15px; }
.service-desc { font-size: 14px; color: var(--muted); line-height: 1.4; font-weight: 400; }
.service-item.disabled .service-desc { color: inherit; }

.park-detail-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; padding: 0; background: transparent; box-shadow: none; border: none; }
.park-detail-actions .btn { padding: 16px; font-size: 1.1em; border-radius: 16px; }
.park-detail-actions .favToggle { background: var(--chip); color: var(--chip-ink); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; }
.park-detail-actions .favToggle .fav-icon::before { content: '☆'; font-size: 1.4em; }
.park-detail-actions .favToggle.active { background-color: #fffbe6; border-color: #fde68a; color: #ca8a04; }
.park-detail-actions .favToggle.active .fav-icon::before { content: '★'; }
:root[data-theme="dark"] .park-detail-actions .favToggle.active { background-color: #28200c; border-color: #785d17; color: #fde047; }
:root[data-theme="midnight"] .park-detail-actions .favToggle.active { background-color: #28200c; border-color: #785d17; color: #fde047; }
/* Modern Boş Durum Kartı (Favoriler, vb.) */
.reviews-card { padding: 16px; }
.reviews-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.reviews-title { margin: 0; font-size: 16px; font-weight: 700; }
.reviews-summary { display: flex; align-items: center; gap: 6px; }
.reviews-summary .stars { font-size: 1.2em; color: #ffc107; }
.reviews-summary span { font-size: 13px; font-weight: 600; color: var(--muted); }
.reviews-list { display: flex; flex-direction: column; gap: 16px; max-height: 300px; overflow-y: auto; }
.review-item { display: flex; gap: 12px; }
.review-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--chip); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.review-content .review-author { font-weight: 700; }
.review-content .review-stars { font-size: 1em; color: #ffc107; margin: 2px 0; }
.review-content .review-text { font-size: 14px; line-height: 1.5; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.review-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-edit-review, .btn-delete-review {
  appearance: none;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-edit-review {
  background-color: var(--chip);
  color: var(--primary);
  border: 1px solid var(--line);
}
.btn-delete-review {
  background-color: #ffebeb;
  color: var(--danger);
}
.reviews-list:empty::after { content: 'Henüz yorum yapılmamış. İlk yorumu siz yapın!'; color: var(--muted); text-align: center; padding: 20px 0; }

/* Yorum Ekleme Modalı */
.review-rating-input { display: flex; justify-content: center; gap: 8px; font-size: 2.5em; cursor: pointer; }
.star-input { color: #e0e0e0; transition: color 0.2s ease; }
.star-input.hover, .star-input.selected { color: #ffc107; }
.empty-state-card {
  text-align: center;
  padding: 40px 20px;
  margin: 20px 0;
  /* Liquid Glass (Cam Efekti) */
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
  border-radius: 18px;
}
.empty-state-icon {
  font-size: 3em;
  line-height: 1;
  margin-bottom: 16px;
  filter: grayscale(80%);
  opacity: 0.6;
}
.empty-state-card h3 {
  margin: 0 0 8px;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--ink);
}
.empty-state-card p {
  margin: 0;
  color: var(--muted);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
:root[data-theme="dark"] .empty-state-card {
  background: rgba(15, 23, 42, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="midnight"] .empty-state-card {
  background: rgba(26, 26, 61, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}

/* Yorum Ekleme Modalı */
.review-rating-input { display: flex; justify-content: center; gap: 8px; font-size: 2.5em; cursor: pointer; }
.star-input { color: #e0e0e0; transition: color 0.2s ease; }
.star-input.hover, .star-input.selected { color: #ffc107; }

.pricing-card { padding: 16px; }
.pricing-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.pricing-list { display: flex; flex-direction: column; gap: 10px; }
.price-tier { display: flex; justify-content: space-between; align-items: center; background: var(--chip); padding: 12px; border-radius: 10px; }
.price-tier .duration { font-weight: 600; }
.price-tier .price { font-weight: 700; font-size: 1.1em; color: var(--primary); }
.pricing-list:empty::after { content: 'Bu otopark için fiyat bilgisi bulunmamaktadır.'; color: var(--muted); text-align: center; padding: 10px 0; }

/* (YENİ) Kaydedilmiş Araç Görünümü Stilleri */
/* Liquid Glass Efekti (Aracım ve Ana Sayfa) */
#page-mycar .card,
#page-home .card,
#page-home .bigCard,
#page-home .nearby-btn,
#page-park-detail .card,
#page-profile .card,
#page-about .infoCard,
#page-about .social-card,
#page-privacy .infoCard,
#page-settings .settings-card,
#page-settings-theme .settings-card,
#page-settings-sound .settings-card,
#page-settings-nav .settings-card { /* Gizlilik sayfası kartı */
  /* Liquid Glass (Cam Efekti) */
  background: rgba(255, 255, 255, 0.15) !important; /* Çok daha şeffaf */
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
  position: relative; /* Pseudo-element konumlandırması için */
  overflow: hidden; /* Pseudo-elementin kart dışına taşmasını engelle */
}

/* (YENİ) Premium kullanıcılar için Otoparklar sayfasında buzlu cam efekti */
body.user-premium #page-parks .pcard {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
}

/* Premium kullanıcı için dolu/kapalı kartların kenarlık rengini koru */
body.user-premium #page-parks .pcard.full,
body.user-premium #page-parks .pcard.closed {
  border-color: #ffb6b6 !important;
}

/* Koyu ve Gece Yarısı temaları için de uyarlayalım */
:root[data-theme="dark"] body.user-premium #page-parks .pcard {
  background: rgba(15, 23, 42, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="midnight"] body.user-premium #page-parks .pcard {
  background: rgba(26, 26, 61, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] body.user-premium #page-parks .pcard.full,
:root[data-theme="dark"] body.user-premium #page-parks .pcard.closed {
  border-color: #7a1f2a !important;
}
:root[data-theme="midnight"] body.user-premium #page-parks .pcard.full,
:root[data-theme="midnight"] body.user-premium #page-parks .pcard.closed {
  border-color: #5c1822 !important;
}

/* Slider Kartı İçin Özel Opaklık (Daha az şeffaf) */
#page-home #home-slider-card {
  background: rgba(255, 255, 255, 0.45) !important;
}

/* BigCard için özel metin rengi düzeltmesi */
#page-home .bigCard {
  /* Mavi Renkli Cam Efekti (Blue Glass) */
  background: rgba(11, 92, 255, 0.65) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px 0 rgba(11, 92, 255, 0.3) !important;
  /* Metin Vurgusu */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
#page-home .bigCard .weatherIcon { text-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }

/* Car Finder Saved State için Hafif Mavi Cam */
.car-finder-card.saved {
  background: rgba(11, 92, 255, 0.15) !important;
  border-color: rgba(11, 92, 255, 0.3) !important;
}

/* (YENİ) Hesap Doğrulama Uyarısı - Sarı Cam */
#verify-prompt-card {
  background: rgba(254, 240, 138, 0.6) !important;
  border: 1px solid rgba(250, 204, 21, 0.5) !important;
  box-shadow: 0 8px 32px 0 rgba(234, 179, 8, 0.15) !important;
  color: #854d0e !important; /* Koyu sarı metin */
}

/* Nearby Buton Hover Efekti */
#page-home .nearby-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3) !important;
}

/* (YENİ) Aracım Sayfası - Tüm Butonlar İçin Liquid Glass Efekti */
#page-mycar .btn {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: var(--ink);
  transition: all 0.2s ease;
}
#page-mycar .btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px);
}
#page-mycar .btn:active { transform: scale(0.98); }

/* Primary Butonlar (Renkli Cam) */
#page-mycar .btn.primary {
  background: rgba(11, 92, 255, 0.65) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 20px rgba(11, 92, 255, 0.25);
}
/* (YENİ) Araç Seçim Kartı Stilleri */
.car-selection-intro { text-align: center; margin-bottom: 20px; padding: 10px; }
.selection-icon-wrapper {
  width: 80px; height: 80px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #e0e7ff, #eef2ff);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--primary); box-shadow: 0 8px 20px rgba(11, 92, 255, 0.15);
}
.car-selection-intro h3 { margin: 0 0 8px; font-size: 1.5em; }
.car-selection-intro p { margin: 0; color: var(--muted); font-size: 0.95em; }

#page-mycar .btn.primary:hover {
  background: rgba(11, 92, 255, 0.75) !important;
}

.car-display-card {
  text-align: center;
  padding: 10px 16px 24px; /* Üst boşluk azaltıldı */
  position: relative;
}

/* (YENİ) Audi Arka Plan Logosu */
.car-display-card.has-logo-background::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  background-image: var(--logo-background-image); /* (DÜZELTME) JS değişkenini kullan */
  background-size: var(--logo-background-size, contain);
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.40; /* Opaklık artırıldı */
  z-index: 0; /* Arka plana gönder */
}

/* (YENİ) Hızlı İstatistikler (Quick Stats) */
.car-quick-stats {
  display: flex; align-items: center; justify-content: space-around;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
:root[data-theme="dark"] .car-quick-stats { border-top-color: rgba(255,255,255,0.1); }
.qs-item { display: flex; align-items: center; gap: 10px; text-align: left; }
.qs-icon { font-size: 1.8em; }
.qs-info { display: flex; flex-direction: column; }
.qs-value { font-weight: 800; font-size: 1.1em; line-height: 1.1; color: var(--ink); }
.qs-label { font-size: 0.75em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.qs-divider { width: 1px; height: 30px; background: var(--line); }

/* (YENİ) Cam Efektli İkon Buton */
.btn-icon-glass {
  appearance: none; border: none;
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.2s;
}
:root[data-theme="dark"] .btn-icon-glass { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn-icon-glass:hover { transform: scale(1.05); color: var(--primary); background: rgba(255,255,255,0.6); }
.absolute-top-right {
  position: absolute; top: 12px; right: 12px; z-index: 10;
}

/* Dark Mode için Liquid Glass */
:root[data-theme="dark"] #page-mycar .card,
:root[data-theme="dark"] #page-home .card,
:root[data-theme="dark"] #page-home .bigCard,
:root[data-theme="dark"] #page-home .nearby-btn,
:root[data-theme="dark"] #page-park-detail .card,
:root[data-theme="dark"] #page-profile .card,
:root[data-theme="dark"] #page-about .infoCard,
:root[data-theme="dark"] #page-about .social-card,
:root[data-theme="dark"] #page-privacy .infoCard,
:root[data-theme="dark"] #page-settings .settings-card,
:root[data-theme="dark"] #page-settings-theme .settings-card,
:root[data-theme="dark"] #page-settings-sound .settings-card,
:root[data-theme="dark"] #page-settings-nav .settings-card {
  background: rgba(15, 23, 42, 0.25) !important; /* Dark mode için daha şeffaf */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
  color: var(--ink) !important;
}
:root[data-theme="midnight"] #page-mycar .card,
:root[data-theme="midnight"] #page-home .card,
:root[data-theme="midnight"] #page-home .bigCard,
:root[data-theme="midnight"] #page-home .nearby-btn,
:root[data-theme="midnight"] #page-park-detail .card,
:root[data-theme="midnight"] #page-profile .card,
:root[data-theme="midnight"] #page-about .infoCard,
:root[data-theme="midnight"] #page-about .social-card,
:root[data-theme="midnight"] #page-privacy .infoCard,
:root[data-theme="midnight"] #page-settings .settings-card,
:root[data-theme="midnight"] #page-settings-theme .settings-card,
:root[data-theme="midnight"] #page-settings-sound .settings-card,
:root[data-theme="midnight"] #page-settings-nav .settings-card {
  background: rgba(26, 26, 61, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] #page-home #home-slider-card {
  background: rgba(15, 23, 42, 0.55) !important;
}
/* Dark Mode için Renkli Camlar */
:root[data-theme="dark"] #page-home .bigCard {
  background: rgba(11, 92, 255, 0.45) !important; /* Koyu Mavi Cam */
  color: white !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
:root[data-theme="midnight"] #page-home .bigCard {
  background: rgba(124, 58, 237, 0.45) !important; /* Mor Cam */
  color: white !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
:root[data-theme="dark"] #verify-prompt-card {
  background: rgba(161, 98, 7, 0.4) !important; /* Koyu Sarı Cam */
  border-color: rgba(202, 138, 4, 0.4) !important;
  color: #fef08a !important;
}
:root[data-theme="dark"] .car-finder-card.saved {
  background: rgba(11, 92, 255, 0.25) !important;
}

/* (YENİ) Gelişmiş Ayarlar Sayfası Stilleri */
.settings-header {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 0 20px;
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 24px; font-weight: 700; color: var(--ink);
  text-decoration: none;
}
.settings-group-title {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 24px 0 8px 16px; text-transform: uppercase; letter-spacing: 0.5px;
}
.settings-card {
  padding: 0 !important; overflow: hidden;
  background: var(--card); border-radius: 16px;
}
.settings-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 52px;
  background: transparent; border: none; width: 100%;
  text-align: left; font-family: inherit; font-size: inherit;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.settings-item:last-child { border-bottom: none; }
.settings-item.clickable { cursor: pointer; transition: background-color 0.2s; }
.settings-item.clickable:active { background-color: rgba(0,0,0,0.05); }
:root[data-theme="dark"] .settings-item.clickable:active { background-color: rgba(255,255,255,0.05); }
:root[data-theme="midnight"] .settings-item.clickable:active { background-color: rgba(255,255,255,0.05); }

.settings-icon {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: white;
}
.settings-icon svg { width: 18px; height: 18px; stroke-width: 2.5; }
.settings-label { flex-grow: 1; font-weight: 500; font-size: 16px; }
.settings-control { display: flex; align-items: center; gap: 8px; position: relative; }
.settings-value { color: var(--muted); font-size: 15px; }
.chevron { color: #c7c7cc; font-size: 18px; font-weight: 600; margin-left: 4px; }
.settings-select {
  appearance: none; border: none; background: transparent;
  font-size: 15px; color: var(--muted); text-align: right;
  padding-right: 16px; cursor: pointer;
  position: absolute; inset: 0; opacity: 0; /* Görünmez yapıp üstüne tıklatıyoruz */
}
.settings-control:has(.settings-select) .chevron { margin-left: 0; }
.settings-control:has(.settings-select)::before {
  content: attr(data-value); /* JS ile seçili değeri buraya yazdırabiliriz veya basitçe select'i görünür yapabiliriz */
}

/* (YENİ) iOS Tarzı Seçim Listesi */
.selection-item {
  justify-content: space-between;
}
.selection-item.checked::after {
  content: '';
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007AFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* (YENİ) Buton içi yükleniyor animasyonu */
.inline-loader {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}

/* Dark Mode Butonlar */
:root[data-theme="dark"] #page-mycar .btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}
:root[data-theme="midnight"] #page-mycar .btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}
:root[data-theme="dark"] #page-mycar .btn.primary {
  background: rgba(11, 92, 255, 0.5) !important;
}

/* (YENİ) Veda Sayfası Stilleri */
#page-farewell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: var(--bg); /* Sayfa arka planını kullan */
}
.farewell-container {
  max-width: 380px;
  animation: fadeInUp 0.6s ease-out both;
}
.farewell-icon {
  font-size: 5em;
  margin-bottom: 16px;
  animation: wave-animation 2.5s ease-in-out infinite;
  display: inline-block;
}
@keyframes wave-animation {
  0% { transform: rotate( 0.0deg) }
  10% { transform: rotate(14.0deg) }
  20% { transform: rotate(-8.0deg) }
  30% { transform: rotate(14.0deg) }
  40% { transform: rotate(-4.0deg) }
  50% { transform: rotate(10.0deg) }
  60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}
.farewell-container h1 {
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 8px;
}
.farewell-container > p {
  color: var(--muted);
  font-size: 1.1em;
  line-height: 1.6;
  margin: 0 0 24px;
}
.farewell-stats-card {
  padding: 20px !important;
  background: var(--chip) !important;
}
#btn-exit-app { margin-top: 24px; width: 100%; padding: 16px; font-size: 1.1em; }

/* (YENİ) Profil Düzenleme Avatar Seçimi */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.avatar-option {
  background: var(--chip);
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.avatar-option:hover {
  background: var(--line);
}
.avatar-option.selected {
  border-color: var(--primary);
  background: var(--pill-bg);
  transform: scale(1.05);
}

/* (YENİ) Arka Plan Logo Animasyonu */
@keyframes logo-fade-in-animation {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.40; /* Son opaklık değeriyle eşleşmeli */
    transform: scale(1);
  }
}
.car-display-card.logo-arriving::before {
  animation: logo-fade-in-animation 0.7s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; /* 0.2s gecikmeyle başla */
}

/* (YENİ & GÜNCELLENDİ) Gerçekçi Plaka Gösterim Stili */
.car-plate-display {
  position: relative; /* Pseudo-element için gerekli */
  display: none; /* JS ile gösterilecek */
  background-color: #ffffff; /* Gerçek plaka gibi beyaz */
  color: #000000; /* Siyah yazı */
  opacity: 0.50; /* Opaklık düşürüldü */
  font-family: 'Arial Black', 'Impact', sans-serif;
  font-weight: 900;
  font-size: 1.4em; /* Yazıyı biraz büyüttük */
  letter-spacing: 3px; /* Harf aralığını artırdık */
  padding: 10px 15px 10px 50px; /* Mavi şerit için soldan boşluk */
  border-radius: 10px; /* Kenarlar yumuşatıldı */
  border: 2px solid #000000; /* Siyah çerçeve */
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.05); /* (GÜNCELLENDİ) Hafif iç gölge */
  overflow: hidden; /* Pseudo-elementin taşmasını engelle */
  text-shadow: 0px 1px 1px rgba(255,255,255,0.3); /* (YENİ) Yazıya hafif bir kabartma hissi */
}

/* Mavi TR bandı */
.car-plate-display::before {
  content: 'TR';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35px; /* Bant genişliği */
  background-color: #003399; /* (GÜNCELLENDİ) Standart AB mavisi */
  color: white;
  font-size: 0.6em; /* TR yazısının boyutu */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px; /* (GÜNCELLENDİ) Dikeyde ortalamak için ince ayar */
  letter-spacing: 0; /* TR yazısının harf aralığını sıfırla */
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.2); /* (YENİ) Banda derinlik kat */
}

/* (YENİ) Plaka Vida Delikleri */
.car-plate-display::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 50%;
  border: 1px solid #9e9e9e;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
  /* Sağ üst ve sağ alt köşelere yerleştir */
  top: 8px;
  right: 8px;
  /* İkinci deliği oluşturmak için box-shadow hilesi */
  box-shadow: inset 0 0 1px rgba(0,0,0,0.5),
              0 28px 0 0 #e0e0e0, /* Alt deliğin konumu (dikey mesafe) */
              0 28px 0 1px #9e9e9e; /* Alt deliğin çerçevesi */
}

.car-image-container,
.car-display-card h2,
#changeCarBtn {
  position: relative; /* İçeriğin logonun üzerinde kalmasını sağla */
}
.car-image-container {
  margin: 4px 0 20px; /* Görselin üst ve alt boşluğu azaltıldı */
  perspective: 1000px;
}
.car-image-container img {
  max-width: 100%;
  height: auto;
  max-height: 180px; /* Yüksekliği biraz azalttık */
  object-fit: contain;
  transform: rotateY(-15deg) rotateX(5deg) scale(1); /* Ölçeği 1'e çektik */
  filter: drop-shadow(0 20px 15px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}
.car-display-card h2 {
  margin: 0 0 16px;
  font-size: 1.5em;
  font-weight: 600;
}

/* (YENİ) Ripple (Su Dalgası) Efekti */
.ripple-effect {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4);
  transform: scale(0); animation: ripple 0.6s linear; pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
/* Ripple'ın taşmaması için kapsayıcı ayarı */
.btn, .clickable, .nav-option, .tab, .nearby-btn { position: relative; overflow: hidden; }

/* (YENİ) Pull-to-Refresh (Çek-Yenile) Yükleyicisi */
.ptr-loader {
  height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: transparent; transition: height 0.2s ease-out; width: 100%;
}
.ptr-spinner {
  width: 24px; height: 24px; border: 2px solid var(--primary);
  border-top-color: transparent; border-radius: 50%;
  transform: rotate(0deg); transition: transform 0.2s linear;
}
.ptr-loader.loading .ptr-spinner {
  animation: spin 0.8s linear infinite;
}

/* (YENİ) Offline Banner */
.offline-banner {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--danger); color: white;
  text-align: center; padding: 8px; font-size: 13px; font-weight: 600;
  z-index: 200; transform: translateY(-100%); transition: transform 0.3s ease;
  padding-top: calc(8px + env(safe-area-inset-top)); /* Çentik payı */
}
.offline-banner.show { transform: translateY(0); }

/* (YENİ) Yukarı Çık Butonu */
.scroll-top-btn {
  position: fixed; bottom: 90px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); color: var(--primary);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 80;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: all 0.3s ease;
}
.scroll-top-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
:root[data-theme="dark"] .scroll-top-btn { background: var(--chip); color: white; }

/* (YENİ) Araç Geliş Animasyonu */
@keyframes car-arrive-animation {
  0% {
    opacity: 0;
    transform: translateX(150px) rotateY(45deg) scale(0.8);
  }
  70% {
    opacity: 1;
    transform: translateX(-20px) rotateY(-20deg) scale(1.05);
  }
  100% {
    transform: rotateY(-15deg) rotateX(5deg) scale(1);
  }
}
.car-image-container.car-arriving img {
  animation: car-arrive-animation 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* (YENİ) Modern Bakım Modu Stilleri */
.maintenance-overlay {
  background: linear-gradient(135deg, #eef2ff, #f8fafc) !important;
  z-index: 9999 !important;
}
:root[data-theme="dark"] .maintenance-overlay {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}
:root[data-theme="midnight"] .maintenance-overlay {
  background: linear-gradient(135deg, #020617, #1e1b4b) !important;
}

.maintenance-content {
  text-align: center;
  padding: 40px 30px;
  max-width: 400px;
  width: 90%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.5);
  animation: float 6s ease-in-out infinite;
  transform: translateY(0);
}
:root[data-theme="dark"] .maintenance-content,
:root[data-theme="midnight"] .maintenance-content {
  background: rgba(30, 41, 59, 0.7);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
}

.maintenance-icon-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance-icon {
  font-size: 4em;
  position: relative;
  z-index: 2;
  animation: wrench 2.5s ease-in-out infinite;
}

.maintenance-pulse {
  position: absolute;
  inset: 0;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(15px);
  animation: pulse-glow 2s infinite;
}

.maintenance-title {
  font-size: 2em;
  font-weight: 800;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--primary), var(--info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.maintenance-desc {
  font-size: 1.1em;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.maintenance-timer {
  display: inline-block;
  background: var(--chip);
  color: var(--primary);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 16px;
  font-size: 1.1em;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.maintenance-footer {
  margin-top: 30px;
  font-size: 0.9em;
  color: var(--muted);
  opacity: 0.7;
  font-weight: 600;
}

@keyframes wrench {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 0.1; }
}

/* (YENİ) Araç Bilgi (Biliyor muydunuz?) Kartı Stilleri */
.car-fact-card {
  margin: 16px 14px 16px;
  /* (YENİ) Daha canlı ve modern bir gradyan */
  background: linear-gradient(135deg, #f0f5ff, #e6f0ff) !important;
  border-color: #dbe8ff !important;
  padding: 20px; /* İç boşluğu artır */
  display: flex; /* (YENİ) Dikeyde hizalamak için */
  flex-direction: column;
  gap: 16px; /* İçerik ve buton arasına boşluk */
}
:root[data-theme="dark"] .car-fact-card {
  background: linear-gradient(135deg, #1e293b, #111827) !important;
  border-color: #374151 !important;
}
:root[data-theme="midnight"] .car-fact-card {
  background: linear-gradient(135deg, #1a1a3d, #101025) !important;
  border-color: #2a2a5a !important;
}

/* (YENİ) İçerik Alanı */
.car-fact-content {
  display: flex;
  align-items: flex-start; /* İkonu metnin başına hizala */
  gap: 16px;
}

.car-fact-icon {
  font-size: 1.8em;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="dark"] .car-fact-icon { background: rgba(255,255,255,0.1); }

.car-fact-text-wrapper {
  display: flex;
  flex-direction: column;
}

.car-fact-title {
  margin: 0 0 6px;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--primary);
}

.car-fact-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  min-height: 60px; /* İçerik değişirken zıplamayı önler */
}

/* (YENİ) Buton Stili */
.btn-new-fact {
  position: static; /* Mutlak konumlandırmayı kaldır */
  width: 100%; /* Tam genişlik */
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--primary);
  padding: 12px 14px; /* Buton boyutunu ayarla */
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* İçeriği ortala */
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Liquid Glass Override */
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
:root[data-theme="dark"] .btn-new-fact {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: white;
}
:root[data-theme="midnight"] .btn-new-fact {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: white;
}

.btn-new-fact:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.btn-new-fact:active {
  transform: scale(0.97);
}

/* (YENİ) Bilgi Kartı Metin Geçiş Animasyonları */
@keyframes fact-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes fact-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.car-fact-text.fact-exiting { animation: fact-fade-out 0.25s ease-out forwards; }
.car-fact-text.fact-entering { animation: fact-fade-in 0.3s 0.1s ease-in both; }

/* (YENİ) Aracım Sayfası Widget Grid Stilleri */
.mycar-widgets-grid {
  display: grid;
  grid-template-columns: 1fr; /* (DÜZELTME) Veri girişi için tek sütun */
  gap: 16px;
  margin: 16px 14px 24px; /* Kenar boşlukları korundu */
}
.mycar-widgets-grid .card {
  margin: 0; /* Grid içindeki kartların kendi margin'ini sıfırla */
  display: flex;
  flex-direction: column;
}
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px; /* (DÜZENLENDİ) Boşluğu azalt */
}
.widget-header h3 {
  margin: 0;
  font-size: 1em; /* (DÜZENLENDİ) Yazı boyutunu küçült */
}
.btn-widget-add {
  appearance: none;
  border: none;
  background-color: var(--chip);
  color: var(--primary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.5em;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-widget-add:active {
  transform: scale(0.9);
}
.btn-widget-add.active {
  transform: rotate(45deg);
  background-color: #ffebeb;
  color: var(--danger);
}
.add-reminder-form, .add-fuel-entry-form {
  transition: all 0.3s ease;
}

/* (YENİ) Aracım Sayfası Düzeni */
#page-mycar {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Araç seçme formunu dikeyde ortala */
  padding-top: 110px; /* Header çakışmasını önlemek için artırıldı */
}
/* Araç seçildiğinde, ortalamayı kaldır ve normal akışa dön */
#page-mycar.car-selected {
  justify-content: flex-start;
}
#mycar-dashboard {
  width: 100%;
}

/* (YENİ) Bakım Hatırlatıcı Kartı Stilleri */
.maintenance-reminder-card {
  margin-top: 16px;
}
.reminders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.reminders-list:empty::after {
  content: 'Henüz hatırlatıcı eklenmemiş.';
  text-align: center;
  color: var(--muted);
  padding: 20px 0;
  display: block;
}
.reminder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--chip);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.reminder-item.overdue {
  background-color: #fff5f5;
  border-color: #fecaca;
}
:root[data-theme="dark"] .reminder-item.overdue {
  background-color: #2a0f14;
  border-color: #7a1f2a;
}
:root[data-theme="midnight"] .reminder-item.overdue {
  background-color: #2e1015;
  border-color: #5c1822;
}
.reminder-icon { font-size: 1.5em; }
.reminder-details { flex-grow: 1; }
.reminder-text { font-weight: 600; }
.reminder-date { font-size: 13px; color: var(--muted); }
.reminder-item.overdue .reminder-date { color: var(--danger); font-weight: 600; }
.delete-reminder-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; }

.add-reminder-form {
  display: none; /* Varsayılan olarak gizli */
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}

/* (YENİ) Yakıt Tüketimi Kartı Stilleri */
.fuel-tracker-card {
  margin-top: 16px;
}
.fuel-stats-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; /* (DÜZENLENDİ) Boşluğu azalt */
  margin-bottom: 16px; /* (DÜZENLENDİ) Boşluğu azalt */
  text-align: center;
}
.fuel-stat-item {
  background-color: var(--chip);
  padding: 12px 8px; /* (DÜZENLENDİ) İç boşluğu azalt */
  border-radius: 12px; /* (DÜZENLENDİ) Köşeyi yuvarla */
  border: 1px solid var(--line);
}
.fuel-stat-item .stat-value {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--primary);
  display: block;
  line-height: 1.2;
}
.fuel-stat-item .stat-label {
  font-size: 12px; /* (DÜZENLENDİ) Yazı boyutunu küçült */
  font-weight: 600;
  color: var(--muted);
}
.add-fuel-entry-form {
  display: none; /* Varsayılan olarak gizli */
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* (YENİ) SSS Sayfası Stilleri */
.faq-container { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* Firefox'taki varsayılan oku kaldır */
}
.faq-question::-webkit-details-marker { display: none; } /* Chrome/Safari'deki varsayılan oku kaldır */
.faq-question::after {
  content: '›';
  font-size: 1.5em;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
.faq-item[open] > .faq-question::after { transform: rotate(-90deg); }
.faq-answer { padding: 0 8px 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.faq-answer p { margin: 0; }

/* (YENİ) Başarı Modalı İkon Animasyonu */
.success-icon-anim {
  width: 80px; height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 3em;
}
.success-icon-anim svg {
  width: 48px; height: 48px;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 0.6s 0.2s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

/* (YENİ) Karşılama Ekranı Stilleri */
#page-welcome {
  z-index: 2000; /* En üst katmanda kalması için artırıldı */
  background: linear-gradient(-45deg, #0b5cff, #002b80, #3b82f6, #0b5cff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  padding: 0 !important; /* Varsayılan padding'i sıfırla */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: fixed; inset: 0; /* Tam ekran kaplaması için */
  overflow: hidden;
}

/* Arka plan hareket animasyonu */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Arka plan süslemeleri (Yüzen Şekiller) */
#page-welcome::before, #page-welcome::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 1;
}
#page-welcome::before {
  width: 300px; height: 300px; background: #4ade80; top: -10%; left: -10%;
  animation: floatShape 8s infinite alternate;
}
#page-welcome::after {
  width: 250px; height: 250px; background: #f472b6; bottom: -10%; right: -10%;
  animation: floatShape 10s infinite alternate-reverse;
}
@keyframes floatShape {
  from { transform: translate(0, 0); }
  to { transform: translate(30px, 50px); }
}

#page-welcome .welcome-content {
  padding: 40px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  position: relative; z-index: 2; /* Süslemelerin üstünde kalması için */
}
#page-welcome .logo-container {
  width: 140px; height: 140px; /* Logo boyutu küçültüldü */
  position: relative; /* Parlama efekti için gerekli */
  background: transparent; /* Arka planı şeffaf yap */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none; /* Gölgeyi kaldır */
  border: none; /* Kenarlığı kaldır */
  margin-bottom: 10px;
  padding: 0;
  animation: logoEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* (YENİ) Logo Parlama (Shine) Efekti */
#page-welcome .logo-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 150% 0;
  
  /* Parlamanın sadece logo üzerinde görünmesini sağla */
  -webkit-mask-image: url('images/parkyolu-logo-beyaz.png');
  mask-image: url('images/parkyolu-logo-beyaz.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  animation: shineEffect 3s infinite linear;
  pointer-events: none;
}

/* Logo Giriş Animasyonu */
@keyframes logoEntrance {
  from { opacity: 0; transform: scale(0.5) rotate(-15deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
/* Metin ve Buton Giriş Animasyonu */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* El Yazısı (Soldan Sağa Açılma) Animasyonu */
@keyframes handwriting {
  from { clip-path: inset(0 100% 0 0); } /* Tamamen gizli (sağdan kırpılmış) */
  to { clip-path: inset(0 0 0 0); }       /* Tamamen görünür */
}
/* Parlama Animasyonu Keyframes */
@keyframes shineEffect {
  0% { background-position: 150% 0; }
  20% { background-position: -50% 0; } /* Hızlı geçiş */
  100% { background-position: -50% 0; } /* Bekleme */
}

#page-welcome .logo-container img {
  width: 100%; height: 100%; /* Kutunun kalan alanını tamamen kapla */
  object-fit: contain; /* Orantıyı bozmadan sığdır */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); /* Logoya derinlik katmak için gölgeyi artırdık */
}
#page-welcome h1 {
  font-family: 'Dancing Script', cursive; font-size: 5em; color: white; margin: 0;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
  /* El yazısı efekti için gerekli ayarlar */
  display: inline-block; white-space: nowrap;
  padding: 0 10px 10px; /* Gölge ve harf kuyruklarının kesilmemesi için boşluk */
  /* Hem yukarı kayma (fadeInUp) hem de yazılma (handwriting) animasyonu */
  animation: fadeInUp 0.8s ease-out 0.3s both, handwriting 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
#page-welcome p {
  color: rgba(255, 255, 255, 0.95); font-size: 1.3em; margin: 0; line-height: 1.6; font-weight: 500;
  animation: fadeInUp 0.8s ease-out 0.5s both;
  min-height: 1.6em; /* Metin değişirken zıplamayı önle */
}

/* (YENİ) Intro Yükleme Çubuğu */
.welcome-loader {
  width: 220px; height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px; overflow: hidden;
  margin-top: 30px;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}
#welcome-progress {
  width: 0%; height: 100%;
  background: #fff;
  border-radius: 10px;
  transition: width 0.1s linear;
  box-shadow: 0 0 15px rgba(255,255,255,0.8);
}
.fade-text { transition: opacity 0.3s ease; }

/* (YENİ) Intro Tamamlanma Butonu */
#btn-intro-complete {
  margin-top: 30px;
  padding: 16px 32px;
  font-size: 1.2em;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  border: none;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: flex; align-items: center; gap: 8px;
  animation: fadeInUp 0.5s ease-out both;
  transition: transform 0.2s;
}
#btn-intro-complete:active { transform: scale(0.95); }

.welcome-footer {
  position: absolute;
  bottom: 30px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 2;
  animation: fadeInUp 0.8s ease-out 1s both;
}

/* Sayfa Çıkış Efekti */
#page-welcome.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* (YENİ) Kayan Yıldızlar (Shooting Stars) Efekti */
.intro-stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.intro-stars span {
  position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.1), 0 0 0 8px rgba(255,255,255,0.1), 0 0 20px rgba(255,255,255,1);
  animation: shootingStar 3s linear infinite;
  opacity: 0; /* Başlangıçta gizli */
}
/* Yıldızın kuyruğu */
.intro-stars span::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 300px; height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
}

/* Yıldızların rastgele konumlardan ve zamanlarda gelmesi için */
.intro-stars span:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
.intro-stars span:nth-child(2) { top: 0; left: 50%; animation-delay: 1s; animation-duration: 4s; }
.intro-stars span:nth-child(3) { top: 20%; left: 100%; animation-delay: 1.5s; animation-duration: 3.5s; }
.intro-stars span:nth-child(4) { top: 50%; left: 100%; animation-delay: 2s; animation-duration: 4s; }
.intro-stars span:nth-child(5) { top: 80%; left: 100%; animation-delay: 0.5s; animation-duration: 3s; }
.intro-stars span:nth-child(6) { top: 0; left: 80%; animation-delay: 2.5s; animation-duration: 3.5s; }
.intro-stars span:nth-child(7) { top: 40%; left: 0%; animation-delay: 1.2s; animation-duration: 4.5s; }
.intro-stars span:nth-child(8) { top: 90%; left: 50%; animation-delay: 3s; animation-duration: 4s; }
.intro-stars span:nth-child(9) { top: 10%; left: 10%; animation-delay: 3.5s; animation-duration: 3.8s; }
.intro-stars span:nth-child(10) { top: 70%; left: 0%; animation-delay: 0.8s; animation-duration: 3.2s; }

@keyframes shootingStar {
  0% { transform: rotate(315deg) translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(315deg) translateX(-1000px); opacity: 0; }
}

/* (YENİ) Sesli Asistan Animasyonu */
.voice-wave {
  display: flex; justify-content: center; align-items: center; gap: 6px; height: 40px;
}
.voice-wave span {
  display: block; width: 6px; height: 10px; background: white; border-radius: 3px;
  animation: wave 1s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { animation-delay: 0.0s; }
.voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { animation-delay: 0.2s; }
.voice-wave span:nth-child(4) { animation-delay: 0.3s; }
.voice-wave span:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave {
  0%, 100% { height: 10px; } 50% { height: 40px; }
}

/* (YENİ) Pogi Sayfası Düzeni */
#page-pogi {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(-45deg, #eef2ff, #c7d2fe, #e0e7ff, #eef2ff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
:root[data-theme="dark"] #page-pogi {
  background: linear-gradient(-45deg, #0f172a, #1e1b4b, #172554, #0f172a);
}
:root[data-theme="midnight"] #page-pogi {
  background: linear-gradient(-45deg, #1a1a3d, #2e1065, #4c1d95, #1a1a3d);
}

.pogi-header {
  background: linear-gradient(135deg, #0b5cff, #002b80); /* AI teması için mavi */
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 10;
  flex-shrink: 0;
}
.pogi-profile { display: flex; align-items: center; gap: 10px; }
.pogi-profile img { width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 50%; padding: 4px; object-fit: contain; }

/* (YENİ) Pogi Avatar (Yazı Tabanlı) */
.pogi-avatar-text {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899); /* Gemini benzeri gradyan */
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Pacifico', cursive; font-size: 18px;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  text-shadow: 0 2px 4px rgba(0,0,0,0.2); flex-shrink: 0;
}
.pogi-avatar-text.small { width: 40px; height: 40px; font-size: 14px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.2); }

.pogi-name { font-weight: 800; font-size: 1.1em; }
.pogi-status { font-size: 0.75em; opacity: 0.95; }

.pogi-messages {
  flex: 1; padding: 20px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  background: transparent;
  scroll-behavior: smooth;
}

.pogi-suggestions {
  display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;
  white-space: nowrap; background: transparent;
  -webkit-overflow-scrolling: touch; flex-shrink: 0;
}
.pogi-suggestions::-webkit-scrollbar { display: none; }

.suggestion-chip {
  appearance: none; border: 1px solid var(--line);
  background: var(--card); color: var(--primary);
  padding: 8px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}
.suggestion-chip:active { transform: scale(0.95); background: var(--chip); }

.msg-row { display: flex; gap: 10px; max-width: 85%; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble {
  padding: 12px 16px; border-radius: 18px;
  font-size: 15px; line-height: 1.5; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  word-wrap: break-word;
}
.msg-row.pogi .msg-bubble {
  background: var(--card); border: 1px solid var(--line);
  border-top-left-radius: 4px; color: var(--ink);
}
.msg-row.user .msg-bubble {
  background: var(--primary); color: #fff;
  border-top-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(11, 92, 255, 0.2);
}

.pogi-input-area {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  z-index: 10;
}
.pogi-input-area input {
  flex: 1; border: 1px solid var(--line); border-radius: 24px;
  padding: 12px 16px; background: var(--bg); color: var(--ink); outline: none;
  font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s;
}
.pogi-input-area input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 92, 255, 0.1);
  background: var(--card);
}
.pogi-send-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary);
  color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.2s; flex-shrink: 0;
}
.pogi-send-btn:active { transform: scale(0.92); }
#btnVoice.listening {
  color: var(--danger);
  animation: pulse 1.5s infinite;
}

/* (YENİ) Üyelik Paketleri Stilleri */
.packages-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.packages-scroll::-webkit-scrollbar { display: none; }
.package-card {
  flex: 0 0 85%;
  scroll-snap-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.package-card.free { border-top: 6px solid var(--accent); }
.package-card.premium { border-top: 6px solid var(--warn); background: linear-gradient(180deg, var(--card) 0%, var(--chip) 100%); }

.package-header { text-align: center; margin-bottom: 20px; }
.package-icon { font-size: 2.5em; margin-bottom: 10px; line-height: 1; }
.package-title { margin: 0; font-size: 1.3em; font-weight: 800; letter-spacing: -0.5px; }
.package-price { color: var(--muted); font-size: 1em; font-weight: 600; margin-top: 4px; }

.package-features { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14px; color: var(--ink); }
.package-features > li { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.package-features > li::before { content: '✓'; color: var(--accent); font-weight: 800; flex-shrink: 0; }

.feature-group {
  flex-direction: column; align-items: flex-start !important;
  background: var(--chip); padding: 12px; border-radius: 14px;
  border: 1px solid var(--line);
}
.feature-group::before { content: none !important; }
.sub-features { list-style: none; padding: 0; margin: 0; }
.sub-features li {
  font-size: 0.9em; color: var(--muted); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.package-card .btn-select-package {
  margin-top: auto; /* Butonu kartın en altına iter */
  width: 100%;
  padding: 14px;
  font-size: 1em;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.package-card.free .btn-select-package {
  background: var(--chip);
  color: var(--chip-ink);
}
/* (YENİ) Demo Sayaç Stili */
.demo-timer {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(11, 92, 255, 0.1);
  padding: 8px;
  border-radius: 8px;
  margin-top: 8px;
  text-align: center;
  border: 1px solid rgba(11, 92, 255, 0.2);
}

.package-card.plus .btn-select-package {
  background: var(--primary);
  color: #fff;
}
.package-card.premium .btn-select-package {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}
.package-card .btn-select-package.current {
  background: var(--accent);
  color: #fff;
  cursor: default;
}
.sub-features li::before { content: ''; width: 4px; height: 4px; background: var(--muted); border-radius: 50%; }
.sub-features li:last-child { margin-bottom: 0; }

.pogi-voice-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--chip); color: var(--primary);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.pogi-voice-btn:active { transform: scale(0.92); background: var(--line); }

/* (YENİ) Sesli Komut Paneli */
.voice-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  padding: 32px 24px 40px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  z-index: 200;
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.voice-panel.active { transform: translateY(0); }

.voice-wave-container {
  height: 60px; display: flex; align-items: center; justify-content: center;
}
.voice-panel .voice-wave span {
  background: var(--primary); height: 20px; width: 6px; margin: 0 3px;
}
#voice-transcript {
  font-size: 1.2em; font-weight: 600; color: var(--ink); margin: 0; min-height: 1.5em;
}
.btn-close-voice {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); padding: 8px 24px; border-radius: 20px;
  font-weight: 600; cursor: pointer;
}

/* (YENİ) Pogi Yazıyor Animasyonu */
.typing {
  display: flex; align-items: center; gap: 4px; height: 24px;
}
.typing span {
  display: block; width: 6px; height: 6px; background: var(--muted); border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
  opacity: 0.6;
}
.typing span:nth-child(1) { animation-delay: -0.32s; }
.typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* (YENİ) Pogi Intro Stilleri */
#pogi-intro {
  position: absolute; inset: 0; z-index: 100;
  background: linear-gradient(135deg, #0b5cff, #002b80);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: white;
}
#pogi-intro.fade-out {
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.pogi-intro-content {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  animation: fadeInUp 0.6s ease-out;
}
.pogi-avatar-large {
  width: 100px; height: 100px; border-radius: 28px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Pacifico', cursive; font-size: 36px;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
  margin-bottom: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  animation: pulse 2s infinite;
}

/* (YENİ) Navigasyon Seçenekleri Stilleri */
.nav-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 16px;
  font-size: 1.1em;
  font-weight: 600;
  color: white !important; /* Yazı rengini beyaz zorla */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}
.nav-option:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.nav-option .nav-logo {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: white;
  border-radius: 12px;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.nav-option .nav-logo svg { width: 24px; height: 24px; }

/* Marka Renkleri ve Gradyanlar */
.nav-option.google { background: linear-gradient(135deg, #4285F4, #0F9D58); }
.nav-option.apple { background: linear-gradient(135deg, #3a3a3c, #000000); }
.nav-option.yandex { background: linear-gradient(135deg, #FF0000, #FF4D4D); }

/* Navigasyon Varsayılan Seçim Alanı */
.nav-default-option {
  margin-top: 20px;
  padding: 12px 16px;
  background-color: var(--chip);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
}
.nav-default-option .label { font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-default-option .switch { transform: scale(0.85); margin: 0; }

/* (YENİ) Kurucu Kartı Stilleri */
.founder-card {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin-top: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
:root[data-theme="dark"] .founder-card {
  background: linear-gradient(135deg, #1e293b, #0f172a);
}
:root[data-theme="midnight"] .founder-card {
  background: linear-gradient(135deg, #1a1a3d, #101025);
}
.founder-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.founder-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 1.5em; font-weight: 700;
  box-shadow: 0 4px 12px rgba(11, 92, 255, 0.3);
  border: 3px solid var(--card);
}
.founder-info { flex: 1; }
.founder-name {
  font-size: 1.2em; font-weight: 700; color: var(--ink); margin-bottom: 4px;
}
.founder-role {
  font-size: 0.9em; color: var(--primary); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.founder-bio {
  font-size: 0.95em; line-height: 1.6; color: var(--muted); margin: 0;
}

/* (YENİ) Raporlama Modalı Stilleri */
#reportModal .filter-option {
  justify-content: flex-start;
  padding: 14px;
  text-align: left;
}

/* (YENİ) Mesaj Bildirimi Animasyonu */
@keyframes pulse-soft {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.msg-notification {
    animation: pulse-soft 2s infinite;
}

/* (YENİ) Mesaj Bildirimi Animasyonu */
@keyframes pulse-soft {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.msg-notification {
    animation: pulse-soft 2s infinite;
}

/* (YENİ) Mesaj Bildirimi Animasyonu */
@keyframes pulse-soft {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.msg-notification {
    animation: pulse-soft 2s infinite;
}

/* (DÜZELTME) Eksik fadeUp animasyonu eklendi */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* (YENİ) Özel Üye Intro Ekranı Stilleri */
.special-intro-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: #0f172a; /* Koyu taban */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: white; text-align: center;
    overflow: hidden;
}
.special-intro-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;
    position: relative; z-index: 10; /* İçeriği efektlerin üzerine çıkar */
}
.special-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 32px 24px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.05);
    margin-bottom: 24px;
    animation: fadeUp 0.6s ease-out;
}
.special-row { margin-bottom: 10px; font-size: 1.1em; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.special-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); margin: 20px 0; }
.special-section-title { font-weight: 800; margin-bottom: 12px; text-transform: uppercase; font-size: 0.85em; letter-spacing: 2px; color: #93c5fd; text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
.special-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.special-list li { font-weight: 500; font-size: 1.05em; display: flex; align-items: center; justify-content: center; gap: 8px; }
.special-list li::before { content: '✦'; color: #60a5fa; font-size: 0.8em; }

.btn-special-action {
    background: linear-gradient(135deg, #ffffff, #e0f2fe); color: #0b5cff;
    border: none; padding: 14px 32px; border-radius: 99px;
    font-size: 1.1em; font-weight: 800; cursor: pointer;
    box-shadow: 0 10px 30px rgba(11, 92, 255, 0.4), 0 0 0 4px rgba(255,255,255,0.1);
    transition: transform 0.2s;
    animation: fadeUp 0.6s ease-out 0.2s both;
    position: relative; z-index: 10;
}
.btn-special-action:active { transform: scale(0.95); }

/* Fade Text Animasyonu */
.fade-text { transition: opacity 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}

/* (YENİ) Arka Plan Efektleri */
.special-bg-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #0b5cff, #1e1b4b, #4f46e5, #0b5cff);
    background-size: 400% 400%;
    animation: specialGradient 15s ease infinite;
    z-index: 0;
}
@keyframes specialGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.special-bg-orb {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.6; z-index: 1;
}
.special-bg-orb.orb-1 {
    width: 300px; height: 300px; background: #3b82f6; top: -10%; left: -10%;
    animation: floatOrb 8s infinite alternate;
}
.special-bg-orb.orb-2 {
    width: 250px; height: 250px; background: #8b5cf6; bottom: -10%; right: -10%;
    animation: floatOrb 10s infinite alternate-reverse;
}
@keyframes floatOrb { from { transform: translate(0,0); } to { transform: translate(30px, 50px); } }

/* (YENİ) Özel Üye İçerik Animasyonları */
.special-card .special-row,
.special-card .special-divider,
.special-card .special-section-title,
.special-card p,
.special-card div {
    opacity: 0;
    animation: slideInContent 0.5s ease-out forwards;
}
.special-list li {
    opacity: 0;
    animation: slideInContent 0.5s ease-out forwards;
}

@keyframes slideInContent {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Sayfa 1 Gecikmeleri (Sırayla gelmesi için) */
#special-page-1 .special-card > *:nth-child(1) { animation-delay: 0.2s; }
#special-page-1 .special-card > *:nth-child(2) { animation-delay: 0.3s; }
#special-page-1 .special-card > *:nth-child(3) { animation-delay: 0.4s; }
#special-page-1 .special-card > *:nth-child(4) { animation-delay: 0.5s; }

#special-page-1 .special-list:nth-child(5) li:nth-child(1) { animation-delay: 0.6s; }
#special-page-1 .special-list:nth-child(5) li:nth-child(2) { animation-delay: 0.7s; }
#special-page-1 .special-list:nth-child(5) li:nth-child(3) { animation-delay: 0.8s; }
#special-page-1 .special-list:nth-child(5) li:nth-child(4) { animation-delay: 0.9s; }

#special-page-1 .special-card > *:nth-child(6) { animation-delay: 1.0s; }
#special-page-1 .special-card > *:nth-child(7) { animation-delay: 1.1s; }

#special-page-1 .special-list:nth-child(8) li:nth-child(1) { animation-delay: 1.2s; }
#special-page-1 .special-list:nth-child(8) li:nth-child(2) { animation-delay: 1.3s; }

/* Sayfa 2 Gecikmeleri */
#special-page-2 .special-card p { animation-delay: 0.2s; }
#special-page-2 .special-card div { animation-delay: 2.5s; } /* İmza kısmı okunduktan sonra gelsin */

/* (YENİ) El Yazısı Animasyonu */
.handwriting-title {
    display: inline-block; /* clip-path için gerekli */
    white-space: nowrap; /* Metnin tek satırda kalmasını sağla */
    animation: handwriting-reveal 2s cubic-bezier(0.6, 0, 0.4, 1) 0.5s forwards;
    clip-path: inset(0 100% 0 0);
}

@keyframes handwriting-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* (YENİ) Jenerik Animasyonu */
.credits-container {
    position: absolute;
    top: 100%; left: 0; right: 0;
    text-align: center;
    display: none; /* JS ile açılacak */
    flex-direction: column; align-items: center;
    padding-bottom: 100px;
}
.credits-container.animate {
    display: flex;
    animation: creditsScroll 25s linear forwards;
}
@keyframes creditsScroll {
    0% { top: 100%; opacity: 0; }
    5% { opacity: 1; }
    100% { top: -1200%; opacity: 1; } /* En alttakilerin görünmesi için daha yukarı */
}

/* (YENİ) Jenerik Müzik Kartı */
.credits-music-card {
    position: absolute;
    top: 15px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 16px 6px 6px;
    border-radius: 99px;
    display: flex; align-items: center; gap: 12px;
    z-index: 20;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: opacity 0.5s ease;
}
.cmc-album-art {
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    animation: spin 8s linear infinite; /* Plak gibi dönsün */
}
.cmc-album-art img { width: 100%; height: 100%; object-fit: cover; }

@keyframes slideDown {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.cmc-bars {
    display: flex; align-items: flex-end; gap: 3px; height: 14px;
}
.cmc-bars span {
    width: 3px; background: #fff; border-radius: 2px;
    animation: cmc-visualize 1s ease-in-out infinite;
}
.cmc-bars span:nth-child(1) { height: 6px; animation-delay: 0s; }
.cmc-bars span:nth-child(2) { height: 14px; animation-delay: 0.2s; }
.cmc-bars span:nth-child(3) { height: 8px; animation-delay: 0.4s; }

.cmc-info { display: flex; flex-direction: column; }
.cmc-title { font-size: 14px; font-weight: 700; color: white; line-height: 1.2; }
.cmc-artist { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 500; }

@keyframes cmc-visualize {
    0%, 100% { height: 4px; opacity: 0.6; }
    50% { height: 14px; opacity: 1; }
}

/* (YENİ) Jenerik Grid Stilleri */
.credits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    gap: 12px;
    width: 100%;
    max-width: 400px; /* Mobilde taşmasın */
    margin-bottom: 30px;
    padding: 0 10px;
}
.credit-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 16px 8px;
    font-size: 1.1em;
    font-weight: 600;
    color: white;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-height: 70px; /* Eşit yükseklik hissi için */
}