/*
Theme Name: Mami Midye Dolma
Template: bisasoft
Author: Bisasoft
Description: Mami Midye Dolma (120-0323) müşteri teması. Yalnızca GÖRÜNÜM içerir; SEO, KVKK, form ve kabuk ana temadan gelir. İçerik wp-admin → "Ana Sayfa İçeriği" ekranından yönetilir. Kurallar: docs/00-anayasa.md Bölüm 4.
Version: 0.1.0
Text Domain: mami-midye-dolma
*/

/* ──────────────────────────────────────────────────────────
 * MAMİ MİDYE DOLMA — TASARIM
 *
 * Kaynak: design-lab/src/themes/mami (müşterinin kendi içerik ve tasarım
 * dokümanından kuruldu).
 *
 * MARKA İKİ ZEMİNDE BİRDEN YAŞIYOR — tasarımın tek büyük kararı bu:
 *   · LACİVERT + ALTIN → kurumsal görselin dili; toptan satışın ciddi tarafı
 *     (açılış, avantajlar, kampanya, kapanış)
 *   · KREM + TURUNCU   → kampanya görsellerinin dili; ürünün iştah açıcı
 *     tarafı (neden biz, süreç, kalite)
 *   Butonlar her iki zeminde de TURUNCU, WhatsApp her yerde AYNI YEŞİL:
 *   dönüşüm tek renkte kalmalı ki göz onu arayarak bulsun.
 *
 * Renkler theme.json token'larından TÜRETİLİR, burada yeniden yazılmaz.
 * Böylece palet tek kaynakta kalır (kontrolcünün `ham-hex` kuralı da bunu
 * zorluyor).
 * ────────────────────────────────────────────────────────── */

:root {
  --m-lacivert: var(--wp--preset--color--koyu);
  --m-lacivert-2: var(--wp--preset--color--koyu-2);
  --m-mavi: var(--wp--preset--color--mavi);
  --m-turuncu: var(--wp--preset--color--vurgu);
  --m-turuncu-2: var(--wp--preset--color--vurgu-koyu);
  --m-sari: var(--wp--preset--color--sari);
  --m-altin: var(--wp--preset--color--altin);
  --m-krem: var(--wp--preset--color--yuzey);
  --m-govde: var(--wp--preset--color--govde);
  --m-cizgi: var(--wp--preset--color--cizgi);
  --m-yesil: var(--wp--preset--color--yesil);
  --m-yesil-2: var(--wp--preset--color--yesil-koyu);
  --m-beyaz: var(--wp--preset--color--beyaz);

  --m-radius: 18px;
  /* Ana temanın kapsayıcı genişliği — .bs-kap bunu okur (kaynak: max-w-7xl) */
  --bs-kap: 1280px;
}

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

h1, h2, h3, h4, .m-baslik {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  color: var(--m-lacivert);
  letter-spacing: -0.02em;
}

/* ── TASARIM PRİMİTİFLERİ (kaynak: mami.css) ──────────────── */

/* Buton: pill. Marka bütün çağrılarını yuvarlak düğmeyle yapıyor. */
.m-btn {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 999px;
}

/* Kart köşesi — referanslardan bir tık sıkı. */
.m-kart { border-radius: var(--m-radius); }

/* Bölüm dikey ritmi. TEK KAYNAK burası; PHP tarafı yalnızca `m-bolum`
 * sınıfını basar, ölçüyü tekrar etmez. */
.m-bolum { padding-block: 64px; }
@media (min-width: 1024px) { .m-bolum { padding-block: 96px; } }

/* Kurumsal görselin altın saç teli — bölüm ayırıcı. */
.m-altin-cizgi {
  background: linear-gradient(to right, transparent, var(--m-altin) 30%, var(--m-altin) 70%, transparent);
}

