/* =====================================================================
   Renkler, kırılım noktaları, odak halkası, dokunma hedefi ve yazdırma
   kuralları artık ../../assets/sakalak-base.css dosyasından geliyor.
   Bu dosya yalnızca YEDEK PARÇAYA ÖZGÜ olanı içerir.

   Aşağıdaki blok bir GEÇİŞ KÖPRÜSÜ: bu stylesheet'in eski isimleri
   (--navy, --bg, --card, --text) hâlâ yüzlerce kuralda geçiyor. Hepsini
   birden yeniden adlandırmak yerine ortak token'lara bağlandılar; böylece
   koyu tema tek noktadan çalışıyor. Yeni kural yazarken ORTAK isimleri
   kullan (--deep, --paper, --surface, --ink), bunları değil.
   ===================================================================== */
:root{
  --navy:var(--deep);
  --navy2:var(--deep-2);
  --green:var(--ok-solid);
  --bg:var(--paper);
  --card:var(--surface);
  --text:var(--ink);
  /* --red, --muted, --line, --shadow, --radius ortak dosyadan gelir.
     Yarıçap bilerek 16px'ten ortak 12px'e indi: makine sipariş ve bayi
     portalı 12px kullanıyordu, kartlar yan yana konunca fark ediliyordu. */
}

/* KOYU TEMA — eskiden burada tüm sayfayı filter:invert(1) hue-rotate(180deg)
   ile ters çeviren bir kural vardı, görseller de geri çevriliyordu. Üç sorun
   çıkarıyordu: (1) marka kırmızısı ters çevrilince mavi-yeşile dönüyordu,
   (2) patlatılmış teknik resimler iki kez filtrelendiği için kontrastı
   bozuluyordu, (3) makine sipariş ve bayi portalı token tabanlı çalıştığı
   için üç yüzey koyu modda birbirini tutmuyordu.
   Artık koyu tema tamamen ../../assets/sakalak-base.css içindeki token
   yeniden tanımlarından geliyor; burada yalnız yüzeye özgü istisnalar var. */

/* Baslik icindeki hali makine siparisteki .ghost-button ile ayni olcude.
   Kose​de yuzen hali yalnizca baslik henuz basilmadiginda gorunur. */
.theme-toggle{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:999px;
  min-width:38px;
  min-height:var(--tap-sm);
  padding:0 10px;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.theme-toggle:hover{
  border-color:var(--line-strong);
}

/* Cikis yap — sakalakbayiportal'daki koyu .dark-button ile ayni renk
   (var(--panel)/var(--on-deep)); makine siparisteki .logout-button ile
   de ayni gorunumde. */
.logout-button{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;
  background:var(--panel);color:var(--on-deep);
  min-height:var(--tap-sm);
  padding:0 16px;
  font-size:13px;font-weight:700;
  cursor:pointer;flex:0 0 auto;white-space:nowrap;
}
.logout-button:hover{opacity:.88}
.logout-button:disabled{opacity:.6;cursor:default}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

.container{
  width:min(1240px,calc(100% - 32px));
  margin:auto;
}

.top-strip{
  background:var(--deep);
  color:var(--on-deep-soft);
  font-size:12px;
}

.top-strip .container{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}

/* Başlık yüksekliği ortak --header-h ile aynı (62px). Eskiden 76px'ti;
   makine sipariş ve bayi portalı yanında bariz farklı duruyordu. */
.header-row{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:14px;
  letter-spacing:0;
}

/* Marka bloğu makine sipariş ile birebir: aynı logo dosyası, aynı 30px
   yükseklik, aynı yazı ölçüleri. Eskiden kırmızı kutu içinde "Ş" harfi
   vardı — iki yüzey yan yana konunca farklı işletme gibi duruyordu. */
.brand-logo{
  height:30px;
  width:auto;
  flex:0 0 auto;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.brand-text strong{
  font-size:14px;
  font-weight:700;
}

.brand-text small{
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--muted);
  margin-top:2px;
}

/* Menu makine siparisteki .main-nav ile ayni davranir: ogeler ASLA satir
   kirmaz, sigmayinca serit yana kayar. Onceden white-space:normal oldugu
   icin 768px'te "Ana Sayfa" ve "Parça Ara" iki satira boluniyordu. */
.nav{
  display:flex;
  gap:18px;
  margin-left:auto;
  font-weight:700;
  font-size:14px;
  min-width:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}

.nav::-webkit-scrollbar{
  display:none;
}

.nav a{
  flex:0 0 auto;
  white-space:nowrap;
}

.nav a:hover,
.nav a.active{
  color:var(--red-text);
}

.cart-link{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  font-weight:800;
  white-space:nowrap;
}
.cart-link svg{flex-shrink:0}

.badge{
  display:inline-grid;
  place-items:center;
  min-width:21px;
  height:21px;
  padding:0 5px;
  border-radius:999px;
  background:var(--red);
  color:var(--on-red);
  font-size:11px;
  margin-left:5px;
}

.hero{
  background:linear-gradient(110deg,var(--deep) 0%,var(--deep-2) 65%,var(--deep-3) 100%);
  color:var(--on-deep);
  padding:70px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:54px;
  align-items:center;
}

.eyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--red-text);
}

/* Lacivert hero bandının üzerinde marka kırmızısı okunmuyor (3.74 kontrast);
   orada aynı ailenin açık tonu kullanılır. Eskiden burası sarıydı. */
.hero .eyebrow{
  color:var(--red-on-deep);
}

.hero h1{
  font-size:clamp(40px,5vw,68px);
  line-height:.98;
  margin:16px 0 22px;
  max-width:760px;
}

.hero p{
  font-size:18px;
  line-height:1.7;
  color:var(--on-deep-soft);
  max-width:720px;
}

.hero-search{
  display:flex;
  background:var(--surface);
  border-radius:14px;
  padding:7px;
  margin-top:28px;
  max-width:680px;
}

.hero-search input{
  border:0;
  outline:0;
  flex:1;
  padding:13px;
  color:var(--text);
  min-width:0;
}

.hero-search button{
  border:0;
  border-radius:10px;
  background:var(--red);
  color:var(--on-red);
  font-weight:800;
  padding:0 22px;
  cursor:pointer;
}

.hero-visual{
  background:var(--surface);
  border-radius:20px;
  padding:14px;
  transform:rotate(1deg);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}

.hero-visual img{
  display:block;
  width:100%;
  height:330px;
  object-fit:contain;
  border-radius:12px;
  background:var(--surface);
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:-28px;
  position:relative;
  z-index:2;
}

.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:var(--shadow);
}

.stat strong{
  display:block;
  font-size:29px;
}

.stat span{
  color:var(--muted);
  font-size:13px;
}

.section{
  padding:58px 0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:24px;
}

.section-head h2{
  font-size:34px;
  margin:6px 0;
}

.muted{
  color:var(--muted);
}

.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--line);
  background:var(--surface);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}

.chip.active{
  background:var(--navy);
  color:var(--on-deep);
  border-color:var(--navy);
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.catalog-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 5px 20px rgba(15,23,42,.04);
  transition:.2s;
}

.catalog-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.catalog-thumb{
  height:205px;
  background:var(--surface);
  display:grid;
  place-items:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.catalog-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.catalog-thumb.no-image{
  background:linear-gradient(135deg,var(--surface-alt),var(--surface));
  font-size:52px;
}

.catalog-body{
  padding:20px;
}

.family-label{
  font-size:11px;
  font-weight:900;
  color:var(--red-text);
  text-transform:uppercase;
  letter-spacing:.8px;
}

.catalog-body h3{
  margin:9px 0 8px;
  font-size:19px;
}

.catalog-meta{
  display:flex;
  gap:14px;
  color:var(--muted);
  font-size:12px;
  margin-top:17px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:11px 15px;
  font-weight:800;
  cursor:pointer;
}

.btn:hover{
  border-color:var(--line-strong);
}

.btn-primary{
  background:var(--red);
  color:var(--on-red);
  border-color:var(--red-text);
}

.btn-dark{
  background:var(--navy);
  color:var(--on-deep);
  border-color:var(--navy);
}

.btn-small{
  padding:7px 10px;
  font-size:12px;
}

.load-row{
  text-align:center;
  margin-top:28px;
}

.search-results{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  margin-top:12px;
  max-height:420px;
  overflow:auto;
  display:none;
}

.search-results.open{
  display:block;
}

.search-result{
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border-bottom:1px solid var(--line);
}

.search-result:last-child{
  border-bottom:0;
}

.ref-box{
  width:48px;
  height:48px;
  border-radius:10px;
  background:var(--surface-alt);
  display:grid;
  place-items:center;
  font-weight:900;
  /* --navy sabit lacivert; koyu temada koyu zemin uzerinde okunmuyordu (1.35).
     --ink temaya gore donuyor. */
  color:var(--ink);
}

.price{
  font-weight:900;
  color:var(--red-text);
  white-space:nowrap;
}

.breadcrumb{
  font-size:12px;
  color:var(--muted);
  padding:20px 0;
}

.catalog-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);
  gap:28px;
  align-items:start;
}

