/* ===========================================================================
   NOVUS SIGMA PORTAL — B2B bayi portalı ve mobil müşteri uygulaması
   Alkahest Partners · Kılıçlar Otomotiv / IVECO

   TASARIM DİLİ — "editoryal teknik"
   alkahest.com.tr'nin düzeninden alındı, IVECO paletine çevrildi. O sitenin
   iyi görünmesinin sebebi efekt bolluğu DEĞİL, şunlar:

     1. Her bölüm aynı üçlüyle başlar:  ÜST ETİKET → BAŞLIK → GİRİŞ CÜMLESİ
        Kullanıcı nerede olduğunu ve ne işe yaradığını okumadan önce görür.
     2. Kıl payı çizgiler (1px boşluklu ızgara) — kutu yerine ŞEBEKE hissi.
     3. Dar köşe yarıçapı (3-4px). Yuvarlak köşe "uygulama" der, dar köşe
        "belge" der; burada iş belgesi üretiliyor.
     4. Rakamlar tablo hizalı (tabular-nums) ve mono etiketli — sayılar alt
        alta geldiğinde kayması, ciddiyeti bozan ilk şeydir.
     5. Hareket ölçülü: yalnızca "görününce belirme", sayaç ve tek şerit.
        Her yerde animasyon, hiçbir yerde animasyon demektir.

   RENK MANTIĞI — iki vurgu ayrı iş yapar:
     turkuaz  = VERİ   (stok durumu, bakiye, ölçü)
     turuncu  = EYLEM  (sipariş ver, sepete ekle, ara)
   Tek renkte her şey aynı ağırlıkta görünüyor ve bayi "nereye basacağım"ı
   okuyarak buluyordu.

   Tek dosya iki uygulamayı besler; ortak bileşenler tekrarlanmaz.
   =========================================================================== */

:root{
  --p-navy-0:#060d16;      /* en derin katman */
  --p-navy:#0d1b2a;
  --p-navy-2:#152a41;
  --p-navy-3:#1e3a5f;
  --p-cyan:#00a8b5;        /* VERİ vurgusu (IVECO turkuazı) */
  --p-cyan-2:#00c4d4;
  --p-blue:#1b6ca8;
  --p-fire:#e07b12;        /* EYLEM vurgusu (Kılıçlar sıcak turuncusu) */
  --p-fire-2:#f59527;
  --p-fire-t:rgba(224,123,18,.10);
  --p-bg:#f2f5f8;
  --p-surface:#ffffff;
  --p-surface-2:#f7fafc;
  --p-line:#dde5ee;
  --p-line-2:#eaf0f6;
  --p-text:#121c28;
  --p-text-2:#33465c;
  --p-muted:#65788e;
  --p-faint:#93a4b8;
  --p-green:#0f8a4f;  --p-green-t:#e6f4ec;
  --p-amber:#c47d0d;  --p-amber-t:#fdf3e2;
  --p-red:#bd3b2c;    --p-red-t:#fbeae8;
  /* Dar yarıçaplar — belge hissi */
  --p-r:4px; --p-r-sm:3px; --p-r-lg:10px;
  --p-sh:0 1px 2px rgba(18,28,40,.04),0 8px 24px rgba(18,28,40,.06);
  --p-sh-lift:0 3px 8px rgba(18,28,40,.07),0 18px 44px rgba(18,28,40,.13);
  --p-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --p-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --p-ease:cubic-bezier(.22,.61,.36,1);
  /* İÇERİK GENİŞLİĞİ — SINIRSIZ.
     Sabit bir orta kolon (1280/1460px) yedi kolonlu katalog tablosunu
     sıkıştırıyor, geniş monitörde iki yanda boş duvar bırakıyordu. Artık
     tablo ve kartlar pencerenin tamamını kullanır; yalnızca kenar boşluğu
     kalır. Uzun DÜZ METİN buna dahil değildir: .b2b-hd ve kahraman metni
     kendi ch sınırlarını korur, çünkü 3000px genişliğinde bir paragraf
     satırı okunmaz — asıl genişlik isteyen VERİDİR, cümle değil. */
  --p-maxw:none;
  --p-kenar:22px;
}

/* OKUNABİLİRLİK ÖLÇEĞİ
   Bu portalı kullananların bir kısmı 50 yaş üstü ve ekranı kol mesafesinden
   okuyor. WCAG'in kendisi asgari punto dayatmaz ama yaş almış kullanıcı için
   yaygın öneri 16px taban, 18px rahat okuma. Önceki 14,5px taban ve 13,5px
   tablo yazısı bu eşiğin ALTINDAYDI: ekran "kalabalık" değil, okunmaz
   görünüyordu. Taban 16px'e, tablo 15,5px'e çıkarıldı. */

/* Hareket azaltma — tercih değil, erişilebilirlik gereği. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--p-sans);background:var(--p-bg);color:var(--p-text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:var(--p-blue);text-decoration:none;
  transition:color .18s var(--p-ease)}
a:hover{color:var(--p-cyan)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--p-cyan);outline-offset:3px;border-radius:2px}

/* ===========================================================================
   1 · ORTAK BİLEŞENLER
   =========================================================================== */

/* --- Üst etiket: her bölümün ilk satırı ------------------------------- */
.p-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:700;color:var(--p-cyan);margin-bottom:9px}
.p-eyebrow.fire{color:var(--p-fire)}

/* --- Bölüm başlığı: ÜST ETİKET → BAŞLIK → GİRİŞ ----------------------- */
.b2b-hd{max-width:74ch;margin-bottom:24px}
.b2b-hd h1{font-size:clamp(23px,2.7vw,32px);font-weight:700;
  letter-spacing:-.022em;line-height:1.14;color:var(--p-text)}
.b2b-hd h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;
  letter-spacing:-.018em}
.b2b-hd .sub{color:var(--p-muted);font-size:16px;margin-top:10px;
  max-width:74ch;line-height:1.62}

/* --- Düğme ------------------------------------------------------------ */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--p-cyan);color:#fff;border:1px solid transparent;
  border-radius:var(--p-r-sm);padding:12px 22px;
  font:600 15px/1 var(--p-sans);letter-spacing:.005em;cursor:pointer;
  transition:background .18s var(--p-ease),transform .1s var(--p-ease),
             box-shadow .18s var(--p-ease),border-color .18s var(--p-ease)}
.p-btn:hover{background:var(--p-cyan-2);color:#fff;
  box-shadow:0 5px 16px rgba(0,168,181,.26)}
