/* =====================================================================
   ŞAKALAK B2B v3 — MAKİNE SİPARİŞ ARAYÜZÜ
   ---------------------------------------------------------------------
   DÜZEN KURALI (Not 1)
     Sayfa (body) DİKEY KAYMAZ. Yükseklik ekran yüksekliğine sabitlenir,
     kaydırma yalnız panellerin kendi içinde olur. "Seçilen opsiyonlar"
     şeridi her çözünürlükte ekranda kalır.
   KIRILIM NOKTALARI (Not 7)
     >= 1400px  masaüstü, fiyat paneli görselin üzerinde yüzer
     1024–1399  masaüstü/tablet yatay, fiyat paneli akışa girer
     768–1023   tablet, paneller alt alta
     < 768      telefon, sekmeli tek panel + alt fiyat çubuğu
   ===================================================================== */

/* Renk token'lari, kirilim noktalari, odak halkasi, dokunma hedefi ve
   yazdirma kurallari ../assets/sakalak-base.css dosyasindan gelir.
   Burada ayni isimlerle bir kopya duruyordu; ortak dosya ONCE yuklendigi
   icin bu kopya onu eziyordu ve --muted gibi ortak iyilestirmeler bu
   yuzeyde uygulanmiyordu (olculdu: acik zeminde 4.35 kontrast).
   Kopya kaldirildi, bu dosya yalnizca MAKINE SIPARISE OZGU olani icerir. */

/* Yeni not — koyu/açık tema. Tercih localStorage'da (aynı domain'deki tüm
   Şakalak alt siteleriyle ortak anahtar) tutulur; <html data-theme="dark">
   ile açılır. Aşağıdaki değişkenler yeniden tanımlanınca sayfanın geneli
   otomatik uyum sağlar (bkz. bu dosyadaki background:var(--surface) vb.). */

*{box-sizing:border-box}
/* hidden özniteliği display:flex/grid tanımlarını ezmelidir — aksi hâlde
   gizli katmanlar tıklamayı yakalar. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden;         /* Not 1 */
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
img{display:block}
/* Güvenlik ağı: tarayıcı varsayılan form kontrolleri temayı takip etmez;
   burada temel bir renk verilir, daha özel kurallar (örn. .row-edit-input)
   zaten daha yüksek özgüllükle bunu ezer. */
input,select,textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------- başlık */
.site-header{
  flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:8px 20px; min-height:var(--header-h);
}
.brand-button{
  display:flex; align-items:center; gap:12px; background:none; border:0;
  cursor:pointer; padding:0; text-align:left;min-width:0;
  text-decoration:none; color:inherit;
}
.brand-button img{height:30px;width:auto}

