/* YükBurda · telefon önce, kabin içi.
   Düzen: üstte ince başlık + yol şeridi (yüklenirken kamyon gider), ortada tek sütun kartlar, altta başparmakla ulaşılan 4'lü menü.
   Cesaret tek yerde: yeşil otoyol tabelaları. Kehribar yalnızca "yeni" ve "acil" içindir. */
:root{
  --zemin:#e8ebe9; --yuzey:#ffffff; --yuzey-2:#f2f4f3; --murekkep:#1d2427; --soluk:#5a666a; --cizgi:#d3d9d6;
  --otoyol:#0e6b48; --otoyol-2:#0b5a3c; --otoyol-y:#ffffff; --ikaz:#f0a00c; --ikaz-y:#7d4b00; --ikaz-bg:#fcefd3; --plaka:#1e4fa0;
  --ok:#2a7849; --ok-bg:#dcefe2; --tehlike:#a63e33; --golge:0 1px 0 #20272a0d, 0 12px 28px -20px #20272a55;
  --f:"Archivo","IBM Plex Sans Arabic","Arial Narrow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --egri:cubic-bezier(.2,.7,.2,1);
  --alt-menu:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --zemin:#121719; --yuzey:#1b2225; --yuzey-2:#222a2e; --murekkep:#e6ebe8; --soluk:#97a39f; --cizgi:#2f393d;
  --otoyol:#13805a; --otoyol-2:#17946a; --otoyol-y:#ffffff; --ikaz:#f5b035; --ikaz-y:#f6c770; --ikaz-bg:#392b11; --plaka:#3a6bc4;
  --ok:#8cd3a3; --ok-bg:#1b3a28; --tehlike:#ef9a8f; --golge:0 1px 0 #0007, 0 14px 30px -18px #000d; color-scheme:dark}}
:root[data-theme="dark"]{
  --zemin:#121719; --yuzey:#1b2225; --yuzey-2:#222a2e; --murekkep:#e6ebe8; --soluk:#97a39f; --cizgi:#2f393d;
  --otoyol:#13805a; --otoyol-2:#17946a; --otoyol-y:#ffffff; --ikaz:#f5b035; --ikaz-y:#f6c770; --ikaz-bg:#392b11; --plaka:#3a6bc4;
  --ok:#8cd3a3; --ok-bg:#1b3a28; --tehlike:#ef9a8f; --golge:0 1px 0 #0007, 0 14px 30px -18px #000d; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--murekkep);font:400 16px/1.5 var(--f);-webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--alt-menu) + env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--ikaz);outline-offset:2px;border-radius:8px}
svg{display:block}

/* ---- başlık ---- */
.ust{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--zemin) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 8px}
.ust-ic{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px}
.plaka{display:inline-flex;align-items:stretch;height:36px;background:#fff;color:#1a1f21;border:2px solid #1a1f21;border-radius:6px;text-decoration:none;overflow:hidden;flex:none}
.plaka-tr{display:flex;align-items:flex-end;justify-content:center;width:20px;background:var(--plaka);color:#fff;font:700 9px/1 var(--f);padding-bottom:4px}
.plaka-yazi{display:flex;align-items:center;padding:0 10px;font:800 20px/1 var(--f);font-variation-settings:"wdth" 72;letter-spacing:1.2px;white-space:nowrap}
.durum{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--soluk);margin-inline-start:auto;min-width:0}
.durum #durumYazi{white-space:nowrap}
@media (max-width:480px){.durum-zaman{display:none}}
.num,.oz b,.saat{unicode-bidi:isolate}
.lamba{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.durum.bad .lamba{background:var(--ikaz)}
.durum.flas .lamba::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ikaz);animation:lamba 1.1s var(--egri) 2}
@keyframes lamba{from{transform:scale(.4);opacity:1}to{transform:scale(1.9);opacity:0}}
.dil-btn{flex:none;height:34px;min-width:44px;border:1px solid var(--cizgi);background:var(--yuzey);border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;padding:0 8px}
.dil-menu{position:absolute;inset-inline-end:16px;top:calc(100% - 2px);background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;box-shadow:var(--golge);padding:6px;display:flex;flex-direction:column;min-width:160px;animation:belir .2s var(--egri)}
.dil-menu button{border:0;background:none;text-align:start;padding:10px 12px;border-radius:8px;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.dil-menu button[aria-current="true"]{background:var(--yuzey-2);font-weight:700}
.dil-menu button:hover{background:var(--yuzey-2)}

/* ---- yol şeridi: dorseli ve dorsesiz araçlar sürekli yolda gider, tekerler döner ---- */
.yol{position:relative;height:30px;max-width:760px;margin:2px auto 0;overflow:hidden;pointer-events:none}
.yol-cizgi{position:absolute;left:0;right:0;bottom:3px;height:2px;background:repeating-linear-gradient(90deg,var(--cizgi) 0 12px,transparent 12px 20px);animation:serit .8s linear infinite}
.yukleniyor .yol-cizgi{animation-duration:.35s}
.yol-arac{position:absolute;bottom:4px;left:-60px;color:var(--otoyol);animation:yolArac var(--sure,12s) linear var(--gec,0s) infinite}
.yol-arac.a1{color:var(--soluk)}
.yol-arac.a2{color:var(--murekkep);opacity:.7}
.yol-arac svg{display:block;width:100%;height:auto;overflow:visible}
.yol-govde{animation:zipla .42s ease-in-out infinite alternate}
.tk{transform-box:fill-box;transform-origin:center;animation:don .45s linear infinite}
@keyframes yolArac{from{left:-60px}to{left:100%}}
@keyframes yolArac-rtl{from{left:100%}to{left:-60px}}
@keyframes serit{to{background-position:-20px 0}}
@keyframes zipla{from{transform:translateY(0)}to{transform:translateY(-.9px)}}
@keyframes don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .yol-arac,.yol-govde,.tk,.yol-cizgi{animation:none}
  .yol-arac:nth-of-type(n+2){display:none}
  .yol-arac{left:calc(50% - 20px)}
}
[dir="rtl"] .yol-arac svg,[dir="rtl"] .ikon-arac svg,[dir="rtl"] .gecen-kamyon svg,[dir="rtl"] .park{transform:scaleX(-1)}
[dir="rtl"] .yol-arac{animation-name:yolArac-rtl}

/* ---- ana alan ---- */
main{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:6px 24px}
.gorunum{display:flex;flex-direction:column;gap:12px}
h1,h2{margin:0;line-height:1.15;text-wrap:balance}
.baslik{font-weight:800;font-size:28px;font-variation-settings:"wdth" 70;letter-spacing:-.2px}
.alt-baslik{margin:-4px 0 0;color:var(--soluk);font-size:15px;max-width:60ch}

/* güzergâh seçimi */
.rota{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:8px;align-items:end}
.alan{display:flex;flex-direction:column;gap:5px;min-width:0}
.alan>label,.etiket{font-size:13px;font-weight:600;color:var(--soluk)}
.alan input,.alan select,.alan textarea,.secim{width:100%;min-height:48px;border:1px solid var(--cizgi);background:var(--yuzey);border-radius:12px;padding:0 12px;font-size:16px;min-width:0}
.alan textarea{padding:10px 12px;min-height:96px;resize:vertical;line-height:1.45}
.rota select{min-height:54px;font-size:19px;font-weight:700;font-variation-settings:"wdth" 86}
.cevir{width:44px;height:54px;border:1px solid var(--cizgi);background:var(--yuzey);border-radius:12px;cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--egri)}
.cevir.don{transform:rotate(180deg)}
.cevir svg{width:20px;height:20px}
.rota.pasif{opacity:.45;pointer-events:none}

