/* Solterra panel — Mim Bytes tasarım dili (lojman/mesai kalıbı), ürün aksanı MAVİ. Build yok.
   Tokenler :root'ta; bileşen CSS'inde ham HEX yok (fotoğraf üstü sabit koyu alan hariç). */

:root {
  color-scheme: dark;
  --font-baslik: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-govde: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* zemin */
  --bg-cukur: #06080B; --bg: #0A0D12; --bg2: #0D1117; --yuzey: #11151C; --yuzey2: #171C25;
  --perde: rgba(6, 8, 11, .72);
  --hover: rgba(255, 255, 255, .05);

  /* metin */
  --metin: #F2F5F9; --metin2: #A9B4C2; --metin3: #7A8698; --metin-pasif: #4E5867;

  /* kenar */
  --cizgi: #1C232D; --cizgi2: #2A323E; --cizgi3: #3D4756;

  /* ürün aksanı: Solterra mavisi (birincil eylem rengi) */
  --vurgu: #3D8BFD; --vurgu-metin: #6EAAFF; --vurgu-hover: #5A9DFF; --vurgu-koyu: #2F74E0;
  --vurgu-yumusak: rgba(61, 139, 253, .14); --vurgu-kenar: rgba(61, 139, 253, .34);
  --vurgu-odak: rgba(61, 139, 253, .40); --vurgu-isima: 0 0 48px -10px rgba(61, 139, 253, .55);

  /* semantik (grafik JS getPropertyValue ile okur: düz HEX kalsın) */
  --yesil: #2ED47A; --yesil-yumusak: rgba(46, 212, 122, .12); --yesil-kenar: rgba(46, 212, 122, .34);
  --amber: #F5A524; --amber-yumusak: rgba(245, 165, 36, .13); --amber-kenar: rgba(245, 165, 36, .36);
  --sari: #F5A524;
  --kirmizi: #FF5A62; --kirmizi-yumusak: rgba(255, 90, 98, .12); --kirmizi-kenar: rgba(255, 90, 98, .38);

  /* yükselti: koyu temada kenar + yüzey, gölge yok */
  --golge: 0 0 0 0 transparent;
  --golge3: 0 16px 40px -12px rgba(0, 0, 0, .65);
  --golge4: 0 32px 80px -20px rgba(0, 0, 0, .80), inset 0 1px 0 rgba(255, 255, 255, .06);

  --r-sm: 6px; --r-md: 10px; --r: 14px; --r-xl: 20px; --r-tam: 9999px;
  --hiz: 200ms; --hiz-yavas: 280ms;
  --kolay: cubic-bezier(.2, 0, 0, 1);
  --kolay-vurgu: cubic-bezier(.3, 0, 0, 1);
}
:root[data-tema="acik"] {
  color-scheme: light;
  --bg-cukur: #EEF1F6; --bg: #F7F8FA; --bg2: #F4F6F9; --yuzey: #FFFFFF; --yuzey2: #FFFFFF;
  --perde: rgba(13, 18, 25, .48);
  --hover: rgba(13, 18, 25, .05);
  --metin: #0D1219; --metin2: #48566B; --metin3: #6B7789; --metin-pasif: #A3ABB8;
  --cizgi: #E6EAF0; --cizgi2: #D2D9E3; --cizgi3: #B4BECC;
  --vurgu: #1D63D8; --vurgu-metin: #1D63D8; --vurgu-hover: #174FB0; --vurgu-koyu: #123F8C;
  --vurgu-yumusak: #E8F0FD; --vurgu-kenar: #B9D1F7; --vurgu-odak: rgba(29, 99, 216, .30);
  --vurgu-isima: 0 8px 24px -8px rgba(29, 99, 216, .35);
  --yesil: #0A7A45; --yesil-yumusak: #E6F8EF; --yesil-kenar: #A8E5C6;
  --amber: #8A5200; --amber-yumusak: #FFF4E0; --amber-kenar: #F0CE92;
  --sari: #8A5200;
  --kirmizi: #C9182C; --kirmizi-yumusak: #FFF0F1; --kirmizi-kenar: #F0B4BA;
  --golge: 0 1px 2px rgba(13, 18, 25, .06), 0 1px 3px rgba(13, 18, 25, .10);
  --golge3: 0 12px 24px -6px rgba(13, 18, 25, .12), 0 4px 8px -4px rgba(13, 18, 25, .08);
  --golge4: 0 24px 48px -12px rgba(13, 18, 25, .18);
}

