/* ==========================================================================
   bibaskici.com — WooCommerce Teması / Özel Stiller
   Bootstrap 5.3 üzerine kurulu. Tüm özel bileşenler "mk-" öneki taşır,
   böylece Bootstrap sınıflarıyla çakışma olmaz.

   İÇİNDEKİLER
   01. Tasarım tokenları (:root)
   02. Bootstrap değişken eşlemesi
   03. Temel / tipografi
   04. Butonlar
   05. Rozet & etiket
   06. Üst bar / header / kategori nav
   07. Hero & şerit
   08. Bölüm yapısı
   09. Ürün kartı & ray
   10. Filtre paneli & liste araçları
   11. Ürün detay (konfigüratör, galeri, sekmeler)
   12. Sepet / ödeme / form
   13. Hesabım paneli
   14. Süreç, SSS, blog, yardımcı bileşenler
   15. Footer & yüzen butonlar
   16. Yardımcı sınıflar & animasyon
   17. Duyarlı (responsive) düzenlemeler
   ========================================================================== */

/* ==========================================================================
   01. TASARIM TOKENLARI — iki katman
   A) PALET  (--c-*)  : ham renkler. Marka değişince SADECE bu blok değişir.
   B) ROLLER (--brand, --paper, --ink …): bileşenlerin kullandığı anlamsal adlar;
      palete işaret eder, bileşen CSS'ine dokunmadan tema yeniden renklenir.
   WordPress'te aynı tokenlar theme.json "settings.color.palette" ile eşlenir.
   ========================================================================== */
:root{
  /* ---------- A) PALET ---------- */
  --c-paper-50:   #FBFAF5;
  --c-paper-100:  #F5F2E8;
  --c-paper-200:  #EFEBDD;
  --c-paper-300:  #E8E3D2;
  --c-paper-400:  #D4CDB8;
  --c-ink-900:    #1A1410;
  --c-ink-700:    #3D342B;
  --c-ink-500:    #837566;
  --c-ink-400:    #9C8E7E;
  --c-ink-200:    #EDE7DC;

  --c-green-500:  #2E6B45;
  --c-green-600:  #245637;
  --c-green-800:  #163A24;
  --c-green-900:  #0F2A1A;
  --c-green-rgb:  46,107,69;

  --c-gold-500:   #F5B800;
  --c-gold-400:   #F8C32C;
  --c-gold-300:   #FCD34D;
  --c-gold-100:   #FEF3C7;
  --c-gold-800:   #8F6300;

  --c-ok:         #1FB358;   --c-ok-soft:     #E6F6EC;
  --c-warn:       #D99A00;   --c-warn-soft:   #FEF3C7;
  --c-danger:     #C62828;   --c-danger-soft: #FBE9E9;
  --c-info:       #1565C0;   --c-info-soft:   #E8F0FF;
  --c-wa:         #25D366;

  /* ---------- B) ROLLER ---------- */
  --paper:        var(--c-paper-50);     /* sayfa zemini */
  --paper-alt:    var(--c-paper-100);    /* bölüm bandı */
  --paper-deep:   var(--c-paper-200);    /* gövde arkası, görsel zemini */
  --ink:          var(--c-ink-900);      /* ana metin */
  --ink-2:        var(--c-ink-700);
  --ink-on-dark:  var(--c-ink-200);      /* koyu zemin üstü metin */
  --muted:        var(--c-ink-500);
  --muted-2:      var(--c-ink-400);
  --line:         var(--c-paper-300);
  --line-soft:    var(--c-paper-400);

  --brand:        var(--c-green-500);    /* birincil marka */
  --brand-600:    var(--c-green-600);
  --brand-800:    var(--c-green-800);
  --brand-900:    var(--c-green-900);
  --brand-rgb:    var(--c-green-rgb);
  --brand-soft:   rgba(var(--brand-rgb),.08);

  --gold:         var(--c-gold-500);     /* aksan / CTA */
  --gold-400:     var(--c-gold-400);
  --gold-300:     var(--c-gold-300);
  --gold-100:     var(--c-gold-100);
  --gold-ink:     var(--c-gold-800);

  --ok:           var(--c-ok);      --ok-soft:     var(--c-ok-soft);
  --warn:         var(--c-warn);    --warn-soft:   var(--c-warn-soft);
  --danger:       var(--c-danger);  --danger-soft: var(--c-danger-soft);
  --info:         var(--c-info);    --info-soft:   var(--c-info-soft);
  --wa:           var(--c-wa);

  /* --- Şekil merdiveni --- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 9999px;

  /* --- Sıcak gölge --- */
  --sh-sm: 0 4px 8px rgba(26,20,16,.04);
  --sh-md: 0 12px 32px rgba(26,20,16,.08), 0 4px 8px rgba(26,20,16,.04);
  --sh-lg: 0 24px 56px rgba(26,20,16,.12), 0 8px 16px rgba(26,20,16,.05);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   02. BOOTSTRAP DEĞİŞKEN EŞLEMESİ
   Bootstrap'in kendi CSS değişkenlerini tasarım sistemine bağlıyoruz.
   ========================================================================== */
:root,
[data-bs-theme="light"]{
  --bs-body-bg:            var(--paper);
  --bs-body-color:         var(--ink);
  --bs-body-font-family:   'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bs-body-font-size:     1rem;
  --bs-body-line-height:   1.5;
  --bs-emphasis-color:     var(--ink);
  --bs-secondary-color:    var(--muted);
  --bs-border-color:       var(--line);
  --bs-border-radius:      var(--r-md);
  --bs-border-radius-sm:   var(--r-sm);
  --bs-border-radius-lg:   var(--r-lg);
  --bs-border-radius-xl:   var(--r-xl);
  --bs-link-color:         var(--brand);
  --bs-link-hover-color:   var(--brand-600);
  --bs-primary:            var(--brand);
  --bs-primary-rgb:        var(--brand-rgb);
  --bs-secondary-rgb:      131,117,102;
  --bs-success:            var(--ok);
  --bs-warning:            var(--gold);
  --bs-danger:             var(--danger);
  --bs-focus-ring-color:   rgba(245,184,0,.35);
  --bs-box-shadow:         var(--sh-md);
  --bs-box-shadow-sm:      var(--sh-sm);
  --bs-box-shadow-lg:      var(--sh-lg);
}

/* Konteyner genişliği — orijinal tasarımdaki 1280px iç grid */
@media (min-width:1400px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{ max-width:1280px }
}
@media (min-width:1200px) and (max-width:1399.98px){
  .container, .container-lg, .container-md, .container-sm, .container-xl{ max-width:1140px }
}

/* ==========================================================================
   03. TEMEL / TİPOGRAFİ
   ========================================================================== */
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--paper-deep);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto }
a{ text-decoration:none }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px }

/* 1440px kabuk — sayfa gövdesi ortalanmış kart gibi durur */
.mk-shell{ max-width:1440px; margin:0 auto; background:var(--paper); box-shadow:var(--sh-md) }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{
  font-weight:600; letter-spacing:-.025em; line-height:1.15; color:var(--ink);
}
h1,.h1{ font-size:clamp(30px,3.6vw,44px); font-weight:700; letter-spacing:-.035em }
h2,.h2{ font-size:clamp(24px,2.4vw,30px) }
h3,.h3{ font-size:18px; letter-spacing:-.015em }
h4,.h4{ font-size:16px }

.mk-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--gold-ink);
}
.mk-lead{ color:var(--muted); font-size:16px; margin-top:12px }
.mk-prose{ max-width:672px }
.mk-num{ font-variant-numeric:tabular-nums }
.mk-muted{ color:var(--muted) }
.mk-muted-2{ color:var(--muted-2) }
.mk-ink{ color:var(--ink) }
.mk-brand{ color:var(--brand) }
.mk-gold{ color:var(--gold-ink) }
.mk-hr{ height:1px; background:var(--line); border:0; margin:0 }

/* ==========================================================================
   04. BUTONLAR
   Bootstrap .btn üzerine tema varyantları
   ========================================================================== */
.btn{
  --bs-btn-padding-x:1.375rem;
  --bs-btn-padding-y:.75rem;
  --bs-btn-font-size:.9375rem;
  --bs-btn-font-weight:600;
  --bs-btn-border-radius:var(--r-md);
  letter-spacing:-.01em;
  transition:transform .2s var(--ease), background-color .2s var(--ease),
             box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn-sm{ --bs-btn-padding-x:.875rem; --bs-btn-padding-y:.375rem; --bs-btn-font-size:.8125rem; --bs-btn-border-radius:var(--r-sm) }
.btn-lg{ --bs-btn-padding-x:1.75rem; --bs-btn-padding-y:.9375rem; --bs-btn-font-size:1.0625rem }

.btn-gold{
  --bs-btn-bg:var(--gold); --bs-btn-border-color:var(--gold); --bs-btn-color:var(--ink);
  --bs-btn-hover-bg:var(--gold-400); --bs-btn-hover-border-color:var(--gold-400); --bs-btn-hover-color:var(--ink);
  --bs-btn-active-bg:var(--gold); --bs-btn-active-border-color:var(--gold); --bs-btn-active-color:var(--ink);
  --bs-btn-disabled-bg:var(--gold-300); --bs-btn-disabled-border-color:var(--gold-300); --bs-btn-disabled-color:var(--ink);
  box-shadow:var(--sh-sm);
}
.btn-gold:hover{ box-shadow:var(--sh-md) }

.btn-brand{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-color:var(--paper);
  --bs-btn-hover-bg:var(--brand-600); --bs-btn-hover-border-color:var(--brand-600); --bs-btn-hover-color:var(--paper);
  --bs-btn-active-bg:var(--brand-800); --bs-btn-active-border-color:var(--brand-800); --bs-btn-active-color:var(--paper);
}
.btn-dark-ink{
  --bs-btn-bg:var(--ink); --bs-btn-border-color:var(--ink); --bs-btn-color:var(--paper);
  --bs-btn-hover-bg:var(--ink-2); --bs-btn-hover-border-color:var(--ink-2); --bs-btn-hover-color:var(--paper);
  --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink); --bs-btn-active-color:var(--paper);
}
.btn-line{
  --bs-btn-bg:var(--paper); --bs-btn-border-color:var(--line-soft); --bs-btn-color:var(--ink);
  --bs-btn-hover-bg:var(--paper); --bs-btn-hover-border-color:var(--ink); --bs-btn-hover-color:var(--ink);
  --bs-btn-active-bg:var(--paper-alt); --bs-btn-active-border-color:var(--ink); --bs-btn-active-color:var(--ink);
}
.btn-line:hover{ box-shadow:var(--sh-sm) }
.btn-ghost{
  --bs-btn-bg:transparent; --bs-btn-border-color:rgba(251,250,245,.35); --bs-btn-color:var(--paper);
  --bs-btn-hover-bg:rgba(251,250,245,.08); --bs-btn-hover-border-color:var(--paper); --bs-btn-hover-color:var(--paper);
  --bs-btn-active-bg:rgba(251,250,245,.14); --bs-btn-active-border-color:var(--paper); --bs-btn-active-color:var(--paper);
}
.btn-wa{
  --bs-btn-bg:var(--wa); --bs-btn-border-color:var(--wa); --bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--ok); --bs-btn-hover-border-color:var(--ok); --bs-btn-hover-color:#fff;
}
/* Sağa kayan ok motifi */
.mk-arrow{ display:inline-block; transition:transform .2s var(--ease) }
.btn:hover .mk-arrow,
a:hover > .mk-arrow,
.mk-card:hover .mk-arrow{ transform:translateX(4px) }