.diagram-card,
.info-card,
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 5px 20px rgba(15,23,42,.04);
}

.diagram-card{
  padding:14px;
}

.diagram-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.diagram-stage{
  height:610px;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  position:relative;
  cursor:zoom-in;
}

.diagram-stage img{
  display:block;
  max-width:none;
  width:100%;
  height:auto;
  transform-origin:top left;
  transition:transform .12s;
}

.diagram-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  /* Cap katalog basina ayarlanabilir: buyuk noktalar kucuk parcalari kapatiyordu.
     --hs-boy, yonetimdeki kaydirici ile hotspot katmanina yaziliyor. */
  width:var(--hs-boy,31px);
  height:var(--hs-boy,31px);
  font-size:clamp(9px,calc(var(--hs-boy,31px) * .42),15px);
  line-height:1;
  border-radius:50%;
  border:2px solid var(--surface);
  background:var(--ok-solid);
  /* --ok-ink koyu yesil YAZI rengi; koyu yesil dolgu uzerinde kayboluyordu.
     Dolgu uzerindeki yazi icin --on-ok var. */
  color:var(--on-ok);
  font-weight:900;
  box-shadow:0 0 0 2px var(--ok-solid),0 5px 12px rgba(0,0,0,.25);
  pointer-events:auto;
  cursor:pointer;
}

.diagram-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.diagram-tab{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:8px;
  padding:6px 9px;
  font-size:12px;
  cursor:pointer;
}

.diagram-tab.active{
  background:var(--navy);
  color:var(--on-deep);
}

.info-card{
  padding:27px;
}

.info-card h1{
  font-size:31px;
  margin:7px 0 12px;
}

.info-list{
  display:grid;
  gap:14px;
  margin:24px 0;
}

.info-line{
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding-bottom:11px;
  font-size:14px;
}

.source-note{
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-radius:11px;
  padding:13px;
  font-size:13px;
  color:var(--warn-ink);
}

.parts-panel{
  margin-top:28px;
  padding:0;
  overflow:hidden;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px;
  border-bottom:1px solid var(--line);
}

.table-tools{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.input{
  height:42px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  background:var(--surface);
  outline:0;
}

.input:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px var(--surface-alt);
}

.parts-table-wrap{
  overflow:auto;
  max-height:700px;
}

.parts-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.parts-table th{
  position:sticky;
  top:0;
  background:var(--surface-soft);
  z-index:2;
  text-align:left;
  padding:13px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.parts-table td{
  padding:12px 13px;
  border-bottom:1px solid var(--line);
}

.parts-table tbody tr{
  cursor:pointer;
}

.parts-table tbody tr:hover,
.parts-table tbody tr.selected{
  background:var(--ok-bg);
}

.parts-table .code{
  font-family:Consolas,monospace;
  font-weight:700;
}

.status{
  display:inline-flex;
  border-radius:999px;
  padding:5px 8px;
  background:var(--ok-bg);
  color:var(--ok-ink);
  font-size:11px;
  font-weight:800;
}

.status.warn{
  background:var(--warn-bg);
  color:var(--warn-ink);
}

.empty-state{
  text-align:center;
  padding:60px 20px;
}

.product-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

.product-image{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  height:530px;
  display:grid;
  place-items:center;
}

.product-image img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.product-info{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
}

.product-code{
  font-family:Consolas,monospace;
  color:var(--muted);
}

.product-info h1{
  font-size:34px;
  margin:10px 0;
}

.product-price{
  font-size:32px;
  color:var(--red-text);
  font-weight:900;
  margin:20px 0;
}

.qty-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:22px 0;
}

.qty{
  display:flex;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}

.qty button{
  width:42px;
  min-height:44px;
  flex-shrink:0;
  border:0;
  background:var(--surface-soft);
  cursor:pointer;
}

.qty input{
  width:60px;
  min-width:0;
  min-height:44px;
  font-size:16px;
  border:0;
  text-align:center;
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}

.detail-item{
  background:var(--surface-soft);
  border-radius:10px;
  padding:13px;
}

.detail-item small{
  display:block;
  color:var(--muted);
  margin-bottom:5px;
}

.cart-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:24px;
}

.cart-item{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:14px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  padding:15px;
  margin-bottom:10px;
}

.cart-summary{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  height:max-content;
  position:sticky;
  top:110px;
}

.summary-line{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.toast{
  position:fixed;
  right:24px;
  bottom:24px;
  background:var(--deep);
  color:var(--on-deep);
  padding:14px 18px;
  border-radius:11px;
  box-shadow:var(--shadow);
  z-index:100;
  animation:fade .3s;
}

.hidden{
  display:none!important;
}

@keyframes fade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
}

/* Admin */
.admin-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

/* Kenar cubugu koyu lacivert; icindeki yardimci yazilar acik zemin icin
   olan --muted'i kullaniyordu ve 2.98 kontrast veriyordu. */
.admin-sidebar .brand-text small,
.admin-sidebar small{
  color:var(--on-deep-muted);
}

.admin-sidebar{
  background:var(--deep-2);
  color:var(--on-deep-soft);
  padding:22px 17px;
  position:sticky;
  top:0;
  height:100vh;
}

.admin-sidebar .brand{
  padding:0 8px 22px;
}

.admin-menu{
  display:grid;
  gap:5px;
}

.admin-menu a{
  padding:12px 13px;
  border-radius:9px;
  font-size:13px;
  font-weight:700;
}

.admin-menu a:hover,
.admin-menu a.active{
  background:var(--deep-3);
  color:var(--on-deep);
}

.admin-main{
  min-width:0;
}

/* ————— Yonetim menusu cekmecesi —————
   1280 uzerinde menu sabit kolon; altinda ust cubuktaki dugmeyle acilir. */
/* Yonetim ekranlari icin telefon uyarisi — yalnizca dar ekranda gorunur. */
.masaustu-uyarisi{
  display:none;
  align-items:flex-start;
  gap:12px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid var(--warn-solid);
  border-left:4px solid var(--warn-solid);
  border-radius:12px;
  background:var(--warn-bg);
  color:var(--ink);
}
.masaustu-uyarisi span{
  font-size:20px;
  line-height:1.1;
  flex:0 0 auto;
}
.masaustu-uyarisi strong{
  display:block;
  font-size:14px;
}
.masaustu-uyarisi small{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-soft);
}
.masaustu-uyarisi .btn{
  flex:0 0 auto;
  margin-left:auto;
  align-self:center;
}
@media (max-width:860px){
  .masaustu-uyarisi{
    display:flex;
    flex-wrap:wrap;
  }
  .masaustu-uyarisi .btn{
    margin-left:0;
    width:100%;
  }
}