/* ---------- temel ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font: 15px/1.5 var(--font-govde);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--font-baslik); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
[hidden] { display: none !important; }
.gizli-ekran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; border-radius: inherit; }

/* ---------- Giriş sayfası (bölünmüş düzen) ---------- */
.giris-sayfa { background: var(--bg-cukur); }
.giris { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.giris-gorsel { position: relative; overflow: hidden; background: #0A0D12; border-right: 1px solid var(--cizgi); min-height: 42vh; }
.giris-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; opacity: .92; }
.giris-gorsel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 45%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 40% 45%, #000 10%, transparent 70%);
}
.giris-gorsel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, #0A0D12 10%, rgba(10, 13, 18, .55) 46%, rgba(10, 13, 18, .05) 80%),
              linear-gradient(90deg, rgba(10, 13, 18, .35), transparent 40%);
}
.giris-isima {
  position: absolute; z-index: 1; width: 60vmax; height: 60vmax; left: 50%; top: 55%;
  transform: translate(-55%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 139, 253, .20), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.giris-metin {
  position: absolute; z-index: 2;
  left: clamp(24px, 6vw, 88px); right: clamp(24px, 6vw, 88px); bottom: clamp(24px, 7vh, 72px);
  max-width: 560px; color: #F2F5F9;
}
.giris-metin .ustyazi {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font: 700 12px/1.33 var(--font-govde); letter-spacing: .10em; color: #6EAAFF;
}
.giris-metin .ustyazi::before { content: ""; width: 28px; height: 2px; background: #3D8BFD; }
.giris-metin h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; color: #F2F5F9; }
.giris-metin h1 em { font-style: normal; color: #6EAAFF; }
.giris-metin p { margin: 14px 0 0; color: #A9B4C2; font-size: 16px; max-width: 54ch; }
.giris-ozellik { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 28px; flex-wrap: wrap; }
.giris-ozellik div { display: flex; flex-direction: column; gap: 2px; }
.giris-ozellik b { font: 600 24px/1.2 var(--font-mono); letter-spacing: -.01em; color: #F2F5F9; }
.giris-ozellik span { font-size: 12px; color: #7A8698; letter-spacing: .04em; }
.giris-kaynak { position: absolute; z-index: 2; right: 14px; top: 12px; font-size: 11px; color: rgba(169, 180, 194, .6); }

.giris-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(24px, 5vw, 64px); position: relative; }
.giris-kutu { width: 100%; max-width: 400px; }
.giris-marka { display: inline-flex; align-items: center; gap: 12px; }
.isaret-kutu {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  background: var(--vurgu-yumusak); border: 1px solid var(--vurgu-kenar);
  display: grid; place-items: center; color: var(--vurgu-metin);
}
.isaret-kutu svg { width: 22px; height: 22px; }
.giris-marka b { font: 600 18px/1.2 var(--font-baslik); letter-spacing: -.01em; display: block; }
.giris-marka small { display: block; font-size: 12px; color: var(--metin3); font-weight: 400; margin-top: 2px; }
.giris-kutu h1 { font-size: 28px; margin-top: 28px; letter-spacing: -.015em; }
.giris-alt { margin: 6px 0 24px; color: var(--metin2); font-size: 15px; }
.giris-kutu form { display: grid; gap: 14px; }
.giris-kutu label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--metin2); }
.giris-hata { color: var(--kirmizi); font-size: 13px; min-height: 1em; }
.giris-kutu .btn { height: 48px; font-size: 15px; }
.giris-dip { margin-top: 28px; font-size: 12px; color: var(--metin3); }
@media (max-width: 860px) {
  .giris { grid-template-columns: 1fr; }
  .giris-gorsel { min-height: 38vh; border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .giris-metin { bottom: 20px; left: 20px; right: 20px; }
  .giris-metin p, .giris-ozellik { display: none; }
  .giris-metin h1 { font-size: 26px; }
  .giris-panel { justify-content: flex-start; padding-top: 28px; }
}

/* ---------- Form alanları ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="time"], select {
  width: 100%; height: 44px;
  background: var(--bg2);
  border: 1px solid var(--cizgi2);
  border-radius: var(--r-sm);
  padding: 0 14px;
  color: var(--metin);
  transition: border-color var(--hiz) var(--kolay), box-shadow var(--hiz) var(--kolay), background var(--hiz);
}
input::placeholder { color: var(--metin3); }
input:hover, select:hover { border-color: var(--cizgi3); }
input:focus, select:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-odak); background: var(--yuzey2); }
input[type="number"] { -moz-appearance: textfield; font-family: var(--font-mono); }
input[type="time"] { font-family: var(--font-mono); }

/* ---------- Düğmeler ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid var(--cizgi2);
  background: transparent;
  color: var(--metin);
  border-radius: var(--r-md);
  font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  transition: transform var(--hiz) var(--kolay), background var(--hiz), border-color var(--hiz), opacity var(--hiz), box-shadow var(--hiz);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { background: var(--hover); border-color: var(--cizgi3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; }
.btn-birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.btn-birincil:hover { background: var(--vurgu-hover); border-color: var(--vurgu-hover); transform: translateY(-1px); box-shadow: var(--vurgu-isima); }
.btn-birincil:active { background: var(--vurgu-koyu); transform: none; box-shadow: none; }
.btn-birincil:focus-visible { box-shadow: 0 0 0 4px var(--vurgu-odak); }
.btn-tehlike { border-color: var(--kirmizi-kenar); color: var(--kirmizi); }
.btn-tehlike:hover { background: var(--kirmizi-yumusak); border-color: var(--kirmizi); }
.btn-amber { border-color: var(--amber-kenar); color: var(--amber); }
.btn-amber:hover { background: var(--amber-yumusak); border-color: var(--amber); }
.btn-kucuk { height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-ikon { width: 38px; height: 38px; padding: 0; border-radius: var(--r-sm); color: var(--metin2); }
.btn-ikon:hover { color: var(--metin); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.bekliyor { color: transparent !important; pointer-events: none; }
.btn.bekliyor::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--cizgi3); border-top-color: var(--vurgu);
  animation: don .8s linear infinite;
}
.btn-birincil.bekliyor::after { border-color: rgba(255,255,255,.3); border-top-color: #fff; }

/* ---------- Üst çubuk ---------- */
.ust {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: calc(56px + env(safe-area-inset-top));
  padding: 0 16px; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ust .marka { display: flex; align-items: center; gap: 10px; font: 600 17px/1 var(--font-baslik); letter-spacing: -.01em; }
.ust .marka .isaret-kutu { width: 32px; height: 32px; border-radius: var(--r-sm); }
.ust .marka .isaret-kutu svg { width: 18px; height: 18px; }
.ust .marka small { display: block; font: 400 11px/1 var(--font-govde); color: var(--metin3); margin-top: 4px; letter-spacing: .02em; }
.ust .bosluk { flex: 1; }
.ust .kullanici { font-size: 13px; color: var(--metin2); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 440px) { .ust .marka small { display: none; } .ust .kullanici { display: none; } }

/* ---------- Rozetler ---------- */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-tam);
  font-size: 12px; font-weight: 600;
  background: var(--hover); border: 1px solid var(--cizgi); color: var(--metin2);
  white-space: nowrap;
}
.rozet .nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .75; }
.rozet.online { color: var(--yesil); background: var(--yesil-yumusak); border-color: var(--yesil-kenar); }
.rozet.online .nokta { opacity: 1; animation: nabiz 2s infinite; }
.rozet.offline { color: var(--kirmizi); background: var(--kirmizi-yumusak); border-color: var(--kirmizi-kenar); }
.rozet.aktif { color: var(--vurgu-metin); background: var(--vurgu-yumusak); border-color: var(--vurgu-kenar); }
.rozet.amber { color: var(--amber); background: var(--amber-yumusak); border-color: var(--amber-kenar); }
.rozet.sonuk { opacity: .6; }

/* ---------- Sekmeler (alt çizgi tipi) ---------- */
.sekmeler {
  display: flex; gap: 24px; margin: 0; padding: 0 16px;
  border-bottom: 1px solid var(--cizgi);
  background: var(--bg);
  position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 19;
}
.sekmeler button {
  position: relative; border: 0; background: transparent; color: var(--metin3);
  height: 44px; padding: 0 4px; font: 600 15px/1 var(--font-govde);
  transition: color var(--hiz);
}
.sekmeler button:hover { color: var(--metin2); }
.sekmeler button[aria-selected="true"] { color: var(--metin); }
.sekmeler button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--vurgu); transform: scaleX(0); transition: transform var(--hiz-yavas) var(--kolay);
}
.sekmeler button[aria-selected="true"]::after { transform: scaleX(1); }

