:root{
  --zemin:#0b0d12; --kart:#151922; --kart2:#1d2230; --cizgi:#2a3142;
  --yazi:#eef1f6; --silik:#8b93a7; --vurgu:#e8c35a; --vurgu2:#3fd0c9;
  --kirmizi:#ff6b6b; --yesil:#4ade80; --turuncu:#ffb020;
  --ust:env(safe-area-inset-top); --alt:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--zemin);color:var(--yazi);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
body{padding-top:calc(56px + var(--ust));padding-bottom:calc(76px + var(--alt))}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--vurgu2)}

#ust{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(56px + var(--ust));padding:var(--ust) 8px 0;
  display:flex;align-items:center;gap:6px;background:rgba(11,13,18,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cizgi)}
#ust h1{flex:1;margin:0 6px;font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ust-sag{display:flex;gap:6px}
.ust-dugme{background:none;border:0;font-size:30px;line-height:1;padding:4px 10px;color:var(--vurgu)}
.ust-yazi{background:none;border:0;color:var(--vurgu);font-weight:600;padding:8px 10px;font-size:16px}

#icerik{padding:14px 14px 30px;max-width:720px;margin:0 auto}

#sekmeler{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;padding-bottom:var(--alt);
  background:rgba(11,13,18,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--cizgi)}
#sekmeler button{flex:1;background:none;border:0;padding:8px 0 10px;font-size:11px;color:var(--silik);display:flex;flex-direction:column;align-items:center;gap:2px}
#sekmeler button span{font-size:21px;line-height:1.1}
#sekmeler button.aktif{color:var(--vurgu)}

#ekle{position:fixed;right:18px;bottom:calc(88px + var(--alt));z-index:21;width:58px;height:58px;border-radius:50%;border:0;
  background:var(--vurgu);color:#1a1405;font-size:34px;line-height:1;box-shadow:0 8px 24px rgba(232,195,90,.35)}

