/* Nar Depo — ortak stil.
   Kaynak: docs/prova/nar-depo-prova.html, "2 · Rubik" adayı (.telefon token bloğu + bileşenler).
   Telefon çerçevesi taşınmadı; provadaki .ekran burada body > main.
   CSP style-src 'self': satır içi style="" YOK, her değişken bir sınıf. */

:root{
  --zemin:#F6F7F9; --kutu:#FFFFFF; --yazi:#16202B; --soluk:#5F6E80; --cizgi:#E3E8EE;
  --mavi:#0F4CB5; --mavi-koyu:#0B3A8A; --mavi-acik:#E6EEFB; --lacivert:#16202B;
  --yesil:#1B7F3B; --yesil-koyu:#145F2C; --yesil-acik:#E5F3E9;
  --kirmizi:#C0262B; --kirmizi-acik:#FBEAEA;
  --sari:#F2B705; --sari-acik:#FFF4CC; --sari-koyu:#7A5A00;
  --wp:#1DA851;
  --r-kutu:22px; --r-dugme:22px; --r-dev:26px; --r-giris:18px;
  --golge-kutu:0 1px 2px rgba(22,32,43,.05),0 8px 24px rgba(22,32,43,.07);
  --golge-dugme:0 6px 16px rgba(11,58,138,.22);
  --govde:'Rubik',system-ui,sans-serif;
  --baslik:'Rubik',system-ui,sans-serif;
  --plaka:'Oswald','Arial Narrow',Impact,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--zemin);color:var(--yazi);font-family:var(--govde);line-height:normal;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font-family:inherit}
a{color:inherit}
img{max-width:100%}

/* ekran gövdesi (provada .ekran) */
body>main{flex:1 0 auto;width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;padding:18px 20px 22px;gap:16px;font-size:20px;min-width:0}
.gorunum{display:contents}

/* üst bant */
.ustbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;padding-top:calc(12px + env(safe-area-inset-top));flex:none;background:var(--lacivert);color:#fff}
.ustbar .marka{font:700 17px var(--baslik);letter-spacing:.12em;color:#fff;text-decoration:none}
.ustbar .cihaz{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--govde);border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.12);color:#fff}
.ustbar .cihaz i{width:8px;height:8px;border-radius:50%;background:#48D597;display:inline-block}

/* başlık satırı */
.bar{display:flex;align-items:center;gap:12px;min-height:44px}
.bar h2{font:700 24px/1.15 var(--baslik);margin:0;flex:1;text-wrap:balance}
.bar .adim{font-size:16px;color:var(--soluk);font-weight:600;white-space:nowrap}
.noktalar{display:flex;gap:6px;align-items:center}
.noktalar i{width:10px;height:10px;border-radius:50%;background:var(--cizgi);display:block}
.noktalar i.dolu{background:var(--mavi)}
.noktalar i.simdi{width:22px;border-radius:6px;background:var(--mavi)}
.geri{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--yazi);cursor:pointer;padding:0;flex:none;box-shadow:var(--golge-kutu)}
.geri svg{width:26px;height:26px}