.admin-menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:0 0 auto;
  margin-right:14px;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--ink);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.admin-menu-toggle:hover{
  border-color:var(--line-strong);
}
.admin-menu-toggle .cizgiler{
  display:grid;
  gap:3px;
  width:16px;
}
.admin-menu-toggle .cizgiler i{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.admin-scrim{
  position:fixed;
  inset:0;
  z-index:190;
  background:rgba(6,10,20,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  border:0;
  padding:0;
}
.admin-sidebar-kapat{
  display:none;
  width:100%;
  margin:14px 0 0;
  min-height:44px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  background:transparent;
  color:var(--on-deep-soft);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
@media (max-width:1280px){
  .admin-sidebar-kapat{
    display:block;
  }
}
@media (prefers-reduced-motion:reduce){
  .admin-sidebar,
  .admin-scrim{
    transition:none;
  }
}

.admin-topbar{
  height:70px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:20;
}

.admin-content{
  padding:28px;
}

.admin-content h1{
  margin:5px 0 8px;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin:24px 0;
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  padding:19px;
  display:flex;
  gap:13px;
  align-items:center;
}

.stat-card strong{
  display:block;
  font-size:26px;
}

.stat-icon{
  font-size:24px;
}

.admin-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  margin-top:18px;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.admin-table th,
.admin-table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  text-align:left;
}

.upload-zone{
  border:2px dashed var(--line-strong);
  border-radius:14px;
  padding:36px;
  text-align:center;
  background:var(--surface-soft);
}

.upload-zone.drag{
  border-color:var(--red-text);
  background:var(--danger-bg);
}

.import-results{
  margin-top:18px;
  padding:14px;
  border-radius:10px;
  background:var(--ok-bg);
  color:var(--ok-ink);
}

.warning-box{
  padding:14px;
  border-radius:10px;
  background:var(--warn-bg);
  color:var(--warn-ink);
  border:1px solid var(--warn-line);
}

.editor-grid{
  display:grid;
  grid-template-columns:330px 1fr 300px;
  gap:16px;
}

.editor-list{
  max-height:690px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:11px;
}

.editor-part{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font-size:12px;
}

.editor-part.active{
  background:var(--ok-bg);
}

.editor-canvas{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  min-height:650px;
}

.editor-canvas img{
  display:block;
  width:100%;
  height:auto;
}

.editor-layer{
  position:absolute;
  inset:0;
}

.editor-form{
  display:grid;
  gap:12px;
}

.editor-form label{
  font-size:12px;
  font-weight:800;
}

.code-box{
  background:var(--deep);
  color:var(--on-deep-soft);
  padding:12px;
  border-radius:10px;
  white-space:pre-wrap;
  font:11px Consolas;
  max-height:200px;
  overflow:auto;
}

.footer{
  background:var(--deep);
  color:var(--on-deep-soft);
  padding:38px 0;
  margin-top:60px;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
}

.footer small{
  color:var(--on-deep-muted);
}

/* Yonetim ve sepet duzenleri 1280'in altinda tek sutuna iner: bu ekranlar
   yan panelle birlikte 1280'den dar yerde sikisiyor. */
@media (max-width:1280px){
  .diagram-stage{
    height:500px;
  }
  .admin-shell{
    grid-template-columns:1fr;
  }
  /* Eskiden burada display:none vardi: menu kayboluyor ve geri getirilecek
     hicbir yer kalmiyordu. Artik ust cubuktaki dugmeyle acilan cekmece. */
  .admin-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(300px,86vw);
    height:100dvh;
    overflow-y:auto;
    z-index:200;
    transform:translateX(-101%);
    transition:transform .22s ease;
    box-shadow:none;
  }
  .admin-shell.menu-acik .admin-sidebar{
    transform:none;
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  .admin-menu-toggle{
    display:inline-flex;
  }
  .admin-shell.menu-acik .admin-scrim{
    opacity:1;
    pointer-events:auto;
  }
  .editor-grid{
    grid-template-columns:1fr;
  }
  .cart-layout{
    grid-template-columns:1fr;
  }
  .cart-summary{
    position:static;
  }
}

/* Vitrin duzenleri (hero, katalog izgarasi, istatistikler) 860'a kadar iki
   sutun kalir. NOT: bunlar once 1280'e alinmisti ama 1265px'te hero'nun sag
   yarisi bombos kaliyordu - baslik genis, arama cubugu dar, saginda bos
   lacivert alan. Vitrinin sutun sayisi yonetim ekranlarindan bagimsiz. */
@media (max-width:860px){
  .section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }
  .hero-grid,
  .catalog-hero,
  .product-layout{
    grid-template-columns:1fr;
  }
  .hero-visual{
    display:none;
  }
  .catalog-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .stats,
  .stat-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:700px){
  .container{
    width:min(100% - 20px,1240px);
  }
  .top-strip{
    display:none;
  }
  .header-row{
    height:64px;
  }
  .catalog-grid,
  .stats,
  .stat-grid{
    grid-template-columns:1fr;
  }
  .hero{
    padding:48px 0;
  }
  .hero h1{
    font-size:42px;
  }
  .hero-search{
    display:grid;
  }
  .hero-search button{
    height:44px;
  }
  .section{
    padding:40px 0;
  }
  .diagram-stage{
    height:390px;
  }
  .panel-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .product-image{
    height:350px;
  }
  .product-info{
    padding:22px;
  }
  .detail-grid{
    grid-template-columns:1fr;
  }
  .cart-item{
    grid-template-columns:45px 1fr;
  }
  .cart-item>strong{
    grid-column:2;
  }
  .footer-row{
    flex-direction:column;
  }
  .admin-content{
    padding:16px;
  }
}

/* Test 2: catalogue-focused layout based on the preferred side-by-side workspace */
.catalog-compare-body{
  background:var(--surface-soft);
}

.catalog-compare-page{
  padding-bottom:30px;
}

.catalog-title-row-compare{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:4px 0 18px;
}

.catalog-title-row-compare h1{
  margin:4px 0 5px;
  font-size:31px;
  letter-spacing:-.035em;
}

.catalog-title-row-compare p{
  margin:0;
}

.compare-eyebrow{
  display:block;
  color:var(--warn-ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:1.45px;
  text-transform:uppercase;
}

.catalog-workspace-compare{
  display:grid;
  grid-template-columns:minmax(0,2.6fr) minmax(340px,.8fr);
  gap:16px;
  align-items:stretch;
}

.viewer-panel-compare,
.parts-panel-compare{
  overflow:hidden;
}

.compare-panel-head{
  min-height:54px;
  padding:14px;
}

.compare-panel-head h2{
  margin:0;
  font-size:15px;
}

.viewer-tools-compare{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

.zoom-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:34px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  font-size:12px;
  font-weight:900;
}

.viewer-stage-compare{
  height:800px;
  overflow:auto;
  background:var(--surface);
  position:relative;
}

.diagram-transform-compare{
  position:relative;
  width:100%;
  transform-origin:top left;
  transition:transform .12s ease;
}

.diagram-transform-compare img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

.diagram-transform-compare .diagram-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.compare-hotspot{
  pointer-events:auto;
  /* Cap yonetimdeki kaydiriciyla katmana yazilan --hs-boy'dan gelir. */
  width:var(--hs-boy,34px);
  height:var(--hs-boy,34px);
  background:var(--deep);
  /* --on-red, KIRMIZI dolgu uzerindeki yazi icindir; koyu temada koyuya
     doner ve burada lacivert zemin uzerinde okunmaz olurdu (1.04).
     Lacivertin esi --on-deep. */
  color:var(--on-deep);
  border:2px solid var(--surface);
  box-shadow:0 4px 12px rgba(10,22,43,.32);
  font-size:clamp(9px,calc(var(--hs-boy,34px) * .4),15px);
  line-height:1;
  font-weight:900;
}

.compare-hotspot:hover,
.compare-hotspot.active{
  background:var(--ok-solid);
  /* --ok-ink yesil YAZI rengi; yesil dolgu uzerinde 1.44 kaliyordu. */
  color:var(--on-ok);
  box-shadow:0 0 0 2px var(--ok-solid),0 5px 14px rgba(0,0,0,.24);
}

.parts-panel-compare{
  display:flex;
  flex-direction:column;
  height:800px;
}

.compare-tag{
  padding:5px 8px;
  border-radius:999px;
  background:var(--surface-alt);
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}

.table-toolbar-compare{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:11px;
  border-bottom:1px solid var(--line);
}

.table-toolbar-compare .input{
  width:100%;
  min-width:0;
}

.stock-filter-compare{
  white-space:nowrap;
}

.parts-scroll-compare{
  overflow:auto;
  flex:1;
}

.parts-table-compare{
  font-size:12px;
}

.parts-table-compare th{
  padding:10px 9px;
  font-size:10px;
  text-transform:uppercase;
  color:var(--muted);
}

.parts-table-compare td{
  padding:10px 9px;
  vertical-align:middle;
}

.parts-table-compare tbody tr.selected{
  background:var(--ok-bg);
  box-shadow:inset 3px 0 0 var(--ok-solid);
}

.compare-ref-box{
  width:28px;
  height:28px;
  border-radius:7px;
  background:var(--deep);
  color:var(--on-deep);
  font-size:11px;
}

.compare-part-name{
  display:block;
  line-height:1.25;
}

.compare-part-code{
  display:block;
  margin-top:3px;
  color:var(--info-ink);
  font-size:10px;
}

.stock-ok{
  color:var(--ok-ink);
  font-weight:850;
  white-space:nowrap;
}

.stock-out{
  color:var(--danger-ink);
  font-weight:850;
  white-space:nowrap;
}

/* Acik tablo zemininde duruyor; --on-deep-muted koyu bant icindi ve burada
   2.55 kontrast veriyordu (gorunmez). */
.stock-neutral{
  color:var(--muted);
  font-weight:750;
  white-space:nowrap;
}

.row-arrow-compare{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  font-weight:900;
}

.row-arrow-compare:hover{
  border-color:var(--warn-solid);
  color:var(--warn-ink);
}

.selected-part-compare{
  margin-top:16px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:20px;
}

.selected-part-compare h3{
  margin:5px 0;
  font-size:18px;
}

.selected-part-compare p{
  margin:0;
  font-size:12px;
}

.selected-ref-compare{
  color:var(--ok-ink);
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
}

.selected-actions-compare{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn-green{
  background:var(--ok-solid);
  color:var(--on-ok);
  border-color:var(--ok-solid);
}

.compare-open-button{
  background:var(--warn-solid);
  border-color:var(--warn-solid);
  color:var(--on-warn);
}

.catalog-compare-page .diagram-tabs:empty{
  display:none;
}

.catalog-compare-page .diagram-tab{
  padding:6px 8px;
}

@media (max-width:1280px){
  .catalog-workspace-compare{
    grid-template-columns:1fr;
  }
  .parts-panel-compare{
    height:680px;
  }
  .viewer-stage-compare{
    height:620px;
  }
  .selected-part-compare{
    grid-template-columns:1fr;
  }
  .selected-actions-compare{
    justify-content:flex-start;
  }
}

@media (max-width:700px){
  .catalog-title-row-compare{
    flex-direction:column;
  }
  .catalog-title-row-compare h1{
    font-size:27px;
  }
  .viewer-stage-compare{
    height:500px;
  }
  .parts-panel-compare{
    height:560px;
  }
  .table-toolbar-compare{
    grid-template-columns:1fr;
  }
  .viewer-tools-compare{
    justify-content:flex-start;
  }
  .selected-actions-compare .btn{
    width:100%;
  }
  .parts-table-compare th:nth-child(3),
  .parts-table-compare td:nth-child(3),
  .parts-table-compare th:nth-child(4),
  .parts-table-compare td:nth-child(4){
    display:none;
  }
}

/* Admin CMS V4 */
.admin-topbar>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.admin-top-sub{
  font-size:11px;
  color:var(--muted);
  font-weight:500;
}

.admin-topbar-account{
  display:flex;
  align-items:center;
  gap:14px;
}
.admin-topbar-account span{
  font-size:13px;
  color:var(--muted);
}

.admin-page-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}

.admin-page-title h1{
  font-size:34px;
  letter-spacing:-.03em;
}

.admin-eyebrow{
  color:var(--warn-ink)!important;
}

.admin-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.admin-panel-head h2{
  margin:0;
}

.admin-panel-head p{
  margin:6px 0 0;
}

.admin-filter-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:13px 0 18px;
}

.admin-filter-row .input:first-child{
  min-width:320px;
  flex:1;
}

.admin-table-wrap{
  overflow:auto;
}

.admin-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  background:var(--surface-soft);
  position:sticky;
  top:0;
  z-index:1;
}