main { padding: 16px 16px 48px; padding-bottom: calc(48px + env(safe-area-inset-bottom)); max-width: 1120px; margin: 0 auto; }
.sekme { display: none; animation: belir var(--hiz) var(--kolay); }
.sekme.acik { display: block; }

/* ---------- Kart ---------- */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--golge);
  transition: border-color var(--hiz) var(--kolay);
}
.kart:hover { border-color: var(--cizgi2); }
.kart + .kart { margin-top: 12px; }
.kart h2 { font: 600 13px/1.3 var(--font-govde); color: var(--metin2); letter-spacing: .02em; margin-bottom: 12px; }
.kart-basligi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.kart-basligi h2 { margin: 0; }

/* ---------- Hero / araç fotoğrafı (her iki temada koyu) ---------- */
.hero { position: relative; overflow: hidden; padding: 0; background: #0A0D12; border-color: #1C232D; color: #F2F5F9; }
.hero:hover { border-color: #2A323E; }
.hero-ust { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hero-ust .bosluk { flex: 1; }
.hero .rozet { background: rgba(10, 13, 18, .6); border-color: rgba(255, 255, 255, .12); color: #A9B4C2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero .rozet.online { color: #2ED47A; border-color: rgba(46, 212, 122, .4); }
.hero .rozet.aktif { color: #6EAAFF; border-color: rgba(61, 139, 253, .45); }
.hero .rozet.amber { color: #F5A524; border-color: rgba(245, 165, 36, .45); }
.hero .rozet.sonuk { opacity: .7; }

.arac-sahne { position: relative; aspect-ratio: 2.2 / 1; min-height: 170px; background: #0A0D12; }
.arac-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; transition: filter .6s; }
.arac-sahne::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, #0A0D12 0%, rgba(10, 13, 18, .72) 14%, rgba(10, 13, 18, 0) 40%),
    linear-gradient(to bottom, rgba(10, 13, 18, .62) 0%, rgba(10, 13, 18, 0) 32%);
}
.hero-isima {
  position: absolute; z-index: 1; left: 50%; bottom: -30%; width: 80%; height: 70%;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(61, 139, 253, .22), transparent 70%);
  filter: blur(18px); opacity: .85; transition: background .6s;
}
.hero.klima-isit .hero-isima { background: radial-gradient(closest-side, rgba(245, 165, 36, .24), transparent 70%); }
.arac-ready .arac-foto { filter: brightness(1.06) saturate(1.05); }

/* Fotoğraf üstü işaretler (yüzde konumlar fotoğrafa göre) */
.isaret { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; color: #F2F5F9; }
.isaret .nokta {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
  background: rgba(10, 13, 18, .72); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #A9B4C2; transition: color .3s, border-color .3s, background .3s;
}
.isaret .nokta svg { width: 18px; height: 18px; display: block; }
.isaret .etiket {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-tam);
  background: rgba(10, 13, 18, .72); border: 1px solid rgba(255, 255, 255, .12); color: #A9B4C2;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap;
}
.isaret .halka { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; pointer-events: none; }
@media (max-width: 560px) {
  .isaret .nokta { width: 28px; height: 28px; }
  .isaret .nokta svg { width: 15px; height: 15px; }
  .isaret .etiket { display: none; }
  /* dar ekranda rozetler fotoğrafın üstünde ayrı bir şeritte, fotoğrafla çakışmasın */
  .hero-ust { position: relative; left: auto; right: auto; top: auto; padding: 10px 10px 8px; }
  .hero .rozet { background: rgba(255, 255, 255, .06); }
  .hero-kaynak { display: none; }
  .hero-alt { margin-top: -2px; }
}

/* kilit: kapı kolu */
.isaret-kilit { left: 73%; top: 40%; }
.isaret-kilit .nokta, .isaret-kilit .etiket { color: #2ED47A; border-color: rgba(46, 212, 122, .5); }
.isaret-kilit.acik .nokta, .isaret-kilit.acik .etiket { color: #F5A524; border-color: rgba(245, 165, 36, .55); }
.isaret-kilit.bilinmiyor .nokta, .isaret-kilit.bilinmiyor .etiket { color: #A9B4C2; border-color: rgba(255, 255, 255, .16); }
.isaret-kilit .nokta .i-acik { display: none; }
.isaret-kilit.acik .nokta .i-acik { display: block; }
.isaret-kilit.acik .nokta .i-kapali { display: none; }
.isaret-kilit.vur .nokta { animation: zipla .6s var(--kolay-vurgu); }
.isaret-kilit.vur .halka { animation: halka .7s var(--kolay); }

/* klima: ön cam */
.isaret-klima { left: 44%; top: 23%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.klima-aktif .isaret-klima { opacity: 1; }
.isaret-klima .nokta, .isaret-klima .etiket { color: #6EAAFF; border-color: rgba(61, 139, 253, .55); }
.klima-isit .isaret-klima .nokta, .klima-isit .isaret-klima .etiket { color: #F5A524; border-color: rgba(245, 165, 36, .55); }
.klima-aktif .isaret-klima .fan { animation: don 1.2s linear infinite; transform-origin: center; transform-box: fill-box; }
.klima-dalgalar { position: absolute; left: 30%; top: 24%; width: 12%; height: 16%; z-index: 2; opacity: 0; transition: opacity .4s; pointer-events: none; overflow: visible; }
.klima-aktif .klima-dalgalar { opacity: 1; }
.klima-dalgalar path { fill: none; stroke: #6EAAFF; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 8; opacity: .85; }
.klima-isit .klima-dalgalar path { stroke: #F5A524; }
.klima-aktif .klima-dalgalar path { animation: akis 1.4s linear infinite; }
.klima-dalgalar path:nth-child(2) { animation-delay: -.45s; }
.klima-dalgalar path:nth-child(3) { animation-delay: -.9s; }

/* bagaj: arka (dikey: ikon üstte, etiket altta) */
.isaret-bagaj { left: 89%; top: 26%; flex-direction: column; gap: 4px; opacity: 0; transform: translate(-60%, -30%); transition: opacity .4s, transform .5s var(--kolay); pointer-events: none; }
.arac-bagaj-acik .isaret-bagaj { opacity: 1; transform: translate(-60%, -50%); }
.isaret-bagaj .nokta, .isaret-bagaj .etiket { color: #6EAAFF; border-color: rgba(61, 139, 253, .55); }

/* kilit etiketi duruma göre */
.isaret-kilit .etiket::after { content: "Kilitli"; }
.isaret-kilit.acik .etiket::after { content: "Kilit açık"; }
.isaret-kilit.bilinmiyor .etiket::after { content: "Kilit"; }

/* şarj kapağı */
.isaret-sarj { left: 58%; top: 37%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.arac-sarj .isaret-sarj { opacity: 1; }
.isaret-sarj .nokta, .isaret-sarj .etiket { color: #2ED47A; border-color: rgba(46, 212, 122, .55); }
.isaret-sarj .nokta { animation: nabiz-yesil 1.6s infinite; }

/* READY: far ışıması */
.far-isik {
  position: absolute; z-index: 2; left: 33%; top: 45%; width: 14%; height: 10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(207, 238, 255, .55), transparent 70%);
  filter: blur(6px); opacity: 0; transition: opacity .6s;
}
.arac-ready .far-isik { opacity: 1; animation: far-nabiz 2.4s ease-in-out infinite; }

.hero-alt { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; margin-top: -6px; }
.hero-kaynak { position: absolute; z-index: 3; right: 10px; bottom: 8px; font-size: 10px; color: rgba(169, 180, 194, .45); }

/* ---------- Karolar ---------- */
.karolar { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
@media (min-width: 560px) { .karolar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .karolar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.karo {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 14px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  box-shadow: var(--golge);
  transition: border-color var(--hiz) var(--kolay);
}
.karo:hover { border-color: var(--cizgi2); }
.karo .etiket { font-size: 12px; color: var(--metin2); font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.karo .etiket svg { width: 14px; height: 14px; color: var(--vurgu-metin); opacity: .9; }
.karo .deger { font: 600 26px/1.1 var(--font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.karo .deger small { font: 500 13px/1 var(--font-govde); color: var(--metin2); margin-left: 3px; }
.karo .alt { font-size: 12px; color: var(--metin3); font-variant-numeric: tabular-nums; }
.karo.yesil .deger { color: var(--yesil); }
.karo.sari .deger { color: var(--amber); }
.karo.kirmizi .deger { color: var(--kirmizi); }
.karo.soc { grid-column: span 2; flex-direction: row; align-items: center; gap: 16px; }
.soc-halka { position: relative; width: 96px; height: 96px; flex: none; }
.soc-halka svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.soc-halka .iz { fill: none; stroke: var(--bg-cukur); stroke-width: 9; }
.soc-halka .dolu { fill: none; stroke: var(--vurgu); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .9s var(--kolay), stroke .4s; }
.soc-halka .dolu.dusuk { stroke: var(--kirmizi); }
.soc-halka .dolu.orta { stroke: var(--amber); }
.soc-halka .yazi { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 600 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.soc-halka .yazi small { font: 600 10px/1 var(--font-govde); color: var(--metin2); margin-top: 4px; }
.soc-bilgi { display: grid; gap: 4px; min-width: 0; }
.soc-bilgi .deger { font-size: 22px; }
.soc-bilgi .etiket { font-size: 12px; }
.degisti { animation: parla .9s var(--kolay); }

/* ---------- Komutlar ---------- */
.komutlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .komutlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.komutlar .btn {
  height: auto; padding: 14px 10px 12px; flex-direction: column; gap: 10px; font-size: 14px;
  border-radius: var(--r); background: var(--bg2); border-color: var(--cizgi); color: var(--metin);
}
.komutlar .btn:hover { background: var(--yuzey2); border-color: var(--vurgu-kenar); }
.komutlar .btn .ikon {
  width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--vurgu-yumusak); border: 1px solid var(--vurgu-kenar); color: var(--vurgu-metin);
  transition: opacity var(--hiz);
}
.komutlar .btn .ikon svg { width: 20px; height: 20px; }
.komutlar .btn-amber .ikon { background: var(--amber-yumusak); border-color: var(--amber-kenar); color: var(--amber); }
.komutlar .btn-amber:hover { border-color: var(--amber-kenar); background: var(--yuzey2); }
.komutlar .btn-tehlike .ikon { background: var(--kirmizi-yumusak); border-color: var(--kirmizi-kenar); color: var(--kirmizi); }
.komutlar .btn-tehlike:hover { border-color: var(--kirmizi-kenar); background: var(--yuzey2); }
.komutlar .btn .alt-yazi { font-size: 11px; font-weight: 500; color: var(--metin3); margin-top: -6px; }
.komutlar .btn.bekliyor .ikon { opacity: 0; }
.komut-ipucu { margin: 12px 0 0; font-size: 12px; color: var(--metin3); text-align: center; }
.komut-grup-baslik { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.komut-grup-baslik span { font: 600 13px/1.3 var(--font-govde); color: var(--metin2); letter-spacing: .02em; }
.komut-grup-baslik small { font-size: 12px; color: var(--metin3); }
.komutlar-cam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .komutlar-cam { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.komutlar-cam .btn { padding: 12px 8px 10px; font-size: 13px; }
.komutlar-cam .btn .ikon { width: 36px; height: 36px; }
.komutlar-cam .btn .alt-yazi { font-family: var(--font-mono); }
.form-bolum { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.form-bolum h2 { margin-bottom: 6px; }
.form-not { margin: 0; font-size: 12px; color: var(--metin3); line-height: 1.5; }

.sayac {
  display: none; align-items: center; gap: 10px; margin-top: 12px;
  padding: 10px 12px; border-radius: var(--r-md); position: relative; overflow: hidden;
  background: var(--amber-yumusak); border: 1px solid var(--amber-kenar); color: var(--amber);
  font-weight: 600;
}
.sayac.acik { display: flex; }
.sayac svg { width: 18px; height: 18px; }
.sayac .sure { margin-left: auto; font: 600 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.sayac .cubuk { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--amber); transition: width 1s linear; }

/* ---------- Geçmiş ---------- */
.grafikler { display: grid; gap: 12px; }
@media (min-width: 760px) { .grafikler { grid-template-columns: repeat(3, 1fr); } }
.grafik { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--golge); }
.grafik .baslik { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--metin2); font-weight: 600; margin-bottom: 6px; }
.grafik .baslik b { color: var(--metin); font: 600 15px/1 var(--font-mono); }
.grafik canvas { display: block; width: 100%; height: 120px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--bg2); border: 1px solid var(--cizgi);
  font-size: 13px;
}
.liste .zaman { color: var(--metin3); font: 400 12px/1.4 var(--font-mono); white-space: nowrap; }
.liste .ne { font-weight: 600; }
.liste .kim { color: var(--metin2); font-size: 12px; grid-column: 2; }
.liste .sonuc { font-size: 12px; font-weight: 600; justify-self: end; }
.liste .sonuc.ok { color: var(--yesil); }
.liste .sonuc.hata { color: var(--kirmizi); }
.liste .sonuc.bekliyor { color: var(--amber); }
.liste .sonuc.olay { color: var(--metin2); }
.liste .mesaj { grid-column: 2 / span 2; color: var(--metin3); font-size: 12px; }
.bos { color: var(--metin3); font-size: 13px; text-align: center; padding: 16px; }

/* ---------- Ayarlar ---------- */
.form { display: grid; gap: 14px; }
.form .satir { display: grid; gap: 6px; }
.form label { font-size: 13px; color: var(--metin2); font-weight: 600; letter-spacing: .02em; }
.form .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .uclu { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .form .uclu { grid-template-columns: 1fr 1fr; } }
.form .satir-yatay { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anahtar { position: relative; width: 44px; height: 26px; flex: none; }
.anahtar input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.anahtar span { position: absolute; inset: 0; border-radius: var(--r-tam); background: var(--bg2); border: 1px solid var(--cizgi2); transition: background var(--hiz), border-color var(--hiz); }
.anahtar span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--metin3); transition: transform var(--hiz) var(--kolay), background var(--hiz);
}
.anahtar input:checked + span { background: var(--vurgu); border-color: var(--vurgu); }
.anahtar input:checked + span::after { transform: translateX(18px); background: #fff; }
.anahtar input:focus-visible + span { box-shadow: 0 0 0 3px var(--vurgu-odak); }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--bg-cukur); border: 1px solid var(--cizgi); border-radius: var(--r-md); }
.segment button { border: 0; background: transparent; color: var(--metin2); height: 34px; border-radius: var(--r-sm); font-weight: 600; font-size: 13px; transition: background var(--hiz), color var(--hiz); }
.segment button[aria-pressed="true"] { background: var(--yuzey); color: var(--metin); box-shadow: 0 0 0 1px var(--cizgi); }
.segment button[data-mod="isit"][aria-pressed="true"] { color: var(--amber); }
.segment button[data-mod="sogut"][aria-pressed="true"] { color: var(--vurgu-metin); }
.form-alt { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.form-alt .not { margin-right: auto; font-size: 12px; color: var(--metin3); }
.kullanici-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.kullanici-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--cizgi); border-radius: var(--r-md); font-size: 14px; }
.kullanici-liste .rol { font-size: 11px; font-weight: 600; color: var(--metin2); background: var(--hover); border: 1px solid var(--cizgi); padding: 2px 8px; border-radius: var(--r-tam); }
.kullanici-liste .sil { margin-left: auto; }
.kullanici-liste .kullanici-tamad { color: var(--metin3); font-size: 12px; margin-left: 4px; }

/* ---------- Modal / toast ---------- */
.modal-arka { position: fixed; inset: 0; z-index: 50; background: var(--perde); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: belir var(--hiz); }
.modal { width: 100%; max-width: 400px; background: var(--yuzey2); border: 1px solid var(--cizgi2); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--golge4); animation: yukari var(--hiz-yavas) var(--kolay); }
.modal h3 { font-size: 20px; margin-bottom: 6px; }
.modal p { margin: 0 0 16px; color: var(--metin2); font-size: 14px; }
.modal .secenekler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.modal .secenekler .btn { font-family: var(--font-mono); }
.modal .secenekler .btn[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: var(--amber-yumusak); }
.modal .eylemler { display: flex; gap: 8px; justify-content: flex-end; }

.toastlar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.toast {
  margin: 0 auto; max-width: 420px; width: 100%;
  background: var(--yuzey2); border: 1px solid var(--cizgi2); border-left: 3px solid var(--vurgu);
  color: var(--metin); padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; box-shadow: var(--golge3);
  animation: yukari var(--hiz-yavas) var(--kolay);
}
.toast.ok { border-left-color: var(--yesil); }
.toast.hata { border-left-color: var(--kirmizi); }
.toast.uyari { border-left-color: var(--amber); }
.toast.kapan { animation: sol .3s forwards; }

/* ---------- Animasyonlar ---------- */
@keyframes don { to { transform: rotate(360deg); } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes nabiz-yesil { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes far-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes akis { to { stroke-dashoffset: -36; } }
@keyframes halka { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes zipla { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes parla { 0% { background: var(--vurgu-yumusak); border-color: var(--vurgu); } 100% { background: var(--yuzey); border-color: var(--cizgi); } }
@keyframes belir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes yukari { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sol { to { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .klima-aktif .klima-dalgalar path, .klima-aktif .isaret-klima .fan, .rozet.online .nokta, .arac-ready .far-isik, .isaret-sarj .nokta { animation: none !important; }
  .btn.bekliyor::after { animation: don 1s linear infinite !important; }
}

/* ---------- Geniş ekran düzeni ---------- */
@media (min-width: 760px) {
  .panel-duzen { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; align-items: start; }
  .panel-duzen .karolar { margin-top: 0; }
  .karolar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .karolar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}