/* DOLMUŞ — asfalt & tabela */
:root{
  --mavi:#2f7fbf; --sari:#e8c34a; --kagit:#f4f1e8; --murekkep:#1b2028;
  --yesil:#7fe0a8; --kirmizi:#e2483c; --turuncu:#e8a33c; --gok:#5a9fd8;
  --kenar:rgba(244,241,232,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:#141922;color:var(--kagit);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none}
#oyun{position:fixed;inset:0;display:flex;flex-direction:column}

/* ——— üst çubuk ——— */
#ust{display:flex;align-items:center;gap:12px;padding:6px 10px;background:linear-gradient(#232b35,#1a2028);
  border-bottom:1px solid var(--kenar);flex:0 0 auto}
.grupSol{display:flex;align-items:center;gap:10px;min-width:0}
.seferAd{font-weight:700;font-size:13px;color:var(--sari);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22vw}
.sure{font-variant-numeric:tabular-nums;font-weight:800;font-size:20px;min-width:62px}
.sure.az{color:var(--turuncu)} .sure.bitti{color:var(--kirmizi)}
.grupOrta{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;flex-wrap:wrap}
.oge{display:flex;align-items:baseline;gap:4px;font-size:13px}
.oge i{font-style:normal;font-size:9px;letter-spacing:1.2px;opacity:.5;text-transform:uppercase}
.oge b{font-weight:700;font-variant-numeric:tabular-nums}
.oge small{opacity:.5;font-size:11px}
.kasa.tuttu{color:var(--yesil)}
#bozukEt.az{color:var(--turuncu)}
#cezaEt.var{color:var(--kirmizi)}
.ustu.bekliyor{color:var(--sari);animation:yanip .7s ease-in-out infinite}
.fark.onde{color:var(--yesil)} .fark.geride{color:var(--turuncu)}
.memnun.iyi{color:var(--yesil)} .memnun.orta{color:var(--sari)} .memnun.kotu{color:var(--kirmizi)}
@keyframes yanip{0%,100%{opacity:1}50%{opacity:.45}}
.koltukOge{gap:6px}
.koltuklar{display:flex;gap:2px}
.koltuklar i{width:7px;height:11px;border-radius:2px;background:rgba(244,241,232,.18)}
.koltuklar i.dolu{background:var(--sari)}
.grupSag{display:flex;align-items:center;gap:8px}
.hiz{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;min-width:72px;text-align:right}
.hiz.asiyor{color:var(--kirmizi)}
.radar{font-size:11px;background:rgba(226,72,60,.2);border:1px solid rgba(226,72,60,.5);
  padding:2px 6px;border-radius:6px}
.radar.gizli{display:none}
.araclar{display:flex;gap:6px}
#ust button{background:#2c333e;border:1px solid var(--kenar);color:var(--kagit);border-radius:8px;
  padding:6px 9px;font-size:15px;cursor:pointer}
#ust button:hover{background:#39414e}

/* ——— saha ——— */
#saha{position:relative;flex:1;min-height:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.durakSatir{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  background:rgba(20,25,34,.66);border:1px solid var(--kenar);border-radius:10px;padding:5px 12px;
  font-size:12.5px;backdrop-filter:blur(2px);white-space:nowrap;max-width:94%;overflow:hidden}
