/* ==========================================================================
   Yükser Mühendislik — tasarım sistemi
   --------------------------------------------------------------------------
   ÇAKIŞMA KURALI
   Bu dosya YALNIZCA `yk-` önekli sınıfları ve :root değişkenlerini tanımlar.
   Çıplak eleman seçicisi (body, h1, p ...) KULLANILMAZ.

   Sebep: geçiş aşamalı ilerliyor. Henüz yeniden yazılmamış sayfalar hâlâ eski
   temayı (style.css) kullanıyor. Buraya çıplak eleman kuralı yazılırsa o
   sayfaların gövdesi bozulur. Eski tema `yk-` sınıflarını tanımadığı için
   ikisi yan yana güvenle yaşar.

   --------------------------------------------------------------------------
   TASARIM İLKELERİ

   İlk sürüm jenerikti: her yerde 12px yarıçap, her kartta gölge, soğuk
   mavi-gri nötrler, kalın başlıklar ve her öğede turuncu. Bunlar 2020'lerin
   varsayılan görünümü. Yeni yön dört kurala dayanıyor:

   1. GÖLGE YOK. Hiyerarşi ton katmanlarıyla kurulur: canvas > surface >
      carbon. Gölge, derinlik yanılsamasıyla düşünülmemişliği gizler.
   2. SICAK NÖTRLER. Kağıt beyazı (#F1EFE9) soğuk gri yerine; tasarımı
      düşünülmüş gösteren en ucuz hamle.
   3. YARIÇAPTA UÇ KONTRASTI. Gövde 14px, buton 100px, görsel kapları 56px.
      Her şeyin aynı yarıçapta olması jenerikliğin imzası.
   4. RENK NADİR. Turuncu bir vurgu rengidir, dolgu rengi değil. Sayfada en
      fazla bir-iki yerde görünür; gerisi karbon ve kağıt.

   Görüntü başlıkları İNCE ağırlıkta (300). Kalın başlık herkesin yaptığı şey;
   ince ağırlık büyük puntoda mimari ve teknik bir his veriyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tasarım belirteçleri
   -------------------------------------------------------------------------- */
:root {
  /* Marka — turuncu KORUNDU ama artık nadir kullanılan gerçek bir vurgu */
  --yk-brand:      #E4731F;
  --yk-brand-600:  #C75E12;
  --yk-brand-700:  #A34D0D;
  --yk-brand-soft: #F6E3D2;

  /* Sıcak nötrler */
  --yk-canvas:     #F1EFE9;
  --yk-surface:    #FFFFFF;
  --yk-carbon:     #2A2521;
  --yk-onyx:       #14110E;
  --yk-ink:        #221E1A;
  --yk-body:       #5A534C;
  --yk-muted:      #8C857C;
  --yk-line:       #DFD9CE;
  --yk-line-dark:  #3A342E;

  --yk-success:    #2F7D4F;
  --yk-whatsapp:   #25D366;

  /* Aralık — 4px tabanlı */
  --yk-1: 4px;   --yk-2: 8px;   --yk-3: 12px;  --yk-4: 16px;
  --yk-5: 22px;  --yk-6: 28px;  --yk-8: 36px;  --yk-10: 48px;
  --yk-12: 60px; --yk-16: 76px; --yk-20: 96px; --yk-24: 120px;

  /* Yarıçap — uçlar arası kontrast */
  --yk-r-sm:    6px;
  --yk-r:       14px;
  --yk-r-nav:   18px;
  --yk-r-media: 56px;
  --yk-r-pill:  100px;

  /* GÖLGE BELİRTECİ YOK — bilinçli. Bkz. tasarım ilkeleri. */

  --yk-ease: cubic-bezier(.2, .7, .3, 1);
  --yk-fast: .18s;
  --yk-med:  .3s;

  --yk-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --yk-track: .01em;

  --yk-w:        1200px;
  --yk-w-narrow: 760px;
  --yk-measure:  62ch;
}

/* --------------------------------------------------------------------------
   2. Yerleşim
   -------------------------------------------------------------------------- */
.yk-container {
  width: 100%;
  max-width: var(--yk-w);
  margin-inline: auto;
  padding-inline: var(--yk-5);
  box-sizing: border-box;
}
.yk-container--narrow { max-width: var(--yk-w-narrow); }

.yk-section {
  padding-block: var(--yk-20);
  background: var(--yk-canvas);
  box-sizing: border-box;
}
.yk-section--tight  { padding-block: var(--yk-12); }
.yk-section--paper  { background: var(--yk-surface); }
.yk-section--carbon { background: var(--yk-onyx); }

.yk-grid {
  display: grid;
  gap: var(--yk-6);
  grid-template-columns: repeat(auto-fill, minmax(var(--yk-col, 300px), 1fr));
}
.yk-grid--2 { --yk-col: 440px; }
.yk-grid--4 { --yk-col: 250px; }

/* --------------------------------------------------------------------------
   3. Tipografi
   -------------------------------------------------------------------------- */
.yk-display, .yk-h2, .yk-h3, .yk-h4 {
  font-family: var(--yk-font);
  color: var(--yk-ink);
  letter-spacing: var(--yk-track);
  margin: 0;
  text-wrap: balance;
}

/* İnce görüntü başlığı — sistemin imzası */
.yk-display {
  font-size: clamp(36px, 5.4vw, 66px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.005em;
}
.yk-h2 { font-size: clamp(26px, 3.1vw, 38px); font-weight: 400; line-height: 1.12; }
.yk-h3 { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.25; }
.yk-h4 { font-size: 16px; font-weight: 500; line-height: 1.3; }

.yk-lead {
  font-family: var(--yk-font);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--yk-track);
  color: var(--yk-body);
  max-width: var(--yk-measure);
  margin: 0;
}
.yk-text {
  font-family: var(--yk-font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: var(--yk-track);
  color: var(--yk-body);
  max-width: var(--yk-measure);
  margin: 0;
}
.yk-text--sm { font-size: 13.5px; }
.yk-muted { color: var(--yk-muted); }

/* Koyu yüzeylerde */
.yk-section--carbon .yk-display,
.yk-section--carbon .yk-h2,
.yk-section--carbon .yk-h3,
.yk-section--carbon .yk-h4 { color: #fff; }
.yk-section--carbon .yk-lead,
.yk-section--carbon .yk-text { color: rgba(255, 255, 255, .70); }

/* --------------------------------------------------------------------------
   4. Bölüm etiketi — hap rozet DEĞİL, dolu kare göstergeli metin
   --------------------------------------------------------------------------
   Hap şeklindeki renkli rozet her sitede var. Kare gösterge daha sessiz ve
   teknik; sistemin karakterini tek başına taşıyor.
   -------------------------------------------------------------------------- */
.yk-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--yk-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yk-muted);
}
.yk-label::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--yk-brand);
  flex: 0 0 5px;
}
.yk-section--carbon .yk-label { color: rgba(255, 255, 255, .55); }

.yk-head {
  display: flex;
  flex-direction: column;
  gap: var(--yk-4);
  margin-bottom: var(--yk-12);
  max-width: 760px;
}
.yk-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Butonlar — hap biçimi, gölgesiz, düz ton
   --------------------------------------------------------------------------
   Birincil buton KARBON, turuncu değil. Turuncu yalnızca sayfanın en önemli
   tek eylemi için (--accent). Böylece turuncu gerçekten dikkat çeker.
   -------------------------------------------------------------------------- */
