/* ============================================================
   ÇİÇEK ATÖLYESİ (cicekci) — imza katmanı. theme.css (motor) sonra yüklenir
   ve bu dosya onu ezer (layout: theme.css → tema.css sırası).

   KURAL: bu dosyada SABİT RENK YOKTUR. Her renk layout/theme.liquid'in :root'a
   bastığı değişkenden gelir (--cc-*, --renk-*, --uzeri-*), fallback'leri marka
   paletidir. Böylece başka bir çiçekçi yalnız `tenants.settings.tema.*` ayarlarını
   değiştirerek temayı yeniden renklendirir — CSS'e dokunmaz.
   İstisna: WhatsApp yeşili (#25D366 marka rengi) ve indirim yeşili (semantik).

   TİPOGRAFİ KARARI: web font YÜKLENMEZ. Başlıklar motorun `zarif` yığınıdır
   (Iowan Old Style / Palatino Linotype / Palatino / Georgia) — macOS, iOS ve
   Windows'ta gerçek bir zarif serif, Android'de Georgia/serif'e düşer. Gövde
   sistem sans'ıdır. Gerekçe: tek bir display face bile ~20-40 KB + ek bağlantı +
   FOUT demekti; PageSpeed bu temanın satış argümanı. Marka yazısı LOGO görselinde
   taşınır (gerçek marka fontu zaten orada).
   ============================================================ */

/* ---------------- Erişilebilirlik tabanı ---------------- */
.atla-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    padding: 0.75rem 1.25rem; background: var(--cc-yesil); color: var(--cc-yesil-uzeri);
    font-size: 0.9rem; text-decoration: none;
}
.atla-link:focus { left: 0; }
.gorsel-gizli {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--cc-altin); outline-offset: 2px; }
/* Dokunma hedefi tabanı — motorun 42px ikon butonları 44px'e çıkar */
.header-ikon-btn, .msb-oge, .cc-btn, .cc-wa-btn, .msb-kapat, .sidebar-ac {
    min-height: var(--cc-dokunma); min-width: var(--cc-dokunma);
}

/* ---------------- Gövde ritmi ---------------- */
body { background: var(--cc-krem); color: var(--cc-murekkep); }
.cc-bolum { padding-block: var(--cc-bolum-y); }
.cc-orta { text-align: center; }

/* Etiket (üst kaş) — altın, aralıklı, küçük */
.cc-etiket {
    display: block; font-size: var(--cc-etiket); letter-spacing: var(--cc-iz);
    text-transform: uppercase; color: var(--cc-altin); font-weight: 600;
    margin-bottom: var(--cc-bosluk-1);
}
.cc-etiket--acik { color: var(--cc-altin); }

/* Serif başlık */
.cc-baslik {
    font-family: var(--font-baslik); font-weight: 400; line-height: 1.12;
    font-size: var(--cc-baslik-l); color: var(--cc-yesil); margin: 0;
    letter-spacing: -0.01em;
}
.cc-baslik--acik { color: var(--cc-yesil-uzeri); }

/* İnce altın çizgi — bölüm ayıracı */
.cc-kural {
    display: block; width: 56px; height: 1px; margin: var(--cc-bosluk-3) 0;
    background: var(--cc-altin);
}
.cc-kural--orta { margin-inline: auto; }
.cc-kural--acik { background: var(--cc-altin-sogurt); }

.cc-bolum-ust {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--cc-bosluk-3); margin-bottom: var(--cc-bosluk-4); flex-wrap: wrap;
}
.cc-bolum-ust--orta { justify-content: center; text-align: center; }
.cc-bolum-ust-yazi { max-width: 56ch; }
.cc-bolum-metin { color: var(--cc-soluk); margin: 0; font-size: 1rem; }
.cc-bolum-metin--acik { color: color-mix(in srgb, var(--cc-yesil-uzeri) 82%, transparent); }
.cc-tumu {
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--cc-yesil); border-bottom: 1px solid var(--cc-altin-sogurt);
    padding-bottom: 2px; min-height: var(--cc-dokunma); align-self: flex-end;
}
.cc-tumu:hover { border-bottom-color: var(--cc-altin); }
.cc-bos { color: var(--cc-soluk); text-align: center; padding-block: var(--cc-bosluk-4); }

/* ---------------- Butonlar ---------------- */
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.85rem 1.75rem; font-size: 0.9rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--kose);
    border: 1px solid transparent; transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.cc-btn--dolu { background: var(--cc-yesil); color: var(--cc-yesil-uzeri); border-color: var(--cc-yesil); }