/* tür seçici */
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:12px;padding:3px;gap:3px}
.segment button{border:0;background:none;border-radius:9px;min-height:42px;font-weight:700;font-size:15px;color:var(--soluk);cursor:pointer;transition:background-color .2s,color .2s}
.segment button[aria-pressed="true"]{background:var(--yuzey);color:var(--murekkep);box-shadow:0 1px 3px #0002}

/* hızlı çipler (yatay kayar) */
.cipler{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;padding-block:2px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}
.cipler::-webkit-scrollbar{display:none}
.cip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--cizgi);background:var(--yuzey);border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.cip svg{width:22px;height:14px}
.cip[aria-pressed="true"]{background:var(--murekkep);border-color:var(--murekkep);color:var(--zemin)}
.cip.ozel[aria-pressed="true"]{background:var(--otoyol);border-color:var(--otoyol);color:#fff}

/* bağlam paneli (yakınımda / dönüş) */
.baglam{background:var(--yuzey);border:1px solid var(--otoyol);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;animation:ac .3s var(--egri)}
@keyframes ac{from{opacity:0;transform:translateY(-6px)}}
.baglam .satir2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.baglam p{margin:0;font-size:14px;color:var(--soluk)}
.arama{position:relative}
.arama input{padding-inline-start:40px}
.arama svg{position:absolute;inset-inline-start:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--soluk);pointer-events:none}