/* ==========================================================================
   05. ROZET & ETİKET
   ========================================================================== */
.mk-badge{
  display:inline-flex; align-items:center; gap:6px; width:max-content;
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.4;
}
.mk-badge-gold{ background:var(--gold); color:var(--ink) }
.mk-badge-dark{ background:var(--ink); color:var(--paper) }
.mk-badge-green{ background:var(--ok); color:#fff }
.mk-badge-soft{ background:var(--gold-100); color:var(--gold-ink) }
.mk-badge-line{ background:var(--paper); color:var(--muted); border:1px solid var(--line-soft) }
.mk-badge-info{ background:var(--info-soft); color:var(--info) }
.mk-badge-danger{ background:var(--danger-soft); color:var(--danger) }
.mk-badge-ok{ background:var(--ok-soft); color:var(--ok) }
.mk-badge-danger{ background:var(--danger); color:#fff }

.mk-pill{ border:1px solid var(--line-soft); border-radius:var(--r-pill); padding:5px 12px; background:var(--paper); font-size:12px; color:var(--muted); display:inline-block }

/* ==========================================================================
   06. ÜST BAR / HEADER / KATEGORİ NAV
   ========================================================================== */
.mk-topbar{ background:var(--ink); color:var(--ink-on-dark); font-size:13px }
.mk-topbar .mk-topbar-in{ display:flex; align-items:center; gap:20px; min-height:44px; flex-wrap:wrap }
.mk-topbar a{ color:var(--ink-on-dark); opacity:.85; transition:opacity .15s var(--ease) }
.mk-topbar a:hover{ opacity:1 }
.mk-topbar .mk-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--gold); color:var(--ink);
  padding:2px 8px; border-radius:var(--r-xs); font-size:11px; font-weight:700;
}
.mk-topbar .mk-cta{ background:var(--gold); color:var(--ink); padding:4px 12px; border-radius:var(--r-md); font-weight:600; font-size:12px; opacity:1 }

.mk-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(251,250,245,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.mk-header-in{ display:flex; align-items:center; gap:24px; min-height:76px }
.mk-logo{ display:inline-flex; align-items:center; flex:none }
.mk-logo img{ height:32px; width:auto; display:block }

.mk-search{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:10px 18px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mk-search:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft) }
.mk-search input{ flex:1; border:0; background:none; outline:none; font:inherit; font-size:15px; color:var(--ink); min-width:0 }
.mk-search input::placeholder{ color:var(--muted-2) }
.mk-kbd{ font-size:11px; color:var(--muted); border:1px solid var(--line-soft); border-radius:var(--r-xs); padding:2px 6px; background:var(--paper) }

.mk-iconbtn{
  display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--paper-alt); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease); position:relative;
}
.mk-iconbtn:hover{ border-color:var(--line-soft); background:var(--paper-deep); color:var(--ink) }
.mk-iconbtn small{ display:block; font-size:11px; color:var(--muted); line-height:1.2 }
.mk-iconbtn strong{ display:block; font-size:13px; font-weight:600; line-height:1.2 }
.mk-iconbtn .mk-dot{
  position:absolute; top:2px; right:4px; min-width:18px; height:18px; padding:0 5px;
  background:var(--gold); color:var(--ink); border-radius:var(--r-pill);
  font-size:10px; font-weight:700; display:grid; place-items:center;
}

.mk-catnav{ border-bottom:1px solid var(--line); background:var(--paper); position:relative; z-index:1025 }
.mk-catnav-in{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0 }
.mk-catnav-in > li{ position:static }
.mk-catnav-in > li > a{
  display:inline-flex; align-items:center; gap:6px; padding:14px; font-size:14px; font-weight:500; white-space:nowrap; color:var(--ink-2);
  border-bottom:2px solid transparent; transition:color .15s var(--ease), border-color .15s var(--ease);
}
.mk-catnav-in > li > a:hover,
.mk-catnav-in > li > a.active,
.mk-catnav-in > li.open > a,
.mk-mega:hover > a,
.mk-mega:focus-within > a{ color:var(--brand); border-color:var(--gold) }
.mk-catnav-in > li:last-child{ margin-left:auto }
.mk-catnav-in{ align-items:stretch }
.mk-catnav-in > li{ display:flex; align-items:center }
.mk-catnav a.mk-all{ color:var(--gold-ink); font-weight:600 }
.mk-chev{ width:.8em; height:.8em; opacity:.6; transition:transform .2s var(--ease) }
.mk-mega:hover .mk-chev, .mk-mega:focus-within .mk-chev, .mk-mega.open .mk-chev{ transform:rotate(180deg) }

/* "Tüm Kategoriler" dikey mega menü */
.mk-allcats{ position:static; margin-right:8px }
.mk-allcats > button{
  display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 18px; border:0; border-radius:var(--r-md) var(--r-md) 0 0;
  background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; letter-spacing:-.01em;
}
.mk-allcats > button .mk-chev{ opacity:.8 }
.mk-allcats:hover > button .mk-chev, .mk-allcats.open > button .mk-chev, .mk-allcats:focus-within > button .mk-chev{ transform:rotate(180deg) }
.mk-allcats-panel{
  position:absolute; left:0; right:0; top:100%; z-index:1027; display:none;
  background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--sh-lg);
}
.mk-allcats:hover .mk-allcats-panel, .mk-allcats:focus-within .mk-allcats-panel, .mk-allcats.open .mk-allcats-panel{ display:block }
.mk-allcats-in{ position:relative; padding:0 }
.mk-allcats-list{
  list-style:none; margin:0; padding:0; position:static; min-height:560px;
  display:flex; flex-direction:column; width:260px;
  background:var(--paper-alt); border-right:1px solid var(--line);
}
.mk-allcats-list > li{ position:static }
.mk-allcats-list > li > a{
  display:flex; align-items:center; gap:12px; padding:13px 16px; font-size:14px; font-weight:600; color:var(--ink);
  border-left:3px solid transparent; transition:background .15s var(--ease), border-color .15s var(--ease);
}
.mk-allcats-list > li > a > .bi:first-child{ width:34px; height:34px; padding:8px; border-radius:var(--r-sm); background:var(--paper); border:1px solid var(--line); color:var(--ink-2) }
.mk-allcats-list > li > a .mk-chev{ margin-left:auto; width:.75em; height:.75em; color:var(--muted-2); transform:none!important }
.mk-allcats-list > li:hover > a, .mk-allcats-list > li.is-active > a{ background:var(--paper); border-left-color:var(--brand); color:var(--brand) }
.mk-allcats-list > li:hover > a > .bi:first-child, .mk-allcats-list > li.is-active > a > .bi:first-child{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.mk-allcats-sub{
  display:none; position:absolute; top:0; bottom:0; left:260px; right:0; padding:28px 32px;
  grid-template-columns:1fr 280px; gap:32px; background:var(--paper);
}
.mk-allcats-list > li:hover .mk-allcats-sub, .mk-allcats-list > li.is-active .mk-allcats-sub, .mk-allcats-list > li:focus-within .mk-allcats-sub{ display:grid }
.mk-allcats-list > li:hover ~ li.is-active .mk-allcats-sub, .mk-allcats-list:has(> li:hover) > li.is-active:not(:hover) .mk-allcats-sub{ display:none }
.mk-allcats-list:has(> li:hover) > li.is-active:not(:hover) > a{ background:transparent; border-left-color:transparent; color:var(--ink) }
.mk-allcats-list:has(> li:hover) > li.is-active:not(:hover) > a > .bi:first-child{ background:var(--paper); color:var(--ink-2); border-color:var(--line) }
.mk-allcats-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:28px; align-content:start }
.mk-allcats-cols h3{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px }
.mk-allcats-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.mk-allcats-cols ul a{ font-size:14px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px }
.mk-allcats-cols ul a:hover{ color:var(--brand) }
.mk-allcats-cols .mk-badge{ padding:2px 7px; font-size:10px }
.mk-allcats-side{ display:flex; flex-direction:column; gap:12px }
.mk-allcats-feat{ position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-deep); aspect-ratio:4/5; color:#fff }
.mk-allcats-feat img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease) }
.mk-allcats-feat:hover img{ transform:scale(1.04) }
.mk-allcats-feat span{ position:absolute; left:0; right:0; bottom:0; padding:36px 16px 14px; background:linear-gradient(180deg,transparent,rgba(26,20,16,.75)) }
.mk-allcats-feat b{ display:block; font-size:16px; letter-spacing:-.015em }
.mk-allcats-feat small{ font-size:12px; opacity:.85 }
.mk-allcats-tip{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:var(--r-md); background:var(--ok-soft); border:1px solid rgba(31,179,88,.2); color:var(--ink-2); font-size:13px }
.mk-allcats-tip > .bi{ width:22px; height:22px; color:var(--brand); flex:none }
.mk-allcats-tip b{ display:block; color:var(--ink) }
.mk-allcats-tip u{ color:var(--brand); font-weight:600; text-decoration:none }