.cc-btn--dolu:hover { background: color-mix(in srgb, var(--cc-yesil) 84%, #000); }
.cc-btn--kontur { background: transparent; color: var(--cc-yesil-uzeri); border-color: var(--cc-altin); }
.cc-btn--kontur:hover { background: var(--cc-altin); color: var(--cc-yesil); border-color: var(--cc-altin); }
/* Görselsiz hero'da kontur buton krem zemindedir → yeşil metin gerekir */
.cc-hero--gorselsiz .cc-btn--kontur { color: var(--cc-yesil); }
.cc-hero--gorselsiz .cc-btn--kontur:hover { color: var(--cc-yesil); }

/* Motor butonları markaya çekilir (devralınan sayfalar: sepet, ödeme, hesap…) */
.btn-vurgu, .sepete-ekle { border-radius: var(--kose); letter-spacing: 0.04em; }

/* WhatsApp — marka rengi korunur (tanınırlık), biçim temaya uyar */
.cc-wa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.3rem; border-radius: var(--kose); background: #25D366;
    border: 1px solid #25D366; color: #06281A; font-weight: 600; font-size: 0.9rem;
    transition: filter var(--gecis);
}
.cc-wa-btn:hover { filter: brightness(0.94); }
.cc-wa-btn--kontur { background: transparent; border-color: var(--cc-hairline); color: inherit; }
.cc-wa-btn--kontur:hover { background: #25D366; border-color: #25D366; color: #06281A; filter: none; }
.cc-wa-btn--tam { width: 100%; }
.wa-float { background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }

/* ---------------- Duyuru + header ---------------- */
.duyuru-cubugu {
    background: var(--cc-yesil); color: var(--cc-yesil-uzeri);
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    border-bottom: 1px solid var(--cc-altin-sogurt);
}
.cc-header {
    background: color-mix(in srgb, var(--cc-krem) 92%, transparent);
    border-bottom: 1px solid var(--cc-hairline);
}
.cc-header > .kap { column-gap: var(--cc-bosluk-3); row-gap: 0; min-height: 76px; }
/* Logo METNİ (mağaza logo yüklemediğinde basılır — header.liquid fallback'i).
   Uzun mağaza adı header'ı TAŞIRMAZ: kutusu daralabilir, sığmayan kısım
   üç nokta olur. (Platform eskiden bu taşmayı RapiSoft logosu enjekte ederek
   gizliyordu — render.util.ts'teki not.) */
.cc-logo { min-width: 0; }
.cc-logo-metin {
    display: block; font-family: var(--font-baslik); font-weight: 400; font-size: 1.25rem;
    letter-spacing: 0.02em; color: var(--cc-yesil);
    max-width: min(52vw, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Üst menü: iki satırlı header (taşma/çakışma kök çözümü) ----
   SORUN: menü, arama kutusu ve WhatsApp düğmesiyle AYNI satırda yer için
   yarışıyordu. 8 üst kategori (bir çiçekçi için olağan) ~780 px yer ister, oysa
   1440 px'te menüye kalan kutu ~505 px'tir → öğeler komşularının üstüne basıyordu.
   KARAR: menü kendi satırına alınır (≥1025 px) ve 1024 px altında motorun
   drill-down sidebar'ına (hamburger) iner. Böylece menü her zaman TAM genişlikte
   bir kutuya sahiptir, hiçbir öğe gizlenmez/kısaltılmaz, yatay kaydırma çubuğu
   gerekmez, WhatsApp düğmesi üst satırda erişilebilir kalır. Ek emniyet: motorun
   `flex-wrap: wrap` davranışı geri verilir + `min-width: 0` → 12 öğeyle bile
   çakışma değil, ikinci satıra sarma olur. */
.cc-nav { flex-wrap: wrap; gap: 0; min-width: 0; }
@media (min-width: 1025px) {
    .cc-header > .kap {
        display: grid; grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "logo sag" "nav nav";
        align-items: center; min-height: 0;
        padding-top: var(--cc-bosluk-2); padding-bottom: 0;
    }
    .cc-header > .kap > .cc-logo { grid-area: logo; }
    .cc-header > .kap > .header-sag { grid-area: sag; margin-left: 0; justify-self: end; }
    .cc-header > .kap > .cc-nav {
        grid-area: nav; width: 100%; justify-content: center;
        margin-top: var(--cc-bosluk-2); padding-block: 0.15rem;
        border-top: 1px solid var(--cc-hairline);
    }
}
/* ≤1024 px: menü hamburger'a iner (motor 767 px'te indiriyordu; çiçekçide menü
   öğeleri büyük harf + geniş iz olduğu için eşik yukarı taşındı). Sidebar aynı
   menüyü tam erişilebilir (44 px hedef, drill-down) veriyor. */
@media (max-width: 1024px) {
    .cc-header .sidebar-ac { display: inline-grid; }
    .cc-header .cc-nav { display: none; }
}
.cc-nav > a, .cc-nav .nav-acilir > a {
    position: relative; color: var(--cc-murekkep); font-weight: 500;
    font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.6rem 0.75rem; white-space: nowrap; background: none;
}
.cc-nav > a:hover, .cc-nav .nav-acilir > a:hover { background: none; color: var(--cc-yesil); }
.cc-nav > a::after, .cc-nav .nav-acilir > a::after {
    content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.3rem;
    height: 1px; background: var(--cc-altin); transform: scaleX(0); transform-origin: left;
    transition: transform 0.24s ease;
}
.cc-nav > a:hover::after, .cc-nav .nav-acilir > a:hover::after { transform: scaleX(1); }
.cc-arama input { background: transparent; border-color: var(--cc-hairline); border-radius: var(--kose); }
.cc-arama input:focus { border-color: var(--cc-altin); background: var(--cc-krem); }
.cc-header-wa .cc-wa-btn { padding: 0.5rem 0.9rem; }
@media (max-width: 1024px) { .cc-header-wa { display: none; } }
.cc-sidebar { background: var(--cc-krem); }
.msb-wa { padding: var(--cc-bosluk-3) 1.25rem; }

/* ---------------- 1. Hero ---------------- */
.cc-hero {
    position: relative; display: flex; align-items: flex-end;
    min-height: clamp(420px, 72vh, 760px); overflow: hidden;
    background: var(--cc-krem-koyu);
}
.cc-hero-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-hero-perde {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cc-yesil) 18%, transparent) 0%,
        color-mix(in srgb, var(--cc-yesil) 72%, transparent) 100%);
}
.cc-hero-ic { position: relative; padding-block: var(--cc-bolum-y); max-width: 60ch; }
.cc-hero .cc-etiket, .cc-hero .cc-hero-baslik, .cc-hero .cc-hero-alt { color: var(--cc-yesil-uzeri); }
.cc-hero-baslik {
    font-family: var(--font-baslik); font-weight: 400; font-size: var(--cc-baslik-xl);
    line-height: 1.06; margin: 0; letter-spacing: -0.015em;
}
.cc-hero-alt { font-size: clamp(1rem, 1.6vw, 1.15rem); margin: 0 0 var(--cc-bosluk-3); max-width: 46ch; }
.cc-hero-btnler { display: flex; flex-wrap: wrap; gap: var(--cc-bosluk-2); }
/* Görselsiz (yeni mağaza) hali: krem zemin, yeşil metin — kırık kapak yok */
.cc-hero--gorselsiz { min-height: 0; border-bottom: 1px solid var(--cc-hairline); }
.cc-hero--gorselsiz .cc-etiket { color: var(--cc-altin); }
.cc-hero--gorselsiz .cc-hero-baslik, .cc-hero--gorselsiz .cc-hero-alt { color: var(--cc-yesil); }

/* ---------------- 2. Vesileler (story-halkalar sözleşmesi, kare karo imzası) ---------------- */
.cc-vesile { padding-block: var(--cc-bolum-y); }
.cc-vesile-baslik { text-align: center; }
.cc-vesile-ray { gap: var(--cc-bosluk-3); padding-block: 0; }
.cc-vesile-karo { width: clamp(118px, 14vw, 170px); }
/* Motorun yuvarlak halkası → kare krem karo + altın hairline */
.cc-vesile-karo .story-cerc {
    width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--kose);
    padding: 0; background: none; border: 1px solid var(--cc-hairline);
    display: block; overflow: hidden;
}
.cc-vesile-karo .story-ic {
    width: 100%; height: 100%; border-radius: 0; background: var(--cc-krem-koyu);
    display: grid; place-items: center; color: var(--cc-altin); overflow: hidden;
}
.cc-vesile-karo .story-ic img { width: 100%; height: 100%; object-fit: cover; }
.cc-vesile-karo:hover .story-cerc { border-color: var(--cc-altin); }
.cc-vesile-karo .story-etiket {
    display: block; margin-top: var(--cc-bosluk-2); font-weight: 500;
    font-size: 0.88rem; color: var(--cc-yesil); text-align: center; letter-spacing: 0.02em;
}
.cc-vesile-karo .story-alt { display: block; text-align: center; color: var(--cc-soluk); font-size: 0.75rem; }