/* Krem zeminlerde çok soluk deniz kabuğu dokusu. */
.m-doku {
  background-image: radial-gradient(circle at 1px 1px, rgb(6 27 49 / 0.055) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ── PREFLIGHT'IN EKSİK PARÇASI ────────────────────────────
 * Tailwind preflight BİLİNÇLİ olarak alınmıyor (ana temanın taban stillerini
 * ezerdi — bkz. src/giris.css). Ama bölümler saf Tailwind işaretlemesi ve o
 * işaretleme preflight'ın sıfırladığı tarayıcı varsayılanlarına güveniyor.
 * Alınmayınca dört şey kaynaktan sapıyor:
 *   · h1-h4 ve p'nin tarayıcı margin'i → her bölüm kaynaktan daha gevşek
 *   · ul/ol/dl'nin 40px padding'i     → madde listeleri sağa kayık
 *   · <button>'ın tarayıcı kutusu     → S.S.S. satırları ve masa düğmeleri
 *                                       gri kutu olarak çizilir
 *   · <input>'un koyu çerçevesi       → kaynakta yalnız ince kenarlık var
 * (120-0349'da dördü de canlı yaşandı.)
 *
 * `:where()` ZORUNLU: özgüllüğü sıfırlar. Düz `.mami-sayfa p` yazarsak
 * (0,1,1) Tailwind'in `.mt-5` sınıfını (0,1,0) ezer ve bu kez TASARIMIN
 * kendi boşlukları kaybolur.
 * ────────────────────────────────────────────────────────── */
:where(.mami-sayfa, .mami-duyuru, .mami-mobil-cta) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, form) {
  margin: 0;
  padding: 0;
}
:where(.mami-sayfa) :where(ul, ol) { list-style: none; }
:where(.mami-sayfa) :where(button, input, select, textarea) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
:where(.mami-sayfa) :where(button) { cursor: pointer; }

/* ── BÖLÜMLER ARASI 24px BOŞLUK ────────────────────────────
 * WordPress akış yerleşimine `:root :where(.is-layout-flow) > *
 * { margin-block-start: 24px }` kuralını kendisi ekliyor. Bölümler arasına
 * girince kremden lacivert bloğa geçerken arada beyaz bir bant kalıyor ve
 * sayfa boşuna ~240px uzuyor. Kaynakta bölümler birbirine YAPIŞIK; bant
 * ritmi (lacivert → beyaz → krem) ancak böyle okunuyor.
 *
 * Özgüllük WP kuralını geçmeli: bu seçici (0,1,1), onunki (0,1,0).
 * ────────────────────────────────────────────────────────── */
.mami-sayfa > section { margin-block: 0; }

/* ══════════════════════════════════════════════════════════
 * KABUK UYARLAMALARI
 * Yapı ana temadan gelir; marka dili buradan.
 * ══════════════════════════════════════════════════════════ */

/* ── ÜST ŞERİT ─────────────────────────────────────────────
 * Bu markada üst şerit KULLANILMIYOR: yerine tek cümlelik duyuru bandı var
 * (bkz. inc/bolumler.php `[mami_duyuru]`). Ana temanın şeridi yanlışlıkla
 * bir şablona girerse görünmesin. */
.bs-serit { display: none; }

/* ── BAŞLIK (navbar) ───────────────────────────────────────
 * Kaynak `sections/Header.tsx`: beyaz/95 + bulanık zemin, yapışkan, kaydırınca
 * yumuşak gölge. Menü öğeleri Manrope kalın, lacivert; hover'da turuncu.
 * ────────────────────────────────────────────────────────── */
/*
 * ÖZGÜLLÜK NOTU — bu bloktaki seçiciler bilerek `.bs-ust` ile ÖNEKLİ.
 *
 * Ana temanın işaretlemesi Tailwind yardımcı sınıfları taşıyor (`h-16`,
 * `gap-7`, `z-40`…) ve `tw.css` bu dosyadan SONRA yükleniyor. Tek sınıflı bir
 * kural (0,1,0) yardımcıyla eşit özgüllükte kalıp SONRAKİ dosyaya yeniliyor:
 * `.bs-ust__menu { gap }` yazınca `gap-7` kazanıyor, menü kaynaktakinden
 * geniş açılıyor ve çağrı düğmesi sağdan taşıyordu.
 *
 * İki sınıflı seçici (0,2,0) yardımcıyı sırasından bağımsız yener.
 */
header.bs-ust {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 0;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.3s;
}
.bs-ust[data-kaydi="1"] { box-shadow: 0 10px 30px -22px rgb(6 27 49 / 0.6); }

/* Satır: kaynakta sabit yükseklik YOK, dolgu belirliyor (py-3). */
.bs-ust .bs-ust__ic { height: auto; padding-block: 0.75rem; gap: 1.5rem; }
.bs-ust .bs-ust__gezinme { min-width: 0; }

.bs-ust .bs-logo { height: 2.5rem; transition: height 0.3s; }
@media (min-width: 1024px) { .bs-ust .bs-logo { height: 3rem; } }
.bs-ust[data-kaydi="1"] .bs-logo { height: 2.25rem; }
@media (min-width: 1024px) { .bs-ust[data-kaydi="1"] .bs-logo { height: 2.5rem; } }

/* Menü — kaynakta öğeler bitişik (gap-1), boşluğu dolgu veriyor. */
.bs-ust .bs-ust__menu { gap: 0.25rem; }
.bs-ust__menu > li > a {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.845rem;
  color: var(--m-lacivert);
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  transition: color 0.2s;
}
@media (min-width: 1280px) { .bs-ust__menu > li > a { padding-inline: 0.875rem; } }
.bs-ust__menu > li > a:hover { color: var(--m-turuncu); }

/* Alt menüsü olanın oku */
.bs-ust__menu .menu-item-has-children > a::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin-left: 0.15rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity: 0.4;
  transition: transform 0.3s;
}
.bs-ust__menu .menu-item-has-children:hover > a::after { transform: rotate(-135deg) translateY(2px); }

/* Alt menü paneli — kaynak sola hizalar */
.bs-ust__menu .sub-menu {
  left: 0; transform: none;
  width: 15rem; margin-top: 0.5rem; padding-block: 0.5rem;
  border: 1px solid var(--m-cizgi);
  border-radius: 1rem;
  background: var(--m-beyaz);
  box-shadow: 0 20px 45px -20px rgb(6 27 49 / 0.35);
}
.bs-ust__menu .sub-menu a {
  min-height: 0; padding: 0.625rem 1.25rem;
  font-size: 0.845rem; line-height: 1.4;
  color: var(--m-govde);
  transition: background-color 0.2s, color 0.2s;
}
.bs-ust__menu .sub-menu a:hover { background: var(--m-krem); color: var(--m-turuncu); }

/* Telefon — çerçeveli sade düğme (kaynak: xl ve üstünde görünür) */
.bs-ust .bs-ust__tel {
  display: none;
  border: 1px solid var(--m-cizgi);
  border-radius: 999px;
  padding: 0.625rem 1rem;
  font-size: 0.845rem;
  font-weight: 600;
  color: var(--m-lacivert);
  transition: border-color 0.2s;
}
.bs-ust .bs-ust__tel:hover { border-color: var(--m-lacivert); }
.bs-ust .bs-ust__tel .bs-ikon { color: var(--m-mavi); width: 1rem; height: 1rem; }
@media (min-width: 1280px) { .bs-ust .bs-ust__tel { display: inline-flex; } }

/* Çağrı düğmesi — turuncu pill */
.bs-ust__cagri.bs-cagri--dolu {
  gap: 0.5rem;
  min-height: 0;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.845rem;
  white-space: nowrap;
  background: var(--m-turuncu);
  color: var(--m-beyaz);
  box-shadow: 0 10px 22px -8px rgb(244 123 32 / 0.45);
}
.bs-ust__cagri.bs-cagri--dolu:hover {
  background: var(--m-turuncu-2);
  color: var(--m-beyaz);
  transform: translateY(-2px);
}

/* ── MOBİL ÇEKMECE ─────────────────────────────────────────
 * Kaynakta çekmece başlığın ALTINDAN açılıyor, tam ekran kaplamıyor. */
.bs-cekmece { border-top: 1px solid var(--m-cizgi); background: var(--m-beyaz); }
.bs-cekmece a { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; color: var(--m-lacivert); }
.bs-cekmece .sub-menu a { font-weight: 500; color: var(--m-govde); }

/* ── S.S.S. AKORDEONU ──────────────────────────────────────
 * Açık soruda başlık turuncuya döner ve artı işareti 45° dönerek çarpı olur.
 * (Kaynakta aynı hareket; ikon değiştirilmiyor, döndürülüyor.) */
.m-soru[data-acik="1"] .m-soru__yazi { color: var(--m-turuncu); }
.m-soru[data-acik="1"] .m-soru__isaret { transform: rotate(45deg); }

/* ── SİPARİŞ MASASI ────────────────────────────────────────
 * Seçili durum `aria-pressed` ile taşınıyor — ayrı bir sınıf tutmuyoruz ki
 * görünüm ile erişilebilirlik durumu birbirinden ayrışmasın. */
.m-secim[aria-pressed="true"] {
  border-color: var(--m-turuncu);
  background: var(--m-turuncu);
  color: var(--m-beyaz);
  box-shadow: 0 1px 2px rgb(6 27 49 / 0.12);
}

/* ── ALT BİLGİ ─────────────────────────────────────────────
 * Kaynak ortak `Footer.tsx`: koyu gradyan zemin, üstte ince altın çizgi,
 * seyrek nokta deseni, logo BEYAZ KART içinde.
 *
 * Logo TERS ÇEVRİLMEZ: marka logosu koyu zeminde kendi renkleriyle duruyor;
 * brightness(0)+invert(1) uygulanınca okunmaz bir kare kalıyor.
 * ────────────────────────────────────────────────────────── */
.bs-alt {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background: linear-gradient(to bottom right, var(--m-lacivert-2), var(--m-lacivert), rgb(0 0 0));
}
@media (min-width: 1024px) { .bs-alt { padding-block: 5rem; } }
.bs-alt::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; opacity: 0.7;
  background: linear-gradient(to right, transparent, var(--m-altin), transparent);
}
.bs-alt::after {
  content: ""; position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
  background-image: radial-gradient(circle at 2px 2px, var(--m-beyaz) 1px, transparent 0);
  background-size: 40px 40px;
}
.bs-alt > .bs-kap { position: relative; z-index: 1; }
.bs-alt .bs-logo--ters { filter: none; }
.bs-alt__marka .bs-logo {
  height: 3.5rem; padding: 1rem; border-radius: 1.8rem;
  background: rgb(255 255 255 / 0.95); box-sizing: content-box;
}
.bs-alt__tanit { margin-top: 1.5rem; max-width: 28rem; font-size: 1rem; opacity: 0.9; }
.bs-alt__sosyal a { width: 3rem; height: 3rem; border-radius: 1.8rem; }
.bs-alt__sosyal a .bs-ikon { width: 1.25rem; height: 1.25rem; }
.bs-alt__kutu { width: 2.75rem; height: 2.75rem; }
.bs-alt__kutu .bs-ikon { width: 1.25rem; height: 1.25rem; }
.bs-alt__baslik {
  position: relative; padding-bottom: 0.75rem;
  font-size: 1.125rem; font-weight: 700; line-height: 1.4;
  text-transform: none; letter-spacing: normal; color: var(--m-beyaz);
}
.bs-alt__baslik::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 3px;
  background: linear-gradient(to right, rgb(255 255 255 / 0.6), transparent);
}
.bs-alt__telif {
  margin-top: 4rem; padding-top: 2rem;
  border-top-color: rgb(255 255 255 / 0.2); font-size: 0.875rem;
}