.yk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yk-2);
  padding: 17px 26px;
  border: 1px solid transparent;
  border-radius: var(--yk-r-pill);
  font-family: var(--yk-font);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--yk-track);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--yk-fast) var(--yk-ease),
              border-color var(--yk-fast) var(--yk-ease),
              color var(--yk-fast) var(--yk-ease);
}
.yk-btn:hover { text-decoration: none; }

.yk-btn--primary { background: var(--yk-carbon); color: #fff; }
.yk-btn--primary:hover { background: var(--yk-onyx); color: #fff; }

.yk-btn--accent { background: var(--yk-brand); color: #fff; }
.yk-btn--accent:hover { background: var(--yk-brand-600); color: #fff; }

.yk-btn--ghost { background: transparent; border-color: var(--yk-carbon); color: var(--yk-carbon); }
.yk-btn--ghost:hover { background: var(--yk-carbon); color: #fff; }

.yk-btn--onDark { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.yk-btn--onDark:hover { background: rgba(255,255,255,.12); color: #fff; }

.yk-btn--sm { padding: 12px 20px; font-size: 13.5px; }
.yk-btn svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }

.yk-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--yk-font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--yk-ink);
  text-decoration: none;
  transition: gap var(--yk-fast) var(--yk-ease), color var(--yk-fast) var(--yk-ease);
}
.yk-link::after { content: "→"; font-size: 14px; }
.yk-link:hover { gap: 13px; color: var(--yk-brand-700); text-decoration: none; }

/* --------------------------------------------------------------------------
   6. Kart — gölgesiz, görsel kabı büyük yarıçaplı
   --------------------------------------------------------------------------
   Görsel kabında 56px yarıçap sistemin en görünür imzası: dikdörtgen
   fotoğraflar "yumuşak lomboz"a dönüşüyor.

   Başlık ve açıklama HER ZAMAN görünür. Eski temada metin görselin üzerinde
   gizliydi ve yalnızca fareyle üzerine gelince açılıyordu.
   -------------------------------------------------------------------------- */
.yk-card {
  display: flex;
  flex-direction: column;
  gap: var(--yk-4);
  text-decoration: none;
  background: transparent;
}
.yk-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--yk-r-media);
  background: var(--yk-line);
}
.yk-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--yk-ease);
}
.yk-card:hover .yk-card__media img { transform: scale(1.05); }

.yk-card__body { display: flex; flex-direction: column; gap: var(--yk-2); }
.yk-card__title { color: var(--yk-ink); transition: color var(--yk-fast) var(--yk-ease); }
.yk-card:hover .yk-card__title { color: var(--yk-brand-700); }
.yk-card__foot {
  margin-top: var(--yk-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yk-3);
}

.yk-card__tag {
  position: absolute;
  left: var(--yk-4); top: var(--yk-4);
  padding: 7px 14px;
  border-radius: var(--yk-r-pill);
  background: rgba(20, 17, 14, .78);
  color: #fff;
  font-family: var(--yk-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Çerçeveli kart — liste sayfalarında ve yoğun ızgaralarda */
.yk-card--framed {
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  padding: var(--yk-5);
  gap: var(--yk-3);
}
.yk-card--framed .yk-card__media { border-radius: var(--yk-r); }

/* --------------------------------------------------------------------------
   7. Fiyat ve stok — e-ticaret için yer hazırlığı
   -------------------------------------------------------------------------- */
.yk-price { display: flex; align-items: baseline; gap: var(--yk-2); font-family: var(--yk-font); }
.yk-price__now { font-size: 19px; font-weight: 500; color: var(--yk-ink); letter-spacing: var(--yk-track); }
.yk-price__was { font-size: 13.5px; color: var(--yk-muted); text-decoration: line-through; }

.yk-stock {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--yk-font);
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--yk-success);
}
.yk-stock::before { content: ""; width: 5px; height: 5px; background: currentColor; }
.yk-stock--out { color: var(--yk-muted); }

/* --------------------------------------------------------------------------
   8. İstatistik şeridi — kutu değil, ince ayırıcılı sütunlar
   -------------------------------------------------------------------------- */
.yk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--yk-line);
}
.yk-stat {
  display: flex;
  flex-direction: column;
  gap: var(--yk-1);
  padding: var(--yk-6) var(--yk-5) var(--yk-6) 0;
  border-right: 1px solid var(--yk-line);
}
.yk-stat:last-child { border-right: 0; }
.yk-stat__num {
  font-family: var(--yk-font);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--yk-ink);
}
.yk-stat__label {
  font-family: var(--yk-font);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yk-muted);
}
.yk-stats--onDark { border-color: var(--yk-line-dark); }
.yk-stats--onDark .yk-stat { border-color: var(--yk-line-dark); }
.yk-stats--onDark .yk-stat__num { color: #fff; }
.yk-stats--onDark .yk-stat__label { color: rgba(255, 255, 255, .50); }

/* --------------------------------------------------------------------------
   9. Form
   -------------------------------------------------------------------------- */
.yk-field { display: flex; flex-direction: column; gap: 7px; }
.yk-field__label {
  font-family: var(--yk-font);
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--yk-muted);
}
.yk-input, .yk-select, .yk-textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r-pill);
  background: var(--yk-surface);
  font-family: var(--yk-font);
  font-size: 15px;
  letter-spacing: var(--yk-track);
  color: var(--yk-ink);
  box-sizing: border-box;
  transition: border-color var(--yk-fast) var(--yk-ease);
}
.yk-textarea { border-radius: var(--yk-r); min-height: 120px; resize: vertical; }
.yk-input:focus, .yk-select:focus, .yk-textarea:focus {
  outline: none;
  border-color: var(--yk-carbon);
}

/* --------------------------------------------------------------------------
   10. Erişilebilirlik
   -------------------------------------------------------------------------- */
.yk-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.yk-btn:focus-visible, .yk-link:focus-visible, .yk-card:focus-visible,
.yk-input:focus-visible, .yk-select:focus-visible, .yk-textarea:focus-visible,
.yk-nav__link:focus-visible {
  outline: 2px solid var(--yk-brand);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .yk-btn, .yk-card, .yk-card__media img, .yk-link { transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   11. Site başlığı — yüzen koyu hap
   --------------------------------------------------------------------------
   Tam genişlik beyaz bir çubuk yerine, sayfanın üstünde yüzen koyu bir hap.
   Sistemin en belirgin yerleşim kararı.
   -------------------------------------------------------------------------- */
.yk-topbar {
  background: var(--yk-canvas);
  color: var(--yk-muted);
  font-family: var(--yk-font);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.yk-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yk-4); min-height: 38px;
}
.yk-topbar a { color: inherit; text-decoration: none; }
.yk-topbar a:hover { color: var(--yk-ink); }
.yk-topbar__meta { display: flex; align-items: center; gap: var(--yk-6); min-width: 0; }
.yk-topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.yk-topbar__item svg { width: 14px; height: 14px; fill: var(--yk-brand); flex: 0 0 14px; }

.yk-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--yk-canvas);
  padding-block: var(--yk-3);
}
/* Kapsul icerik izgarasiyla AYNI genislikte kaliyor (1200px). Genisletmek
   denendi ve birakildi: ust cubuk ile breadcrumb 1200'e hizaliyken kapsulun
   100px disari tasmasi daha kotu duruyordu.
   Yer sikintisi kapsulun kendi iclerinden cozuldu: bosluk 22 -> 8, logo 38 ->
   34, menu dolgusu 14 -> 8. On ogeli menu (dokuz baslik + Magaza) logo, sepet
   ve teklif butonuyla birlikte boylece tek satira siginiyor. */