/* Mega panel: tam genişlik, nav altına açılır */
.mk-mega-panel{
  position:absolute; left:0; right:0; top:100%; z-index:1026; display:none;
  background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--sh-lg);
}
.mk-mega:hover .mk-mega-panel,
.mk-mega:focus-within .mk-mega-panel,
.mk-mega.open .mk-mega-panel{ display:block }
.mk-mega-grid{ display:grid; grid-template-columns:repeat(3,1fr) 220px; gap:32px; padding:28px 0 32px }
.mk-mega-grid h3{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px }
.mk-mega-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.mk-mega-grid ul a{ font-size:14px; color:var(--ink-2) }
.mk-mega-grid ul a:hover{ color:var(--brand) }
.mk-mega-feat a{ display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-alt); color:var(--ink) }
.mk-mega-feat img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block }
.mk-mega-feat b{ display:block; padding:12px 14px 0; font-size:14px }
.mk-mega-feat span{ display:block; padding:2px 14px 14px; font-size:12px; color:var(--brand); font-weight:600 }
@media (max-width:1199.98px){ .mk-mega-grid{ grid-template-columns:repeat(3,1fr); } .mk-mega-feat{ display:none } }

/* Mobil offcanvas menü */
.offcanvas{ --bs-offcanvas-bg:var(--paper); --bs-offcanvas-border-color:var(--line) }
.mk-mobnav a{ display:flex; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; font-weight:500; color:var(--ink) }
.mk-mobnav > a:last-child{ border-bottom:0 }
.mk-mobnav a .bi{ margin-left:auto; color:var(--muted-2) }
.mk-mobgrp{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line) }
.mk-mobgrp > a{ flex:1; border-bottom:0 }
.mk-mobgrp > button{ width:48px; border:0; background:none; color:var(--muted-2); display:grid; place-items:center }
.mk-mobgrp > button[aria-expanded="true"] .bi{ transform:rotate(180deg) }
.mk-mobgrp > .collapse, .mk-mobgrp > .collapsing{ flex-basis:100% }
.mk-mobsub{ padding:4px 0 14px 14px; display:flex; flex-direction:column }
.mk-mobsub b{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:10px 0 4px }
.mk-mobsub a{ padding:7px 0; border:0; font-size:14px; font-weight:400; color:var(--ink-2) }
.mk-burger{ display:none; width:44px; height:44px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--paper-alt); color:var(--ink); font-size:20px; align-items:center; justify-content:center }

/* ==========================================================================
   07. HERO & ŞERİT
   ========================================================================== */
.mk-hero{
  position:relative; overflow:hidden; color:var(--paper);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-600) 45%,var(--brand-900) 100%);
}
.mk-hero::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:420px; height:300px; pointer-events:none;
  background-image:radial-gradient(rgba(251,250,245,.16) 1.5px, transparent 1.5px); background-size:24px 24px;
}
.mk-hero-in{ padding:72px 0; position:relative; z-index:1 }
.mk-hero h1{ color:var(--paper); font-size:clamp(32px,4.2vw,56px); line-height:1.08; margin-top:22px }
.mk-hero h1 em{ font-style:normal; color:var(--gold-300) }
.mk-hero .mk-sub{ margin-top:20px; font-size:17px; color:rgba(251,250,245,.78); max-width:44ch }
.mk-hero-proof{ list-style:none; margin:26px 0 0; padding:0; display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:rgba(251,250,245,.85) }
.mk-hero-proof li{ display:flex; align-items:center; gap:7px }
.mk-hero-proof .bi{ color:var(--gold-300) }
.mk-hero-badge{ background:transparent; border:1px solid rgba(252,211,77,.45); color:var(--gold-300); letter-spacing:.16em; padding:8px 16px }

.mk-pricestrip{ background:var(--ink); color:var(--ink-on-dark) }
.mk-pricestrip-in{ display:flex; align-items:center; gap:24px; padding:18px 0; flex-wrap:wrap }
.mk-pricestrip b{ color:var(--gold-300); font-weight:700 }

/* ==========================================================================
   08. BÖLÜM YAPISI — zemin tonuyla ayrım (çizgi değil)
   ========================================================================== */
.mk-sec{ padding:64px 0 }
.mk-sec-sm{ padding:44px 0 }
.mk-band{ background:var(--paper-alt); padding:96px 0 }
.mk-band-sm{ background:var(--paper-alt); padding:64px 0 }
.mk-sechead{ display:flex; align-items:flex-end; gap:24px; margin-bottom:36px; flex-wrap:wrap }
.mk-sechead .mk-link{ margin-left:auto; font-size:14px; font-weight:600; color:var(--ink-2); display:inline-flex; gap:6px; align-items:center }
.mk-sechead .mk-link:hover{ color:var(--brand) }

.mk-crumbs{ list-style:none; margin:0; font-size:13px; color:var(--muted); padding:18px 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.mk-crumbs li{ display:flex; gap:8px; align-items:center }
.mk-crumbs li + li::before{ content:"/"; color:var(--line-soft) }
.mk-crumbs a{ color:var(--muted) }
.mk-crumbs a:hover{ color:var(--brand) }
.mk-crumbs [aria-current]{ color:var(--ink); font-weight:600 }

.mk-pagehead{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0 44px }
.mk-stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 18px; min-width:120px }
.mk-stat b{ display:block; font-size:20px; font-weight:700; letter-spacing:-.02em }
.mk-stat span{ font-size:12px; color:var(--muted) }

/* Güven kutuları */
.mk-trust{ padding:24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); height:100%; transition:box-shadow .2s var(--ease), transform .2s var(--ease) }
.mk-trust:hover{ box-shadow:var(--sh-md); transform:translateY(-2px) }
.mk-trust .mk-ico{ width:40px; height:40px; border-radius:var(--r-md); background:var(--gold-100); color:var(--gold-ink); display:grid; place-items:center; margin-bottom:14px; font-size:19px }
.mk-trust h3{ font-size:16px }
.mk-trust p{ color:var(--muted); font-size:14px; margin:6px 0 0 }

/* ==========================================================================
   09. ÜRÜN KARTI & YATAY RAY
   ========================================================================== */
.mk-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; height:100%; color:var(--ink);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.mk-card:hover{ box-shadow:var(--sh-md); transform:translateY(-3px); border-color:var(--line-soft); color:var(--ink) }
.mk-card{ position:relative }
.mk-card h3 a{ color:inherit }
.mk-card h3 a:hover{ color:var(--brand) }
/* Tüm kart tıklanabilir: "Yapılandır" bağlantısı kartı kaplar, favori butonu üstte kalır */
.mk-card .mk-cfg::after{ content:""; position:absolute; inset:0; z-index:1 }
.mk-card .mk-fav, .mk-card h3 a{ position:relative; z-index:2 }
.mk-card .mk-thumb{ position:relative; aspect-ratio:4/5; background:var(--paper-deep); overflow:hidden; margin:0 }
.mk-card .mk-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease) }
.mk-card:hover .mk-thumb img{ transform:scale(1.04) }
.mk-card .mk-badges{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; z-index:2 }
.mk-card .mk-body{ padding:18px; display:flex; flex-direction:column; flex:1 }
.mk-card h3{ font-size:16px }
.mk-card .mk-spec{ font-size:13px; color:var(--muted); padding-top:12px; margin-top:12px; border-top:1px solid var(--line) }
.mk-card .mk-price{ margin-top:auto; padding-top:14px }
.mk-card .mk-price .v{ font-size:20px; font-weight:700; letter-spacing:-.02em }
.mk-card .mk-price .k{ font-size:12px; color:var(--muted-2); margin-top:2px }
.mk-card .mk-cfg{ margin-top:14px; font-size:13px; font-weight:600; color:var(--brand); display:inline-flex; gap:6px; align-items:center }
.mk-card .mk-fav{
  position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(251,250,245,.92); border:1px solid var(--line); color:var(--muted);
  display:grid; place-items:center; transition:color .18s var(--ease), border-color .18s var(--ease);
}
.mk-card .mk-fav:hover, .mk-card .mk-fav.is-on{ color:var(--danger); border-color:var(--danger) }
.list-unstyled{ list-style:none; padding-left:0 }

.mk-rail{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
.mk-rail::-webkit-scrollbar{ display:none }
.mk-rail > *{ flex:0 0 300px; scroll-snap-align:start }

/* Liste görünümü */
.mk-list-view .mk-card{ flex-direction:row }
.mk-list-view .mk-thumb{ width:280px; flex:none; aspect-ratio:auto }
.mk-list-view .mk-body{ padding:24px }

/* ==========================================================================
   10. FİLTRE PANELİ & LİSTE ARAÇLARI
   ========================================================================== */
.mk-filters{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:sticky; top:96px }
.mk-filters .mk-fhead{ display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--paper-alt) }
.mk-filters .mk-fhead b{ font-size:14px; font-weight:700; letter-spacing:-.01em }
.mk-filters .mk-fhead a{ margin-left:auto; font-size:12px; color:var(--muted) }
.mk-fgroup{ border-bottom:1px solid var(--line); padding:16px 18px }
.mk-fgroup:last-child{ border-bottom:0 }
.mk-fgroup > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);
}
.mk-fgroup > summary::-webkit-details-marker{ display:none }
.mk-fgroup > summary::after{ content:"\002B"; margin-left:auto; color:var(--muted); font-weight:400; font-size:16px }
.mk-fgroup[open] > summary::after{ content:"\2013" }
.mk-flist{ display:flex; flex-direction:column; gap:10px; margin-top:14px }
.mk-flist label{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer; margin:0 }
.mk-flist input[type=checkbox], .mk-flist input[type=radio]{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; margin:0; flex:none;
  border:1.5px solid var(--line-soft); border-radius:5px; background:var(--paper);
  transition:all .15s var(--ease);
}
.mk-flist input[type=radio]{ border-radius:50% }
.mk-flist input:checked{ background:var(--brand); border-color:var(--brand); box-shadow:inset 0 0 0 3px var(--paper) }
.mk-flist .n{ margin-left:auto; font-size:12px; color:var(--muted-2) }