.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:16px;padding:14px;margin-bottom:12px}
.kart h3{margin:0 0 10px;font-size:15px;color:var(--silik);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ozet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ozet{background:var(--kart);border:1px solid var(--cizgi);border-radius:16px;padding:12px 14px}
.ozet small{display:block;color:var(--silik);font-size:12px}
.ozet b{display:block;font-size:21px;margin-top:4px}
.ozet.alacak b{color:var(--turuncu)}

.liste{display:flex;flex-direction:column;gap:8px}
.satir{display:flex;align-items:center;gap:12px;background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;padding:12px;text-align:left;width:100%}
.kart .satir{background:var(--kart2)}
.satir .orta{flex:1;min-width:0}
.satir .orta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.satir .orta small{display:block;color:var(--silik);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.satir .sag{text-align:right;white-space:nowrap}
.satir .sag small{display:block;font-size:12px;color:var(--silik)}
.plaka{display:inline-block;background:#fff;color:#111;font-weight:800;font-size:13px;letter-spacing:.04em;border-radius:5px;padding:3px 7px;border-left:6px solid #1e4fd8;white-space:nowrap}
.etiket{display:inline-block;font-size:12px;padding:2px 8px;border-radius:20px;background:var(--kart2);color:var(--silik);border:1px solid var(--cizgi)}
.etiket.randevu{color:var(--vurgu2);border-color:rgba(63,208,201,.4)}
.etiket.islemde{color:var(--turuncu);border-color:rgba(255,176,32,.4)}
.etiket.teslim{color:var(--yesil);border-color:rgba(74,222,128,.4)}
.etiket.borc{color:var(--turuncu);border-color:rgba(255,176,32,.4)}
.bos{color:var(--silik);text-align:center;padding:26px 10px}

.ara{width:100%;margin-bottom:10px}
.cipler{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cip{background:var(--kart);border:1px solid var(--cizgi);border-radius:20px;padding:7px 13px;font-size:14px;color:var(--silik)}
.cip.secili{background:var(--vurgu);color:#1a1405;border-color:var(--vurgu);font-weight:600}

label{display:block;font-size:13px;color:var(--silik);margin:12px 0 5px}
input,select,textarea{width:100%;font-size:16px;color:var(--yazi);background:var(--kart2);border:1px solid var(--cizgi);border-radius:11px;padding:11px 12px;outline:none;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--vurgu)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--silik) 50%),linear-gradient(135deg,var(--silik) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
textarea{min-height:80px;resize:vertical}
input[type=date]{min-height:45px}
.iki{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.iki label{margin-top:12px}
.not-yazi{font-size:13px;color:var(--silik);margin:6px 0 0}

.dugme{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:12px 16px;font-weight:600;background:var(--kart2);border:1px solid var(--cizgi);text-decoration:none;color:var(--yazi)}
.dugme.ana{background:var(--vurgu);color:#1a1405;border-color:var(--vurgu)}
.dugme.tehlike{color:var(--kirmizi);border-color:rgba(255,107,107,.35);background:transparent}
.dugme.tam{width:100%}
.dugme.kucuk{padding:7px 11px;font-size:14px;border-radius:10px}
.dugme-sira{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dugme-sira .dugme{flex:1}

.oneri{margin-top:4px;background:var(--kart2);border:1px solid var(--cizgi);border-radius:11px;overflow:hidden}
.oneri button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--cizgi);padding:10px 12px}
.oneri button:last-child{border-bottom:0}
.oneri small{color:var(--silik)}
.uyari{background:rgba(63,208,201,.08);border:1px solid rgba(63,208,201,.35);border-radius:12px;padding:10px 12px;margin-top:8px;font-size:14px}
.uyari.sari{background:rgba(232,195,90,.08);border-color:rgba(232,195,90,.4)}

/* araç şeması */
.sema{display:flex;justify-content:center;margin:6px 0}
.arac{width:100%;max-width:250px;height:auto;touch-action:manipulation}
.arac .govde{fill:#10141c;stroke:var(--cizgi);stroke-width:1.5}
.arac [data-b]{fill:#262d3d;stroke:#0b0d12;stroke-width:2;transition:fill .15s}
.arac.duzen [data-b]{cursor:pointer}
.arac [data-b].secili{fill:var(--vurgu2)}
.arac .cam{fill:#1a2333}
.arac .cam.secili{fill:#57e0d9}
.arac text{fill:var(--silik);font-size:11px;font-weight:600;text-anchor:middle;letter-spacing:.1em}

.bilgi{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.bilgi dt{color:var(--silik)}
.bilgi dd{margin:0;text-align:right}
.buyuk-fiyat{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.buyuk-fiyat b{font-size:24px}

.fotolar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fotolar img,.foto-ekle{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;background:var(--kart2)}
.foto-ekle{border:1px dashed var(--cizgi);display:flex;align-items:center;justify-content:center;color:var(--silik);font-size:13px;flex-direction:column;position:relative;overflow:hidden}
.foto-ekle input{position:absolute;inset:0;opacity:0}
.foto-ekle span{font-size:28px}
#foto-buyuk{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.96);display:flex;flex-direction:column;padding:calc(10px + var(--ust)) 10px calc(10px + var(--alt))}
#foto-buyuk img{flex:1;min-height:0;object-fit:contain;width:100%}
#foto-buyuk .dugme-sira{margin:10px 0 0}

#bildiri{position:fixed;left:50%;bottom:calc(150px + var(--alt));transform:translateX(-50%) translateY(20px);z-index:60;background:#fff;color:#111;padding:10px 16px;border-radius:12px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center}
#bildiri.goster{opacity:1;transform:translateX(-50%)}

.reklam{display:flex;gap:6px;align-items:center;justify-content:center;margin:22px auto 4px;text-decoration:none;color:var(--silik);font-size:12px;opacity:.8}
.reklam svg{width:16px;height:16px;flex:none}
.surum{color:var(--silik);font-size:12px;text-align:center;margin-top:8px}
.arac g[data-b]>*{fill:inherit}
[hidden]{display:none!important}

/* açılış ekranı */
#acilis{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 45%,#1a1d26 0%,#07080c 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity .5s ease .1s;user-select:none;-webkit-user-select:none}
.ac-isik{position:absolute;width:90vmin;height:90vmin;max-width:520px;max-height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,170,90,.35) 0%,rgba(212,170,90,0) 62%);
  animation:acIsik 2.6s ease-in-out .9s infinite;opacity:0}
.ac-kutu{position:relative;width:68vmin;height:68vmin;max-width:320px;max-height:320px;border-radius:50%;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(212,170,90,.25);
  animation:acGel 1s cubic-bezier(.2,1.4,.4,1) both}
.ac-kutu img{width:100%;height:100%;display:block}
.ac-kutu::after{content:"";position:absolute;inset:-20%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,240,200,.45) 50%,transparent 60%);
  transform:translateX(-120%);animation:acParilti 3.2s ease-in-out 1s infinite}
.ac-ipucu{position:absolute;bottom:calc(60px + var(--alt));margin:0;color:#c9a65e;font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;animation:acYazi .6s ease 1.3s forwards,acNabiz 1.8s ease-in-out 1.9s infinite}
#acilis.kapan{opacity:0;pointer-events:none}
#acilis.kapan .ac-kutu{animation:acGit .55s cubic-bezier(.5,0,.75,0) forwards}
#acilis.kapan .ac-ipucu,#acilis.kapan .ac-isik{animation:none;opacity:0;transition:opacity .2s}
@keyframes acGel{0%{transform:scale(.4) rotate(-25deg);opacity:0;filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{transform:scale(1) rotate(0)}}
@keyframes acGit{to{transform:scale(1.35);opacity:0;filter:blur(4px)}}
@keyframes acParilti{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@keyframes acIsik{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes acYazi{to{opacity:1}}
@keyframes acNabiz{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.ac-kutu,.ac-kutu::after,.ac-isik,.ac-ipucu{animation:none!important;opacity:1}}