.yk-header__inner {
  display: flex; align-items: center; gap: var(--yk-2);
  min-height: 64px;
  padding: var(--yk-2) var(--yk-2) var(--yk-2) var(--yk-4);
  background: var(--yk-onyx);
  border-radius: var(--yk-r-pill);
  box-sizing: border-box;
}
.yk-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.yk-logo img { max-height: 34px; width: auto; display: block; }

.yk-nav { margin-left: auto; min-width: 0; }
.yk-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.yk-nav__item { position: relative; }
.yk-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  /* Dolgu 14 -> 8, punto 13.5 -> 13. Daha fazla kisilmamali: bu degerlerin
     altinda menu ogeleri birbirine yapisiyor ve tiklama alani daraliyor. */
  padding: 11px 8px;
  border-radius: var(--yk-r-pill);
  font-family: var(--yk-font);
  font-size: 12.5px; font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  white-space: nowrap;             /* öğe asla iki satıra bölünmez */
  transition: color var(--yk-fast) var(--yk-ease),
              background var(--yk-fast) var(--yk-ease);
}
.yk-nav__link:hover,
.yk-nav__item:focus-within > .yk-nav__link {
  color: #fff; background: rgba(255, 255, 255, .10); text-decoration: none;
}
.yk-nav__link--parent::after {
  content: ""; width: 4px; height: 4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .6; flex: 0 0 auto;
}

.yk-nav__sub {
  position: absolute; left: 0;
  /* SAYDAM KENARLIKLI BOŞLUK
     Önceden `top: calc(100% + 10px)` ile 10px boşluk bırakılmıştı. Fare o
     boşluğu geçerken ne bağlantının ne de menünün üzerindeydi, :hover
     kopuyor ve menü kapanıyordu.

     Şimdi kutu doğrudan li'nin altından başlıyor (top:100%) ve görsel
     boşluk 10px'lik SAYDAM ÜST KENARLIK ile yapılıyor. Kenarlık öğenin
     kendi kutusuna dahil olduğu için fare oradan geçerken :hover korunuyor.
     background-clip: padding-box, koyu zeminin kenarlığa taşmasını önler. */
  top: 100%;
  min-width: 236px; margin: 0; padding: var(--yk-2);
  list-style: none;
  background: var(--yk-onyx);
  background-clip: padding-box;
  border: 1px solid var(--yk-line-dark);
  border-top: 11px solid transparent;
  border-radius: var(--yk-r-nav);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  /* Kapanma gecikmeli: fare menüden bir an çıksa bile hemen kaybolmasın */
  transition: opacity var(--yk-fast) var(--yk-ease) .18s,
              transform var(--yk-fast) var(--yk-ease) .18s,
              visibility var(--yk-fast) .18s;
  /* overflow:hidden YOK — iç içe menü kırpılmasın */
}

.yk-nav__item:hover > .yk-nav__sub,
.yk-nav__item:focus-within > .yk-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;            /* açılış anında, kapanış gecikmeli */
}
.yk-nav__sub .yk-nav__link { display: flex; width: 100%; padding: 10px 14px; box-sizing: border-box; }
/* İkinci seviye sağa açılır; boşluğu yine saydam kenarlık yapar */
.yk-nav__sub .yk-nav__sub {
  left: 100%;
  top: calc(-1 * var(--yk-2));
  border-top: 1px solid var(--yk-line-dark);
  border-left: 8px solid transparent;
}

.yk-header__cta { flex: 0 0 auto; }
/* Basliktaki buton govdedeki --sm'den bir tik daha dar: kapsulde her piksel
   menuye lazim. */
.yk-header__cta .yk-btn { padding-inline: 16px; }
.yk-cartbtn { flex: 0 0 auto; }

.yk-burger {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}
.yk-burger span { display: block; width: 18px; height: 1.5px; background: #fff; position: relative; }
.yk-burger span::before, .yk-burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: #fff;
}
.yk-burger span::before { top: -6px; }
.yk-burger span::after  { top: 6px; }

/* Esik 1099 -> 1279: menu dokuz ogeye cikinca masaustu duzeni 1280'in
   altinda sigmiyor. Sigmadigi genislikte cekmeceye gecmek, tasan bir
   kapsul gostermekten iyi. */
@media (max-width: 1279px) {
  .yk-topbar__item--adres { display: none; }
  .yk-nav { display: none; }
  .yk-header__cta { display: none; }
  .yk-burger { display: inline-flex; margin-left: var(--yk-2); }
  .yk-header__inner { min-height: 58px; gap: var(--yk-3); padding-left: var(--yk-4); }
  /* Sepet burger'in solunda; otomatik bosluk sepete ait oluyor */
  .yk-cartbtn { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   12. Hero — tam kanama fotoğraf, metin sol altta
   -------------------------------------------------------------------------- */
.yk-hero {
  position: relative;
  display: flex;
  align-items: flex-end;               /* metin sol ALTTA */
  min-height: min(64vh, 560px);
  padding-block: var(--yk-16) var(--yk-12);
  background: var(--yk-onyx);
  overflow: hidden;
}
.yk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.yk-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg,
              rgba(20, 17, 14, .92) 0%,
              rgba(20, 17, 14, .58) 46%,
              rgba(20, 17, 14, .30) 100%);
}
.yk-hero__inner { position: relative; z-index: 2; width: 100%; }
.yk-hero__content { max-width: 700px; display: flex; flex-direction: column; gap: var(--yk-5); }
.yk-hero__title { color: #fff; }
.yk-hero__lead  { color: rgba(255, 255, 255, .74); }
.yk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--yk-3); margin-top: var(--yk-2); }
.yk-hero .yk-label { color: rgba(255, 255, 255, .62); }

/* Hero altındaki güven şeridi */
.yk-trustbar { background: var(--yk-onyx); padding-bottom: var(--yk-8); }

/* --------------------------------------------------------------------------
   13. Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --yk-r-media: 34px; }        /* küçük kartta 56px fazla agresif */
  .yk-section { padding-block: var(--yk-12); }
  .yk-section--tight { padding-block: var(--yk-10); }
  .yk-head { margin-bottom: var(--yk-8); }
  .yk-grid { --yk-col: 100%; gap: var(--yk-8); }
  .yk-container { padding-inline: var(--yk-4); }

  .yk-hero { min-height: auto; padding-block: var(--yk-12) var(--yk-10); }
  .yk-hero__actions { width: 100%; }
  .yk-hero__actions .yk-btn { flex: 1 1 100%; }
  .yk-hero::after {
    background: linear-gradient(0deg,
                rgba(20, 17, 14, .94) 0%,
                rgba(20, 17, 14, .70) 55%,
                rgba(20, 17, 14, .42) 100%);
  }

  /* İstatistikler mobilde iki sütun */
  .yk-stats { grid-template-columns: 1fr 1fr; }
  .yk-stat { padding-right: var(--yk-4); }
  .yk-stat:nth-child(2n) { border-right: 0; }
  .yk-stat:nth-child(n+3) { border-top: 1px solid var(--yk-line); }
  .yk-stats--onDark .yk-stat:nth-child(n+3) { border-top-color: var(--yk-line-dark); }
}