.admin-table td{
  vertical-align:middle;
}

.row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:900;
}

.status-badge.published{
  background:var(--ok-bg);
  color:var(--ok-ink);
}

.status-badge.draft{
  background:var(--warn-bg);
  color:var(--warn-ink);
}

.manual-label{
  display:inline-block;
  margin-top:5px;
  border-radius:999px;
  background:var(--info-bg);
  color:var(--info-ink);
  padding:3px 7px;
  font-size:9px;
  font-weight:850;
}

.danger-outline{
  border-color:var(--danger-line)!important;
  color:var(--danger-ink)!important;
  background:var(--surface)!important;
}

.danger-outline:hover{
  background:var(--danger-bg)!important;
}

.icon-button{
  width:31px;
  height:31px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  cursor:pointer;
  font-weight:900;
}

.icon-button.danger{
  color:var(--danger-ink);
  border-color:var(--danger-line);
}

.admin-menu-separator{
  height:1px;
  background:var(--deep-3);
  margin:10px 8px;
}

.footer-admin-link{
  text-decoration:underline;
  color:var(--on-deep-soft);
}

.admin-form-layout{
  display:grid;
  gap:18px;
}

.form-section{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  align-items:start;
}

.section-number{
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--deep-2);
  color:var(--on-deep);
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
}

.form-section-content h2{
  margin:4px 0 18px;
}

.form-grid{
  display:grid;
  gap:15px;
}

.form-grid.two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.form-grid label,
.editor-product-form label,
.dialog-card label{
  display:grid;
  gap:7px;
}

.form-grid label>span,
.editor-product-form label>span,
.dialog-card label>span{
  font-size:12px;
  font-weight:850;
  color:var(--ink);
}

.span-2{
  grid-column:span 2;
}

.textarea{
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  resize:vertical;
  outline:0;
}

.textarea:focus{
  border-color:var(--line-strong);
  box-shadow:0 0 0 3px var(--surface-alt);
}

.compact-upload{
  padding:24px;
  display:grid;
  gap:7px;
  cursor:pointer;
}

.compact-upload small{
  color:var(--muted);
}

.upload-icon{
  font-size:34px;
}

.catalog-image-preview{
  margin-top:14px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.catalog-image-preview img{
  max-width:520px;
  max-height:320px;
  border:1px solid var(--line);
  border-radius:12px;
  object-fit:contain;
  background:var(--surface);
}
.catalog-document-preview{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);
}
.catalog-document-preview>div{display:flex;flex:1 1 220px;min-width:0;flex-direction:column;gap:3px}
.catalog-document-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalog-document-preview small{color:var(--muted)}
.shared-pdf-option{
  display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px;
  border:1px solid var(--info-line);border-radius:12px;background:var(--info-bg);cursor:pointer;
}
.shared-pdf-option input{margin-top:3px}
.shared-pdf-option span{display:flex;flex-direction:column;gap:3px}
.shared-pdf-option small{color:var(--muted)}

.sticky-form-actions{
  position:sticky;
  bottom:12px;
  z-index:15;
  background:rgba(244,246,249,.94);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  box-shadow:var(--shadow);
}

.editor-admin-content{
  padding-bottom:40px;
}

.editor-title-row{
  margin-bottom:12px;
}

.editor-top-toolbar{
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
  margin:13px 0;
}

.editor-catalog-select{
  min-width:390px;
  flex:1;
}

.editor-grid-v4{
  grid-template-columns:310px minmax(520px,1fr) 390px;
  align-items:start;
}

.editor-left-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  padding:12px;
  position:sticky;
  top:86px;
}

.editor-left-panel>.input{
  width:100%;
  margin:10px 0;
}

.editor-add-buttons{
  display:grid;
  gap:7px;
}

.editor-list-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 3px;
  font-size:12px;
  font-weight:900;
}

.editor-list-head small{
  font-weight:600;
  color:var(--muted);
}

.editor-list{
  max-height:660px;
}

.editor-part{
  grid-template-columns:38px 1fr 30px;
  align-items:center;
}

.editor-part small{
  display:block;
  color:var(--info-ink);
  margin-top:3px;
}

.editor-ref-box{
  width:34px;
  height:34px;
  border-radius:8px;
}

.point-count{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:999px;
  background:var(--surface-alt);
  font-size:10px;
  font-weight:900;
}

.editor-center-panel{
  min-width:0;
}

/* ————— Temsil (bayi adina islem) —————
   auth.js ust cubugu kendisi basiyor; bicimi burada tanimli. */
.impersonation-bar{
  position:sticky;
  top:0;
  z-index:150;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:9px 18px;
  background:var(--warn-solid);
  color:var(--on-warn);
  font-size:13px;
  font-weight:600;
}
.impersonation-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--on-warn);
  flex:0 0 auto;
}
.impersonation-meta{
  font-weight:500;
  opacity:.85;
}
.impersonation-bar button{
  margin-left:auto;
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--on-warn);
  border-radius:8px;
  background:transparent;
  color:var(--on-warn);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}

/* .admin-dialog 520px'e sabit; bayi listesi icin dar kaliyor ve icerik
   tasip solda kesiliyordu. Genisligi <dialog> uzerinde acmak gerekiyor. */
dialog.rol-penceresi{
  width:min(660px,calc(100% - 30px));
}
.rol-karti{
  width:100%;
  max-width:none;
}
.rol-aciklama{
  margin:0 0 12px;
  font-size:13px;
}
.rol-liste{
  max-height:min(46vh,380px);
  overflow-y:auto;
  margin:12px 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}
