/* ============================================================
   CKM TASARIM SİSTEMİ v1.0  —  07.08.2026
   Tek kaynak: renk, tipografi, boşluk, çerçeve değişkenleri.

   KURAL: Bu dosya mevcut stilleri SİLMEZ, üzerine yazar.
          !important kullanılmaz. Geri alma = enqueue satırını kapat.
   Kapatma: wp option update ckm_tasarim_on 0
   ============================================================ */

:root{
  /* ── Marka ───────────────────────────────────────────── */
  --ckm-navy:        #0f1b35;   /* header, başlık, fiyat, koyu buton */
  --ckm-navy-700:    #1a2a4f;   /* navy hover */
  --ckm-yellow:      #ffd000;   /* SADECE birincil eylem — ekran başına 1-2 */
  --ckm-yellow-600:  #eec200;

  /* ── Zemin & yüzey ───────────────────────────────────── */
  --ckm-bg:          #f4f5f7;   /* sayfa zemini */
  --ckm-surface:     #ffffff;   /* kart, tablo, form */
  --ckm-surface-2:   #f8f9fb;   /* tablo etiket sütunu, hover */

  /* ── Çizgi ───────────────────────────────────────────── */
  --ckm-border:        #e3e6ea;
  --ckm-border-strong: #c9ced6;

  /* ── Metin ───────────────────────────────────────────── */
  --ckm-text:      #1a2233;
  --ckm-text-2:    #5c6675;     /* konum, tarih, mağaza adı */
  --ckm-text-3:    #8b94a3;     /* placeholder, dipnot */
  --ckm-text-inv:  #ffffff;

  /* ── İşlevsel ────────────────────────────────────────── */
  --ckm-link:     #1856c0;
  --ckm-success:  #1e8e3e;
  --ckm-warning:  #b06000;
  --ckm-error:    #c62828;
  --ckm-wa:       #25d366;      /* SADECE WhatsApp */

  /* ── Tipografi ───────────────────────────────────────── */
  --ckm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --ckm-fs-12: 12px; --ckm-fs-13: 13px; --ckm-fs-14: 14px;
  --ckm-fs-16: 16px; --ckm-fs-18: 18px; --ckm-fs-22: 22px; --ckm-fs-28: 28px;
  --ckm-lh-tight: 1.3;
  --ckm-lh-base:  1.5;

  /* ── Boşluk (4px taban) ──────────────────────────────── */
  --ckm-s-1: 4px;  --ckm-s-2: 8px;  --ckm-s-3: 12px;
  --ckm-s-4: 16px; --ckm-s-5: 24px; --ckm-s-6: 32px; --ckm-s-7: 48px;

  /* ── Köşe & gölge ────────────────────────────────────── */
  --ckm-r-sm: 6px;
  --ckm-r-md: 8px;
  --ckm-r-full: 999px;
  --ckm-shadow-sm: 0 1px 2px rgba(15,27,53,.06);
  --ckm-shadow-md: 0 4px 12px rgba(15,27,53,.10);

  /* ── Sayfa çerçevesi ─────────────────────────────────── */
  --ckm-container: 1200px;
  --ckm-gutter: 24px;
}

@media (max-width: 1199px){ :root{ --ckm-gutter: 20px; } }
@media (max-width: 767px) { :root{ --ckm-gutter: 16px; } }


/* ============================================================
   1. KRİTİK DÜZELTME — bilgi tablosu taşması
   ------------------------------------------------------------
   Sorun: .ckm-info-row flex kullanıyor ama değer hücresine
   min-width:0 verilmemiş. Flex öğelerin varsayılan min-width
   değeri "auto" olduğu için uzun değerler (telefon numarası,
   OEM kodu, uzun mağaza adı) küçülmüyor ve ekrandan taşıyor.
   Telefonda "TELEFON: +9…" diye kesiliyordu.
   ============================================================ */

.ckm-info-row{
  display: flex;
  align-items: baseline;
  gap: var(--ckm-s-3);
}

.ckm-info-row > b{
  flex: 0 0 auto;
  min-width: 96px;
  max-width: 132px;
}

.ckm-info-row > span,
.ckm-info-value{
  flex: 1 1 auto;
  min-width: 0;              /* ← taşmayı bitiren asıl satır */
  overflow-wrap: anywhere;   /* uzun numara/kod satır kırar, taşmaz */
  word-break: normal;
}