/* --------------------------------------------------------------------------
   14. Mobil çekmece
   --------------------------------------------------------------------------
   Eski tema Bootstrap collapse kullanıyordu ve düğmenin tıklama alanı
   ikondan 200px uzağa düşüyordu. Bu çekmece kendi küçük JS'iyle çalışır,
   Bootstrap'e bağlı değildir.
   -------------------------------------------------------------------------- */
.yk-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 1000;
  width: min(92vw, 400px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--yk-onyx);
  transform: translateX(100%);
  transition: transform var(--yk-med) var(--yk-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.yk-drawer[hidden] { display: flex; }         /* hidden yalnızca ilk yükte */
.yk-drawer.is-open { transform: translateX(0); }

.yk-drawer__veil {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(11, 9, 7, .55);
  opacity: 0;
  transition: opacity var(--yk-med) var(--yk-ease);
  backdrop-filter: blur(2px);
}
.yk-drawer__veil[hidden] { display: block; pointer-events: none; }
.yk-drawer__veil.is-open { opacity: 1; pointer-events: auto; }

.yk-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yk-4);
  padding: var(--yk-5);
  border-bottom: 1px solid var(--yk-line-dark);
}
.yk-drawer__head .yk-logo img { max-height: 34px; }
.yk-drawer__close {
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer;
}

.yk-drawer__nav { padding: var(--yk-4) var(--yk-3); flex: 1 1 auto; }
/* Çekmecede menü açılır kutu değil, girintili liste */
.yk-drawer .yk-nav__list,
.yk-drawer .yk-nav__sub {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: transparent;
  opacity: 1; visibility: visible; transform: none;
  list-style: none;
}
.yk-drawer .yk-nav__sub { padding-left: var(--yk-4); border-left: 1px solid var(--yk-line-dark); margin-left: var(--yk-3); }
.yk-drawer .yk-nav__link {
  display: flex;
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  border-radius: var(--yk-r-sm);
  box-sizing: border-box;
}
.yk-drawer .yk-nav__sub .yk-nav__link { font-size: 14px; padding: 10px 14px; color: rgba(255,255,255,.62); }
.yk-drawer .yk-nav__link--parent::after { margin-left: auto; }

.yk-drawer__foot {
  display: flex; flex-direction: column; gap: var(--yk-3);
  padding: var(--yk-5);
  border-top: 1px solid var(--yk-line-dark);
}
.yk-drawer__meta {
  color: rgba(255, 255, 255, .62);
  font-family: var(--yk-font);
  font-size: 14px;
  text-decoration: none;
}
.yk-drawer__meta:hover { color: #fff; }

/* Çekmece açıkken arka plan kaymasın */
.yk-noscroll { overflow: hidden; }

@media (min-width: 1100px) {
  .yk-drawer, .yk-drawer__veil { display: none !important; }
}

/* --------------------------------------------------------------------------
   15. Alt bilgi
   -------------------------------------------------------------------------- */
.yk-footer { background: var(--yk-onyx); color: rgba(255, 255, 255, .62); }
.yk-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--yk-10);
  padding-block: var(--yk-16) var(--yk-12);
}
.yk-footer__brand { display: flex; flex-direction: column; gap: var(--yk-4); }
.yk-footer__brand .yk-logo img { max-height: 44px; }
.yk-footer__brand .yk-text { color: rgba(255, 255, 255, .58); }

.yk-footer__title {
  font-family: var(--yk-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin: 0 0 var(--yk-5);
}
.yk-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--yk-3); }
.yk-footer__list a,
.yk-footer__list span {
  font-family: var(--yk-font);
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  transition: color var(--yk-fast) var(--yk-ease);
}
.yk-footer__list a:hover { color: #fff; text-decoration: none; }
.yk-footer__list--contact a { display: inline-block; }

.yk-social { display: flex; gap: var(--yk-2); margin-top: var(--yk-2); }
.yk-social__item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--yk-line-dark);
  border-radius: 50%;
  color: rgba(255, 255, 255, .70);
  text-decoration: none;
  transition: background var(--yk-fast) var(--yk-ease),
              border-color var(--yk-fast) var(--yk-ease),
              color var(--yk-fast) var(--yk-ease);
}
.yk-social__item:hover {
  background: var(--yk-brand); border-color: var(--yk-brand); color: #fff;
}

.yk-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yk-4); flex-wrap: wrap;
  padding-block: var(--yk-5);
  border-top: 1px solid var(--yk-line-dark);
  font-family: var(--yk-font);
  font-size: 13px;
  color: rgba(255, 255, 255, .42);
}
.yk-footer__bottom a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.yk-footer__bottom a:hover { color: #fff; }

@media (max-width: 991px) {
  .yk-footer__top { grid-template-columns: 1fr 1fr; gap: var(--yk-8); }
}
@media (max-width: 575px) {
  .yk-footer__top { grid-template-columns: 1fr; gap: var(--yk-8); padding-block: var(--yk-12) var(--yk-8); }
  .yk-footer__bottom { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   16. Yüzen butonlar
   -------------------------------------------------------------------------- */
.yk-whatsapp {
  position: fixed; right: 22px; bottom: 22px; z-index: 950;
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px;
  border-radius: var(--yk-r-pill);
  background: var(--yk-whatsapp);
  color: #fff;
  font-family: var(--yk-font);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none;
  transition: background var(--yk-fast) var(--yk-ease);
}
.yk-whatsapp:hover { background: #1EBE5A; color: #fff; text-decoration: none; }
.yk-whatsapp svg { width: 25px; height: 25px; flex: 0 0 25px; fill: currentColor; }

.yk-totop {
  position: fixed; right: 22px; bottom: 90px; z-index: 950;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--yk-line);
  border-radius: 50%;
  background: var(--yk-surface);
  color: var(--yk-ink);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--yk-fast) var(--yk-ease),
              background var(--yk-fast) var(--yk-ease);
}
.yk-totop.is-visible { opacity: 1; pointer-events: auto; }
.yk-totop:hover { background: var(--yk-canvas); }
.yk-totop svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 575px) {
  .yk-whatsapp { height: 52px; width: 52px; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
  .yk-whatsapp__label { display: none; }
  .yk-totop { right: 16px; bottom: 78px; width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   17. Ana sayfa bölümleri
   -------------------------------------------------------------------------- */

/* İki sütun: metin + görsel */
.yk-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yk-16);
  align-items: center;
}
.yk-split__text { display: flex; flex-direction: column; gap: var(--yk-4); align-items: flex-start; }
.yk-split__media {
  border-radius: var(--yk-r-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--yk-canvas);
}
.yk-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Süreç adımları — numara, başlık, açıklama */
.yk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--yk-8);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: yk-step;
}
.yk-step {
  display: flex; flex-direction: column; gap: var(--yk-3);
  padding-top: var(--yk-5);
  border-top: 1px solid var(--yk-line);
}
.yk-step__num {
  font-family: var(--yk-font);
  font-size: 13px; font-weight: 500;
  letter-spacing: .12em;
  color: var(--yk-brand);
}