/* Not 2 (yeşil) — "Ürün değiştir" ve fiyat listesi tarihi logonun altında */
.header-context{
  grid-column:1; display:flex; align-items:center; gap:10px;
  margin-top:2px; min-height:var(--context-h);min-width:0;max-width:100%;
}
.header-context[hidden]{display:none}
.header-context-meta{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* Menu daha once flex-wrap:wrap idi: orta sutun daralinca her baglanti alt
   alta gecip basligi 300 px'e kadar sisiriyordu (1123-1366 px'de 6 satir,
   1600 px'de 2 satir olctuk) ve konfigurator panellerine yer kalmiyordu.
   Artik tek satirda kalir, sigmazsa kendi icinde yatay kayar. */
.main-nav{
  grid-column:2;display:flex;justify-content:center;gap:4px;
  flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.nav-link{flex:0 0 auto;white-space:nowrap}
.nav-link{
  background:none;border:0;padding:7px 14px;border-radius:999px;
  font-size:13.5px;color:var(--muted);cursor:pointer;
}
.nav-link:hover{background:var(--line-soft);color:var(--ink)}
.nav-link.active{color:var(--ink);font-weight:600;background:var(--line-soft)}

.header-actions{grid-column:3;display:flex;align-items:center;gap:10px}
.rate-chip{
  display:flex;flex-direction:column;line-height:1.15;font-size:10.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 10px;
}
.rate-chip strong{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.ghost-button,.session-button{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:6px 12px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:8px;
}
/* Cikis yap — sakalakbayiportal'daki koyu .dark-button ile ayni renk
   (var(--panel)/var(--on-deep)), bu basligin kompakt olcusune uydurulmus. */
.logout-button{
  border:0;background:var(--panel);color:var(--on-deep);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.logout-button:hover{opacity:.88}
.logout-button:disabled{opacity:.6;cursor:default}

.session-button b{font-size:11px;color:var(--red-text);font-weight:600}
.session-button.impersonating{border-color:var(--warn);background:var(--warn-bg)}

/* Not 5 (v2) — opsiyona göre makine fotoğrafı: otomatik/manuel anahtarı */
.photo-mode-group{display:flex;align-items:center;gap:8px}
.photo-mode-label{font-size:11px;color:var(--muted);white-space:nowrap}
.photo-mode-segmented.segmented{gap:0;border:1px solid var(--line);border-radius:999px;padding:2px;flex-wrap:nowrap}
.photo-mode-segmented .segment{
  border:0;background:transparent;border-radius:999px;padding:5px 12px;font-size:12px;min-width:0;
}
.photo-mode-segmented .segment.active{background:var(--panel);color:#fff;font-weight:600}
.photo-fetch-btn{transition:opacity .16s ease}
.photo-fetch-btn.is-inactive{opacity:.35;pointer-events:none;cursor:default}
.photo-fetch-btn:disabled{opacity:.35;cursor:default}
.cart-button{
  /* Yeni not 15 — arka plan sabit koyu (--panel) olmalı; --ink koyu modda
     açık renge döndüğü için burada kullanılırsa metin (beyaz) görünmez
     kalıyordu. */
  background:var(--panel);color:#fff;border:0;border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;gap:8px;align-items:center;
}
.cart-button b{background:var(--red);color:var(--on-red);border-radius:999px;padding:1px 7px;font-size:11px}

/* ------------------------------------------------- temsil çubuğu */
.impersonation-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#1d2126; color:#fff; padding:8px 20px; font-size:13px;
}
.impersonation-dot{width:8px;height:8px;border-radius:50%;background:#f0b429;box-shadow:0 0 0 4px rgba(240,180,41,.2)}
.impersonation-meta{color:#a9b2b9;font-size:12px}
.impersonation-bar button{
  margin-left:auto;background:#fff;color:#15181b;border:0;border-radius:999px;
  padding:5px 14px;font-size:12px;font-weight:600;cursor:pointer;
}

/* Yeni not 8 — oturum yokken menü/sepet/kur çubuğu gizlenir, sadece
   marka logosu ve giriş kartı görünür kalır. */
body.needs-auth .main-nav,
body.needs-auth .header-actions .rate-chip,
body.needs-auth .header-actions .cart-button,
body.needs-auth .header-actions #layoutToggle,
body.needs-auth .header-actions #photoModeGroup{display:none}

/* ------------------------------------------------------- gövde */
#app{flex:1 1 auto;min-height:0;overflow:hidden;padding:14px 20px 16px}
.page{height:100%;min-height:0}

/* Giriş duvarı (auth-gate) */
.auth-gate{display:flex;align-items:center;justify-content:center}
.auth-gate-card{
  max-width:440px;width:100%;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 32px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.auth-gate-logo{height:40px;margin-bottom:6px}
.auth-gate-card .kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.auth-gate-card h1{margin:0;font-size:19px}
.auth-gate-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.auth-gate-loading{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.auth-gate-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.auth-gate-actions .button{text-decoration:none;display:inline-flex;align-items:center}
.auth-gate-form{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px;text-align:left}
.auth-gate-form .field input{width:100%}
.auth-gate-submit{width:100%;justify-content:center}
.auth-gate-error{margin:0;font-size:12.5px;color:var(--red-text);text-align:left}
.auth-gate-note{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.auth-gate-note a{color:var(--red-text);font-weight:600}

/* Ürün seçimi ekranı kendi içinde kayabilir */
.category-page{overflow-y:auto;padding-right:6px}
.category-intro{max-width:60ch;margin:8px 0 22px}
.category-intro .kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.category-intro h1{font-size:clamp(26px,3.4vw,38px);margin:8px 0 8px;letter-spacing:-.02em}
.category-intro p{color:var(--muted);margin:0;font-size:15px}
.category-intro.compact h1{font-size:clamp(22px,2.6vw,28px)}
.category-nav-row{margin-bottom:8px}

/* GERİ DÖNÜŞ DÜĞMESİ (.back-button)
   Hem kategori sayfalarında hem de konfigüratör başlığında kullanılır.
   Renkleri BİLEREK değişkenlere (--red vb.) bağlanmadı: koyu temada --red
   açık bir kırmızıya dönüyor ve üzerindeki beyaz yazının okunurluğu düşüyordu.
   Sabit marka kırmızısı #e2231a üzerinde beyaz yazı her iki temada da
   4,69:1 kontrast verir (WCAG AA). Odak halkası da temadan bağımsızdır. */
.back-button{
  display:inline-flex;align-items:center;gap:6px;
  background:#e2231a;color:#ffffff;border:1px solid #e2231a;
  border-radius:999px;padding:9px 16px;min-height:38px;
  font-size:13.5px;font-weight:600;line-height:1.2;cursor:pointer;
  text-decoration:none;white-space:normal;max-width:100%;overflow-wrap:anywhere;
}
.back-button:hover{background:#b81a13;border-color:#b81a13;color:#fff}
.back-button:active{background:#9e150f;border-color:#9e150f}
.back-button:focus-visible{outline:2px solid #ffffff;outline-offset:-4px;box-shadow:0 0 0 3px rgba(226,35,26,.55)}
/* NOT: Burada eskiden bir de .category-back kuralı vardı (background:none;
   border:0; color:var(--muted)). Kategori sayfalarındaki düğmede iki sınıf
   birlikte durduğu (class="category-back back-button") ve bu kural dosyada
   .back-button'dan SONRA geldiği için, aynı ağırlıktaki kurallardan sonraki
   kazanıyor ve kırmızı zemini/kenarlığı siliyordu: yazı beyaz kalıyor, zemin
   kayboluyordu — açık temada düğme tamamen görünmez oluyor, koyu temada düz
   yazıya dönüyordu (kullanıcı ekran görüntüleri, 03.09.2026). .category-back'i
   tek başına kullanan kalmadığı için kural tamamen kaldırıldı; sınıf yalnızca
   JS tarafındaki [data-category-back] eşleştirmesi için duruyor. */

.root-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:22px}
.root-group-card{
  display:grid;grid-template-rows:auto minmax(220px,1fr);gap:16px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:26px;
  padding:28px;cursor:pointer;box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  overflow:hidden;
}
.root-group-card:hover{transform:translateY(-3px);border-color:var(--red-text);box-shadow:0 26px 55px -28px rgba(20,23,26,.4)}
.root-group-copy{display:flex;flex-direction:column;gap:8px;max-width:78%}
.root-group-copy small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.root-group-copy strong{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;line-height:1.03}
.root-group-copy em{font-style:normal;font-size:15px;color:var(--muted)}
.root-group-copy b{font-size:13.5px;color:var(--red-text);margin-top:4px}
.root-group-visual{min-height:220px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:14px}
.root-group-visual img{width:100%;height:100%;max-height:260px;object-fit:contain}

.subgroup-grid,.family-pick-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.subgroup-card{
  display:grid;grid-template-columns:minmax(140px,42%) 1fr;align-items:center;gap:20px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease;min-height:200px;overflow:hidden;
}
.family-pick-card{
  display:grid;grid-template-columns:130px 1fr;align-items:center;gap:16px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease;min-height:140px;overflow:hidden;
}
.subgroup-card:hover,.family-pick-card:hover{transform:translateY(-2px);border-color:var(--red-text)}
.subgroup-media,.family-pick-media{height:100%;min-height:160px;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:10px}
.family-pick-media{min-height:100px}
.subgroup-media img,.family-pick-media img{width:100%;height:100%;max-height:190px;object-fit:contain}
.family-pick-media img{max-height:110px}
.subgroup-copy,.family-pick-copy{display:flex;flex-direction:column;gap:6px}
.subgroup-copy small,.family-pick-copy small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.subgroup-copy strong{font-size:26px;letter-spacing:-.02em}
.family-pick-copy strong{font-size:18px;letter-spacing:-.01em}
.subgroup-copy em,.family-pick-copy em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.4}
.subgroup-copy span,.family-pick-copy span{font-size:12px;color:var(--muted);font-weight:600}

/* Not 9 (v2) — ana grup / makine tipi kartlarında doygun renkten
   saydama, oradan beyaza (var(--surface)/var(--panel)) geçişli degrade.
   Root kartlarda metin üstte/görsel altta olduğundan geçiş dikeydir ve
   metin BEYAZ olur.

   DÜZELTME (ölçüldü): alt seviye kartlarda degrade ters yöndeydi —
   doygun taraf SAĞDA, yani metnin altındaydı, ama metin rengi koyu
   kalmıştı. 44 satır yazı yoğunluğu 1.0'a varan tint üzerinde bitiyor,
   kontrast 1.48'e kadar düşüyordu. Tint yoğunluğunu azaltmak çözmüyor:
   açık zemin yazı renkleri hiçbir yoğunlukta 4.5'i geçmiyor. Bu yüzden
   degrade ters çevrildi; doygun taraf artık SOLDAKİ GÖRSEL sütununun
   altında ve metin başlamadan (%36) tamamen saydamlaşıyor.
   Görsel kutuları kasıtlı olarak şeffaf bırakıldı: ileride grup/makine
   görselleri şeffaf arka planlı hazırlandığında degrade ile kaynaşacak. */
.root-group-card[data-tint="ekim"]{background:linear-gradient(180deg,#c35225 0%,#c35225 26%,color-mix(in srgb,#c35225 55%,transparent) 46%,transparent 76%) ,var(--surface)}
.root-group-card[data-tint="ekim"] .root-group-copy small,
.root-group-card[data-tint="ekim"] .root-group-copy strong,
.root-group-card[data-tint="ekim"] .root-group-copy b{color:#fff}
.root-group-card[data-tint="ekim"] .root-group-copy em{color:rgba(255,255,255,.82)}
.root-group-card[data-tint="toprak"]{background:linear-gradient(180deg,#8a5a2e 0%,#8a5a2e 26%,color-mix(in srgb,#8a5a2e 55%,transparent) 46%,transparent 76%) ,var(--surface)}
.root-group-card[data-tint="toprak"] .root-group-copy small,
.root-group-card[data-tint="toprak"] .root-group-copy strong,
.root-group-card[data-tint="toprak"] .root-group-copy b{color:#fff}
.root-group-card[data-tint="toprak"] .root-group-copy em{color:rgba(255,255,255,.82)}

.subgroup-card[data-tint="mibzer"],.family-pick-card[data-tint="mibzer"]{background:linear-gradient(to right,#2f9e44 0%,#2f9e44 16%,color-mix(in srgb,#2f9e44 50%,transparent) 26%,transparent 36%) ,var(--surface)}
.subgroup-card[data-tint="hububat"],.family-pick-card[data-tint="hububat"]{background:linear-gradient(to right,#e0a500 0%,#e0a500 16%,color-mix(in srgb,#e0a500 50%,transparent) 26%,transparent 36%) ,var(--surface)}
.subgroup-card[data-tint="aniza"],.family-pick-card[data-tint="aniza"]{background:linear-gradient(to right,#2b6cb0 0%,#2b6cb0 16%,color-mix(in srgb,#2b6cb0 50%,transparent) 26%,transparent 36%) ,var(--surface)}
.subgroup-card[data-tint="capa"],.family-pick-card[data-tint="capa"]{background:linear-gradient(to right,#0f9b8e 0%,#0f9b8e 16%,color-mix(in srgb,#0f9b8e 50%,transparent) 26%,transparent 36%) ,var(--surface)}
.subgroup-card[data-tint="dikfreze"],.family-pick-card[data-tint="dikfreze"]{background:linear-gradient(to right,#c2541c 0%,#c2541c 16%,color-mix(in srgb,#c2541c 50%,transparent) 26%,transparent 36%) ,var(--surface)}
.subgroup-card[data-tint="pulluk"],.family-pick-card[data-tint="pulluk"]{background:linear-gradient(to right,#9c2b3c 0%,#9c2b3c 16%,color-mix(in srgb,#9c2b3c 50%,transparent) 26%,transparent 36%) ,var(--surface)}

/* =====================================================================
   KONFİGÜRATÖR — DÜZEN
   ===================================================================== */
.configurator{
  display:grid; gap:16px; height:100%; min-height:0; overflow:hidden;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"visual side";
}
/* Not 6 (v2) — "Yatay görünüm": ızgara şekli aynı kalır (görsel solda ve
   geniş, paneller sağda dar bir sütunda); tek fark sağdaki iki panelin
   (1. Ürün seçimi / 2. Donanım) yan yana değil ALT ALTA dizilmesidir —
   bkz. aşağıdaki ".layout-horizontal .side-columns" kuralı. */
.configurator.layout-horizontal{
  grid-template-columns:minmax(0,1.35fr) minmax(280px,340px);
}
.visual-panel{grid-area:visual}
.config-side{grid-area:side}
.mobile-tabs{display:none}

/* Not 2 (turuncu) — makinede ne varyant kontrolü ne de opsiyon varsa yan
   sütun (config-side) hiç render edilmez; görsel + fiyat paneli tüm
   genişliği kullanır. */
.configurator.no-side{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual"}
.configurator.no-side.layout-horizontal{grid-template-rows:minmax(0,1fr);grid-template-areas:"visual"}

/* --- görsel panel: satırlar sabit, yalnız içerik kayar --- */
.visual-panel{
  position:relative; min-height:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:grid; gap:12px;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  box-shadow:var(--shadow);
}
.visual-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.visual-title .kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.visual-title h2{margin:4px 0 2px;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em}
.visual-variant{margin:0;font-size:12.5px;color:var(--muted)}
.visual-code{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.machine-stage{min-height:0;display:flex;align-items:center;justify-content:center;padding:4px}
.machine-stage img{width:100%;height:100%;object-fit:contain}

/* Not 1 — bu şerit hiçbir çözünürlükte kaybolmaz */
.selected-options-wrap{
  display:flex;flex-direction:column;min-height:96px;max-height:26vh;
  border-top:1px solid var(--line);padding-top:10px;
}
.selected-options-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.selected-options-head strong{font-size:13px}
.selected-options-head small{font-size:11.5px;color:var(--muted);margin-left:auto}
.selected-options-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;align-content:start;
}
.selected-empty{font-size:12.5px;color:var(--muted);padding:4px 0}
.selected-option-card{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;position:relative;
  background:var(--line-soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 8px;cursor:pointer;text-align:left;
}
.selected-option-card:hover{border-color:var(--red-text)}
.selected-option-remove{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:var(--red);color:var(--on-red);font-size:12px;line-height:18px;text-align:center;
}
.selected-option-media img{width:34px;height:34px;object-fit:contain}
.selected-option-copy{display:flex;flex-direction:column;min-width:0}
.selected-option-copy strong{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-option-copy small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.gallery-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.gallery-thumb{
  flex:0 0 auto;width:62px;height:48px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);padding:3px;cursor:pointer;
}
.gallery-thumb.active{border-color:var(--red-text)}
.gallery-thumb img{width:100%;height:100%;object-fit:contain}

/* ------------------------------------------------ fiyat paneli (Not 3)
   Geniş ekranda görselin sağ üstünde YÜZER (aynı grid alanına yerleşir),
   dar ekranda akışa girer, telefonda en altta sabit kalır. */
.price-panel-host{
  grid-area:visual; justify-self:end; align-self:start;
  width:310px; margin:16px; z-index:5;
  max-height:calc(100% - 32px); overflow-y:auto;
}
.price-panel{
  background:var(--panel);color:#fff;border-radius:var(--radius);padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.price-lines{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.price-line{display:flex;justify-content:space-between;gap:12px}
.price-line span{color:#9aa3aa}
.price-line strong{font-variant-numeric:tabular-nums;font-weight:600}
.price-line.faint span,.price-line.faint strong{color:#767f86;font-weight:500}

.price-settings-toggle{
  display:flex;align-items:center;gap:8px;width:100%;background:rgba(255,255,255,.07);
  border:0;border-radius:var(--radius-sm);padding:8px 10px;color:#fff;cursor:pointer;font-size:12px;
}
.price-settings-toggle span{font-weight:600}
.price-settings-toggle em{font-style:normal;color:#9aa3aa;font-size:11px;margin-left:auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.price-settings-toggle b{font-size:11px;color:#9aa3aa}

.price-settings{display:flex;flex-direction:column;gap:9px;background:rgba(255,255,255,.05);border-radius:var(--radius-sm);padding:10px}
.setting-row{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:10px}
.setting-row>label{font-size:11px;color:#9aa3aa}
.mini-segmented{display:flex;gap:4px;flex-wrap:wrap}
.mini-segmented button{
  border:1px solid rgba(255,255,255,.18);background:transparent;color:#e7eaec;
  border-radius:999px;padding:3px 10px;font-size:11.5px;cursor:pointer;
}
.mini-segmented button.active{background:var(--red);border-color:var(--red);color:var(--on-red);font-weight:600}
.fx-inputs{display:flex;gap:8px}
.fx-inputs span{display:flex;align-items:center;gap:5px}
.fx-inputs i{font-style:normal;font-size:10.5px;color:#9aa3aa}
.fx-inputs input,.percent-input input{
  width:64px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:6px;padding:4px 7px;font-size:12px;font-variant-numeric:tabular-nums;
}
.percent-input{display:flex;align-items:center;gap:5px;font-size:12px;color:#9aa3aa}
.locked-value{font-size:13px;font-weight:600;display:flex;flex-direction:column}
.locked-value em{font-style:normal;font-size:10.5px;color:#9aa3aa;font-weight:400}
.setting-note{margin:2px 0 0;font-size:10.5px;color:#767f86;line-height:1.45}

.price-totals{display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(255,255,255,.12);padding-top:9px;font-size:12.5px}
.total-line{display:flex;justify-content:space-between;gap:12px}
.total-line span{color:#9aa3aa}
.total-line strong{font-variant-numeric:tabular-nums}
.total-line.discount strong{color:#7dc3a0}
.total-line.faint span,.total-line.faint strong{color:#767f86}
.total-line.grand{margin-top:4px;align-items:baseline}
.total-line.grand span{color:#fff;font-size:12px}
.total-line.grand strong{font-size:24px;font-weight:700;letter-spacing:-.02em}

.add-cart{
  background:var(--red);color:var(--on-red);border:0;border-radius:var(--radius-sm);
  padding:11px 14px;font-size:13.5px;font-weight:700;cursor:pointer;width:100%;
}
.add-cart:hover{background:var(--red-dark)}

/* --------------------------------------------------------- yan panel */
/* Not 9 — Kullanıcı geri bildirimi (28 Ağustos): az içerikli bir makinede
   (az varyant / az opsiyon) yan panel(ler) yine de görsel panelin tam
   yüksekliğine ("stretch") zorlanıyordu; bu da içeriğin altında devasa,
   anlamsız bir boşluk bırakıyordu — hem dikey hem yatay görünümde.
   align-self:start ile .config-side artık kendi içeriği kadar yer kaplar
   (görsel panelin boyuna eşitlenmeye zorlanmaz), max-height:100% ile de
   mevcut alanı aşamaz — uzun opsiyon listeleri yine kendi içinde kayar
   (bkz. .panel-body{overflow-y:auto}). */
.config-side{min-height:0;overflow:hidden;display:flex;align-self:start;max-height:100%}
.side-columns{display:grid;grid-template-columns:minmax(190px,235px) minmax(0,1fr);gap:14px;min-height:0;width:100%}
.side-columns:has(.model-panel:only-child),
.side-columns:not(:has(.model-panel)){grid-template-columns:minmax(0,1fr)}
/* Donanım paneli yoksa (yalnızca ürün seçimi varsa) tek panel tüm yüksekliği
   kaplıyor ama içerik kısa olabiliyor — altta anlamsız boş alan bırakmak
   yerine içeriği dikeyde ortalıyoruz (dikey ve yatay görünümde aynı). */
.side-columns:has(.model-panel:only-child) .model-panel .panel-body{justify-content:center}
/* Not 9 (devam) — yalnızca DİKEY (grid tabanlı) düzende geçerli: satırı
   sınırlı (minmax(0,1fr)) bir ızgara izine çeviriyoruz ki her panel
   (.side-panel) kendi içeriği kadar küçülebilsin (align-self:start) ama
   gerektiğinde mevcut alanı aşmasın (max-height:100%) — kısa panel kısa
   kalır, uzun panel kendi içinde kayar. YATAY düzende .side-columns zaten
   flexbox'a geçiyor (aşağıda), bu kural orada devre dışı kalmalı; aksi
   halde align-self panelin GENİŞLİĞİNİ daraltır (flex-column'da cross-
   axis yatay olduğu için) — bu yüzden :not(.layout-horizontal) ile
   kapsam sınırlanıyor. */
.configurator:not(.layout-horizontal) .side-columns{grid-template-rows:minmax(0,1fr)}
.configurator:not(.layout-horizontal) .side-panel{align-self:start;max-height:100%}
.side-panel{
  display:flex;flex-direction:column;min-height:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.panel-heading{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:14px 16px 10px;border-bottom:1px solid var(--line-soft);
}
.panel-heading .kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.panel-heading h2{margin:3px 0 0;font-size:17px;letter-spacing:-.01em}
.source-badge{font-size:10.5px;color:var(--muted);background:var(--line-soft);border-radius:999px;padding:3px 9px;white-space:nowrap}
.panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px}

.control-section{display:flex;flex-direction:column;gap:7px}
.control-label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.control-label span{color:var(--ink);font-weight:600}
.segmented{display:flex;flex-wrap:wrap;gap:6px}
.segment{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);
  padding:7px 13px;font-size:13px;cursor:pointer;min-width:42px;
}
.segment:hover{border-color:var(--red-text)}
.segment.active{background:var(--panel);color:#fff;border-color:var(--panel);font-weight:600}

.search-input{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:13px;
}
.option-categories{display:flex;flex-wrap:wrap;gap:6px}
.category-chip{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:5px 12px;font-size:12px;cursor:pointer;
}
.category-chip.active{background:var(--panel);color:#fff;border-color:var(--panel);font-weight:600}

.option-list{display:flex;flex-direction:column;gap:8px}
.option-card{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;cursor:pointer;text-align:left;transition:border-color .14s ease;
}
.option-card:hover{border-color:var(--red-text)}
.option-card.selected{border-color:var(--red-text);background:var(--tint-soft)}
.option-image img{width:56px;height:44px;object-fit:contain}
/* Fiyat listesinde fotografi olmayan opsiyonlar. Eskiden makinenin kendi
   fotografina dusuluyordu; opsiyon yanlis urun gibi okunuyordu. */
.gorsel-yok{display:flex;align-items:center;justify-content:center;
  width:56px;height:44px;border:1px dashed var(--line);border-radius:8px;
  background:var(--line-soft);color:var(--muted)}
.gorsel-yok svg{width:22px;height:22px}
.selected-option-media .gorsel-yok{width:100%;height:100%;border-radius:0;border:0;background:transparent}
.selected-option-media .gorsel-yok svg{width:26px;height:26px}
.option-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.option-copy strong{font-size:13px;line-height:1.3}
.option-copy small{font-size:11px;color:var(--muted)}
.option-price{
  font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:9px;
}
.option-price .toggle{
  width:34px;height:19px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto;
}
.option-price .toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .16s ease;
}
.option-card.selected .option-price .toggle{background:var(--red)}
.option-card.selected .option-price .toggle::after{transform:translateX(15px)}

/* fiyat listesinde satırı olmayan opsiyon — gizlenmez, uyarı ile gösterilir */
.option-card.unpriced{
  opacity:.65;cursor:not-allowed;border-style:dashed;
  background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(0,0,0,.025) 10px 20px);
}
.option-card.unpriced .option-image img{filter:grayscale(1)}
.unpriced-price{
  font-size:11px;font-weight:700;color:var(--warn);background:var(--warn-bg);
  border:1px solid #f0d79a;border-radius:999px;padding:4px 10px;
}
.empty-state{font-size:13px;color:var(--muted);padding:16px 0;text-align:center}

/* --- Not 6 (v3): yatay düzen — sağdaki iki panel alt alta.
   Not 6 (v2)'de CSS grid'de "auto" satır + yüzde max-height kombinasyonu
   bazı makinelerde (donanım paneli VARKEN) satırın 0'a çökmesine ve
   panelin tamamen boş görünmesine yol açıyordu (Kullanıcı geri bildirimi).
   Flexbox'a geçildi: üst panel (ürün seçimi) içeriğine göre büyür, sabit
   bir px tavanında kendi içinde kaydırılır; alt panel (donanım) kalan
   tüm alanı kaplar — çökme riski olmayan, öngörülebilir bir düzen. */
.layout-horizontal .side-columns{
  display:flex;flex-direction:column;gap:14px;min-height:0;
}
/* max-height yalnızca donanım paneli DE varsa uygulanır — tek panel
   (yalnızca ürün seçimi) kaldığında sütunun tamamını kaplamalı, yoksa
   altta boş bir alan kalıyordu (Kullanıcı geri bildirimi). */
/* flex:0 1 auto iken panel, donanim paneliyle birlikte kucululup icerigini
   kendi icinde kaydirmak zorunda kaliyordu ("sekme icinde asagi kaydirmayalim"
   geri bildirimi). flex:0 0 auto ile once kendi icerigi kadar yer alir; tavan
   hem piksel hem de sutunun yuzdesi olarak sinirlidir, boylece kisa ekranlarda
   donanim panelini eziyor duruma dusmez. */
.layout-horizontal .side-columns:has(.option-panel) > .model-panel{flex:0 0 auto;max-height:min(340px,45%);min-height:0}
.layout-horizontal .side-columns > .option-panel{flex:1 1 auto;min-height:0}
.layout-horizontal .side-columns:has(.model-panel:only-child),
.layout-horizontal .side-columns:not(:has(.model-panel)){
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
}
.layout-horizontal .selected-options-wrap{max-height:18vh}

/* =====================================================================
   SEPET ÇEKMECESİ
   ===================================================================== */
.drawer-backdrop{position:fixed;inset:0;background:rgba(20,23,26,.42);z-index:40}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(430px,92vw);background:var(--surface);
  z-index:41;transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);
}
.cart-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:2px 0 0;font-size:18px}
.drawer-head .kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.icon-button{background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
.drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.drawer-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.drawer-total{display:flex;justify-content:space-between;font-size:14px}
.drawer-total strong{font-size:19px;font-variant-numeric:tabular-nums}
.cart-line{display:grid;grid-template-columns:60px 1fr;gap:10px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px}
.cart-line>img{width:60px;height:52px;object-fit:contain}
.cart-line-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-line-copy strong{font-size:13px}
.cart-line-copy code{font-size:11px;color:var(--muted)}
.cart-line-copy small{font-size:11px;color:var(--muted)}
.cart-line-terms{font-size:10.5px;color:var(--red-text);font-weight:600}
.cart-line-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:8px}
.cart-line-actions>strong{margin-left:auto;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.qty button{background:none;border:0;cursor:pointer;font-size:15px;color:var(--muted);padding:0 4px}
.link-button{background:none;border:0;color:var(--muted);font-size:11.5px;cursor:pointer;text-decoration:underline}
.link-button.danger{color:var(--red-text)}
.button{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);padding:9px 16px;font-size:13px;cursor:pointer}
.button.red{background:var(--red);border-color:var(--red);color:var(--on-red);font-weight:700}

/* =====================================================================
   SİPARİŞ / ÇIKTI EKRANI
   ===================================================================== */
.quote-page{overflow-y:auto;padding-right:6px}
.quote-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.quote-toolbar h1{margin:4px 0 0;font-size:24px}
.quote-toolbar .kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.quote-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Not 4 — KDV rejimi */
.vat-regime-bar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.vat-regime-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vat-regime-choices{display:flex;gap:6px;flex-wrap:wrap}
.regime-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:12.5px;cursor:pointer}
.regime-chip.active{background:var(--panel);color:#fff;border-color:var(--panel);font-weight:600}
.vat-regime-help{flex:1 1 100%;margin:0;font-size:12px;color:var(--muted)}

.quote-paper{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.quote-empty{text-align:center;padding:60px 26px;display:flex;flex-direction:column;gap:12px;align-items:center}
.quote-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:16px}
.quote-header img{height:36px}
.quote-meta{display:flex;flex-direction:column;text-align:right;gap:2px}
.quote-meta strong{font-size:14px;letter-spacing:.05em}
.quote-meta small{font-size:11.5px;color:var(--muted)}
.regime-stamp{color:var(--red-text)!important;font-weight:700}
.customer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:4px}
.field.wide{grid-column:span 2}
.field span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field textarea{border:1px solid var(--line);border-radius:6px;padding:7px 10px;font:inherit;font-size:13px;width:100%}
.table-scroll{overflow-x:auto}
.order-table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.order-table th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:8px 10px}
.order-table td{border-bottom:1px solid var(--line-soft);padding:10px;vertical-align:top}
.order-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Sayı sütunlarının başlığı da sağa yaslı: "Adet", "Birim fiyat", "Tutar"
   başlıkları kendi değerlerinin tam üstünde durur. */
.order-table th.num{text-align:right}
.order-table th:first-child,.order-table td:first-child{width:34px}
.proforma-rate-field .percent-input input{width:92px}
.order-machine{display:flex;gap:10px;align-items:flex-start}
.order-machine img{width:64px;height:50px;object-fit:contain;flex:0 0 auto}
.order-machine code{display:block;font-size:11px;color:var(--muted);margin:2px 0 4px}
.option-tags{display:flex;flex-wrap:wrap;gap:4px}
.option-tag{font-size:10.5px;background:var(--line-soft);border-radius:999px;padding:2px 8px;color:var(--ink-soft)}
.quote-summary{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.9fr);gap:24px;margin-top:20px}
.terms strong{font-size:12px}
.terms p{font-size:12px;color:var(--muted);line-height:1.6;margin:6px 0}
.source-note{font-size:11px!important}
.totals{display:flex;flex-direction:column;gap:6px;align-self:start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.total-row{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.total-row strong{font-variant-numeric:tabular-nums}
.total-row.faint span,.total-row.faint strong{color:var(--muted)}
.total-row.note strong{color:var(--warn)}
.total-row.grand{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-size:14px}
.total-row.grand strong{font-size:20px;font-weight:700}
.signature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.signature{border-top:1px solid var(--ink);padding-top:6px;font-size:11.5px;color:var(--muted);text-align:center}
.quote-footer{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:22px;border-top:1px solid var(--line-soft);padding-top:10px}

/* Yeni not — belge tipi seçimi (Sipariş fiyat listesi / Proforma Invoice) */
.doc-type-toggle{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.doc-type-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-soft)}
.doc-type-chip.active{background:var(--panel);color:#fff;border-color:var(--panel)}

/* KDV dahil/hariç görünüm anahtarı + sayfa iskontosu, KDV rejim çubuğunun içinde */
.vat-display-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.doc-discount-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.doc-discount-field .percent-input{margin-left:2px}
.doc-discount-field input{width:56px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}

/* Sipariş tablosunda satır bazlı düzenleme kontrolleri */
.row-edit-select{border:1px solid var(--line);border-radius:6px;padding:5px 6px;font:inherit;font-size:12.5px;background:var(--surface);min-width:64px}
.row-edit-percent{display:inline-flex;align-items:center;gap:3px}
.row-edit-input{width:48px;border:1px solid var(--line);border-radius:6px;padding:5px 6px;font:inherit;font-size:12.5px;text-align:right}
.row-edit-qty{width:44px}
.row-edit-price{width:78px}
.reset-price{margin-left:4px;font-size:11px}
.manual-flag{font-style:normal;color:var(--red-text);font-size:10.5px}
.print-only{display:none}

/* Yeni not 10 — Yazdır/PDF ve Sipariş talebi gönder butonları belgenin
   altına taşındı (hem sipariş hem proforma ekranı). */
.quote-bottom-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}

/* Proforma Invoice — paketleme / nakliye ücret çubuğu */
.proforma-fee-bar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fee-toggle{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.fee-toggle input{width:15px;height:15px}
.fee-label-input{border:1px solid var(--line);border-radius:6px;padding:6px 9px;font:inherit;font-size:12.5px;width:150px}
.fee-label-input:disabled,.proforma-fee-bar input:disabled{opacity:.5;background:var(--line-soft)}

/* Yeni notlar 1/2/5 — KDV rejim çubuğu ve proforma ücret çubuğu AÇIK
   (beyaz) zeminlidir; .mini-segmented / .percent-input KOYU .price-panel
   için tasarlanmıştı (açık renk yazı) — bu iki çubukta metin/kutu
   görünmüyordu. Burada açık zemine uygun renklerle geçersiz kılınıyor. */
.vat-regime-bar .percent-input,
.proforma-fee-bar .percent-input{color:var(--muted)}
.vat-regime-bar .percent-input input,
.proforma-fee-bar .percent-input input{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
.vat-regime-bar .mini-segmented button{
  border-color:var(--line);background:var(--surface);color:var(--ink-soft);
}
.vat-regime-bar .mini-segmented button.active{background:var(--panel);border-color:var(--panel);color:#fff}

/* Proforma Invoice kağıdı — taraflar, ücret satırları */
.proforma-paper .quote-header{border-bottom-color:var(--ink)}
.proforma-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.party-block{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.party-block strong{font-size:13.5px}
.party-block small{color:var(--muted);font-size:11.5px}
.party-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text);font-weight:700}
.fee-row td{color:var(--muted);font-style:italic}
.fee-row code{display:none}

/* =====================================================================
   PENCERE, BİLDİRİM, ROL DEĞİŞTİRME
   ===================================================================== */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,23,26,.5);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius);width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:17px}
#modalBody{padding:18px 20px;overflow-y:auto}
.role-intro{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 16px}
.role-block{margin-bottom:18px}
.role-block h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.role-block h4 em{font-style:normal;color:var(--red-text)}
.role-option{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;margin-bottom:6px;
}
.role-option:hover{border-color:var(--red-text)}
.role-option.active{border-color:var(--red-text);background:var(--tint-soft)}
.role-option strong{font-size:13px}
.role-option small{font-size:11px;color:var(--muted)}
.role-customer{display:flex;gap:8px}
.role-customer input{flex:1 1 auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px}
.role-hint{display:block;font-size:11px;color:var(--muted);margin-top:5px}
#roleDealerSearch{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:8px}
.role-dealer-list{max-height:230px;overflow-y:auto}
.modal-loading,.modal-error{font-size:13px;color:var(--muted)}
.modal-error{color:var(--red-text)}
.modal-actions{display:flex;justify-content:flex-end;margin-top:14px}

/* Yeni not 16 — Sipariş Geçmişi ekranı ve detay modalı */
.orders-page{overflow-y:auto;padding-right:6px}
.order-history-list{display:flex;flex-direction:column;gap:10px}
.order-history-card{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--surface);
}
.order-history-icon{width:44px;height:44px;border-radius:12px;background:var(--panel);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
.order-history-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.order-history-copy small{color:var(--red-text);font-weight:700;font-size:11px}
.order-history-copy strong{font-size:14px}
.order-history-copy span{color:var(--muted);font-size:11px}
.order-history-total{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.order-status{font-size:10px;font-weight:700;border-radius:999px;padding:4px 8px;background:var(--line-soft);color:var(--ink-soft)}
.order-status.approved,.order-status.completed{background:#e5f7ec;color:#096f39}
.order-status.submitted,.order-status.reviewing{background:#eef3ff;color:#245edb}
.order-status.rejected,.order-status.cancelled{background:#ffe8ea;color:#a80612}
.order-detail-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.order-detail-summary div{background:var(--surface);border-radius:var(--radius-sm);padding:10px 12px}
.order-detail-summary span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.order-detail-summary strong{display:block;margin-top:4px;font-size:13px}
.order-detail-items{display:flex;flex-direction:column;gap:8px}
.order-detail-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:10px 12px}
.order-detail-item small{color:var(--muted);display:block}
.empty-detail-note{font-size:13px;color:var(--muted)}

.toast-host{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--panel);color:#fff;border-radius:999px;padding:10px 20px;font-size:13px;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}

/* =====================================================================
   DUYARLILIK (Not 7)
   ===================================================================== */
@media (min-width:1400px){
  /* Görselin sağ üstünde yüzen panel — ekran görüntüsündeki tasarım */
  .visual-top{padding-right:330px}
}

/* 1400px altında panel yüzmeyi bırakır, görselin altına iner */
@media (max-width:1399px){
  .configurator,.configurator.layout-horizontal{
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"visual side" "price side";
  }
  .configurator.no-side,.configurator.no-side.layout-horizontal{
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"visual" "price";
  }
  .price-panel-host{
    grid-area:price; justify-self:stretch; align-self:stretch;
    width:auto; margin:0; max-height:none; overflow:visible;
  }
  .price-panel{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:14px}
  .price-panel>*{min-height:0}
  .price-lines{flex:1 1 180px}
  .price-settings-toggle{flex:1 1 240px;width:auto}
  .price-settings{flex:1 1 100%}
  .price-totals{flex:1 1 220px;border-top:0;padding-top:0}
  .add-cart{flex:0 0 auto;width:auto;min-width:230px}
}

@media (max-width:1100px){
  .configurator,.configurator.layout-horizontal{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"visual" "price" "side";
  }
  .configurator.no-side,.configurator.no-side.layout-horizontal{
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"visual" "price";
  }
  .side-columns{grid-template-columns:minmax(180px,220px) minmax(0,1fr)}
  .quote-summary{grid-template-columns:minmax(0,1fr)}

  .root-group-visual{min-height:190px}
  .root-group-visual img{max-height:220px}
}

/* Yeni not (boyutlandırma düzeltmesi) — 861-1100px aralığı (tablet ya da
   sunum sırasında küçültülmüş masaüstü penceresi): yukarıdaki kural
   görsel + fiyat + yan paneli SABİT, taşmayan (overflow:hidden) bir
   yüksekliğe sıkıştırıyordu. Üç panel aynı anda aynı sabit alana
   zorlanınca (özellikle pencere kısaltıldığında) hepsi anlamsızca
   küçülüyor, opsiyon listesi okunaksız hale geliyordu — kullanıcı
   bildirimi: "tam ekranda ayrı küçültülmüş ekranda ayrı sorunlar".
   <=860px (telefon) zaten sekmeli tek panel gösterdiği için bu aralığın
   DIŞINDA bırakıldı (min-width:861px) — oradaki tasarım değişmedi.
   Bu aralıkta artık normal bir sayfa gibi DİKEY KAYAR; her panel kendi
   içeriğine göre makul bir minimum yükseklik alır, hiçbiri zorla
   küçültülmez. */
@media (max-width:1100px) and (min-width:861px){
  #app{overflow-y:auto;overflow-x:hidden}
  .page{height:auto;min-height:100%}
  .configurator,.configurator.layout-horizontal{
    height:auto;overflow:visible;
    grid-template-rows:minmax(380px,60vh) auto minmax(420px,auto);
  }
  .configurator.no-side,.configurator.no-side.layout-horizontal{
    grid-template-rows:minmax(380px,60vh) auto;
  }
  .visual-panel{min-height:380px}
  .config-side,.side-columns{max-height:none}
  .configurator:not(.layout-horizontal) .side-panel{max-height:none}
}

/* Menü, masaüstü ızgarasının ORTA sütununa yerleşir; ama konfigüratörde sağ
   eylem alanı (opsiyona göre resim + yatay görünüm + kurlar + kullanıcı +
   sepet) tek başına ~880 px tuttuğu için 1700 px altında menüye yer kalmıyor
   ve menü ya dikey yığına düşüyor ya da yatay kaydırma arkasında gizleniyordu
   (1366 px'de menünün 241 px'i görünmüyordu). Bu blok menüyü kendi tam
   genişlikteki satırına alır: hiçbir bağlantı gizlenmez, başlık yükseklığı
   1366 px'de 275 px'den 145 px'e iner. */
@media (max-width:1700px){
  :root{--header-h:auto}
  .site-header{align-items:center}
  .brand-button{order:1}
  .header-actions{order:2}
  .header-context{grid-column:1/-1;order:3;min-height:0}
  .main-nav{grid-column:1/-1;order:4;justify-content:center}
}

/* Yeni not (boyutlandırma düzeltmesi) — üst menü (site-header) daha önce
   yalnızca <=860px altında sıkışık düzene geçiyordu; 861-1100px aralığında
   (tablet ya da sunum sırasında küçültülmüş masaüstü penceresi) hâlâ TAM
   masaüstü genişliğinde 3 sütunlu ızgarayı (logo | tüm menü linkleri |
   kur çipleri + kullanıcı + sepet) kullanmaya çalışıyor, sığmayınca menü
   linkleri üst üste dikey bir yığın hâline geliyor ve alttaki içerikle
   görsel olarak çakışıyordu — kullanıcı bildirimi: "sunum yaparken
   ekranlar anlaşılmaz oluyor". Bu blok, aynı sıkışık/kaydırmalı menü
   düzenini artık 1280px'in altındaki HER genişlikte devreye sokar
   (<=860 bloğu bunu miras alır, kendi içinde tekrar tanımlamaz).
   Sınır 1100 -> 1280 px'e çekildi: yarım ekran kullanılan bir masaüstü
   penceresi (1100-1280) da bu sıkışık düzeni almalı. */
@media (max-width:1280px){
  :root{--header-h:auto}
  .site-header{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:6px;padding:8px 12px}
  .header-context{grid-column:1/-1;order:3;min-height:0}
  .main-nav{grid-column:1/-1;order:4;justify-content:flex-start;overflow-x:auto;gap:2px;flex-wrap:nowrap}
  .nav-link{padding:5px 10px;font-size:12.5px}
  .header-actions{grid-column:2;order:2;gap:6px;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  .rate-chip,#layoutToggle,#photoModeGroup{display:none}
  .cart-button{padding:7px 12px;font-size:12px}
  .session-button{padding:5px 10px;font-size:11.5px;max-width:130px}
  .session-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #app{padding:8px 12px 10px}
}

/* Küçük ekranlarda konfigüratöre girilince üst taraftaki kalabalık (menü
   bağlantıları, kullanıcı rozeti ve fiyat listesi tarihi) gizlenir; bunlar ana
   ekranlarda görünmeye devam eder. GERİ DÖNÜŞ DÜĞMESİ İSE HER BOYUTTA KALIR —
   kullanıcı bildirimi: "konfigüre ederken bir önceki menüye dönme yok". */
@media (max-width:1280px){
  body[data-route="configurator"] .main-nav,
  body[data-route="configurator"] #sessionChip{display:none}
  body[data-route="configurator"] .header-context-meta{display:none}
  body[data-route="configurator"] .site-header{padding:6px 12px}
}

/* 700 px üstünde geri dönüş düğmesi logonun YANINDA durur (üçüncü bir sütun
   açılır); daha dar ekranlarda başlık iki sütuna düşer ve düğme kendi tam
   genişlikteki satırına iner, böylece uzun etiket kesilmez. */
@media (min-width:701px) and (max-width:1280px){
  body[data-route="configurator"] .site-header{grid-template-columns:auto 1fr minmax(0,auto)}
  body[data-route="configurator"] .brand-button{grid-column:1;order:1}
  body[data-route="configurator"] .header-context{grid-column:2;order:2;justify-self:start;align-self:center;margin-top:0}
  body[data-route="configurator"] .header-actions{grid-column:3;order:3}
}
@media (max-width:700px){
  body[data-route="configurator"] .header-context{grid-column:1/-1;order:3;margin-top:2px}
  .back-button{padding:9px 14px;font-size:13px}
  .brand-button img{height:26px}
  .cart-button .cart-label{display:none}
  .cart-button{min-height:40px;padding:8px 10px;gap:6px}
  .cart-icon{flex-shrink:0}
}

@media (max-width:860px){
  /* Telefon / küçük tablet: sekmeli tek panel.
     Seçilen opsiyonlar şeridi ve fiyat paneli hangi sekme açık olursa olsun
     ekranda kalır (Not 1). Yalnız fotoğraf ve galeri gizlenir. */
  .mobile-tabs{
    display:flex;gap:6px;overflow-x:auto;grid-row:1;grid-column:1;
  }
  .mobile-tabs button{
    border:1px solid var(--line);background:var(--surface);border-radius:999px;
    padding:7px 16px;font-size:13px;cursor:pointer;white-space:nowrap;
  }
  .mobile-tabs button.active{background:var(--panel);color:#fff;border-color:var(--panel);font-weight:600}

  .configurator,.configurator.layout-horizontal{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(150px,1fr) auto auto;
    grid-template-areas:none;
    gap:8px;
  }
  .config-side{grid-row:2;grid-column:1}
  .visual-panel{grid-row:3;grid-column:1;padding:12px}
  .price-panel-host{
    grid-row:4;grid-column:1;justify-self:stretch;align-self:stretch;
    width:auto;margin:0;max-height:none;overflow:visible;
  }
  /* Yan sütun yoksa telefonda boşluk bırakmadan görsel + fiyat panelini yukarı çek */
  .configurator.no-side{grid-template-rows:auto minmax(0,1fr) auto}
  .configurator.no-side .visual-panel{grid-row:2}
  .configurator.no-side .price-panel-host{grid-row:3}
  /* 1399px bloğunda açılan flex-wrap, sütun yönünde çok sütunlu bir
     yerleşim yaratıp panel yüksekliğini bozuyordu. Telefonda kapatılır. */
  .price-panel{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .price-lines,.price-settings-toggle,.price-settings,.price-totals,.add-cart{flex:0 0 auto}
  .add-cart{width:100%}
  .mobile-tabs{flex:0 0 auto;min-height:38px;align-items:center}
  .mobile-tabs button{flex:0 0 auto}
  .side-columns{grid-template-columns:minmax(0,1fr)}

  /* Telefonda AYNI ANDA TEK panel açıktır. Yatay düzenin "ürün seçimi paneli
     en fazla %45" tavanı (.layout-horizontal ... > .model-panel) burada da
     uygulanıyordu: seçim paneli 168px'lik bir kutuya sıkışıp kendi içinde
     kayıyor, gizli donanım panelinin yeri de altta boş duruyordu — sıra
     sayısı düğmeleri yarım görünüyordu. Telefonda sayfa artık 861-1100px
     aralığındaki gibi normal kayar; açık olan panel sütunun tamamını alır. */
  #app{overflow-y:auto;overflow-x:hidden}
  .page{height:auto;min-height:100%}
  .configurator,.configurator.layout-horizontal{
    height:auto;overflow:visible;grid-template-rows:auto auto auto auto;
  }
  .configurator.no-side,.configurator.no-side.layout-horizontal{grid-template-rows:auto auto auto}
  .config-side,.side-columns{max-height:none;min-height:0}
  .config-side{align-self:stretch}
  .side-panel,
  .configurator:not(.layout-horizontal) .side-panel,
  .layout-horizontal .side-columns:has(.option-panel) > .model-panel,
  .layout-horizontal .side-columns > .option-panel{
    flex:1 1 auto;max-height:none;min-height:0;align-self:stretch;
  }
  .panel-body{overflow:visible}
  .configurator[data-mobile-tab="visual"] .visual-panel{min-height:min(60vh,380px)}
  /* Sayfa kaydığı için "sipariş listesine ekle" ekrandan çıkmasın. */
  .price-panel-host{position:sticky;bottom:0;z-index:5}

  .configurator[data-mobile-tab="visual"] .config-side{display:none}
  .configurator[data-mobile-tab="visual"] .visual-panel{grid-row:2}
  .configurator[data-mobile-tab="model"] .option-panel{display:none}
  .configurator[data-mobile-tab="options"] .model-panel{display:none}
  .configurator:not([data-mobile-tab="visual"]) .visual-top,
  .configurator:not([data-mobile-tab="visual"]) .machine-stage,
  .configurator:not([data-mobile-tab="visual"]) .gallery-strip{display:none}
  .configurator:not([data-mobile-tab="visual"]) .visual-panel{display:block;align-self:start}
  .configurator:not([data-mobile-tab="visual"]) .selected-options-wrap{border-top:0;padding-top:0}

  /* Telefonda seçilen opsiyonlar tek satır yatay şerittir — yer kaplamaz,
     ama hep görünür (Not 1). */
  .selected-options-wrap{max-height:none;min-height:0}
  .selected-options-list{
    display:flex;flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding-bottom:2px;
  }
  .selected-option-card{flex:0 0 auto;width:158px}
  .selected-options-head{margin-bottom:6px}

  /* Not 2/3 (telefon) — büyük kartlar tek sütuna iner, görsel üstte kalır */
  .root-group-grid{gap:14px}
  .root-group-card{padding:18px;border-radius:20px;gap:12px}
  .root-group-copy{max-width:100%}
  .root-group-visual{min-height:160px}
  .root-group-visual img{max-height:190px}
  .subgroup-grid,.family-pick-grid{gap:12px}
  .subgroup-card{grid-template-columns:1fr;min-height:0;gap:12px;padding:16px}
  .subgroup-media{min-height:150px}
  .subgroup-copy strong{font-size:21px}
  .family-pick-card{grid-template-columns:1fr;min-height:0;gap:10px;padding:14px}
  .family-pick-media{min-height:110px}

  /* Fiyat paneli telefonda özet gösterir; "Fiyat ayarları" açılınca detaylanır. */
  .price-panel{padding:10px 12px;gap:8px}
  .price-lines{display:none}
  .price-totals{border-top:0;padding-top:0}
  .price-totals .total-line:not(.grand){display:none}
  .price-panel.settings-open .price-lines{display:flex}
  .price-panel.settings-open .price-totals .total-line{display:flex}
  .price-panel.settings-open .price-totals{border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
  .total-line.grand strong{font-size:20px}
  .add-cart{padding:10px 14px}
}

@media (max-width:560px){
  .session-button{max-width:92px;padding:5px 8px}
  .session-button b{display:none}
  .cart-button{padding:6px 10px;font-size:11.5px}
  .quote-paper{padding:16px}
  .customer-grid{grid-template-columns:minmax(0,1fr)}
  .field.wide{grid-column:span 1}
  .signature-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .selected-options-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .doc-type-toggle,.doc-type-chip{width:100%}
  .doc-type-chip{text-align:center}
  .proforma-fee-bar{flex-direction:column;align-items:stretch}
  .fee-label-input,.proforma-fee-bar .percent-input{width:100%}
  .vat-display-toggle,.doc-discount-field{width:100%;justify-content:space-between}
}

/* =====================================================================
   YAZDIRMA
   ===================================================================== */
@media screen and (max-width:860px){
  /* iOS Safari, 16px'ten kucuk yazi tipli bir alana dokunulunca sayfayi otomatik
     yakinlastirir ve kullanici sayfayi kayik/zoomlu birakir. Telefonda tum form
     alanlarini 16px'e cikariyoruz; dar sayisal kutular yeni punto sigsin diye
     birkac piksel genisletildi. Kural yalnizca "screen" icin gecerlidir,
     yazdirma/PDF ciktisina dokunmaz. */
  .field input,.field textarea,.field select,
  .role-customer input,
  .fee-label-input,
  .doc-discount-field input,
  .row-edit-input,.row-edit-select,
  .fx-inputs input,.percent-input input{font-size:16px}
  .doc-discount-field input{width:64px}
  .row-edit-input{width:62px}
  .row-edit-select{min-width:78px}
  .fx-inputs input,.percent-input input{width:78px}
}

@media screen and (max-width:400px){
  .option-card{grid-template-columns:40px minmax(0,1fr);gap:6px 10px;padding:8px}
  .option-image{grid-row:1/3}
  .option-image img{width:40px;height:40px}
  .option-price{grid-column:2;justify-content:space-between}
}

/* Telefon yatayken / pencere kısayken panelleri erişilemez ölçüye
   sıkıştırma. Normal yüksek ekran düzeni korunur; kısa ekranda ana içerik
   kayar, model/opsiyon listesi kendi içinde kullanılabilir kalır. */
@media screen and (max-width:860px) and (max-height:700px){
  #app{overflow-y:auto;overflow-x:hidden}
  .configurator,.configurator.layout-horizontal{height:auto;min-height:100%;overflow:visible;grid-template-rows:auto minmax(210px,calc(100dvh - 360px)) auto auto}
  .configurator.no-side,.configurator.no-side.layout-horizontal{grid-template-rows:auto minmax(260px,calc(100dvh - 260px)) auto}
  .configurator[data-mobile-tab="visual"] .visual-panel{min-height:260px}
}
@media screen and (min-width:1101px) and (max-height:600px){
  #app{overflow-y:auto;overflow-x:hidden}
  .configurator,.configurator.layout-horizontal{min-height:560px}
}

/* Keep primary touch controls usable on tablets and narrow windows. */
@media screen and (max-width:1024px), screen and (pointer:coarse){
  .main-nav .nav-link,.header-actions .ghost-button,.header-actions .session-button,
  .header-actions .cart-button,.mobile-tabs button{min-height:44px}
  .icon-button{min-width:44px;min-height:44px}
  .cart-line .qty button{min-width:36px;min-height:44px}
  .search-input,.cart-drawer input{font-size:16px}
}
@media print{
  /* Yazdirmada tema degiskenlerini acik tema degerlerine dondurme isi
     artik ../assets/sakalak-base.css icindeki yazdirma blogunda yapiliyor.
     Buradaki kopya kaldirildi: daha sonra yuklendigi icin ortak dosyadaki
     iyilestirilmis --muted degerini geri eskiye cekiyordu.
     Asagisi yalnizca bu yuzeye ozgu gizleme kurallari. */
  body{overflow:visible;height:auto;background:#fff;color:var(--ink)}
  .site-header,.no-print,.cart-drawer,.drawer-backdrop,.modal-backdrop,
  .toast-host,.impersonation-bar,.mobile-tabs{display:none!important}
  #app{overflow:visible;padding:0}
  .quote-page{overflow:visible}
  .quote-paper{border:0;box-shadow:none;padding:0}
  .field input,.field textarea{border:0;padding:0}
  .table-scroll{overflow:visible}
  .order-table{min-width:0}
  .print-only{display:inline}
  td.print-only{display:table-cell}
  .party-block{border:0;background:transparent;padding:0}
}

/* Katalog fiyatlarının KDV DAHİL olduğunu ekranda belli eden küçük etiketler
   (bkz. pricing.js başlığındaki not). Fiyat panelinde katalog satırlarının
   yanında ve opsiyon panelinin başlığında görünür. */
.vat-hint{
  font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:1px 6px;margin-left:6px;white-space:nowrap;
}
.price-panel .vat-hint{color:#9aa3aa;border-color:rgba(255,255,255,.18)}
.panel-vat-note{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.manual-options{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:18px;margin-top:4px;min-width:0}
.manual-heading h2{margin:5px 0;font-size:17px}.manual-heading small{color:var(--muted);font-size:11px}
.manual-option{display:grid;gap:9px;padding:10px;background:var(--line-soft);border-radius:10px;min-width:0}
.manual-option label{display:grid;gap:5px;font-size:12px;min-width:0}
.manual-option input{width:100%;min-width:0;box-sizing:border-box;min-height:40px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);color:var(--text);font:inherit}
.manual-options>.button{white-space:normal;min-height:44px}
.manual-options>.button[disabled]{opacity:.45;cursor:not-allowed}
.manual-uyari{color:var(--muted);font-size:11px}
.manual-price-field{display:flex;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);overflow:hidden;caret-color:var(--ink)}
.manual-price-field:focus-within{border-color:var(--ink-soft)}
.manual-price-field i{font-style:normal;font-weight:700;color:var(--muted);
  padding:0 4px 0 12px;flex:0 0 auto}
.manual-price-field input{border:0;border-radius:0;background:transparent;
  caret-color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600;
  letter-spacing:.01em}
.manual-option input.hatali{border-color:var(--red);box-shadow:0 0 0 2px rgba(226,35,26,.16)}
.manual-price-field:has(input.hatali){border-color:var(--red);box-shadow:0 0 0 2px rgba(226,35,26,.16)}
.manual-price-field input.hatali{box-shadow:none}
.manual-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
/* "Kaydet" birincil eylem: kutunun icinde en belirgin dugme o olmali. */
.manual-save{background:var(--red);color:#fff;border-color:var(--red);font-weight:700;
  min-height:38px;padding:0 18px}
.manual-save:hover{filter:brightness(1.06)}
/* Kayitli satir: ad kirpilmasin. Ad+tutar ust satirda, Duzenle/Sil altta.
   Onceki yatay dizilimde dugmeler yeri kapip adi "a..."ya dusuruyordu. */
.manual-option.kayitli{display:grid;gap:8px;padding:10px 12px}
.manual-kayit{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap;
  justify-content:space-between}
.manual-kayit strong{font-size:13px;font-weight:600;min-width:0;flex:1 1 120px;
  overflow-wrap:anywhere;line-height:1.35}
/* Tutar, katalog opsiyonlarinin fiyatiyla ayni tipografi (.option-price):
   ayni punto, ayni kalinlik, ayni rakam hizasi ve binlik ayraci. */
.manual-tutar{font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Birim fiyat kirilimi — HER KALEM KENDI SATIRI. Opsiyon adi "Makine ve
   donanim", tutari "Birim fiyat" sutununun tam altina duser; hucre sirasi
   ana satirla birebir ayni uretilir. Makine satiri ile kirilim satirlari
   ayni <tbody class="order-line-group"> icinde oldugundan yazdirmada
   birbirinden kopmuyor. */
.order-line-group{break-inside:avoid;page-break-inside:avoid}
.kirilim-basligi{display:block;margin-top:6px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.opsiyon-satiri>td{border-bottom:0;padding-top:2px;padding-bottom:2px;
  font-size:12px;font-weight:400;color:var(--ink-soft)}
.opsiyon-satiri:last-child>td{padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
/* Makine gorseli 64px + 10px bosluk: ad tam makine adinin altina gelsin. */
.opsiyon-ad{padding-left:84px}
.opsiyon-fiyat{font-variant-numeric:tabular-nums;white-space:nowrap}
.opsiyon-satiri.taban>td{font-weight:600;color:var(--ink)}
.manuel-etiket{font-style:normal;font-size:10px;color:var(--red-text);
  border:1px solid currentColor;border-radius:999px;padding:0 5px;margin-left:6px}

/* --- Yazdirma: birim fiyat kirilimi ------------------------------------
   Bu blok dosyanin SONUNDA durmak zorunda; ayni ozgullukteki temel
   kurallardan sonra gelmezse kagitta gecersiz kalir. */
@media print{
  .opsiyon-satiri>td{padding-top:1px;padding-bottom:1px;font-size:9.5px}
  .opsiyon-satiri:last-child>td{padding-bottom:7px}
  .opsiyon-ad{padding-left:74px}
  .kirilim-basligi{font-size:8px;margin-top:4px}
  .order-line-group{break-inside:avoid;page-break-inside:avoid}
}

/* Sipariş düzenleme (revizyon) bandı */
.order-edit-banner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) auto;gap:14px;align-items:center;margin:0 0 14px;padding:14px 16px;border:2px solid var(--red, #e2231a);border-radius:14px;background:var(--surface, #fff)}
.order-edit-copy strong{display:block;font-size:15px}
.order-edit-copy span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.order-edit-reason{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.order-edit-reason textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;color:var(--ink);background:var(--surface, #fff);resize:vertical}
.order-history-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){.order-edit-banner{grid-template-columns:1fr}}

/* Müşteri teklifi (bayinin kendi müşterisine) */
.cq-info{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-alt, #f6f7f4);font-size:13px;color:var(--ink-soft)}
.cq-parties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;margin-bottom:14px}
.cq-party{display:grid;gap:3px;align-content:start;border:1px solid var(--line);border-radius:10px;padding:12px}
.cq-party .party-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text, #c01d17)}
.cq-party small{color:var(--muted);font-size:12px}
.cq-options{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.order-cq-tag{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.order-saved .modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
@media (max-width:860px){.cq-parties{grid-template-columns:1fr}}

/* İmza: sabit alt şerit yerine kayan sayfanın en sonunda, küçük.
   (Bu uygulamada gövde kaymaz, sayfalar kendi içinde kayar.) */
body > .site-signature{display:none}
.quote-page::after,.orders-page::after,.category-page::after{
  content:"Designed and developed by Mehmet \00D6zmen";
  display:block;text-align:center;font-size:10.5px;letter-spacing:.01em;
  color:var(--muted);opacity:.6;padding:22px 0 6px;
}

/* === 29.09 TELEFON DÜZENİ === ===================================== */
.add-cart-short{display:none}
.edit-reason-bottom{margin-top:16px}
.impersonation-exit-text{margin-left:6px}
#impersonationExit{display:inline-flex;align-items:center}

@media (max-width:860px){
  /* Temsil çubuğu: tek satır, uzun bayi adı kısalır; çıkış düğmesi küçük. */
  .impersonation-bar{flex-wrap:nowrap;gap:8px;padding:6px 12px;font-size:12px}
  .impersonation-label{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .impersonation-bar button{flex:0 0 auto;padding:5px 10px;font-size:14px;min-height:32px}
  .impersonation-exit-text{display:none}

  /* Başlık: aşağı kaydırınca gizlenir, yukarı kaydırınca geri gelir. */
  body.chrome-hidden .site-header,
  body.chrome-hidden .impersonation-bar{display:none}

  /* Fiyat paneli alta değil ÜSTE sabitlenir ve kapalıyken tek satırdır. */
  .price-panel-host{position:sticky;top:0;bottom:auto;z-index:6;grid-row:1}
  .mobile-tabs{grid-row:2}
  .config-side{grid-row:3}
  .visual-panel{grid-row:4}
  .configurator[data-mobile-tab="visual"] .visual-panel{grid-row:3}
  .configurator.no-side .visual-panel{grid-row:3}
  .configurator.no-side .price-panel-host{grid-row:1}
  .configurator,.configurator.layout-horizontal{grid-template-rows:auto auto auto auto}
  .price-panel{box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
  .price-panel:not(.settings-open){
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"toggle toggle" "total add";
    gap:6px 10px;padding:8px 10px;align-items:center;
  }
  .price-panel:not(.settings-open) .price-settings-toggle{grid-area:toggle;padding:4px 0;min-height:0;font-size:12px}
  .price-panel:not(.settings-open) .price-totals{grid-area:total}
  .price-panel:not(.settings-open) .total-line.grand{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .price-panel:not(.settings-open) .total-line.grand span{font-size:11px;opacity:.75}
  .price-panel:not(.settings-open) .total-line.grand strong{font-size:19px}
  .price-panel:not(.settings-open) .add-cart{grid-area:add;width:auto;padding:10px 14px}
  .add-cart-long{display:none}
  .add-cart-short{display:inline}
  .price-panel.settings-open{max-height:70dvh;overflow-y:auto}

  /* Sipariş geçmişi kartı: yazılar üst üste binmez. */
  .order-history-card{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"icon copy" "total total" "actions actions";gap:10px 12px;align-items:start}
  .order-history-icon{grid-area:icon}
  .order-history-copy{grid-area:copy}
  .order-history-copy small{word-break:break-word}
  .order-history-total{grid-area:total;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;gap:6px 10px;border-top:1px solid var(--line-soft);padding-top:8px}
  .order-history-actions{grid-area:actions;justify-content:stretch}
  .order-history-actions .button{flex:1 1 auto}

  /* Tüm form alanları 16px: iOS yakınlaştırması olmaz. */
  input,select,textarea{font-size:16px}
}

/* === 29.09 DENETİM: telefonda sipariş tablosu kart görünümü ============= */
.staff-order-hint{flex:1 1 100%;margin:0 0 4px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:13px;text-align:left}
@media screen and (max-width:700px){
  .quote-paper .table-scroll{overflow-x:visible}
  .quote-paper .order-table{min-width:0;display:block}
  .quote-paper .order-table thead{display:none}
  .quote-paper .order-table tbody{display:block;border-top:1px solid var(--line);padding:10px 0}
  .quote-paper .order-table tr:not(.opsiyon-satiri){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 10px;align-items:end}
  .quote-paper .order-table td{border:0;padding:0}
  .quote-paper .order-table td.print-only{display:none!important}
  .quote-paper .order-table tr:not(.opsiyon-satiri) > td:first-child{display:none}
  .quote-paper .order-table tr:not(.opsiyon-satiri) > td:nth-child(2){grid-column:1/-1}
  .quote-paper .order-table tr:not(.opsiyon-satiri) > td.num{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;white-space:normal}
  .quote-paper .order-table tr:not(.opsiyon-satiri) > td.num::before{content:attr(data-label);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .quote-paper .order-table tr:not(.opsiyon-satiri) > td.num:last-child strong{font-size:16px}
  .quote-paper .order-table tr.opsiyon-satiri{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}
  .quote-paper .order-table tr.opsiyon-satiri td:empty,.quote-paper .order-table tr.opsiyon-satiri td:first-child{display:none}
  .quote-paper .order-table .row-edit-input{width:100%;max-width:120px}
  .quote-paper .order-table .row-edit-select{width:100%;max-width:120px}
}