/*
Theme Name: Kadir Trend Masa Sandalye
Template: bisasoft
Author: Bisasoft
Description: Kadir Trend Masa Sandalye (120-0280) müşteri teması — cafe, restoran, otel ve bar masa sandalye üreticisi. Google Ads için çok sayfalı site: ana sayfa özet + altı mekân açılış sayfası + yedi iç sayfa. Yalnızca GÖRÜNÜM içerir; SEO, KVKK, form ve kabuk ana temadan gelir. Kurallar: docs/00-anayasa.md Bölüm 4.
Version: 0.1.0
Text Domain: kadir-trend
*/

/* ──────────────────────────────────────────────────────────
 * KADİR TREND — TASARIM
 *
 * Kaynak: design-lab/src/themes/kadirtrend (canlı sunum:
 * sunum.bisasoft.dev/120-0280-5b5d2999/). Tailwind sınıfları PHP
 * çizerlerine OLDUĞU GİBİ taşındı; burada yalnız Tailwind'le ifade
 * edilemeyenler durur.
 *
 * Değişken adları kaynaktaki `--k-*` adlarıyla AYNI — sınıflar
 * (`bg-[var(--k-ceviz)]`) birebir taşınabilsin diye. Değerler theme.json
 * token'larından TÜRETİLİR (kontrolcünün `ham-hex` kuralı).
 * ────────────────────────────────────────────────────────── */

:root {
  --k-zemin: var(--wp--preset--color--zemin);
  --k-kum: var(--wp--preset--color--yuzey);
  --k-ceviz: var(--wp--preset--color--koyu);
  --k-ceviz-2: var(--wp--preset--color--koyu-2);
  --k-murekkep: var(--wp--preset--color--murekkep);
  --k-govde: var(--wp--preset--color--govde);
  --k-soluk: var(--wp--preset--color--soluk);
  --k-cizgi: var(--wp--preset--color--cizgi);
  --k-kirmizi: var(--wp--preset--color--vurgu);
  --k-kirmizi-koyu: var(--wp--preset--color--vurgu-koyu);
  --k-altin: var(--wp--preset--color--altin);
  --k-yesil: var(--wp--preset--color--whatsapp);
  --k-yesil-koyu: var(--wp--preset--color--whatsapp-koyu);
  --k-beyaz: var(--wp--preset--color--beyaz);
  --k-siyah: var(--wp--preset--color--siyah);

  /* Ana temanın kapsayıcı genişliği — .bs-kap bunu okur. */
  --bs-kap: 80rem;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--k-govde);
  background: var(--k-zemin);
  -webkit-font-smoothing: antialiased;
}

/* Yazı tipi ayrı, renk ayrı. Renk `:where()` ile özgüllüksüz: koyu
   bölümlerde `text-white` başlığı ezebilsin (design-lab'da başlıklar
   zeminle aynı renge düşmüştü). */
h1, h2, h3, h4,
.k-display {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
:where(h1, h2, h3, h4) { color: var(--k-murekkep); }

.k-sayi { font-variant-numeric: tabular-nums; }

/* ── ÜRÜN KESİTİ KARTI ─────────────────────────────────────
 * Müşteri fotoğraflarının bir kısmı dekupe, bir kısmı beyaz fonlu. İkisini
 * aynı dile sokmak için ürün daima beyaz karta "contain" ile konur. */
.k-urun {
  position: relative;
  background: var(--k-beyaz);
  overflow: hidden;
}
.k-urun img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.k-urun::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 9%;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--k-ceviz) 16%, transparent), transparent);
  pointer-events: none;
}
@media (hover: hover) {
  .k-kart-link:hover .k-urun img { transform: translateY(-4px) scale(1.035); }
}