/* Müşteri yorumu */
.yk-quote {
  display: flex; flex-direction: column; gap: var(--yk-4);
  margin: 0;
  padding: var(--yk-6);
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
}
.yk-quote__text {
  margin: 0;
  font-family: var(--yk-font);
  font-size: 15.5px; line-height: 1.6;
  letter-spacing: var(--yk-track);
  color: var(--yk-body);
}
.yk-quote__text::before { content: "“"; color: var(--yk-brand); font-size: 28px; line-height: 0; vertical-align: -6px; margin-right: 3px; }
.yk-quote__who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.yk-quote__name { font-family: var(--yk-font); font-size: 14px; font-weight: 600; color: var(--yk-ink); }
.yk-quote__role { font-family: var(--yk-font); font-size: 12.5px; color: var(--yk-muted); }

/* Sertifika rozetleri */
.yk-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--yk-5);
}
.yk-badge {
  display: flex; flex-direction: column; align-items: center; gap: var(--yk-3);
  text-align: center;
}
.yk-badge img {
  max-height: 62px; width: auto; max-width: 100%;
  object-fit: contain;
  /* Rozetler tek tip görünsün; üzerine gelince rengine dönsün */
  filter: grayscale(1); opacity: .55;
  transition: filter var(--yk-med) var(--yk-ease), opacity var(--yk-med) var(--yk-ease);
}
.yk-badge:hover img { filter: grayscale(0); opacity: 1; }
.yk-badge span {
  font-family: var(--yk-font);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--yk-muted); line-height: 1.35;
}

/* Teklif çağrısı */
.yk-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yk-12); flex-wrap: wrap;
}
.yk-cta__text { flex: 1 1 460px; display: flex; flex-direction: column; gap: var(--yk-4); }
.yk-cta__actions { display: flex; gap: var(--yk-3); flex-wrap: wrap; flex: 0 0 auto; }

@media (max-width: 900px) {
  .yk-split { grid-template-columns: 1fr; gap: var(--yk-8); }
  .yk-split__media { order: -1; }
}
@media (max-width: 767px) {
  .yk-steps { grid-template-columns: 1fr; gap: var(--yk-6); }
  .yk-cta__actions { width: 100%; }
  .yk-cta__actions .yk-btn { flex: 1 1 100%; }
  .yk-badges { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--yk-4); }
}

/* --------------------------------------------------------------------------
   18. İç sayfa üst bandı
   --------------------------------------------------------------------------
   13 şablonda tekrarlanan blok tek bileşene indirildi
   (datainclude/pagehead-yk.php). Arka planda fotoğraf varsa üstüne okunurluk
   için koyu katman biner; yoksa düz karbon zemin kullanılır.
   -------------------------------------------------------------------------- */
.yk-pagehead {
  position: relative;
  background: var(--yk-onyx);
  padding-block: var(--yk-16) var(--yk-12);
  overflow: hidden;
}
.yk-pagehead__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.yk-pagehead--photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg,
              rgba(20, 17, 14, .90) 0%,
              rgba(20, 17, 14, .70) 60%,
              rgba(20, 17, 14, .48) 100%);
}
.yk-pagehead__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: var(--yk-4);
}
.yk-pagehead__title { color: #fff; font-size: clamp(30px, 4.2vw, 52px); }

.yk-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--yk-font);
  font-size: 13px;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .55);
}
.yk-crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.yk-crumbs a:hover { color: var(--yk-brand); }
.yk-crumbs__sep { color: rgba(255, 255, 255, .30); }

@media (max-width: 767px) {
  .yk-pagehead { padding-block: var(--yk-12) var(--yk-10); }
}

/* --------------------------------------------------------------------------
   19. İçerik metni (CMS'ten gelen zengin metin)
   -------------------------------------------------------------------------- */
.yk-prose {
  font-family: var(--yk-font);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: var(--yk-track);
  color: var(--yk-body);
  max-width: var(--yk-measure);
}
.yk-prose > * { max-width: 100%; }
.yk-prose p { margin: 0 0 var(--yk-4); }
.yk-prose h2, .yk-prose h3, .yk-prose h4 {
  color: var(--yk-ink);
  margin: var(--yk-8) 0 var(--yk-3);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.yk-prose h2 { font-size: 26px; font-weight: 500; }
.yk-prose h3 { font-size: 20px; font-weight: 500; }
.yk-prose h4 { font-size: 17px; font-weight: 600; }
.yk-prose ul, .yk-prose ol { margin: 0 0 var(--yk-4); padding-left: var(--yk-5); }
.yk-prose li { margin-bottom: var(--yk-2); }
.yk-prose a { color: var(--yk-brand-700); }
.yk-prose img {
  max-width: 100%; height: auto;
  border-radius: var(--yk-r);
  margin-block: var(--yk-4);
}
.yk-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--yk-4); }
.yk-prose th, .yk-prose td { border: 1px solid var(--yk-line); padding: 10px 12px; text-align: left; }
/* CMS metinleri gömülü stil taşıyor; okunurluk için nötrle */
.yk-prose [style*="font-family"] { font-family: var(--yk-font) !important; }
.yk-prose [style*="background"]  { background: transparent !important; }

/* --------------------------------------------------------------------------
   20. SSS akordeonu — native <details>, JavaScript yok
   -------------------------------------------------------------------------- */
.yk-faq { border-top: 1px solid var(--yk-line); }
.yk-faq__item { border-bottom: 1px solid var(--yk-line); }
.yk-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--yk-4);
  padding: var(--yk-5) 0;
  font-family: var(--yk-font);
  font-size: 17px; font-weight: 500;
  letter-spacing: var(--yk-track);
  color: var(--yk-ink);
  cursor: pointer;
  list-style: none;
}
.yk-faq__q::-webkit-details-marker { display: none; }
.yk-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--yk-brand);
  border-bottom: 1.5px solid var(--yk-brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--yk-fast) var(--yk-ease);
}
.yk-faq__item[open] .yk-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.yk-faq__q:hover { color: var(--yk-brand-700); }
.yk-faq__a { padding-bottom: var(--yk-6); }

/* --------------------------------------------------------------------------
   21. Sertifika kartı (Sertifikalarım sayfası)
   -------------------------------------------------------------------------- */
.yk-cert {
  display: flex; flex-direction: column; gap: var(--yk-3);
  margin: 0;
  padding: var(--yk-5);
  background: var(--yk-canvas);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  text-align: center;
}
.yk-cert a { display: block; }
.yk-cert img {
  width: 100%; height: 260px;
  object-fit: contain;
  display: block;
}
.yk-cert figcaption {
  font-family: var(--yk-font);
  font-size: 13px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--yk-body);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   22. İki sütunlu liste düzeni (içerik + kenar çubuğu)
   -------------------------------------------------------------------------- */
.yk-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--yk-12);
  align-items: start;
}
.yk-layout__main { min-width: 0; }

.yk-side {
  position: sticky; top: 110px;
  padding: var(--yk-5);
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
}
.yk-side__title {
  margin: 0 0 var(--yk-4);
  padding-bottom: var(--yk-3);
  border-bottom: 1px solid var(--yk-line);
  font-family: var(--yk-font);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--yk-muted);
}
.yk-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.yk-catlist a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--yk-r-sm);
  font-family: var(--yk-font);
  font-size: 14px;
  color: var(--yk-body);
  text-decoration: none;
  transition: background var(--yk-fast) var(--yk-ease), color var(--yk-fast) var(--yk-ease);
}
.yk-catlist a:hover { background: var(--yk-canvas); color: var(--yk-brand-700); }
.yk-catlist--sub { margin-left: var(--yk-4); border-left: 1px solid var(--yk-line); padding-left: var(--yk-2); }
.yk-catlist--sub a { font-size: 13.5px; color: var(--yk-muted); }