/* ---------------- 3. Ürün kartları ---------------- */
.cc-urun-grid { gap: var(--cc-bosluk-3) var(--cc-bosluk-2); }
.cc-kart { border: 0; background: transparent; border-radius: 0; }
.cc-kart .urun-kart-gorsel {
    border-radius: var(--kose); overflow: hidden; background: var(--cc-krem-koyu);
    border: 1px solid transparent; transition: border-color var(--gecis);
}
.cc-kart:hover .urun-kart-gorsel { border-color: var(--cc-altin-sogurt); }
.cc-kart .urun-ad {
    font-family: var(--font-baslik); font-weight: 400; font-size: 1.02rem;
    color: var(--cc-yesil); line-height: 1.3;
}
.cc-kart .urun-marka { color: var(--cc-altin); letter-spacing: var(--cc-iz); font-size: 0.68rem; text-transform: uppercase; }
.cc-kart .guncel-fiyat { color: var(--cc-murekkep); font-weight: 600; }
.cc-kart .eski-fiyat { color: var(--cc-soluk); }
.cc-kart .indirim-rozet, .cc-kart .tukendi-rozet {
    border-radius: var(--kose); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.cc-kart .tukendi-rozet { background: var(--cc-yesil); color: var(--cc-yesil-uzeri); }
.cc-kart--tukendi .urun-kart-gorsel { opacity: 0.62; }
.cc-kart .kart-hizli { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }
.cc-kart .gorsel-yok { color: var(--cc-altin-sogurt); }

/* ---------------- 4. Portföy galerisi ---------------- */
.cc-galeri { display: grid; gap: var(--cc-bosluk-2); }
.cc-galeri-oge { margin: 0; position: relative; overflow: hidden; border-radius: var(--kose); background: var(--cc-krem-koyu); }
.cc-galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.cc-galeri-oge:hover img { transform: scale(1.03); }
.cc-galeri-yazi {
    position: absolute; inset-inline: 0; bottom: 0; padding: 0.7rem 0.9rem;
    font-size: 0.8rem; color: var(--cc-yesil-uzeri);
    background: linear-gradient(0deg, color-mix(in srgb, var(--cc-yesil) 82%, transparent), transparent);
}
.cc-galeri--portfolyo { grid-template-columns: repeat(4, 1fr); }
.cc-galeri--portfolyo .cc-galeri-oge { aspect-ratio: 4 / 5; }
/* İlk karo iki kolon/iki satır — editoryal ritim */
.cc-galeri--portfolyo .cc-galeri-oge:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.cc-cta-satir {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--cc-bosluk-2); margin-top: var(--cc-bosluk-4);
}
.cc-cta-satir--sol { justify-content: flex-start; margin-top: var(--cc-bosluk-3); }
.cc-cta-not { margin: 0; font-size: 0.84rem; color: var(--cc-soluk); max-width: 46ch; }

/* ---------------- 5. Gelin arabası (koyu şerit) ---------------- */
.cc-gelin { background: var(--cc-yesil); color: var(--cc-yesil-uzeri); }
.cc-gelin-ic {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--cc-bosluk-4); align-items: center;
}
.cc-galeri--gelin { grid-template-columns: repeat(2, 1fr); }
.cc-galeri--gelin .cc-galeri-oge { aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--cc-yesil) 80%, #fff); }