.sonuc{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px;font-size:14px;color:var(--soluk)}
.yeni-bar{position:sticky;top:76px;z-index:5;align-self:center;background:var(--ikaz);color:#2a1d00;border:0;border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;box-shadow:var(--golge);animation:belir .35s var(--egri)}
@keyframes belir{from{opacity:0;transform:translateY(-8px)}}
.kurulum{display:flex;align-items:center;gap:12px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;padding:10px 12px;font-size:14px}
.kurulum .ikon-arac{width:40px;color:var(--otoyol);flex:none}
.kurulum p{margin:0;flex:1}
.cevrimdisi{background:var(--ikaz-bg);color:var(--ikaz-y);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600}

/* ---- ilan kartı ---- */
.list{display:flex;flex-direction:column;gap:12px}
.kart{position:relative;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;view-transition-class:kart}
.kart.giris{animation:giris .45s var(--egri) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes giris{from{opacity:0;transform:translateY(14px)}}
.kart.yeni{animation:geldi 2.6s ease-out both}
.kart.yeni::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--ikaz);animation:isaret 2.6s ease-out both}
@keyframes geldi{0%{background:var(--ikaz-bg)}100%{background:var(--yuzey)}}
@keyframes isaret{0%,60%{opacity:1}100%{opacity:0}}
.kart.hedef{box-shadow:0 0 0 3px var(--ikaz)}
.gecen-kamyon{position:absolute;top:4px;left:-48px;width:40px;color:var(--ikaz);animation:gecen 1.5s cubic-bezier(.4,.1,.3,1) forwards;pointer-events:none}
@keyframes gecen{0%{left:-48px}100%{left:calc(100% + 8px)}}
[dir="rtl"] .gecen-kamyon{animation-name:gecenRtl}
@keyframes gecenRtl{0%{left:calc(100% + 8px)}100%{left:-48px}}
.kart-ust{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:13px;color:var(--soluk)}
.saat{font-weight:800;font-size:17px;color:var(--murekkep);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 82}
.etiket-k{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.etiket-k.acil{background:var(--ikaz-bg);color:var(--ikaz-y)}
.etiket-k.bos{background:var(--ok-bg);color:var(--ok)}
.etiket-k.km{background:var(--yuzey-2);color:var(--murekkep);border:1px solid var(--cizgi)}
.etiket-k.tam{background:var(--otoyol);color:#fff}
.signs{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sign{max-width:100%;display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:9px;background:var(--otoyol);color:var(--otoyol-y);border-radius:8px;padding:5px 12px;font-weight:700;font-size:22px;line-height:1.2;font-variation-settings:"wdth" 64;letter-spacing:.5px;box-shadow:inset 0 0 0 3px var(--otoyol),inset 0 0 0 4.5px #ffffffd9}
.sign .pt{display:inline-flex;align-items:baseline;gap:7px;min-width:0}
.sign .pl{font-weight:700;font-size:11px;line-height:1;font-variation-settings:"wdth" 90;border:1.5px solid #ffffffd9;border-radius:4px;padding:3px 4px 2px;letter-spacing:0;align-self:center;font-variant-numeric:tabular-nums}
.sign .yer{font-weight:500;font-size:15px;font-variation-settings:"wdth" 85;letter-spacing:0;opacity:.9}
.sign .ok{font-weight:400;opacity:.9}
[dir="rtl"] .sign .ok{transform:scaleX(-1)}
.sign.kucuk{font-size:18px;padding:3px 10px}
.rota-yok{font-size:13px;color:var(--soluk);border:1px dashed var(--cizgi);border-radius:8px;padding:3px 10px;align-self:flex-start}
.ozellik{display:flex;flex-wrap:wrap;gap:6px}
.oz{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--cizgi);border-radius:9px;padding:3px 9px;background:var(--yuzey-2);white-space:nowrap}
.oz svg{width:24px;height:15px;color:var(--soluk)}
.oz b{font-weight:700;font-variant-numeric:tabular-nums}
.oz.fiyat{background:var(--ok-bg);border-color:transparent;color:var(--ok);font-weight:700}
.msg{margin:0;font-size:16px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.msg.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.link{background:none;border:0;color:var(--otoyol);font-weight:600;cursor:pointer;padding:0;font-size:14px;align-self:flex-start}
:root[data-theme="dark"] .link{color:var(--ok)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .link{color:var(--ok)}}
.eylem{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--cizgi);background:var(--yuzey);border-radius:12px;padding:0 16px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;color:var(--murekkep);white-space:nowrap;transition:transform .1s,background-color .15s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn.ana{background:var(--otoyol);border-color:var(--otoyol);color:#fff}
.btn.ana .num{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.3px}
.btn.wa{background:#1fa855;border-color:#1fa855;color:#fff}
.btn.kare{width:48px;padding:0}
.btn.kucuk{min-height:38px;font-size:14px;padding:0 12px;border-radius:10px}
.btn[disabled]{opacity:.55;cursor:default}
.telefonlar{display:flex;flex-direction:column;gap:8px}
.kart-alt{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--soluk);align-items:center}

.bos{background:var(--yuzey);border:1px dashed var(--cizgi);border-radius:18px;padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bos h2{font-weight:800;font-size:22px;font-variation-settings:"wdth" 72}
.bos p{margin:0;color:var(--soluk)}
.park{width:220px;max-width:100%;height:auto;color:var(--soluk)}
.park-tabela{animation:tabela 2.4s ease-in-out infinite;transform-origin:180px 78px}
@keyframes tabela{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}

/* ---- navlun ---- */
.kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.medyan{font-weight:800;font-size:44px;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 75;letter-spacing:-.5px}
.aralik-cubuk{position:relative;height:30px;margin-top:4px}
.aralik-cubuk .hat{position:absolute;inset-inline:0;top:13px;height:4px;border-radius:4px;background:var(--yuzey-2)}
.aralik-cubuk .kutu-ic{position:absolute;top:8px;height:14px;border-radius:5px;background:color-mix(in srgb,var(--otoyol) 30%,var(--yuzey))}
.aralik-cubuk .orta{position:absolute;top:2px;width:4px;height:26px;border-radius:3px;background:var(--otoyol);transform:translateX(-50%)}
[dir="rtl"] .aralik-cubuk .orta{transform:translateX(50%)}
.aralik-etiket{display:flex;justify-content:space-between;font-size:12px;color:var(--soluk);font-variant-numeric:tabular-nums}
.sinif-tablo{width:100%;border-collapse:collapse;font-size:15px}
.sinif-tablo td{padding:9px 0;border-top:1px solid var(--cizgi)}
.sinif-tablo td:last-child{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.sinif-tablo td .k{display:inline-flex;align-items:center;gap:8px}
.sinif-tablo svg{width:26px;height:16px;color:var(--soluk)}
.sinif-tablo small{color:var(--soluk);font-weight:500}
.yon-liste{display:flex;flex-direction:column}
.yon-liste button{display:flex;justify-content:space-between;gap:12px;align-items:center;border:0;border-top:1px solid var(--cizgi);background:none;padding:12px 0;cursor:pointer;text-align:start;font-size:16px}
.yon-liste button b{font-variant-numeric:tabular-nums}
.not{font-size:13px;color:var(--soluk);margin:0}

/* ---- alarm ---- */
.izin{display:flex;gap:12px;align-items:center}
.zil{width:44px;height:44px;border-radius:50%;background:var(--yuzey-2);display:grid;place-items:center;flex:none;color:var(--otoyol)}
.zil svg{width:24px;height:24px}
.zil.cal svg{animation:cal 1s var(--egri) 2;transform-origin:50% 10%}
@keyframes cal{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
.alarm-satir{display:flex;align-items:center;gap:10px;border-top:1px solid var(--cizgi);padding-top:10px;view-transition-class:kart}
.alarm-satir .signs{flex:1;min-width:0}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.uyari{background:var(--ikaz-bg);color:var(--ikaz-y);border-radius:12px;padding:10px 12px;font-size:14px}
.basari{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:600}
.onay{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.onay input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--otoyol)}
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dipnot{font-size:12px;color:var(--soluk);text-align:center;margin:18px 0 0}
.ceviri-notu{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--soluk)}
/* Arka plan: soluk kamyon/tır deseni (maske + tema rengi; kartların arkasında, tıklamayı engellemez) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--otoyol);opacity:.07;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 26) scale(2.2)'%3E%3Crect x='1' y='4' width='19' height='10' rx='1'/%3E%3Cpath d='M21 14V7.5h4.6l4 4V14'/%3E%3Cpath d='M22.8 8.9h2.3l2 2h-4.3z'/%3E%3Cpath d='M20 14h11'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='11' cy='16' r='2'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(214 78) scale(2)'%3E%3Crect x='2' y='5' width='16' height='9' rx='1'/%3E%3Cpath d='M19 14V8h4.4l4 4v2'/%3E%3Cpath d='M20.7 9.4h2.2l2 2h-4.2z'/%3E%3Cpath d='M18 14h10'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='23' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(40 128) scale(2)'%3E%3Cpath d='M1 14V6q0-2 2-2h15q2 0 2 2v8z'/%3E%3Cpath d='M5 4.5v9M9.5 4.5v9M14 4.5v9'/%3E%3Cpath d='M21 14V7.5h4.6l4 4V14'/%3E%3Cpath d='M22.8 8.9h2.3l2 2h-4.3z'/%3E%3Cpath d='M20 14h11'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='11' cy='16' r='2'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(232 176) scale(2)'%3E%3Cpath d='M8 14V7.5h5.6l4 4V14'/%3E%3Cpath d='M10 8.9h2.8l2.4 2.1h-5.2z'/%3E%3Cpath d='M5 14h17'/%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3Ccircle cx='19' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(122 196) scale(1.7)'%3E%3Crect x='1' y='4' width='19' height='10' rx='1'/%3E%3Cpath d='M10.5 5.8v6.4M7.7 7.4l5.6 3.2M13.3 7.4l-5.6 3.2'/%3E%3Cpath d='M21 14V7.5h4.6l4 4V14'/%3E%3Cpath d='M22.8 8.9h2.3l2 2h-4.3z'/%3E%3Cpath d='M20 14h11'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='11' cy='16' r='2'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3C/g%3E%3Cpath d='M0 118h360' stroke-dasharray='10 9'/%3E%3Cpath d='M0 224h360' stroke-dasharray='10 9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 26) scale(2.2)'%3E%3Crect x='1' y='4' width='19' height='10' rx='1'/%3E%3Cpath d='M21 14V7.5h4.6l4 4V14'/%3E%3Cpath d='M22.8 8.9h2.3l2 2h-4.3z'/%3E%3Cpath d='M20 14h11'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='11' cy='16' r='2'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(214 78) scale(2)'%3E%3Crect x='2' y='5' width='16' height='9' rx='1'/%3E%3Cpath d='M19 14V8h4.4l4 4v2'/%3E%3Cpath d='M20.7 9.4h2.2l2 2h-4.2z'/%3E%3Cpath d='M18 14h10'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='23' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(40 128) scale(2)'%3E%3Cpath d='M1 14V6q0-2 2-2h15q2 0 2 2v8z'/%3E%3Cpath d='M5 4.5v9M9.5 4.5v9M14 4.5v9'/%3E%3Cpath d='M21 14V7.5h4.6l4 4V14'/%3E%3Cpath d='M22.8 8.9h2.3l2 2h-4.3z'/%3E%3Cpath d='M20 14h11'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='11' cy='16' r='2'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(232 176) scale(2)'%3E%3Cpath d='M8 14V7.5h5.6l4 4V14'/%3E%3Cpath d='M10 8.9h2.8l2.4 2.1h-5.2z'/%3E%3Cpath d='M5 14h17'/%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3Ccircle cx='19' cy='16' r='2'/%3E%3C/g%3E%3Cg transform='translate(122 196) scale(1.7)'%3E%3Crect x='1' y='4' width='19' height='10' rx='1'/%3E%3Cpath d='M10.5 5.8v6.4M7.7 7.4l5.6 3.2M13.3 7.4l-5.6 3.2'/%3E%3Cpath d='M21 14V7.5h4.6l4 4V14'/%3E%3Cpath d='M22.8 8.9h2.3l2 2h-4.3z'/%3E%3Cpath d='M20 14h11'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='11' cy='16' r='2'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3C/g%3E%3Cpath d='M0 118h360' stroke-dasharray='10 9'/%3E%3Cpath d='M0 224h360' stroke-dasharray='10 9'/%3E%3C/svg%3E");-webkit-mask-size:360px 240px;mask-size:360px 240px}
/* Hızlı filtre satırı yana kayar: fareyle sürüklenebilir, metin seçilmez */
.cipler{user-select:none;-webkit-user-select:none;cursor:grab}
.cipler.suruklenen{cursor:grabbing}
.cipler.suruklenen .cip{pointer-events:none}
/* Kategori balonları: satıra sığmayanlar alta dizilir (hiçbiri gizli kalmaz), balonlar süzülür, seçilen patlar, arkada baloncuklar yükselir */
.etiketler{flex-wrap:wrap;overflow:visible;cursor:auto;margin-inline:0;padding:10px 2px 12px;position:relative;isolation:isolate;gap:9px 8px;
  -webkit-mask-image:none;mask-image:none}
.etiketler .cip{position:relative;z-index:1;min-height:36px;font-size:13px;padding-inline:15px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent),0 4px 10px -6px color-mix(in srgb,#000 55%,transparent);
  animation:yuzme var(--s,4s) ease-in-out var(--g,0s) infinite alternate;transition:transform .2s var(--egri),background-color .2s,border-color .2s}
.etiketler .cip:hover{transform:scale(1.07);animation-play-state:paused}
.etiketler .cip:active{transform:scale(.94)}
.etiketler .cip[aria-pressed="true"]{animation:patla .5s var(--egri),yuzme var(--s,4s) ease-in-out var(--g,0s) infinite alternate}
.etiketler .cip[aria-pressed="true"]::after{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--otoyol);pointer-events:none;animation:halka .85s ease-out forwards}
.baloncuklar{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.baloncuklar span{position:absolute;bottom:-16px;border-radius:50%;background:color-mix(in srgb,var(--otoyol) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--otoyol) 34%,transparent);animation:kabar var(--s,6s) ease-in var(--g,0s) infinite}
@keyframes yuzme{from{translate:0 0}to{translate:0 -3px}}
@keyframes patla{0%{transform:scale(.86)}55%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes halka{from{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}
@keyframes kabar{0%{transform:translate(0,0) scale(.55);opacity:0}18%{opacity:1}100%{transform:translate(var(--x,6px),-120px) scale(1);opacity:0}}
@media (prefers-reduced-motion: reduce){.etiketler .cip,.etiketler .cip[aria-pressed="true"],.etiketler .cip[aria-pressed="true"]::after{animation:none}.baloncuklar{display:none}}
.etiketler .cip.daha{background:var(--otoyol);border-color:var(--otoyol);color:#fff}
.oz.etk{color:var(--otoyol)}
:root[data-theme="dark"] .oz.etk{color:var(--ok)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .oz.etk{color:var(--ok)}}
.dipnot a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- alt menü ---- */
.alt-menu{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--yuzey);border-top:1px solid var(--cizgi);padding-bottom:env(safe-area-inset-bottom,0px)}
.alt-menu-ic{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);height:var(--alt-menu)}
.alt-menu button{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:700;color:var(--soluk);cursor:pointer}
.alt-menu button svg{width:24px;height:24px;transition:transform .3s var(--egri)}
.alt-menu button[aria-current="page"]{color:var(--otoyol)}
:root[data-theme="dark"] .alt-menu button[aria-current="page"]{color:var(--ok)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .alt-menu button[aria-current="page"]{color:var(--ok)}}
.alt-menu button[aria-current="page"] svg{transform:translateY(-2px)}
.alt-menu button[aria-current="page"]::before{content:"";position:absolute;top:0;width:36px;height:3px;border-radius:0 0 3px 3px;background:currentColor;view-transition-name:menu-cizgi}
.alt-menu .rozet{position:absolute;top:8px;inset-inline-start:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--ikaz);color:#2a1d00;font-size:10px;line-height:16px;padding:0 4px}

.toast{position:fixed;left:50%;bottom:calc(var(--alt-menu) + 14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--murekkep);color:var(--zemin);padding:12px 18px;border-radius:12px;font-size:15px;font-weight:600;z-index:40;max-width:calc(100% - 32px);animation:toast .3s var(--egri)}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}}

/* ---- sayfa geçişleri ---- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
::view-transition-group(*.kart){animation-duration:.4s;animation-timing-function:var(--egri)}
::view-transition-new(*.kart):only-child{animation:vtGir .4s var(--egri) both}
::view-transition-old(*.kart):only-child{animation:vtCik .18s ease-in both}
@keyframes vtGir{from{opacity:0;transform:translateY(-10px) scale(.985)}}
@keyframes vtCik{to{opacity:0;transform:scale(.985)}}

@media (min-width:700px){
  .sign{font-size:25px}
  .eylem{grid-template-columns:auto auto auto;justify-content:start}
  .baslik{font-size:34px}
}
@media (max-width:380px){
  .plaka-yazi{font-size:17px;padding:0 8px}
  .sign{font-size:19px}
  .medyan{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}