/* düğmeler */
.dev{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:92px;border:0;border-radius:var(--r-dev);font:700 25px var(--baslik);color:#fff;cursor:pointer;width:100%;padding:12px 20px;letter-spacing:.01em;box-shadow:var(--golge-dugme);white-space:nowrap;text-decoration:none}
.dev>svg{display:none}
.dev .halka{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;flex:none}
.dev .halka svg{width:30px;height:30px}
.dev.yesil{background:var(--yesil);box-shadow:0 6px 16px rgba(27,127,59,.25)} .dev.yesil:active{background:var(--yesil-koyu)}
.dev.mavi{background:var(--lacivert);box-shadow:0 6px 16px rgba(22,32,43,.25)} .dev.mavi:active{background:#000}
.birincil{display:flex;align-items:center;justify-content:center;gap:10px;min-height:68px;border:0;border-radius:var(--r-dugme);font:700 23px var(--baslik);color:#fff;background:var(--mavi);cursor:pointer;width:100%;padding:10px 16px;box-shadow:var(--golge-dugme);text-decoration:none;text-align:center}
.birincil svg{width:28px;height:28px;flex:none}
.birincil.yesil{background:var(--yesil);box-shadow:0 6px 16px rgba(27,127,59,.25)}
.birincil.wp{background:var(--wp);box-shadow:0 6px 16px rgba(29,168,81,.25)}
.birincil.kirmizi{background:var(--kirmizi);box-shadow:0 6px 16px rgba(192,38,43,.22)}
.ikincil{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;border:0;border-radius:var(--r-dugme);font:600 21px var(--govde);color:var(--yazi);background:#fff;cursor:pointer;width:100%;padding:10px 16px;box-shadow:var(--golge-kutu);text-decoration:none;text-align:center}
.ikincil svg{width:26px;height:26px;flex:none}
.ikincil.wp-yazi{color:var(--wp)}
.sade{background:none;border:0;color:var(--soluk);font:600 17px var(--govde);text-decoration:underline;cursor:pointer;min-height:48px;padding:8px;display:inline-flex;align-items:center;justify-content:center}
button:disabled{opacity:.55;cursor:default}
.alt{margin-top:auto;display:flex;flex-direction:column;gap:10px;position:sticky;bottom:0;z-index:2;margin-inline:-20px;margin-bottom:-22px;padding:10px 20px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--zemin) 14px)}
/* çok düğmeli kart/model sayfası: düğmeler içerikle birlikte kayar, yapışmaz */
.alt.akar{position:static;margin-top:18px;margin-bottom:0;padding-bottom:0;background:none}

/* kutu, giriş */
.kutu{background:var(--kutu);border:0;border-radius:var(--r-kutu);padding:14px 16px;box-shadow:var(--golge-kutu)}
.etiket{font-size:15px;color:var(--soluk);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px}
label.etiket{display:block}
.giris{width:100%;min-width:0;min-height:64px;font:600 24px var(--govde);padding:10px 14px;border:0;box-shadow:inset 0 0 0 1.5px var(--cizgi);border-radius:var(--r-giris);background:#fff;color:var(--yazi);-webkit-appearance:none;appearance:none}
.giris:focus{outline:3px solid var(--mavi);outline-offset:1px}
.giris:disabled{background:#EEF1F5;color:var(--soluk)}
.giris.plaka{font:700 32px var(--plaka);text-transform:uppercase;letter-spacing:.08em;text-align:center}
textarea.giris{font:400 18px/1.4 var(--govde);min-height:150px;resize:vertical;padding:12px 14px}
.yanyana{display:flex;gap:8px}
.yanyana .giris{flex:1 1 0}
.yanyana .giris:first-child{flex-grow:1.2}
.arama{display:flex;gap:8px;align-items:center}
.arama .giris{flex:1}
.arama button{width:64px;height:64px;flex:none;border-radius:var(--r-giris);border:0;background:var(--lacivert);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.arama button svg{width:28px;height:28px}

/* metin kutuları */
.ipucu{font-size:17px;color:var(--soluk);margin:0}
.ipucu.orta{text-align:center}
.ipucu.buyuk{font-size:19px}
.ipucu.ust{margin-top:8px}
.uyari{background:var(--kirmizi-acik);color:var(--kirmizi);border-radius:14px;padding:12px 14px;font-weight:600;font-size:18px}
.bilgi{background:var(--yesil-acik);color:var(--yesil-koyu);border-radius:14px;padding:12px 14px;font-weight:600;font-size:18px}
.dikkat{background:var(--sari-acik);color:var(--sari-koyu);border-radius:14px;padding:12px 14px;font-weight:600;font-size:18px;border:1px solid #EAD27A}
.ikon-k{width:22px;height:22px;vertical-align:-4px;margin-right:6px}

/* liste */
.liste{display:flex;flex-direction:column;gap:10px}
.satir{display:flex;align-items:center;gap:12px;background:#fff;border:0;border-radius:var(--r-kutu);padding:12px 16px;cursor:pointer;min-height:76px;text-align:left;width:100%;color:var(--yazi);font-family:var(--govde);box-shadow:var(--golge-kutu);text-decoration:none}
.satir:active{background:var(--mavi-acik)}
.satir.gecen{background:#FFFDF3;box-shadow:var(--golge-kutu),inset 4px 0 0 var(--sari)}
.liste .satir{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center}
.liste .mini{grid-row:1/3;grid-column:1}
.liste .plk{grid-row:1;grid-column:2;justify-self:start}
.liste .no{grid-row:1;grid-column:3}
.liste .meta{grid-row:2;grid-column:2/4}
.satir .mini{width:48px;height:48px;border-radius:50%;flex:none;display:block;object-fit:cover;background:#2A3340}
.plk{position:relative;font:700 21px var(--plaka);letter-spacing:.05em;background:#fff;border:2px solid #16202B;border-radius:6px;padding:4px 8px 4px 24px;white-space:nowrap;line-height:1.1;flex:none;color:#16202B}
.plk::before{content:'TR';position:absolute;left:0;top:0;bottom:0;width:17px;background:var(--mavi);color:#fff;font:700 8px/1 var(--govde);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;letter-spacing:0}
.satir .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.satir .ad{display:block;font-weight:600;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.satir .tar{display:flex;align-items:center;gap:6px;color:var(--soluk);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.satir .tar svg{width:16px;height:16px;flex:none;display:block}
.satir .no{font:700 16px var(--plaka);color:var(--soluk);letter-spacing:.04em;flex:none}
.rozet{display:inline-block;background:var(--sari);color:#3A2B00;font:700 13px var(--govde);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:middle}
.sekme{display:flex;gap:4px;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--golge-kutu)}
.sekme button{flex:1;min-width:0;min-height:46px;border-radius:999px;border:0;background:transparent;font:600 16px var(--govde);color:var(--yazi);cursor:pointer;padding:4px 4px}
.sekme button[aria-pressed="true"]{background:var(--lacivert);color:#fff}
.sekme button.sari[aria-pressed="false"]{background:var(--sari-acik)}

/* seçim, sayaç */
.secim{display:flex;gap:8px;flex-wrap:wrap}
.secim button{flex:1;min-height:68px;border-radius:var(--r-giris);border:0;box-shadow:inset 0 0 0 1.5px var(--cizgi);background:#fff;font:700 20px var(--govde);color:var(--yazi);cursor:pointer;padding:6px;min-width:100px}
.secim button[aria-pressed="true"]{background:var(--mavi);color:#fff;box-shadow:var(--golge-dugme)}
.sayac{display:flex;align-items:center;gap:10px}
.sayac button{width:76px;height:76px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1.5px var(--cizgi);background:#fff;font:700 40px var(--govde);color:var(--yazi);cursor:pointer;line-height:1;flex:none;padding:0}
.sayac output{flex:1;text-align:center;font:700 52px var(--plaka)}

/* fotoğraflar */
.fotolar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fotolar a{display:block}
.fotolar img{width:100%;height:auto;aspect-ratio:1;border-radius:18px;background:#2A3340;display:block;object-fit:cover}
.fotolar .bos{aspect-ratio:1;border:2px dashed var(--cizgi);border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--soluk);font-size:15px;text-align:center;padding:6px}

/* özet, numara, plaka */
.ozet{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;font-size:19px}
.ozet div span{display:block;color:var(--soluk);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ozet div{overflow-wrap:anywhere}
.ozet strong{font-weight:inherit}
.ozet .tel{display:inline-flex;font-size:18px;gap:6px;white-space:nowrap}
.ozet .tel svg{width:18px;height:18px}
.numara{text-align:center;font:700 96px/1 var(--plaka);letter-spacing:.06em;color:var(--mavi)}
.plaka-dev{position:relative;text-align:center;font:700 clamp(32px,11vw,54px)/1.1 var(--plaka);letter-spacing:.07em;background:#fff;border:3px solid #16202B;border-radius:10px;padding:8px 12px 8px 40px;white-space:nowrap;overflow:hidden;color:#16202B;box-shadow:var(--golge-kutu)}
.plaka-dev::before{content:'TR';position:absolute;left:0;top:0;bottom:0;width:30px;background:var(--mavi);color:#fff;font:700 12px/1 var(--govde);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;letter-spacing:0}
.plaka-dev.orta{font-size:40px}
.plaka-dev.kucuk{font-size:36px}
.durum{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;border-radius:999px;padding:8px 14px}
.durum svg{width:20px;height:20px;display:block;flex:none}
.durum.depoda{background:var(--yesil-acik);color:var(--yesil-koyu)}
.durum.teslim{background:var(--mavi-acik);color:var(--mavi-koyu)}
.durum.gecen{background:var(--sari-acik);color:var(--sari-koyu)}
.durum.arsiv{background:#ECEFF3;color:var(--soluk)}
.tel{display:flex;align-items:center;gap:10px;font-weight:600;font-size:21px;color:var(--mavi);text-decoration:none}
.tel svg{width:24px;height:24px;flex:none}

/* onay ekranları */
.onay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;flex:1;text-align:center}
.onay.sikis{flex:0 0 auto;gap:10px;padding:6px 0}
.onay.orta-bosluk{gap:12px}
.onay .soru{font:700 34px/1.2 var(--baslik);text-wrap:balance}
.onay .tik{width:120px;height:120px;border-radius:50%;background:var(--yesil);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(27,127,59,.25)}
.onay .tik svg{width:70px;height:70px}
.onay .tik.kucuk{width:84px;height:84px}
.onay .tik.kucuk svg{width:50px;height:50px}
.onay .plaka-dev{max-width:100%}

/* QR okutma */
.vizor{position:relative;aspect-ratio:3/4;max-height:420px;background:#0E1319;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#B8C4D3;font-size:18px;text-align:center;padding:16px}
.vizor video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vizor .yazi{position:relative}
.vizor .cerceve{position:absolute;inset:18% 14%;border:3px solid #fff;border-radius:14px;opacity:.9}
.vizor .cizgi{position:absolute;left:14%;right:14%;height:3px;background:#5DF28B;top:18%;animation:tara 1.2s linear infinite}
@keyframes tara{from{top:18%}to{top:82%}}
@media (prefers-reduced-motion:reduce){.vizor .cizgi{animation:none;top:50%}}

/* etiket (ekranda önizleme; baskı ölçüleri aşağıda @media print) */
.etiketler{display:flex;flex-direction:column;gap:16px;align-items:center}
.etk{background:#fff;color:#111;width:240px;aspect-ratio:2/3;border:1px solid #999;border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center;margin:0 auto;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.etk .qr{width:110px;height:110px;flex:none}
.etk .qr svg{width:100%;height:100%;display:block}
.etk .bilgiler{display:contents}
.etk .eno{font:700 30px/1 var(--plaka);letter-spacing:.06em}
.etk .eplk{font:700 29px/1.1 var(--plaka);letter-spacing:.06em;border:3px solid #111;border-left:14px solid #0F4CB5;border-radius:6px;padding:4px 8px;white-space:nowrap;max-width:100%;overflow:hidden}
.etk .ead{font:600 15px var(--govde);text-align:center}
.etk .etar{font:400 14px var(--govde);color:#333}
.etk .elas{font:600 14px var(--govde);color:#111;border-top:1px solid #ccc;padding-top:6px;width:100%;text-align:center}
.etk .efirma{font:700 11px var(--govde);letter-spacing:.05em;color:#444;margin-top:auto;text-align:center;white-space:nowrap}
.etiketler.a4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;width:100%}
.etiketler.a4 .etk{width:100%;aspect-ratio:105/74;padding:8px;display:grid;grid-template-columns:42% minmax(0,1fr);gap:6px;align-items:center}
.etiketler.a4 .etk .qr{width:100%;height:auto;aspect-ratio:1}
.etiketler.a4 .etk .bilgiler{display:flex;flex-direction:column;gap:3px;align-items:center;min-width:0}
.etiketler.a4 .etk .eno{font-size:20px}
.etiketler.a4 .etk .eplk{font-size:12px;letter-spacing:.03em;border-width:2px;border-left-width:7px;padding:2px 4px}
.etiketler.a4 .etk .ead,.etiketler.a4 .etk .elas,.etiketler.a4 .etk .etar{font-size:10px}
.etiketler.a4 .etk .efirma{font-size:7px;margin-top:2px;white-space:normal}

/* tezgah kuyruğu */
.kuyruk{display:flex;flex-direction:column;gap:10px}
.kuyruk .satir{cursor:default;flex-wrap:nowrap}
.kuyruk .satir:active{background:#fff}
.kuyruk .bas,.kuyruk .geri-al{width:auto;min-height:64px;font-size:20px;padding:8px 18px;flex:none}

/* toast */
.toast{position:fixed;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));max-width:680px;margin:0 auto;background:#16202B;color:#fff;border-radius:14px;padding:14px 16px;font-weight:600;font-size:17px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:50;font-family:var(--govde)}

/* WhatsApp önizleme */
.wp-ust{display:flex;align-items:center;gap:10px;background:#075E54;color:#fff;border-radius:16px;padding:12px 14px;font-weight:600;font-size:18px}
.wp-ust .avatar{width:40px;height:40px;border-radius:50%;background:#128C7E;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.wp-ust small{font-weight:400;opacity:.85}
.wp-zemin{background:#E5DDD5;border-radius:16px;padding:14px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px}
.balon{align-self:flex-end;background:#DCF8C6;color:#111;border-radius:12px 12px 2px 12px;padding:10px 12px;font-size:17px;line-height:1.4;max-width:92%;white-space:pre-line;box-shadow:0 1px 1px rgba(0,0,0,.1);overflow-wrap:anywhere}
.balon .saat{display:block;text-align:right;font-size:12px;color:#667;margin-top:4px}
.balon a{color:#0F4CB5;word-break:break-all}

/* müşteri sayfası */
.mus{background:#fff;border-radius:var(--r-kutu);padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--golge-kutu)}
.mus .firma{font:700 14px var(--govde);letter-spacing:.1em;color:var(--mavi);text-transform:uppercase}
.mus h3{font:700 28px/1.2 var(--baslik);margin:0}

/* daha önce (A3) */
.gecmis{display:flex;flex-direction:column;gap:8px}
.gecmis .satir{min-height:60px;padding:8px 12px}
.gecmis .plk{font-size:16px;border-width:1px;border-left:6px solid var(--mavi);padding-left:6px}
.gecmis .plk::before{display:none}

/* patron özeti (A6) */
.patron{display:none;align-items:center;gap:18px;background:var(--lacivert);color:#fff;border-radius:16px;padding:12px 18px;font-size:18px;font-weight:600}
.patron b{font:700 28px var(--plaka);letter-spacing:.03em;margin-right:6px}
.patron b.sari{color:#F2B705}
.patron .ayrac{opacity:.35}
.patron.hep{display:flex;flex-wrap:wrap}

.kayit-iki{display:contents}
.sutun{display:flex;flex-direction:column;gap:12px}
.alt-baglantilar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

@media (max-width:699px){
  .kuyruk .satir{flex-wrap:wrap;row-gap:8px}
  .kuyruk .satir .meta{order:3;flex-basis:100%}
  .kuyruk .bas,.kuyruk .geri-al{margin-left:auto}
  .patron.hep{gap:6px 14px}
  .patron.hep .ayrac{display:none}
}
@media (min-width:700px){
  body>main{padding:22px 26px;font-size:21px;max-width:1000px}
  .patron{display:flex}
  .ozet{grid-template-columns:repeat(3,1fr)}
  .fotolar{grid-template-columns:repeat(5,1fr)}
  .kayit-iki{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
  .alt{flex-direction:row;flex-wrap:wrap;margin-inline:-26px;padding-inline:26px}
  .alt>*{flex:1 1 40%}
}

/* yazdırma (sayfa boyutu: ortak/etiket-termal.css ya da ortak/etiket-a4.css) */
@media print{
  .ustbar,.alt,.bar,.ipucu,#deneme-uyari,.toast,.alt-baglantilar{display:none !important}
  body{background:#fff;min-height:0;display:block}
  body>main{padding:0;max-width:none;display:block}
  .etiketler{display:block}
  .etk{width:auto;height:141mm;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;break-after:page;page-break-after:always;break-inside:avoid;overflow:hidden}
  .etk:last-child{break-after:auto;page-break-after:auto}
  .etk .qr{width:52mm;height:52mm}
  .etk .eno{font-size:30pt}
  .etk .eplk{font-size:30pt}
  .etk .ead{font-size:15pt}
  .etk .etar{font-size:12pt}
  .etk .elas{font-size:13pt}
  .etk .efirma{font-size:9pt}
  .etiketler.a4{display:grid;grid-template-columns:105mm 105mm;grid-auto-rows:74mm;gap:0;width:210mm}
  .etiketler.a4 .etk{width:105mm;height:74mm;aspect-ratio:auto;padding:4mm;break-after:auto;page-break-after:auto;border:0;grid-template-columns:44% minmax(0,1fr);align-content:center}
  .etiketler.a4 .etk:nth-child(8n){break-after:page;page-break-after:always}
  .etiketler.a4 .etk .qr{width:100%;height:auto}
  .etiketler.a4 .etk .eno{font-size:16pt}
  .etiketler.a4 .etk .eplk{font-size:13pt}
  .etiketler.a4 .etk .ead,.etiketler.a4 .etk .etar,.etiketler.a4 .etk .elas{font-size:8.5pt}
  .etiketler.a4 .etk .efirma{font-size:6pt}
}

/* nar-lastik */
/* Şerit B ekleri: model satırı, ebat rozeti, fiyat kutusu, lastik/teknik çipleri. Kaynak: docs/prova/nar-lastik-prova.html.
   Yalnız bu blok Şerit B'nin; üstteki nar-depo kopyasına dokunulmaz. Satır içi style="" yok (CSP). */
:root{--turuncu:#C2410C;--turuncu-acik:#FDEBDD}
.sekme button{min-height:48px}
.giris.ebat{font:700 30px var(--plaka);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.giris.ebat::placeholder{font-size:24px;letter-spacing:.04em}
.giris.para{font:700 34px var(--plaka);text-align:right;letter-spacing:.03em}
.giris.kod{font:700 32px var(--plaka);letter-spacing:.1em;text-align:center}

/* model satırı (ana, modeller, lastik ekle 1) */
.liste .satir.model{grid-template-columns:48px minmax(0,1fr) auto}
.satir.model .ad{grid-row:1;grid-column:2}
.satir.model .tar{grid-row:2;grid-column:2}
.satir.model .sag{grid-row:1/3;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.satir .para{font:700 20px var(--plaka);letter-spacing:.02em;white-space:nowrap}
.satir .stok{font:600 14px var(--govde);color:var(--soluk);white-space:nowrap}
.satir .stok.az{color:var(--turuncu);font-weight:700}
.satir .stok.yok{color:var(--kirmizi);font-weight:700}
.satir.bos .mini,.satir.bos .ad,.satir.bos .para{opacity:.6}
.satir .mini.yok{background:#2A3340 radial-gradient(circle,#555 0 30%,#2A2A2A 31% 62%,#2A3340 63%)}

/* ebat */
.ebt{display:inline-block;font:700 16px/1.1 var(--plaka);letter-spacing:.05em;background:#fff;border:1.5px solid #16202B;border-radius:6px;padding:1px 6px;white-space:nowrap;color:#16202B}
.ebt.buyuk{font-size:21px;border-width:2px;padding:3px 9px}
.ebat-dev{text-align:center;font:700 clamp(34px,12vw,58px)/1.1 var(--plaka);letter-spacing:.06em;background:#fff;border:3px solid #16202B;border-radius:10px;padding:8px 12px;white-space:nowrap;overflow:hidden;color:#16202B;box-shadow:var(--golge-kutu)}
.ebat-dev.orta{font-size:clamp(30px,10vw,40px)}
.onay .ebat-dev{max-width:100%}
.model-ad{font-weight:700;font-size:24px;line-height:1.2;overflow-wrap:anywhere}

/* fiyat kutusu */
.fiyat{background:var(--lacivert);color:#fff;border-radius:var(--r-kutu);padding:16px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:0 6px 16px rgba(22,32,43,.25)}
.fiyat .buyuk{font:700 clamp(40px,13vw,60px)/1 var(--plaka);letter-spacing:.02em;white-space:nowrap}
.fiyat .buyuk small{font:600 20px var(--govde);opacity:.8;margin-left:6px;letter-spacing:0}
.fiyat .dort{font:600 18px var(--govde);opacity:.85}
.fiyat .notu{font:400 15px var(--govde);opacity:.75}

/* durum, teknik çipler, birim lastik satırı */
.durum.stokta{background:var(--yesil-acik);color:var(--yesil-koyu)}
.durum.satildi{background:var(--mavi-acik);color:var(--mavi-koyu)}
.teknik{display:flex;flex-wrap:wrap;gap:8px}
.teknik span{display:inline-flex;align-items:center;gap:6px;background:#fff;box-shadow:var(--golge-kutu);border-radius:999px;padding:7px 12px;font:600 16px var(--govde)}
.teknik svg{width:18px;height:18px;flex:none}
.birim{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:var(--golge-kutu);font-size:17px;min-height:56px;text-decoration:none;color:var(--yazi)}
.birim:active{background:var(--mavi-acik)}
.birim b{font:700 20px var(--plaka);letter-spacing:.05em}
.birim .sat{color:var(--soluk);font-size:15px;text-align:right}
.birim.stokta .sat{color:var(--yesil-koyu);font-weight:600}
.birim.arsiv{opacity:.65}

/* kod aralığı (Kaydedildi), DOT kutuları, fotoğraf çıkar */
.numara.aralik{font-size:clamp(44px,15vw,72px);white-space:nowrap}
.dot{display:flex;gap:8px;align-items:center}
.dot .giris{text-align:center;font:700 30px var(--plaka)}
.dot span{font:700 26px var(--plaka);color:var(--soluk)}
.foto-kutu{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.foto-kutu .sade{min-height:48px;padding:4px}
.dev.foto-cek{min-height:72px;font-size:21px}
.kutu .ikincil{margin-top:10px}
.cizgi-ust{border-top:1px solid var(--cizgi);padding-top:12px;margin-top:4px}
.kuyruk .satir .mini{width:48px;height:48px}
.kuyruk .satir .meta .ebt{margin-right:6px}
@media (min-width:700px){
  .ebat-dev.orta{font-size:44px}
}
.ozet .sade{display:flex;justify-content:flex-start;padding:4px 0;min-height:48px}
.secim.iki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.secim.iki button{min-width:0}
.foto-kutu{min-width:0}
.fotolar>*{min-width:0}

/* nar-lastik 1.1 (kullanım turu, 03.10) — alan hatası, TL eki, alt sayfa (sheet), çıkış, ana ekran A,
   özet satırı, etiket çubuğu, ayar "Kaydedildi", en az 16 px yazı, kesilmeyen liste satırı, üstte bildirim.
   Yeni sınıflar yalnız bu blokta; satır içi style="" yok (CSP). */
.alan-hata{margin:6px 0 0;color:var(--kirmizi);font:600 17px/1.3 var(--govde)}
.giris.hatali{box-shadow:inset 0 0 0 2.5px var(--kirmizi)}
.secim.hatali{border-radius:var(--r-giris);box-shadow:0 0 0 2.5px var(--kirmizi)}
.tl-kutu{position:relative}
.tl-kutu .giris.para{padding-right:3.2em}
.tl-ek{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 24px var(--plaka);color:var(--soluk);pointer-events:none}
.giris.ebat::placeholder,.giris.kod::placeholder{font:600 20px var(--govde);text-transform:none;letter-spacing:0}
.dot .giris::placeholder{font:600 18px var(--govde)}

/* üst bant: cihaz adı düğme (çıkış alt sayfası) */
.ustbar .cihaz{border:0;cursor:pointer;min-height:48px;padding:6px 12px;font:600 16px var(--govde)}
.dev.hatali{box-shadow:0 0 0 2.5px var(--kirmizi)}

/* alt sayfa (sheet) */
.perde{position:fixed;inset:0;z-index:60;background:rgba(22,32,43,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:720px;background:var(--zemin);border-radius:22px 22px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.sheet-baslik{margin:0 0 4px;font:700 22px/1.25 var(--baslik);text-align:center;text-wrap:balance}
.sheet-metin{margin:0;font-size:18px;color:var(--soluk);text-align:center}
.sheet button{flex-direction:column;gap:2px}
.sheet button small{font:500 16px/1.2 var(--govde);opacity:.85}

/* etiket: basıldı çubuğu · ayar: kalıcı "Kaydedildi" */
.etiket-cubuk{display:flex;flex-direction:column;gap:10px;background:var(--yesil-acik);color:var(--yesil-koyu);border-radius:14px;padding:12px 14px;font-weight:600;font-size:18px}
.kaydet-satir{display:flex;align-items:center;gap:14px}
.kaydet-satir .birincil{flex:1}
.kaydedildi{color:var(--yesil-koyu);font:700 18px var(--govde);white-space:nowrap}

/* F: en az 16 px; liste satırında ad ve yük/hız kesilmez (iki satıra iner); stok adedi 18 px kalın */
.etiket{font-size:16px}
.ozet div span{font-size:16px}
.rozet{font-size:16px}
.fotolar .bos{font-size:16px}
.fiyat .notu{font-size:16px}
.birim .sat{font-size:16px}
.satir .ad{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.satir .tar{font-size:16px;white-space:normal;flex-wrap:wrap;overflow:visible;text-overflow:clip}
.satir .stok{font:700 18px var(--govde)}

/* bildirim üstte: alttaki yapışkan düğmelerin (.alt) üstüne binmez */
.toast{top:calc(64px + env(safe-area-inset-top));bottom:auto}
@media print{.perde,.etiket-cubuk{display:none !important}}

/* Katman 1.1 T6: arama yer tutucusu gövde fontunda, 390 px'te sığar */
.arama .giris.ebat::placeholder{font:500 18px var(--govde);letter-spacing:0;text-transform:none}

/* Katman 1.2 ön: model listesi C (gruplu) — docs/prova/nar-lastik-liste-ab.html .vc* bloğu, gerçek sayfaya uyarlandı.
   Sayfa kendisi kayar (üst bant yapışkan değil): grup başlığı pencerenin üstüne (çentik payı) yapışır. Kartlar <a>. */
.vc{display:flex;flex-direction:column;gap:14px;min-width:0}
.vc-sekmeler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));box-shadow:inset 0 -2px 0 var(--cizgi)}
.vc-sekme{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:66px;padding:6px 2px 12px;border:0;background:none;font:600 16px var(--govde);color:var(--soluk);white-space:nowrap;cursor:pointer}
.vc-sekme svg{width:22px;height:22px;flex:none}
.vc-sekme.mev-hepsi svg{color:var(--soluk)}
.vc-sekme.mev-yaz svg{color:var(--sari-koyu)}
.vc-sekme.mev-kis svg{color:var(--mavi)}
.vc-sekme.mev-dort svg{color:var(--yesil)}
.vc-sekme[aria-pressed="true"]{color:var(--yazi);font-weight:700}
.vc-sekme[aria-pressed="true"].mev-hepsi svg{color:var(--yazi)}
.vc-sekme[aria-pressed="true"]::after{content:'';position:absolute;left:14%;right:14%;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--lacivert)}
.vc-sira{display:flex;gap:4px;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--golge-kutu)}
.vc-sira button{flex:1 1 0;min-width:0;min-height:48px;border-radius:999px;border:0;background:transparent;font:600 16px var(--govde);color:var(--yazi);padding:0 2px;white-space:nowrap;cursor:pointer}
.vc-sira button[aria-pressed="true"]{background:var(--lacivert);color:#fff}
.vc-grup{display:flex;flex-direction:column;gap:10px}
.vc-grup+.vc-grup{margin-top:6px}
.vc-grup-bas{position:sticky;top:0;top:env(safe-area-inset-top,0px);z-index:3;display:flex;align-items:center;gap:10px;width:calc(100% + 40px);min-height:62px;margin:0 -20px;padding:6px 20px;border:0;background:var(--zemin);color:var(--yazi);font-family:var(--govde);text-align:left;cursor:pointer}
.vc-grup-ikon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.vc-grup-ikon svg{width:20px;height:20px}
.g-yaz{background:var(--sari-acik);color:var(--sari-koyu)}
.g-kis{background:var(--mavi-acik);color:var(--mavi)}
.g-dort{background:var(--yesil-acik);color:var(--yesil-koyu)}
.g-yok{background:#E7EBF0;color:var(--soluk)}
.vc-grup-ad{font:700 17px var(--baslik);letter-spacing:.14em;white-space:nowrap}
.vc-cizgi{flex:1;min-width:12px;height:1.5px;background:var(--cizgi)}
.vc-grup-say{font:600 16px var(--govde);color:var(--soluk);white-space:nowrap}
.vc-ok{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--golge-kutu);display:flex;align-items:center;justify-content:center;flex:none}
.vc-ok svg{width:20px;height:20px;transition:transform .18s}
.vc-grup-bas[aria-expanded="false"] .vc-ok svg{transform:rotate(-90deg)}
.vc-grup-bas[aria-expanded="false"] .vc-grup-ad{color:var(--soluk)}
.vc-grup-govde{display:flex;flex-direction:column;gap:10px}
.vc-grup.yok .vc-grup-ad{color:var(--soluk)}
.vc-kart{--serit:var(--yesil);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:10px;align-items:baseline;width:100%;min-width:0;min-height:86px;padding:15px 16px 15px 22px;border:0;border-radius:18px;background:#fff;box-shadow:inset 6px 0 0 var(--serit),var(--golge-kutu);text-align:left;color:var(--yazi);font-family:var(--govde);text-decoration:none;cursor:pointer}
.vc-kart:active{background:var(--mavi-acik)}
.vc-kart.d-az{--serit:var(--turuncu)}
.vc-kart.d-yok{--serit:var(--kirmizi);background:#F1F3F6;box-shadow:inset 6px 0 0 var(--serit)}
.vc-kart.d-yok>*{opacity:.5}
.vc-ad{font:700 18px/1.25 var(--govde);overflow-wrap:anywhere}
.vc-ad span{font-weight:500;color:var(--soluk)}
.vc-fiyat{font:700 28px/1 var(--plaka);letter-spacing:.01em;white-space:nowrap;text-align:right}
.vc-fiyat small{font:600 16px var(--govde);color:var(--soluk);margin-left:5px;letter-spacing:0}
.vc-alt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-width:0}
.vc-ebt{font:700 21px/1.1 var(--plaka);letter-spacing:.05em;background:#fff;border:2px solid #16202B;border-radius:6px;padding:3px 9px;white-space:nowrap;color:#16202B}
.vc-endeks{font:500 16px var(--govde);color:var(--soluk);overflow-wrap:anywhere}
.vc-stok{font:700 16px var(--govde);white-space:nowrap;text-align:right;color:var(--yesil-koyu)}
.vc-kart.d-az .vc-stok{color:var(--turuncu)}
.vc-kart.d-yok .vc-stok{color:var(--kirmizi)}
.vc .dipnot{margin:2px 0 0;text-align:center;font-size:16px;color:var(--soluk)}
.vc .bos-durum{background:#fff;border-radius:var(--r-kutu);box-shadow:var(--golge-kutu);padding:22px 18px;display:flex;flex-direction:column;gap:14px;text-align:center}
.vc .bos-durum p{margin:0;font:600 19px/1.3 var(--govde)}
.vc .bos-durum small{display:block;margin-top:4px;font:500 16px var(--govde);color:var(--soluk)}
.vc .bos-durum .ikincil{font-size:19px;background:var(--zemin);box-shadow:inset 0 0 0 1.5px var(--cizgi)}
@media (min-width:700px){
  .vc-grup-bas{width:calc(100% + 52px);margin:0 -26px;padding:6px 26px}
  .vc-grup-govde{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (prefers-reduced-motion:reduce){.vc-ok svg{transition:none}}

/* Alt menü (Düzeltme 3, 03.10): gezinme ekranlarında altta sabit, açık bar. Telefon Ana · Okut · Modeller;
   Tezgah + Tezgah · Ayarlar. Seçili: lacivert + ikonun üstünde 3 px yuvarlak çizgi (dolu hap değil).
   Bar 64 px = 1 px çizgi + 63 px öğe satırı (+ güvenli alan). main altına bar kadar boşluk; yapışkan .alt barın ÜSTÜNDE durur. Baskıda gizli. */
.alt-menu{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--kutu);border-top:1px solid var(--cizgi);box-shadow:0 -6px 18px rgba(22,32,43,.06);padding-bottom:env(safe-area-inset-bottom)}
.alt-menu-ic{display:flex;max-width:1100px;height:63px;margin:0 auto;padding:0 4px}
.alt-menu a{flex:1 1 0;min-width:0;min-height:48px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 2px;color:var(--soluk);text-decoration:none;font:600 16px/1 var(--govde);white-space:nowrap}
.alt-menu a svg{width:24px;height:24px;flex:none;stroke-width:2}
.alt-menu a[aria-current="page"]{color:var(--lacivert)}
.alt-menu a[aria-current="page"] svg{stroke-width:2.5}
.alt-menu a[aria-current="page"]::before{content:'';position:absolute;top:0;left:50%;width:36px;height:3px;margin-left:-18px;border-radius:3px;background:var(--lacivert)}
.alt-menu a:active{background:var(--zemin)}
.alt-menu a:focus-visible{outline:3px solid var(--mavi);outline-offset:-3px;border-radius:12px}
.alt-menu .ayrac{flex:none;align-self:center;width:1px;height:32px;background:var(--cizgi)}
body.alt-menulu main{padding-bottom:calc(64px + env(safe-area-inset-bottom) + 16px)}
body.alt-menulu .alt{bottom:calc(64px + env(safe-area-inset-bottom));margin-bottom:-16px;padding-bottom:16px}
body.alt-menulu .alt.akar{margin-bottom:0;padding-bottom:0}
@media print{
  .alt-menu{display:none !important}
  body.alt-menulu main{padding-bottom:0}
}