/* ---------------- 6. Teslimat güvencesi ---------------- */
.cc-guvence {
    background: var(--cc-krem-koyu);
    border-block: 1px solid var(--cc-hairline);
    padding-block: clamp(2rem, 4vw, 3.25rem);
}
.cc-guvence-ic { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cc-bosluk-4); }
.cc-guvence-kart { text-align: center; }
.cc-guvence-ikon { display: inline-grid; place-items: center; color: var(--cc-altin); margin-bottom: var(--cc-bosluk-1); }
.cc-guvence-baslik {
    font-family: var(--font-baslik); font-weight: 400; font-size: var(--cc-baslik-m);
    color: var(--cc-yesil); margin: 0 0 0.35rem;
}
.cc-guvence-metin { margin: 0; color: var(--cc-soluk); font-size: 0.94rem; }

/* ---------------- 7. Atölye hikâyesi ---------------- */
.cc-hikaye-ic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-bosluk-4); align-items: center; }
.cc-hikaye-gorsel { border-radius: var(--kose); overflow: hidden; background: var(--cc-krem-koyu); aspect-ratio: 4 / 5; }
.cc-hikaye-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.cc-hikaye-metin { color: var(--cc-soluk); line-height: 1.75; }
.cc-hikaye-metin p { margin-top: 0; }

/* ---------------- 8. Yorumlar ---------------- */
.cc-yorumlar { background: var(--cc-krem-koyu); border-block: 1px solid var(--cc-hairline); }
.cc-yorum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--cc-bosluk-3); }
.cc-yorum-kart {
    margin: 0; padding: var(--cc-bosluk-3); background: var(--cc-krem);
    border: 1px solid var(--cc-hairline); border-radius: var(--kose);
}
.cc-yildiz { color: var(--cc-altin); margin-bottom: var(--cc-bosluk-1); }
.cc-yorum-metin { margin: 0 0 var(--cc-bosluk-2); font-family: var(--font-baslik); font-size: 1.02rem; line-height: 1.55; color: var(--cc-murekkep); }
.cc-yorum-ad { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-altin); }

/* ---------------- 9. SSS ---------------- */
.cc-sss { padding-block: var(--cc-bolum-y); }
.cc-sss-madde {
    border-bottom: 1px solid var(--cc-hairline); border-top: 0; border-inline: 0;
    background: transparent; border-radius: 0; padding: 0;
}
.cc-sss-madde summary {
    font-family: var(--font-baslik); font-size: 1.05rem; color: var(--cc-yesil);
    padding-block: 1.05rem; min-height: var(--cc-dokunma); cursor: pointer;
}
.cc-sss-madde[open] summary { color: var(--cc-altin); }
.cc-sss-madde .sss-cevap { color: var(--cc-soluk); padding-bottom: 1.1rem; }

/* ---------------- 10. Footer ---------------- */
.cc-footer {
    background: var(--renk-footer, var(--cc-yesil));
    color: color-mix(in srgb, var(--uzeri-footer, var(--cc-yesil-uzeri)) 84%, transparent);
    border-top: 1px solid var(--cc-altin-sogurt);
}
.cc-footer .footer-cta { display: none; }        /* bülten sağ kolonda — çift form olmaz */
.cc-footer .footer-grup-baslik,
.cc-footer .footer-marka { color: var(--uzeri-footer, var(--cc-yesil-uzeri)); }
.cc-footer .footer-grup-baslik {
    font-size: 0.74rem; letter-spacing: var(--cc-iz); text-transform: uppercase; font-weight: 600;
}
.cc-footer a { color: color-mix(in srgb, var(--uzeri-footer, var(--cc-yesil-uzeri)) 82%, transparent); }
.cc-footer a:hover { color: var(--cc-altin); }
.cc-footer .footer-marka { font-family: var(--font-baslik); font-size: 1.3rem; }
.cc-footer-ust { border-color: var(--cc-altin-sogurt); }
.cc-footer .footer-kolon + .footer-kolon { border-color: var(--cc-altin-sogurt); }
.cc-footer-wa { margin-top: var(--cc-bosluk-3); }
.cc-footer-wa .cc-wa-btn--kontur { border-color: var(--cc-altin-sogurt); color: inherit; }
/* Bülten kaydı — motorun `data-footer="koyu"` gizlemesi BU footer'da geri açılır.
   Motor kuralı (theme.css: `body[data-footer="koyu"] .footer-bulten--takip,
   … .footer-bulten-metin { display: none }`) koyu footer'ın ÜSTÜNDE ayrı bir bülten
   bandı olduğunu varsayar; çiçekçi footer'ında o bant yok (`.footer-cta` yukarıda
   bilerek kapalı) → kayıt formu hiçbir yerde görünmüyordu, "Bizi takip edin"
   başlığı 230 px boş kolonun üstünde kalıyordu. Burada motor seçicisine `.cc-footer`
   eklenerek (daha yüksek özgüllük, `!important` YOK) yalnız bu temada geri açılır;
   koyu zemin girdi stilleri motordan aynen gelmeye devam eder. */