/* ── ÇİP ───────────────────────────────────────────────── */
.k-cip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--k-cizgi);
  background: var(--k-beyaz);
  color: var(--k-murekkep);
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.k-cip:hover { border-color: var(--k-murekkep); }
.k-cip[data-secili="1"] { background: var(--k-ceviz); border-color: var(--k-ceviz); color: var(--k-beyaz); }
.k-cip.k-cip-koyu { border-color: color-mix(in srgb, var(--k-beyaz) 16%, transparent); background: transparent; color: color-mix(in srgb, var(--k-beyaz) 82%, transparent); }
.k-cip.k-cip-koyu:hover { border-color: color-mix(in srgb, var(--k-beyaz) 50%, transparent); }
.k-cip.k-cip-koyu[data-secili="1"] { background: var(--k-beyaz); border-color: var(--k-beyaz); color: var(--k-ceviz); }

/* Yatay kayan şerit (güven çipleri, mobil). */
.k-kaydir { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.k-kaydir::-webkit-scrollbar { display: none; }

/* ── SSS AKORDEONU (<details>) ─────────────────────────────
 * Betik olmadan da çalışır. Artı işareti açıkken 45° dönüp çarpı olur. */
.k-soru > summary { list-style: none; cursor: pointer; }
.k-soru > summary::-webkit-details-marker { display: none; }
.k-soru .k-soru__ikon { transition: transform .25s, background-color .2s, border-color .2s, color .2s; }
.k-soru[open] .k-soru__ikon { transform: rotate(45deg); background: var(--k-kirmizi); border-color: var(--k-kirmizi); color: var(--k-beyaz); }

/* ── YAPIŞKAN ÇAĞRI (mobil) ────────────────────────────────
 * Açılış bölümü ekrandan çıkınca belirir (tema.js). Baştan görünürse
 * üstteki asıl çağrıyla yarışıyor. */
.k-yapiskan { transform: translateY(110%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.k-yapiskan[data-gorunur="1"] { transform: translateY(0); }
@media (max-width: 767px) {
  body { padding-bottom: 4.75rem; }
  /* Ana temanın yüzen düğmeleri mobilde yapışkan çubukla aynı işi yapıyor;
     ikisi birden sağ alt köşeyi kalabalıklaştırıyordu. Masaüstünde kalır. */
  div.bs-float { display: none; }
}

/* ── ADET HESAPLAYICI ARALIĞI ──────────────────────────────── */
input[type="range"].k-aralik {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--k-kirmizi) 0%, var(--k-kirmizi) var(--dolu, 0%), color-mix(in srgb, var(--k-beyaz) 14%, transparent) var(--dolu, 0%));
  outline: none;
}
input[type="range"].k-aralik::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--k-beyaz);
  border: 6px solid var(--k-kirmizi);
  cursor: pointer;
}
input[type="range"].k-aralik::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--k-beyaz);
  border: 6px solid var(--k-kirmizi);
  cursor: pointer;
}
/* Sayı girişinin ok düğmeleri tasarımda yok (artı/eksi düğmeleri var). */
.k-sayi-girdi::-webkit-inner-spin-button,
.k-sayi-girdi::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.k-sayi-girdi { -moz-appearance: textfield; }

/* ── GALERİ PENCERESİ (<dialog>) ─────────────────────────── */
dialog.k-isik {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--k-siyah) 92%, transparent);
  color: var(--k-beyaz);
}
dialog.k-isik[open] { display: flex; align-items: center; justify-content: center; }
dialog.k-isik::backdrop { background: transparent; }
.k-isik img { max-width: min(92vw, 1100px); max-height: 84dvh; object-fit: contain; border-radius: 12px; }
.k-isik button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--k-beyaz) 12%, transparent);
  color: var(--k-beyaz);
  cursor: pointer;
}
.k-isik button:hover { background: color-mix(in srgb, var(--k-beyaz) 24%, transparent); }
.k-isik .k-isik__kapat { top: 1rem; right: 1rem; }
.k-isik .k-isik__ok { top: 50%; transform: translateY(-50%); }
.k-isik .k-isik__ok--sol { left: 1rem; }
.k-isik .k-isik__ok--sol svg { transform: rotate(180deg); }
.k-isik .k-isik__ok--sag { right: 1rem; }
.k-isik .k-isik__sayac { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: 0.9rem; color: color-mix(in srgb, var(--k-beyaz) 70%, transparent); }