/* Alt kategori görsel kutucukları (kategori/mağaza üstü) */
.mk-subcats{ display:flex; gap:12px; overflow-x:auto; padding:24px 0 4px; scrollbar-width:none }
.mk-subcats::-webkit-scrollbar{ display:none }
.mk-subcats a{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); transition:border-color .18s var(--ease), box-shadow .18s var(--ease) }
.mk-subcats a:hover, .mk-subcats a.active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.mk-subcats img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none }
.mk-subcats b{ display:block; font-size:14px; font-weight:600; white-space:nowrap }
.mk-subcats span{ display:block; font-size:12px; color:var(--muted) }
.mk-chips{ display:flex; gap:8px; overflow-x:auto; padding:20px 0 4px; scrollbar-width:none }
.mk-chips::-webkit-scrollbar{ display:none }
.mk-chip{
  white-space:nowrap; border:1px solid var(--line-soft); background:var(--paper); color:var(--ink);
  border-radius:var(--r-pill); padding:8px 16px; font-size:13px; font-weight:500; transition:all .18s var(--ease);
}
.mk-chip:hover{ border-color:var(--brand); color:var(--brand) }
.mk-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--paper) }

.mk-sortbar{ display:flex; align-items:center; gap:14px; padding-bottom:20px; flex-wrap:wrap }
.mk-view{ display:flex; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden }
.mk-view button{ padding:9px 11px; color:var(--muted); background:none; border:0; display:grid; place-items:center }
.mk-view button.active{ background:var(--ink); color:var(--paper) }

.mk-tagf{ display:inline-flex; align-items:center; gap:8px; background:var(--gold-100); color:var(--gold-ink); border-radius:var(--r-pill); padding:6px 8px 6px 14px; font-size:12px; font-weight:600 }
.mk-tagf button{ width:18px; height:18px; border:0; border-radius:50%; background:rgba(143,99,0,.15); color:var(--gold-ink); display:grid; place-items:center; font-size:11px; line-height:1 }

.pagination{ --bs-pagination-color:var(--ink); --bs-pagination-bg:var(--paper); --bs-pagination-border-color:var(--line);
  --bs-pagination-hover-color:var(--brand); --bs-pagination-hover-bg:var(--paper); --bs-pagination-hover-border-color:var(--brand);
  --bs-pagination-active-bg:var(--ink); --bs-pagination-active-border-color:var(--ink); --bs-pagination-active-color:var(--paper);
  --bs-pagination-focus-box-shadow:0 0 0 3px var(--brand-soft); --bs-pagination-border-radius:var(--r-sm); gap:6px }
.page-link{ min-width:40px; text-align:center; font-weight:500 }

/* ==========================================================================
   11. ÜRÜN DETAY
   ========================================================================== */
.mk-gal{ position:sticky; top:96px }
.mk-gal .mk-main{ position:relative; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--paper-deep); aspect-ratio:4/3; display:grid; place-items:center }
.mk-gal .mk-zoom{ position:absolute; right:16px; top:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 12px; font-size:12px; font-weight:600; color:var(--muted) }
.mk-gal .mk-badges{ position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; z-index:2 }
.mk-thumbs button{ width:100%; aspect-ratio:4/5; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-deep); display:grid; place-items:center; overflow:hidden; transition:border-color .18s var(--ease), box-shadow .18s var(--ease) }
.mk-thumbs button.active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.mk-opt{ margin-top:26px; border:0; padding:0; min-width:0 }
.mk-opt > .mk-optlbl{ float:none; width:100%; padding:0; }
.mk-opt > .mk-optlbl{ display:flex; align-items:center; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:12px }
.mk-opt > .mk-optlbl .hint{ margin-left:auto; font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted-2) }
.mk-opts{ display:flex; gap:10px; flex-wrap:wrap }
.mk-opts label{ cursor:pointer; margin:0 }
.mk-opts input{ position:absolute; opacity:0; width:0; height:0 }
.mk-opts .mk-box{
  display:flex; flex-direction:column; gap:2px; border:1.5px solid var(--line); background:var(--paper);
  border-radius:var(--r-md); padding:12px 18px; min-width:104px; height:100%; transition:all .18s var(--ease);
}
.mk-opts .mk-box b{ font-size:14px; font-weight:600; letter-spacing:-.01em }
.mk-opts .mk-box span{ font-size:12px; color:var(--muted) }
.mk-opts .mk-box .up{ font-size:11px; color:var(--gold-ink); font-weight:700 }
.mk-opts label:hover .mk-box{ border-color:var(--line-soft) }
.mk-opts input:checked + .mk-box{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft) }
.mk-opts input:focus-visible + .mk-box{ outline:2px solid var(--gold); outline-offset:2px }
.mk-qty .mk-box{ position:relative; min-width:0 }
.mk-qty .mk-save{ position:absolute; top:-9px; right:8px; background:var(--gold); color:var(--ink); font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill) }

.mk-upload{ display:block; cursor:pointer; margin-top:14px; border:1.5px dashed var(--line-soft); border-radius:var(--r-md); padding:20px; text-align:center; background:var(--paper-alt); transition:border-color .2s var(--ease) }
.mk-upload:hover{ border-color:var(--brand) }
.mk-upload b{ font-size:14px; display:block }
.mk-upload span{ font-size:12px; color:var(--muted); display:block; margin-top:4px }

.mk-buybox{ margin-top:28px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper-alt); padding:22px }
.mk-buybox .mk-tot{ font-size:36px; font-weight:700; letter-spacing:-.035em; line-height:1 }
.mk-buybox .mk-old{ font-size:15px; color:var(--muted-2); text-decoration:line-through }
.mk-buybox .mk-kdv{ font-size:12px; color:var(--muted); margin-top:6px }
.mk-buybox .mk-eta{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted) }
.mk-buybox .mk-eta b{ color:var(--ink) }

.mk-usp{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--paper); height:100% }
.mk-usp b{ color:var(--ink); font-weight:600; display:block; font-size:13px }
.mk-usp .t{ color:var(--brand); flex:none }

/* Sekmeler */
.mk-tabs .nav-tabs{ border-bottom:1px solid var(--line); gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
.mk-tabs .nav-tabs::-webkit-scrollbar{ display:none }
.mk-tabs .nav-link{
  border:0; border-bottom:2px solid transparent; border-radius:0; padding:18px;
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--muted); white-space:nowrap;
}
.mk-tabs .nav-link:hover{ color:var(--ink-2); border-color:var(--line-soft) }
.mk-tabs .nav-link.active{ color:var(--ink); background:none; border-color:var(--gold) }
.mk-tabs .tab-pane{ padding:36px 0 }

.mk-spectable{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.mk-spectable td{ padding:13px 16px; font-size:14px; border-bottom:1px solid var(--line) }
.mk-spectable tr:last-child td{ border-bottom:0 }
.mk-spectable tr:nth-child(odd){ background:var(--paper-alt) }
.mk-spectable td:first-child{ color:var(--muted); width:46% }
.mk-spectable td:last-child{ font-weight:600 }

/* Yorumlar */
.mk-stars{ color:var(--gold); letter-spacing:2px }
.mk-revsum{ background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px }
.mk-revsum .big{ font-size:44px; font-weight:700; letter-spacing:-.04em; line-height:1 }
.mk-bar{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted) }
.mk-bar .track{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--paper-deep); overflow:hidden }
.mk-bar .fill{ display:block; height:100%; background:var(--gold) }
.mk-rev{ border-bottom:1px solid var(--line); padding:22px 0 }
.mk-rev:last-child{ border-bottom:0 }
.mk-rev .who{ display:flex; gap:10px; align-items:center; font-size:14px; font-weight:600; flex-wrap:wrap }
.mk-rev blockquote{ margin:0 }
.mk-rev .who .d{ margin-left:auto; font-size:12px; color:var(--muted-2); font-weight:400 }
.mk-rev p{ margin:8px 0 0; font-size:14px; color:var(--muted) }

/* --------------------------------------------------------------------------
   11b. BASİT ÜRÜN (stok kalemi — varyasyonsuz)
   -------------------------------------------------------------------------- */

/* Kısa açıklama listesi */
.mk-shortdesc{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:9px }
.mk-shortdesc li{ position:relative; padding-left:26px; font-size:14px; color:var(--muted) }
.mk-shortdesc li b{ color:var(--ink); font-weight:600 }
.mk-shortdesc li::before{
  content:""; position:absolute; left:0; top:3px; width:14px; height:14px; background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Adet kademesi seçici */
.mk-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.mk-tier{
  position:relative; display:flex; flex-direction:column; gap:2px; text-align:left;
  border:1.5px solid var(--line); background:var(--paper); border-radius:var(--r-md);
  padding:12px 14px; color:var(--ink); transition:all .18s var(--ease);
}
.mk-tier:hover{ border-color:var(--line-soft) }
.mk-tier b{ font-size:14px; font-weight:600; letter-spacing:-.01em }
.mk-tier span{ font-size:12px; color:var(--muted) }
.mk-tier.active{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft) }
.mk-tier-save{
  position:absolute!important; top:-9px; right:8px; background:var(--gold); color:var(--ink)!important;
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill);
}

@media (max-width:575.98px){
  .mk-tiers{ grid-template-columns:repeat(2,1fr) }
}

/* --------------------------------------------------------------------------
   11c. GRUPLANDIRILMIŞ ÜRÜN (set — alt ürünler ayrı ayrı seçilir)
   -------------------------------------------------------------------------- */
.mk-grow{
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  border-bottom:1px solid var(--line); transition:background .18s var(--ease), opacity .18s var(--ease);
}
.mk-grow:last-child{ border-bottom:0 }
.mk-grow:hover{ background:var(--paper-alt) }
.mk-grow.off{ opacity:.45 }
.mk-grow.off .mk-grow-qty,
.mk-grow.off .mk-grow-price{ pointer-events:none }

.mk-grow-check{ margin:0; flex:none; display:grid; place-items:center }
.mk-grow-check .form-check-input{ margin:0; width:1.2em; height:1.2em }

.mk-grow-thumb{ width:56px; height:56px; flex:none; border-radius:var(--r-sm); overflow:hidden; background:var(--paper-deep); border:1px solid var(--line) }
.mk-grow-thumb img{ width:100%; height:100%; object-fit:cover }

.mk-grow-main{ flex:1; min-width:0 }
.mk-grow-main h3{ font-size:15px; margin:0 }
.mk-grow-main h3 a{ color:var(--ink) }
.mk-grow-main h3 a:hover{ color:var(--brand) }
.mk-grow-meta{ font-size:12px; color:var(--muted); margin-top:5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }

.mk-grow-qty{ flex:none }
.mk-grow-qty button{ width:32px; height:34px }
.mk-grow-qty input{ width:52px; height:34px; font-size:14px }