.p-btn:active{transform:translateY(1px)}
.p-btn.fire{background:var(--p-fire)}
.p-btn.fire:hover{background:var(--p-fire-2);
  box-shadow:0 5px 18px rgba(224,123,18,.32)}
.p-btn.ghost{background:transparent;color:var(--p-cyan);
  border-color:var(--p-cyan);box-shadow:none}
.p-btn.ghost:hover{background:rgba(0,168,181,.09);
  box-shadow:0 4px 12px rgba(0,168,181,.12)}
.p-btn.dark{background:var(--p-navy);border-color:var(--p-navy)}
.p-btn.dark:hover{background:var(--p-navy-2);border-color:var(--p-navy-2);
  box-shadow:0 5px 16px rgba(13,27,42,.28)}
.p-btn.sm{padding:8px 14px;font-size:14px}
.p-btn.block{width:100%}
.p-btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
/* Koyu zemin üstündeki hayalet düğme */
.uzeri-koyu .p-btn.ghost{color:#dbe6f2;border-color:rgba(255,255,255,.34)}
.uzeri-koyu .p-btn.ghost:hover{background:rgba(255,255,255,.10);color:#fff;
  border-color:var(--p-cyan)}

/* --- Kart ------------------------------------------------------------- */
.p-card{background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r);box-shadow:var(--p-sh);
  transition:box-shadow .25s var(--p-ease)}
.p-card .hd{padding:13px 18px;border-bottom:1px solid var(--p-line-2);
  font-weight:600;font-size:14.5px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;background:var(--p-surface-2);
  border-radius:var(--p-r) var(--p-r) 0 0}
.p-card .bd{padding:18px}
/* Çerçeveli pano — alkahest'teki .board: mono başlık şeridi + gövde. */
.p-board{background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r-lg);box-shadow:var(--p-sh);overflow:hidden}
.p-board .tt{display:flex;align-items:center;gap:9px;padding:11px 16px;
  border-bottom:1px solid var(--p-line-2);background:var(--p-surface-2)}
.p-board .tt b{font:500 11px var(--p-mono);color:var(--p-muted);
  letter-spacing:.05em}
.p-board .bd{padding:18px}

/* --- Form ------------------------------------------------------------- */
.p-field{margin-bottom:14px}
.p-field label{display:block;font-size:12.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-muted);margin-bottom:6px}
.p-field input,.p-field select,.p-field textarea{width:100%;
  border:1px solid var(--p-line);border-radius:var(--p-r-sm);
  padding:12px 14px;font:400 16px var(--p-sans);background:#fff;
  color:var(--p-text);transition:border-color .18s var(--p-ease),
  box-shadow .18s var(--p-ease)}
.p-field input:focus,.p-field select:focus,.p-field textarea:focus{
  outline:none;border-color:var(--p-cyan);
  box-shadow:0 0 0 3px rgba(0,168,181,.14)}
.p-hint{font-size:14px;color:var(--p-muted);margin-top:5px;line-height:1.6}
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px}

/* --- Rozet ------------------------------------------------------------ */
.p-badge{display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:2px;
  font:600 12.5px var(--p-sans);letter-spacing:.03em;
  background:var(--p-line-2);color:var(--p-muted);
  border:1px solid transparent}
.p-badge.ok{background:var(--p-green-t);color:var(--p-green);
  border-color:rgba(15,138,79,.2)}
.p-badge.warn{background:var(--p-amber-t);color:var(--p-amber);
  border-color:rgba(196,125,13,.22)}
.p-badge.bad{background:var(--p-red-t);color:var(--p-red);
  border-color:rgba(189,59,44,.2)}
.p-badge.cyan{background:rgba(0,168,181,.10);color:#04737c;
  border-color:rgba(0,168,181,.24)}
.p-badge.fire{background:var(--p-fire-t);color:#a85808;
  border-color:rgba(224,123,18,.26)}

/* --- Bildirim şeridi -------------------------------------------------- */
.p-flash{padding:12px 16px;border-radius:var(--p-r-sm);margin-bottom:14px;
  font-size:13.5px;border:1px solid;border-left-width:3px}
.p-flash.success{background:var(--p-green-t);border-color:rgba(15,138,79,.28);
  border-left-color:var(--p-green);color:#0a6b3d}
.p-flash.error{background:var(--p-red-t);border-color:rgba(189,59,44,.28);
  border-left-color:var(--p-red);color:#8f2a1f}
.p-flash.info{background:#eaf3fb;border-color:rgba(27,108,168,.24);
  border-left-color:var(--p-blue);color:#134d75}

/* --- Yatay kayma koruması --------------------------------------------- */
.b2b-wrap,.m-app,.m-body{overflow-x:hidden}
.b2b-nav{max-width:100%}
.p-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p-scroll::-webkit-scrollbar{height:8px}
.p-scroll::-webkit-scrollbar-thumb{background:var(--p-line);border-radius:4px}

/* --- Tablo -------------------------------------------------------------
   Üç kural, üçü de okunabilirlik için:
     · 15,5px gövde — 13,5px'te rakamlar yaşlı gözde birbirine giriyordu
     · SAYILAR SAĞA HİZALI — basamaklar alt alta gelir, iki tutarı
       karşılaştırmak okumadan mümkün olur. Veri tablosu tasarımında
       "dağınık tablo" şikâyetlerinin tek en büyük çözümü budur.
     · Dikey ayraç — yoğun tabloda yalnız yatay çizgi kolonları ayırmıyor,
       göz satırda kayıyordu. */
table.p-tbl{width:100%;border-collapse:collapse;font-size:15.5px}
table.p-tbl th{background:var(--p-navy);color:#fff;text-align:left;
  padding:13px 14px;font:600 11.5px var(--p-sans);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.09)}
table.p-tbl th:last-child{border-right:none}
table.p-tbl td{padding:13px 14px;border-bottom:1px solid var(--p-line-2);
  border-right:1px solid var(--p-line-2);
  vertical-align:middle;transition:background .15s var(--p-ease)}
table.p-tbl td:last-child{border-right:none}
table.p-tbl tbody tr{box-shadow:inset 3px 0 0 transparent;
  transition:box-shadow .15s var(--p-ease)}
table.p-tbl tbody tr:hover{box-shadow:inset 3px 0 0 var(--p-cyan)}
table.p-tbl tbody tr:hover td{background:var(--p-surface-2)}
table.p-tbl tfoot td{border-top:2px solid var(--p-line);font-weight:700;
  font-size:16px}
/* Sayı kolonları — hem başlık hem hücre sağa yaslanır ki başlık ile
   altındaki rakam aynı kenardan hizalansın. */
table.p-tbl th.p-num,table.p-tbl td.p-num,
table.p-tbl th.sag,table.p-tbl td.sag{text-align:right}
.p-empty{padding:44px 18px;text-align:center;color:var(--p-muted);
  font-size:15px}
.p-code{font:500 14px var(--p-mono);color:var(--p-muted);letter-spacing:-.01em}
.p-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.mt{margin-top:16px}

/* --- Görününce belirme ------------------------------------------------ */
[data-beliren]{opacity:0;transform:translateY(14px)}
[data-beliren].beliren-acik{opacity:1;transform:none;
  transition:opacity .6s var(--p-ease),transform .6s var(--p-ease)}
@media(prefers-reduced-motion:reduce){[data-beliren]{opacity:1;transform:none}}

/* --- Canlı nokta ------------------------------------------------------ */
.nabiz{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--p-cyan);box-shadow:0 0 0 0 rgba(0,196,212,.65);
  animation:nabiz 2.4s infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(0,196,212,.55)}
  70%{box-shadow:0 0 0 9px rgba(0,196,212,0)}
  100%{box-shadow:0 0 0 0 rgba(0,196,212,0)}}