body[data-footer="koyu"] .cc-footer .footer-bulten--takip,
body[data-footer="cta"] .cc-footer .footer-bulten--takip { display: flex; }
body[data-footer="koyu"] .cc-footer .footer-bulten-metin,
body[data-footer="cta"] .cc-footer .footer-bulten-metin { display: block; }
.cc-footer .cc-bulten-baslik { margin-top: var(--cc-bosluk-3); }
.cc-footer .footer-bulten--takip .btn-vurgu {
    background: var(--cc-altin); border-color: var(--cc-altin); color: var(--cc-yesil);
}
.cc-footer .bulten-onay a { color: var(--cc-altin); }
.cc-harita { margin-bottom: var(--cc-bosluk-3); border-radius: var(--kose); overflow: hidden; border: 1px solid var(--cc-altin-sogurt); }
.cc-harita iframe { display: block; width: 100%; height: 200px; }
.cc-footer .footer-telif, .cc-footer .footer-altyapi { color: color-mix(in srgb, var(--uzeri-footer, var(--cc-yesil-uzeri)) 70%, transparent); }

/* ---- Koyu footer zemininde okunabilirlik (tema katmanı) ----
   BU footer `data-footer` ne olursa olsun KOYUdur: zemini `--renk-footer`'dan gelir
   (yukarıdaki `.cc-footer` kuralı), oysa motorun kontrast düzeltmeleri yalnız
   `body[data-footer="koyu"]` iken devreye girer. Mağaza sahibi footer tipini
   "kolonlu" / "ince" / "cta" seçtiğinde motor düzeltmesi KAPANIR ama zemin koyu
   kalır → bu yüzden tema kendi düzeltmesini de taşımak ZORUNDA.

   Seçicilerin `body[data-footer]` ile başlaması bir süsleme değil, özgüllük
   zorunluluğu: motor kuralları `body[data-footer="koyu"] .site-footer .X`
   (0,3,1) özgüllüğünde; sade `.cc-footer .X` (0,2,0) onları EZEMEZ (tema.css
   sonra yüklense bile). `[data-footer]` niteliği layout'ta HER ZAMAN basılır,
   dolayısıyla bu seçiciler bütün footer tiplerinde eşleşir. `!important` YOK.

   Oranlar `--uzeri-footer: #ffffff` ve `--renk-footer: #16382B` ile (WCAG):
     · %72 beyaz → 7,5:1   (gövde metni — AA 4,5:1'in üstünde)
     · %68 beyaz → 6,8:1   (placeholder)
     · tam beyaz → 12,9:1  (grup başlıkları)
     · `--cc-altin` (#B08A4A) → 4,0:1 → SADECE ikon/kenar (AA UI eşiği 3:1);
       altın gövde metni için kullanılmaz (4,5:1'i geçmez). */
body[data-footer] .cc-footer .footer-slogan,
body[data-footer] .cc-footer .footer-alt,
body[data-footer] .cc-footer .footer-bulten-metin,
body[data-footer] .cc-footer .bulten-onay {
    color: color-mix(in srgb, var(--uzeri-footer, var(--cc-yesil-uzeri)) 72%, transparent);
}
/* Motorun `.bulten-onay { opacity: .85 }`'i yukarıdaki 72%'nin üstüne binerek
   oranı düşürüyordu → renk açıkça verildiği için saydamlık geri alınır. */
body[data-footer] .cc-footer .bulten-onay { opacity: 1; }
/* Grup başlıkları: temanın niyeti (tam `--uzeri-footer`) motorun .62 kuralı
   tarafından eziliyordu — artık gerçekten uygulanır. */
body[data-footer] .cc-footer .footer-grup-baslik { color: var(--uzeri-footer, var(--cc-yesil-uzeri)); }
/* İkonlar metin değil → altın aksan burada hem erişilebilir hem imza rengi. */
body[data-footer] .cc-footer .footer-odeme .ikon,
body[data-footer] .cc-footer .footer-iletisim .ikon { color: var(--cc-altin); }
/* Bülten alanı: kenar altın (4,0:1 — AA UI), yazı beyaz, placeholder %68. */
body[data-footer] .cc-footer .footer-bulten--takip input {
    border-color: var(--cc-altin); color: var(--uzeri-footer, var(--cc-yesil-uzeri));
}
body[data-footer] .cc-footer .footer-bulten--takip input::placeholder {
    color: color-mix(in srgb, var(--uzeri-footer, var(--cc-yesil-uzeri)) 68%, transparent);
}