.durakSatir .etiket{font-size:9px;letter-spacing:1.4px;opacity:.5;text-transform:uppercase}
.durakSatir b{color:var(--sari)}
.durakSatir .mesafe{font-variant-numeric:tabular-nums;opacity:.85}
.durakSatir .is{opacity:.7}
.durakSatir .talep{font-size:11px;font-weight:700}
.durakSatir .talep.uygun{color:var(--yesil)}
.durakSatir .talep.bekle{color:var(--sari)}
.durakSatir .frenBilgi{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.durakSatir .frenBilgi.var{color:var(--yesil)}
.durakSatir .frenBilgi.yakin{color:var(--sari)}
.durakSatir .frenBilgi.gec{color:var(--kirmizi);animation:yanip .5s ease-in-out infinite}
.durakSatir .kapiDurum{font-size:10px;letter-spacing:1px;opacity:.5;text-transform:uppercase}
.durakSatir .kapiDurum.acik{color:var(--yesil);opacity:1}
.durakSatir.yakin{border-color:rgba(127,224,168,.6);background:rgba(30,54,44,.7)}
.hasarKutu{position:absolute;right:10px;bottom:10px;width:90px;height:6px;background:rgba(255,255,255,.12);
  border-radius:4px;overflow:hidden}
.hasarKutu i{display:block;height:100%;width:0%;background:var(--kirmizi);transition:width .2s}
.duyuru{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:clamp(18px,4vw,38px);
  font-weight:800;letter-spacing:1px;text-shadow:0 3px 0 rgba(0,0,0,.5);pointer-events:none;
  opacity:0;transition:opacity .18s;text-align:center;white-space:pre-line}
.duyuru.gor{opacity:1}
.ipucu{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:12px;opacity:0;
  background:rgba(20,25,34,.85);padding:5px 12px;border-radius:20px;transition:opacity .25s;pointer-events:none;
  border:1px solid var(--kenar);max-width:88%;text-align:center}
.ipucu.gor{opacity:.96}

/* ——— dokunmatik ——— */
#dokunmatik{position:absolute;inset:0;pointer-events:none}
#dokunmatik.gizli{display:none}
.solTuslar{position:absolute;left:3%;bottom:6%;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.ortaTuslar{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:auto}
.sagTuslar{position:absolute;right:3%;bottom:6%;display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.dokunTus{border-radius:50%;border:2px solid rgba(244,241,232,.32);color:var(--kagit);font-weight:800;
  letter-spacing:.5px;background:rgba(40,48,60,.62);cursor:pointer;font-size:14px}
.dokunTus.yon{width:58px;height:58px;font-size:18px}
.dokunTus.gaz{width:84px;height:84px;background:rgba(127,224,168,.38)}
.dokunTus.fren{width:74px;height:74px;background:rgba(226,72,60,.38)}
.dokunTus.kapi{width:68px;height:68px;background:rgba(232,195,74,.38);font-size:12px}
.dokunTus.korna{width:48px;height:48px;font-size:16px}
.dokunTus.ustu{width:64px;height:64px;font-size:10px;background:rgba(232,195,74,.44);line-height:1.1}
.dokunTus.geri{width:54px;height:54px;font-size:11px;background:rgba(143,212,232,.34)}
.dokunTus:active{transform:scale(.94)}

/* ——— ekranlar ——— */
.tamEkran{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 50% 28%,rgba(52,76,108,.96),rgba(14,18,24,.98));z-index:20;overflow:auto}
.tamEkran.gizli{display:none}
.giris,.pano,.kutu{background:linear-gradient(#28313d,#1c2229);border:1px solid var(--kenar);border-radius:16px;
  padding:22px;max-width:700px;width:100%;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.logo{font-size:52px;line-height:1}
h1{margin:6px 0 0;font-size:clamp(28px,7vw,46px);letter-spacing:4px}
.altBaslik{margin:2px 0 12px;opacity:.66;letter-spacing:2px;font-size:13px}
.vaat{font-size:13.5px;line-height:1.55;opacity:.9;margin:0 auto 16px;max-width:580px}
.butonlar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
button.birincil,button.ikincil,button.hayalet{border-radius:10px;padding:11px 16px;font-size:14px;font-weight:700;
  cursor:pointer;border:1px solid var(--kenar);color:var(--kagit)}
button.birincil{background:linear-gradient(#3f8fd6,#2b62a0);border-color:#5ba0e8}
button.ikincil{background:#2e3742}
button.ikincil.secili{background:#3c5a3f;border-color:var(--yesil)}
button.hayalet{background:transparent;opacity:.75}
button:hover{filter:brightness(1.12)}
h2{margin:0 0 8px;font-size:20px;letter-spacing:1px}
h3{margin:0 0 10px;font-size:18px}
.anlat{font-size:13px;line-height:1.55;margin:4px 0}
.anlat.kucuk{font-size:12px;opacity:.75}
.not{font-size:12px;opacity:.7;line-height:1.5;margin:8px 0}
.odul{font-size:12.5px;color:var(--yesil);margin-top:8px}
.kucuk{font-size:11px;opacity:.65}
ul.kural{text-align:left;font-size:12.5px;line-height:1.55;margin:8px 0 0;padding-left:18px;opacity:.9}
ul.kural li{margin-bottom:5px}

/* ——— tarife kartı ——— */
.tarifeOzet{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:12px;
  background:rgba(0,0,0,.2);border-radius:10px;padding:8px 10px;margin:10px 0}
.tarifeOzet b{color:var(--sari)}
.tarifeOzet .uyari{color:var(--turuncu)}
.tarifeSar{max-height:34vh;overflow:auto;border:1px solid var(--kenar);border-radius:10px}
table.tarife{width:100%;border-collapse:collapse;font-size:11.5px}
table.tarife th{position:sticky;top:0;background:#232b35;text-align:left;padding:5px 8px;font-size:9.5px;
  letter-spacing:1px;text-transform:uppercase;opacity:.7}
table.tarife td{padding:4px 8px;border-top:1px solid rgba(244,241,232,.07);text-align:left}
table.tarife .dk{font-weight:700;white-space:nowrap}
table.tarife .mt{opacity:.55;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tarife .in{color:var(--gok);white-space:nowrap}
table.hesap{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
table.hesap td{padding:4px 6px;border-top:1px solid rgba(244,241,232,.08);text-align:left}
table.hesap td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
table.hesap .ceza{color:var(--kirmizi)}
table.hesap tr.net td{border-top:2px solid rgba(244,241,232,.2);font-size:15px}

.secimIzgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.kart{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#2b333f;border:1px solid var(--kenar);
  border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--kagit);text-align:left}
.kart b{font-size:12.5px}
.kart small{font-size:10px;opacity:.6}
.kart.secili{border-color:var(--sari);background:#38424f}
.kart.kilit{opacity:.45;cursor:not-allowed}
.merdiven{display:flex;gap:4px;justify-content:center;margin:14px 0 4px;flex-wrap:wrap}
.basamak{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;opacity:.4;min-width:56px}
.basamak b{width:22px;height:22px;border-radius:50%;background:#2b333f;display:grid;place-items:center;font-size:11px;
  border:1px solid var(--kenar)}
.basamak.gecti{opacity:.75} .basamak.gecti b{background:var(--yesil);color:#12301f;border-color:var(--yesil)}
.basamak.simdi{opacity:1} .basamak.simdi b{background:var(--sari);color:#3a2c00;border-color:var(--sari)}
.ilerleme{font-size:11.5px;opacity:.6;margin-top:14px}

/* ——— küçük ekran ——— */
@media (max-width:820px){
  .grupOrta{gap:9px}
  .oge{font-size:12px}
  .seferAd{max-width:16vw}
  .hiz{min-width:60px;font-size:12px}
  .durakSatir{font-size:11px;gap:6px;padding:4px 9px}
}
@media (max-height:440px){
  .durakSatir{top:4px;padding:3px 8px}
  .dokunTus.gaz{width:70px;height:70px}
  .dokunTus.fren{width:62px;height:62px}
}

/* ————— v0.4: ses kaydırıcısı, döküm ve rekor tabloları ————— */
.sesSatir { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.sesSatir label { font-size: 13px; opacity: .85; white-space: nowrap; }
.sesSatir input[type=range] { flex: 1; accent-color: #e8c34a; }
.sesSatir #sesDeger { font-variant-numeric: tabular-nums; font-size: 13px; opacity: .8; min-width: 48px; text-align: right; }
.ufakSatir { display: flex; gap: 8px; flex-basis: 100%; justify-content: center; }
.ufakSatir button { min-width: 130px; }
table.dokum { margin-top: 8px; }
table.dokum th { text-align: left; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; padding-bottom: 4px; }
table.dokum td:nth-child(2), table.dokum td:nth-child(3) { text-align: right;
  font-variant-numeric: tabular-nums; }
table.dokum td.iyi { color: #7fe0a8; }
table.dokum tr.kilitli { opacity: .45; }

/* ————— trafik ışığı göstergesi ————— */
.isikBilgi { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  white-space: nowrap; }
.isikBilgi.yesil { background: #1e4030; color: #7fe0a8; }
.isikBilgi.sari { background: #45391a; color: #e8c34a; }
.isikBilgi.kirmizi { background: #4a1f1c; color: #ff9d92; }

/* ————— motor uyarısı ————— */
.motorUyari { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: #4a3a12; color: #ffd47a; white-space: nowrap;
  animation: motorYanip .5s steps(2, end) infinite; }
@keyframes motorYanip { 50% { opacity: .45; } }

/* ————— sinyal düğmesi ve göstergesi ————— */
.dokunTus.sinyal { background: rgba(232,195,74,.22); border-color: #e8c34a; font-size: 12px; }
.sinyalGosterge { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: #45391a; color: #e8c34a; white-space: nowrap; }
.acilUyari { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: #4a1f1c; color: #ff9d92; white-space: nowrap;
  animation: motorYanip .4s steps(2, end) infinite; }
.gecitUyari { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: #45391a; color: #ffd47a; white-space: nowrap; }

/* ————— B grubu: mazot, ayakta yolcu, muavin anonsu ————— */
.mazotKutu { position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 6px; background: #232a33; overflow: hidden; }
.mazotKutu i { position: absolute; left: 0; top: 0; bottom: 0; width: 60%;
  background: linear-gradient(#3f7f5f, #2b5f45); opacity: .45; }
.mazotKutu b { position: relative; font-size: 12px; font-variant-numeric: tabular-nums; }
.mazot.az { color: #e8c34a; }
.mazot.bitti { color: #ff9d92; }
.ayaktaGosterge { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: #2e3742; color: #cfd6df; white-space: nowrap; }
.anons { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
  background: rgba(20,26,34,.86); color: #e8d9bf; padding: 5px 14px; border-radius: 14px;
  font-size: 14px; font-style: italic; border: 1px solid #3a4450; white-space: nowrap;
  pointer-events: none; }
.mazotCubuk { height: 12px; border-radius: 6px; background: #232a33; overflow: hidden; margin: 8px 0; }
.mazotCubuk i { display: block; height: 100%; background: linear-gradient(90deg, #3f7f5f, #5fd08a); }