.rol-satir{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:var(--tap);
  padding:11px 14px;
  border:0;
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.rol-satir:last-child{
  border-bottom:0;
}
.rol-satir:hover{
  background:var(--tint-soft);
}
.rol-satir.active{
  background:var(--ok-bg);
  box-shadow:inset 3px 0 0 var(--ok-solid);
}
.rol-ad{
  min-width:0;
  flex:1;
}
.rol-ad strong{
  display:block;
  font-size:14px;
  line-height:1.3;
}
.rol-ad small{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  color:var(--muted);
}
.rol-oran{
  flex:0 0 auto;
  text-align:right;
  font-weight:700;
  font-size:14px;
  color:var(--ok);
  font-variant-numeric:tabular-nums;
}
.rol-oran small{
  display:block;
  font-size:10px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.04em;
}
.rol-musteri{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.rol-musteri label{
  flex:1 1 220px;
  min-width:0;
}
.rol-musteri label span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:5px;
}
.rol-alt{
  margin-top:14px;
}

/* ————— Fiyat / KDV gorunumu ve fotograf ————— */
.kdv-anahtar{
  display:flex;
  gap:1px;
  margin:0 0 14px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
}
.kdv-anahtar button{
  flex:1;
  min-height:36px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.kdv-anahtar button.active{
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.kdv-notu{
  font-style:normal;
  font-size:11px;
  color:var(--muted);
  font-weight:500;
}
.satir-kirilim{
  display:block;
  margin-top:3px;
  font-size:11.5px;
  color:var(--muted);
  white-space:nowrap;
}

.parca-hucre{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.parca-metin{
  min-width:0;
}
.parca-foto,
.sepet-foto{
  flex:0 0 auto;
  display:block;
  width:44px;
  height:44px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.sepet-foto{
  width:56px;
  height:56px;
}
.parca-foto img,
.sepet-foto img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Sepette adet artir/azalt */
.adet-kutu{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:var(--surface);
}
.adet-kutu button{
  width:38px;
  min-height:40px;
  border:0;
  background:var(--surface-soft);
  color:var(--ink);
  font-size:17px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.adet-kutu button:hover{
  background:var(--surface-alt);
}
.adet-kutu .cart-qty{
  width:62px;
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-radius:0;
  text-align:center;
  min-height:40px;
}

.hotspot-boyut{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.hotspot-boyut input[type="range"]{
  width:104px;
  accent-color:var(--red);
  min-height:24px;
}
.hotspot-boyut output{
  min-width:34px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--ink);
}

.canvas-helpbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px 12px 0 0;
  padding:10px 12px;
  font-size:12px;
}

.canvas-helpbar>div{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.editor-canvas-v4{
  border-radius:0 0 12px 12px;
  min-height:720px;
  touch-action:none;
}

.editor-canvas-v4.placing-mode{
  cursor:crosshair;
  box-shadow:inset 0 0 0 3px var(--warn-solid);
}

.editor-layer{
  right:auto;
  bottom:auto;
}

.editor-hotspot{
  background:var(--ok-solid);
}

.editor-hotspot.active{
  background:var(--warn-solid);
  /* Ayni hata: --warn-ink yazi rengi, dolgu uzerinde 1.58 kaliyordu. */
  color:var(--on-warn);
  box-shadow:0 0 0 3px var(--warn-solid),0 5px 14px rgba(0,0,0,.28);
}

.editor-hotspot.dragging{
  cursor:grabbing;
  transform:translate(-50%,-50%) scale(1.16);
  z-index:20;
}

/* ————— Sırayla işaretleme şeridi —————
   Malzeme listesi zaten elimizde: kuyruk sıradaki REF'i önüne getirir,
   sen yalnız resimde yerine tıklarsın. Serbest kip aynen duruyor. */
.mark-bar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding:12px 14px;
  border:1px solid var(--ok-solid);
  border-left:4px solid var(--ok-solid);
  border-radius:12px;
  background:var(--ok-bg);
  color:var(--ink);
}
.mark-bar.mark-done{
  border-color:var(--line-strong);
  border-left-color:var(--line-strong);
  background:var(--surface-soft);
}
.mark-bar-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 260px;
}
.mark-ref{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--ok-solid);
  color:var(--on-ok);
  font-weight:800;
  font-size:16px;
  font-variant-numeric:tabular-nums;
}
.mark-ref.is-group{
  background:var(--surface);
  color:var(--ok);
  border:2px dashed var(--ok-solid);
}
.mark-copy{
  min-width:0;
}
.mark-copy strong{
  display:block;
  font-size:15px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mark-copy small{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mark-bar-side{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-left:auto;
}
.mark-progress{
  min-width:132px;
}
.mark-progress span{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:5px;
  font-variant-numeric:tabular-nums;
}
.mark-track{
  height:6px;
  border-radius:999px;
  background:var(--line-strong);
  overflow:hidden;
}
.mark-fill{
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--ok-solid);
  transition:width .18s ease;
}
.mark-buttons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
@media (max-width:700px){
  .mark-bar-side{
    margin-left:0;
    width:100%;
  }
  .mark-progress{
    flex:1 1 100%;
  }
}

/* Montaj grubu hotspotu: kesikli halka — tek parça değil, grup olduğu belli olsun. */
.group-hotspot{
  border-style:dashed;
  border-width:2px;
  border-color:var(--warn-solid);
  box-shadow:0 0 0 2px var(--warn-solid),0 5px 12px rgba(0,0,0,.25);
}

/* Form içindeki kutucuk satırı */
/* Stok kodu alanindaki otomatik kod ipucu */
/* ————— Erisim duvarindaki sayaclar —————
   Ziyaretci katalogu goremiyor ama kapsamini gorsun: yalniz sayi,
   sunucudan (get_spare_parts_summary). Kod, ad, fiyat donmez. */
.erisim-sayaclar[hidden]{display:none}
.erisim-sayaclar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin:20px 0 22px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--line);
}
.erisim-sayaclar>div{
  background:var(--surface);
  padding:13px 10px;
  text-align:center;
}
.erisim-sayaclar strong{
  display:block;
  font-size:21px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.erisim-sayaclar span{
  display:block;
  margin-top:3px;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.3;
}
@media (max-width:560px){
  .erisim-sayaclar{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Stok sutunu kaldirildi; artik kullanilmayan bicimler */
.stock-neutral,
.stock-ok,
.stock-out,
.stock-filter-compare{
  display:none;
}

.kod-ipucu{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.kod-ipucu small{
  flex:1 1 180px;
  min-width:0;
  font-size:11.5px;
  line-height:1.45;
  color:var(--muted);
}
.kod-ipucu small.uyari{
  color:var(--warn);
  font-weight:600;
}
.kod-ipucu .btn{
  flex:0 0 auto;
}

.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.checkbox-row input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
  accent-color:var(--red);
}
.checkbox-row>span{
  display:block;
}
.checkbox-row strong{
  display:block;
  font-size:13.5px;
}
.checkbox-row small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.editor-detail-panel{
  margin:0;
  position:sticky;
  top:86px;
  max-height:calc(100vh - 105px);
  overflow:auto;
  /* Sag altta sabit duran "Canliya Yayinla" yuvasi son alanin ustune biniyordu;
     panelin sonuna onun boyu kadar bosluk birakiyoruz ki kaydirinca acilsin. */
  padding-bottom:104px;
}

.editor-detail-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding-bottom:13px;
  margin-bottom:15px;
}

.editor-detail-head strong{
  display:block;
  margin-top:4px;
}

.admin-kicker{
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--warn-ink);
}

.point-badge{
  border-radius:999px;
  background:var(--surface-alt);
  padding:5px 8px;
  font-size:10px;
  font-weight:850;
}

.editor-product-form{
  display:grid;
  gap:15px;
}

.compact-grid{
  gap:10px;
}

.editor-product-form .input{
  width:100%;
}

.product-image-editor{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.mini-upload{
  border:1px dashed var(--line-strong);
  border-radius:10px;
  padding:12px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  background:var(--surface-soft);
}

.part-image-preview{
  position:relative;
  width:110px;
  height:85px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.part-image-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

.part-image-preview .icon-button{
  position:absolute;
  right:-8px;
  top:-8px;
  width:25px;
  height:25px;
  background:var(--surface);
}

.link-settings{
  display:grid;
  gap:9px;
  background:var(--surface-soft);
  border-radius:11px;
  padding:12px;
}

.link-settings small{
  color:var(--muted);
  line-height:1.4;
}

.editor-form-actions{
  display:flex;
  gap:8px;
}

.coordinates-summary{
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:15px;
}

.coordinates-summary small{
  display:block;
  color:var(--muted);
  margin-top:3px;
}

.coordinates-summary .code-box{
  margin-top:9px;
}

.form-disabled{
  opacity:.55;
  pointer-events:none;
}

.admin-dialog,
.variant-dialog{
  border:0;
  padding:0;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(15,23,42,.3);
  width:min(520px,calc(100% - 30px));
}

.admin-dialog::backdrop,
.variant-dialog::backdrop{
  background:rgba(15,23,42,.55);
}

.dialog-card,
.variant-card{
  padding:20px;
}

.dialog-card .panel-head,
.variant-card .panel-head{
  padding:0 0 14px;
}

.dialog-card h2,
.variant-card h2{
  margin:3px 0;
}

.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px;
}

.variant-list{
  display:grid;
  gap:8px;
}

.variant-option{
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px;
  background:var(--surface);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  text-align:left;
  cursor:pointer;
}

.variant-option:hover{
  border-color:var(--warn-solid);
  background:var(--warn-bg);
}

.variant-option small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}

.variant-option b{
  color:var(--red-text);
  white-space:nowrap;
}

.inline-create-form{
  display:flex;
  gap:9px;
}

.inline-create-form .input{
  flex:1;
}

.machine-family-list{
  display:grid;
  margin-top:20px;
}

.machine-family-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:14px 5px;
}

.machine-family-row small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}

.mini-ref{
  width:31px;
  height:31px;
  border-radius:7px;
}

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-top:17px;
}