/* ---------------- Duyarlı davranış ---------------- */
@media (max-width: 1024px) {
    .cc-galeri--portfolyo { grid-template-columns: repeat(3, 1fr); }
    .cc-gelin-ic, .cc-hikaye-ic { grid-template-columns: 1fr; }
    .cc-guvence-ic { gap: var(--cc-bosluk-3); }
}
@media (max-width: 760px) {
    .cc-hero { align-items: center; }
    .cc-hero-btnler .cc-btn { flex: 1 1 auto; }
    .cc-galeri--portfolyo { grid-template-columns: repeat(2, 1fr); }
    .cc-galeri--portfolyo .cc-galeri-oge:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
    .cc-guvence-ic { grid-template-columns: 1fr; }
    .cc-bolum-ust { align-items: flex-start; }
    .cc-tumu { align-self: flex-start; }
    .cc-harita iframe { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-galeri-oge img, .cc-nav > a::after, .cc-nav .nav-acilir > a::after { transition: none; }
    .cc-galeri-oge:hover img { transform: none; }
}

/* ============================================================
   İÇ SAYFALAR (2. görev) — kategori · ürün · içerik/portföy · arama · blog · 404
   Kural aynı: SABİT RENK YOK, her değer layout'un bastığı token'dan gelir.
   Motorun (theme.css) DÜZEN MEKANİĞİNE dokunulmaz — burada yalnız tipografi,
   renk, hairline ve ritim imzası var. Böylece filtre paneli/drawer davranışı,
   galeri zoom'u ve koleksiyon-ajax bölgesi motorun kurduğu gibi çalışır.
   ============================================================ */

/* ---------------- Ortak iç sayfa ritmi ---------------- */
.cc-kirinti {
    font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cc-soluk); margin-bottom: var(--cc-bosluk-2);
}
.cc-kirinti a { color: var(--cc-soluk); }
.cc-kirinti a:hover { color: var(--cc-altin); }
.cc-kap-dar { max-width: 820px; }
.cc-ic-ust { padding-top: var(--cc-bosluk-4); }
.cc-ic-ust .cc-bolum-ust { margin-bottom: var(--cc-bosluk-3); }
.cc-ic-ust .cc-baslik { font-size: var(--cc-baslik-xl); }
.cc-ic-ust .cc-kural { margin-block: var(--cc-bosluk-2); }
.cc-cip {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px;
    padding: 0.4rem 0.9rem; border: 1px solid var(--cc-hairline);
    border-radius: var(--kose); background: transparent; color: var(--cc-murekkep);
    font-size: 0.82rem; letter-spacing: 0.02em; font-weight: 500;
}
.cc-cip:hover { border-color: var(--cc-altin); background: var(--cc-krem-koyu); color: var(--cc-yesil); }
.cc-cip.aktif { background: var(--cc-yesil); border-color: var(--cc-yesil); color: var(--cc-yesil-uzeri); }
.cc-sayfalama a, .cc-sayfalama span {
    border-radius: var(--kose); border-color: var(--cc-hairline);
    font-size: 0.82rem; letter-spacing: 0.04em;
}
.cc-sayfalama a:hover { background: var(--cc-yesil); border-color: var(--cc-yesil); color: var(--cc-yesil-uzeri); }
.cc-sayfalama .aktif-sayfa { background: var(--cc-yesil); border-color: var(--cc-yesil); color: var(--cc-yesil-uzeri); }

/* ---------------- Kategori / liste ---------------- */
.cc-koleksiyon-kapak {
    margin-top: var(--cc-bosluk-3); border-radius: var(--kose); overflow: hidden;
    background: var(--cc-krem-koyu); border: 1px solid var(--cc-hairline);
    aspect-ratio: 16 / 5;
}
.cc-koleksiyon-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-alt-kategoriler { margin-bottom: var(--cc-bosluk-3); }
.cc-alt-kategoriler .alt-kategoriler-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cc-arac {
    background: transparent; border-top: 1px solid var(--cc-hairline);
    border-bottom: 1px solid var(--cc-hairline); border-radius: 0;
    padding: 0.6rem 0; margin-bottom: var(--cc-bosluk-3);
}
.cc-arac-sayi {
    font-size: 0.74rem; letter-spacing: var(--cc-iz); text-transform: uppercase;
    color: var(--cc-soluk);
}
.cc-arac-sag { display: flex; align-items: center; gap: 0.6rem; }
.cc-arac-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--cc-dokunma);
    padding: 0.5rem 0.9rem; background: transparent; border: 1px solid var(--cc-hairline);
    border-radius: var(--kose); color: var(--cc-murekkep);
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.cc-arac-btn:hover { border-color: var(--cc-altin); color: var(--cc-yesil); }
.cc-filtre { background: var(--cc-krem); border-color: var(--cc-hairline); }
.cc-filtre .filtre-grup-baslik {
    font-size: 0.72rem; letter-spacing: var(--cc-iz); text-transform: uppercase;
    color: var(--cc-altin); font-weight: 600;
}
.cc-filtre .filtre-panel-ust h2 { font-family: var(--font-baslik); font-weight: 400; color: var(--cc-yesil); }
.cc-filtre .filtre-temizle { color: var(--cc-soluk); }
.cc-filtre .filtre-temizle:hover { color: var(--cc-altin); }
.cc-koleksiyon-cta { border-top: 1px solid var(--cc-hairline); padding-top: var(--cc-bosluk-3); }