/* --------------------------------------------------------------------------
   23. Sayfalama
   -------------------------------------------------------------------------- */
.yk-pager {
  display: flex; flex-wrap: wrap; gap: var(--yk-2);
  justify-content: center;
  margin-top: var(--yk-10);
}
.yk-pager__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r-pill);
  background: var(--yk-surface);
  font-family: var(--yk-font);
  font-size: 14px; font-weight: 500;
  color: var(--yk-body);
  text-decoration: none;
  transition: all var(--yk-fast) var(--yk-ease);
}
.yk-pager__item:hover { border-color: var(--yk-carbon); color: var(--yk-ink); }
.yk-pager__item.is-current {
  background: var(--yk-carbon); border-color: var(--yk-carbon); color: #fff;
}

@media (max-width: 900px) {
  .yk-layout { grid-template-columns: 1fr; gap: var(--yk-8); }
  .yk-side { position: static; }
}

/* Fiyat yerine metin yazılı kayıtlar ("fiyat alınız" gibi) */
.yk-price__ask {
  font-family: var(--yk-font);
  font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--yk-brand-700);
}

/* --------------------------------------------------------------------------
   24. Form, uyarı ve harita (İletişim sayfası)
   -------------------------------------------------------------------------- */
.yk-form { display: flex; flex-direction: column; gap: var(--yk-5); }
.yk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yk-4); }

.yk-alert {
  padding: var(--yk-4) var(--yk-5);
  margin-bottom: var(--yk-5);
  border-radius: var(--yk-r);
  border: 1px solid;
  font-family: var(--yk-font);
  font-size: 15px;
  line-height: 1.5;
}
.yk-alert--ok   { background: #EDF6F0; border-color: #BFE0CC; color: #1C6B44; }
.yk-alert--hata { background: #FBEFEA; border-color: #F0CFBE; color: #99401C; }

.yk-contactlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--yk-3); }
.yk-contactlist a, .yk-contactlist span {
  font-family: var(--yk-font);
  font-size: 14.5px; line-height: 1.5;
  color: var(--yk-body);
  text-decoration: none;
}
.yk-contactlist a:hover { color: var(--yk-brand-700); }

.yk-map { line-height: 0; background: var(--yk-canvas); }
.yk-map iframe { width: 100%; height: 460px; border: 0; display: block; }

/* İletişimde kenar çubuğu biraz daha geniş */
.yk-layout--contact { grid-template-columns: 1fr 340px; }

@media (max-width: 767px) {
  .yk-form__row { grid-template-columns: 1fr; }
  .yk-map iframe { height: 320px; }
}

/* ==========================================================================
   YASAL BANT — footer'ın alt bölümü
   --------------------------------------------------------------------------
   Banka sanal POS başvurusunda denetlenen bilgiler burada duruyor: yasal
   metin bağlantıları, kart logoları, ETBİS bandı ve şirket künyesi.
   Footer koyu (onyx) zemin olduğu için renkler rgba beyaz üzerinden.
   ========================================================================== */
.yk-footer__legal {
  border-top: 1px solid var(--yk-line-dark);
  padding-top: var(--yk-6);
  margin-top: var(--yk-8);
  display: flex;
  flex-direction: column;
  gap: var(--yk-5);
}

.yk-footer__legal-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--yk-2) var(--yk-5);
}
.yk-footer__legal-links a {
  font-family: var(--yk-font);
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  transition: color var(--yk-fast) var(--yk-ease);
}
.yk-footer__legal-links a:hover { color: #fff; text-decoration: none; }

/* ---- Ödeme şeridi ------------------------------------------------------ */
.yk-pay { display: flex; flex-direction: column; gap: var(--yk-3); }

.yk-pay__logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--yk-2);
}
.yk-pay__item {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--yk-line-dark);
  border-radius: var(--yk-r-sm);
  padding: 6px 10px;
  display: flex; align-items: center; justify-content: center;
  min-height: 38px;
}
/* Logo dosyasi varsa kutu cizilmiyor: Tabler'in -dark surumlerinin kendi koyu
   karti var, ustune ikinci cerceve koymak kart icinde kart gibi duruyordu. */
.yk-pay__item--logo { background: none; border: 0; padding: 0; min-height: 0; }
.yk-pay__item img { display: block; height: 30px; width: auto; border-radius: 4px; }
/* Logo dosyası yoksa yazı rozeti — kırık görsel yerine okunur bir etiket */
.yk-pay__item--yazi span {
  font-family: var(--yk-font);
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.yk-pay__note {
  margin: 0;
  font-family: var(--yk-font);
  font-size: 13px; line-height: 1.6;
  color: rgba(255, 255, 255, .5);
  max-width: var(--yk-measure);
}

/* ---- ETBİS bandı ------------------------------------------------------- */
.yk-etbis { line-height: 0; }
.yk-etbis img, .yk-etbis iframe { max-width: 100%; border: 0; }

/* ---- Şirket künyesi ---------------------------------------------------- */
.yk-footer__kunye {
  margin: 0;
  font-family: var(--yk-font);
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 767px) {
  .yk-footer__legal-links { gap: var(--yk-2) var(--yk-4); }
}

/* ==========================================================================
   YASAL METİN SAYFALARI
   --------------------------------------------------------------------------
   yk-prose'un üzerine biner. Uzun sözleşme metni okunabilir kalsın diye
   satır uzunluğu sınırlı, başlıklar numaralı bloklar hâlinde ayrışıyor.
   ========================================================================== */
.yk-legal { max-width: 78ch; }

.yk-legal__date {
  font-size: 13px;
  color: var(--yk-muted);
  border-bottom: 1px solid var(--yk-line);
  padding-bottom: var(--yk-4);
  margin-bottom: var(--yk-6);
}

.yk-legal h2 {
  margin-top: var(--yk-8);
  padding-top: var(--yk-5);
  border-top: 1px solid var(--yk-line);
}
.yk-legal h2:first-of-type { margin-top: 0; }
.yk-legal h3 { margin-top: var(--yk-5); }

.yk-legal ol { padding-left: var(--yk-5); }
.yk-legal li { margin-bottom: var(--yk-2); }

/* Satıcı bilgileri ve çerez tablosu */
.yk-legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--yk-4) 0 var(--yk-5);
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  overflow: hidden;
}
.yk-legal__table th,
.yk-legal__table td {
  border: 0;
  border-bottom: 1px solid var(--yk-line);
  padding: 12px var(--yk-4);
  text-align: left;
  font-family: var(--yk-font);
  font-size: 14.5px;
  line-height: 1.6;
  vertical-align: top;
}
.yk-legal__table tbody tr:last-child th,
.yk-legal__table tbody tr:last-child td { border-bottom: 0; }
.yk-legal__table th {
  font-weight: 500;
  color: var(--yk-ink);
  width: 34%;
  background: var(--yk-canvas);
}
.yk-legal__table td { color: var(--yk-body); }
.yk-legal__table thead th { width: auto; }

@media (max-width: 575px) {
  .yk-legal__table th, .yk-legal__table td { padding: 10px var(--yk-3); font-size: 13.5px; }
  .yk-legal__table th { width: 42%; }
}