@media (max-width: 767px){
  .ckm-info-row > b{ min-width: 88px; max-width: 110px; }
}

/* Masaüstünde grid düzeni korunur, sadece taşma güvenliği eklenir */
@media (min-width: 980px){
  .ckm-info-row{ grid-template-columns: minmax(120px,160px) minmax(0,1fr); }
  .ckm-info-row > span{ min-width: 0; overflow-wrap: anywhere; }
}


/* ============================================================
   2. ORTAK YARDIMCILAR (yeni sınıflar — mevcut yapıya dokunmaz)
   ============================================================ */

.ckm-container{
  max-width: var(--ckm-container);
  margin-inline: auto;
  padding-inline: var(--ckm-gutter);
}

/* Kart/liste ızgarası — piksel hedeflemek yerine kural:
   ara genişliklerde (344px, 412px…) düzen kaymaz */
.ckm-grid-auto{
  display: grid;
  gap: var(--ckm-s-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 640px){
  .ckm-grid-auto{
    gap: var(--ckm-s-4);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Görsel alanı baştan rezerve — yüklenirken sayfa zıplamaz */
.ckm-img-4x3{
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--ckm-bg);
  display: block;
}

/* Butonlar — 5 renk yerine 3 varyant + WhatsApp istisnası */
.ckm-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ckm-s-2);
  height: 40px; padding: 0 var(--ckm-s-4);
  border: 1px solid transparent; border-radius: var(--ckm-r-sm);
  font-family: var(--ckm-font); font-size: var(--ckm-fs-14); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ckm-btn--lg{ height: 48px; font-size: var(--ckm-fs-16); }
.ckm-btn--sm{ height: 32px; padding: 0 var(--ckm-s-3); font-size: var(--ckm-fs-13); }
.ckm-btn--primary{ background: var(--ckm-yellow); color: var(--ckm-navy); }
.ckm-btn--primary:hover{ background: var(--ckm-yellow-600); }
.ckm-btn--dark{ background: var(--ckm-navy); color: var(--ckm-text-inv); }
.ckm-btn--dark:hover{ background: var(--ckm-navy-700); }
.ckm-btn--ghost{ background: var(--ckm-surface); color: var(--ckm-navy); border-color: var(--ckm-border-strong); }
.ckm-btn--ghost:hover{ background: var(--ckm-surface-2); }
.ckm-btn--wa{ background: var(--ckm-wa); color: #fff; }
.ckm-btn:focus-visible{ outline: 2px solid var(--ckm-navy); outline-offset: 2px; }
.ckm-btn[disabled]{ opacity: .45; pointer-events: none; }

/* İkon — emoji yerine, metin rengini alır, her cihazda aynı görünür */
.ckm-icon{
  width: 20px; height: 20px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.2em;
}
.ckm-icon--sm{ width: 16px; height: 16px; }

/* Form alanı — 16px şart: küçük yazı iOS'ta odakta sayfayı yakınlaştırır */
.ckm-input, .ckm-select{
  height: 44px; padding: 0 var(--ckm-s-3); width: 100%;
  border: 1px solid var(--ckm-border-strong); border-radius: var(--ckm-r-sm);
  font: inherit; font-size: 16px;
  background: var(--ckm-surface); color: var(--ckm-text);
}
.ckm-input:focus, .ckm-select:focus{
  outline: none; border-color: var(--ckm-navy);
  box-shadow: 0 0 0 3px rgba(15,27,53,.12);
}


/* ============================================================
   3. iOS ZOOM KORUMASI — mevcut form alanları
   Küçük punto girdi alanları iOS'ta odaklanınca sayfayı
   yakınlaştırıyor ve düzen kayıyordu.
   ============================================================ */
@media (max-width: 767px){
  input[type="text"], input[type="search"], input[type="tel"],
  input[type="email"], input[type="number"], select, textarea{
    font-size: 16px;
  }
}


/* ============================================================
   4. YATAY TAŞMA EMNİYETİ
   Hiçbir sayfa yana kaymasın; geniş içerik kendi kutusunda kaysın.
   ============================================================ */
html, body{ overflow-x: hidden; }
img, video, iframe, table{ max-width: 100%; }