/* ---------------- Ürün sayfası ---------------- */
.cc-urun { padding-top: var(--cc-bosluk-3); }
.cc-urun-izgara { padding-bottom: var(--cc-bolum-y); }
.cc-urun-galeri .galeri-ana {
    border-radius: var(--kose); overflow: hidden; background: var(--cc-krem-koyu);
    border: 1px solid var(--cc-hairline);
}
.cc-urun-galeri .galeri-kucuk {
    border-radius: var(--kose); overflow: hidden; border: 1px solid var(--cc-hairline);
    background: var(--cc-krem-koyu); padding: 0;
}
.cc-urun-galeri .galeri-kucuk.secili { border-color: var(--cc-altin); }
.cc-urun-galeri .galeri-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-gorsel-yok { display: grid; place-items: center; color: var(--cc-altin-sogurt); }
.cc-urun-ad {
    font-family: var(--font-baslik); font-weight: 400; line-height: 1.12;
    font-size: var(--cc-baslik-l); color: var(--cc-yesil); margin: 0.2rem 0 0;
    letter-spacing: -0.01em;
}
.cc-urun-bilgi > .cc-kural { margin-block: var(--cc-bosluk-2); }
.cc-mini-yildiz { color: var(--cc-soluk); font-size: 0.84rem; }
.cc-mini-yildiz .yildizlar { color: var(--cc-altin); }
.cc-urun-fiyat .guncel-fiyat { font-family: var(--font-baslik); font-weight: 400; color: var(--cc-murekkep); }
.cc-urun-fiyat .eski-fiyat { color: var(--cc-soluk); }
.cc-secenek-grup .secenek-ad {
    font-size: 0.72rem; letter-spacing: var(--cc-iz); text-transform: uppercase;
    color: var(--cc-altin); font-weight: 600;
}
.cc-secenek-grup .secenek-deger {
    border-radius: var(--kose); border-color: var(--cc-hairline);
    min-height: var(--cc-dokunma); background: transparent;
}
.cc-secenek-grup .secenek-deger.secili { border-color: var(--cc-yesil); background: var(--cc-yesil); color: var(--cc-yesil-uzeri); }
.cc-stok {
    font-size: 0.76rem; letter-spacing: var(--cc-iz); text-transform: uppercase;
    color: var(--cc-soluk);
}
.cc-stok[data-stok="0"] { color: var(--cc-altin); }
.cc-aksiyonlar { display: flex; gap: var(--cc-bosluk-2); align-items: stretch; flex-wrap: wrap; }
.cc-aksiyonlar .cc-btn--dolu { flex: 1 1 220px; }
.cc-aksiyonlar .favori-btn {
    min-width: var(--cc-dokunma); min-height: var(--cc-dokunma);
    border: 1px solid var(--cc-hairline); border-radius: var(--kose);
    background: transparent; color: var(--cc-yesil);
}
.cc-aksiyonlar .favori-btn:hover { border-color: var(--cc-altin); }
.cc-urun-bilgi .cc-wa-btn--tam { margin-top: var(--cc-bosluk-2); }
/* Temsilî görsel uyarısı — altın hairline ile ayrılmış küçük not */
.cc-urun-uyari {
    margin: var(--cc-bosluk-2) 0 0; padding-left: 0.85rem;
    border-left: 1px solid var(--cc-altin); color: var(--cc-soluk);
    font-size: 0.84rem; line-height: 1.6;
}
.cc-urun-teslimat { list-style: none; margin: var(--cc-bosluk-3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.cc-urun-teslimat li {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.88rem; color: var(--cc-murekkep);
}
.cc-urun-teslimat .ikon { color: var(--cc-altin); flex: none; }
.cc-not {
    margin-top: var(--cc-bosluk-3); padding: var(--cc-bosluk-2);
    background: var(--cc-krem-koyu); border: 1px solid var(--cc-hairline);
    border-radius: var(--kose);
}
.cc-not .urun-notu-etiket {
    display: block; font-size: 0.72rem; letter-spacing: var(--cc-iz);
    text-transform: uppercase; color: var(--cc-altin); font-weight: 600;
    margin-bottom: var(--cc-bosluk-1);
}
.cc-not .urun-notu-ops { letter-spacing: 0; text-transform: none; color: var(--cc-soluk); font-weight: 400; }
.cc-not .urun-notu-kutu {
    width: 100%; background: var(--cc-krem); border: 1px solid var(--cc-hairline);
    border-radius: var(--kose); padding: 0.7rem 0.8rem; color: var(--cc-murekkep);
    font: inherit; resize: vertical;
}
.cc-not .urun-notu-kutu:focus { border-color: var(--cc-altin); outline: none; }
.cc-not .urun-notu-alt {
    display: flex; justify-content: space-between; gap: 0.6rem;
    margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--cc-soluk);
}
.cc-not .urun-notu-hata { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--cc-altin); }
.cc-katlanir {
    margin-top: var(--cc-bosluk-3); border: 0; border-top: 1px solid var(--cc-hairline);
    border-radius: 0; background: transparent; padding: 0;
}
.cc-katlanir > summary {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    min-height: var(--cc-dokunma); padding-block: 0.75rem;
    font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cc-yesil); font-weight: 600;
}
.cc-katlanir[open] > summary { color: var(--cc-altin); }
.cc-urun-guven {
    background: transparent; border-block: 1px solid var(--cc-hairline);
    border-radius: 0; padding: var(--cc-bosluk-2) 0;
}
.cc-urun-guven .urun-guven-oge { color: var(--cc-soluk); letter-spacing: 0.04em; }
.cc-urun-guven .ikon { color: var(--cc-altin); }
.cc-urun-aciklama { margin-top: var(--cc-bosluk-3); color: var(--cc-murekkep); line-height: 1.75; }
.cc-urun-aciklama h2 {
    font-family: var(--font-baslik); font-weight: 400; font-size: var(--cc-baslik-m);
    color: var(--cc-yesil); margin: 0 0 var(--cc-bosluk-1);
}
.cc-yorum-bolum { background: var(--cc-krem-koyu); border-block: 1px solid var(--cc-hairline); }
.cc-yorum-bolum .yorum-kart, .cc-yorum-bolum .soru-kart {
    background: var(--cc-krem); border-color: var(--cc-hairline); border-radius: var(--kose);
}
.cc-yorum-bolum .yildizlar, .urun-sorular .yildizlar { color: var(--cc-altin); }

/* ---------------- İçerik sayfası (zengin HTML) ----------------
   Panel içerik editörünün ürettiği HTML sunucuda beyaz listeyle temizlenir;
   burada yalnız okunur tipografi verilir. Motor sürümünde şablonun içindeydi,
   imza katmanı tek dosyada kalsın diye BURAYA taşındı. */