/* Stok göstergesi — ADET GÖSTERMEZ, yalnızca var/yok.
   Bayiye kaç adet kaldığı bilgisi verilmez (ticari tercih); ekranda
   yalnızca sipariş edilebilir olup olmadığı görünür. */
.stok-nokta{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--p-green);margin-right:5px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(15,138,79,.6);animation:nabiz-yesil 2.6s infinite}
@keyframes nabiz-yesil{0%{box-shadow:0 0 0 0 rgba(15,138,79,.5)}
  70%{box-shadow:0 0 0 7px rgba(15,138,79,0)}
  100%{box-shadow:0 0 0 0 rgba(15,138,79,0)}}
.stok-nokta.yok{background:var(--p-red);animation:none;box-shadow:none}

/* ===========================================================================
   2 · B2B — masaüstü odaklı bayi portalı
   =========================================================================== */
.b2b-top{color:#fff;padding:0 var(--p-kenar);display:flex;align-items:center;gap:20px;
  height:64px;position:sticky;top:0;z-index:30;
  background:rgba(6,13,22,.80);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s var(--p-ease),box-shadow .3s var(--p-ease)}
body.kaydi .b2b-top{background:rgba(6,13,22,.96);
  box-shadow:0 8px 30px rgba(0,0,0,.4)}
.b2b-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:1px;opacity:.5;
  background:linear-gradient(90deg,transparent,var(--p-cyan) 28%,
             var(--p-fire) 72%,transparent)}
.b2b-top .logo{display:flex;align-items:center;gap:11px;flex:none;color:#fff}
.b2b-top .logo img{height:30px;width:auto;display:block}
.b2b-top .logo .yazi{font-weight:700;font-size:13px;letter-spacing:.13em;
  line-height:1.1;text-transform:uppercase}
.b2b-top .logo small{display:block;font-size:9px;font-weight:600;
  letter-spacing:.26em;color:var(--p-cyan);text-transform:uppercase;
  margin-top:2px}
.b2b-nav{display:flex;gap:1px;margin-left:auto;flex-wrap:wrap}
.b2b-nav a{position:relative;color:#c2d1e0;padding:10px 13px;
  border-radius:var(--p-r-sm);font-size:14.5px;font-weight:500;white-space:nowrap;
  transition:color .2s var(--p-ease),background .2s var(--p-ease)}
.b2b-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.b2b-nav a.on{color:#fff;background:rgba(0,168,181,.15)}
.b2b-nav a.on::after{content:"";position:absolute;left:12px;right:12px;
  bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--p-cyan),var(--p-cyan-2));
  animation:sekme-ac .3s var(--p-ease)}
@keyframes sekme-ac{from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}}
.b2b-who{display:flex;align-items:center;gap:10px;padding-left:15px;
  border-left:1px solid rgba(255,255,255,.14);font-size:12px;color:#8ea3bd;
  flex:none;line-height:1.35}
.b2b-wrap{max-width:var(--p-maxw);margin:0 auto;
  padding:26px var(--p-kenar) 64px}

/* --- Kahraman: gerçek araç fotoğrafı üzerinde --------------------------
   Görsel artık çizim değil, bayinin kendi sitesindeki IVECO ürün gamı
   fotoğrafı. Fotoğraf ZEMİNDİR, süs değil: üzerine koyu bir degrade
   basılır ki metin her koşulda okunsun. */
.b2b-kahraman{position:relative;padding:0 var(--p-kenar);
  background:var(--p-navy-0);color:#fff;overflow:hidden;isolation:isolate}
/* TAM GENİŞLİK ZEMİN FOTOĞRAFI — panelin tamamını kaplar.
   Kırpma noktası GÖRSELE BAKILARAK seçildi, tahminle değil: gam.jpg'de
   araçlar dikeyde %32–%66 bandında duruyor; üstü gökyüzü, altı asfalt.
   Pencere %49'da ortalandığında görünen alan %27–%70 arasını kapsar ve
   araçların tamamı içeride kalır. Kesilen şey yalnızca boş gökyüzü ve
   zemindir — yani kırpma bilgi kaybettirmez. */
.b2b-kahraman .zemin{display:block;position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:center 49%}
.b2b-kahraman .gorsel{display:none}
/* Okunabilirlik perdesi — YALNIZCA metnin durduğu sol tarafta koyu.
   Sağ taraf neredeyse temiz kalır, araçlar olduğu gibi görünür. */
.b2b-kahraman::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(6,13,22,.94) 0%,rgba(6,13,22,.86) 26%,
                    rgba(6,13,22,.52) 44%,rgba(6,13,22,.14) 60%,
                    rgba(6,13,22,.06) 100%),
    radial-gradient(50ch 30ch at 2% 50%,rgba(0,168,181,.20),transparent 66%)}
