/* =====================================================================
   Kodend Temel — vitrin iskeleti ve tüm sayfaların varsayılan görünümü.
   Renk, yazı tipi ve köşe değerleri Tasarım Yönetimi'nden gelir (--kd-*). Diğer temalar bu dosyanın üstüne yazar.
   ===================================================================== */
:where(:root) { /* varsayılanlar: Tasarım Yönetimi'nin :root değerleri (head'de daha önce basılır) her zaman üstün gelsin */
  --kd-accent: #E8501E; --kd-accent2: #15803D; --kd-bg: #F6F7F9; --kd-surface: #FFFFFF; --kd-text: #151A26;
  --kd-muted: #667085; --kd-line: #E7E9EE; --kd-topbar-bg: #151A26; --kd-topbar-text: #FFFFFF; --kd-header-bg: #FFFFFF;
  --kd-header-text: #151A26; --kd-menu-bg: #FFFFFF; --kd-menu-text: #151A26; --kd-footer-bg: #FFFFFF; --kd-footer-text: #3F4756;
  --kd-on-accent: #FFFFFF; --kd-kose: 12px; --kd-kose-k: 10px;
  --kd-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --kd-font-baslik: var(--kd-font);
  --kd-kap: 1320px; --kd-bosluk: clamp(16px, 3vw, 28px);
  --kd-iyi: #15803D; --kd-hata: #C62828; --kd-uyari: #B45309;
  --kd-golge: 0 12px 32px -18px rgba(16, 24, 40, .35);
  --kd-zemin-2: color-mix(in srgb, var(--kd-text) 4%, var(--kd-surface));
}

/* ---------- Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body.kd { margin: 0; background: var(--kd-bg); color: var(--kd-text); font: 400 15px/1.55 var(--kd-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.kd-kilit { overflow: hidden; }
/* Sıfırlamalar :where() ile sıfır özgüllükte: eski sistem sayfalarının tek sınıflı kuralları (ör. .bp-sp-checkout{color:#fff}) üstün gelir */
:where(.kd) img { max-width: 100%; height: auto; display: block; }
:where(.kd) a { color: inherit; text-decoration: none; }
:where(.kd) a:hover { color: var(--kd-accent); }
:where(.kd) :is(h1, h2, h3, h4) { font-family: var(--kd-font-baslik); line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
:where(.kd) p { margin: 0; }
:where(.kd) ul { margin: 0; padding: 0; list-style: none; }
:where(.kd) :is(button, input, select, textarea) { font: inherit; color: inherit; }
.kd :focus-visible { outline: 2px solid var(--kd-accent); outline-offset: 2px; }
.kd-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd-atla { position: absolute; left: 12px; top: -60px; z-index: 9999; background: var(--kd-text); color: var(--kd-surface) !important; padding: 10px 14px; border-radius: 8px; }
.kd-atla:focus { top: 12px; }
.kd-kap { width: 100%; max-width: var(--kd-kap); margin: 0 auto; padding-inline: var(--kd-bosluk); }
.kd-ik { flex: none; }
.kd-icerik { min-height: 50vh; display: grid; gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(36px, 5vw, 64px); }
.kd-icerik > * { min-width: 0; }
.kd-icerik > :first-child:not(.kd-bolum-hero):not(.kd-bolum) { margin-top: clamp(18px, 3vw, 28px); }

/* ---------- Düğmeler ve formlar ---------- */
.kd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--kd-accent); border-radius: var(--kd-kose-k); background: var(--kd-accent); color: var(--kd-on-accent) !important; font-weight: 700; font-size: 14px; cursor: pointer; text-align: center; transition: filter .15s, background .15s, color .15s; text-decoration: none !important; }
.kd-btn:hover { filter: brightness(1.06); color: var(--kd-on-accent) !important; }
.kd-btn-cizgi { background: transparent; color: var(--kd-text) !important; border-color: var(--kd-line); }
.kd-btn-cizgi:hover { border-color: var(--kd-text); filter: none; color: var(--kd-text) !important; }
.kd-btn-koyu { background: var(--kd-text); border-color: var(--kd-text); color: var(--kd-surface) !important; }
.kd-btn-buyuk { min-height: 52px; padding: 0 28px; font-size: 15px; }
.kd-btn-kucuk { min-height: 36px; padding: 0 14px; font-size: 13px; }
.kd-btn-tam { width: 100%; }
.kd-btn[disabled], .kd-btn.pasif { opacity: .5; pointer-events: none; }
.kd-btn-grup { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kd-ikon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: inherit; }
.kd-ikon-btn:hover { background: var(--kd-zemin-2); }
.kd-alan { display: grid; gap: 6px; }
.kd-alan > label, .kd-etiket { font-size: 13.5px; font-weight: 600; color: var(--kd-text); }
.kd-girdi, .kd input[type=text].kd-girdi, .kd select.kd-girdi, .kd textarea.kd-girdi {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--kd-line); border-radius: var(--kd-kose-k);
  background: var(--kd-surface); color: var(--kd-text); transition: border-color .15s, box-shadow .15s; }
.kd textarea.kd-girdi { min-height: 120px; resize: vertical; }
.kd-girdi:focus { outline: none; border-color: var(--kd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kd-accent) 18%, transparent); }
.kd-kutu { background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); padding: clamp(18px, 3vw, 28px); }
.kd-ust-etiket { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kd-accent); }
.kd-rozet { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }

/* ---------- Duyuru ve üst şerit ---------- */
.kd-duyuru { background: var(--kd-accent); color: var(--kd-on-accent); font-size: 13px; font-weight: 600; text-align: center; }
.kd-duyuru .kd-kap { min-height: 34px; display: grid; place-items: center; }
.kd-duyuru p { animation: kdBelir .4s ease; }
.kd-ustserit { background: var(--kd-topbar-bg); color: var(--kd-topbar-text); font-size: 12.5px; }
.kd-ustserit .kd-kap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 12px; }
.kd-ustserit a { color: var(--kd-topbar-text) !important; opacity: .9; }
.kd-ustserit a:hover { opacity: 1; }
.kd-ustserit-tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.kd-ustserit-link { display: flex; align-items: center; gap: 18px; }
.kd-secici select { background: transparent; border: 1px solid color-mix(in srgb, var(--kd-topbar-text) 30%, transparent); color: var(--kd-topbar-text); border-radius: 6px; padding: 2px 6px; font-size: 12px; }
.kd-secici option { color: #111; }

/* ---------- Üst bölüm ---------- */
.kd-ust { position: sticky; top: 0; z-index: 900; background: var(--kd-header-bg); color: var(--kd-header-text); border-bottom: 1px solid var(--kd-line); transition: box-shadow .2s; }
.kd-ust.kd-ust-sabit { box-shadow: 0 6px 24px -14px rgba(16, 24, 40, .35); }
.kd-ust-ana { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 3vw, 36px); min-height: 78px; }
.kd-logo { display: inline-flex; align-items: center; font-family: var(--kd-font-baslik); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--kd-header-text) !important; }
.kd-logo img { max-height: 46px; width: auto; }
.kd-ara { position: relative; display: flex; align-items: center; max-width: 640px; width: 100%; }
.kd-ara input { width: 100%; height: 48px; padding: 0 52px 0 18px; border: 1.5px solid var(--kd-line); border-radius: 999px; background: var(--kd-zemin-2); color: var(--kd-text); }
.kd-ara input:focus { outline: none; border-color: var(--kd-accent); background: var(--kd-surface); }
.kd-ara button { position: absolute; right: 5px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--kd-accent); color: var(--kd-on-accent); display: grid; place-items: center; cursor: pointer; }
.kd-ara-genis { max-width: 520px; margin: 0 auto; }
.kd-oneri { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); box-shadow: var(--kd-golge); padding: 8px; display: grid; gap: 2px; max-height: 70vh; overflow: auto; }
.kd-oneri a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--kd-text) !important; }
.kd-oneri a:hover, .kd-oneri a:focus { background: var(--kd-zemin-2); outline: none; }
.kd-oneri img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.kd-oneri-urun span { flex: 1; font-size: 14px; }
.kd-oneri-urun b { font-size: 14px; white-space: nowrap; }
.kd-oneri-kat { font-size: 13px; font-weight: 600; color: var(--kd-accent) !important; }
.kd-oneri-tum { justify-content: center; font-weight: 700; font-size: 13.5px; border-top: 1px solid var(--kd-line); border-radius: 0 !important; margin-top: 4px; }
.kd-ust-eylem { display: flex; align-items: center; gap: 4px; }
.kd-eylem { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--kd-header-text) !important; position: relative; }
.kd-eylem:hover { background: color-mix(in srgb, var(--kd-header-text) 7%, transparent); }
.kd-eylem span { display: grid; line-height: 1.2; }
.kd-eylem small { font-size: 12px; color: color-mix(in srgb, var(--kd-header-text) 62%, transparent); }
.kd-eylem b { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-sepet em { position: absolute; top: 2px; left: 26px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--kd-accent); color: var(--kd-on-accent); font: 700 11px/19px var(--kd-font); text-align: center; font-style: normal; }
.kd-zil { display: inline-flex; }
.kd-mobil { display: none; }

/* Kategori menüsü ve mega panel */
.kd-menu { background: var(--kd-menu-bg); border-top: 1px solid var(--kd-line); }
.kd-menu > ul { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.kd-menu > ul::-webkit-scrollbar { display: none; }
.kd-menu > ul > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; height: 48px; font-size: 14px; font-weight: 600; color: var(--kd-menu-text) !important; white-space: nowrap; border-bottom: 2px solid transparent; }
.kd-menu > ul > li:hover > a, .kd-menu > ul > li:focus-within > a { border-bottom-color: var(--kd-accent); color: var(--kd-accent) !important; }
.kd-menu .kd-menu-vurgu { color: var(--kd-accent) !important; }
.kd-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--kd-surface); border-top: 1px solid var(--kd-line); box-shadow: 0 24px 40px -24px rgba(16, 24, 40, .35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; }
.kd-menu-dal:hover > .kd-mega, .kd-menu-dal:focus-within > .kd-mega { opacity: 1; visibility: visible; transform: none; }
.kd-mega-ic { padding-block: 26px; display: grid; gap: 18px; }
.kd-mega-sutunlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 28px; }
.kd-mega-baslik { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 8px; color: var(--kd-text) !important; }
.kd-mega ul { display: grid; gap: 6px; }
.kd-mega li a { font-size: 13.5px; color: var(--kd-muted) !important; }
.kd-mega li a:hover { color: var(--kd-accent) !important; }
.kd-mega-tum { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--kd-accent) !important; }

/* Mobil çekmece */
.kd-cekmece { position: fixed; inset: 0; z-index: 2000; }
.kd-cekmece-perde { position: absolute; inset: 0; background: rgba(10, 14, 25, .5); opacity: 0; transition: opacity .25s; }
.kd-cekmece-panel { position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--kd-surface); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
.kd-cekmece.acik .kd-cekmece-perde { opacity: 1; }
.kd-cekmece.acik .kd-cekmece-panel { transform: none; }
.kd-cekmece-ust { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--kd-line); }
.kd-cekmece-ust .kd-logo { color: var(--kd-text) !important; font-size: 20px; }
.kd-ara-mobil { padding: 12px 16px; max-width: none; }
.kd-ara-mobil button { right: 21px; }
.kd-cekmece-liste { padding: 4px 0; }
.kd-cekmece-liste > li > a, .kd-cekmece-liste > li > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border: 0; background: none; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; border-bottom: 1px solid var(--kd-line); }
.kd-cekmece-liste button[aria-expanded="true"] svg { transform: rotate(180deg); }
.kd-cekmece-liste ul { background: var(--kd-zemin-2); padding: 6px 0; }
.kd-cekmece-liste ul a { display: block; padding: 10px 28px; font-size: 14px; }
.kd-cekmece-alt { margin-top: auto; padding: 14px 18px; display: grid; gap: 12px; border-top: 1px solid var(--kd-line); }
.kd-cekmece-alt a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }

/* ---------- Bölüm başlıkları ve listeler ---------- */
.kd-bolum-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.kd-bolum-bas h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; display: flex; align-items: center; gap: 8px; }
.kd-bolum-bas p { color: var(--kd-muted); margin-top: 4px; font-size: 14px; }
.kd-bolum-bas-sag { display: flex; align-items: center; gap: 12px; }
.kd-tumu { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--kd-accent) !important; white-space: nowrap; }
.kd-kaydir-ok { display: inline-flex; gap: 6px; }
.kd-kaydir-ok button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kd-line); background: var(--kd-surface); display: grid; place-items: center; cursor: pointer; }
.kd-kaydir-ok button:hover { border-color: var(--kd-text); }
.kd-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.kd-kaydir { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 4 * 16px) / 5)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.kd-kaydir::-webkit-scrollbar { display: none; }
.kd-kaydir > * { scroll-snap-align: start; }