/* ── SABİT DÜĞMELER ────────────────────────────────────────
 * Ana temanın `bs-float`u KULLANILIYOR — iki yuvarlak düğme: WhatsApp ve
 * telefon. Üçüncü düğme ("Konum") kendiliğinden çıkmıyor: yalnız `bs_harita`
 * ayarı doluysa çiziliyor ve bu markanın yayımlanmış adresi yok (doküman §16).
 *
 * KAYNAKTAN SAPMA (müşteri kararı, 2026-09-06): kaynak tasarım mobilde tam
 * genişlikte bir alt CTA barı, masaüstünde tek WhatsApp düğmesi öngörüyordu
 * (§19). Müşteri her iki ekranda da AYNI yuvarlak ikiliyi istedi — "toptan
 * sipariş" düğmesi WhatsApp ile aynı işi yaptığı için kaldırıldı. Alt bar da
 * kalktığı için çerez bandına yükseklik payı bırakmak gerekmiyor.
 *
 * Seçiciler iki sınıflı: işaretlemedeki `bg-beyaz`, `w-[3.25rem]` gibi
 * yardımcılar tw.css'te ve bu dosyadan SONRA yükleniyor.
 * ────────────────────────────────────────────────────────── */
.bs-float .bs-float__wa {
  background: var(--m-yesil);
  color: var(--m-beyaz);
  box-shadow: 0 10px 26px -8px rgb(37 211 102 / 0.55);
  outline: 2px solid rgb(255 255 255 / 0.25);
  outline-offset: -2px;
}
.bs-float .bs-float__wa:hover { background: var(--m-yesil-2); }
.bs-float .bs-float__wa .bs-ikon { width: 1.6rem; height: 1.6rem; }

.bs-float .bs-float__tel {
  background: var(--m-beyaz);
  color: var(--m-lacivert);
  box-shadow: 0 10px 26px -10px rgb(6 27 49 / 0.45);
  outline: 1px solid var(--m-cizgi);
  outline-offset: -1px;
}
.bs-float .bs-float__tel .bs-ikon { width: 1.4rem; height: 1.4rem; color: var(--m-turuncu); }