/* ==========================================================
   LAZZONI B2C — Tasarım Sistemi
   Marka rengi (terracotta) korunarak modernize edilmiştir.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- Renk Token'ları --- */
  --ink:        #101828;   /* birincil metin */
  --ink-soft:   #667085;   /* ikincil metin */
  --paper:      #F7F9FC;   /* sayfa zemini (soğuk gri-mavi) */
  --surface:    #FFFFFF;   /* kart zemini */
  --line:       #E3E8EF;   /* kenarlık */
  --line-soft:  #EEF2F7;

  --brand:      #2454E0;   /* ana marka mavisi */
  --brand-dark: #1B3FB0;
  --brand-tint: #EAF0FE;

  --sidebar:    #0B1526;   /* koyu lacivert sidebar zemini */
  --sidebar-ink:#8B97AC;
  --sidebar-active: #16233B;

  --success:    #16A34A;
  --success-tint:#E9F8EF;
  --warning:    #D97706;
  --warning-tint:#FEF3E2;
  --danger:     #DC2626;
  --danger-tint:#FDECEC;
  --info:       #2454E0;
  --info-tint:  #EAF0FE;

  /* --- Tipografi --- */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- Ölçüler --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(28,25,23,.06);
  --shadow:    0 8px 24px -12px rgba(28,25,23,.18);
  --sidebar-w: 264px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; color: var(--ink); margin:0; }
a{ color: var(--brand); text-decoration:none; }
a:hover{ text-decoration: underline; }

:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* ================= LOGIN SAYFASI ================= */
.auth-shell{
  min-height:100vh;
  display:flex;
  background:
    radial-gradient(1100px 480px at 100% 0%, #DCE6FB 0%, transparent 60%),
    var(--paper);
}
.auth-aside{
  flex:1 1 46%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:56px;
  background: var(--sidebar);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.auth-aside::after{
  content:"";
  position:absolute; right:-120px; bottom:-120px;
  width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(36,84,224,.55), transparent 70%);
}
.auth-mark{ font-family:var(--font-display); font-weight:700; letter-spacing:4px; font-size:22px; z-index:1;}
.auth-quote{ max-width:420px; font-size:26px; line-height:1.4; font-family:var(--font-display); font-weight:500; z-index:1;}
.auth-quote span{ color:#9CB6FF; }
.auth-foot{ font-size:12.5px; color:#6B7896; z-index:1;}

.auth-main{
  flex:1 1 54%;
  display:flex; align-items:center; justify-content:center;
  padding: 40px;
}
.auth-card{ width:100%; max-width:380px; }
.auth-card h1{ font-size:24px; margin-bottom:6px; }
.auth-card p.lead{ color:var(--ink-soft); margin:0 0 28px; font-size:14px;}

.region-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand-tint); color:var(--brand-dark);
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
}

/* ================= FORM ELEMANLARI ================= */
.field{ margin-bottom:18px; text-align:left; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field .hint{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:14px; font-family:var(--font-body); color:var(--ink); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); outline:none;
}
textarea{ resize:vertical; min-height:80px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-weight:600; font-size:14px; cursor:pointer; transition:background .15s, border-color .15s, color .15s;
  font-family: var(--font-body);
}
.btn-block{ width:100%; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-dark); text-decoration:none; }
.btn-outline{ background:#fff; color:var(--ink-soft); border-color:var(--line); }
.btn-outline:hover{ background:var(--line-soft); text-decoration:none; }
.btn-danger{ background:var(--danger-tint); color:var(--danger); }
.btn-danger:hover{ background:#FBD8D8; text-decoration:none;}
.btn-sm{ padding:7px 12px; font-size:12.5px; }

/* Katalog vitrini "Ürün Detayı" (PDF) / "Ürüne Git" (link) butonları — bkz.
   modules/katalog/liste.php. Tek bir grup içinde döndürülür ki .page-head'in
   flex+space-between düzeninde ayrı ayrı dağılıp tuhaf boşluklar oluşmasın.
   "Yüksek Kontrast" renk düzeni: her öğe belirgin bir kenarlık/dolgu ile
   sayfanın açık gri zemininden net ayrışır — soluk/yarı saydam tonlardan
   kaçınılır. Katalog kartlarındaki rozetlerle (bkz. aşağıdaki $kartCiz)
   aynı mantığı paylaşır: koyu dolu (kod rozeti), net bir ikinci renk
   (paket rozeti) ve dolu marka mavisi (birincil eylemler). */
.vitrin-btn-group{ display:flex; gap:10px; flex-wrap:wrap; }
.vitrin-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:8px;
  font-size:13px; font-weight:700; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vitrin-btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 14px rgba(16,24,40,.10); }
.vitrin-btn-outline{ background:#fff; color:var(--ink); border:1.5px solid #C6CCDA; }
.vitrin-btn-outline:hover{ background:var(--line-soft); }
.vitrin-btn-primary{ background:var(--brand); color:#fff; border:1.5px solid var(--brand); }
.vitrin-btn-primary:hover{ background:var(--brand-dark); }
button.vitrin-btn{ font-family:inherit; cursor:pointer; }

/* "Ürün Detayı" / "Montaj Şablonu" birden fazla PDF içerdiğinde — buton
   tıklanınca dosyaları listeleyen küçük açılır menü (bkz. modules/katalog/
   liste.php, $vitrinPdfButonuCiz). Tek dosya varsa bu hiç kullanılmaz,
   buton direkt dosyayı açan normal bir link olur. */
.vitrin-btn-dropdown{ position:relative; display:inline-block; }
.vitrin-btn-caret{ font-size:10px; margin-left:2px; }
.vitrin-dropdown-menu{
  display:none; position:absolute; top:100%; left:0; margin-top:6px;
  background:#fff; border:1.5px solid #C6CCDA; border-radius:8px;
  box-shadow:0 10px 24px rgba(16,24,40,.14); min-width:220px;
  max-width:320px; padding:6px; z-index:30;
}
.vitrin-btn-dropdown.open .vitrin-dropdown-menu{ display:block; }
.vitrin-dropdown-menu a{
  display:block; padding:8px 10px; border-radius:6px;
  font-size:12.5px; font-weight:600; color:var(--ink);
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vitrin-dropdown-menu a:hover{ background:var(--line-soft); }

/* Katalog ürün kartları — bkz. modules/katalog/liste.php ($kartCiz). Sadece
   burada kullanılan kapsamlı (scoped) sınıflar; genel .card/.btn sınıflarını
   DEĞİŞTİRMEZ, böylece panelin geri kalanındaki kartlar/butonlar etkilenmez. */
.katalog-urun-karti{ border:1.5px solid #DEE2EA; }
.katalog-urun-gorsel{ background:#EFF1F5; border-bottom:1.5px solid #DEE2EA; }
.katalog-rozet-kod{ background:#1B2233; color:#fff; }
.katalog-rozet-paket{ background:#B8560F; color:#fff; }
.katalog-btn-outline{ border-color:#B9C0D0 !important; font-weight:700 !important; }

/* Katalog ana satırı: ürün ızgarası + sağdaki sepet kutusu. Sabit 300px
   sepet kutusu, telefon genişliğinde asla küçülmediğinden ürün ızgarasını
   sıkıştırıp sayfayı yana kaydırıyordu — dar ekranda tek sütuna düşüyor
   (sepet kutusu ürünlerin altına iniyor). */
.katalog-ana-satir{ display:flex; gap:24px; align-items:flex-start; }
.katalog-urun-sutunu{ flex:1; min-width:0; }
.katalog-sepet-sutunu{ width:300px; flex-shrink:0; }
@media (max-width: 900px){
  .katalog-ana-satir{ flex-direction:column; }
  .katalog-sepet-sutunu{ width:100%; }
}

/* Açıklamalı ("geniş") ürün kartı: normalde ızgarada 2 sütun kaplayıp
   görseli sabit 200px genişlikte solda gösterir. Telefonda ızgara zaten
   tek sütuna düştüğünden "span 2" istemi tarayıcıyı fazladan bir sütun
   oluşturmaya zorluyor ve TÜM sayfayı yana kaydırıyordu — dar ekranda
   normal kart gibi tek sütuna ve dikey (resim üstte, açıklama altta)
   düzene dönüyor. */
.katalog-urun-karti-genis{ flex-direction:row; grid-column:span 2; }
.katalog-urun-karti-genis .katalog-urun-genis-sol{ width:200px; flex-shrink:0; }
.katalog-urun-karti-genis .katalog-urun-genis-sag{ border-left:1px solid var(--line-soft); }
@media (max-width: 480px){
  .katalog-urun-karti-genis{ flex-direction:column; grid-column:span 1; }
  .katalog-urun-karti-genis .katalog-urun-genis-sol{ width:100%; flex-shrink:1; }
  .katalog-urun-karti-genis .katalog-urun-genis-sag{ border-left:none; border-top:1px solid var(--line-soft); }
}

.alert{ padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:20px; }
.alert-error{ background:var(--danger-tint); color:var(--danger); }
.alert-success{ background:var(--success-tint); color:var(--success); }
.alert-info{ background:var(--info-tint); color:var(--info); }

/* ---- Aç/kapa "bilgi" kutusu — uzun açıklama metinlerini varsayılan
   olarak gizleyip küçük bir rozet/çip ile açılabilir yapmak için (bkz.
   includes/header.php'deki bilgiKutusuAcKapat() fonksiyonu). Sayfa
   yüklendiğinde sadece çip görünür, tıklanınca altında panel açılır. */
.info-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--info-tint); color:var(--info);
  border:1px solid transparent; border-radius:999px;
  padding:6px 14px 6px 12px; font-size:12.5px; font-weight:600;
  cursor:pointer; line-height:1; transition:background .15s ease, transform .08s ease;
}
.info-toggle:hover{ background:#DCE6FD; }
.info-toggle:active{ transform:scale(.97); }
.info-toggle .info-toggle-ico{ font-size:13px; }
.info-toggle .info-toggle-chev{ font-size:9px; display:inline-block; transition:transform .15s ease; margin-left:2px; }
.info-toggle.open .info-toggle-chev{ transform:rotate(180deg); }
.info-panel{
  display:none;
  margin-top:8px; padding:12px 16px; background:var(--info-tint);
  border-left:3px solid var(--info); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px; line-height:1.55; color:#1f2a44;
  animation:infoPanelAcilis .15s ease;
}
.info-panel p{ margin:0 0 8px; }
.info-panel p:last-child{ margin-bottom:0; }
@keyframes infoPanelAcilis{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }

/* ---- Aynı aç/kapa mekanizması, UYARI (kırmızı) renginde — "Dikkat"
   niteliğindeki, her zaman aynı metni gösteren statik uyarı kutuları için
   (bkz. modules/kategoriler/agac_duzenle.php). Sayfa yüklendiğinde sadece
   çip görünür, tıklanınca altında kırmızı panel açılır. */
.info-toggle.warn{ background:var(--danger-tint); color:var(--danger); }
.info-toggle.warn:hover{ background:#FBD9D9; }
.info-panel.warn{ background:var(--danger-tint); border-left-color:var(--danger); color:#7A1F1F; }

/* ================= APP SHELL (dashboard) ================= */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar); color:var(--sidebar-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition: width 0.2s ease-in-out; /* Daraltma animasyonu için eklendi */
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:22px 22px 18px; }
.sidebar-brand .dot{ width:9px; height:9px; border-radius:2px; background:var(--brand); }
.sidebar-brand span{ font-family:var(--font-display); font-weight:700; letter-spacing:2.5px; color:#fff; font-size:15px;}

.sidebar-user{ margin:0 16px 14px; padding:12px; background:var(--sidebar-active); border-radius:var(--radius-sm); }
.sidebar-user .name{ color:#fff; font-weight:600; font-size:13.5px; }
.sidebar-user .role{ font-size:11.5px; color:#7B87A0; margin-top:2px; }

.nav-group{ padding:6px 12px; }
.nav-group-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:#5D6A85; padding:14px 10px 6px; }
.nav-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--sidebar-ink); font-size:13.5px; font-weight:500;
}
.nav-link:hover{ background:var(--sidebar-active); text-decoration:none; color:#fff; }
.nav-link.active{ background:var(--brand); color:#fff; }
.nav-link .ico{ width:16px; text-align:center; opacity:.9; }

.sidebar-bottom{ margin-top:auto; padding:16px; border-top:1px solid #1C2A42; }

/* --- SIDEBAR DARALTILMIŞ (COLLAPSED) DURUMU --- */
.sidebar.collapsed { width: 76px; overflow-x: hidden; }
.sidebar.collapsed .sidebar-brand span:not(.dot) { display: none; }
.sidebar.collapsed .sidebar-brand { padding: 22px 0; align-items: center; justify-content: center; }
.sidebar.collapsed .sidebar-user { display: none; }
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .nav-sub-title { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 12px 0; margin: 0 4px; }
.sidebar.collapsed .nav-link .link-text { display: none; }
.sidebar.collapsed .nav-link .ico { margin: 0; font-size: 16px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:64px; 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:5;
}

/* --- HAMBURGER BUTONU --- */
.btn-hamburger { 
  background: none; border: none; font-size: 20px; color: var(--ink-soft); 
  cursor: pointer; padding: 0; margin-right: 16px; 
  display: inline-flex; align-items: center; justify-content: center; 
  transition: color 0.15s; 
}
.btn-hamburger:hover { color: var(--brand); }

.topbar-search{ position:relative; width:320px; max-width:40vw; }
.topbar-search input{ padding-left:34px; background:var(--paper); }
.topbar-search .ico{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:13px;}

.topbar-right{ display:flex; align-items:center; gap:14px; }
.region-badge{
  display:flex; align-items:center; gap:8px; background:var(--brand-tint); color:var(--brand-dark);
  padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600;
}
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--line-soft); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink-soft); font-size:12.5px;}

.content{ padding:28px; flex:1; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.page-head .crumbs{ font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
.page-head h1{ font-size:21px; }

/* ================= KARTLAR / GRID ================= */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); }
.stat-card .label{ font-size:12px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.stat-card .value{ font-family:var(--font-display); font-size:26px; font-weight:700; margin-top:6px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.card-head h2{ font-size:15.5px; }
.card-body{ padding:22px; }

/* ================= TABLO ================= */
.table-wrap{ overflow-x:auto; }
table.grid{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.grid th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft);
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper); white-space:nowrap;
}
table.grid td{ padding:13px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.grid tr:hover td{ background:var(--paper); }
table.grid .filter-row input, table.grid .filter-row select{ padding:7px 9px; font-size:12.5px; }

.badge{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
.badge-success{ background:var(--success-tint); color:var(--success); }
.badge-warning{ background:var(--warning-tint); color:var(--warning); }
.badge-danger{ background:var(--danger-tint); color:var(--danger); }
.badge-neutral{ background:var(--line-soft); color:var(--ink-soft); }
.badge-info{ background:var(--info-tint); color:var(--info); }

.row-actions{ display:flex; gap:8px; }
.icon-btn{ width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; color:var(--ink-soft); }
.icon-btn:hover{ background:var(--line-soft); text-decoration:none; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.empty-state h3{ color:var(--ink); margin-bottom:6px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-grid .field.full{ grid-column:1 / -1; }
@media (max-width: 720px){ .form-grid{ grid-template-columns:1fr; } }

/* İki sütunlu bespoke bloklar (ör. dosya/link çiftleri) için .form-grid'in
   dışında kullanılan, aynı mobil davranışa sahip genel amaçlı yardımcı sınıf. */
.grid-2col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 720px){ .grid-2col{ grid-template-columns:1fr; } }

/* Sabit genişlikli bir "yan sütun" (görsel/özet kutusu, ör. 300px) + kalan
   alanı dolduran ana içerik ikilisi için. Bare grid track'leri (300px 1fr)
   flexbox'ın aksine kendiliğinden küçülmez — dar ekranda tek sütuna
   düşürüyoruz.
   ÖNEMLİ (min-width:0): CSS Grid'de bir sütun, varsayılan olarak İÇİNDEKİ
   İÇERİĞİN doğal (min-content) genişliğinden DAHA DAR olamaz — "1fr"
   yazması bunu değiştirmez. İçeride geniş bir tablo varsa (ör.
   Sepetlerim'deki "Sepetteki Ürünler" tablosu), tablonun kendi
   `.table-wrap{overflow-x:auto}` kaydırması hiç devreye girmeden ÖNCE bu
   sütun kendisi genişleyip TÜM SAYFAYI (720px üstü, ör. 1280-1366px
   genişlikli dizüstü ekranlarında) sağa doğru taşırıyordu — kullanıcı
   sayfanın tamamını görebilmek için tarayıcı yakınlaştırmasını (Ctrl+-)
   küçültmek zorunda kalıyordu. `min-width:0` bu sütunun gerektiğinde
   içeriğinden daha dar olmasına izin veriyor; böylece taşma artık
   sayfanın tamamında değil, sadece tablonun kendi içinde (yatay kaydırma
   çubuğuyla) oluyor. */
.grid-fixed-sidebar{ display:grid; grid-template-columns:300px 1fr; gap:24px; }
.grid-fixed-sidebar > *{ min-width:0; }
@media (max-width: 720px){ .grid-fixed-sidebar{ grid-template-columns:1fr; } }

/* Sabit genişlikli arama kutusu + buton içeren küçük GET formları — dar
   ekranda buton alta düşsün, kutu da konteynerinden taşmasın. */
.inline-search-form{ display:flex; gap:8px; flex-wrap:wrap; }
.inline-search-form input[type=text]{ max-width:100%; }

.form-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:8px; border-top:1px solid var(--line-soft); margin-top:8px; }

/* ================= CHECKBOX LİSTESİ (çoklu bölge/grup seçimi) ================= */
.checkbox-group{
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  max-height:240px; overflow-y:auto; padding:8px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:2px;
}
.checkbox-group .cb-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px;
  font-size:13.5px; cursor:pointer; user-select:none;
}
.checkbox-group .cb-row:hover{ background:var(--paper); }
.checkbox-group .cb-row input[type=checkbox]{
  width:17px; height:17px; accent-color:var(--brand); cursor:pointer; flex-shrink:0;
}
.checkbox-group .cb-empty{ padding:14px; text-align:center; color:var(--ink-soft); font-size:13px; }
.checkbox-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.checkbox-toolbar button{
  background:none; border:none; color:var(--brand); font-size:12.5px; font-weight:600; cursor:pointer; padding:0;
}
.checkbox-toolbar button:hover{ text-decoration:underline; }

@media (max-width: 900px){
  .sidebar{ position:fixed; left:-264px; z-index:20; transition:left .2s; }
  .sidebar.open{ left:0; }
  .auth-aside{ display:none; }
  .sidebar-backdrop.visible{ display:block; }
}
/* Mobil menü açıkken içeriği karartan arka plan — tıklanınca menüyü kapatır
   (bkz. includes/header.php script'i). Masaüstünde hiç gösterilmez. */
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:19; }

/* iOS Safari (iPhone), bir <input>/<select>/<textarea>'ya dokunulduğunda
   o alanın yazı tipi 16px'ten küçükse SAYFAYI OTOMATİK YAKINLAŞTIRIR
   (zoom in) — kullanıcı parmağını kaldırınca da genelde eski haline tam
   dönmez. Sitedeki tüm form alanları 14px olduğundan, telefonda ÇOK
   alanlı bir formda (ör. Sepetlerim → "Siparişi Tamamla" penceresi: 7
   alan art arda dolduruluyor) her dokunuşta ekran aniden yakınlaşıp
   pencerenin/sayfanın kayması veya kesik/bozuk görünmesi gibi rahatsız
   edici bir deneyime yol açıyordu — düzen hatası değil, tarayıcının
   kendi otomatik yakınlaştırma davranışıydı. Sadece telefon/tablet
   genişliğinde (900px altı) yazı boyutunu 16px'e çıkararak bu otomatik
   yakınlaştırmayı tamamen engelliyoruz; masaüstü görünümü BİREBİR aynı
   kalıyor (bu kural sadece 900px altında devreye giriyor). */
@media (max-width: 900px){
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],select,textarea{
    font-size:16px;
  }
}

/* ================= SEKMELER (TABS) ================= */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto; }
.tab-btn{
  padding:11px 16px; font-size:13.5px; font-weight:600; color:var(--ink-soft); background:none; border:none;
  cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; font-family:var(--font-body);
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--brand); border-bottom-color:var(--brand); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ================= STEPPER (Kategori Yapısı) ================= */
.stepper{ max-width:760px; }
.step-connector{ text-align:center; color:var(--brand); font-size:16px; padding:2px 0; }
.step-box{
  border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-sm);
  background:#fff; box-shadow:var(--shadow-sm); margin-bottom:0; overflow:hidden; transition:box-shadow .15s;
}
.step-box:hover{ box-shadow:0 4px 14px -6px rgba(28,25,23,.15); }
.step-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; gap:10px;
}
.step-head:hover{ background:var(--paper); }
.step-head-left{ display:flex; align-items:center; gap:12px; }
.step-drag{ color:var(--ink-soft); font-size:14px; user-select:none; }
.step-title{ font-weight:600; font-size:14.5px; color:var(--ink); }
.step-value{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.step-pill{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-dark); letter-spacing:.3px; text-transform:uppercase;
}
.step-pill.ozel{ background:var(--warning-tint); color:var(--warning); }
.step-head-right{ display:flex; align-items:center; gap:14px; }
.step-index{ font-size:10.5px; color:var(--ink-soft); font-weight:700; letter-spacing:.5px; }
.step-actions{ display:flex; gap:8px; }
.step-actions button{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:14px; padding:2px; }
.step-actions button:hover{ color:var(--brand); }
.step-actions .sil-btn:hover{ color:var(--danger); }
.step-caret{ color:var(--ink-soft); transition:transform .15s; font-size:11px; }
.step-box.open .step-caret{ transform:rotate(180deg); }
.step-body{ display:none; padding:16px 18px 20px; border-top:1px solid var(--line-soft); background:var(--paper); }
.step-box.open .step-body{ display:block; }
.step-add-row{ text-align:center; padding:14px; }
.step-final{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:16px;
  background:var(--success-tint); border:1px solid #BEEAD0; border-radius:var(--radius-sm); color:var(--success); font-weight:700;
}

/* ================= RESİM GRID ================= */
.resim-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.resim-card{ position:relative; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.resim-card img{ width:100%; height:130px; object-fit:cover; display:block; }
.resim-card .resim-actions{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; }
.resim-card .kapak-yildiz{ color:#D4A017; font-size:14px; }