/* ---------- Ürün kartı ---------- */
.kd-kart { position: relative; display: flex; flex-direction: column; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s; min-width: 0; }
.kd-kart:hover { border-color: color-mix(in srgb, var(--kd-text) 18%, var(--kd-line)); box-shadow: var(--kd-golge); }
.kd-kart-gorsel { position: relative; aspect-ratio: 1 / 1; background: var(--kd-zemin-2); overflow: hidden; }
.kd-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.kd-kart:hover .kd-kart-gorsel img { transform: scale(1.04); }
.kd-kart-tukendi .kd-kart-gorsel img { filter: grayscale(.6); opacity: .7; }
.kd-kart-rozet { position: absolute; top: 10px; left: 10px; display: grid; gap: 5px; justify-items: start; z-index: 2; }
.kd-rozet-indirim { background: var(--kd-accent2); color: #fff; }
.kd-rozet-yeni { background: var(--kd-text); color: var(--kd-surface); }
.kd-rozet-kargo { background: color-mix(in srgb, var(--kd-surface) 90%, transparent); color: var(--kd-text); border: 1px solid var(--kd-line); }
.kd-kart-eylem { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; z-index: 2; opacity: 0; transform: translateX(6px); transition: opacity .18s, transform .18s; }
.kd-kart:hover .kd-kart-eylem, .kd-kart:focus-within .kd-kart-eylem { opacity: 1; transform: none; }
@media (hover: none) { .kd-kart-eylem { opacity: 1; transform: none; } }
.kd-kart-ikon { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--kd-surface) 94%, transparent); border: 1px solid var(--kd-line); display: grid; place-items: center; color: var(--kd-text) !important; }
.kd-kart-ikon:hover { color: var(--kd-accent) !important; border-color: var(--kd-accent); }
.kd-kart-govde { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; }
.kd-kart-ad { font-size: 14px; line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.kd-kart-puan { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--kd-muted); }
.kd-kart-puan svg { color: #F5A524; fill: #F5A524; }
.kd-kart-puan b { color: var(--kd-text); }
.kd-kart-fiyat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; }
.kd-kart-fiyat b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kd-kart-fiyat s { font-size: 13px; color: var(--kd-muted); }
.kd-kart-form { margin: 0; }
.kd-kart-btn { width: 100%; min-height: 40px; font-size: 13.5px; }