.cc-sayfa-govde { line-height: 1.8; color: var(--cc-murekkep); }
.cc-sayfa-govde > *:first-child { margin-top: 0; }
.cc-sayfa-govde h2, .cc-sayfa-govde h3 {
    font-family: var(--font-baslik); font-weight: 400; color: var(--cc-yesil);
    line-height: 1.2; margin-top: var(--cc-bosluk-3);
}
.cc-sayfa-govde img { max-width: 100%; height: auto; border-radius: var(--kose); }
.cc-sayfa-govde iframe {
    display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto;
    border: 0; border-radius: var(--kose); margin: var(--cc-bosluk-3) 0;
}
.cc-sayfa-govde table {
    width: 100%; border-collapse: collapse; margin: var(--cc-bosluk-3) 0;
    display: block; overflow-x: auto;
}
.cc-sayfa-govde th, .cc-sayfa-govde td { border: 1px solid var(--cc-hairline); padding: 8px 10px; text-align: left; }
.cc-sayfa-govde th { background: var(--cc-krem-koyu); font-weight: 600; }
.cc-sayfa-govde blockquote {
    margin: var(--cc-bosluk-3) 0; padding: 0.2rem 0 0.2rem 1.1rem;
    border-left: 1px solid var(--cc-altin); color: var(--cc-soluk);
    font-family: var(--font-baslik); font-size: 1.08rem;
}
.cc-sayfa-govde hr { border: 0; border-top: 1px solid var(--cc-hairline); margin: var(--cc-bosluk-4) 0; }
.cc-sayfa-govde ul, .cc-sayfa-govde ol { padding-left: 1.4rem; margin: var(--cc-bosluk-2) 0; }
.cc-sayfa-govde a { color: var(--cc-yesil); text-decoration: underline; text-decoration-color: var(--cc-altin-sogurt); }
.cc-sayfa-govde a:hover { text-decoration-color: var(--cc-altin); }
.cc-sayfa-govde figure { margin: var(--cc-bosluk-3) 0; }
.cc-sayfa-govde figcaption { font-size: 0.82rem; color: var(--cc-soluk); margin-top: 0.4rem; letter-spacing: 0.02em; }

/* ---------------- Portföy sayfası ----------------
   Fotoğraflar mağaza sahibinin yazdığı içerikten gelir: markup KONTROL
   EDİLEMEZ (editör <p><img></p>, <figure> ya da düz <img> üretebilir), bu
   yüzden zorla grid KURULMAZ — editoryal akış kullanılır: görseller tam
   genişlik, bol boşluk, altın hairline'lı açıklama. Her markup biçiminde
   düzgün durur; kolon sayısı tahmin edilmez. */
.cc-portfolyo-sayfa { padding-bottom: var(--cc-bolum-y); }
.cc-portfolyo-govde { max-width: 900px; margin-inline: auto; }
.cc-portfolyo-govde p { margin-block: var(--cc-bosluk-2); }
.cc-portfolyo-govde img {
    width: 100%; height: auto; display: block; border-radius: var(--kose);
    margin-block: var(--cc-bosluk-3); background: var(--cc-krem-koyu);
}
.cc-portfolyo-govde figure { margin-block: var(--cc-bosluk-4); }
.cc-portfolyo-govde figure img { margin-block: 0 0.6rem; }
.cc-portfolyo-sayfa .cc-galeri--portfolyo { margin-top: var(--cc-bosluk-3); }

/* ---------------- Arama ---------------- */
.cc-arama-sayfasi { padding-bottom: var(--cc-bolum-y); }
.cc-arama-form { max-width: 560px; margin-bottom: var(--cc-bosluk-3); gap: 0.5rem; }
.cc-arama-form input {
    background: transparent; border: 1px solid var(--cc-hairline);
    border-radius: var(--kose); color: var(--cc-murekkep); min-height: var(--cc-dokunma);
}
.cc-arama-form input:focus { border-color: var(--cc-altin); background: var(--cc-krem); }
.cc-arama-form .cc-btn { gap: 0.4rem; }
.cc-facetler { display: grid; gap: 0.6rem; margin: var(--cc-bosluk-2) 0 var(--cc-bosluk-3); }
.cc-facetler .facet-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cc-facetler .cc-etiket { margin-bottom: 0; }
.cc-facetler .facet-adet { opacity: 0.65; }

/* ---------------- Blog ---------------- */
.cc-blog { padding-bottom: var(--cc-bolum-y); }
.cc-blog-grid { gap: var(--cc-bosluk-3); }
.cc-blog-kart {
    background: transparent; border: 0; border-top: 1px solid var(--cc-hairline);
    border-radius: 0; padding: var(--cc-bosluk-3) 0 0; box-shadow: none;
}
.cc-blog-kart:hover { box-shadow: none; }
.cc-blog-kart-baslik {
    font-family: var(--font-baslik); font-weight: 400; font-size: var(--cc-baslik-m);
    line-height: 1.25;
}
.cc-blog-kart-baslik a { color: var(--cc-yesil); }
.cc-blog-kart-baslik a:hover { color: var(--cc-altin); }
.cc-blog-tarih {
    font-size: 0.72rem; letter-spacing: var(--cc-iz); text-transform: uppercase;
    color: var(--cc-altin);
}

/* ---------------- 404 ---------------- */
.cc-hata { padding-block: var(--cc-bolum-y); text-align: left; }
.cc-hata .hata-kod {
    font-size: var(--cc-etiket); font-weight: 600; letter-spacing: var(--cc-iz);
    color: var(--cc-altin); margin-bottom: var(--cc-bosluk-1);
}
.cc-hata .cc-baslik { font-size: var(--cc-baslik-xl); }
.cc-hata-btnler {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--cc-bosluk-3); margin-top: var(--cc-bosluk-3);
}

/* ---------------- İç sayfa duyarlı davranışı ---------------- */
@media (max-width: 760px) {
    .cc-ic-ust { padding-top: var(--cc-bosluk-3); }
    .cc-koleksiyon-kapak { aspect-ratio: 16 / 9; }
    .cc-arac { flex-wrap: wrap; gap: 0.6rem; }
    .cc-aksiyonlar .cc-btn--dolu { flex: 1 1 100%; }
    .cc-hata-btnler { gap: var(--cc-bosluk-2); }
    .cc-portfolyo-govde img { margin-block: var(--cc-bosluk-2); }
}