/* Altın ince çizgi — logodaki TREND'in yankısı. */
.k-altin-cizgi { display: inline-block; height: 2px; width: 1.5rem; background: linear-gradient(90deg, var(--k-altin), transparent); }

/* Ürün kartı içindeki görsel mix-blend istemeyen fotoğraf kareleri. */
.k-urun img.k-foto { object-fit: cover; mix-blend-mode: normal; }

/* ── PREFLIGHT'IN EKSİK PARÇASI ────────────────────────────
 * Tailwind preflight BİLİNÇLİ alınmıyor (ana temanın taban stillerini
 * ezerdi). Bölümlerin güvendiği sıfırlama YALNIZ bölümlerin içinde ve
 * `:where()` ile özgüllüksüz — yoksa `.mt-5` gibi sınıfları ezer.
 * ────────────────────────────────────────────────────────── */
:where(.kt-sayfa, .k-yapiskan) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) {
  margin: 0;
  padding: 0;
}
:where(.kt-sayfa) :where(ul, ol) { list-style: none; }
:where(.kt-sayfa) :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}
:where(.kt-sayfa) :where(a) { text-decoration: none; }
:where(.kt-sayfa) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.kt-sayfa) *, :where(.k-yapiskan) * { box-sizing: border-box; }
[hidden] { display: none !important; }

/* WordPress akış yerleşimi bölümlerin üstüne boşluk basıyor. */
.kt-sayfa > section,
.kt-sayfa > div { margin-block: 0; }
.kt-sayfa [id] { scroll-margin-top: 6rem; }

/* ══════════════════════════════════════════════════════════
 * KABUK UYARLAMALARI — yapı ana temadan, marka dili buradan.
 *
 * ÖZGÜLLÜK KURALI: kabuk işaretlemesi Tailwind yardımcıları taşıyor ve
 * tw.css bu dosyadan SONRA yükleniyor. Uyarlamalar iki sınıflı / öğeli
 * seçiciyle yazılır (120-0323'te yakalandı).
 * ══════════════════════════════════════════════════════════ */

/* ── ÜST ŞERİT ─────────────────────────────────────────────── */
div.bs-serit {
  background: var(--k-siyah);
  color: color-mix(in srgb, var(--k-beyaz) 65%, transparent);
}
.bs-serit .bs-serit__ic { min-height: 2.25rem; }
.bs-serit a:hover { color: var(--k-beyaz); }
.bs-serit .bs-serit__isaret { color: var(--k-altin); }
.bs-serit .kt-durum__nokta { background: color-mix(in srgb, var(--k-beyaz) 30%, transparent); }
.bs-serit .kt-durum[data-acik="1"] .kt-durum__nokta { background: var(--k-yesil); }

/* ── BAŞLIK ÇUBUĞU — koyu ceviz ─────────────────────────────
 * Logodaki altın "TREND" açık zeminde okunmuyor; koyu zeminde logo tam
 * haliyle parlıyor. */
header.bs-ust {
  background: color-mix(in srgb, var(--k-ceviz) 96%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--k-beyaz) 7%, transparent);
  color: var(--k-beyaz);
  backdrop-filter: blur(8px);
}
.bs-ust .bs-ust__ic { height: 4rem; }
@media (min-width: 1024px) { .bs-ust .bs-ust__ic { height: 4.75rem; } }
.bs-ust .bs-logo { height: 2.75rem; width: auto; }
@media (min-width: 1024px) { .bs-ust .bs-logo { height: 3.35rem; } }

.bs-ust .bs-ust__menu { gap: 1.6rem; }
.bs-ust .bs-ust__menu > li > a {
  font-size: 0.92rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--k-beyaz) 72%, transparent);
  transition: color .2s;
  white-space: nowrap;
}
.bs-ust .bs-ust__menu > li > a:hover,
.bs-ust .bs-ust__menu > li.current-menu-item > a,
.bs-ust .bs-ust__menu > li.current-menu-ancestor > a,
.bs-ust .bs-ust__menu > li.current_page_item > a { color: var(--k-beyaz); }
.bs-ust .bs-ust__menu svg { color: inherit; }