.b2b-kahraman::after{content:"";position:absolute;inset:0;z-index:-1;
  opacity:.14;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(70% 100% at 30% 0%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 100% at 30% 0%,#000 30%,transparent 100%)}
/* `min(none,100%)` geçersizdir — ikinci bir max-width bildirimi vardı ve
   --p-maxw sınırsıza çekilince kuralı komple düşürüyordu. Tek bildirim. */
/* ORANTI ve YERLEŞİM.
   Kapak bir GİRİŞTİR, sayfa değil — yüksekliği içerikle aynı ölçekte
   durmalı. Ama fotoğrafın da nefes alacağı bir yüksekliği olmalı, yoksa
   şerit gibi ezilir. 250px bu ikisinin dengesi.
   Metin SOL SÜTUNDA, fotoğraf boyunca dikeyde ortalı akar; sağ taraf
   fotoğrafa bırakılır. */
/* Metin solda, fotoğraf boyunca dikeyde ortalı. Yükseklik ekranla büyür:
   pencere ne kadar yüksekse araç bandı o kadar rahat sığar. */
.b2b-kahraman .ic{max-width:var(--p-maxw);margin:0 auto;
  padding:34px 0;position:relative;
  min-height:clamp(340px,28vw,520px);display:flex;align-items:center}
.b2b-kahraman .metin{max-width:44ch;width:100%}
@media(max-width:860px){
  .b2b-kahraman .ic{min-height:0;padding:24px 0}
  .b2b-kahraman .metin{max-width:none}
}
.b2b-kahraman h1{font-size:clamp(22px,2.2vw,29px);font-weight:700;
  letter-spacing:-.024em;line-height:1.12}
.b2b-kahraman h1 .vurgu{
  background:linear-gradient(92deg,var(--p-cyan-2),var(--p-fire-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.b2b-kahraman .alt{color:#b7c7d8;font-size:15px;margin-top:8px;
  max-width:60ch;line-height:1.55}
.b2b-kahraman .eylem{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Kahramanın altındaki mono künye — alkahest'teki .undercta */
.b2b-kunye{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;
  font:500 12.5px var(--p-mono);color:#8ea3bd;letter-spacing:.02em}
.b2b-kunye span{display:inline-flex;align-items:center;gap:7px}

/* --- Ölçü şeridi (kahramanın içinde, koyu zemin üstünde) --------------- */
/* Kahramanın ALTINDA, kendi satırında. Kapağın içindeyken beyaz kartlar
   fotoğrafı örtüyordu. */
.b2b-olcu{margin:0 0 20px;position:relative;z-index:2}
.b2b-kpi{position:relative;background:var(--p-surface);
  border:1px solid var(--p-line);border-radius:var(--p-r);
  padding:16px 18px;overflow:hidden;
  transition:transform .25s var(--p-ease),box-shadow .25s var(--p-ease)}
.b2b-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--p-cyan),transparent 70%)}
.b2b-kpi.eylem::before{background:linear-gradient(90deg,var(--p-fire),transparent 70%)}
.b2b-kpi.uyari::before{background:linear-gradient(90deg,var(--p-red),transparent 70%)}
.b2b-kpi:hover{transform:translateY(-3px);box-shadow:var(--p-sh-lift)}
.b2b-kpi .l{font:700 12px var(--p-sans);text-transform:uppercase;
  letter-spacing:.13em;color:var(--p-muted)}
.b2b-kpi .v{font-size:32px;font-weight:700;margin-top:7px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.b2b-kpi .v.cyan{color:var(--p-cyan)}
.b2b-kpi .v.red{color:var(--p-red)}
.b2b-kpi .v.fire{color:var(--p-fire)}
.b2b-kpi .f{font-size:13.5px;color:var(--p-muted);margin-top:5px}
.b2b-olcu .b2b-kpi{box-shadow:var(--p-sh)}

/* --- Kıl payı ızgara: kutu yerine şebeke ------------------------------ */
.p-sebeke{display:grid;gap:1px;background:var(--p-line);
  border:1px solid var(--p-line);border-radius:var(--p-r);overflow:hidden}
.p-sebeke > *{background:var(--p-surface);padding:20px 20px}
.p-sebeke.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-sebeke.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-sebeke.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.p-sebeke.k4,.p-sebeke.k3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.p-sebeke.k4,.p-sebeke.k3,.p-sebeke.k2{grid-template-columns:minmax(0,1fr)}}
.p-sebeke .no{font:500 11px var(--p-mono);color:var(--p-fire);
  letter-spacing:.1em}
.p-sebeke h3{font-size:16px;margin:10px 0 7px;font-weight:600;
  letter-spacing:-.01em}
.p-sebeke p{color:var(--p-muted);font-size:13px;line-height:1.6}

/* --- Araç ailesi şeridi (fotoğraflı) ---------------------------------- */
.aile-serit{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.aile{position:relative;border:1px solid var(--p-line);border-radius:var(--p-r);
  overflow:hidden;background:var(--p-navy);color:#fff;display:block;
  transition:transform .28s var(--p-ease),box-shadow .28s var(--p-ease)}
.aile:hover{transform:translateY(-3px);box-shadow:var(--p-sh-lift);color:#fff}
/* Ürün fotoğrafları — ARACIN TAMAMI görünmeli.
   cover kullanıldığında 468×240'lık ürün çekimi kutuya sığmayıp çekicinin
   önünü ya da arkasını kesiyordu. Bu görseller nötr zeminli ürün çekimi
   olduğu için contain doğru seçim: kırpma yok, araç bütün görünür. Alt
   dolgu, isim şeridinin aracı örtmemesi için. */
.aile img{width:100%;height:138px;object-fit:contain;display:block;
  background:linear-gradient(160deg,#16283c,#0d1b2a);
  padding:10px 10px 26px;
  transition:transform .5s var(--p-ease)}
.aile:hover img{transform:scale(1.05)}
.aile .kap{position:absolute;left:0;right:0;bottom:0;padding:18px 13px 10px;
  background:linear-gradient(180deg,transparent,rgba(6,13,22,.94))}
.aile .kap b{display:block;font-size:14px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.aile .kap span{display:block;font-size:12px;color:#a8bacd;margin-top:2px;
  line-height:1.35}

/* --- Katalog kategori dizini ------------------------------------------ */
.kat-duzen{display:grid;grid-template-columns:246px minmax(0,1fr);gap:20px;
  align-items:start}
@media(max-width:900px){.kat-duzen{grid-template-columns:minmax(0,1fr)}}
.kat-yan{background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r);overflow:hidden;box-shadow:var(--p-sh);
  position:sticky;top:80px}
@media(max-width:900px){.kat-yan{position:static}}
.kat-yan .bas{background:var(--p-navy);color:#fff;padding:11px 14px;
  font:600 10.5px var(--p-sans);letter-spacing:.16em;text-transform:uppercase}
.kat-yan .liste{max-height:calc(100vh - 200px);overflow-y:auto}
@media(max-width:900px){.kat-yan .liste{max-height:none}}
.kat-yan a{display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:11px 14px;border-bottom:1px solid var(--p-line-2);
  font-size:14.5px;color:var(--p-text);line-height:1.32;
  border-left:3px solid transparent;
  transition:background .18s var(--p-ease),border-color .18s var(--p-ease)}
.kat-yan a:last-child{border-bottom:none}
.kat-yan a:hover{background:var(--p-surface-2);color:var(--p-text);
  border-left-color:var(--p-cyan)}
.kat-yan a.on{background:rgba(0,168,181,.09);color:var(--p-text);
  font-weight:600;border-left-color:var(--p-cyan)}
.kat-yan a .adet{color:var(--p-muted);font:500 12.5px var(--p-mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kat-yan .tumu{background:var(--p-surface-2);font-weight:600}

.kat-kutu{display:grid;gap:1px;background:var(--p-line);
  border:1px solid var(--p-line);border-radius:var(--p-r);overflow:hidden;
  grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}
.kat-kutu a{position:relative;display:flex;align-items:center;gap:11px;
  padding:14px 15px;background:var(--p-surface);color:var(--p-text);
  overflow:hidden;transition:background .22s var(--p-ease)}
.kat-kutu a::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,
             rgba(0,168,181,.09) 50%,transparent 80%);
  transform:translateX(-100%);transition:transform .55s var(--p-ease)}
.kat-kutu a:hover::before{transform:translateX(100%)}
.kat-kutu a:hover{background:var(--p-surface-2);color:var(--p-text)}
.kat-kutu a .sim{flex:none;width:34px;height:34px;border-radius:var(--p-r-sm);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:linear-gradient(140deg,rgba(0,168,181,.14),rgba(224,123,18,.11))}
.kat-kutu a .met{min-width:0}
.kat-kutu a .ad{display:block;font-weight:600;font-size:14.5px;line-height:1.28}
.kat-kutu a .adet{display:block;color:var(--p-muted);
  font:500 12.5px var(--p-mono);margin-top:3px;font-variant-numeric:tabular-nums}

/* --- Kurumsal hizmet şeridi ------------------------------------------- */
.hizmet-kutu{display:grid;gap:1px;background:var(--p-line);
  border:1px solid var(--p-line);border-radius:var(--p-r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(206px,1fr))}
.hizmet{display:flex;gap:12px;align-items:flex-start;padding:17px 16px;
  background:var(--p-surface);transition:background .22s var(--p-ease)}
.hizmet:hover{background:var(--p-surface-2)}
.hizmet .simge{font-size:20px;line-height:1;flex:none;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--p-r-sm);
  background:linear-gradient(140deg,rgba(0,168,181,.13),rgba(224,123,18,.12))}

/* --- Katalog kartları -------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
  gap:13px}
.cat-item{background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r);padding:15px;display:flex;flex-direction:column;
  box-shadow:var(--p-sh);
  transition:transform .24s var(--p-ease),box-shadow .24s var(--p-ease),
             border-color .24s var(--p-ease)}
.cat-item:hover{transform:translateY(-3px);box-shadow:var(--p-sh-lift);
  border-color:var(--p-cyan)}
.cat-item .kod{font:500 13px var(--p-mono);color:var(--p-muted)}
.cat-item .ad{font-weight:600;font-size:15.5px;margin:6px 0 10px;
  line-height:1.38;min-height:42px}
.cat-item .fiyat{font-size:23px;font-weight:700;color:var(--p-navy);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cat-item .liste{font-size:14px;color:var(--p-faint);
  text-decoration:line-through;margin-left:6px}
.cat-item .alt{margin-top:auto;padding-top:12px;display:flex;gap:8px;
  align-items:center;border-top:1px solid var(--p-line-2)}
.cat-item input[type=number]{width:62px;border:1px solid var(--p-line);
  border-radius:var(--p-r-sm);padding:8px;text-align:center;font-size:13.5px}

/* --- Giriş ekranı ------------------------------------------------------ */
.b2b-login{min-height:100vh;display:grid;grid-template-columns:1.12fr 1fr}
.b2b-login .art{position:relative;color:#fff;padding:56px 52px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:var(--p-navy-0);isolation:isolate}
.b2b-login .art .zemin{position:absolute;inset:0;z-index:-3;width:100%;
  height:100%;object-fit:cover}
.b2b-login .art::after{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(120deg,rgba(6,13,22,.95),rgba(6,13,22,.68) 60%,
             rgba(6,13,22,.86));border:none}
.b2b-login .art h1{font-size:clamp(30px,3.6vw,42px);font-weight:700;
  letter-spacing:-.03em;line-height:1.06}
.b2b-login .art .tag{color:var(--p-cyan);letter-spacing:.28em;font-size:10.5px;
  text-transform:uppercase;font-weight:700;margin-top:12px}
.b2b-login .art p{color:#b7c7d8;margin-top:24px;font-size:15px;max-width:44ch;
  line-height:1.66}
.b2b-login .art ul{margin:22px 0 0 18px;color:#c8d3e0;font-size:14px}
.b2b-login .art li{margin-bottom:7px}
.b2b-login .form{display:flex;align-items:center;justify-content:center;
  padding:40px 42px;background:var(--p-surface)}
.b2b-login .form .inner{width:100%;max-width:368px}
.b2b-login .form h2{font-size:22px;margin-bottom:6px;letter-spacing:-.02em}
@media(max-width:900px){.b2b-login{grid-template-columns:1fr}
  .b2b-login .art{padding:38px 26px}}

/* --- Altbilgi ---------------------------------------------------------- */
.b2b-footer{background:var(--p-navy-0);border-top:1px solid rgba(255,255,255,.08);
  color:#b7c7d8;margin-top:auto;padding:30px var(--p-kenar);position:relative}
.b2b-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;
  height:2px;opacity:.6;
  background:linear-gradient(90deg,transparent,var(--p-cyan) 30%,
             var(--p-fire) 70%,transparent)}
.b2b-foot-in{max-width:var(--p-maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:24px 30px;font-size:13px;line-height:1.8}
.b2b-foot-blok{min-width:0}
.b2b-foot-marka{font-weight:700;font-size:16px;letter-spacing:.1em;color:#fff}
.b2b-foot-bas{color:#fff;font:700 10.5px var(--p-sans);letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:6px}
.b2b-foot-sub{color:#8ea3bd;margin-top:2px}
.b2b-foot-slogan{color:var(--p-cyan-2);margin-top:8px;font-style:italic}
.b2b-footer a{color:#c2d1e0}
.b2b-footer a:hover{color:var(--p-cyan-2)}

/* ===========================================================================
   3 · HIZLI ARAMA KATMANI (Ctrl+K / "/")
   =========================================================================== */
.ha-ac{display:inline-flex;align-items:center;gap:9px;flex:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  color:#9fb2c6;border-radius:var(--p-r-sm);padding:7px 12px;font-size:12.5px;
  cursor:pointer;font-family:var(--p-sans);
  transition:border-color .2s var(--p-ease),color .2s var(--p-ease),
             background .2s var(--p-ease)}
.ha-ac:hover{border-color:var(--p-cyan);color:#fff;background:rgba(0,168,181,.15)}
.ha-ac kbd{font:600 10px var(--p-mono);letter-spacing:.04em;
  background:rgba(255,255,255,.11);border-radius:2px;padding:2px 5px;
  color:#c8d3e0}
@media(max-width:1200px){.ha-ac .yazi,.ha-ac kbd{display:none}
  .ha-ac{padding:7px 9px}}
.ha-ort{position:fixed;inset:0;z-index:90;display:none;
  background:rgba(4,10,17,.70);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:10vh 18px 18px;overscroll-behavior:contain}
.ha-ort.acik{display:block;animation:ha-gir .18s var(--p-ease)}
@keyframes ha-gir{from{opacity:0}to{opacity:1}}
.ha-kutu{max-width:670px;margin:0 auto;background:var(--p-surface);
  border-radius:var(--p-r-lg);box-shadow:0 30px 90px rgba(0,0,0,.5);
  overflow:hidden;animation:ha-yuksel .22s var(--p-ease)}
@keyframes ha-yuksel{from{transform:translateY(-12px) scale(.985);opacity:0}
  to{transform:none;opacity:1}}
.ha-ust{display:flex;align-items:center;gap:11px;padding:15px 18px;
  border-bottom:1px solid var(--p-line)}
.ha-ust .ikon{color:var(--p-cyan);font-size:17px;flex:none}
.ha-ust input{flex:1;border:none;outline:none;font:500 16.5px var(--p-sans);
  color:var(--p-text);background:transparent;min-width:0}
.ha-ust .kapat{border:1px solid var(--p-line);background:var(--p-surface-2);
  color:var(--p-muted);border-radius:2px;padding:4px 8px;
  font:600 10.5px var(--p-mono);cursor:pointer}
.ha-liste{max-height:52vh;overflow-y:auto}
.ha-satir{display:flex;align-items:center;gap:13px;padding:11px 18px;
  border-bottom:1px solid var(--p-line-2);cursor:pointer;color:var(--p-text);
  text-align:left;width:100%;border-left:3px solid transparent;background:none;
  font-family:var(--p-sans)}
.ha-satir:last-child{border-bottom:none}
.ha-satir.secili,.ha-satir:hover{background:var(--p-surface-2);
  border-left-color:var(--p-cyan);color:var(--p-text)}
.ha-satir .kod{font:600 12.5px var(--p-mono);color:var(--p-navy);flex:none;
  min-width:98px}
.ha-satir .ad{flex:1;min-width:0;font-size:13.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ha-satir .sag{flex:none;text-align:right;font-size:11.5px;color:var(--p-muted)}
.ha-satir .sag b{display:block;color:var(--p-text);font-size:13.5px;
  font-variant-numeric:tabular-nums}
.ha-bos{padding:30px 18px;text-align:center;color:var(--p-muted);font-size:13.5px}
.ha-alt{display:flex;gap:14px;justify-content:space-between;padding:9px 18px;
  background:var(--p-surface-2);border-top:1px solid var(--p-line);
  font:500 11px var(--p-mono);color:var(--p-muted)}
.ha-alt kbd{background:#fff;border:1px solid var(--p-line);border-radius:2px;
  padding:1px 5px;font:600 10px var(--p-mono)}
.ha-yukleniyor{height:2px;background:var(--p-line-2);overflow:hidden}
.ha-yukleniyor i{display:block;height:100%;width:38%;
  background:linear-gradient(90deg,var(--p-cyan),var(--p-fire));
  animation:ha-kay 1s linear infinite}
@keyframes ha-kay{from{transform:translateX(-100%)}to{transform:translateX(320%)}}

/* ===========================================================================
   4 · MOBİL PWA
   =========================================================================== */
body.m{background:var(--p-navy-0)}
.m-app{max-width:460px;margin:0 auto;min-height:100vh;background:var(--p-bg);
  position:relative;padding-bottom:calc(78px + env(safe-area-inset-bottom));
  box-shadow:0 0 80px rgba(0,0,0,.45)}
.m-top{background:rgba(6,13,22,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;padding:calc(13px + env(safe-area-inset-top)) 17px 13px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s var(--p-ease),box-shadow .3s var(--p-ease)}
body.kaydi .m-top{background:rgba(6,13,22,.98);
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.m-top .t{font-weight:600;font-size:16px;letter-spacing:-.01em}
.m-top .s{font:700 9.5px var(--p-sans);color:var(--p-cyan);letter-spacing:.24em;
  text-transform:uppercase}
.m-top .back{color:#c8d3e0;font-size:21px;line-height:1;text-decoration:none;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.07);flex:none;
  transition:background .2s var(--p-ease),transform .12s var(--p-ease)}
.m-top .back:active{transform:scale(.9);background:rgba(255,255,255,.16)}
.m-body{padding:16px}

/* Mobil kahraman — gerçek araç fotoğrafı zemininde */
.m-hero{position:relative;color:#fff;padding:24px 17px 26px;
  margin:-16px -16px 16px;overflow:hidden;isolation:isolate;
  background:var(--p-navy-0)}
/* Telefonda fotoğraf tam genişlikte zemindir. Kutu dar olduğu için
   (460px) görselin görünen dikey oranı burada zaten yüksek; %49 kırpma
   noktasıyla araç bandının tamamı içeride kalır. */
.m-hero .zemin{position:absolute;inset:0;z-index:-3;width:100%;height:100%;
  object-fit:cover;object-position:center 49%}
.m-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(6,13,22,.90) 0%,
             rgba(6,13,22,.62) 46%,rgba(6,13,22,.30) 70%,
             rgba(6,13,22,.78) 100%)}
.m-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(80% 100% at 50% 0%,#000 30%,transparent 100%);
  mask-image:radial-gradient(80% 100% at 50% 0%,#000 30%,transparent 100%)}
.m-hero .etiket{display:inline-flex;align-items:center;gap:7px;
  font:700 9.5px var(--p-sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--p-cyan);margin-bottom:9px}
.m-hero h2{font-size:21px;font-weight:700;letter-spacing:-.024em;line-height:1.2}
.m-hero p{color:#b7c7d8;font-size:13.5px;margin-top:5px;line-height:1.55}

.m-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.m-quick a{position:relative;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--p-r);
  padding:13px 5px;text-align:center;color:#fff;font-size:10.5px;
  font-weight:600;line-height:1.3;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s var(--p-ease),transform .12s var(--p-ease),
             border-color .2s var(--p-ease)}
.m-quick a:hover{background:rgba(0,168,181,.26);color:#fff}
.m-quick a:active{transform:scale(.94);background:rgba(0,168,181,.34);
  border-color:var(--p-cyan)}
.m-quick .ico{display:block;font-size:19px;margin-bottom:6px}

.m-tile{background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r);padding:15px;margin-bottom:12px;box-shadow:var(--p-sh)}
.m-tile .th{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:9px}
.m-tile .th b{font-size:16px;letter-spacing:-.01em}
a.m-tile{display:block;color:var(--p-text);
  transition:transform .12s var(--p-ease),box-shadow .22s var(--p-ease),
             border-color .22s var(--p-ease)}
a.m-tile:active{transform:scale(.985);box-shadow:var(--p-sh-lift);
  border-color:var(--p-cyan)}
/* Mobil bölüm başlığı — B2B'deki .b2b-hd'nin telefon karşılığı */
.m-th{font:700 12px var(--p-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--p-muted);margin:22px 2px 10px}

/* MOBİL FORM ÖĞELERİ — bunlar şablonlarda kullanılıyordu ama CSS'te
   karşılıkları yoktu: tarayıcının ham select/input görünümüyle çıkıyor,
   sepet ekranında arayüzün geri kalanından kopuk duruyorlardı. */
.p-sec,.p-gir{width:100%;border:1px solid var(--p-line);
  border-radius:var(--p-r-sm);padding:11px 12px;
  font:400 14.5px var(--p-sans);background:#fff;color:var(--p-text);
  transition:border-color .18s var(--p-ease),box-shadow .18s var(--p-ease)}
.p-sec:focus,.p-gir:focus{outline:none;border-color:var(--p-cyan);
  box-shadow:0 0 0 3px rgba(0,168,181,.14)}
/* Seçim satırı (teslimat yöntemi gibi) — dokunma hedefi bütün satırdır;
   yalnızca küçük yuvarlağa basmak zorunda kalmak telefonda hata üretir. */
.secim{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;
  border:1px solid var(--p-line);border-radius:var(--p-r);margin-bottom:9px;
  background:#fff;cursor:pointer;font-size:13.5px;line-height:1.45;
  transition:border-color .18s var(--p-ease),background .18s var(--p-ease)}
.secim:active{background:var(--p-surface-2)}
.secim input{margin-top:2px;flex:none;accent-color:var(--p-cyan)}
.secim:has(input:checked){border-color:var(--p-cyan);
  background:rgba(0,168,181,.05)}
/* Etiket–değer satırı (sipariş detayı) */
.sat{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--p-line-2)}
.sat:last-child{border-bottom:none}
.sat .p-hint{margin:0;flex:none}
/* Ekran üstü eylem şeridi */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

.m-veh{display:flex;gap:12px;align-items:center}
.m-veh .plate{background:linear-gradient(150deg,var(--p-navy),var(--p-navy-3));
  color:#fff;border-radius:var(--p-r-sm);padding:9px 11px;font-weight:700;
  font-size:13px;letter-spacing:.05em;white-space:nowrap;
  box-shadow:0 2px 8px rgba(13,27,42,.26)}
.m-veh .info{flex:1;min-width:0}
.m-veh .info b{display:block;font-size:15.5px}
.m-veh .info span{font-size:14px;color:var(--p-muted)}

.m-tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:460px;background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid var(--p-line);display:grid;
  grid-template-columns:repeat(5,1fr);z-index:40;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgba(18,28,40,.10)}
.m-tabs a{position:relative;padding:11px 4px 13px;text-align:center;
  color:var(--p-muted);font-size:11.5px;font-weight:600;letter-spacing:.01em;
  transition:color .22s var(--p-ease)}
.m-tabs a .ico{display:block;font-size:21px;margin-bottom:3px;line-height:1;
  transition:transform .28s var(--p-ease)}
.m-tabs a.on{color:var(--p-cyan)}
.m-tabs a.on .ico{transform:translateY(-2px) scale(1.14)}
.m-tabs a.on::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--p-cyan),var(--p-cyan-2));
  animation:sekme-ac .3s var(--p-ease)}
.m-tabs a:active{color:var(--p-cyan)}

/* Servis takibi zaman çizelgesi */
.m-steps{list-style:none;margin:0;padding:0}
.m-steps li{display:flex;gap:13px;padding-bottom:20px;position:relative}
.m-steps li::before{content:"";position:absolute;left:11px;top:26px;bottom:0;
  width:2px;background:var(--p-line)}
.m-steps li:last-child::before{display:none}
.m-steps .dot{width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--p-line);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;z-index:1}
.m-steps li.done .dot{background:var(--p-green)}
.m-steps li.act .dot{background:var(--p-cyan);
  box-shadow:0 0 0 4px rgba(0,168,181,.2)}
.m-steps .txt b{display:block;font-size:14px}
.m-steps .txt span{font-size:12.5px;color:var(--p-muted)}

/* Anket — emoji ölçeği */
.m-rate{display:flex;justify-content:space-between;gap:6px;margin:10px 0}
.m-rate label{flex:1;text-align:center;padding:11px 3px;
  border-radius:var(--p-r-sm);border:1px solid var(--p-line);cursor:pointer;
  font-size:24px;background:#fff;
  transition:border-color .18s var(--p-ease),transform .12s var(--p-ease)}
.m-rate label:active{transform:scale(.94)}
.m-rate input{display:none}
.m-rate input:checked + span{outline:2px solid var(--p-cyan)}

/* SOS */
.m-sos{position:relative;background:linear-gradient(140deg,#c8402f,#a52f21);
  color:#fff;border-radius:var(--p-r);padding:18px;text-align:center;
  margin-bottom:12px;overflow:hidden}
.m-sos::after{content:"";position:absolute;inset:0;
  background:radial-gradient(30ch 14ch at 50% -10%,rgba(255,255,255,.18),transparent 65%)}
.m-sos b{display:block;font-size:17px;margin-bottom:3px;position:relative}
.m-sos span{font-size:12.5px;opacity:.92;position:relative}

@media(max-width:520px){.m-app{max-width:100%;box-shadow:none}}

/* ===================================================================
   B2B GÖRSEL OPTİMİZASYON
   Beş gerçek eksik kapatılıyor. Hepsi ÖLÇÜLDÜ, tahmin değil.
   =================================================================== */

/* --- 1) DOKUNMATİK HEDEF ------------------------------------------
   Bayi kataloğu telefondan da açıyor. Düğme yüksekliği ~39px'ti;
   parmak ucu ortalama 44px ister. Küçük hedef yanlış tuşa basmaya,
   yanlış tuş yanlış siparişe yol açar. Yükseklik büyütülüyor ama
   dolgu artmıyor — düzen bozulmasın. */
.p-btn{min-height:44px}
.p-btn.sm{min-height:38px}          /* ikincil eylem, ana hedef değil */
.p-field input,.p-field select,.p-field textarea,
.cat-item input[type=number]{min-height:44px}
/* Sayı girişi mobilde çok dar kalıyordu; iki haneli adet bile
   sığmıyordu. */
.cat-item input[type=number]{width:74px;text-align:center;
  font-variant-numeric:tabular-nums}

/* --- 2) KAZANÇ ROZETİ ---------------------------------------------
   ÖNCE YANLIŞ TEŞHİS KOYDUM: "fiyat vurgusu yok" demiştim. Oysa
   .cat-item .fiyat zaten 23px, koyu ve tabular-nums ile tanımlıymış;
   .cat-item .liste de zaten üstü çizili. Ölçüm betiğim `p-fiyat` diye
   aradığı için bulamamıştı. İkinci bir kural yazmak yerine var olanı
   bıraktım — mükerrer kural, ileride birini değiştirince diğerini
   unutturur.

   GERÇEKTEN eksik olan tek şey buydu: bayinin sorduğu asıl soru
   "ne kadar kârdayım". Üstü çizili liste fiyatı bunu göstermez;
   farkı hesaplatmak yerine yazıyoruz. */
.cat-item .kazanc{display:inline-block;margin-left:7px;
  font:700 12px var(--p-sans);color:var(--p-green);
  background:var(--p-green-t);padding:2px 7px;border-radius:3px;
  letter-spacing:.02em}

/* --- 3) STOK DURUMU — ÜÇ KADEME -----------------------------------
   Önce iki kademe vardı: var / yok. Oysa "az kaldı" bayi için en
   değerli bilgidir: şimdi sipariş verirse bulur, beklerse bulamaz.
   Adet GÖSTERİLMEZ — rakip bayi stok seviyemizi öğrenmemeli. */
.p-badge.az{background:var(--p-amber-t);color:var(--p-amber);
  border-color:var(--p-amber)}
.stok-nokta.az{background:var(--p-amber);
  box-shadow:0 0 0 3px var(--p-amber-t)}
.stok-nokta.yok{background:var(--p-muted);box-shadow:none}

/* --- 4) SEPET ÖZETİ — MOBİLDE SABİT -------------------------------
   Telefonda sepete ekledikçe toplam yukarıda kalıyor ve görünmüyordu.
   Bayi ne kadar yüklendiğini bilmeden devam ediyordu. Alt şeritte
   sabitlenir; yalnız dar ekranda ve sepette ürün varken. */
.p-sepet-serit{display:none}
@media(max-width:900px){
  .p-sepet-serit{display:flex;position:fixed;left:0;right:0;bottom:0;
    z-index:40;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--p-surface);border-top:1px solid var(--p-line);
    box-shadow:0 -6px 20px rgba(0,0,0,.10)}
  .p-sepet-serit .bilgi{flex:1;min-width:0}
  .p-sepet-serit .adet{font:600 12.5px var(--p-sans);
    color:var(--p-muted)}
  .p-sepet-serit .tutar{font:700 19px var(--p-sans);color:var(--p-navy);
    font-variant-numeric:tabular-nums;line-height:1.2}
  .p-sepet-serit .p-btn{white-space:nowrap}
  /* Şerit içeriğin üstüne binmesin */
  body.sepet-serit-acik .b2b-wrap{padding-bottom:84px}
}

/* --- 5) DAR EKRANDA TABLO YERİNE KART -----------------------------
   Sipariş, fatura ve ekstre tabloları telefonda yatay kayıyordu;
   kullanıcı sağa kaydırmadan tutarı göremiyordu. Yatay kaydırma
   mobilde en çok terk edilen etkileşimdir.

   Şablon her hücreye data-etiket koyar; başlık hücrenin SOLUNDA
   belirir. Tablo yapısı bozulmaz — yazdırma ve masaüstü aynı kalır. */
@media(max-width:640px){
  .p-tbl.kart-olur,.p-tbl.kart-olur thead,.p-tbl.kart-olur tbody,
  .p-tbl.kart-olur tr,.p-tbl.kart-olur td{display:block;width:100%}
  .p-tbl.kart-olur thead{position:absolute;left:-9999px}
  .p-tbl.kart-olur tr{background:var(--p-surface);
    border:1px solid var(--p-line);border-radius:var(--p-r-sm);
    margin-bottom:10px;padding:4px 0;overflow:hidden}
  .p-tbl.kart-olur td{border:none;
    border-bottom:1px solid var(--p-line-2);
    display:flex;justify-content:space-between;align-items:baseline;
    gap:14px;padding:10px 14px;text-align:right}
  .p-tbl.kart-olur td:last-child{border-bottom:none}
  .p-tbl.kart-olur td::before{content:attr(data-etiket);
    font:600 11.5px var(--p-sans);letter-spacing:.08em;
    text-transform:uppercase;color:var(--p-muted);text-align:left;
    flex:0 0 auto}
  /* Etiketi olmayan hücre (işlem düğmeleri) tam genişlik alır */
  .p-tbl.kart-olur td:not([data-etiket]){justify-content:flex-end}
  .p-tbl.kart-olur .p-num{text-align:right}
  /* Kart görünümünde yatay kaydırmaya gerek kalmaz */
  .p-scroll:has(.p-tbl.kart-olur){overflow-x:visible}
}

/* Yazdırma — mürekkep ve kâğıt israfı yapmayan sade çıktı */
@media print{
  .p-sepet-serit{display:none !important}
  .b2b-top,.b2b-footer,.ha-ort,.ha-ac,.m-tabs,.m-top,.p-btn{display:none !important}
  body{background:#fff}
  .b2b-wrap{padding:0;max-width:none}
  .p-card,.p-board{box-shadow:none;border-color:#bbb}
  [data-beliren]{opacity:1 !important;transform:none !important}
}