/* İletişim sayfasındaki ticari bilgiler kutusu */
.yk-kunye { margin: 0; font-family: var(--yk-font); }
.yk-kunye dt {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--yk-muted);
  margin-top: var(--yk-3);
}
.yk-kunye dt:first-child { margin-top: 0; }
.yk-kunye dd {
  margin: 2px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--yk-body);
}

/* Fiyatın yanındaki "KDV dahil" ibaresi — tüketiciye gösterilen fiyatın
   vergi dahil olduğunu belirtmek zorunlu, sanal POS denetiminde de aranıyor. */
.yk-price__vat {
  font-family: var(--yk-font);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--yk-muted);
  white-space: nowrap;
}

/* ==========================================================================
   MAĞAZA VE SEPET
   --------------------------------------------------------------------------
   Tasarım ilkeleri korunuyor: gölge yok, sıcak nötr zemin, turuncu yalnızca
   sayfanın tek en önemli eyleminde ("Sepete ekle", "Siparişi tamamla").
   ========================================================================== */

/* ---- Başlıktaki sepet düğmesi ------------------------------------------ */
.yk-cartbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--yk-r-pill);
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .18);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background var(--yk-fast) var(--yk-ease), color var(--yk-fast) var(--yk-ease);
}
.yk-cartbtn:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.yk-cartbtn svg { width: 19px; height: 19px; }
.yk-cartbtn__adet {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--yk-r-pill);
  background: var(--yk-brand); color: #fff;
  font-family: var(--yk-font); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Mağaza kartı ------------------------------------------------------
   Kart <a> değil <div>: içinde form var. Bağlantı kart içindeki .yk-card__link. */
.yk-card--satis { display: flex; flex-direction: column; }
.yk-card--satis .yk-card__link { display: block; color: inherit; text-decoration: none; }
.yk-card--satis .yk-card__link:hover { text-decoration: none; }
.yk-card__satisform { margin-top: auto; padding: 0 var(--yk-4) var(--yk-4); }
.yk-card__satisform .yk-btn { width: 100%; }

.yk-satisnot {
  list-style: none; margin: var(--yk-8) 0 0; padding: var(--yk-5) 0 0;
  border-top: 1px solid var(--yk-line);
  display: flex; flex-wrap: wrap; gap: var(--yk-2) var(--yk-6);
  font-family: var(--yk-font); font-size: 13.5px; color: var(--yk-muted);
}
.yk-satisnot a { color: var(--yk-brand-700); }

/* ---- Ürün detayındaki satış kutusu ------------------------------------- */
.yk-satis {
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  padding: var(--yk-5);
  margin-bottom: var(--yk-5);
}
.yk-satis__fiyat .yk-price__now { font-size: 27px; }
.yk-satis__form {
  display: flex; align-items: flex-end; gap: var(--yk-3);
  margin: var(--yk-4) 0 var(--yk-4);
}
.yk-satis__adet { width: 96px; flex: 0 0 96px; }
.yk-satis__form .yk-btn { flex: 1 1 auto; }
.yk-satis__not {
  list-style: none; margin: 0; padding: var(--yk-4) 0 0;
  border-top: 1px solid var(--yk-line);
  font-family: var(--yk-font); font-size: 13.5px; line-height: 1.7; color: var(--yk-muted);
}
.yk-satis__not a { color: var(--yk-brand-700); }

/* Adet kutusu — tarayıcı okları dar alanda metni eziyordu */
.yk-qty { text-align: center; padding-left: 8px; padding-right: 8px; }

/* ---- Sepet listesi ----------------------------------------------------- */
.yk-cart {
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  background: var(--yk-surface);
  overflow: hidden;
}
.yk-cart__row {
  display: grid;
  grid-template-columns: 92px 1fr 110px 130px 34px;
  align-items: center;
  gap: var(--yk-4);
  padding: var(--yk-4);
  border-bottom: 1px solid var(--yk-line);
}
.yk-cart__row:last-child { border-bottom: 0; }
.yk-cart__row--sade { grid-template-columns: 1fr 130px; }

.yk-cart__media { display: block; line-height: 0; border-radius: var(--yk-r-sm); overflow: hidden; }
.yk-cart__media img { width: 100%; height: 72px; object-fit: cover; display: block; }

.yk-cart__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yk-cart__title {
  font-family: var(--yk-font); font-size: 15.5px; font-weight: 500;
  color: var(--yk-ink); text-decoration: none;
}
.yk-cart__title:hover { color: var(--yk-brand-700); text-decoration: none; }
.yk-cart__kod, .yk-cart__birim {
  font-family: var(--yk-font); font-size: 13px; color: var(--yk-muted);
}
.yk-cart__adet-etiket {
  display: block; font-family: var(--yk-font); font-size: 12px;
  color: var(--yk-muted); margin-bottom: 4px;
}
.yk-cart__tutar {
  font-family: var(--yk-font); font-size: 16px; font-weight: 500;
  color: var(--yk-ink); text-align: right;
}
.yk-cart__sil {
  width: 34px; height: 34px; border: 1px solid var(--yk-line);
  background: transparent; border-radius: var(--yk-r-pill);
  color: var(--yk-muted); font-size: 19px; line-height: 1; cursor: pointer;
  transition: color var(--yk-fast) var(--yk-ease), border-color var(--yk-fast) var(--yk-ease);
}
.yk-cart__sil:hover { color: var(--yk-brand-600); border-color: var(--yk-brand); }

.yk-cart__islemler {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--yk-4); margin-top: var(--yk-4); flex-wrap: wrap;
}

/* ---- Sipariş özeti kutusu ---------------------------------------------- */
.yk-ozet {
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  padding: var(--yk-5);
  position: sticky; top: var(--yk-4);
}
.yk-ozet__baslik {
  font-family: var(--yk-font); font-size: 17px; font-weight: 500;
  color: var(--yk-ink); margin: 0 0 var(--yk-4);
  padding-bottom: var(--yk-3); border-bottom: 1px solid var(--yk-line);
}
.yk-ozet__liste { list-style: none; margin: 0 0 var(--yk-4); padding: 0 0 var(--yk-3); border-bottom: 1px solid var(--yk-line); }
.yk-ozet__liste li {
  display: flex; justify-content: space-between; gap: var(--yk-3);
  font-family: var(--yk-font); font-size: 13.5px; color: var(--yk-body);
  margin-bottom: var(--yk-2);
}
.yk-ozet__liste em { font-style: normal; color: var(--yk-muted); }

.yk-ozet__satir {
  display: flex; justify-content: space-between; gap: var(--yk-3);
  font-family: var(--yk-font); font-size: 14.5px; color: var(--yk-body);
  padding: 7px 0;
}
.yk-ozet__satir--toplam {
  margin-top: var(--yk-2); padding-top: var(--yk-3);
  border-top: 1px solid var(--yk-line);
  font-size: 18px; font-weight: 500; color: var(--yk-ink);
}
.yk-ozet__not { margin: var(--yk-2) 0 0; font-family: var(--yk-font); font-size: 12.5px; line-height: 1.6; color: var(--yk-muted); }
.yk-ozet__btn { width: 100%; margin-top: var(--yk-4); }
.yk-ozet__guven {
  list-style: none; margin: var(--yk-4) 0 0; padding: var(--yk-4) 0 0;
  border-top: 1px solid var(--yk-line);
  font-family: var(--yk-font); font-size: 13px; color: var(--yk-muted);
}
.yk-ozet__guven li { margin-bottom: 6px; }
.yk-ozet__guven a { color: var(--yk-brand-700); }