.bs-ust a.bs-ust__tel { color: var(--k-beyaz); }
.bs-ust a.bs-ust__tel .bs-ikon--vurgu { color: var(--k-altin); }
.bs-ust button.bs-ust__hamburger { color: var(--k-beyaz); }

/* Açılır menü — Mekânlar */
.bs-ust .bs-ust__menu .sub-menu {
  min-width: 17rem;
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid var(--k-cizgi);
  background: var(--k-beyaz);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--k-siyah) 50%, transparent);
}
.bs-ust .bs-ust__menu .sub-menu a { border-radius: 0.7rem; font-size: 0.92rem; color: var(--k-murekkep); }
.bs-ust .bs-ust__menu .sub-menu a:hover { background: var(--k-zemin); }

/* Çağrı düğmeleri — başlıktaki "Fiyat Al" WhatsApp'a gider, WhatsApp yeşili. */
a.bs-cagri.bs-cagri--dolu,
button.bs-cagri.bs-cagri--dolu {
  border-radius: 999px;
  background: var(--k-yesil);
  color: var(--k-beyaz);
}
a.bs-cagri.bs-cagri--dolu:hover,
button.bs-cagri.bs-cagri--dolu:hover { background: var(--k-yesil-koyu); }
.bs-ust a.bs-ust__cagri { min-height: 2.75rem; padding-inline: 1.25rem; }
/* Mobil "Ara" — başlıkta yeşil WhatsApp ile karışmasın: çizgili. */
.bs-ust a.bs-cagri.bs-ust__ara {
  background: transparent;
  color: var(--k-beyaz);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-beyaz) 22%, transparent);
}

/* Mobil çekmece */
div.bs-cekmece { background: var(--k-ceviz); color: var(--k-beyaz); }
.bs-cekmece .bs-cekmece__ust,
.bs-cekmece .bs-cekmece__alt { border-color: color-mix(in srgb, var(--k-beyaz) 10%, transparent); }
.bs-cekmece .bs-cekmece__menu > li { border-color: color-mix(in srgb, var(--k-beyaz) 8%, transparent); }
.bs-cekmece .bs-cekmece__menu a { color: color-mix(in srgb, var(--k-beyaz) 88%, transparent); }
.bs-cekmece .sub-menu a { color: color-mix(in srgb, var(--k-beyaz) 70%, transparent); }
.bs-cekmece .bs-logo { height: 2.6rem; width: auto; }
.bs-cekmece .bs-ikon--vurgu { color: var(--k-altin); }

/* ── ALT BİLGİ — siyah ─────────────────────────────────────── */
footer.bs-alt {
  background: var(--k-siyah);
  color: color-mix(in srgb, var(--k-beyaz) 58%, transparent);
  padding-top: 3.5rem;
}
/* Ana tema alt bilgide logoyu beyaza çeviriyor; bu logo kırmızı-altın ve
   koyu zemin için çizilmiş — renkleri korunur. */
.bs-alt img.bs-logo--ters,
.bs-alt .bs-logo--ters img { filter: none; }
.bs-alt .bs-logo { height: 3.5rem; width: auto; margin-bottom: 1.1rem; }
.bs-alt .bs-alt__baslik { color: var(--k-beyaz); letter-spacing: 0.16em; font-weight: 600; }
.bs-alt .bs-alt__kutu svg { color: var(--k-altin); }
.bs-alt a:hover { color: var(--k-beyaz); }

/* ── YÜZEN DÜĞMELER (masaüstü) ─────────────────────────────── */
div.bs-float a.bs-float__wa { background: var(--k-yesil); color: var(--k-beyaz); }
div.bs-float a.bs-float__tel { background: var(--k-kirmizi); color: var(--k-beyaz); }
div.bs-float a.bs-float__tel svg { color: var(--k-beyaz); }