.mk-grow-price{ flex:none; text-align:right; min-width:104px }
.mk-grow-price .v{ font-size:16px; font-weight:700; letter-spacing:-.02em }
.mk-grow-price .k{ font-size:11px; color:var(--muted-2); margin-top:2px }

/* --------------------------------------------------------------------------
   11d. HARİCİ / BAĞLI ÜRÜN (iş ortağı sitesinde satılır)
   -------------------------------------------------------------------------- */
.mk-external{ border-color:var(--line-soft); background:var(--paper-alt); position:relative }
.mk-orderbox.mk-external .mk-tot{ font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1 }
.mk-orderbox.mk-external .mk-kdv{ font-size:12px; color:var(--muted); margin-top:6px }
.mk-external::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--brand) 100%);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.mk-external .mk-from{ font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:4px }

.mk-external-note{
  display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding-top:16px;
  border-top:1px dashed var(--line-soft); font-size:13px; color:var(--muted);
}
.mk-external-note .bi{ font-size:17px; color:var(--warn); flex:none; line-height:1.4 }
.mk-external-note b{ display:block; color:var(--ink); font-size:13px; margin-bottom:3px }

/* İş ortağı kartı */
.mk-partner{
  display:flex; align-items:center; gap:16px; margin-top:20px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); flex-wrap:wrap;
}
.mk-partner-logo{ width:52px; height:52px; flex:none; border-radius:var(--r-md); overflow:hidden; background:var(--paper-deep); border:1px solid var(--line) }
.mk-partner-logo img{ width:100%; height:100%; object-fit:cover }
.mk-partner-main{ min-width:0 }
.mk-partner-main b{ display:block; font-size:16px; letter-spacing:-.015em }
.mk-partner-main > span{ display:block; font-size:13px; color:var(--muted); margin-top:2px }
.mk-partner-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--muted-2) }

@media (max-width:767.98px){
  .mk-grow{ flex-wrap:wrap; padding:14px 16px; row-gap:12px }
  .mk-grow-main{ flex:1 1 55% }
  .mk-grow-qty{ order:3 }
  .mk-grow-price{ order:4; margin-left:auto }
  .mk-partner{ gap:12px }
  .mk-partner .btn{ width:100%; justify-content:center; margin-left:0!important }
}

/* Mobil sabit satın alma çubuğu */
.mk-stickybuy{
  position:fixed; left:0; right:0; bottom:0; z-index:1040; display:none;
  background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(26,20,16,.08);
  padding:12px 18px; align-items:center; gap:14px;
}
.mk-stickybuy .t{ font-size:20px; font-weight:700; letter-spacing:-.02em }
.mk-stickybuy .k{ font-size:11px; color:var(--muted) }

/* ==========================================================================
   12. SEPET / ÖDEME / FORM
   ========================================================================== */
.mk-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.mk-panel-head{ padding:18px 22px; border-bottom:1px solid var(--line); background:var(--paper-alt); display:flex; align-items:center; gap:12px }
.mk-panel-head h2, .mk-panel-head h3{ font-size:17px; margin:0 }
.mk-panel-body{ padding:22px }
.mk-panel-body.p0{ padding:0 }

.mk-cartrow{ display:flex; gap:18px; padding:20px 22px; border-bottom:1px solid var(--line); align-items:flex-start }
.mk-cartrow:last-child{ border-bottom:0 }
.mk-cartrow .mk-cthumb{ width:88px; flex:none; aspect-ratio:4/5; border-radius:var(--r-md); background:var(--paper-deep); display:grid; place-items:center; overflow:hidden }
.mk-cartrow .mk-cthumb img{ width:100%; height:100%; object-fit:cover }
.mk-cartrow h3{ font-size:16px }
.mk-cartrow .mk-attrs{ font-size:13px; color:var(--muted); margin-top:6px; display:flex; flex-wrap:wrap; gap:6px 14px }
.mk-cartrow .mk-attrs span b{ color:var(--ink-2); font-weight:600 }
.mk-cartrow .mk-cprice{ margin-left:auto; text-align:right; flex:none }
.mk-cartrow .mk-cprice .v{ font-size:19px; font-weight:700; letter-spacing:-.02em }
.mk-cartrow .mk-cprice .k{ font-size:12px; color:var(--muted-2) }
.mk-remove{ background:none; border:0; color:var(--muted-2); font-size:13px; padding:0; display:inline-flex; align-items:center; gap:5px }
.mk-remove:hover{ color:var(--danger) }

.mk-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; background:var(--paper) }
.mk-stepper button{ width:36px; height:38px; border:0; background:var(--paper-alt); color:var(--ink); font-size:16px; line-height:1 }
.mk-stepper button:hover{ background:var(--paper-deep) }
.mk-stepper input{ width:64px; height:38px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font:inherit; font-weight:600; font-variant-numeric:tabular-nums; outline:none; background:var(--paper) }

.mk-sum{ display:flex; justify-content:space-between; gap:16px; font-size:14px; padding:9px 0 }
.mk-sum + .mk-sum{ border-top:1px dashed var(--line) }
.mk-sum .lbl{ color:var(--muted) }
.mk-sum.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:15px }
.mk-sum.total .val{ font-size:26px; font-weight:700; letter-spacing:-.03em }

/* Form elemanları */
.form-label{ font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px }
.form-label .req{ color:var(--danger) }
.form-control, .form-select{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:11px 14px; font-size:15px; color:var(--ink); transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:focus, .form-select:focus{ background:var(--paper); border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); color:var(--ink) }
.form-control::placeholder{ color:var(--muted-2) }
.form-text{ font-size:12px; color:var(--muted) }
.form-check-input{ border-color:var(--line-soft); width:1.15em; height:1.15em; margin-top:.15em }
.form-check-input:checked{ background-color:var(--brand); border-color:var(--brand) }
.form-check-input:focus{ box-shadow:0 0 0 4px var(--brand-soft); border-color:var(--brand) }
.form-check-label{ font-size:14px; color:var(--ink-2) }
.input-group-text{ background:var(--paper-alt); border-color:var(--line-soft); color:var(--muted); font-size:14px }

/* Seçilebilir radyo kutusu (teslimat/ödeme yöntemi) */
.mk-choice{ display:block; cursor:pointer; margin:0 }
.mk-choice input{ position:absolute; opacity:0; width:0; height:0 }
.mk-choice .mk-cbox{
  display:flex; gap:14px; align-items:flex-start; border:1.5px solid var(--line); background:var(--paper);
  border-radius:var(--r-md); padding:16px 18px; transition:all .18s var(--ease); height:100%;
}
.mk-choice:hover .mk-cbox{ border-color:var(--line-soft) }
.mk-choice input:checked + .mk-cbox{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft) }
.mk-choice .mk-cbox .ic{ font-size:20px; color:var(--brand); flex:none; line-height:1.2 }
.mk-choice .mk-cbox b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em }
.mk-choice .mk-cbox span{ display:block; font-size:13px; color:var(--muted); margin-top:2px }
.mk-choice .mk-cbox .pr{ margin-left:auto; font-weight:700; font-size:14px; white-space:nowrap }

/* Ödeme adımları */
.mk-steps-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px }
.mk-steps-bar .s{ display:flex; align-items:center; gap:8px; color:var(--muted-2) }
.mk-steps-bar .s .n{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line-soft); display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--paper) }
.mk-steps-bar .s.done{ color:var(--brand) }
.mk-steps-bar .s.done .n{ background:var(--brand); border-color:var(--brand); color:#fff }
.mk-steps-bar .s.now{ color:var(--ink); font-weight:600 }
.mk-steps-bar .s.now .n{ background:var(--gold); border-color:var(--gold); color:var(--ink) }
.mk-steps-bar .arrowsep{ color:var(--line-soft) }

/* Bilgi kutuları */
.mk-note{ border-radius:var(--r-md); padding:14px 16px; font-size:14px; display:flex; gap:12px; align-items:flex-start; border:1px solid transparent }
.mk-note .bi{ font-size:17px; flex:none; line-height:1.35 }
.mk-note-info{ background:var(--info-soft); border-color:rgba(21,101,192,.18); color:#0F447F }
.mk-note-ok{ background:var(--ok-soft); border-color:rgba(31,179,88,.22); color:#106B34 }
.mk-note-warn{ background:var(--warn-soft); border-color:rgba(217,154,0,.25); color:var(--gold-ink) }
.mk-note-danger{ background:var(--danger-soft); border-color:rgba(198,40,40,.2); color:var(--danger) }

/* Boş durum */
.mk-empty{ text-align:center; padding:72px 24px }
.mk-empty .ic{ width:88px; height:88px; margin:0 auto 22px; border-radius:50%; background:var(--paper-alt); border:1px solid var(--line); display:grid; place-items:center; font-size:34px; color:var(--muted-2) }
.mk-empty h2{ font-size:24px }
.mk-empty p{ color:var(--muted); margin:10px auto 26px; max-width:46ch }

/* ==========================================================================
   13. HESABIM PANELİ
   ========================================================================== */
.mk-accnav{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:sticky; top:96px }
.mk-accnav .mk-acchead{ padding:20px; background:var(--paper-alt); border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:center }
.mk-accnav .mk-avatar{ width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px; flex:none }
.mk-accnav .mk-acchead b{ display:block; font-size:15px; letter-spacing:-.01em }
.mk-accnav .mk-acchead span{ font-size:12px; color:var(--muted) }
.mk-accnav a{
  display:flex; align-items:center; gap:12px; padding:13px 20px; font-size:14px; font-weight:500;
  color:var(--ink-2); border-bottom:1px solid var(--line); transition:background .15s var(--ease), color .15s var(--ease);
}
.mk-accnav a:last-child{ border-bottom:0 }
.mk-accnav a .bi{ font-size:16px; color:var(--muted); width:18px }
.mk-accnav a:hover{ background:var(--paper-alt); color:var(--brand) }
.mk-accnav a:hover .bi{ color:var(--brand) }
.mk-accnav a.active{ background:var(--brand-soft); color:var(--brand); font-weight:600; box-shadow:inset 3px 0 0 var(--gold) }
.mk-accnav a.active .bi{ color:var(--brand) }
.mk-accnav a .cnt{ margin-left:auto; font-size:11px; font-weight:700; background:var(--paper-deep); color:var(--muted); border-radius:var(--r-pill); padding:2px 8px }

.mk-tile{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:20px; height:100%; transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease) }
.mk-tile:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); border-color:var(--line-soft) }
.mk-tile .ic{ width:38px; height:38px; border-radius:var(--r-md); background:var(--gold-100); color:var(--gold-ink); display:grid; place-items:center; font-size:18px; margin-bottom:14px }
.mk-tile b{ display:block; font-size:24px; font-weight:700; letter-spacing:-.03em }
.mk-tile span{ font-size:13px; color:var(--muted) }