.backup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.backup-grid .admin-panel{
  margin-top:0;
}

.small-empty{
  padding:25px 10px;
}

.toast-error{
  background:var(--danger-solid);
}

@media (max-width:1700px){
  .editor-grid-v4{
    grid-template-columns:270px minmax(480px,1fr) 350px;
  }
  .editor-catalog-select{
    min-width:300px;
  }
}

@media (max-width:1280px){
  .editor-grid-v4{
    grid-template-columns:1fr;
  }
  .editor-left-panel,
  .editor-detail-panel{
    position:static;
    max-height:none;
  }
  .editor-list{
    max-height:380px;
  }
  .editor-canvas-v4{
    min-height:580px;
  }
  .form-grid.two-col{
    grid-template-columns:1fr;
  }
  .span-2{
    grid-column:span 1;
  }
}

@media (max-width:860px){
  .admin-page-title{
    flex-direction:column;
  }
  .admin-filter-row .input:first-child{
    min-width:100%;
  }
  .form-section{
    grid-template-columns:1fr;
  }
  .section-number{
    width:34px;
    height:34px;
  }
  .backup-grid{
    grid-template-columns:1fr;
  }
  .inline-create-form{
    flex-direction:column;
  }
  .editor-top-toolbar{
    align-items:stretch;
  }
  .editor-catalog-select{
    min-width:0;
    width:100%;
  }
  .canvas-helpbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .catalog-image-preview{
    flex-direction:column;
  }
  .catalog-image-preview img{
    max-width:100%;
  }
  .sticky-form-actions{
    position:static;
  }
}

/* ===== V5 machine hierarchy, colours and mobile usability ===== */
:root{
  --cat-pnomatik:#ef233c;
  --cat-hububat:#f5b700;
  --cat-aniza:#f97316;
  --cat-capa:#8cc63f;
  --cat-dikfreze:#f4a261;
  --cat-pulluk:#d9903d;
  --cat-ekim:#ef233c;
  --cat-toprak:#20b84b;
}

/* Kategori renkleri koyu zeminde parlıyor ve beyaz yazıyı okunmaz yapıyordu;
   koyu temada bir tık yumuşatılmış karşılıkları kullanılır.
   NOT: --cat-pnomatik ile --cat-ekim aynı kırmızı (#ef233c) — iki ayrı
   kategori aynı renkte görünüyor, ayrıca marka kırmızısına çok yakın.
   Ayrıştırılması gerekiyor (açık iş). */
:root[data-theme="dark"]{
  --cat-pnomatik:#ff6b7a;
  --cat-hububat:#e0a91f;
  --cat-aniza:#f38a4a;
  --cat-capa:#9ed155;
  --cat-dikfreze:#e0a06a;
  --cat-pulluk:#c58f4f;
  --cat-ekim:#ff6b7a;
  --cat-toprak:#3fc768;
}

.spare-category-card{
  --category-color:#64748b;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  min-height:270px;
  padding:22px;
  display:grid;
  grid-template-columns:1fr 44%;
  gap:22px;
  align-items:center;
  text-align:left;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transition:.2s;
}

.spare-category-card:before,
.category-accent-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:9px;
  background:var(--category-color);
}

.spare-category-card:hover:not(.disabled){
  transform:translateY(-3px);
  border-color:var(--category-color);
}

.spare-category-card.disabled{
  opacity:.52;
  cursor:not-allowed;
}

.spare-category-copy small{
  display:block;
  color:var(--category-color);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.spare-category-copy strong{
  display:block;
  font-size:34px;
  line-height:1;
  letter-spacing:-.04em;
  margin-top:9px;
}

.spare-category-copy em{
  display:block;
  font-style:normal;
  color:var(--muted);
  line-height:1.45;
  margin-top:11px;
}

.spare-category-copy b{
  display:block;
  margin-top:15px;
}

.spare-category-media{
  height:220px;
  border-radius:20px;
  background:color-mix(in srgb,var(--category-color) 8%,var(--surface-soft));
  display:grid;
  place-items:center;
  padding:12px;
  overflow:hidden;
}

.spare-category-media img{
  max-height:200px;
  object-fit:contain;
}

.spare-category-media>span{
  font-size:56px;
}

/* Kok kategori kartlari: zemin kategori rengi, yazi beyaz. Ham renkte beyaz
   yazi 1.92-4.22 kontrast veriyordu (yesil ve sari en kotusu). Rengin uzerine
   --kart-perde kadar siyah perde cekiliyor: kategori kimligi korunuyor,
   sekiz rengin hepsinde beyaz yazi 4.99'un uzerine cikiyor. */
/* Ikinci bolum zemini. Onceden index.html icinde style="background:#fff"
   olarak duruyordu; satir ici oldugu icin koyu temada da beyaz kaliyor,
   uzerindeki acik yazi okunmaz hale geliyordu (2.44 kontrast). */
.section-alt{
  background:var(--surface);
}

.spare-category-card.root{
  color:var(--on-deep);
  background-color:var(--category-color);
  background-image:linear-gradient(rgba(0,0,0,var(--kart-perde)),rgba(0,0,0,var(--kart-perde)));
  border-color:transparent;
}

.spare-category-card.root.accent-ekim{
  --category-color:var(--cat-ekim);
}

.spare-category-card.root.accent-toprak{
  --category-color:var(--cat-toprak);
}

.spare-category-card.root .spare-category-copy small,
.spare-category-card.root .spare-category-copy em{
  color:var(--on-deep);
}

.spare-category-card.root .spare-category-media{
  background:rgba(255,255,255,.94);
}

.accent-pnomatik{
  --category-color:var(--cat-pnomatik);
}

.accent-hububat{
  --category-color:var(--cat-hububat);
}

.accent-aniza{
  --category-color:var(--cat-aniza);
}

.accent-capa{
  --category-color:var(--cat-capa);
}

.accent-dikfreze{
  --category-color:var(--cat-dikfreze);
}

.accent-pulluk{
  --category-color:var(--cat-pulluk);
}

.category-accent-card{
  position:relative;
}

.category-accent-card .family-label{
  color:var(--category-color);
}

.category-accent-card:hover{
  border-color:var(--category-color);
}

.category-path-dot{
  display:inline-block;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--category-color);
  align-self:center;
}

.part-quick-popover{
  position:fixed;
  z-index:120;
  width:min(390px,calc(100vw - 24px));
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:15px;
  box-shadow:0 24px 70px rgba(15,23,42,.27);
}

.part-quick-popover[hidden]{
  display:none;
}

.quick-close{
  position:absolute;
  right:8px;
  top:8px;
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:var(--surface-alt);
  font-size:20px;
}

.quick-product-media{
  height:115px;
  border-radius:13px;
  background:var(--surface-soft);
  display:grid;
  place-items:center;
  padding:8px;
}

.quick-product-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.quick-product-copy{
  min-width:0;
  padding-right:16px;
}

.quick-product-copy>span{
  font-size:10px;
  color:var(--green);
  font-weight:900;
}