/* ---- Ödeme formu ------------------------------------------------------- */
.yk-blok {
  background: var(--yk-surface);
  border: 1px solid var(--yk-line);
  border-radius: var(--yk-r);
  padding: var(--yk-5);
  margin: 0 0 var(--yk-4);
}
.yk-blok__baslik {
  font-family: var(--yk-font); font-size: 17px; font-weight: 500;
  color: var(--yk-ink); margin: 0 0 var(--yk-4); padding: 0;
}
.yk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yk-4); margin-bottom: var(--yk-4); }
.yk-field__ipucu { font-family: var(--yk-font); font-size: 12.5px; color: var(--yk-muted); }

.yk-onay {
  display: flex; align-items: flex-start; gap: var(--yk-3);
  font-family: var(--yk-font); font-size: 13.5px; line-height: 1.6;
  color: var(--yk-body); margin-top: var(--yk-3); cursor: pointer;
}
.yk-onay input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--yk-carbon); }
.yk-onay a { color: var(--yk-brand-700); }

.yk-secim {
  display: flex; align-items: flex-start; gap: var(--yk-3);
  border: 1px solid var(--yk-line); border-radius: var(--yk-r-sm);
  padding: var(--yk-4); margin-bottom: var(--yk-3); cursor: pointer;
}
.yk-secim input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--yk-carbon); }
.yk-secim strong { display: block; font-family: var(--yk-font); font-size: 15px; font-weight: 500; color: var(--yk-ink); }
.yk-secim small { display: block; margin-top: 3px; font-family: var(--yk-font); font-size: 13px; line-height: 1.6; color: var(--yk-muted); }
.yk-secim.is-pasif { opacity: .55; cursor: not-allowed; }

/* ---- Adım göstergesi --------------------------------------------------- */
.yk-adimlar {
  list-style: none; margin: 0 0 var(--yk-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--yk-2) var(--yk-5);
  font-family: var(--yk-font); font-size: 13.5px; color: var(--yk-muted);
  counter-reset: yk-adim;
}
.yk-adimlar li { counter-increment: yk-adim; display: flex; align-items: center; gap: var(--yk-2); }
.yk-adimlar li::before {
  content: counter(yk-adim);
  width: 22px; height: 22px; border-radius: var(--yk-r-pill);
  border: 1px solid var(--yk-line); color: var(--yk-muted);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.yk-adimlar a { color: var(--yk-muted); text-decoration: none; }
.yk-adimlar .is-done::before { background: var(--yk-canvas); color: var(--yk-body); border-color: var(--yk-line); }
.yk-adimlar .is-current { color: var(--yk-ink); font-weight: 500; }
.yk-adimlar .is-current::before { background: var(--yk-carbon); border-color: var(--yk-carbon); color: #fff; }

/* ---- Boş durum ve teşekkür --------------------------------------------- */
.yk-bos {
  text-align: center; padding: var(--yk-16) var(--yk-4);
  border: 1px solid var(--yk-line); border-radius: var(--yk-r);
  background: var(--yk-surface);
}
.yk-bos .yk-lead { margin: var(--yk-3) auto var(--yk-5); max-width: 46ch; }

.yk-tesekkur {
  background: var(--yk-surface); border: 1px solid var(--yk-line);
  border-radius: var(--yk-r); padding: var(--yk-8);
  max-width: 760px;
}
.yk-tesekkur__tutar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--yk-4);
  margin: var(--yk-5) 0; padding: var(--yk-4) 0;
  border-top: 1px solid var(--yk-line); border-bottom: 1px solid var(--yk-line);
  font-family: var(--yk-font); color: var(--yk-muted); font-size: 14px;
}
.yk-tesekkur__tutar strong { font-size: 24px; font-weight: 500; color: var(--yk-ink); }
.yk-tesekkur__islemler { display: flex; flex-wrap: wrap; gap: var(--yk-3); margin-top: var(--yk-6); }

.yk-hesaplar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--yk-4); margin: var(--yk-4) 0; }
.yk-hesap { border: 1px solid var(--yk-line); border-radius: var(--yk-r-sm); padding: var(--yk-4); }
.yk-hesap__ad { font-family: var(--yk-font); font-size: 15px; font-weight: 500; color: var(--yk-ink); margin: 0 0 var(--yk-3); }
.yk-hesap p { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--yk-3); font-family: var(--yk-font); font-size: 14px; color: var(--yk-ink); }
.yk-hesap p:last-child { margin-bottom: 0; }
.yk-hesap span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--yk-muted); }
.yk-hesap code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: .02em; }

/* Sepet ve ödeme sayfasında kenar çubuğu biraz daha geniş */
.yk-layout--sepet { grid-template-columns: 1fr 360px; }

@media (max-width: 991px) {
  .yk-layout--sepet { grid-template-columns: 1fr; }
  .yk-ozet { position: static; }
}

@media (max-width: 575px) {
  /* Sepet satırı iki sütuna iniyor: görsel + bilgi üstte, adet ve tutar altta */
  /* Ucuncu sutun `auto`: 34px sabitken tutar (199.800,00 TL) o sutuna
     sigmiyor ve kirpiliyordu. auto, sil dugmesi ile tutarin genisinden
     buyugunu aliyor. */
  /* Baslik iki sutunu birden kaplasin: uc sutunlu ilk denemede baslik
     dar kalip uc satira boluniyordu. Silme dugmesi satirin sag ustune
     mutlak konumlaniyor. */
  .yk-cart__row {
    position: relative;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "media info info"
      "media adet tutar";
    row-gap: var(--yk-3);
    column-gap: var(--yk-3);
  }
  .yk-cart__info  { padding-right: 40px; }
  .yk-cart__tutar { white-space: nowrap; align-self: center; }
  .yk-cart__sil   { position: absolute; top: var(--yk-3); right: var(--yk-3); }
  .yk-cart__media { grid-area: media; }
  .yk-cart__info  { grid-area: info; }
  .yk-cart__adet  { grid-area: adet; }
  .yk-cart__tutar { grid-area: tutar; }
  .yk-cart__sil   { grid-area: sil; }
  .yk-cart__media img { height: 60px; }
  .yk-cart__row--sade { grid-template-columns: 1fr auto; grid-template-areas: "info tutar"; }
  .yk-satis__form { flex-wrap: wrap; }
  .yk-satis__form .yk-btn { flex: 1 1 100%; }
}

/* Fiyat satırı: uzun tutar + üstü çizili fiyat + "KDV dahil" dar kartta
   taşıyordu; "199.800,00" ile "TL" ayrı satıra düşüyordu. */
.yk-price { flex-wrap: wrap; row-gap: 2px; }
.yk-price__now, .yk-price__was { white-space: nowrap; }

/* IBAN kutusu: eski tema <code> etiketini pembe basıyor, yeni tasarımda
   düz metin olmalı. */
.yk-hesap code { color: var(--yk-ink); background: transparent; padding: 0; }

/* Fatura alanları "teslimat ile aynı" işaretliyken gizleniyor (JS yoksa
   açık kalır, form yine çalışır). */
.yk-fatura-detay[hidden] { display: none; }