/* Tablolar */
.mk-table{ width:100%; border-collapse:separate; border-spacing:0 }
.mk-table th{
  text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:12px 16px; background:var(--paper-alt); border-bottom:1px solid var(--line); white-space:nowrap;
}
.mk-table th:first-child{ border-top-left-radius:var(--r-md) }
.mk-table th:last-child{ border-top-right-radius:var(--r-md) }
.mk-table td{ padding:16px; font-size:14px; border-bottom:1px solid var(--line); vertical-align:middle }
.mk-table tbody tr:last-child td{ border-bottom:0 }
.mk-table tbody tr:hover{ background:var(--paper-alt) }
.mk-table .ordno{ font-weight:700; color:var(--ink) }

/* Sipariş durum zaman çizelgesi */
.mk-track{ display:flex; flex-direction:column; gap:0 }
.mk-track .tstep{ display:flex; gap:16px; padding-bottom:26px; position:relative }
.mk-track .tstep:last-child{ padding-bottom:0 }
.mk-track .tstep::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line) }
.mk-track .tstep:last-child::before{ display:none }
.mk-track .tdot{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft); background:var(--paper); display:grid; place-items:center; flex:none; color:var(--muted-2); font-size:14px; z-index:1 }
.mk-track .tstep.done .tdot{ background:var(--brand); border-color:var(--brand); color:#fff }
.mk-track .tstep.now .tdot{ background:var(--gold); border-color:var(--gold); color:var(--ink) }
.mk-track .tstep.done::before{ background:var(--brand) }
.mk-track b{ display:block; font-size:15px; letter-spacing:-.01em }
.mk-track span{ font-size:13px; color:var(--muted) }

/* Adres kartı */
.mk-addr{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:22px; height:100%; position:relative }
.mk-addr.default{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.mk-addr h3{ font-size:16px }
.mk-addr p{ font-size:14px; color:var(--muted); margin:10px 0 0; line-height:1.7 }
.mk-addr .mk-addr-tag{ position:absolute; top:18px; right:18px }

/* ==========================================================================
   14. SÜREÇ / SSS / MOZAİK / BLOG
   ========================================================================== */
.mk-steps{ position:relative; margin-bottom:0 }
.mk-steps::before{ content:""; position:absolute; top:44px; left:10%; right:10%; height:1px; background:var(--line-soft) }
.mk-step{ position:relative; text-align:center }
.mk-step .disc{ position:relative; width:88px; height:88px; margin:0 auto 16px; border-radius:50%; background:var(--paper); border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--brand); font-size:30px; z-index:1; transition:box-shadow .2s var(--ease), border-color .2s var(--ease) }
.mk-step:hover .disc{ box-shadow:var(--sh-md); border-color:var(--brand) }
.mk-step .n{ position:absolute; top:-6px; right:-6px; width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--ink); font-size:12px; font-weight:700; display:grid; place-items:center; border:3px solid var(--paper-alt) }
.mk-step h3{ font-size:15px }
.mk-step p{ font-size:13px; color:var(--muted); margin:6px 0 0 }
.mk-step .chip{ margin-top:12px; background:var(--gold-100); color:var(--gold-ink); font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); display:inline-block }

.mk-total{ border-radius:var(--r-xl); color:var(--paper); background:linear-gradient(120deg,var(--brand) 0%,var(--brand-800) 100%); padding:34px 40px }
.mk-total .lbl{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300) }
.mk-total .big{ font-size:32px; font-weight:700; letter-spacing:-.03em; margin-top:4px; color:var(--paper) }
.mk-total .big small{ font-size:16px; font-weight:500; color:rgba(251,250,245,.7); letter-spacing:0 }

.mk-mosaic-tile{ position:relative; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); padding:16px; min-height:132px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--ink); transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); height:100% }
.mk-mosaic-tile:hover{ border-color:var(--brand); box-shadow:var(--sh-sm); transform:translateY(-2px); color:var(--ink) }
.mk-mosaic-tile .dot{ position:absolute; top:16px; left:16px; width:26px; height:26px; border-radius:var(--r-xs); background:var(--paper-deep); display:grid; place-items:center; color:var(--muted); font-size:14px }
.mk-mosaic-tile b{ font-size:14px; font-weight:600; letter-spacing:-.01em }
.mk-mosaic-tile span{ font-size:12px; color:var(--muted); margin-top:2px }

.mk-sector{ border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; background:var(--paper); display:flex; flex-direction:column; gap:6px; height:100%; color:var(--ink); transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease) }
.mk-sector:hover{ border-color:var(--brand); box-shadow:var(--sh-md); transform:translateY(-2px); color:var(--ink) }
.mk-sector b{ font-size:17px; font-weight:600; letter-spacing:-.015em }
.mk-sector span{ font-size:14px; color:var(--muted) }
.mk-sector .go{ margin-top:10px; font-size:13px; font-weight:600; color:var(--brand); display:inline-flex; gap:6px }

.mk-cta{ border-radius:var(--r-2xl); padding:56px 40px; text-align:center; color:var(--paper); background:linear-gradient(135deg,var(--brand-600) 0%,var(--brand-900) 100%); position:relative; overflow:hidden }
.mk-cta::after{ content:""; position:absolute; inset:auto -60px -60px auto; width:320px; height:220px; background-image:radial-gradient(rgba(251,250,245,.14) 1.5px,transparent 1.5px); background-size:22px 22px }
.mk-cta > *{ position:relative; z-index:1 }
.mk-cta h2{ color:var(--paper); font-size:clamp(24px,3vw,38px); font-weight:700 }
.mk-cta-note{ color:rgba(251,250,245,.7); font-size:14px }
.mk-h2-lg{ font-size:clamp(26px,3.4vw,40px) }
.mk-mosaic-sm{ min-height:0; flex-direction:row; align-items:center; gap:10px; padding:12px 14px }
.mk-mosaic-sm .dot{ position:static; flex:none }
.mk-mosaic-sm b{ font-size:13px }
.mk-cta .mk-code{ display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; letter-spacing:.1em; background:var(--gold); color:var(--ink); padding:8px 20px; border-radius:var(--r-sm) }

/* SSS akordeonu — Bootstrap accordion teması */
.accordion{ --bs-accordion-bg:var(--paper); --bs-accordion-border-color:var(--line); --bs-accordion-border-radius:var(--r-md);
  --bs-accordion-btn-color:var(--ink); --bs-accordion-active-color:var(--ink); --bs-accordion-active-bg:var(--paper-alt);
  --bs-accordion-btn-focus-box-shadow:0 0 0 3px var(--brand-soft); --bs-accordion-body-padding-y:1rem }
.accordion-item{ margin-bottom:10px; border-radius:var(--r-md)!important; overflow:hidden }
.accordion-button{ font-weight:600; font-size:15px; letter-spacing:-.01em; padding:16px 18px }
.accordion-button:not(.collapsed){ box-shadow:none }
.accordion-body{ font-size:14px; color:var(--muted); padding-top:0 }

/* Blog */
.mk-post{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); overflow:hidden; height:100%; display:flex; flex-direction:column; color:var(--ink); transition:box-shadow .25s var(--ease), transform .25s var(--ease) }
.mk-post:hover{ box-shadow:var(--sh-md); transform:translateY(-3px); color:var(--ink) }
.mk-post .cover{ aspect-ratio:4/5; background:var(--paper-deep); overflow:hidden; margin:0 }
.mk-post .cover img{ width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease) }
.mk-post:hover .cover img{ transform:scale(1.04) }
.mk-post .in{ padding:20px; display:flex; flex-direction:column; flex:1 }
.mk-post h3{ font-size:17px; margin-top:10px }
.mk-post p{ font-size:14px; color:var(--muted); margin:10px 0 0 }
.mk-post .meta{ margin-top:auto; padding-top:16px; font-size:12px; color:var(--muted-2) }

.mk-article{ font-size:16px; line-height:1.75; color:var(--ink-2) }
.mk-article h2{ margin-top:38px; font-size:26px }
.mk-article h3{ margin-top:28px; font-size:19px }
.mk-article p{ margin-top:14px; color:var(--muted) }
.mk-article ul,.mk-article ol{ margin-top:14px; color:var(--muted); padding-left:22px; display:flex; flex-direction:column; gap:8px }
.mk-article blockquote{ margin:24px 0; padding:18px 22px; border-left:3px solid var(--gold); background:var(--paper-alt); border-radius:0 var(--r-md) var(--r-md) 0; font-size:16px; color:var(--ink-2) }
.mk-toc{ background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; position:sticky; top:96px }
.mk-toc b{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.mk-toc a{ display:block; font-size:14px; color:var(--ink-2); padding:7px 0; border-bottom:1px solid var(--line) }
.mk-toc a:last-child{ border-bottom:0 }
.mk-toc a:hover{ color:var(--brand) }

/* 404 */
.mk-404{ font-size:clamp(90px,18vw,190px); font-weight:800; letter-spacing:-.06em; line-height:.9; color:var(--paper-deep) }

/* ==========================================================================
   15. FOOTER & YÜZEN BUTONLAR
   ========================================================================== */
.mk-footer{ background:var(--paper-alt); border-top:1px solid var(--line); padding:64px 0 0 }
.mk-footer .mk-fh{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:14px }
.mk-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.mk-footer a{ font-size:14px; color:var(--muted); transition:color .15s var(--ease) }
.mk-footer a:hover{ color:var(--brand) }
.mk-footer .mk-fbrand p{ font-size:14px; color:var(--muted); margin-top:14px; max-width:36ch }
.mk-faddr{ font-style:normal; display:flex; flex-direction:column; gap:6px; margin:14px 0 0 }
.mk-faddr a{ display:flex; gap:6px; align-items:flex-start; font-size:13px; color:var(--ink-2) }
.mk-fsocial a{ width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--ink-2); font-size:16px }
.mk-fsocial a:hover{ border-color:var(--brand); color:var(--brand) }
.mk-flegal{ border-top:1px solid var(--line); padding:24px 0; font-size:13px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap; align-items:center }
.mk-ftrust{ border-top:1px solid var(--line); padding:20px 0 40px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted) }