.quick-product-copy h3{
  font-size:17px;
  margin:4px 0;
}

.quick-product-copy code{
  font-size:11px;
  color:var(--info-ink);
}

.quick-product-copy p{
  font-size:11px;
  color:var(--muted);
  margin:7px 0;
}

.quick-product-copy>strong{
  display:block;
  color:var(--red-text);
  font-size:18px;
}

.quick-actions{
  display:flex;
  gap:7px;
  margin-top:10px;
}

.quick-actions .btn{
  padding:8px 10px;
  font-size:11px;
}

.quick-product-copy>small{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:8px;
}

.quick-variant-list{
  display:flex;
  gap:5px;
  overflow-x:auto;
  margin-top:9px;
}

.quick-variant-list button{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  padding:5px 8px;
  font-size:9px;
  white-space:nowrap;
}

.quick-variant-list button.active{
  background:var(--navy);
  color:var(--on-deep);
}

@media (max-width:1280px){
  .spare-category-card{
    grid-template-columns:1fr 42%;
  }
}

@media (max-width:700px){
  body{
    overflow-x:hidden;
  }
  .container{
    width:min(100% - 20px,1240px);
  }
  .header-row{
    height:auto;
    min-height:66px;
    padding:8px 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
  }
  .brand-logo{
    height:26px;
  }
  .brand-text{
    font-size:13px;
  }
  .cart-link{
    padding:8px 10px;min-height:40px;grid-column:3;grid-row:1;
  }
  .cart-link .cart-label{display:none}
  .header-row>.theme-toggle{grid-column:2;grid-row:1}
  .nav{
    display:flex;
    grid-column:1/-1;
    order:3;
    width:100%;
    gap:6px;
    margin:0;
    overflow-x:auto;
    padding:5px 0;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{
    display:none;
  }
  .nav a{
    white-space:nowrap;
    background:var(--surface-soft);
    border-radius:999px;
    padding:9px 12px;
    font-size:12px;
    min-height:var(--tap);
    display:flex;
    align-items:center;
  }
  .hero{
    padding:38px 0;
  }
  .hero h1{
    font-size:38px;
  }
  .hero p{
    font-size:15px;
  }
  .stats{
    margin-top:14px;
    gap:10px;
  }
  .stat{
    padding:16px;
  }
  .stat strong{
    font-size:24px;
  }
  .section-head h2{
    font-size:28px;
  }
  .filters{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .chip{
    white-space:nowrap;
    min-height:var(--tap);
  }
  .catalog-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .spare-category-card{
    grid-template-columns:110px 1fr;
    min-height:0;
    padding:14px;
    border-radius:19px;
    gap:13px;
  }
  .spare-category-card.root{
    grid-template-columns:1fr;
  }
  .spare-category-card.root .spare-category-media{
    height:170px;
    order:2;
  }
  .spare-category-copy strong{
    font-size:23px;
  }
  .spare-category-copy em{
    font-size:12px;
    margin-top:7px;
  }
  .spare-category-copy b{
    font-size:11px;
    margin-top:9px;
  }
  .spare-category-media{
    height:105px;
    border-radius:14px;
    padding:7px;
  }
  .spare-category-media img{
    max-height:92px;
  }
  .catalog-thumb{
    height:175px;
  }
  .catalog-body{
    padding:16px;
  }
  .catalog-meta{
    flex-wrap:wrap;
    gap:8px;
  }
  .catalog-compare-page{
    width:100%;
    padding:0 10px;
  }
  .breadcrumb{
    padding:13px 0;
  }
  .catalog-title-row-compare{
    gap:11px;
  }
  .catalog-title-row-compare .btn{
    width:100%;
    min-height:var(--tap);
  }
  .catalog-workspace-compare{
    gap:10px;
  }
  .compare-panel-head{
    padding:11px;
    align-items:stretch;
  }
  .viewer-tools-compare{
    width:100%;
    display:grid;
    grid-template-columns:auto auto auto 1fr;
    gap:6px;
  }
  .viewer-tools-compare .btn,
  .zoom-label{
    min-height:var(--tap);
  }
  .viewer-stage-compare{
    height:auto;
    min-height:310px;
    max-height:62vh;
    overflow:auto;
  }
  .diagram-transform-compare{
    min-width:620px;
  }
  .parts-panel-compare{
    height:min(520px,65vh);
  }
  .parts-scroll-compare{
    -webkit-overflow-scrolling:touch;
  }
  .parts-table-compare{
    min-width:480px;
  }
  .selected-part-compare{
    position:sticky;
    bottom:8px;
    z-index:35;
    margin-top:10px;
    padding:14px;
    gap:10px;
    border-color:var(--line-strong);
  }
  .selected-part-compare h3{
    font-size:16px;
  }
  .selected-actions-compare{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .selected-actions-compare .btn{
    width:100%;
    min-height:var(--tap);
    padding:9px;
  }
  .compare-hotspot{
    width:var(--hs-boy,34px);
    height:var(--hs-boy,34px);
  }
  .table-toolbar-compare .input,
  .stock-filter-compare{
    min-height:var(--tap);
  }
  .row-arrow-compare{
    width:38px;
    height:38px;
  }
  .product-layout{
    gap:12px;
  }
  .product-image{
    height:280px;
  }
  .product-info{
    padding:17px;
  }
  .cart-layout{
    gap:12px;
  }
  .cart-item{
    padding:12px;
  }
  .footer{
    margin-top:34px;
  }
  .footer-row{
    gap:18px;
  }
  .part-quick-popover{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:10px!important;
    width:auto;
    grid-template-columns:86px 1fr;
    padding:12px;
  }
  .quick-product-media{
    height:92px;
  }
  .quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .quick-actions .btn{
    min-height:var(--tap);
  }
}

@media (max-width:560px){
  .spare-category-card{
    grid-template-columns:82px 1fr;
  }
  .spare-category-media{
    height:84px;
  }
  .spare-category-copy strong{
    font-size:20px;
  }
  .selected-actions-compare{
    grid-template-columns:1fr;
  }
  .diagram-transform-compare{
    min-width:560px;
  }
  .part-quick-popover{
    grid-template-columns:1fr;
  }
  .quick-product-media{
    display:none;
  }
}

/* Merkezi B2B katalog, bayi fiyatı ve yönetim durumları */
.dealer-price{
  display:grid;
  gap:3px;
  justify-items:end;
  line-height:1.2;
}

.dealer-price b{
  color:var(--red-text);
  font-size:15px;
}

.dealer-price small{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
}

.order-access-message{
  margin:12px 0;
  padding:11px 12px;
  border:1px solid var(--warn-line);
  border-radius:12px;
  background:var(--warn-bg);
  color:var(--warn-ink);
  font-size:12px;
  line-height:1.45;
}

.order-access-message.approved{
  border-color:var(--ok-line);
  background:var(--ok-bg);
  color:var(--ok-ink);
}

.order-access-message a{
  color:inherit;
  font-weight:800;
}

.order-success{
  text-align:center;
  padding:42px 24px;
}

.order-success>span{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--ok-bg);
  color:var(--ok-ink);
  font-size:28px;
  font-weight:900;
}

.order-success .btn{
  margin-top:12px;
}

/* Yuzen tema dugmesi (baslik henuz basilmadiysa gorunur) yayinlama
   panelinin uzerine binmesin: 700px altinda panel tam genislige yayiliyor. */
.theme-toggle[data-floating]{
  bottom:88px!important;
}

.cloud-publish-dock{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:180;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:330px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  /* Sabit beyazdi; koyu temada acik yazi acik zemin uzerinde kaliyor,
     kontrast 1.05'e dusuyordu. Artik yuzey token'ini kullaniyor. */
  background:var(--surface);
  box-shadow:0 18px 55px rgba(15,23,42,.22);
  backdrop-filter:blur(12px);
}

.cloud-publish-dock span{
  display:grid;
  gap:2px;
  flex:1;
}

.cloud-publish-dock strong{
  font-size:13px;
}

.cloud-publish-dock small{
  color:var(--muted);
  font-size:11px;
}

.cloud-publish-dock.has-pending{
  border-color:var(--warn-solid);
  box-shadow:0 18px 55px rgba(245,158,11,.2);
}

.admin-access-denied{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:var(--surface-soft);
}

.admin-access-denied .panel{
  max-width:560px;
  text-align:center;
  padding:38px;
}

.spare-access-page{
  margin:0;
  background:var(--surface-soft);
  color:var(--ink);
}

.spare-access-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.spare-access-card{
  width:min(100%,560px);
  padding:42px;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  text-align:center;
}

.spare-access-card .brand-logo{
  height:44px;
  margin:0 auto 16px;
}

.spare-access-card .eyebrow{
  display:block;
  color:var(--red-text);
}

.spare-access-card h1{
  margin:8px 0 12px;
  font-size:clamp(30px,6vw,50px);
}

.spare-access-card p{
  margin:0 auto;
  max-width:440px;
  color:var(--muted);
  line-height:1.65;
}

.spare-access-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}

@media (max-width:700px){
  .dealer-price{
    justify-items:start;
  }
  .cloud-publish-dock{
    left:10px;
    right:10px;
    bottom:10px;
    min-width:0;
    gap:10px;
  }
  .cloud-publish-dock .btn{
    min-height:var(--tap);
    padding:9px 12px;
  }
  .spare-access-card{
    padding:30px 20px;
    border-radius:22px;
  }
  .spare-access-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .spare-access-actions .btn{
    width:100%;
    min-height:var(--tap);
  }
  .cart-line-price{
    grid-column:2;
  }
}

/* Bildirimler yayınlama ve yönetim düğmelerinin üstüne gelmez. */
.toast{
  top:50%;
  right:auto;
  bottom:auto;
  left:50%;
  max-width:min(420px,calc(100vw - 36px));
  transform:translate(-50%,-50%);
  z-index:350;
  text-align:center;
  pointer-events:none;
}

.cloud-publish-dock .btn:disabled{
  cursor:not-allowed;
  opacity:.68;
}

/* Yönetici fiyatı ve sipariş düzenleme (revizyon) */
.yp-staff-panel{display:grid;gap:8px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.yp-edit-banner{display:grid;gap:6px;padding:12px;border:2px solid var(--red, #e2231a);border-radius:12px}
.yp-edit-banner span{font-size:12px;color:var(--muted)}
.yp-edit-banner label,.yp-staff-discount,.yp-staff-price{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.yp-edit-banner textarea{width:100%;box-sizing:border-box;resize:vertical}
.yp-staff-price{margin-top:6px}
.yp-staff-price input{max-width:150px;margin-left:auto}

/* === 29.09 KATALOG EKRANI: GENİŞLİK, HOTSPOT, MALZEME TABLOSU === */
/* Hotspot: <button> varsayılan iç boşluğu ve telefondaki min-height kuralı
   rakamı dairenin dışına itiyordu. Artık rakam tam ortada, taşmaz. */
.diagram-layer .compare-hotspot{
  --hs:max(20px,var(--hs-boy,31px));
  box-sizing:border-box;
  width:var(--hs);height:var(--hs);
  min-width:0;min-height:0;
  padding:0;margin:0;
  display:grid;place-items:center;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:calc(var(--hs) * .5);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.diagram-layer .compare-hotspot[data-len="2"]{font-size:calc(var(--hs) * .44)}
.diagram-layer .compare-hotspot[data-len="3"]{font-size:calc(var(--hs) * .36)}
.diagram-layer .compare-hotspot[data-len="4"]{font-size:calc(var(--hs) * .3)}

/* Malzeme tablosu: yana kaymaz. Ref, parça adı + kod, adet ve fiyat aynı
   anda görünür; uzun adlar alt satıra iner. */
.parts-scroll-compare{overflow-x:hidden;overflow-y:auto}
.parts-table-compare{table-layout:fixed;width:100%;min-width:0}
.parts-table-compare th:nth-child(1),.parts-table-compare td:nth-child(1){width:46px;padding-right:4px}
.parts-table-compare th:nth-child(3),.parts-table-compare td:nth-child(3){width:50px;text-align:center}
.parts-table-compare th:nth-child(4),.parts-table-compare td:nth-child(4){width:124px;text-align:right}
.parts-table-compare th:nth-child(5),.parts-table-compare td:nth-child(5){width:44px;padding-left:4px}
.parts-table-compare td:nth-child(2){overflow-wrap:anywhere}
.parts-table-compare .price{white-space:normal}
.parts-table-compare .dealer-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.parts-table-compare .dealer-price b{white-space:nowrap}
.parts-table-compare .dealer-price small{font-size:10px;line-height:1.3;color:var(--muted);font-weight:600;white-space:normal;text-align:right}
.parts-table-compare .price-on-request{white-space:nowrap}
.compare-part-qty{display:none}

/* Geniş ekran: sayfa ekranı kaplar, teknik resim ve tablo yan yana büyür. */
@media (min-width:1281px){
  .container{width:min(1840px,calc(100% - 48px))}
  .catalog-workspace-compare{grid-template-columns:minmax(0,1fr) clamp(420px,30vw,580px)}
  .viewer-stage-compare{height:clamp(560px,calc(100vh - 290px),1150px)}
  .parts-panel-compare{height:calc(clamp(560px,calc(100vh - 290px),1150px) + 64px)}
  .diagram-transform-compare{margin:0 auto}
}
@media (min-width:701px) and (max-width:1280px){
  .diagram-transform-compare{margin:0 auto}
}

/* Telefon: Adet sütunu parça hücresine taşınır; ref, parça ve fiyat
   yan yana sığar, tablo yana kaymaz. */
@media (max-width:700px){
  .parts-table-compare{min-width:0}
  .parts-table-compare th:nth-child(3),.parts-table-compare td:nth-child(3){display:none}
  .parts-table-compare th:nth-child(4),.parts-table-compare td:nth-child(4){display:table-cell;width:104px}
  .parts-table-compare th:nth-child(1),.parts-table-compare td:nth-child(1){width:40px}
  .parts-table-compare th:nth-child(5),.parts-table-compare td:nth-child(5){width:44px}
  .parts-table-compare td{padding:9px 6px}
  .compare-part-qty{display:block;margin-top:2px;color:var(--muted);font-size:10.5px}
  .parts-table-compare .dealer-price small{display:none}
  .diagram-layer .compare-hotspot{--hs:max(22px,var(--hs-boy,31px))}
}

/* === 29.09 TELEFON: yönetim başlığı, temsil çubuğu, iOS yakınlaştırma === */
.impersonation-exit-text{margin-left:6px}
#impersonationExit{display:inline-flex;align-items:center}
@media (max-width:700px){
  /* Yönetim üst çubuğu taşmaz: Menü | başlık | Çıkış yap tek satır. */
  .admin-topbar{height:auto;min-height:58px;padding:8px 12px;gap:10px}
  .admin-menu-toggle{margin-right:0}
  .admin-topbar>div:not(.admin-topbar-account){flex:1 1 auto;min-width:0}
  .admin-topbar>div:not(.admin-topbar-account) strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .admin-top-sub{display:none}
  .admin-topbar-account{gap:8px;flex:0 0 auto}
  .admin-topbar-account #adminTopIdentity{display:none}
  .admin-topbar-account .logout-button{min-height:40px;padding:0 14px;white-space:nowrap}

  .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}
  .impersonation-bar button{flex:0 0 auto;min-height:32px;padding:0 10px;font-size:14px}
  .impersonation-exit-text{display:none}
}
@media screen and (max-width:860px), screen and (pointer:coarse){
  input,select,textarea{font-size:16px}
}

/* === 29.09 DENETİM: telefon başlığı ve seçili parça paneli ============= */
.kisa-yazi{display:none}
@media (max-width:700px){
  /* Çıkış yap artık ayrı satır kaplamıyor: logo | Çıkış | tema | sepet */
  .header-row{grid-template-columns:minmax(0,1fr) auto auto auto}
  .header-row>.brand{width:auto;justify-self:start}
  .header-row>.logout-button{grid-column:2;grid-row:1;width:auto;min-height:40px;padding:0 12px;font-size:13px;white-space:nowrap}
  .header-row>.theme-toggle{grid-column:3;grid-row:1}
  .cart-link{grid-column:4;grid-row:1}

  /* Seçili parça paneli teknik resmi kapatmasın: tek satır bilgi + iki küçük düğme */
  .selected-part-compare{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 12px}
  .selected-part-compare h3{font-size:14px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .selected-part-compare p{font-size:11px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .selected-ref-compare{font-size:10px}
  .selected-actions-compare{display:flex;flex-direction:column;gap:6px;width:auto;grid-template-columns:none}
  .selected-actions-compare .btn{width:auto;min-height:38px;padding:6px 12px;font-size:13px;white-space:nowrap}
  .uzun-yazi{display:none}
  .kisa-yazi{display:inline}
}