/* ── KIRINTI YOLU + METİN SAYFALARI (KVKK, çerez) ──────────── */
nav.bs-iz { background: var(--k-kum); border-color: var(--k-cizgi); color: var(--k-soluk); }
.bs-sayfa .bs-icerik li::marker { color: var(--k-kirmizi); }
.bs-sayfa .bs-icerik a { text-decoration-color: var(--k-kirmizi); }

/* ── TEKLİF FORMU → WHATSAPP ─────────────────────────────── *
 * kt_wa_form: sunucuya gitmez, mesaj wa.me'de açılır. Ana temanın form
 * sınıflarını (bs-form) kullanır ki alan ölçüleri ortak kalsın. */
.kt-form form.bs-form { max-width: none; column-gap: 1rem; }
@media (min-width: 640px) {
  .kt-form form.bs-form { grid-template-columns: 1fr 1fr; }
  .kt-form .bs-form > p,
  .kt-form .bs-form > button,
  .kt-form .bs-form__alan--mesaj,
  .kt-form .bs-form__alan--konu { grid-column: 1 / -1; }
}
.kt-form .bs-form label { font-size: 0.85rem; font-weight: 600; color: var(--k-murekkep); }
.kt-form .bs-form input,
.kt-form .bs-form select,
.kt-form .bs-form textarea {
  border-radius: 0.75rem;
  border: 1px solid var(--k-cizgi);
  background: var(--k-zemin);
  font-size: 0.97rem;
  color: var(--k-murekkep);
  transition: border-color .2s, background-color .2s;
}
.kt-form .bs-form input:focus,
.kt-form .bs-form select:focus,
.kt-form .bs-form textarea:focus { outline: none; border-color: var(--k-murekkep); background: var(--k-beyaz); }
.kt-form .bs-form button {
  justify-self: stretch;
  min-height: 3.4rem;
  border-radius: 999px;
  background: var(--k-yesil);
  color: var(--k-beyaz);
  font-weight: 700;
  cursor: pointer;
}
.kt-form .bs-form button:hover { background: var(--k-yesil-koyu); }
.kt-form .bs-form__aydinlatma { color: var(--k-soluk); font-size: 0.78rem; }
.kt-form .bs-form__sonuc { background: var(--k-zemin); color: var(--k-murekkep); border-radius: 0.75rem; }

/* ── BLOG (Wix'ten taşınan yazılar) ───────────────────────
   Ana tema içerik ölçüsünü veriyor; burada yalnız Wix içeriğinin getirdiği
   alıntı, tablo (telefonda yatay kayar) ve yazı içi görsel. */
.bs-sayfa .bs-icerik blockquote {
  margin: 0 0 1.35em;
  padding: 0.9em 1.1em;
  border-left: 3px solid var(--k-kirmizi);
  background: var(--k-kum);
  font-weight: 600;
}
.bs-sayfa .bs-icerik blockquote p { margin: 0; }
.bs-sayfa .bs-icerik .wp-block-table { margin: 0 0 1.5em; overflow-x: auto; }
.bs-sayfa .bs-icerik th,
.bs-sayfa .bs-icerik td { padding: 0.55em 0.75em; border: 1px solid var(--k-cizgi); text-align: left; vertical-align: top; }
.bs-sayfa .bs-icerik th { background: var(--k-kum); font-weight: 700; }
.bs-sayfa .bs-icerik .wp-block-image { margin: 0 0 1.5em; }
.bs-sayfa .bs-icerik figcaption { margin-top: 0.4em; font-size: 0.85rem; color: var(--k-soluk); }
.k-blog-gorsel { display: block; width: 100%; height: auto; }
.kt-blog-dugme { margin: 1.5em 0; }
.kt-blog-dugme a {
  display: inline-flex; padding: 0.8em 1.4em; border-radius: 0.5rem;
  background: var(--k-kirmizi); color: var(--k-beyaz); font-weight: 700; text-decoration: none;
}
.kt-blog-dugme a:hover { background: var(--k-kirmizi-koyu); }

:focus-visible { outline: 2px solid var(--k-kirmizi); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .k-yapiskan, .k-urun img, .k-soru .k-soru__ikon { transition: none; }
}