/* ---------- Ana sayfa bölümleri ---------- */
.kd-bolum-hero { margin-top: clamp(12px, 2vw, 22px); }
.kd-hero .kd-kap { position: relative; }
.kd-hero-ray { position: relative; border-radius: var(--kd-kose); overflow: hidden; background: var(--kd-zemin-2); aspect-ratio: 16 / 6.2; min-height: 300px; }
.kd-slayt { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.kd-slayt.aktif { opacity: 1; visibility: visible; }
.kd-slayt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kd-slayt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 25, .62), rgba(10, 14, 25, .18) 55%, transparent); }
.kd-slayt-metin { position: absolute; z-index: 2; left: clamp(22px, 5vw, 64px); bottom: clamp(22px, 6vw, 64px); max-width: min(560px, 80%); color: #fff; display: grid; gap: 12px; justify-items: start; }
.kd-slayt-metin .kd-ust-etiket { color: #fff; opacity: .85; }
.kd-slayt-metin h2 { font-size: clamp(26px, 4vw, 48px); font-weight: 800; color: #fff; }
.kd-slayt-metin p { font-size: clamp(14px, 1.4vw, 17px); opacity: .9; }
.kd-slayt-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #111; display: grid; place-items: center; cursor: pointer; }
.kd-slayt-geri { left: calc(var(--kd-bosluk) + 14px); }
.kd-slayt-ileri { right: calc(var(--kd-bosluk) + 14px); }
.kd-slayt-nokta { position: absolute; z-index: 3; bottom: 18px; right: calc(var(--kd-bosluk) + 22px); display: flex; gap: 6px; }
.kd-slayt-nokta button { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .2s; }
.kd-slayt-nokta button[aria-current] { width: 26px; background: #fff; }
.kd-avantajlar { display: grid; grid-template-columns: repeat(var(--kd-avantaj-sayi, 4), minmax(0, 1fr)); gap: 12px; }
.kd-avantaj { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); }
.kd-avantaj svg { color: var(--kd-accent); }
.kd-avantaj b { display: block; font-size: 14.5px; }
.kd-avantaj span { font-size: 13px; color: var(--kd-muted); }
.kd-karolar { display: grid; grid-template-columns: repeat(var(--kd-karo-sayi, 6), minmax(0, 1fr)); gap: 14px; }
.kd-karo { display: grid; gap: 10px; text-align: center; }
.kd-karo-gorsel { aspect-ratio: 1 / 1; border-radius: var(--kd-kose); overflow: hidden; background: var(--kd-surface); border: 1px solid var(--kd-line); display: grid; place-items: center; }
.kd-karo-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kd-karo:hover img { transform: scale(1.05); }
.kd-karo-bos .kd-karo-gorsel { background: color-mix(in srgb, var(--kd-accent) 9%, var(--kd-surface)); }
.kd-karo-gorsel i { font: 800 clamp(30px, 4vw, 46px)/1 var(--kd-font-baslik); color: var(--kd-accent); font-style: normal; }
.kd-karo b { font-size: 14px; font-weight: 700; }
.kd-bannerlar { display: grid; gap: 14px; }
.kd-bannerlar-2 { grid-template-columns: 1fr 1fr; }
.kd-bannerlar-3 { grid-template-columns: repeat(3, 1fr); }
.kd-banner { display: block; border-radius: var(--kd-kose); overflow: hidden; background: var(--kd-zemin-2); }
.kd-banner img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform .5s; }
.kd-bannerlar-1 .kd-banner img { aspect-ratio: 16 / 5; }
.kd-banner:hover img { transform: scale(1.03); }
.kd-editoryal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.kd-editoryal-sag .kd-editoryal-gorsel { order: 2; }
.kd-editoryal-gorsel { border-radius: var(--kd-kose); overflow: hidden; background: var(--kd-zemin-2); aspect-ratio: 4 / 3; }
.kd-editoryal-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kd-editoryal-metin { display: grid; gap: 14px; justify-items: start; }
.kd-editoryal-metin h2 { font-size: clamp(26px, 3.4vw, 40px); }
.kd-editoryal-metin p { color: var(--kd-muted); max-width: 52ch; }
.kd-markalar .kd-marka-ray { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.kd-marka { display: grid; place-items: center; height: 84px; padding: 12px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); }
.kd-marka img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.kd-marka:hover img { filter: none; opacity: 1; }
.kd-marka span { font-weight: 700; color: var(--kd-muted); }
.kd-firsat { padding-block: 4px; }
.kd-firsat .kd-bolum-bas h2 svg { color: var(--kd-accent); }
.kd-sayac { display: inline-flex; align-items: center; gap: 4px; font: 800 20px/1 var(--kd-font); font-variant-numeric: tabular-nums; }
.kd-sayac span { min-width: 44px; padding: 9px 0; text-align: center; border-radius: 8px; background: var(--kd-text); color: var(--kd-surface); }
.kd-bulten { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--kd-text); color: var(--kd-surface); border-radius: var(--kd-kose); }
.kd-bulten h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--kd-surface); }
.kd-bulten p { opacity: .75; margin-top: 6px; }
.kd-bulten-form { display: flex; gap: 8px; }
.kd-bulten-form input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: var(--kd-kose-k); border: 1.5px solid var(--kd-line); background: var(--kd-surface); color: var(--kd-text); }
.kd-kayan { overflow: hidden; background: var(--kd-text); color: var(--kd-surface); padding: 12px 0; }
.kd-kayan-ray { display: flex; gap: 48px; width: max-content; animation: kdKay 40s linear infinite; font-weight: 600; white-space: nowrap; }
.kd-kayan-ray span::before { content: '✦'; margin-right: 48px; opacity: .5; }
@keyframes kdKay { to { transform: translateX(-50%); } }
@keyframes kdBelir { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Alt bölüm ---------- */
.kd-alt { background: var(--kd-footer-bg); color: var(--kd-footer-text); border-top: 1px solid var(--kd-line); }
.kd-alt a { color: var(--kd-footer-text) !important; }
.kd-alt a:hover { color: var(--kd-accent) !important; }
.kd-alt-bulten { border-bottom: 1px solid var(--kd-line); }
.kd-alt-bulten .kd-kap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; padding-block: 28px; }
.kd-alt-bulten h2 { font-size: 22px; color: var(--kd-text); }
.kd-alt-bulten p { color: var(--kd-muted); font-size: 14px; margin-top: 4px; }
.kd-alt-ana { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; padding-block: 40px; }
.kd-alt-marka { display: grid; gap: 14px; align-content: start; }
.kd-logo-alt { color: var(--kd-text) !important; }
.kd-alt-marka p { font-size: 13.5px; color: var(--kd-muted); max-width: 40ch; }
.kd-alt-iletisim { display: grid; gap: 8px; font-size: 13.5px; }
.kd-alt-iletisim li { display: flex; align-items: flex-start; gap: 8px; }
.kd-sosyal { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-sosyal a { padding: 6px 12px; border: 1px solid var(--kd-line); border-radius: 99px; font-size: 12.5px; font-weight: 600; }
.kd-alt-sutun h3 { font-size: 14px; font-weight: 800; margin-bottom: 14px; color: var(--kd-text); }
.kd-alt-sutun ul { display: grid; gap: 9px; font-size: 13.5px; }
.kd-alt-etiket { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 24px; font-size: 13px; }
.kd-alt-etiket span { font-weight: 700; color: var(--kd-text); }
.kd-alt-etiket a { padding: 4px 10px; border: 1px solid var(--kd-line); border-radius: 99px; }
.kd-alt-son { border-top: 1px solid var(--kd-line); font-size: 13px; }
.kd-alt-son .kd-kap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 16px; }
.kd-alt-guven { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Kırıntı, sayfalama, boş durum ---------- */
.kd-kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--kd-muted); }
.kd-kirinti span { opacity: .5; }
.kd-kirinti b { color: var(--kd-text); font-weight: 600; }
.kd-sayfalama { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.kd-sayfalama a, .kd-sayfalama b { min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 10px; border-radius: var(--kd-kose-k); border: 1px solid var(--kd-line); background: var(--kd-surface); font-weight: 700; }
.kd-sayfalama b { background: var(--kd-text); color: var(--kd-surface); border-color: var(--kd-text); }
.kd-bos-durum { display: grid; justify-items: center; text-align: center; gap: 14px; padding-block: clamp(32px, 6vw, 72px); }
.kd-bos-durum h1 { font-size: clamp(24px, 3vw, 34px); }
.kd-bos-durum p { color: var(--kd-muted); max-width: 52ch; }
.kd-404-kod { font: 800 clamp(72px, 12vw, 140px)/1 var(--kd-font-baslik); color: var(--kd-accent); letter-spacing: -.04em; }

/* ---------- Bildirimler ve çerez ---------- */
.kd-bildirimler { position: fixed; top: 16px; right: 16px; z-index: 3000; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.kd-bildirim { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 14px 14px 16px; border-radius: 12px; background: var(--kd-text); color: var(--kd-surface); box-shadow: var(--kd-golge); border-left: 4px solid var(--kd-accent); animation: kdBelir .25s ease; transition: opacity .3s, transform .3s; }
.kd-bildirim.cikis { opacity: 0; transform: translateX(10px); }
.kd-bildirim--success { border-left-color: #22C55E; }
.kd-bildirim--error { border-left-color: #EF4444; }
.kd-bildirim--warning { border-left-color: #F59E0B; }
.kd-bildirim b { grid-column: 1; font-size: 14px; }
.kd-bildirim span { grid-column: 1; font-size: 14px; }
.kd-bildirim button { grid-column: 2; grid-row: 1 / span 2; align-self: start; background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
.kd-cerez { position: fixed; left: 16px; bottom: 16px; z-index: 1500; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px; background: var(--kd-text); color: var(--kd-surface); box-shadow: var(--kd-golge); font-size: 13.5px; }
.kd-cerez a { text-decoration: underline !important; color: inherit !important; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1080px) {
  .kd-alt-ana { grid-template-columns: repeat(2, 1fr); }
  .kd-alt-marka { grid-column: 1 / -1; }
  .kd-karolar { grid-template-columns: repeat(min(var(--kd-karo-sayi, 6), 4), minmax(0, 1fr)); }
  .kd-kaydir { grid-auto-columns: minmax(200px, calc((100% - 3 * 16px) / 3.4)); }
  .kd-eylem span { display: none; }
}
@media (max-width: 860px) {
  .kd-ustserit-link a:not(:first-child) { display: none; }
  .kd-mobil { display: inline-grid; }
  .kd-ust-ana { grid-template-columns: auto 1fr auto; min-height: 64px; }
  .kd-ust-ana > .kd-ara { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-bottom: 10px; }
  .kd-ust-ana .kd-logo { justify-self: center; font-size: 21px; }
  .kd-logo img { max-height: 38px; }
  .kd-menu { display: none; }
  .kd-eylem-dar, .kd-zil { display: none; }
  .kd-hero-ray { aspect-ratio: 4 / 4.2; min-height: 0; }
  .kd-slayt::after { background: linear-gradient(0deg, rgba(10, 14, 25, .7), rgba(10, 14, 25, .1) 65%); }
  .kd-slayt-ok { display: none; }
  .kd-avantajlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-avantaj { padding: 12px; gap: 10px; }
  .kd-karolar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kd-bannerlar-2, .kd-bannerlar-3 { grid-template-columns: 1fr; }
  .kd-editoryal, .kd-bulten, .kd-alt-bulten .kd-kap { grid-template-columns: 1fr; }
  .kd-editoryal-sag .kd-editoryal-gorsel { order: 0; }
  .kd-kaydir { grid-auto-columns: 46%; gap: 10px; }
  .kd-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kd-kart-govde { padding: 10px; }
  .kd-kart-fiyat b { font-size: 16px; }
  .kd-bolum-bas { align-items: flex-start; flex-direction: column; gap: 8px; }
  .kd-alt-ana { gap: 22px; }
}
@media (max-width: 480px) {
  .kd-ustserit { display: none; }
  .kd-alt-ana { grid-template-columns: 1fr 1fr; }
  .kd-bulten-form { flex-direction: column; }
}

/* ---------- Ürün listesi (kategori, arama) ---------- */
.kd-liste-bas { display: grid; gap: 12px; }
.kd-liste-baslik { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kd-liste-baslik h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.kd-liste-baslik span { color: var(--kd-muted); font-size: 14px; }
.kd-not { color: var(--kd-uyari); font-size: 14px; }
.kd-cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kd-cipler::-webkit-scrollbar { display: none; }
.kd-cip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--kd-line); border-radius: 99px; background: var(--kd-surface); font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--kd-text) !important; }
.kd-cip:hover, .kd-cip.secili { border-color: var(--kd-text); }
.kd-cip.secili { background: var(--kd-text); color: var(--kd-surface) !important; }
.kd-cip-kaldir { height: 32px; background: color-mix(in srgb, var(--kd-accent) 8%, var(--kd-surface)); border-color: color-mix(in srgb, var(--kd-accent) 30%, var(--kd-line)); }
.kd-liste { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.kd-filtre { position: sticky; top: 150px; display: grid; gap: 4px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); padding: 6px 16px 14px; max-height: calc(100vh - 170px); overflow-y: auto; }
.kd-filtre-ust { display: none; }
.kd-filtre-grup { border: 0; border-bottom: 1px solid var(--kd-line); margin: 0; padding: 14px 0; }
.kd-filtre-grup:last-of-type { border-bottom: 0; }
.kd-filtre-grup legend { float: left; width: 100%; font-weight: 700; font-size: 14px; margin-bottom: 10px; padding: 0; }
.kd-filtre-liste { clear: both; display: grid; gap: 4px; max-height: 230px; overflow-y: auto; }
.kd-onay { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.kd-onay input { width: 18px; height: 18px; accent-color: var(--kd-accent); margin: 0; }
.kd-onay small { color: var(--kd-muted); font-size: 12px; }
.kd-filtre-kutucuk { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-secenek input { position: absolute; opacity: 0; pointer-events: none; }
.kd-secenek span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--kd-line); border-radius: 8px; font-size: 13px; cursor: pointer; background: var(--kd-surface); }
.kd-secenek input:checked + span { border-color: var(--kd-text); background: var(--kd-text); color: var(--kd-surface); }
.kd-secenek input:focus-visible + span { outline: 2px solid var(--kd-accent); outline-offset: 2px; }
.kd-fiyat-aralik { clear: both; display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.kd-fiyat-aralik .kd-girdi { min-height: 40px; padding: 8px 10px; }
.kd-fiyat-aralik .kd-btn { grid-column: 1 / -1; }
.kd-arac { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.kd-aktif-filtre { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.kd-temizle { font-size: 13px; font-weight: 700; color: var(--kd-accent) !important; }
.kd-sirala { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--kd-muted); margin-left: auto; }
.kd-sirala .kd-girdi { min-height: 40px; width: auto; padding: 6px 34px 6px 12px; }
.kd-filtre-ac { display: none; }
.kd-liste-izgara { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.kd-icerik-metin { color: var(--kd-muted); font-size: 14.5px; line-height: 1.7; }
.kd-icerik-metin h2, .kd-icerik-metin h3 { color: var(--kd-text); margin: 1.2em 0 .5em; }
.kd-icerik-metin p { margin: 0 0 1em; }
.kd-icerik-metin a { color: var(--kd-accent); text-decoration: underline; }
.kd-icerik-metin ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
@media (max-width: 960px) {
  .kd-liste { grid-template-columns: 1fr; }
  .kd-filtre { position: fixed; inset: 0 0 0 auto; z-index: 2100; width: min(92vw, 380px); max-height: none; border-radius: 0; transform: translateX(105%); transition: transform .25s; box-shadow: var(--kd-golge); align-content: start; }
  .kd-filtre.acik { transform: none; }
  .kd-filtre-ust { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--kd-line); }
  .kd-filtre-ac { display: inline-flex; }
  .kd-sirala span { display: none; }
}

/* ---------- Genel düzeltmeler ve ortak bileşen uyumu ---------- */
.kd [hidden] { display: none !important; }
.kd-filtre-grup legend { float: none; display: block; }
.kd-filtre-liste, .kd-fiyat-aralik { clear: none; }
@media (max-width: 860px) { .kd-liste-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Bildirim zili (func/musterihizmetleri.php): temanın üst bölüm düğmeleriyle aynı görünüm */
.kd .bph-bell { width: 42px; height: 42px; border: 0; background: transparent; border-radius: 50%; color: var(--kd-header-text); font-size: 20px; }
.kd .bph-bell:hover, .kd .bph-bell-wrap.open .bph-bell { background: color-mix(in srgb, var(--kd-header-text) 8%, transparent); color: var(--kd-header-text); border: 0; }
.kd .bph-bell-c { background: var(--kd-accent); }


/* ---------- Ürün detay ---------- */
.kd-urun-ust { margin-top: clamp(14px, 2vw, 22px); }
.kd-urun { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.kd-galeri { position: sticky; top: 150px; display: grid; gap: 12px; }
.kd-galeri-ana { position: relative; aspect-ratio: 1 / 1; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); overflow: hidden; }
.kd-galeri-ana img { width: 100%; height: 100%; object-fit: contain; }
.kd-galeri-rozet { position: absolute; top: 14px; left: 14px; z-index: 2; height: 28px; font-size: 13px; }
.kd-galeri-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--kd-line); background: color-mix(in srgb, var(--kd-surface) 92%, transparent); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s; }
.kd-galeri-ana:hover .kd-galeri-ok { opacity: 1; }
.kd-galeri-geri { left: 12px; }
.kd-galeri-ileri { right: 12px; }
.kd-galeri-kucuk { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kd-galeri-kucuk button { flex: none; width: 76px; height: 76px; padding: 0; border: 1.5px solid var(--kd-line); border-radius: var(--kd-kose-k); background: var(--kd-surface); overflow: hidden; cursor: pointer; }
.kd-galeri-kucuk button[aria-selected="true"] { border-color: var(--kd-text); }
.kd-galeri-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.kd-urun-bilgi { display: grid; gap: 16px; }
.kd-urun-marka { font-weight: 700; font-size: 14px; color: var(--kd-accent) !important; letter-spacing: .02em; }
.kd-urun-ad { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.kd-urun-puan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.kd-urun-puan a { display: inline-flex; align-items: center; gap: 6px; }
.kd-urun-puan a span { color: var(--kd-muted); text-decoration: underline; }
.kd-soluk { color: var(--kd-muted); font-size: 13.5px; }
.kd-yildizlar { display: inline-flex; gap: 1px; color: color-mix(in srgb, var(--kd-text) 18%, transparent); }
.kd-yildizlar i { display: inline-flex; font-style: normal; }
.kd-yildizlar i.dolu, .kd-yildizlar i.yarim { color: #F5A524; }
.kd-yildizlar i.dolu svg { fill: #F5A524; }
.kd-urun-fiyat { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--kd-kose); background: var(--kd-zemin-2); }
.kd-urun-fiyat-eski { display: flex; align-items: center; gap: 10px; color: var(--kd-muted); }
.kd-urun-fiyat > b { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kd-urun-havale { font-size: 13.5px; color: var(--kd-muted); }
.kd-urun-havale b { color: var(--kd-iyi); }
.kd-urun-firsat { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-urun-firsat span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: color-mix(in srgb, var(--kd-iyi) 10%, var(--kd-surface)); color: var(--kd-iyi); font-weight: 700; font-size: 13px; }
.kd-urun-kisa { color: var(--kd-muted); }
.kd-urun-form { display: grid; gap: 16px; }
.kd-varyant { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.kd-varyant legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 8px; }
.kd-varyant legend b { font-weight: 500; color: var(--kd-muted); }
.kd-varyant.eksik legend { color: var(--kd-hata); }
.kd-varyant-kutular { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-varyant .kd-secenek span { min-height: 42px; padding: 0 16px; font-size: 14px; gap: 6px; }
.kd-varyant .kd-secenek small { color: inherit; opacity: .7; }
.kd-secenek.yok span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.kd-urun-eylem { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; }
.kd-urun-eylem > .kd-btn:only-of-type { grid-column: span 2; }
.kd-kare-btn { width: 52px; height: 52px; display: grid; place-items: center; border: 1.5px solid var(--kd-line); border-radius: var(--kd-kose-k); background: var(--kd-surface); }
.kd-kare-btn:hover { border-color: var(--kd-accent); color: var(--kd-accent); }
.kd-urun-guven { display: grid; border: 1px solid var(--kd-line); border-radius: var(--kd-kose); background: var(--kd-surface); }
.kd-urun-guven li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; border-top: 1px solid var(--kd-line); }
.kd-urun-guven li:first-child { border-top: 0; }
.kd-urun-guven svg { color: var(--kd-accent); }
.kd-urun-guven a, .kd-yazi-btn { text-decoration: underline; }
.kd-yazi-btn { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.kd-sekme-basliklar { display: flex; gap: 4px; border-bottom: 1px solid var(--kd-line); overflow-x: auto; scrollbar-width: none; }
.kd-sekme-basliklar button { flex: none; padding: 14px 18px; border: 0; border-bottom: 2.5px solid transparent; background: none; font-weight: 700; font-size: 14.5px; color: var(--kd-muted); cursor: pointer; margin-bottom: -1px; }
.kd-sekme-basliklar button[aria-selected="true"] { color: var(--kd-text); border-bottom-color: var(--kd-accent); }
.kd-sekme-basliklar em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--kd-zemin-2); margin-left: 4px; }
.kd-sekme { padding: 24px 0 8px; }
.kd-video { margin-top: 20px; aspect-ratio: 16 / 9; max-width: 820px; border-radius: var(--kd-kose); overflow: hidden; background: #000; }
.kd-video iframe { width: 100%; height: 100%; border: 0; }
.kd-ozellik-tablo { margin: 0; max-width: 720px; border: 1px solid var(--kd-line); border-radius: var(--kd-kose); overflow: hidden; }
.kd-ozellik-tablo div { display: grid; grid-template-columns: 40% 1fr; }
.kd-ozellik-tablo div:nth-child(even) { background: var(--kd-zemin-2); }
.kd-ozellik-tablo dt, .kd-ozellik-tablo dd { margin: 0; padding: 12px 16px; font-size: 14px; }
.kd-ozellik-tablo dt { font-weight: 700; border-right: 1px solid var(--kd-line); }
.kd-yorum-ozet { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; padding: 20px; border: 1px solid var(--kd-line); border-radius: var(--kd-kose); background: var(--kd-surface); margin-bottom: 20px; }
.kd-yorum-puan { display: grid; justify-items: center; gap: 6px; text-align: center; }
.kd-yorum-puan > b { font-size: 44px; line-height: 1; font-weight: 800; }
.kd-yorum-puan span { font-size: 13px; color: var(--kd-muted); }
.kd-yorum-dagilim { display: grid; gap: 6px; }
.kd-yorum-dagilim a { display: grid; grid-template-columns: 64px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.kd-yorum-dagilim a.secili span { font-weight: 800; }
.kd-yorum-dagilim i { height: 8px; border-radius: 99px; background: var(--kd-zemin-2); overflow: hidden; }
.kd-yorum-dagilim i b { display: block; height: 100%; background: #F5A524; border-radius: 99px; }
.kd-yorum-dagilim small { color: var(--kd-muted); text-align: right; }
.kd-yorum-form { display: grid; gap: 10px; }
.kd-yildiz-sec { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.kd-yildiz-sec legend { width: 100%; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.kd-yildiz-sec input { position: absolute; opacity: 0; }
.kd-yildiz-sec label { cursor: pointer; color: color-mix(in srgb, var(--kd-text) 20%, transparent); }
.kd-yildiz-sec input:checked ~ label, .kd-yildiz-sec label:hover, .kd-yildiz-sec label:hover ~ label { color: #F5A524; }
.kd-yildiz-sec input:checked ~ label svg, .kd-yildiz-sec label:hover svg, .kd-yildiz-sec label:hover ~ label svg { fill: #F5A524; }
.kd-yildiz-sec input:focus-visible + label { outline: 2px solid var(--kd-accent); }
.kd-yorumlar { display: grid; gap: 12px; }
.kd-yorum { padding: 16px 18px; border: 1px solid var(--kd-line); border-radius: var(--kd-kose); background: var(--kd-surface); display: grid; gap: 10px; }
.kd-yorum header { display: flex; align-items: center; gap: 10px; }
.kd-yorum header div { display: grid; flex: 1; }
.kd-yorum header small { color: var(--kd-muted); font-size: 12.5px; }
.kd-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--kd-accent) 12%, var(--kd-surface)); color: var(--kd-accent); font-weight: 800; }
.kd-yorum-gorsel { display: flex; gap: 8px; flex-wrap: wrap; }
.kd-yorum-gorsel img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.kd-yorum-cevap { padding: 12px 14px; border-radius: 10px; background: var(--kd-zemin-2); font-size: 14px; }
.kd-soru-bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; color: var(--kd-muted); }
.kd-soru { padding: 14px 0; border-bottom: 1px solid var(--kd-line); display: grid; gap: 8px; }
.kd-soru b { display: inline-block; min-width: 54px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--kd-muted); }
.kd-soru-c { padding-left: 14px; border-left: 3px solid var(--kd-accent); }
.kd-dialog { border: 0; border-radius: var(--kd-kose); padding: 26px; width: min(440px, calc(100vw - 32px)); background: var(--kd-surface); color: var(--kd-text); box-shadow: var(--kd-golge); }
.kd-dialog::backdrop { background: rgba(10, 14, 25, .55); }
.kd-dialog h2 { font-size: 20px; margin-bottom: 16px; padding-right: 30px; }
.kd-dialog-kapat { position: absolute; top: 12px; right: 12px; }
.kd-dialog-kapat button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--kd-zemin-2); display: grid; place-items: center; cursor: pointer; }
.kd-alarm-form { display: grid; gap: 12px; }
.kd-alarm-sonuc.iyi { color: var(--kd-iyi); font-weight: 600; }
.kd-alarm-sonuc.kotu { color: var(--kd-hata); font-weight: 600; }
@media (max-width: 960px) {
  .kd-urun { grid-template-columns: 1fr; }
  .kd-galeri { position: static; }
  .kd-yorum-ozet { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kd-urun-eylem { grid-template-columns: 1fr auto auto; }
  .kd-urun-eylem .kd-btn-koyu { grid-column: 1 / -1; order: 3; }
  .kd-galeri-ok { opacity: 1; }
}


/* ---------- Sistem sayfaları (vitrin/sayfalar): kendi stillerini taşırlar; ızgara ve form için küçük uyum ---------- */
.kd-sistem { padding-block: clamp(16px, 2.5vw, 28px); }
.kd-sistem .container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; }
.kd-sistem .row { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.kd-sistem .row > [class*="col-"] { padding-inline: 10px; width: 100%; min-width: 0; }
@media (min-width: 992px) {
  .kd-sistem .col-lg-3 { width: 25%; } .kd-sistem .col-lg-4 { width: 33.333%; } .kd-sistem .col-lg-5 { width: 41.666%; }
  .kd-sistem .col-lg-6 { width: 50%; } .kd-sistem .col-lg-8 { width: 66.666%; } .kd-sistem .col-lg-9 { width: 75%; }
}
@media (min-width: 768px) { .kd-sistem .col-md-6 { width: 50%; } .kd-sistem .col-md-4 { width: 33.333%; } }
.kd-sistem .form-group { display: grid; gap: 6px; margin-bottom: 14px; }
.kd-sistem .form-group label { font-weight: 600; font-size: 13.5px; }
.kd-sistem .form-control, .kd-sistem .form-input, .kd-sistem .form-select, .kd-sistem .form-textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--kd-line); border-radius: var(--kd-kose-k);
  background: var(--kd-surface); color: var(--kd-text); font: inherit; }
.kd-sistem textarea.form-control, .kd-sistem .form-textarea { min-height: 110px; }
.kd-sistem .form-control:focus, .kd-sistem .form-input:focus, .kd-sistem .form-select:focus, .kd-sistem .form-textarea:focus {
  outline: none; border-color: var(--kd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kd-accent) 18%, transparent); }
.kd-sistem .mx-auto { margin-inline: auto; }
.kd-sistem .text-center { text-align: center; }
.kd-sistem .fl { float: left; } .kd-sistem .fr { float: right; } .kd-sistem .clearfix::after { content: ''; display: table; clear: both; }
.kd-sistem .d-flex { display: flex; } .kd-sistem .d-block { display: block; } .kd-sistem .d-none { display: none; }
.kd-sistem .w-100 { width: 100%; }
.kd-sistem .badge { display: inline-flex; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--kd-zemin-2); }
.kd-sistem img { max-width: 100%; height: auto; }
:where(.kd-sistem) a { color: inherit; }

/* Tam ekran tasarlanmış eski sayfalar artık site üst bölümüyle görünür: kendi logo/geri/telif öğeleri gizli */
.kd-sistem .bp-auth-logo, .kd-sistem .bp-auth-back, .kd-sistem .bp-auth-footer,
.kd-sistem-siparissorgulama .logo, .kd-sistem-siparissorgulama .back-btn, .kd-sistem-siparissorgulama .siparis-footer,
.kd-sistem-sifremiunuttum .logo, .kd-sistem-sifremiunuttum .back-btn, .kd-sistem-sifremiunuttum .forgot-footer { display: none !important; }
.kd-sistem .bp-auth-page, .kd-sistem-siparissorgulama .sorgulama-wrapper, .kd-sistem-sifremiunuttum .forgot-wrapper { min-height: 0 !important; background: transparent !important; }


/* ---------- İçerik sayfaları ---------- */
.kd-sayfa-bas { display: grid; gap: 6px; margin: 14px 0 22px; }
.kd-sayfa-bas h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
.kd-sayfa-bas p { color: var(--kd-muted); max-width: 64ch; }
.kd-icerik-sayfa { display: grid; gap: 18px; }
.kd-icerik-duzen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.kd-icerik-duzen.tek { grid-template-columns: minmax(0, 860px); justify-content: center; }
.kd-yan-menu { position: sticky; top: 150px; display: grid; gap: 2px; padding: 14px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); }
.kd-yan-menu b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--kd-muted); padding: 4px 10px 8px; }
.kd-yan-menu a { padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.kd-yan-menu a:hover { background: var(--kd-zemin-2); }
.kd-yan-menu a[aria-current] { background: var(--kd-text); color: var(--kd-surface) !important; }
.kd-makale { display: grid; gap: 18px; }
.kd-makale h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.kd-makale header small { color: var(--kd-muted); }
.kd-makale-gorsel { width: 100%; border-radius: var(--kd-kose); }
.kd-makale-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kd-makale-galeri img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.kd-makale .kd-icerik-metin { color: var(--kd-text); font-size: 15.5px; }
.kd-sss { max-width: 900px; display: grid; gap: 14px; }
.kd-sss-ara { max-width: 480px; }
.kd-sss-liste { display: grid; gap: 10px; }
.kd-sss-madde { background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); }
.kd-sss-madde summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.kd-sss-madde summary::-webkit-details-marker { display: none; }
.kd-sss-madde[open] summary svg { transform: rotate(180deg); }
.kd-sss-madde .kd-icerik-metin { padding: 0 18px 16px; }
.kd-sss-destek { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.kd-sss-destek p { color: var(--kd-muted); }
.kd-iletisim-duzen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.kd-iletisim-bilgi { display: grid; gap: 12px; }
.kd-iletisim-kart { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.kd-iletisim-kart svg { color: var(--kd-accent); }
.kd-iletisim-kart span { display: grid; }
.kd-iletisim-kart small { color: var(--kd-muted); font-size: 12.5px; }
.kd-form { display: grid; gap: 14px; }
.kd-form h2 { font-size: 20px; }
.kd-form-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kd-alan > span { font-size: 13.5px; font-weight: 600; }
.kd-captcha { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.kd-captcha img { border-radius: 8px; border: 1px solid var(--kd-line); }
.kd-captcha .kd-alan { flex: 1; min-width: 160px; }
.kd-harita { border-radius: var(--kd-kose); overflow: hidden; aspect-ratio: 16 / 5; min-height: 260px; margin-top: 24px; }
.kd-harita iframe { width: 100%; height: 100%; border: 0; }
.kd-icerik-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.kd-icerik-kart { display: grid; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); overflow: hidden; transition: box-shadow .2s; }
.kd-icerik-kart:hover { box-shadow: var(--kd-golge); }
.kd-icerik-kart-gorsel { aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--kd-accent) 8%, var(--kd-surface)); display: grid; place-items: center; overflow: hidden; }
.kd-icerik-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kd-icerik-kart-gorsel i { font: 800 46px/1 var(--kd-font-baslik); color: var(--kd-accent); font-style: normal; }
.kd-icerik-kart-metin { display: grid; gap: 6px; padding: 16px 18px 18px; }
.kd-icerik-kart-metin small { color: var(--kd-accent); font-weight: 700; font-size: 12.5px; }
.kd-icerik-kart-metin b { font-size: 17px; line-height: 1.3; }
.kd-icerik-kart-metin span { color: var(--kd-muted); font-size: 14px; }
.kd-banka-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.kd-banka-kart header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kd-banka-kart header img { height: 34px; width: auto; }
.kd-banka-kart header b { font-size: 17px; }
.kd-banka-kart dl { margin: 0; display: grid; gap: 8px; }
.kd-banka-kart dl div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 14px; }
.kd-banka-kart dt { color: var(--kd-muted); }
.kd-banka-kart dd { margin: 0; font-weight: 600; }
.kd-iban { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .kd-icerik-duzen, .kd-iletisim-duzen, .kd-form-iki { grid-template-columns: 1fr; }
  .kd-yan-menu { position: static; display: flex; overflow-x: auto; }
  .kd-yan-menu b { display: none; }
  .kd-yan-menu a { white-space: nowrap; }
}

/* ---------- Kolay iade ---------- */
.kd-iade { display: grid; gap: 14px; max-width: 920px; }
.kd-iade-baslik { font-size: 19px; margin-top: 8px; }
.kd-uyari { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--kd-kose-k); font-size: 14px; }
.kd-uyari-iyi { background: color-mix(in srgb, var(--kd-iyi) 12%, var(--kd-surface)); color: var(--kd-iyi); }
.kd-uyari-hata { background: color-mix(in srgb, var(--kd-hata) 10%, var(--kd-surface)); color: var(--kd-hata); }
.kd-iade-giris { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.kd-iade-giris p { color: var(--kd-muted); margin-top: 4px; font-size: 14px; }
.kd-iade-giris a:not(.kd-btn) { text-decoration: underline; }
.kd-iade-misafir { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 20px; }
.kd-iade-dogrula { display: grid; gap: 10px; }
.kd-iade-dogrula .kd-btn { justify-self: start; }
@media (max-width: 760px) { .kd-iade-misafir { grid-template-columns: 1fr; } }
.kd-iade-form { display: grid; gap: 14px; }
.kd-iade-form h2 { font-size: 20px; }
.kd-iade-urun { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--kd-kose-k); background: var(--kd-zemin-2); }
.kd-iade-urun small { color: var(--kd-muted); }
.kd-iade-liste { display: grid; gap: 10px; }
.kd-iade-satir { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; }
.kd-iade-satir > div { display: grid; gap: 2px; min-width: 0; }
.kd-iade-satir small { color: var(--kd-muted); font-size: 13px; }
.kd-iade-gorsel { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--kd-zemin-2); }
.kd-iade-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kd-iade-talep { display: grid; gap: 6px; padding: 14px 16px; }
.kd-iade-talep header { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.kd-iade-talep small { color: var(--kd-muted); font-size: 13px; }
.kd-iade-talep p { font-size: 14px; }
.kd-iade-durum { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--kd-zemin-2); }
.kd-iade-bekle { background: color-mix(in srgb, var(--kd-uyari) 14%, var(--kd-surface)); color: var(--kd-uyari); }
.kd-iade-onay { background: color-mix(in srgb, #2563EB 12%, var(--kd-surface)); color: #1D4ED8; }
.kd-iade-red { background: color-mix(in srgb, var(--kd-hata) 10%, var(--kd-surface)); color: var(--kd-hata); }
.kd-iade-tamam { background: color-mix(in srgb, var(--kd-iyi) 12%, var(--kd-surface)); color: var(--kd-iyi); }
.kd-iade-yanit { padding: 10px 12px; border-radius: var(--kd-kose-k); background: var(--kd-zemin-2); font-size: 14px; }
.kd-iade-kosul summary { display: flex; justify-content: space-between; align-items: center; font-weight: 700; cursor: pointer; list-style: none; }
.kd-iade-kosul summary::-webkit-details-marker { display: none; }
.kd-iade-kosul[open] summary { margin-bottom: 12px; }
@media (max-width: 560px) { .kd-iade-satir { grid-template-columns: 48px minmax(0, 1fr); } .kd-iade-satir > :last-child { grid-column: 1 / -1; justify-self: start; } }

/* Bayi (B2B): bayi fiyatı rozeti, kapalı katalogda bayi girişi bağlantısı, bayi sayfaları (func/bayi.php) */
.kd-kart-bayi { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #1d4ed8; background: #dbeafe; padding: 2px 7px; border-radius: 999px; }
.kd-kart-bayi-giris { font-size: 13px; font-weight: 700; color: var(--kd-accent); text-decoration: underline; text-underline-offset: 3px; }
.kd-urun-bayi { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: #1d4ed8; }
.kd-urun-bayi-giris { display: inline-block; padding: 12px 16px; border: 1px dashed var(--kd-accent); border-radius: var(--kd-kose-k, 8px); font-weight: 700; color: var(--kd-accent); }
.kd-bayi { display: grid; gap: 20px; }
.kd-bayi-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kd-bayi-ozet > div { background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-kose); padding: 14px 16px; }
.kd-bayi-ozet span { display: block; font-size: 12.5px; color: var(--kd-muted); }
.kd-bayi-ozet b { display: block; margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
.kd-bayi-ozet .is-uyari b { color: var(--kd-hata); }
.kd-bayi-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.kd-bayi-tablo th, .kd-bayi-tablo td { padding: 10px 12px; border-bottom: 1px solid var(--kd-line); text-align: left; }
.kd-bayi-tablo th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--kd-muted); }
.kd-bayi-tablo td.sayi, .kd-bayi-tablo th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.kd-bayi-adim { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kd-bayi-adim > div { padding: 16px; border-radius: var(--kd-kose); background: var(--kd-zemin-2); }
.kd-bayi-adim b { display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .kd-bayi-tablo { font-size: 13px; } .kd-bayi-tablo th:nth-child(4), .kd-bayi-tablo td:nth-child(4) { display: none; } }
/* Çerez onayı (Google İzin Modu v2) */
.kd-cerez-btn { display: flex; gap: 8px; flex: none; }
.kd-cerez .kd-btn-cizgi { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--kd-surface) 45%, transparent); }
@media (max-width: 560px) { .kd-cerez { flex-direction: column; align-items: stretch; } .kd-cerez-btn > * { flex: 1; } }