.mk-wa{
  position:fixed; right:26px; bottom:26px; z-index:1035; width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center; font-size:28px;
  box-shadow:var(--sh-lg); transition:transform .2s var(--ease);
}
.mk-wa:hover{ transform:scale(1.06); color:#fff }
.mk-totop{
  position:fixed; right:26px; bottom:92px; z-index:1035; width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line-soft); color:var(--ink); display:none; place-items:center;
  box-shadow:var(--sh-md); font-size:18px;
}
.mk-totop.show{ display:grid }

/* ==========================================================================
   15b. İKONLAR (inline SVG sprite — ikon fontu yok)
   ========================================================================== */
.mk-sprite{ position:absolute; width:0; height:0; overflow:hidden }
.bi{ width:1em; height:1em; fill:currentColor; display:inline-block; vertical-align:-.125em; flex:none }
.fs-3.bi{ width:1.75rem; height:1.75rem }

/* ==========================================================================
   15c. GÖRSELLER (figure / img)
   ========================================================================== */
figure{ margin:0 }
.mk-img{ display:block; width:100%; height:auto; border-radius:var(--r-lg) }
.mk-visual{ position:relative; border-radius:var(--r-2xl); overflow:hidden; background:var(--paper-alt); box-shadow:var(--sh-lg); aspect-ratio:4/5; max-height:620px }
.mk-visual img{ width:100%; height:100%; object-fit:cover; display:block }
.mk-hero .mk-visual{ aspect-ratio:4/5; max-height:560px; max-width:448px; margin-left:auto }
.mk-visual figcaption{ position:absolute; left:16px; bottom:16px; background:rgba(26,20,16,.72); color:var(--paper); font-size:12px; padding:6px 12px; border-radius:var(--r-pill); backdrop-filter:blur(6px) }
.mk-gal .mk-main img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease) }
.mk-gal .mk-main:hover img{ transform:scale(1.03) }
.mk-gal .mk-main{ aspect-ratio:4/5 }
.mk-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block }
.mk-mosaic-tile.has-img{ padding:0; overflow:hidden; min-height:0 }
.mk-mosaic-tile.has-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block }
.mk-mosaic-tile.has-img .in{ padding:12px 14px }

/* ==========================================================================
   15d. ÜRÜN DETAY — 3 SÜTUN (galeri / bilgi / sipariş kutusu)
   ========================================================================== */
.mk-pdp-order{ position:sticky; top:96px }
.mk-orderbox{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--sh-md); padding:20px }
.mk-orderbox .mk-opt{ margin-top:18px }
.mk-orderbox .mk-opt:first-child{ margin-top:0 }
.mk-orderbox .mk-opts{ display:grid; grid-template-columns:1fr; gap:6px }
.mk-orderbox .mk-opts.mk-two{ grid-template-columns:1fr 1fr }
.mk-orderbox .mk-opts label{ display:block }
.mk-orderbox .mk-opts .mk-box{ min-width:0; padding:8px 11px; flex-direction:row; align-items:center; justify-content:space-between; gap:8px }
.mk-orderbox .mk-opts.mk-two .mk-box{ flex-direction:column; align-items:flex-start; gap:2px }
.mk-orderbox .mk-opts .mk-box b{ font-size:13px; white-space:nowrap }
.mk-orderbox .mk-opts .mk-box > span{ font-size:11px; text-align:right }
.mk-orderbox .mk-opts.mk-two .mk-box > span{ text-align:left }
.mk-orderbox .mk-optlbl{ margin-bottom:8px }
.mk-orderbox .mk-optlbl .hint{ font-size:10px }
.mk-orderbox .mk-qty .mk-save{ right:6px }
.mk-orderbox .mk-buybox{ margin-top:18px; padding:16px; background:var(--paper-alt) }
.mk-orderbox .mk-buybox .mk-tot{ font-size:30px }
.mk-pdp-info .mk-usp{ height:auto }
.mk-attrlist{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px }
.mk-attrlist li{ font-size:13px; color:var(--muted); border-bottom:1px dashed var(--line); padding-bottom:8px }
.mk-attrlist li b{ display:block; color:var(--ink); font-weight:600; font-size:13px }
.mk-pricetable{ width:100%; border-collapse:collapse; font-size:13px; margin-top:4px }
.mk-pricetable th{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:6px 0; border-bottom:1px solid var(--line); text-align:left }
.mk-pricetable td{ padding:8px 0; border-bottom:1px dashed var(--line) }
.mk-pricetable tr:last-child td{ border-bottom:0 }
.mk-pricetable td:last-child, .mk-pricetable th:last-child{ text-align:right }
.mk-pricetable .save{ color:var(--brand); font-weight:600; font-size:11px }

/* Referans düzeni: fiyat kutusu, adet tablosu, yan kutular */
.mk-pricebox{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px }
.mk-pricebox .mk-tot{ font-size:32px; font-weight:700; letter-spacing:-.035em; line-height:1 }
.mk-pricebox .mk-tot small{ font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0 }
.mk-pricebox .mk-kdv{ font-size:12px; color:var(--muted); margin-top:6px }
.mk-pricebox s{ color:var(--muted-2) }
.mk-qtytable{ width:100%; border-collapse:collapse; font-size:14px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.mk-qtytable th{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:10px 14px; background:var(--paper-alt); text-align:left }
.mk-qtytable td{ padding:0 14px; border-top:1px solid var(--line); height:44px; vertical-align:middle }
.mk-qtytable td:first-child{ padding:0 }
.mk-qtytable label{ display:flex; align-items:center; gap:8px; padding:0 14px; height:44px; cursor:pointer; margin:0; font-weight:600 }
.mk-qtytable input{ position:absolute; opacity:0; width:0; height:0 }
.mk-qtytable tr:has(input:checked){ background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand) }
.mk-qtytable tr:hover{ background:var(--paper-alt) }
.mk-qtytable .save{ color:var(--brand); font-weight:600 }
.mk-qtytable .mk-badge{ padding:2px 7px; font-size:10px }
.mk-galtools{ position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:8px; z-index:2 }
.mk-galtools .mk-fav{ position:static; width:36px; height:36px; border-radius:50%; background:rgba(251,250,245,.92); border:1px solid var(--line); color:var(--ink-2); display:grid; place-items:center }
.mk-galtools .mk-fav:hover, .mk-galtools .mk-fav.is-on{ color:var(--danger); border-color:var(--danger) }
.mk-trust-sm{ padding:14px 10px; text-align:center }
.mk-trust-sm .mk-ico{ margin:0 auto 8px; width:34px; height:34px; font-size:16px }
.mk-trust-sm h3{ font-size:13px }
.mk-trust-sm p{ font-size:11px; margin-top:4px }
.mk-sidebox{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:16px; margin-bottom:14px }
.mk-sidebox h2{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px; display:flex; align-items:center }
.mk-sidebox-promo{ background:var(--ok-soft); border-color:rgba(31,179,88,.25) }
.mk-sidebox-promo h2{ color:var(--brand) }
.mk-sidebox-promo p{ font-size:13px; color:var(--ink-2); margin:0 0 12px }
.mk-minilist{ list-style:none; margin:0; padding:0 }
.mk-minilist li{ display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line) }
.mk-minilist li:first-child{ border-top:0; padding-top:0 }
.mk-minilist img{ width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; flex:none; background:var(--paper-deep) }
.mk-minilist div{ flex:1; min-width:0 }
.mk-minilist div a{ display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.3 }
.mk-minilist div b{ display:block; font-size:12px; color:var(--muted); font-weight:500; margin-top:2px }
.mk-minilist .btn{ flex:none; padding:4px 10px; font-size:12px }
.mk-pdp .mk-opts .mk-box{ min-width:0; padding:9px 14px }
.mk-pdp .mk-opts .mk-box > span{ font-size:11px }
.mk-pdp-info .mk-opt{ margin-top:20px }
@media (max-width:991.98px){ .mk-pdp-side{ order:4 } .mk-pdp-side .mk-pdp-order{ display:grid; grid-template-columns:1fr 1fr; gap:14px } .mk-sidebox{ margin:0 } }
@media (max-width:575.98px){ .mk-pdp-side .mk-pdp-order{ grid-template-columns:1fr } .mk-qtytable th:nth-child(4), .mk-qtytable td:nth-child(4){ display:none } .mk-pricebox .mk-tot{ font-size:28px } }

/* ==========================================================================
   15d2. LIGHTBOX + YORUM FORMU
   ========================================================================== */
.mk-zoom{ cursor:pointer }
.mk-gal .mk-main img[data-lightbox]{ cursor:zoom-in }
.mk-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(26,20,16,.92); display:grid; place-items:center; padding:56px 64px 72px; backdrop-filter:blur(4px) }
.mk-lightbox[hidden]{ display:none }
body.mk-lb-open{ overflow:hidden }
.mk-lb-fig{ max-width:min(92vw,1100px); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px }
.mk-lb-fig img{ max-width:100%; max-height:calc(100vh - 160px); object-fit:contain; border-radius:var(--r-lg); background:var(--paper-deep); box-shadow:var(--sh-lg) }
.mk-lb-fig figcaption{ color:rgba(251,250,245,.8); font-size:13px }
.mk-lb-close, .mk-lb-prev, .mk-lb-next{ position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(251,250,245,.25); background:rgba(251,250,245,.1); color:var(--paper); display:grid; place-items:center; transition:background .15s var(--ease) }
.mk-lb-close:hover, .mk-lb-prev:hover, .mk-lb-next:hover{ background:rgba(251,250,245,.22) }
.mk-lb-close{ top:16px; right:16px } .mk-lb-prev{ left:12px; top:50% ; transform:translateY(-50%) } .mk-lb-next{ right:12px; top:50%; transform:translateY(-50%) }
.mk-lb-close .bi, .mk-lb-prev .bi, .mk-lb-next .bi{ width:20px; height:20px }
.mk-lb-dots{ position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:8px }
.mk-lb-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(251,250,245,.35); padding:0 }
.mk-lb-dots button[aria-selected="true"]{ background:var(--gold) }
@media (max-width:767.98px){ .mk-lightbox{ padding:56px 8px 60px } .mk-lb-prev{ left:4px } .mk-lb-next{ right:4px } .mk-lb-prev, .mk-lb-next{ width:40px; height:40px } }

