/* Düzce İş İlanları — özel stiller ve animasyonlar (Tailwind’e ek) */

[x-cloak] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }

/* ---------- Genel giriş animasyonları ---------- */
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.animate-drop { animation: drop .35s ease-out both; }
.animate-rise { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.stagger > * { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .15s; }
.stagger > *:nth-child(5) { animation-delay: .20s; }
.stagger > *:nth-child(n+6) { animation-delay: .25s; }

/* Canlı nokta */
@keyframes live { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }
.live-dot { animation: live 1.6s ease-in-out infinite; }

/* Alt menü */
.tab-pill { animation: pillIn .3s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes pillIn { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.fab { transition: transform .2s ease, box-shadow .2s ease; }
.fab:hover { transform: translateY(-2px); }

/* İskelet yükleyici */
.skeleton { position: relative; overflow: hidden; background: #ece8dc; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Kart vurgusu */
.ride-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ride-card:active { transform: scale(.985); }
.ride-card.is-selected { border-color: #14919b; box-shadow: 0 0 0 3px rgba(16,185,129,.18), 0 12px 30px -16px rgba(10,70,78,.5); }

/* Geri sayım halkası */
.ring-track { stroke: #e7efe9; }
.ring-bar { transition: stroke-dashoffset 1s linear; }

/* PIN */
@keyframes flip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pin-digit { animation: flip .5s cubic-bezier(.2,.8,.2,1) both; transform-origin: center; }
.pin-digit:nth-child(2) { animation-delay: .08s; }
.pin-digit:nth-child(3) { animation-delay: .16s; }
.pin-digit:nth-child(4) { animation-delay: .24s; }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }
.shake { animation: shake .45s both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .5s cubic-bezier(.2,.9,.3,1.3) both; }

/* Bekleme radarı */
@keyframes radar { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
.radar::before, .radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid currentColor; animation: radar 2.2s ease-out infinite;
}
.radar::after { animation-delay: 1.1s; }

/* ---------- Harita ---------- */
.map-shell { isolation: isolate; }
.leaflet-container { font-family: inherit; background: #e8efe9; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(255,255,255,.7) !important; border-radius: 8px 0 0 0; }
.leaflet-control-zoom a { border-radius: 10px !important; }

/* Animasyonlu güzergah çizgisi */
.route-casing { stroke-linecap: round; }
.route-anim { stroke-dasharray: 2 14; stroke-linecap: round; animation: dash 0.9s linear infinite; }
.route-dim { opacity: .25; }
@keyframes dash { to { stroke-dashoffset: -16; } }

/* Durak işaretleri */
.stop-pin { position: relative; }
.stop-pin .dot {
  width: 14px; height: 14px; border-radius: 9999px; background: #fff; border: 3px solid #047857;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.stop-pin .lbl {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 800; color: #064e3b; background: rgba(255,255,255,.92);
  padding: 2px 7px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.15); letter-spacing: -.01em;
}
.stop-pin.is-origin .dot { background: #14919b; border-color: #fff; width: 18px; height: 18px; }
.stop-pin.is-dest .dot { background: #f59e0b; border-color: #fff; width: 18px; height: 18px; }

/* Araç işaretçisi */
.car-pin { position: relative; width: 44px; height: 44px; }
.car-pin .pulse { position: absolute; inset: 0; border-radius: 9999px; background: rgba(16,185,129,.35); animation: radar 2s ease-out infinite; }
.car-pin .body {
  position: absolute; inset: 6px; border-radius: 9999px; display: grid; place-items: center;
  background: linear-gradient(135deg,#14919b,#0b4f57); color: #fff; box-shadow: 0 6px 14px -4px rgba(10,70,78,.7); border: 2px solid #fff;
}
.car-pin .badge {
  position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: #f59e0b; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff;
}
.car-pin.is-women .body { background: linear-gradient(135deg,#f472b6,#be185d); }
.car-pin.is-women .pulse { background: rgba(236,72,153,.3); }
.car-pin.is-dim { opacity: .35; filter: grayscale(.6); }

/* Yolcu işaretçisi */
.person-pin { position: relative; width: 38px; height: 38px; }
.person-pin .pulse { position: absolute; inset: 0; border-radius: 9999px; background: rgba(245,158,11,.35); animation: radar 2.2s ease-out infinite; }
.person-pin .body {
  position: absolute; inset: 5px; border-radius: 9999px; display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: #f59e0b; color: #fff; border: 2px solid #fff; box-shadow: 0 6px 14px -4px rgba(180,83,9,.7);
}
.person-pin.is-me .body { background: #2563eb; }
.person-pin.is-me .pulse { background: rgba(37,99,235,.3); }

/* Alt sayfa (bottom sheet) */
.sheet-backdrop { background: rgba(11,26,20,.45); backdrop-filter: blur(2px); }

/* Aralık girişleri */
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =================================================================
   v2 · Düzce İş İlanları
   ================================================================= */

/* ---------- Phosphor ikonları: Tailwind w-* sınıflarını yazı boyutuna çevir ---------- */
i[class*="ph-"] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
i[class*="ph-"].w-3   { font-size: .75rem; }
i[class*="ph-"].w-3\.5{ font-size: .875rem; }
i[class*="ph-"].w-4   { font-size: 1rem; }
i[class*="ph-"].w-5   { font-size: 1.25rem; }
i[class*="ph-"].w-6   { font-size: 1.5rem; }
i[class*="ph-"].w-7   { font-size: 1.75rem; }
i[class*="ph-"].w-8   { font-size: 2rem; }
i[class*="ph-"].w-10  { font-size: 2.5rem; }
i[class*="ph-"].w-12  { font-size: 3rem; }
.ph-duotone::before { opacity: 1; }

/* ---------- Açılış ekranı ---------- */
.splash {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #0b4f57 0%, #022c22 70%);
  animation: splashOut .55s ease 1.35s forwards;
}
.splash-inner { display: grid; justify-items: center; gap: 14px; }
.splash-logo { width: 84px; height: 84px; animation: splashLogo .9s cubic-bezier(.2,.9,.3,1.3) both; filter: drop-shadow(0 16px 30px rgba(0,0,0,.35)); }
.splash-word { color: #fff; font-weight: 800; font-size: 26px; letter-spacing: -.02em; animation: rise .6s .25s both; }
.splash-word span { color: #9edbe0; }
.splash-road { width: 140px; height: 4px; border-radius: 9px; background: rgba(255,255,255,.12); overflow: hidden; animation: rise .6s .35s both; }
.splash-road span { display: block; height: 100%; width: 40%; border-radius: 9px; background: linear-gradient(90deg,#34d399,#fbbf24); animation: road 1s .4s ease-in-out infinite; }
@keyframes road { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes splashLogo { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

/* ---------- Üst menü ---------- */
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; color: #3c4a44; transition: background .2s, color .2s; }
.nav-link i { font-size: 18px; }
.nav-link:hover { background: rgba(0,0,0,.05); }
.nav-link.is-on { background: #e8f6f7; color: #0b4f57; }
.logo-bounce { transition: transform .35s cubic-bezier(.2,.9,.3,1.4); }
@media (hover: hover) { a:hover > .logo-bounce { transform: rotate(-8deg) scale(1.08); } }

/* Alt menü ikon sıçraması */
.tab-item[aria-current] .tab-ico { animation: tabBounce .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes tabBounce { 0% { transform: translateY(4px) scale(.8); } 100% { transform: none; } }
.fab-spin { transition: transform .5s cubic-bezier(.2,.9,.3,1.3); }
.fab:hover .fab-spin, .fab:active .fab-spin { transform: rotate(-90deg); }

/* ---------- Reklam alanları ---------- */
.ad-box { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(11,26,20,.06), 0 8px 24px -12px rgba(11,26,20,.18); transition: transform .2s, box-shadow .2s; }
.ad-box:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -14px rgba(11,26,20,.3); }
.ad-feed_top, .ad-detail, .ad-new_job { aspect-ratio: 32 / 9; min-height: 84px; max-width: 100%; }
.ad-feed_middle, .ad-profile { aspect-ratio: 32 / 10; min-height: 84px; max-width: 100%; }
.ad-label { position: absolute; z-index: 2; top: 8px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #92400e; background: rgba(255,251,235,.92); padding: 2px 7px; border-radius: 99px; }
.ad-empty { background: linear-gradient(110deg,#fffbeb 0%,#fff7ed 45%,#fffbeb 100%); background-size: 200% 100%; animation: adShine 6s linear infinite; border: 1.5px dashed #fcd34d; }
.ad-empty-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; color: #b45309; background: #fef3c7; flex-shrink: 0;
  animation: wiggle 3.2s ease-in-out infinite; }
@keyframes adShine { to { background-position: -200% 0; } }
@keyframes wiggle { 0%,86%,100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

/* ---------- Harita: güzergah çizim, işaretçi düşüşü ---------- */
.route-draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 1.2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pin-drop { animation: pinDrop .6s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes pinDrop { 0% { transform: translateY(-26px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.stop-pin.is-user .dot { border-color: #7c3aed; }
.stop-pin.is-new .dot { background: #7c3aed; border-color: #fff; width: 18px; height: 18px; }
.stop-pin.is-near .dot { border-color: #0ea5e9; }

/* ---------- Konfeti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1500; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confetti 1.8s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confetti { to { transform: translate3d(var(--x), 105vh, 0) rotate(var(--r)); opacity: .2; } }

/* ---------- Sohbet ---------- */
.bubble { max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.45; animation: bubbleIn .28s cubic-bezier(.2,.9,.3,1.2) both; word-wrap: break-word; }
.bubble.me { margin-left: auto; background: linear-gradient(135deg,#059669,#0b4f57); color: #fff; border-bottom-right-radius: 6px; }
.bubble.them { background: #fff; color: #0b1a14; border: 1px solid rgba(0,0,0,.06); border-bottom-left-radius: 6px; }
.bubble.sys { margin: 0 auto; max-width: 92%; background: #fef3c7; color: #78350f; font-size: 12px; font-weight: 600; text-align: center; border-radius: 12px; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 99px; background: #94a3b8; animation: typing 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,60%,100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Kartlar: parıltı, hover ---------- */
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shineMove 3.8s ease-in-out infinite; }
@keyframes shineMove { 0%,70% { left: -60%; } 100% { left: 140%; } }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.badge-chip { transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.badge-chip:hover { transform: translateY(-3px) rotate(-1deg); }
.footer-road { animation: dash 1.4s linear infinite; }

/* ---------- Durak seçici ---------- */
.stop-row { transition: background .15s, transform .15s; }
.stop-row:active { transform: scale(.985); }
.sheet-panel { animation: sheetUp .38s cubic-bezier(.2,.9,.3,1) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Telefon numarası maskesi */
input[data-phone] { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.labels-min .stop-pin:not(.is-f):not(.is-origin):not(.is-dest):not(.is-new) .lbl { display: none; }
.labels-min .stop-pin:not(.is-f):not(.is-origin):not(.is-dest):not(.is-new) .dot { width: 10px; height: 10px; border-width: 2px; }

/* =================================================================
   v3 · "Gece hattı" tasarım dili
   Karanlık, ışıklı bir hat haritası sahne; içerik açık bir sayfa
   olarak haritanın üstüne yükselir. İlanlar ve biniş kodu bilettir.
   ================================================================= */
:root {
  --night: #0f2830; --night-2: #13323b; --lane: #1d4651; --glow: #3cc4ce; --glow-deep: #0c7c86;
  --signal: #d49440; --blush: #ff6b8e; --sky: #4cc3ff; --violet: #8b7bff;
  --paper: #f3f6f7; --card: #ffffff; --sunk: #e7eef0; --ink: #12303a; --ink-2: #3b5158; --mute: #6b7f85; --line: rgba(18,48,58,.08); --on-ink: #ffffff;
  --tint-glow: #d8f1f3; --tint-signal: #f8ecdc; --tint-blush: #ffe9ef; --tint-blush-2: #ffe1e9;
  --spring: cubic-bezier(.2,.9,.25,1.25); --ease: cubic-bezier(.2,.8,.2,1);
  --display: "Bricolage Grotesque", Onest, system-ui, sans-serif;
}
body.dy { background: var(--paper); color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease); }
body.dy h1, body.dy h2, body.dy .font-display { font-family: var(--display); letter-spacing: -.025em; }
body.dy h3 { letter-spacing: -.01em; }
:focus-visible { outline: 3px solid rgba(60,196,206,.6); outline-offset: 2px; border-radius: 10px; }

/* Üst bar */
.topbar { position: sticky; top: 0; z-index: 500; background: rgba(15,40,48,.92); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.06); }
.logo-glow { filter: drop-shadow(0 6px 16px rgba(60,196,206,.4)); }
.nav-link { color: rgba(238,248,249,.65); }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.is-on { background: rgba(60,196,206,.14); color: var(--glow); box-shadow: inset 0 0 0 1px rgba(60,196,206,.25); }
.nav-link.is-admin { color: #b9b0ff; }
.glass-btn { width: 40px; height: 40px; border-radius: 14px; display: inline-grid; place-items: center; grid-auto-flow: column; color: #eef8f9; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); transition: transform .25s var(--spring), background .2s; flex-shrink: 0; }
.glass-btn:hover { background: rgba(255,255,255,.15); }
.glass-btn:active { transform: scale(.9); }
.ann-bar { background: linear-gradient(90deg, #13323b, #164049 50%, #13323b); border-bottom: 1px solid rgba(60,196,206,.15); }
.ann-ico { animation: wiggle 3.2s ease-in-out infinite; }
.flash-ok { box-shadow: 0 0 0 4px rgba(60,196,206,.12); }

/* Sahne */
.scene { position: relative; height: 420px; overflow: hidden; isolation: isolate; background: var(--night); color: #eef8f9; }
.scene.sm { height: 320px; }
.scene-map, .scene .leaflet-container { background: var(--night) !important; }
.scene .leaflet-tile-pane { filter: saturate(1.4) hue-rotate(-12deg) brightness(1.05); }
.scene-shade { position: absolute; inset: 0; z-index: 401; pointer-events: none; background: linear-gradient(180deg, rgba(15,40,48,.9) 0%, rgba(15,40,48,.15) 38%, rgba(15,40,48,0) 60%, rgba(15,40,48,.85) 100%); }
.scene-hud { position: absolute; z-index: 410; left: 0; right: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); pointer-events: none; }
.scene-hud .glass-btn, .scene-hud a, .scene-hud button { pointer-events: auto; }
.scene .leaflet-control-zoom { margin-bottom: 100px !important; }
.hero-title { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: .98; letter-spacing: -.04em; color: #fff; margin-top: 4px; text-shadow: 0 6px 30px rgba(0,0,0,.55); }
.hero-title .ch { display: inline-block; animation: charIn .7s var(--spring) both; }
@keyframes charIn { from { opacity: 0; transform: translateY(.5em) rotate(6deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.live-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 12px 7px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #eef8f9; background: rgba(60,196,206,.12); border: 1px solid rgba(60,196,206,.3); backdrop-filter: blur(10px); }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); animation: beacon 1.8s infinite; color: var(--glow); }
.live-chip b { font-variant-numeric: tabular-nums; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(60,196,206,.6); } 100% { box-shadow: 0 0 0 10px rgba(60,196,206,0); } }
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker .track { display: flex; gap: 24px; width: max-content; animation: marquee 38s linear infinite; }
.ticker .ev { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: rgba(238,248,249,.78); white-space: nowrap; }
.ticker .ev b { color: #fff; font-weight: 700; }
.ticker .ev i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Arama bileti */
.search-ticket { position: relative; z-index: 420; margin-top: -84px !important; background: var(--card); border-radius: 26px; padding: 8px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 1px 2px rgba(15,40,48,.06); animation: rise .8s var(--ease) .3s both; }
.field-row { display: flex; align-items: center; gap: 12px; padding: 10px 64px 10px 14px; border-radius: 18px; transition: background .2s; cursor: pointer; }
.field-row:hover, .field-row:focus-within { background: var(--sunk); }
.pin-o, .pin-d { width: 12px; height: 12px; flex-shrink: 0; display: inline-block; }
.pin-o { border-radius: 50%; background: var(--glow-deep); box-shadow: 0 0 0 4px rgba(60,196,206,.25); }
.pin-d { border-radius: 3px; background: var(--signal); box-shadow: 0 0 0 4px rgba(212,148,64,.25); }
.swap-btn { position: absolute; right: 12px; top: 50%; margin-top: -21px; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); box-shadow: 0 12px 24px -12px rgba(15,40,48,.8); transition: transform .5s var(--spring); }
.swap-btn.spin { transform: rotate(180deg); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); transition: transform .25s var(--spring), background .2s, color .2s; }
.chip:active { transform: scale(.94); }
.chip.on { background: var(--ink); color: var(--on-ink); }
.toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 18px; background: var(--sunk); transition: background .3s; margin-top: 4px; }
.toggle.on { background: var(--tint-blush); }
.tg-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--card); color: var(--blush); transition: all .4s var(--spring); flex-shrink: 0; }
.toggle.on .tg-ic { background: var(--blush); color: #fff; transform: rotate(-8deg); }
.switch { width: 46px; height: 28px; border-radius: 999px; background: rgba(18,48,58,.16); padding: 3px; transition: background .25s; flex-shrink: 0; }
.switch i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .35s var(--spring); }
.on > .switch { background: var(--blush); } .on > .switch i { transform: translateX(18px); }
.active-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; color: #06242a; background: linear-gradient(120deg, #7fd6dd, var(--glow)); box-shadow: 0 14px 34px -14px rgba(12,124,134,.75); animation: drop .5s var(--spring) both; }

/* İlan bileti */
.ticket { position: relative; background: var(--card); border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(15,40,48,.04), 0 2px 6px -2px rgba(15,40,48,.08); cursor: pointer; animation: ticketIn .7s var(--spring) both; transition: transform .3s var(--spring), box-shadow .3s, border-color .3s; }
.ticket:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(15,40,48,.35); }
.ticket:active { transform: scale(.985); }
.ticket.sel { border-color: rgba(12,124,134,.6); box-shadow: 0 0 0 4px rgba(60,196,206,.2), 0 18px 40px -20px rgba(15,40,48,.35); }
@keyframes ticketIn { from { opacity: 0; transform: perspective(600px) translateY(26px) rotateX(18deg); } to { opacity: 1; transform: none; } }
.t-top { display: flex; gap: 12px; align-items: center; padding: 16px 16px 14px; }
.t-stop { display: flex; align-items: center; gap: 9px; min-width: 0; }
.t-stop b { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.t-rail { position: relative; margin: 3px 0 3px 5px; height: 20px; border-left: 2px dashed rgba(12,124,134,.45); }
.t-rail i { position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--glow-deep); animation: railCar 2.4s var(--ease) infinite; }
.ticket.women .t-rail { border-color: rgba(255,107,142,.55); } .ticket.women .t-rail i { background: var(--blush); }
@keyframes railCar { 50% { top: 10px; } }
.perf { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 18px; }
.perf::before, .perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.perf::before { left: -29px; clip-path: inset(0 0 0 50%); } .perf::after { right: -29px; clip-path: inset(0 50% 0 0); }
.t-bottom { padding: 14px 16px 16px; }
.cd-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.cd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cd-val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.cd-val b { display: block; font-family: var(--display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd-val small { display: block; font-size: 10px; font-weight: 600; color: var(--mute); margin-top: 2px; }
.ring-track { stroke: var(--sunk); }
.plate { display: inline-flex; align-items: stretch; height: 22px; border-radius: 5px; overflow: hidden; border: 1.5px solid #122a31; background: #fff; color: #122a31; font-weight: 800; font-size: 12px; letter-spacing: .08em; flex-shrink: 0; font-variant-numeric: tabular-nums; font-style: normal; }
.plate i { font-style: normal; background: #1d4ed8; color: #fff; font-size: 7.5px; letter-spacing: 0; width: 13px; display: grid; place-items: end center; padding-bottom: 2px; }
.plate b { padding: 0 6px; display: grid; place-items: center; }
.plate.lg { height: 34px; font-size: 18px; border-width: 2px; border-radius: 7px; } .plate.lg i { width: 19px; font-size: 9px; } .plate.lg b { padding: 0 10px; }
.seats { display: flex; gap: 4px; flex-shrink: 0; }
.seats i { width: 18px; height: 18px; border-radius: 6px 6px 4px 4px; background: rgba(18,48,58,.09); }
.seats i.f { background: var(--glow-deep); animation: seatPop .5s var(--spring) both; }
.seats i:nth-child(2) { animation-delay: .08s; } .seats i:nth-child(3) { animation-delay: .16s; } .seats i:nth-child(4) { animation-delay: .24s; }
@keyframes seatPop { from { transform: scale(.3); } to { transform: none; } }
.tag-you, .tag-women { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; }
.tag-you { background: var(--ink); color: var(--on-ink); } .tag-women { background: var(--tint-blush-2); color: #d63a62; }

/* Butonlar */
.btn { position: relative; overflow: hidden; width: 100%; height: 52px; border-radius: 17px; font-weight: 700; font-size: 15.5px; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform .25s var(--spring), box-shadow .25s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-go, .btn.btn-go { color: #06242a; background: linear-gradient(135deg, #5af0b6, var(--glow) 40%, #14919b); box-shadow: 0 14px 34px -14px rgba(12,124,134,.75); }
.btn-go::after, [class*="from-pine-600"]:not(.no-shine)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); animation: shineBtn 3.4s ease-in-out infinite; pointer-events: none; }
[class*="from-pine-600"]:not(.no-shine) { position: relative; overflow: hidden; }
@keyframes shineBtn { 0%, 60% { left: -60%; } 100% { left: 140%; } }
.btn-wait { background: var(--tint-signal); color: #a86a00; }
.btn-ok, .btn-mine { background: var(--tint-glow); color: var(--glow-deep); }
.btn-off { background: var(--sunk); color: var(--mute); cursor: not-allowed; }
.btn-dark { background: var(--ink); color: var(--on-ink); }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); animation: ripple .6s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.shimmer-card { height: 210px; border-radius: 24px; background: linear-gradient(100deg, var(--card) 30%, var(--sunk) 50%, var(--card) 70%); background-size: 300% 100%; animation: shimmer2 1.2s linear infinite; }
@keyframes shimmer2 { to { background-position: -150% 0; } }
.empty-card { text-align: center; padding: 34px 22px; background: var(--card); border-radius: 26px; border: 1px solid var(--line); }
.wait-orb { position: relative; width: 90px; height: 90px; margin: 0 auto; color: var(--signal); }
.wait-orb::before, .wait-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: ring2 2.4s ease-out infinite; }
.wait-orb::after { animation-delay: 1.2s; }
.wait-orb > div { position: absolute; inset: 14px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #ffe2a8, var(--signal)); color: #2a1800; box-shadow: 0 12px 30px -10px rgba(212,148,64,.8); }
.wait-orb.g { color: var(--glow-deep); } .wait-orb.g > div { background: radial-gradient(circle at 30% 30%, #b9fbe0, var(--glow)); color: #06242a; box-shadow: 0 12px 30px -10px rgba(60,196,206,.8); }
@keyframes ring2 { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* Alt menü: yüzen karanlık dock */
.dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 600; width: min(440px, calc(100% - 32px)); height: 70px; border-radius: 26px; display: grid; grid-template-columns: 1fr 1fr 80px 1fr 1fr; align-items: center; padding: 0 6px; background: rgba(15,40,48,.92); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); animation: dockIn .9s var(--spring) .2s both; }
@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 40px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
.dock-tab { position: relative; height: 54px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: rgba(238,248,249,.55); transition: color .25s, background .3s; }
.dock-tab i { font-size: 23px; transition: transform .45s var(--spring); }
.dock-tab.is-on { color: var(--glow); background: rgba(60,196,206,.13); box-shadow: inset 0 0 0 1px rgba(60,196,206,.25); }
.dock-tab.is-on i { transform: translateY(-1px) scale(1.12); animation: tabBounce .5s var(--spring) both; }
.dock-fab { justify-self: center; margin-top: -30px; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; font-size: 30px; color: #06242a; background: linear-gradient(140deg, #7fd6dd, var(--glow) 45%, #14919b); box-shadow: 0 16px 34px -10px rgba(60,196,206,.75), 0 0 0 5px var(--paper); transition: transform .4s var(--spring); }
.dock-fab:hover { transform: translateY(-3px) rotate(-6deg); }
.dock-fab i { transition: transform .6s var(--spring); }
.dock-fab.is-on i { transform: rotate(135deg); }
.dock-live { position: absolute; left: calc(6px + (100% - 92px) / 4 * 1.5 + 8px); top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: beacon 1.6s infinite; pointer-events: none; }

/* Bildirim balonları */
.toasts { position: fixed; top: calc(74px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast { position: relative; overflow: hidden; pointer-events: auto; width: 100%; max-width: 420px; padding: 13px 15px; border-radius: 18px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 11px; color: #eef8f9; background: rgba(15,40,48,.95); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); animation: toastIn .55s var(--spring) both; }
.toast.is-error { background: rgba(170,30,45,.96); }
.toast .ti { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: rgba(60,196,206,.18); color: var(--glow); flex-shrink: 0; }
.toast.is-error .ti { background: rgba(255,255,255,.18); color: #fff; }
.toast.is-info .ti { background: rgba(76,195,255,.18); color: var(--sky); }
.toast .prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--glow); animation: toastProg 3.4s linear both; }
.toast.is-error .prog { background: #fff; } .toast.is-info .prog { background: var(--sky); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-24px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes toastProg { from { width: 100%; } to { width: 0; } }

/* Açılış */
.splash { background: radial-gradient(70% 50% at 50% 40%, #0f3a2b, var(--night) 70%); animation: splashOut .6s var(--ease) 1.6s forwards; }
.splash-logo { width: 92px; height: 92px; filter: drop-shadow(0 18px 40px rgba(60,196,206,.45)); }
.splash-word { font-family: var(--display); font-size: 32px; letter-spacing: -.04em; }
.splash-word span { color: var(--glow); }
.splash-road { width: 220px; height: 40px; background: none; overflow: visible; }
.splash-road path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1.2s var(--ease) .4s forwards; }
.splash-road circle { opacity: 0; animation: fadeIn .3s 1.4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* Altbilgi */
.site-foot { background: radial-gradient(90% 90% at 100% 0%, #164049, var(--night) 60%); }
.site-foot::before { content: ""; position: absolute; right: -50px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%; border: 18px solid rgba(60,196,206,.07); }

/* Reklam (boş alan) */
.ad-box { border-radius: 22px; }
.ad-empty { color: #fff; border: 0; background: linear-gradient(120deg, #2a1a4f, #4b2a83 55%, #7a3d8f); animation: none; isolation: isolate; }
.ad-empty::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -50px; top: -80px; background: radial-gradient(circle, rgba(212,148,64,.55), transparent 65%); z-index: -1; animation: orbit 9s ease-in-out infinite; }
@keyframes orbit { 50% { transform: translate(-60px, 40px); } }
.ad-empty .ad-empty-ico { background: rgba(255,255,255,.12); color: var(--signal); }
.ad-empty .text-ink, .ad-empty .text-amber-900, .ad-empty b, .ad-empty strong { color: #fff !important; }
.ad-empty .text-ink-mute, .ad-empty .text-amber-800, .ad-empty .text-amber-700, .ad-empty small, .ad-empty p { color: rgba(255,255,255,.75) !important; }
.ad-label { color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 10px; }

/* Leaflet karanlık işaretçiler */
.stop-pin .dot { background: #eef8f9; border: 3px solid var(--night); box-shadow: 0 0 0 3px rgba(60,196,206,.35), 0 0 14px rgba(60,196,206,.5); }
.stop-pin .lbl { color: #dff7ec; background: rgba(15,40,48,.82); border: 1px solid rgba(60,196,206,.25); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,.4); font-weight: 700; }
.stop-pin.is-origin .dot { background: var(--glow); border-color: var(--night); box-shadow: 0 0 0 5px rgba(60,196,206,.3), 0 0 22px var(--glow); }
.stop-pin.is-dest .dot { background: var(--signal); border-color: var(--night); box-shadow: 0 0 0 5px rgba(212,148,64,.3), 0 0 22px var(--signal); }
.stop-pin.is-user .dot, .stop-pin.is-new .dot { background: var(--violet); }
.car-pin .pulse { background: rgba(60,196,206,.35); }
.car-pin .body { background: linear-gradient(135deg, #7fd6dd, var(--glow) 50%, #14919b); color: #06242a; border: 2px solid var(--night); box-shadow: 0 0 22px rgba(60,196,206,.75); }
.car-pin .badge { background: var(--signal); color: #2a1800; border-color: var(--night); }
.car-pin.is-women .body { background: linear-gradient(135deg, #ffa3b9, var(--blush)); color: #fff; box-shadow: 0 0 22px rgba(255,107,142,.75); }
.car-pin.is-women .pulse { background: rgba(255,107,142,.3); }
.person-pin .body { background: var(--signal); color: #2a1800; border-color: var(--night); box-shadow: 0 0 18px rgba(212,148,64,.7); }
.person-pin.is-me .body { background: var(--sky); color: #031a26; box-shadow: 0 0 18px rgba(76,195,255,.8); }
.person-pin.is-me .pulse { background: rgba(76,195,255,.3); }
.route-anim { stroke-dasharray: 1 10; }
.route-halo { filter: blur(3px); }
.leaflet-control-zoom a { background: rgba(15,40,48,.85) !important; color: #eef8f9 !important; border-color: rgba(255,255,255,.1) !important; }
.leaflet-control-attribution { background: rgba(15,40,48,.6) !important; color: rgba(238,248,249,.5) !important; }
.leaflet-control-attribution a { color: rgba(238,248,249,.7) !important; }
.leaflet-tooltip { background: rgba(15,40,48,.92); color: #eef8f9; border: 1px solid rgba(60,196,206,.3); border-radius: 10px; font-weight: 700; }
.leaflet-tooltip-top::before { border-top-color: rgba(15,40,48,.92); }

/* Sayfa üstü karanlık harita kabukları (detay, ilan aç) */
.map-shell { background: var(--night) !important; border-color: rgba(255,255,255,.06) !important; box-shadow: 0 30px 60px -34px rgba(15,40,48,.8) !important; }
.map-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 401; border-radius: inherit; box-shadow: inset 0 0 60px rgba(15,40,48,.75); }

/* Biniş kartı (PIN) */
.pass-card { position: relative; border-radius: 26px; overflow: hidden; color: #2a1800 !important; background: linear-gradient(150deg, #ecc58a, var(--signal) 45%, #c9782c) !important; box-shadow: 0 24px 50px -24px rgba(255,143,63,.85) !important; animation: passIn .8s var(--spring) both; }
.pass-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.45), transparent 50%); pointer-events: none; }
.pass-card p, .pass-card span:not(.pin-digit) { color: inherit !important; }
.pass-card .pin-digit { background: #fffaf0 !important; color: #1b1100 !important; font-family: var(--display); border-radius: 18px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06), 0 10px 20px -10px rgba(120,60,0,.6) !important; transform-origin: center bottom; }
.pass-perf { position: relative; border-top: 2px dashed rgba(42,24,0,.25); margin: 16px -20px 0; }
.pass-perf::before, .pass-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); }
.pass-perf::before { left: -10px; } .pass-perf::after { right: -10px; }
.barcode { height: 30px; display: flex; gap: 2px; align-items: stretch; opacity: .7; margin-top: 14px; }
.barcode i { background: #2a1800; border-radius: 1px; }
@keyframes passIn { from { opacity: 0; transform: translateY(30px) scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
.pinpad { background: radial-gradient(120% 90% at 0% 0%, #164049, var(--night)) !important; }
.pinpad input { background: rgba(255,255,255,.06) !important; border: 2px solid rgba(255,255,255,.12) !important; color: #fff !important; font-family: var(--display); transition: border-color .2s, transform .3s var(--spring); }
.pinpad input:focus, .pinpad input.fill { border-color: var(--glow) !important; transform: translateY(-3px); }

/* İlerleme çizgisi (yolcu adımları) */
.progress-car { transition: left .9s var(--spring); }

/* Profil kimlik kartı */
.id-card { position: relative; border-radius: 28px; padding: 20px; color: #eef8f9; overflow: hidden; background: radial-gradient(120% 100% at 100% 0%, #0b5560 0%, #0c3138 45%, var(--night) 100%); box-shadow: 0 30px 60px -30px rgba(15,40,48,.8); }
.id-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); pointer-events: none; }
.id-card .holo { position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(60,196,206,0), rgba(60,196,206,.4), rgba(76,195,255,.35), rgba(212,148,64,.3), rgba(60,196,206,0)); filter: blur(24px); animation: spin 12s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.trust-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.trust-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.trust-ring .arc { stroke-dasharray: 251; stroke-dashoffset: 251; animation: arcIn 1.6s var(--ease) .4s forwards; }
.trust-ring .av { position: absolute; inset: 11px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.trust-ring .av > * { width: 100% !important; height: 100% !important; border-radius: 50% !important; }
@keyframes arcIn { to { stroke-dashoffset: var(--arc-to, 6); } }
.id-stat { padding: 12px 6px; border-radius: 18px; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.id-stat b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.id-stat > span { font-size: 11px; color: rgba(238,248,249,.65); font-weight: 500; }
.badge-chip { position: relative; overflow: hidden; }
.badge-chip::after { content: ""; position: absolute; top: -50%; bottom: -50%; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(18deg); animation: shineMove 4.5s ease-in-out infinite; pointer-events: none; }

/* İlan aç: garaj */
.garage { position: relative; height: 156px; border-radius: 20px; overflow: hidden; background: radial-gradient(80% 90% at 50% 100%, #1f4637, var(--night)); }
.garage .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(transparent, rgba(0,0,0,.35)); overflow: hidden; }
.garage .floor::before { content: ""; position: absolute; left: -60px; right: -60px; top: 16px; height: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 22px, transparent 22px 48px); animation: lane .8s linear infinite; }
.garage svg.car { position: absolute; left: 50%; bottom: 18px; width: 220px; margin-left: -110px; animation: carBob .9s ease-in-out infinite; }
.garage .paint { transition: fill .6s var(--ease); }
.garage .wheel { animation: wheelSpin .6s linear infinite; transform-box: fill-box; transform-origin: center; }
.garage .g-label { position: absolute; left: 14px; top: 12px; color: #eef8f9; max-width: 60%; }
.garage .g-label b { display: block; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.garage .g-label span { font-size: 12px; color: rgba(238,248,249,.65); }
.garage .plate { position: absolute; right: 14px; top: 14px; }
@keyframes lane { to { transform: translateX(-48px); } }
@keyframes carBob { 50% { transform: translateY(-2px); } }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.form-progress { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 30; padding: 10px 0 12px; background: linear-gradient(var(--paper) 70%, transparent); }
.form-progress .bar2 { height: 6px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.form-progress .bar2 i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--glow-deep), var(--glow)); transition: width .7s var(--spring); }

/* Alt sayfalar */
.sheet-backdrop { background: rgba(3,14,10,.55); backdrop-filter: blur(4px); }
.sheet-up { border-radius: 30px 30px 0 0; }

/* Kartlarda ortak yumuşak yükseliş */
body.dy .shadow-card { box-shadow: 0 1px 1px rgba(15,40,48,.04), 0 2px 6px -2px rgba(15,40,48,.08); }
body.dy .bg-white.rounded-3xl, body.dy .bg-white.rounded-\[28px\] { border-color: var(--line); }

@media (min-width: 768px) {
  .scene { height: 460px; }
  .hero-title { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker .track, .hero-title .ch { animation: none !important; }
}
.ad-empty b.text-amber-700 { color: var(--signal) !important; }
.ad-empty .text-amber-600 { color: rgba(255,255,255,.8) !important; }
.ad-empty .font-extrabold { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; backdrop-filter: blur(12px); background: rgba(15,40,48,.6); border: 1px solid rgba(255,255,255,.12); }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: live 1.6s infinite; }
.share-loc { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; color: #eef8f9; background: rgba(15,40,48,.7); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); transition: background .3s; }
.share-loc.on { background: rgba(14,90,64,.85); border-color: rgba(60,196,206,.4); }
.share-loc .switch { background: rgba(255,255,255,.18); }
.share-loc.on > .switch { background: var(--signal); }
.route-card { position: relative; z-index: 420; margin-top: -40px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55) !important; animation: rise .7s var(--ease) .25s both; }
.rail-flow { background: repeating-linear-gradient(to bottom, rgba(12,124,134,.55) 0 5px, transparent 5px 10px); background-size: 2px 10px; animation: railFlow 1s linear infinite; }
@keyframes railFlow { to { background-position: 0 10px; } }
.hourglass { animation: hourglass 2.4s var(--ease) infinite; }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
.text-sky2 { color: var(--sky); } .text-blush { color: var(--blush); }
.step-n { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--sunk); color: var(--mute); transition: all .45s var(--spring); flex-shrink: 0; }
.step-n.done { background: var(--glow-deep); color: #fff; transform: rotate(-8deg) scale(1.08); box-shadow: 0 8px 18px -8px rgba(12,124,134,.8); }
.seat-pop { animation: seatPop .45s var(--spring) both; }
.preview-glass { background: rgba(15,40,48,.66); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.plate-in { width: 100%; height: 48px; border-radius: 10px; border: 2.5px solid #122a31; background: #fff; color: #122a31; display: flex; overflow: hidden; }
.plate-in i { font-style: normal; background: #1d4ed8; color: #fff; width: 18px; display: grid; place-items: end center; font-size: 8px; font-weight: 800; padding-bottom: 4px; }
.plate-in input { flex: 1; min-width: 0; border: 0; outline: none; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .18em; background: transparent; color: inherit; }
.plate-in:focus-within { box-shadow: 0 0 0 4px rgba(60,196,206,.3); }
[data-chars] .ch { display: inline-block; animation: charIn .7s var(--spring) both; }
/* Tanıtım sayfası */
.land-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: #eef8f9; min-height: 560px; }
.land-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.land-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,40,48,.25) 0%, rgba(15,40,48,.7) 50%, rgba(15,40,48,.94) 100%); }
.land-title { font-family: var(--display); font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: #fff; margin-top: 18px; max-width: 14ch; text-shadow: 0 8px 30px rgba(0,0,0,.5); }
.land-title .ch { display: inline-block; animation: charIn .7s var(--spring) both; }
.land-stat { padding: 12px 6px; border-radius: 18px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.land-stat b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--glow); font-variant-numeric: tabular-nums; }
.land-stat > span { font-size: 11px; color: rgba(238,248,249,.65); font-weight: 500; }
.land-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s var(--ease) .3s forwards; }
.land-flow { animation: dash 1s linear infinite; }
.land-stop { animation: pinDrop .6s var(--spring) both; }
.how-rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 12px; }
.how-rail::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(12,124,134,.5) 0 5px, transparent 5px 10px); background-size: 2px 10px; animation: railFlow 1s linear infinite; }
.how-step { display: flex; gap: 14px; align-items: flex-start; }
.how-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: #06242a; background: linear-gradient(140deg, #7fd6dd, var(--glow)); box-shadow: 0 10px 22px -10px rgba(12,124,134,.9), 0 0 0 5px var(--paper); flex-shrink: 0; }
@media (min-width: 768px) { .land-title { font-size: 60px; } .land-hero { min-height: 600px; } }

/* =================================================================
   Gece / gündüz modu
   html.dark → gece (koyu sayfa, karanlık harita)
   html:not(.dark) → gündüz (açık sayfa, açık harita)
   ================================================================= */
html.dark {
  color-scheme: dark;
  --paper: #0b171b; --card: #12242a; --sunk: #1a3038; --ink: #e4eef0; --ink-2: #b4c6cb; --mute: #819599;
  --line: rgba(228,238,240,.09); --on-ink: #0b171b;
  --tint-glow: rgba(60,196,206,.14); --tint-signal: rgba(212,148,64,.16); --tint-blush: rgba(255,107,142,.16); --tint-blush-2: rgba(255,107,142,.18);
}
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease) !important; }

/* Tailwind sınıflarının gece karşılıkları */
html.dark .bg-white, html.dark .bg-white\/95, html.dark .bg-white\/90, html.dark .adm-card { background-color: var(--card) !important; }
html.dark .\!bg-white { background-color: var(--sunk) !important; }
html.dark .bg-sand-50, html.dark .bg-sand-100, html.dark .bg-\[\#f6f7f5\], html.dark .bg-\[\#f3f4f1\], html.dark .adm-in { background-color: var(--sunk) !important; }
html.dark .text-ink { color: var(--ink) !important; }
html.dark .text-ink-soft { color: var(--ink-2) !important; }
html.dark .text-ink-mute { color: var(--mute) !important; }
html.dark .border-black\/5, html.dark .border-black\/10, html.dark .divide-black\/5 > * + * { border-color: var(--line) !important; }
html.dark .bg-black\/5, html.dark .bg-black\/10 { background-color: rgba(255,255,255,.07) !important; }
html.dark .bg-black\/15 { background-color: rgba(255,255,255,.16) !important; }
html.dark .ring-white { --tw-ring-color: var(--card) !important; }
html.dark .bg-ink { background-color: var(--ink) !important; color: var(--on-ink) !important; }
html.dark .bg-ink.text-white, html.dark .bg-ink .text-white { color: var(--on-ink) !important; }
html.dark .bg-pine-50, html.dark .bg-pine-50\/60 { background-color: rgba(60,196,206,.1) !important; }
html.dark .bg-pine-100 { background-color: rgba(60,196,206,.16) !important; }
html.dark .text-pine-700, html.dark .text-pine-800, html.dark .text-pine-900 { color: #7fd6dd !important; }
html.dark .border-pine-200, html.dark .ring-pine-200 { border-color: rgba(60,196,206,.3) !important; --tw-ring-color: rgba(60,196,206,.3) !important; }
html.dark .bg-amber-50, html.dark .bg-amber-50\/70, html.dark .bg-amber-100 { background-color: rgba(212,148,64,.13) !important; }
html.dark .text-amber-900, html.dark .text-amber-800, html.dark .text-amber-700 { color: #ecc58a !important; }
html.dark .bg-rose-50 { background-color: rgba(229,72,77,.14) !important; }
html.dark .text-rose-900 { color: #ffb3b6 !important; }
html.dark .border-rose-200, html.dark .border-amber-200, html.dark .ring-amber-200 { border-color: rgba(255,255,255,.12) !important; --tw-ring-color: rgba(212,148,64,.3) !important; }
html.dark .bg-pink-50, html.dark .bg-pink-100 { background-color: rgba(255,107,142,.14) !important; }
html.dark .bg-violet-50 { background-color: rgba(139,123,255,.16) !important; }
html.dark .text-violet-700, html.dark .text-violet-600 { color: #b9b0ff !important; }
html.dark .bg-sky-50, html.dark .bg-blue-50 { background-color: rgba(76,195,255,.14) !important; }
html.dark .text-blue-700, html.dark .text-sky-700 { color: #8fd8ff !important; }
html.dark [class*="bg-slate-100"], html.dark [class*="bg-emerald-100"], html.dark [class*="bg-gray-100"] { background-color: rgba(255,255,255,.08) !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: rgba(228,238,240,.35); }
html.dark .bubble.them { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .bubble.sys { background: rgba(212,148,64,.14); color: #ecc58a; }
html.dark .skeleton { background: var(--sunk); }
html.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
html.dark .adm-table tr:hover td { background: rgba(139,123,255,.08); }
html.dark .from-sand-100 { --tw-gradient-from: var(--sunk) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .to-white { --tw-gradient-to: var(--card) var(--tw-gradient-to-position) !important; }
html.dark .dock { background: rgba(15,32,26,.92); }
html.dark .site-foot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* Gündüz: açık harita sahnesi */
html:not(.dark) .scene, html:not(.dark) .scene-map, html:not(.dark) .scene .leaflet-container, html:not(.dark) .map-shell { background: #dfe8e2 !important; }
html:not(.dark) .scene { color: var(--ink); }
html:not(.dark) .scene .leaflet-tile-pane { filter: saturate(1.05); }
html:not(.dark) .scene-shade { background: linear-gradient(180deg, rgba(242,246,243,.94) 0%, rgba(242,246,243,.35) 36%, rgba(242,246,243,0) 58%, rgba(242,246,243,.9) 100%); }
html:not(.dark) .map-shell::after { box-shadow: inset 0 0 40px rgba(18,48,58,.12); }
html:not(.dark) .hero-title, html:not(.dark) .scene h1 { color: var(--ink) !important; text-shadow: none; }
html:not(.dark) .scene .text-white\/70, html:not(.dark) .scene .text-white\/60 { color: var(--mute) !important; }
html:not(.dark) .scene .glass-btn { color: var(--ink); background: rgba(255,255,255,.75); border-color: rgba(18,48,58,.08); box-shadow: 0 6px 16px -10px rgba(15,40,48,.5); }
html:not(.dark) .scene .live-chip { color: var(--ink); background: rgba(255,255,255,.75); border-color: rgba(12,124,134,.35); }
html:not(.dark) .scene .live-chip i { background: var(--glow-deep); }
html:not(.dark) .ticker .ev { color: var(--ink-2); } html:not(.dark) .ticker .ev b { color: var(--ink); }
html:not(.dark) .status-pill { background: rgba(255,255,255,.8); border-color: rgba(18,48,58,.08); }
html:not(.dark) .status-pill.text-glow { color: var(--glow-deep); } html:not(.dark) .status-pill.text-white { color: var(--ink); }
html:not(.dark) .share-loc { color: var(--ink); background: rgba(255,255,255,.85); border-color: rgba(18,48,58,.08); }
html:not(.dark) .share-loc .switch { background: rgba(18,48,58,.16); }
html:not(.dark) .preview-glass { background: rgba(255,255,255,.85); border-color: rgba(18,48,58,.08); }
html:not(.dark) .preview-glass .text-white { color: var(--ink) !important; } html:not(.dark) .preview-glass .text-white\/70 { color: var(--mute) !important; } html:not(.dark) .preview-glass .text-glow { color: var(--glow-deep) !important; }
html:not(.dark) .stop-pin .dot { background: #fff; border-color: var(--glow-deep); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
html:not(.dark) .stop-pin .lbl { color: #0b4f57; background: rgba(255,255,255,.94); border-color: rgba(12,124,134,.2); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
html:not(.dark) .stop-pin.is-origin .dot { background: var(--glow-deep); border-color: #fff; box-shadow: 0 0 0 4px rgba(12,124,134,.25); }
html:not(.dark) .stop-pin.is-dest .dot { background: var(--signal); border-color: #fff; box-shadow: 0 0 0 4px rgba(212,148,64,.3); }
html:not(.dark) .car-pin .body { border-color: #fff; box-shadow: 0 6px 14px -4px rgba(10,70,78,.6); }
html:not(.dark) .leaflet-control-zoom a { background: rgba(255,255,255,.95) !important; color: var(--ink) !important; border-color: rgba(0,0,0,.08) !important; }
html:not(.dark) .leaflet-control-attribution { background: rgba(255,255,255,.7) !important; color: #6b7f85 !important; }
html:not(.dark) .leaflet-control-attribution a { color: #0b4f57 !important; }
html:not(.dark) .leaflet-tooltip { background: #fff; color: var(--ink); border-color: rgba(12,124,134,.25); }
html:not(.dark) .leaflet-tooltip-top::before { border-top-color: #fff; }
html:not(.dark) .route-anim { stroke: #fff; }

/* Gündüz: açık üst bar */
html:not(.dark) .topbar { background: rgba(255,255,255,.86); border-bottom-color: rgba(18,48,58,.06); }
html:not(.dark) .topbar .text-white { color: var(--ink) !important; }
html:not(.dark) .topbar .text-white\/55 { color: var(--mute) !important; }
html:not(.dark) .topbar .text-glow { color: var(--glow-deep) !important; }
html:not(.dark) .topbar .glass-btn { color: var(--ink); background: var(--sunk); border-color: transparent; }
html:not(.dark) .topbar .ring-night { --tw-ring-color: #fff; }
html:not(.dark) .nav-link { color: var(--ink-2); }
html:not(.dark) .nav-link:hover { background: var(--sunk); color: var(--ink); }
html:not(.dark) .nav-link.is-on { color: var(--glow-deep); background: var(--tint-glow); }
html:not(.dark) .nav-link.is-admin { color: #5b4de0; }

/* Mod düğmesi */
.theme-btn { position: relative; overflow: hidden; }
.theme-btn i { transition: transform .6s var(--spring), opacity .3s; }
.theme-btn .ic-sun, .theme-btn .ic-moon, .theme-btn .ic-auto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.theme-btn .ic-sun { color: #f5a50b; } .theme-btn .ic-moon { color: #b9b0ff; } .theme-btn .ic-auto { color: var(--glow-deep); }
html[data-mode="light"] .theme-btn .ic-moon, html[data-mode="light"] .theme-btn .ic-auto { opacity: 0; transform: translateY(18px) rotate(-90deg); }
html[data-mode="dark"] .theme-btn .ic-sun, html[data-mode="dark"] .theme-btn .ic-auto { opacity: 0; transform: translateY(18px) rotate(-90deg); }
html[data-mode="auto"] .theme-btn .ic-sun, html[data-mode="auto"] .theme-btn .ic-moon, html:not([data-mode]) .theme-btn .ic-sun, html:not([data-mode]) .theme-btn .ic-moon { opacity: 0; transform: translateY(18px) rotate(-90deg); }
html.dark .theme-btn .ic-auto { color: var(--glow); }
.mode-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; background: var(--sunk); }
.mode-seg .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 12px; background: var(--card); box-shadow: 0 6px 16px -8px rgba(15,40,48,.4); transition: transform .45s var(--spring); }
html[data-mode="light"] .mode-seg .knob { transform: translateX(100%); }
html[data-mode="dark"] .mode-seg .knob { transform: translateX(200%); }
.mode-seg button { position: relative; height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mute); }
html[data-mode="auto"] .mode-seg [data-theme-set="auto"], html[data-mode="light"] .mode-seg [data-theme-set="light"], html[data-mode="dark"] .mode-seg [data-theme-set="dark"] { color: var(--ink); }
.theme-sweep { position: fixed; z-index: 3000; pointer-events: none; border-radius: 50%; transform: scale(0); animation: sweep .7s var(--ease) forwards; }
@keyframes sweep { 60% { opacity: .9; } to { transform: scale(1); opacity: 0; } }

/* Gece modu: Tailwind açık renk tonları (rozet, durum, uyarı kutuları) */
html.dark .bg-emerald-50, html.dark .bg-emerald-50\/60, html.dark .bg-emerald-50\/70, html.dark .bg-emerald-100, html.dark .bg-emerald-100\/70 { background-color: rgba(52,211,153,.14) !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: rgb(123,226,188) !important; }
html.dark .ring-emerald-200, html.dark .border-emerald-200 { --tw-ring-color: rgba(52,211,153,.3) !important; border-color: rgba(52,211,153,.3) !important; }
html.dark .bg-green-50, html.dark .bg-green-50\/60, html.dark .bg-green-50\/70, html.dark .bg-green-100, html.dark .bg-green-100\/70 { background-color: rgba(74,222,128,.14) !important; }
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: rgb(137,233,172) !important; }
html.dark .ring-green-200, html.dark .border-green-200 { --tw-ring-color: rgba(74,222,128,.3) !important; border-color: rgba(74,222,128,.3) !important; }
html.dark .bg-teal-50, html.dark .bg-teal-50\/60, html.dark .bg-teal-50\/70, html.dark .bg-teal-100, html.dark .bg-teal-100\/70 { background-color: rgba(45,212,191,.14) !important; }
html.dark .text-teal-600, html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-teal-900 { color: rgb(118,227,213) !important; }
html.dark .ring-teal-200, html.dark .border-teal-200 { --tw-ring-color: rgba(45,212,191,.3) !important; border-color: rgba(45,212,191,.3) !important; }
html.dark .bg-cyan-50, html.dark .bg-cyan-50\/60, html.dark .bg-cyan-50\/70, html.dark .bg-cyan-100, html.dark .bg-cyan-100\/70 { background-color: rgba(34,211,238,.14) !important; }
html.dark .text-cyan-600, html.dark .text-cyan-700, html.dark .text-cyan-800, html.dark .text-cyan-900 { color: rgb(111,226,243) !important; }
html.dark .ring-cyan-200, html.dark .border-cyan-200 { --tw-ring-color: rgba(34,211,238,.3) !important; border-color: rgba(34,211,238,.3) !important; }
html.dark .bg-sky-50, html.dark .bg-sky-50\/60, html.dark .bg-sky-50\/70, html.dark .bg-sky-100, html.dark .bg-sky-100\/70 { background-color: rgba(56,189,248,.14) !important; }
html.dark .text-sky-600, html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900 { color: rgb(125,212,250) !important; }
html.dark .ring-sky-200, html.dark .border-sky-200 { --tw-ring-color: rgba(56,189,248,.3) !important; border-color: rgba(56,189,248,.3) !important; }
html.dark .bg-blue-50, html.dark .bg-blue-50\/60, html.dark .bg-blue-50\/70, html.dark .bg-blue-100, html.dark .bg-blue-100\/70 { background-color: rgba(96,165,250,.14) !important; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: rgb(151,196,251) !important; }
html.dark .ring-blue-200, html.dark .border-blue-200 { --tw-ring-color: rgba(96,165,250,.3) !important; border-color: rgba(96,165,250,.3) !important; }
html.dark .bg-indigo-50, html.dark .bg-indigo-50\/60, html.dark .bg-indigo-50\/70, html.dark .bg-indigo-100, html.dark .bg-indigo-100\/70 { background-color: rgba(129,140,248,.14) !important; }
html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900 { color: rgb(173,180,250) !important; }
html.dark .ring-indigo-200, html.dark .border-indigo-200 { --tw-ring-color: rgba(129,140,248,.3) !important; border-color: rgba(129,140,248,.3) !important; }
html.dark .bg-violet-50, html.dark .bg-violet-50\/60, html.dark .bg-violet-50\/70, html.dark .bg-violet-100, html.dark .bg-violet-100\/70 { background-color: rgba(167,139,250,.14) !important; }
html.dark .text-violet-600, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900 { color: rgb(197,179,251) !important; }
html.dark .ring-violet-200, html.dark .border-violet-200 { --tw-ring-color: rgba(167,139,250,.3) !important; border-color: rgba(167,139,250,.3) !important; }
html.dark .bg-purple-50, html.dark .bg-purple-50\/60, html.dark .bg-purple-50\/70, html.dark .bg-purple-100, html.dark .bg-purple-100\/70 { background-color: rgba(192,132,252,.14) !important; }
html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color: rgb(214,175,253) !important; }
html.dark .ring-purple-200, html.dark .border-purple-200 { --tw-ring-color: rgba(192,132,252,.3) !important; border-color: rgba(192,132,252,.3) !important; }
html.dark .bg-fuchsia-50, html.dark .bg-fuchsia-50\/60, html.dark .bg-fuchsia-50\/70, html.dark .bg-fuchsia-100, html.dark .bg-fuchsia-100\/70 { background-color: rgba(232,121,249,.14) !important; }
html.dark .text-fuchsia-600, html.dark .text-fuchsia-700, html.dark .text-fuchsia-800, html.dark .text-fuchsia-900 { color: rgb(240,167,251) !important; }
html.dark .ring-fuchsia-200, html.dark .border-fuchsia-200 { --tw-ring-color: rgba(232,121,249,.3) !important; border-color: rgba(232,121,249,.3) !important; }
html.dark .bg-pink-50, html.dark .bg-pink-50\/60, html.dark .bg-pink-50\/70, html.dark .bg-pink-100, html.dark .bg-pink-100\/70 { background-color: rgba(244,114,182,.14) !important; }
html.dark .text-pink-600, html.dark .text-pink-700, html.dark .text-pink-800, html.dark .text-pink-900 { color: rgb(247,163,207) !important; }
html.dark .ring-pink-200, html.dark .border-pink-200 { --tw-ring-color: rgba(244,114,182,.3) !important; border-color: rgba(244,114,182,.3) !important; }
html.dark .bg-rose-50, html.dark .bg-rose-50\/60, html.dark .bg-rose-50\/70, html.dark .bg-rose-100, html.dark .bg-rose-100\/70 { background-color: rgba(251,113,133,.14) !important; }
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color: rgb(252,162,175) !important; }
html.dark .ring-rose-200, html.dark .border-rose-200 { --tw-ring-color: rgba(251,113,133,.3) !important; border-color: rgba(251,113,133,.3) !important; }
html.dark .bg-red-50, html.dark .bg-red-50\/60, html.dark .bg-red-50\/70, html.dark .bg-red-100, html.dark .bg-red-100\/70 { background-color: rgba(248,113,113,.14) !important; }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: rgb(250,162,162) !important; }
html.dark .ring-red-200, html.dark .border-red-200 { --tw-ring-color: rgba(248,113,113,.3) !important; border-color: rgba(248,113,113,.3) !important; }
html.dark .bg-orange-50, html.dark .bg-orange-50\/60, html.dark .bg-orange-50\/70, html.dark .bg-orange-100, html.dark .bg-orange-100\/70 { background-color: rgba(251,146,60,.14) !important; }
html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800, html.dark .text-orange-900 { color: rgb(252,184,128) !important; }
html.dark .ring-orange-200, html.dark .border-orange-200 { --tw-ring-color: rgba(251,146,60,.3) !important; border-color: rgba(251,146,60,.3) !important; }
html.dark .bg-amber-50, html.dark .bg-amber-50\/60, html.dark .bg-amber-50\/70, html.dark .bg-amber-100, html.dark .bg-amber-100\/70 { background-color: rgba(251,191,36,.14) !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: rgb(252,213,112) !important; }
html.dark .ring-amber-200, html.dark .border-amber-200 { --tw-ring-color: rgba(251,191,36,.3) !important; border-color: rgba(251,191,36,.3) !important; }
html.dark .bg-yellow-50, html.dark .bg-yellow-50\/60, html.dark .bg-yellow-50\/70, html.dark .bg-yellow-100, html.dark .bg-yellow-100\/70 { background-color: rgba(250,204,21,.14) !important; }
html.dark .text-yellow-600, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color: rgb(251,221,102) !important; }
html.dark .ring-yellow-200, html.dark .border-yellow-200 { --tw-ring-color: rgba(250,204,21,.3) !important; border-color: rgba(250,204,21,.3) !important; }
html.dark .bg-lime-50, html.dark .bg-lime-50\/60, html.dark .bg-lime-50\/70, html.dark .bg-lime-100, html.dark .bg-lime-100\/70 { background-color: rgba(163,230,53,.14) !important; }
html.dark .text-lime-600, html.dark .text-lime-700, html.dark .text-lime-800, html.dark .text-lime-900 { color: rgb(195,238,123) !important; }
html.dark .ring-lime-200, html.dark .border-lime-200 { --tw-ring-color: rgba(163,230,53,.3) !important; border-color: rgba(163,230,53,.3) !important; }
html.dark .bg-slate-50, html.dark .bg-slate-50\/60, html.dark .bg-slate-50\/70, html.dark .bg-slate-100, html.dark .bg-slate-100\/70 { background-color: rgba(148,163,184,.14) !important; }
html.dark .text-slate-600, html.dark .text-slate-700, html.dark .text-slate-800, html.dark .text-slate-900 { color: rgb(185,195,208) !important; }
html.dark .ring-slate-200, html.dark .border-slate-200 { --tw-ring-color: rgba(148,163,184,.3) !important; border-color: rgba(148,163,184,.3) !important; }
html.dark .bg-gray-50, html.dark .bg-gray-50\/60, html.dark .bg-gray-50\/70, html.dark .bg-gray-100, html.dark .bg-gray-100\/70 { background-color: rgba(156,163,175,.14) !important; }
html.dark .text-gray-600, html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: rgb(190,195,203) !important; }
html.dark .ring-gray-200, html.dark .border-gray-200 { --tw-ring-color: rgba(156,163,175,.3) !important; border-color: rgba(156,163,175,.3) !important; }
html.dark .bg-ink\/5 { background-color: rgba(255,255,255,.07) !important; }
html .ad-empty b.text-amber-700 { color: var(--signal) !important; }
html .ad-empty .text-amber-600, html .ad-empty .text-ink-mute { color: rgba(255,255,255,.78) !important; }
html .ad-empty .text-ink { color: #fff !important; }


/* =================================================================
   v4 · Düzeltmeler ve yeni bileşenler
   ================================================================= */

/* Tema düğmesi: "Otomatik" ikonu (yarım daire + A) */
.theme-btn .ic-auto { color: var(--glow-deep); transition: transform .6s var(--spring), opacity .3s; }
.theme-btn .ic-auto i { font-size: 20px; }
.theme-btn .ic-auto b { position: absolute; right: 6px; bottom: 6px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 5px; background: var(--glow-deep); color: #fff; font: 800 9px/13px Onest, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--night); }
html.dark .theme-btn .ic-auto { color: var(--glow); }
html.dark .theme-btn .ic-auto b { background: var(--glow); color: #062016; }
html:not(.dark) .topbar .theme-btn .ic-auto b { box-shadow: 0 0 0 2px var(--sunk); }
.theme-row .theme-btn { overflow: visible; }
.theme-row .theme-btn .ic-auto b { right: -5px; bottom: -4px; }
html[data-mode="light"] .theme-btn .ic-auto, html[data-mode="dark"] .theme-btn .ic-auto { opacity: 0; transform: translateY(18px) rotate(-90deg); }

/* Bildirim zili */
.bell-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #ff4d5e; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--night); animation: pop .4s var(--spring) both; }
html:not(.dark) .topbar .bell-count { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 400px) { .topbar .leading-tight .text-\[11px\] { display: none; } .topbar .gap-2 { gap: 6px; } }

/* Harita sahnesi: yazıların okunaklılığı */
.scene-hud .hud-text { position: relative; display: inline-block; isolation: isolate; }
.scene-hud .hud-text::before { content: ""; position: absolute; z-index: -1; inset: -18px -26px -16px -22px; border-radius: 30px; background: radial-gradient(closest-side, rgba(15,40,48,.82), rgba(15,40,48,.55) 60%, transparent); filter: blur(8px); pointer-events: none; }
.scene .hero-title, .scene h1 { text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.6); }
.scene .scene-hud p { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.scene .ticker { background: rgba(15,40,48,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; padding: 7px 0; border: 1px solid rgba(255,255,255,.08); }
.scene-shade { background: linear-gradient(180deg, rgba(15,40,48,.94) 0%, rgba(15,40,48,.55) 30%, rgba(15,40,48,.08) 52%, rgba(15,40,48,0) 62%, rgba(15,40,48,.88) 100%) !important; }
html:not(.dark) .scene-shade { background: linear-gradient(180deg, rgba(242,246,243,.97) 0%, rgba(242,246,243,.7) 30%, rgba(242,246,243,.1) 52%, rgba(242,246,243,0) 62%, rgba(242,246,243,.92) 100%) !important; }
html:not(.dark) .scene-hud .hud-text::before { background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,.65) 60%, transparent); }
html:not(.dark) .scene .hero-title, html:not(.dark) .scene h1 { text-shadow: 0 1px 12px rgba(255,255,255,.9); }
html:not(.dark) .scene .scene-hud p { text-shadow: 0 1px 6px rgba(255,255,255,.95); }
html:not(.dark) .scene .ticker { background: rgba(255,255,255,.82); border-color: rgba(18,48,58,.08); }
.scene .leaflet-control-attribution { font-size: 8.5px !important; opacity: .75; }

/* İlan önizlemesi (haritanın altında, üst üste binmez) */
.preview-card { position: relative; overflow: hidden; border-radius: 22px; padding: 14px 16px; background: linear-gradient(135deg, #0c3e45, var(--night)); color: #eef8f9; box-shadow: 0 18px 40px -24px rgba(15,40,48,.8); }
.preview-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(60,196,206,.35), transparent 70%); pointer-events: none; }
html:not(.dark) .preview-card { background: linear-gradient(135deg, #ffffff, #e8f6f7); color: var(--ink); border: 1px solid rgba(12,124,134,.18); box-shadow: 0 10px 30px -20px rgba(15,40,48,.4); }
html:not(.dark) .preview-card .pv-k { color: var(--glow-deep) !important; }
html:not(.dark) .preview-card .pv-s { color: var(--mute) !important; }

/* Rozet yazıları alana sığsın (kesilmesin) */
.badge-chip .b-title { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.badge-chip .b-desc { display: block; font-size: 11px; font-weight: 600; opacity: .78; line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 360px) { .badge-grid { grid-template-columns: 1fr !important; } }

/* Türkiye plakası */
.tr-plate { display: flex; align-items: stretch; height: 56px; border-radius: 10px; overflow: hidden; background: #fff; color: #111; border: 3px solid #111; box-shadow: inset 0 0 0 2px #fff, 0 6px 18px -10px rgba(0,0,0,.5); max-width: 340px; }
.tr-plate .eu { width: 34px; flex-shrink: 0; background: linear-gradient(180deg, #1e4fd8, #163fae); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; gap: 4px; }
.tr-plate .eu i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px dotted #ffd84a; opacity: .9; }
.tr-plate .eu b { font: 800 12px/1 Onest, system-ui, sans-serif; letter-spacing: .02em; }
.tr-plate input { min-width: 0; border: 0; outline: none; background: transparent; color: #111; text-align: center; font: 800 26px/1 "DIN Alternate", "Bahnschrift", Onest, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 0; caret-color: var(--glow-deep); }
.tr-plate input::placeholder { color: #c3ccc8; }
.tr-plate .pc { width: 52px; } .tr-plate .pl { width: 78px; } .tr-plate .pn { flex: 1; }
.tr-plate .gap { width: 1px; background: rgba(0,0,0,.08); margin: 10px 0; }
.tr-plate:focus-within { box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(60,196,206,.35); }
.tr-plate.bad { border-color: #e5484d; animation: shake .4s; }
.plate { border-color: #111 !important; color: #111 !important; background: #fff !important; }
.plate i { background: linear-gradient(180deg, #1e4fd8, #163fae) !important; }
.plate b { font-family: "DIN Alternate", "Bahnschrift", Onest, system-ui, sans-serif; letter-spacing: .06em; }
.plate-full { font-family: "DIN Alternate", "Bahnschrift", Onest, system-ui, sans-serif; }

/* Buluşma notu */
.meet-note { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--tint-signal); border-radius: 10px; padding: 5px 9px; }
.meet-note i { color: #c77c00; font-size: 15px; flex-shrink: 0; }
html.dark .meet-note i { color: var(--signal); }
.meet-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zaman seçici (Planla) */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--sunk); border-radius: 16px; padding: 4px; gap: 2px; }
.seg button { height: 42px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--mute); transition: background .2s, color .2s, transform .25s var(--spring); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(15,40,48,.45); }
.seg button.on.plan { color: #5b4de0; }
html.dark .seg button.on.plan { color: #b9b0ff; }
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chips button { width: 42px; height: 38px; border-radius: 12px; font-size: 12.5px; font-weight: 800; background: var(--sunk); color: var(--mute); transition: all .2s; }
.day-chips button.on { background: var(--glow-deep); color: #fff; }
html.dark .day-chips button.on { background: var(--glow); color: #062016; }
.when-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; height: 64px; border-radius: 18px; background: var(--tint-glow); color: var(--glow-deep); text-align: center; line-height: 1.05; flex-shrink: 0; padding: 0 6px; }
.when-chip small { font-size: 10.5px; font-weight: 700; opacity: .85; }
.when-chip b { font-family: var(--display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.when-chip.plan { background: rgba(139,123,255,.14); color: #5b4de0; }
html.dark .when-chip.plan { color: #b9b0ff; }
.tag-plan { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(139,123,255,.15); color: #5b4de0; }
html.dark .tag-plan { color: #b9b0ff; }
.tag-repeat { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--tint-glow); color: var(--glow-deep); }

/* Akış sekmeleri (İlanlar / İş arayanlar) */
.feed-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: var(--sunk); }
.feed-tabs button { height: 44px; border-radius: 14px; font-weight: 800; font-size: 14px; color: var(--mute); display: flex; align-items: center; justify-content: center; gap: 7px; }
.feed-tabs button.on { background: var(--card); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(15,40,48,.5); }
.feed-tabs .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; display: grid; place-items: center; background: var(--tint-signal); color: #a86a00; }
html.dark .feed-tabs .cnt { color: var(--signal); }
.req-card { position: relative; background: var(--card); border-radius: 22px; border: 1px dashed rgba(139,123,255,.45); padding: 14px; animation: rise .5s var(--ease) both; }

/* Bildirim kartları */
.ntf { display: flex; gap: 12px; padding: 12px; border-radius: 18px; transition: background .2s; }
.ntf:hover { background: var(--sunk); }
.ntf.unread { background: var(--tint-glow); }
.ntf .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; flex-shrink: 0; background: var(--card); color: var(--glow-deep); box-shadow: 0 4px 12px -8px rgba(15,40,48,.5); }
html.dark .ntf .ic { color: var(--glow); }
.push-banner { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 22px; background: linear-gradient(120deg, rgba(139,123,255,.16), rgba(60,196,206,.14)); border: 1px solid rgba(139,123,255,.25); }
.push-banner .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #5b4de0; color: #fff; font-size: 22px; flex-shrink: 0; animation: wiggle 3.2s ease-in-out infinite; }

/* Hazır profil resimleri */
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (min-width: 480px) { .av-grid { grid-template-columns: repeat(6, 1fr); } }
.av-opt { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--sunk); transition: transform .25s var(--spring), box-shadow .2s; }
.av-opt img { width: 100%; height: 100%; display: block; }
.av-opt:hover { transform: translateY(-2px); }
.av-opt.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--glow-deep); }
.av-opt.on::after { content: "✓"; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--glow-deep); color: #fff; font-weight: 800; font-size: 13px; }

/* Yorumlar */
.review { padding: 12px 0; }
.review + .review { border-top: 1px solid var(--line); }
.review q { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); quotes: "“" "”"; }
.stars-sm { color: #f5a50b; letter-spacing: 1px; font-size: 13px; }

/* Takip (yakının yolculuğu) */
.track-head { position: relative; border-radius: 26px; padding: 18px; color: #eef8f9; overflow: hidden; background: radial-gradient(120% 100% at 100% 0%, #0b5560 0%, #0c3138 45%, var(--night) 100%); }
.live-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 999px; background: rgba(60,196,206,.16); color: var(--glow); }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); animation: beacon 1.8s infinite; }
.live-badge.off { background: rgba(255,255,255,.1); color: rgba(238,248,249,.7); } .live-badge.off i { background: rgba(238,248,249,.5); animation: none; }

/* Liste satırı (Planlarım, Geçmiş) */
.row-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--sunk); }
.row-card + .row-card { margin-top: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); flex-shrink: 0; transition: transform .2s var(--spring); }
.icon-btn:active { transform: scale(.9); }
.icon-btn.danger { color: #e5484d; }
.filter-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills a, .filter-pills button { flex-shrink: 0; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
.filter-pills .on { background: var(--ink); color: var(--on-ink); }
.empty-mini { text-align: center; padding: 22px 12px; color: var(--mute); font-size: 14px; }
.empty-mini i { font-size: 34px; display: block; margin: 0 auto 6px; opacity: .7; }

/* Yorum yazma */
.rate-box textarea { width: 100%; border-radius: 14px; background: var(--card); border: 2px solid transparent; padding: 10px 12px; font-size: 14px; outline: none; resize: none; }
.rate-box textarea:focus { border-color: rgba(245,165,11,.5); }
.rate-box .done-comment { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.bell-count.hidden { display: none; }
html:not(.dark) .scene .text-white\/80, html:not(.dark) .scene .text-white\/75 { color: var(--ink-2) !important; }
/* Sahne haritalarında kaynak yazısı sağ üstte (alttaki arama bileti / kartlarla çakışmasın) */
.scene .leaflet-top.leaflet-right { margin-top: 66px; }
.scene .leaflet-top .leaflet-control-attribution { border-radius: 0 0 0 8px; }
.day-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.day-chips button { width: auto; padding: 0; font-size: 12px; }

/* Ekran yakınlaştırma kapalı: çift dokunma ve iki parmakla sayfa büyümesin (harita kendi içinde yakınlaşır) */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 767px) { input, select, textarea { font-size: max(16px, 1em); } }
.tr-plate.short { max-width: 240px; }
.tr-plate.short .pc, .tr-plate.short .pn { width: 64px; flex: 1; }
.tr-plate .mask { display: grid; place-items: center; padding: 0 6px; color: #9aa6a1; font: 800 22px/1 Onest, system-ui, sans-serif; letter-spacing: .1em; }

/* Bildirim açılır penceresi */
.bell-pop { position: fixed; z-index: 900; top: calc(70px + env(safe-area-inset-top, 0px)); right: 12px; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(15,40,48,.55); }
@media (min-width: 768px) { .bell-pop { position: absolute; top: 50px; right: -8px; } }
.bp-head { display: flex; align-items: center; gap: 6px; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--line); }
.bp-act { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: 11px; font-size: 12px; font-weight: 700; background: var(--sunk); color: var(--ink-2); }
.bp-act.danger { color: #e5484d; }
.bp-act:disabled { opacity: .4; }
.bp-list { overflow-y: auto; flex: 1; padding: 6px; overscroll-behavior: contain; }
.bp-item { display: flex; align-items: flex-start; gap: 4px; padding: 10px; border-radius: 16px; }
.bp-item:hover { background: var(--sunk); }
.bp-item.unread { background: var(--tint-glow); }
.bp-item .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; background: var(--card); color: var(--glow-deep); box-shadow: 0 3px 10px -6px rgba(15,40,48,.5); }
html.dark .bp-item .ic { color: var(--glow); }
.bp-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-x { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--mute); flex-shrink: 0; }
.bp-x:hover { background: var(--card); color: #e5484d; }
.bp-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: 13px; font-weight: 700; color: var(--glow-deep); border-top: 1px solid var(--line); }
html.dark .bp-foot { color: var(--glow); }
.glass-btn.is-open { background: rgba(60,196,206,.18); }
html:not(.dark) .topbar .bell-pop { color: var(--ink); }

/* Haritayı genişlet (tam ekran) */
.map-full { position: fixed !important; inset: 0 !important; z-index: 850 !important; margin: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; border-radius: 0 !important; animation: mapFullIn .35s var(--ease) both; }
.map-full > [x-ref="map"], .map-full .scene-map { position: absolute !important; inset: 0 !important; height: 100% !important; }
.map-full .scene-shade, .map-full .hud-text, .map-full .ticker, .map-full .share-loc, .map-full .map-hide-full { display: none !important; }
.map-full .scene-hud.top-0 { padding-top: max(16px, env(safe-area-inset-top)); }
.map-full::after { display: none; }
html.map-open, html.map-open body { overflow: hidden; }
@keyframes mapFullIn { from { opacity: .4; transform: scale(.97); } to { opacity: 1; transform: none; } }
.map-full .leaflet-control-zoom { margin-bottom: 30px !important; }
.map-close { display: none; }
.map-full .map-close { display: grid; position: absolute; z-index: 900; right: 14px; top: max(14px, env(safe-area-inset-top)); width: 46px; height: 46px; border-radius: 16px; place-items: center; font-size: 22px; background: var(--card); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.map-full .map-open-btn { display: none !important; }
.map-credit { font-size: 10px; color: var(--mute); text-align: right; padding: 4px 6px 0; line-height: 1.3; }
.map-credit a { color: inherit; }
.near-chip { display: inline-flex; align-items: center; gap: 6px; }
.near-chip.on { background: #2563eb !important; color: #fff !important; }
.dist-tag { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: rgba(37,99,235,.12); color: #1d4ed8; }
html.dark .dist-tag { color: #8fd8ff; }

/* =================================================================
   Bilgisayar düzeni (geniş ekran)
   ================================================================= */
.nav-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 13px; border-radius: 13px; transition: background .2s, color .2s; }
.nav-link i { font-size: 18px; }
@media (min-width: 768px) {
  .dock { display: none !important; }
}
@media (min-width: 1024px) {
  .topbar .nav-link { font-size: 14.5px; }
  /* Ana sayfa (giriş yapmış): solda arama + ilanlar, sağda sabit büyük harita */
  .feed-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .feed-grid > * { grid-column: 1; margin-top: 0 !important; margin-bottom: 16px !important; }
  .feed-grid > .scene { grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 92px; height: calc(100vh - 116px); min-height: 560px; margin: 0 !important; border-radius: 32px !important; box-shadow: 0 30px 70px -40px rgba(15,40,48,.8); }
  .feed-grid > .scene.map-full { position: fixed !important; }
  .feed-grid .search-ticket { margin-top: 0 !important; animation-delay: .1s; }
  .feed-grid .scene .hero-title { font-size: 52px; }
  .feed-grid .scene-shade { background: linear-gradient(180deg, rgba(15,40,48,.9) 0%, rgba(15,40,48,.4) 22%, rgba(15,40,48,0) 40%, rgba(15,40,48,0) 82%, rgba(15,40,48,.6) 100%) !important; }
  html:not(.dark) .feed-grid .scene-shade { background: linear-gradient(180deg, rgba(242,246,243,.95) 0%, rgba(242,246,243,.45) 22%, rgba(242,246,243,0) 40%, rgba(242,246,243,0) 85%, rgba(242,246,243,.6) 100%) !important; }
  .feed-grid .scene-hud.bottom-\[86px\] { bottom: 18px; }
  .feed-grid #feedCredit { display: none; }
  .feed-grid .scene .leaflet-top.leaflet-right { margin-top: 0; }
  .feed-grid .ad-feed_top, .feed-grid .ad-feed_middle { aspect-ratio: auto; height: 96px; }

  /* Tanıtım sayfası (misafir) */
  .is-wide .land-hero { min-height: 640px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; border-radius: 40px; }
  .is-wide .land-hero > .relative { padding: 64px 56px !important; }
  .is-wide .land-map { left: auto; right: 0; width: 58%; height: 100%; }
  .is-wide .land-shade { background: linear-gradient(90deg, var(--night) 0%, rgba(15,40,48,.96) 38%, rgba(15,40,48,.55) 55%, rgba(15,40,48,.1) 75%, rgba(15,40,48,.25) 100%); }
  .is-wide .land-title { font-size: 68px; max-width: 12ch; }
  .is-wide .land-hero p.mt-4 { font-size: 18px; max-width: 32rem; }
  .is-wide .land-hero .grid-cols-3 { max-width: 520px; }
  .is-wide .land-demo { display: block; }
  .land-sections { display: block; }
  .is-wide .land-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 40px; }
  .is-wide .land-sections > section { margin-top: 0 !important; }
  .is-wide .how-rail { grid-template-columns: 1fr 1fr; gap: 14px; }
  .is-wide .how-rail::before { display: none; }
  .is-wide .how-step { flex-direction: column; gap: 10px; }
  .is-wide .how-step > div { width: 100%; height: 100%; }
  .is-wide .land-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; padding: 36px 44px; border-radius: 32px; background: var(--card); border: 1px solid var(--line); margin-top: 32px; }
  .is-wide .land-cta img { margin: 0; }
  .is-wide .land-cta .btn { margin-top: 0; }

  /* Geniş alt bilgi */
  .is-wide ~ footer .site-foot, footer.lg\:max-w-7xl .site-foot { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr; column-gap: 40px; align-items: start; padding: 36px 40px; }
  footer.lg\:max-w-7xl .site-foot > ul, footer.lg\:max-w-7xl .site-foot > div.flex-wrap { margin-top: 0; }
  footer.lg\:max-w-7xl .site-foot > div.flex-wrap { flex-direction: column; gap: 10px; font-size: 13px; }
  footer.lg\:max-w-7xl .site-foot > div:last-child { grid-column: 1 / -1; margin-top: 24px; }
}
.land-demo { display: none; }
@media (min-width: 1280px) {
  .feed-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
}
/* Tanıtım: örnek kartlar */
.demo-card { position: absolute; width: 300px; border-radius: 24px; padding: 16px 18px; color: #eef8f9; background: rgba(9,34,26,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.demo-a { top: -150px; right: 140px; animation: floatY 6s ease-in-out infinite; }
.demo-b { top: 40px; right: 30px; width: 250px; background: linear-gradient(150deg, #ecc58a, #d49440 45%, #c9782c); color: #2a1800; border: 0; animation: floatY 7s ease-in-out .8s infinite; }
.demo-c { top: 200px; right: 210px; width: auto; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; animation: floatY 5.5s ease-in-out 1.6s infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.demo-k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.demo-when { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(60,196,206,.18); color: var(--glow); }
.demo-when.amber { background: rgba(42,24,0,.12); color: #2a1800; }
.demo-route { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.demo-route i { font-size: 14px; opacity: .6; }
.demo-av { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; color: #fff; background: #8b5cf6; }
.demo-card b { display: block; font-size: 14px; } .demo-card small { display: block; font-size: 12px; opacity: .75; }
.demo-card .plate b { font-size: 12px; }
.demo-seats { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; font-weight: 600; opacity: .9; }
.demo-seats i { width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.15); } .demo-seats i.f { background: var(--glow); } .demo-seats span { margin-left: 6px; }
.demo-pin { display: flex; gap: 8px; margin-top: 10px; }
.demo-pin b { flex: 1; height: 54px; border-radius: 14px; display: grid; place-items: center; font-family: var(--display); font-size: 30px; font-weight: 800; background: #fffaf0; color: #1b1100; }
.demo-b small { color: rgba(42,24,0,.75) !important; }
.demo-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; color: #fff; background: #5b4de0; }
@media (min-width: 1024px) {
  .is-wide .ad-box { aspect-ratio: auto !important; height: 112px; min-height: 0; }
}

/* Ana ekrana eklenmiş uygulama (PWA): üst barda bulanıklık olmasın.
   iOS, sürekli hareket eden / gölge filtresi uygulanan öğeleri düşük çözünürlükte çizebiliyor. */
@media (display-mode: standalone) {
  .topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #0f2830 !important; }
  html:not(.dark) .topbar { background: #ffffff !important; }
  .topbar .logo-glow { filter: none !important; }
  .topbar .logo-bounce, .topbar .live-dot { animation: none !important; transform: none !important; }
  .topbar img, .topbar .glass-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
html.standalone .topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #0f2830 !important; }
html.standalone:not(.dark) .topbar { background: #ffffff !important; }
html.standalone .topbar .logo-glow { filter: none !important; }
html.standalone .topbar .logo-bounce, html.standalone .topbar .live-dot { animation: none !important; }
html.standalone .topbar .glass-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Bilgisayar tanıtımı: karekod ve "telefonuna ekle" */
.qr-card { display: flex; align-items: center; gap: 18px; max-width: 520px; padding: 16px; border-radius: 26px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); }
.qr-box { width: 132px; height: 132px; flex-shrink: 0; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px -18px rgba(60,196,206,.6); }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-box svg path, .qr-box svg rect[fill="black"], .qr-box svg rect:not([fill="white"]) { fill: #0f2830; }
.qr-fallback { display: grid; place-items: center; height: 100%; text-align: center; font-weight: 800; color: #0f2830; font-size: 13px; }
.install-band { padding: 28px; border-radius: 32px; background: var(--card); border: 1px solid var(--line); }
.install-head { display: flex; align-items: center; gap: 18px; }
.install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
@media (min-width: 1024px) { .install-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .install-band { padding: 36px 40px; } }
.install-step { padding: 16px; border-radius: 22px; background: var(--sunk); }
.install-step > b { display: block; font-weight: 800; margin-top: 10px; }
.install-step p { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.install-n { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #06242a; background: linear-gradient(140deg, #7fd6dd, var(--glow)); }
html:not(.dark) .topbar .showcase-hint { color: var(--ink-2) !important; }

/* Sıkça sorulan sorular (tanıtım sayfası) */
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;font-weight:800;font-size:15px;line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{flex:1;min-width:0}
.faq-item summary i{font-size:1.15rem;color:var(--mute);transition:transform .2s;flex-shrink:0}
.faq-item[open] summary i{transform:rotate(180deg)}
.faq-item p{padding:0 1.1rem 1rem;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* Alt bilgi bağlantıları: telefonda 2 sütun hizalı, genişte tek satır; dokunmatikte "basılı kalan" beyaz renk yok */
.ft-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem}
.ft-link{color:rgb(255 255 255 / .7);line-height:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.ft-link:active{color:#fff}
@media (hover:hover){.ft-link:hover{color:#fff}}
@media (min-width:640px){.ft-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}}

/* Yönetim kenar menüsü: kısa ekranlarda menü kendi içinde kayar, alttaki satırlar ezilmez */
.adm-side-nav{scrollbar-width:thin;scrollbar-color:rgb(255 255 255 / .15) transparent}
.adm-side-nav::-webkit-scrollbar{width:4px}.adm-side-nav::-webkit-scrollbar-thumb{background:rgb(255 255 255 / .15);border-radius:4px}

/* Tanıtım haritası: telefonda dikey kırpılan haritada durak adları kenarlarda yarım kalıyordu; yalnızca noktalar kalsın */
@media (max-width: 767px) { .land-map .land-stop text { display: none; } }

/* Üst bar her yerde net: iOS Safari, arka plan bulanıklaştırma (backdrop-filter) ve gölge filtresi olan
   yapışkan öğelerin içindeki yazı ve logoyu düşük çözünürlükte çizip kaydırırken bulanık gösteriyordu. */
.topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #0f2830 !important; }
html:not(.dark) .topbar { background: #ffffff !important; }
.topbar .logo-glow { filter: none !important; }
.topbar .live-dot { animation: none !important; }
.topbar .glass-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Kayıtlı yerler ve ayın yardımseverleri */
.place-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--card); color: var(--ink-2); border: 1px solid var(--line); transition: background .15s, color .15s; }
.place-chip i { font-size: 16px; }
.place-chip.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.lb-rank { width: 26px; text-align: center; font-weight: 800; font-size: 13px; color: var(--mute); flex-shrink: 0; }
.lb-rank.r1, .lb-rank.r2, .lb-rank.r3 { font-size: 19px; }
.place-route { display: inline-flex; align-items: center; gap: 4px; }
.place-route i { font-size: 15px; }

/* Telefonda profil resmine basınca açılan hesap menüsü */
.me-btn { display: block; transition: transform .2s var(--spring); }
.me-btn.is-open { transform: scale(.94); }
.me-pop { position: fixed; z-index: 900; top: calc(70px + env(safe-area-inset-top, 0px)); right: 12px; width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - 100px); overflow-y: auto; border-radius: 24px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(15,40,48,.55); padding: 8px; }
.me-head { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: var(--sunk); }
.me-list { display: grid; padding: 6px 0; }
.me-list a, .me-out { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 14px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.me-list a i, .me-out i { font-size: 21px; color: var(--mute); width: 22px; text-align: center; }
.me-list a:active, .me-out:active { background: var(--sunk); }
@media (hover: hover) { .me-list a:hover, .me-out:hover { background: var(--sunk); } }
.me-list a.is-admin, .me-list a.is-admin i { color: #6d5dfc; }
.me-out { border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; margin-top: 2px; color: #e11d48; }
.me-out i { color: #e11d48; }
.me-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.me-count.hidden { display: none; }

/* Yönetim paneli (telefon): menü kutuları eşit boyda, simge üstte, yazı altta */
.adm-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 76px; padding: 8px 6px; border-radius: 16px; background: rgba(255,255,255,.05); text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.2; color: rgba(255,255,255,.82); }
.adm-tile i { font-size: 24px; display: block; line-height: 1; }
.adm-tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.adm-tile.is-on { background: rgba(255,255,255,.16); color: #fff; }
.adm-tile.is-on i { color: #b9b0ff; }
.adm-tile.is-wide { height: 46px; flex-direction: row; gap: 8px; }
.adm-tile.is-wide i { font-size: 18px; }

/* Doğrulama kodu kartı (SMS yokken kod ekranda) */
.code-card { border-radius: 24px; padding: 18px; text-align: center; color: #eef8f9; background: linear-gradient(135deg, #0f8a5f, #064e3b); box-shadow: 0 20px 40px -24px rgba(15,40,48,.8); }
.code-digits { margin-top: 4px; font-family: inherit; font-size: 38px; font-weight: 800; letter-spacing: .32em; padding-left: .32em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.code-fill { margin-top: 12px; height: 40px; padding: 0 18px; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; font-weight: 800; font-size: 14px; }

/* =================================================================
   Düzce İş İlanları · iş ilanı bileşenleri
   ================================================================= */
/* Haritada iş işaretçisi */
.job-pin .body { font-size: 20px; }
.job-pin .body i { line-height: 1; }

/* Firma logosu / baş harf kutusu */
.co-logo { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 800; font-size: 18px; color: #fff; box-shadow: 0 8px 18px -12px rgba(15,40,48,.7); }
.co-logo img { width: 100%; height: 100%; object-fit: cover; }
.co-logo.lg { width: 72px; height: 72px; border-radius: 22px; font-size: 26px; }
.co-logo.sm { width: 40px; height: 40px; border-radius: 13px; font-size: 14px; }

/* İlan kartı (bilet) */
.jt-title { font-family: var(--display); font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.jt-co { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.jmeta { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 10px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.mchip i { font-size: 14px; opacity: .85; }
.mchip.money { background: var(--tint-glow); color: var(--glow-deep); }
html.dark .mchip.money { color: var(--glow); }
.mchip.perk { background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.tag-urgent { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--tint-blush-2); color: #d63a62; display: inline-flex; align-items: center; gap: 4px; }
.tag-urgent i { animation: live 1.4s infinite; }
.tag-feat { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--tint-signal); color: #a86a00; display: inline-flex; align-items: center; gap: 4px; }
html.dark .tag-feat { color: var(--signal); }
.tag-soft { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(139,123,255,.14); color: #5b4de0; }
html.dark .tag-soft { color: #b9b0ff; }
.ticket.urgent { border-color: rgba(255,107,142,.35); }
.ticket.featured { box-shadow: 0 0 0 2px rgba(212,148,64,.45), 0 2px 6px -2px rgba(15,40,48,.08); }
.save-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: var(--sunk); color: var(--mute); transition: transform .3s var(--spring), color .2s, background .2s; flex-shrink: 0; }
.save-btn.on { color: #e0a100; background: var(--tint-signal); }
.save-btn.on i { animation: pinDrop .5s var(--spring); }
.save-btn:active { transform: scale(.88); }
.days-left { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; height: 58px; border-radius: 18px; background: var(--tint-glow); color: var(--glow-deep); line-height: 1.05; flex-shrink: 0; text-align: center; }
.days-left b { font-family: var(--display); font-size: 20px; font-weight: 800; }
.days-left small { font-size: 10px; font-weight: 700; opacity: .85; }
.days-left.warn { background: var(--tint-signal); color: #a86a00; }
html.dark .days-left { color: var(--glow); } html.dark .days-left.warn { color: var(--signal); }

/* Arama bileti: anahtar kelime alanı */
.search-ticket .kw { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 18px; background: var(--sunk); }
.search-ticket .kw input { flex: 1; min-width: 0; height: 44px; background: transparent; outline: none; font-weight: 700; font-size: 16px; color: var(--ink); }
.search-ticket .kw .go { height: 42px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.sel-box { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 16px; transition: background .2s; min-width: 0; }
.sel-box:hover, .sel-box:focus-within { background: var(--sunk); }
.sel-box > i { font-size: 20px; color: var(--glow-deep); flex-shrink: 0; }
html.dark .sel-box > i { color: var(--glow); }
.sel-box select { width: 100%; min-width: 0; background: transparent; font-weight: 700; font-size: 14.5px; outline: none; appearance: none; color: var(--ink); text-overflow: ellipsis; }
.sel-box small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); }

/* Kategori ızgarası */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-tile { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--spring), box-shadow .3s; min-width: 0; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(15,40,48,.4); }
.cat-tile .ci { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--tint-glow); color: var(--glow-deep); flex-shrink: 0; }
html.dark .cat-tile .ci { color: var(--glow); }
.cat-tile b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.cat-tile small { font-size: 11.5px; font-weight: 600; color: var(--mute); }

/* Başvuru aşamaları */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pipe .ps { position: relative; text-align: center; }
.pipe .ps .pd { width: 36px; height: 36px; margin: 0 auto; border-radius: 13px; display: grid; place-items: center; font-size: 18px; background: var(--sunk); color: var(--mute); transition: all .5s var(--spring); position: relative; z-index: 1; }
.pipe .ps::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 3px; border-radius: 3px; background: var(--sunk); }
.pipe .ps:first-child::before { display: none; }
.pipe .ps.done .pd { background: var(--glow-deep); color: #fff; box-shadow: 0 8px 18px -8px rgba(12,124,134,.8); }
.pipe .ps.done::before { background: var(--glow-deep); }
.pipe .ps.now .pd { transform: scale(1.12) rotate(-6deg); }
.pipe .ps.bad .pd { background: #e5484d; color: #fff; }
.pipe .ps span { display: block; font-size: 10.5px; font-weight: 700; color: var(--mute); margin-top: 5px; line-height: 1.15; }
.pipe .ps.done span { color: var(--ink); }

/* Durum rozetleri */
.st-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 9px; white-space: nowrap; }

/* Aday satırı (ilan yönetimi) */
.cand-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: transform .25s var(--spring), box-shadow .25s; }
.cand-row:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -20px rgba(15,40,48,.45); }
.cand-row.unseen { border-color: rgba(76,195,255,.45); box-shadow: 0 0 0 3px rgba(76,195,255,.12); }

/* CV bölümü */
.cv-item { position: relative; padding-left: 18px; }
.cv-item::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: -14px; width: 2px; background: var(--line); }
.cv-item:last-child::before { bottom: 6px; }
.cv-item::after { content: ""; position: absolute; left: -1px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--glow-deep); box-shadow: 0 0 0 3px var(--tint-glow); }
.skill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: var(--tint-glow); color: var(--glow-deep); }
html.dark .skill { color: var(--glow); }
.meter { height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--signal), var(--glow)); transition: width 1s var(--ease); }
.meter.light { background: var(--sunk); }

/* Uzun kullanıcı metinleri (ilan açıklaması, ön yazı) */
.job-desc { font-size: 15px; line-height: 1.7; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.cover { font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }

/* Form alanları (ilan ver, CV) */
.fi { width: 100%; height: 48px; border-radius: 16px; background: var(--sunk); border: 2px solid transparent; padding: 0 14px; font-weight: 600; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, background .2s; }
.fi:focus { border-color: rgba(12,124,134,.5); background: var(--card); }
textarea.fi { height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; }
select.fi { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f847a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.fl { display: block; font-size: 12px; font-weight: 800; color: var(--mute); margin-bottom: 5px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .opt-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opt { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 16px; background: var(--sunk); border: 2px solid transparent; font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: all .2s; text-align: left; }
.opt i { font-size: 19px; color: var(--mute); flex-shrink: 0; }
.opt.on { background: var(--tint-glow); border-color: rgba(12,124,134,.45); color: var(--ink); }
.opt.on i { color: var(--glow-deep); }
html.dark .opt.on i { color: var(--glow); }

/* Aday kartı (iş arıyorum) */
.seek-card { position: relative; background: var(--card); border-radius: 22px; border: 1px dashed rgba(139,123,255,.45); padding: 14px; animation: rise .5s var(--ease) both; }

/* Masaüstü: liste + yan panel */
@media (min-width: 1024px) {
  .list-2col { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
  .list-2col > aside { position: sticky; top: 96px; }
}
.pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--card); border: 1px solid var(--line); }
.pager .on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
@media (min-width: 1024px) {
  footer .site-foot.jf, .is-wide ~ footer .site-foot.jf, footer.lg\:max-w-7xl .site-foot.jf { display: block; padding: 32px 40px; }
  footer .site-foot.jf > div:last-child { margin-top: 18px; }
}

/* ======================================================================
   İşveren masaüstü: yan menü kabuğu, tablolar, aday panosu
   ====================================================================== */
.nav-cta { background: var(--glow) !important; color: #06292e !important; font-weight: 800; margin-left: 4px; }
.nav-cta:hover { filter: brightness(1.05); }
.emp-side { display: none; }
@media (min-width: 1024px) {
  .emp-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start; }
  .emp-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(15,40,48,.04), 0 8px 24px -16px rgba(15,40,48,.25); }
  .es-co { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px; transition: background .2s; }
  .es-co:hover { background: var(--sunk); }
  .es-co b { font-size: 14.5px; font-weight: 800; }
  .es-new { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 16px; font-weight: 800; font-size: 14.5px; color: #06292e; background: linear-gradient(135deg, #7fd6dd, #3cc4ce 55%, #14919b); box-shadow: 0 12px 26px -14px rgba(12,124,134,.9); transition: transform .2s; }
  .es-new:hover { transform: translateY(-1px); }
  .es-nav { display: flex; flex-direction: column; gap: 2px; }
  .es-nav a { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 13px; font-size: 14px; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s; }
  .es-nav a i { font-size: 20px; }
  .es-nav a:hover { background: var(--sunk); color: var(--ink); }
  .es-nav a.is-on { background: #12303a; color: #fff; }
  .es-nav a.is-on i { color: var(--glow); }
  .es-nav em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
  .es-nav em.hot { background: #0284c7; color: #fff; }
  .es-nav a.is-on em { background: rgba(255,255,255,.14); color: #fff; }
  .es-note { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: #92400e; background: #fffbeb; border-radius: 12px; padding: 8px 10px; }
  .es-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
  .es-foot a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: var(--mute); }
  .es-foot a:hover { background: var(--sunk); color: var(--ink); }
  .emp-shell + * { }
}
html.dark .es-nav a.is-on { background: rgba(60,196,206,.14); color: var(--glow); box-shadow: inset 0 0 0 1px rgba(60,196,206,.25); }
html.dark .es-note { background: rgba(245,158,11,.12); color: #fcd34d; }

/* Sayfa başlığı (işveren sayfaları) */
.ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-head h1 { font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 1024px) { .ph-head h1 { font-size: 34px; } }
.ph-btn { height: 42px; padding: 0 16px; border-radius: 13px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,40,48,.05); transition: background .15s, transform .15s; white-space: nowrap; }
.ph-btn:hover { background: var(--sunk); }
.ph-btn.dark { background: #12303a; color: #fff; border-color: transparent; }
.ph-btn.go { background: var(--glow); color: #06292e; border-color: transparent; }
.ph-btn.danger { color: #be123c; }
.ph-btn:disabled { opacity: .45; pointer-events: none; }
html.dark .ph-btn.dark { background: #e4eef0; color: #12303a; }

/* KPI kartları */
.kpi { position: relative; border-radius: 22px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(15,40,48,.04), 0 2px 6px -2px rgba(15,40,48,.08); overflow: hidden; display: block; transition: transform .2s, box-shadow .2s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(15,40,48,.45); }
.kpi .k-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--mute); }
.kpi .k-l i { font-size: 18px; }
.kpi .k-v { margin-top: 8px; font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .k-s { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--mute); }
.kpi.dark { background: radial-gradient(120% 140% at 100% 0%, #0f766e 0%, #0c3e45 50%, #0f2830 100%); color: #e8f6f7; border: 0; }
.kpi.dark .k-l, .kpi.dark .k-s { color: rgba(236,253,245,.7); }

/* Panel kartları */
.pcard { border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(15,40,48,.04), 0 2px 6px -2px rgba(15,40,48,.08); }
.pcard-h { display: flex; align-items: center; gap: 8px; padding: 16px 18px 6px; }
.pcard-h h2 { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.pcard-h h2 i { font-size: 21px; }
.pcard-h a.more { margin-left: auto; font-size: 12.5px; font-weight: 800; color: #0a646d; }
html.dark .pcard-h a.more { color: var(--glow); }

/* Veri tablosu */
.dt-wrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.dt th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt th button { display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.dt td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tbody tr { transition: background .12s; }
.dt tbody tr:hover td { background: var(--sunk); }
.dt tbody tr.is-sel td { background: rgba(60,196,206,.10); }
.dt tbody tr.unseen td:first-child { box-shadow: inset 3px 0 0 #0284c7; }
.dt tr:last-child td { border-bottom: 0; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.dt .muted { color: var(--mute); font-weight: 600; font-size: 12.5px; }
.dt .cell-main { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.dt .cell-main b { font-weight: 800; }
.dt-chk { width: 18px; height: 18px; accent-color: #0c7c86; cursor: pointer; }
.bulk-bar { position: sticky; bottom: 16px; z-index: 30; margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 18px; background: #12303a; color: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); }
.bulk-bar .ph-btn { height: 36px; font-size: 13px; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.1); }
.bulk-bar .ph-btn:hover { background: rgba(255,255,255,.16); }
.bulk-bar .ph-btn.go { background: var(--glow); color: #06292e; }
.mini-av { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; overflow: hidden; flex-shrink: 0; }
.mini-av img { width: 100%; height: 100%; object-fit: cover; }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-in { height: 42px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); padding: 0 12px; font-weight: 600; font-size: 14px; color: var(--ink); outline: none; }
.tool-in:focus { border-color: #3cc4ce; box-shadow: 0 0 0 4px rgba(60,196,206,.18); }
select.tool-in { padding-right: 28px; }

/* Aday panosu (Kanban) */
.kb { display: grid; grid-template-columns: repeat(5, minmax(164px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kb-col { border-radius: 20px; background: var(--sunk); padding: 10px; min-height: 360px; display: flex; flex-direction: column; gap: 8px; transition: background .15s, box-shadow .15s; }
.kb-col.is-over { background: rgba(60,196,206,.14); box-shadow: inset 0 0 0 2px rgba(60,196,206,.6); }
.kb-h { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; font-size: 13px; font-weight: 800; }
.kb-h .dot { width: 9px; height: 9px; border-radius: 50%; }
.kb-h em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--mute); background: var(--card); padding: 2px 8px; border-radius: 999px; }
.kb-card { display: block; border-radius: 15px; background: var(--card); border: 1px solid var(--line); padding: 10px; cursor: grab; box-shadow: 0 1px 2px rgba(15,40,48,.06); transition: transform .15s, box-shadow .15s, opacity .15s; }
.kb-card:hover { box-shadow: 0 12px 24px -16px rgba(15,40,48,.5); transform: translateY(-1px); }
.kb-card.is-drag { opacity: .4; }
.kb-card.unseen { box-shadow: inset 3px 0 0 #0284c7, 0 1px 2px rgba(15,40,48,.06); }
.kb-empty { font-size: 12px; font-weight: 600; color: var(--mute); text-align: center; padding: 18px 6px; border: 2px dashed var(--line); border-radius: 14px; }
.seg2 { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--sunk); gap: 2px; }
.seg2 button, .seg2 a { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; }
.seg2 .on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(15,40,48,.12); }

/* Kontrol listesi */
.chk-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; font-size: 13.5px; font-weight: 700; }
.chk-item i.b { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.chk-item.done { color: var(--mute); text-decoration: line-through; }
.bar-track { height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3cc4ce, #0c7c86); }
@media (min-width: 1280px) { .emp-main .opt-grid.c3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Küçük ekranda tablolar kart görünümüne geçer */
@media (max-width: 767px) {
  .dt.dt-cards thead { display: none; }
  .dt.dt-cards, .dt.dt-cards tbody { display: block; }
  .dt.dt-cards tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); position: relative; }
  .dt.dt-cards td { display: block; padding: 2px 0; border: 0; }
  .dt.dt-cards td:not(.hidden) { grid-column: 2 / 4; }
  .dt.dt-cards td.dt-c1 { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 10px; }
  .dt.dt-cards td.dt-main { grid-column: 2 / 4; }
  .dt.dt-cards td.text-right { text-align: left; }
  .dt.dt-cards .cell-main { min-width: 0; }
  .dt.dt-cards tbody tr:hover td { background: transparent; }
}
@media (max-width: 767px) { .dt.dt-cards.nochk tr { display: block; } .dt.dt-cards.nochk td.text-right { padding-top: 8px; } }
@media (max-width: 767px) { .dt.dt-cards td.hidden { display: none; } .dt.dt-cards tr.unseen td:first-child { box-shadow: none; } .dt.dt-cards tr.unseen { box-shadow: inset 3px 0 0 #0284c7; } }