.mk-revform{ background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; margin-top:14px }
.mk-revform h3{ font-size:18px }
.mk-rating{ border:0; padding:0; margin:14px 0 6px }
.mk-rating legend{ float:none; width:auto; margin-bottom:6px }
.mk-stars-input{ display:inline-flex; flex-direction:row-reverse; gap:4px }
.mk-stars-input input{ position:absolute; opacity:0; width:0; height:0 }
.mk-stars-input label{ cursor:pointer; margin:0; color:var(--line-soft); font-size:0; transition:color .12s var(--ease) }
.mk-stars-input label .bi{ width:30px; height:30px }
.mk-stars-input label:hover, .mk-stars-input label:hover ~ label,
.mk-stars-input input:checked ~ label{ color:var(--gold) }
.mk-stars-input input:focus-visible + label{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px }
.mk-rating-err:not([hidden]){ display:block }
.mk-upload-rev{ padding:18px }
.mk-rev-previews{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.mk-rev-previews[hidden]{ display:none }
.mk-rev-previews li{ position:relative; width:84px }
.mk-rev-previews img{ width:84px; height:84px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); display:block }
.mk-rev-previews span{ display:block; font-size:10px; color:var(--muted); text-align:center; margin-top:3px }
.mk-rev-previews button{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border:0; background:none; color:var(--danger); padding:0; display:grid; place-items:center }
.mk-rev-previews button .bi{ width:20px; height:20px; background:var(--paper); border-radius:50% }
.mk-rev .photos{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.mk-rev .photos img{ width:72px; height:72px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); cursor:zoom-in }

/* ==========================================================================
   15e. MOBİL ALT ÇUBUK (anasayfa · kategoriler · ara · hesabım · sepet)
   ========================================================================== */
.mk-mobbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1040; display:flex;
  background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(26,20,16,.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mk-mobbar > a, .mk-mobbar > button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  font-size:10px; font-weight:600; color:var(--muted); background:none; border:0; position:relative;
}
.mk-mobbar .bi{ width:22px; height:22px }
.mk-mobbar > .active{ color:var(--brand) }
.mk-mobbar .mk-dot{ position:absolute; top:2px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px; background:var(--gold); color:var(--ink); border-radius:var(--r-pill); font-size:10px; font-weight:700; font-style:normal; display:grid; place-items:center }
@media (max-width:767.98px){ body:not(.mk-page-urun){ padding-bottom:64px } }

/* Çerez çubuğu (WooCommerce mağaza bildirimi) — sol altta kart; mobilde alt barın üstünde */
.mk-cookiebar{
  position:fixed; left:16px; bottom:16px; z-index:1045; width:min(560px, calc(100% - 32px));
  background:var(--ink); color:#fff; border-radius:var(--r-md); box-shadow:var(--sh-lg); font-size:13px; line-height:1.5;
}
.mk-cookiebar-in{ display:flex; align-items:center; gap:12px; padding:12px 14px }
.mk-cookiebar-ico{ flex:none; width:20px; height:20px; color:var(--gold) }
.mk-cookiebar p{ margin:0; flex:1 }
.mk-cookiebar a{ color:var(--gold); text-decoration:underline }
.mk-cookiebar .btn{ flex:none; text-decoration:none; white-space:nowrap }
@media (max-width:767.98px){
  .mk-cookiebar{ left:8px; width:calc(100% - 16px); bottom:calc(72px + env(safe-area-inset-bottom)) }
  .mk-cookiebar-in{ flex-wrap:wrap; gap:8px 10px; padding:12px }
  .mk-cookiebar p{ flex:1 1 calc(100% - 32px) }
  .mk-cookiebar .btn{ margin-left:auto }
  body.has-stickybuy .mk-cookiebar{ bottom:calc(86px + env(safe-area-inset-bottom)) }
  body.has-cookiebar .mk-wa, body.has-cookiebar .mk-totop{ display:none }
}

/* ==========================================================================
   15f. GERİ SAYIMLI FIRSAT (zamanlanmış indirim)
   ========================================================================== */
.mk-deals .mk-sechead{ align-items:center }
.mk-countdown{ display:flex; gap:8px }
.mk-countdown span{ min-width:56px; text-align:center; background:var(--ink); color:var(--paper); border-radius:var(--r-md); padding:8px 6px }
.mk-countdown b{ display:block; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums }
.mk-countdown small{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.7; margin-top:4px }
.mk-countdown.is-over span{ background:var(--muted) }
.mk-deal{ position:relative; height:100% }
.mk-deal-cd{ position:absolute; top:12px; right:12px; z-index:3; background:var(--ink); color:var(--paper); border-radius:var(--r-pill); padding:4px 10px; font-weight:600; font-variant-numeric:tabular-nums; pointer-events:none; font-size:12px }
.mk-deal .mk-fav{ top:52px }
[data-countdown-short].is-over{ opacity:.7 }
@media (max-width:767.98px){ .mk-countdown span{ min-width:46px; padding:6px 4px } .mk-countdown b{ font-size:18px } }

/* ==========================================================================
   16. YARDIMCI SINIFLAR & ANİMASYON
   ========================================================================== */
.mk-bg-paper{ background:var(--paper)!important }
.mk-bg-alt{ background:var(--paper-alt)!important }
.mk-bg-deep{ background:var(--paper-deep)!important }
.mk-bg-ink{ background:var(--ink)!important; color:var(--paper) }
.mk-border{ border:1px solid var(--line)!important }
.mk-rounded{ border-radius:var(--r-lg)!important }
.mk-shadow{ box-shadow:var(--sh-md)!important }
.mk-sticky-top-96{ position:sticky; top:96px }
.fs-13{ font-size:13px!important } .fs-14{ font-size:14px!important } .fs-15{ font-size:15px!important }
.fs-20{ font-size:20px!important } .fs-22{ font-size:22px!important }
.mk-text{ font-size:14px; line-height:1.8; color:var(--muted) }
.mk-ink-2{ color:var(--ink-2) }
.mk-gold-300{ color:var(--gold-300) }
.mk-danger-line{ color:var(--danger)!important; border-color:var(--danger)!important }
.mk-h1-sm{ font-size:clamp(24px,2.4vw,32px) }
.mk-maxw-560{ max-width:560px }
.w-1{ width:1% } .w-64{ width:64px }
.fs-24{ font-size:24px!important } .fs-26{ font-size:26px!important }
.mk-on-dark-75{ color:rgba(251,250,245,.75) } .mk-on-dark-80{ color:rgba(251,250,245,.8) }
.mk-danger{ color:var(--danger) } .mk-ok{ color:var(--ok) }
.mk-bigicon{ font-size:52px; color:var(--gold-300) }
.mt-10{ margin-top:10px!important }
.mk-maxw-480{ max-width:480px } .mk-maxw-52ch{ max-width:52ch }
.mk-track-gold{ height:6px; background:rgba(143,99,0,.15) }

@keyframes mk-fade-up{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.mk-fade-up{ animation:mk-fade-up .5s var(--ease) both }

::selection{ background:var(--gold-300); color:var(--ink) }
::-webkit-scrollbar{ width:12px; height:12px }
::-webkit-scrollbar-track{ background:var(--paper-alt) }
::-webkit-scrollbar-thumb{ background:var(--line-soft); border-radius:var(--r-pill); border:3px solid var(--paper-alt) }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-2) }

/* ==========================================================================
   17. DUYARLI (RESPONSIVE)
   ========================================================================== */
@media (max-width:1199.98px){
  .mk-steps::before{ display:none }
}
@media (max-width:991.98px){
  .mk-filters, .mk-accnav, .mk-gal, .mk-toc, .mk-sticky-top-96, .mk-pdp-order{ position:static }
  .mk-pdp-gal{ order:1 } .mk-pdp-order{ order:2 } .mk-pdp-info{ order:3 }
  .mk-orderbox{ box-shadow:none }
  .mk-hero-in{ padding:48px 0 }
  .mk-band{ padding:64px 0 }
  .mk-total{ padding:26px }
}
@media (max-width:767.98px){
  .mk-sec{ padding:48px 0 }
  .mk-band, .mk-band-sm{ padding:48px 0 }
  .mk-header-in{ min-height:64px; gap:12px }
  .mk-burger{ display:inline-flex }
  .mk-search{ display:none }
  .mk-iconbtn{ padding:8px 10px }
  .mk-iconbtn small, .mk-iconbtn strong{ display:none }
  .mk-cta{ padding:40px 22px }
  .mk-cartrow{ flex-wrap:wrap; padding:18px }
  .mk-cartrow .mk-cthumb{ width:84px }
  .mk-cartrow .mk-cprice{ width:100%; margin-left:0; text-align:left; display:flex; align-items:center; gap:12px }
  .mk-list-view .mk-card{ flex-direction:column }
  .mk-list-view .mk-thumb{ width:100%; aspect-ratio:4/5 }
  .mk-empty{ padding:48px 16px }
  .mk-table thead{ display:none }
  .mk-table, .mk-table tbody, .mk-table tr, .mk-table td{ display:block; width:100% }
  .mk-table tr{ border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; background:var(--paper) }
  .mk-table td{ border-bottom:1px dashed var(--line); display:flex; align-items:center; gap:14px; padding:12px 14px }
  .mk-table td:last-child{ border-bottom:0 }
  .mk-table td::before{ content:attr(data-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); flex:none; min-width:104px }
  .mk-stickybuy{ display:flex }
  .mk-wa{ right:16px; bottom:80px; width:50px; height:50px; font-size:25px }
  .mk-totop{ right:16px; bottom:138px }
  body.has-stickybuy{ padding-bottom:78px }
}
@media (max-width:575.98px){
  .mk-rail > *{ flex-basis:260px }
  .mk-topbar .mk-topbar-in{ gap:12px; font-size:12px }
  .mk-buybox .mk-tot{ font-size:30px }
  .mk-panel-body{ padding:18px }
  .mk-cartrow{ gap:14px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
}

/* Yazdırma */
@media print{
  .mk-topbar,.mk-header,.mk-catnav,.mk-footer,.mk-wa,.mk-totop,.mk-stickybuy,.mk-filters,.mk-mobbar{ display:none!important }
  .mk-shell{ box-shadow:none; max-width:none }
  body{ background:#fff }
}