/* ============================================================
   customizations.css — site geneli görsel ince ayarlar.

   Bu dosya CSS yükleme sırasının EN SONUNDA yüklenir. Aynı
   specificity ile yazılan kurallar Tailwind utility'lerini ve
   homepage.css default'larını !important gerekmeden geçersiz
   kılar (cascade gereği sonra gelen kural kazanır).

   İki kullanım yöntemi:

   YÖNTEM 1 — CSS değişkeniyle (önerilen, ergonomik)
   homepage.css'teki hero kuralları aşağıdaki gibi tanımlanmış:
     font-size: var(--hp-hero-paris-title-fs, clamp(3rem, 10vw, 9rem));
   Yani sadece :root içinde değişkeni tanımlamak yeterli.

   YÖNTEM 2 — sınıfı doğrudan override
   Değişken tanımlanmamış özellikler veya tam denetim isteniyorsa
   aynı selector'ı buraya yazarak override edilebilir.
   ============================================================ */


/* ---- YÖNTEM 1 örnekleri (yorumdan çıkarıp kullan) ---- */
/*
:root {
    --hp-hero-paris-title-fs:        clamp(2.5rem, 8vw, 7rem);
    --hp-hero-paris-h2-title-fs:     clamp(1.75rem, 5vw, 4rem);
    --hp-hero-paris-title-color:     #f5e7d3;
    --hp-hero-paris-title-fs-style:  italic;
    --hp-hero-paris-title-ff:        'Cormorant Garamond', serif;
    --hp-hero-paris-title-ls:        -0.02em;

    --hp-hero-paris-subtitle-color:  rgba(255,255,255,.85);

    --hp-hero-paris-btn-bg:          rgba(0,0,0,.4);
    --hp-hero-paris-btn-color:       #fff;
    --hp-hero-paris-btn-border:      1px solid rgba(255,255,255,.4);
}
*/


/* ---- YÖNTEM 2 örnekleri (yorumdan çıkarıp kullan) ---- */
/*
.hp-hero__slide[data-anim-type="paris"] .hp-hero__title {
    text-transform: uppercase;
    letter-spacing: 0;
}

.hp-product__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.25rem;
    font-style: italic;
}

.hp-categories__name {
    color: #f5e7d3;
}
*/


/* ---- Tailwind utility override örneği ---- */
/*
.text-gray-900 { color: #1a1a18; }
.bg-gray-50    { background-color: #fafafa; }
*/


/* ============================================================
   Mevcut hero değişken referansı
   ============================================================
   Default hero (her varyant):
     --hp-hero-title-fs / -fw / -fs-style / -color / -ff / -ls / -lh
     --hp-hero-subtitle-fs / -fw / -fs-style / -color / -ff
     --hp-hero-btn-fs / -fw / -ff / -color / -bg

   Paris varyantı:
     --hp-hero-paris-title-fs / -fw / -fs-style / -color / -ff / -ls / -lh
     --hp-hero-paris-h2-title-fs     (yalnız h2.hp-hero__title)
     --hp-hero-paris-subtitle-fs / -color
     --hp-hero-paris-btn-fs / -fw / -ff / -color / -bg / -border

   İstanbul varyantı:
     --hp-hero-istanbul-title-fs / -fw / -fs-style / -color / -ff / -ls / -lh
     --hp-hero-istanbul-h2-title-fs  (yalnız h2.hp-hero__title)
     --hp-hero-istanbul-subtitle-fs / -color
   ============================================================ */

/* ============================================================
   Site Footer (admin-tasarımlı)
   ----------------------------------------------------------
   - Renkler inline style ile --footer-text CSS variable olarak gelir.
   - Metin renkleri opacity ile hiyerarşilenir; .opacity-70/.opacity-60 vb.
     Tailwind utilities ile uygulanır.
   - Sub-footer watermark: marka adının arkada, soluk versiyonu.
   ============================================================ */
.site-footer {
    color: var(--footer-text, #d6d3d1);
    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
    position: relative;
    overflow: hidden;
    padding: 4rem 2rem 2rem;
}
@media (min-width: 768px) {
    .site-footer { padding: 4rem 4rem 2rem; }
}
.site-footer .serif-font {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}
.site-footer #ebulten {
    color: var(--footer-text, #d6d3d1);
}
/* Compiled tailwind.css'te eksik olan ama footer'da ihtiyaç duyulan utility'ler —
   .site-footer scope'unda namespace'leniyor ki global Tailwind'ı kirletmesin. */
.site-footer .pt-16 { padding-top: 4rem; }
.site-footer .pb-8  { padding-bottom: 2rem; }
.site-footer .pb-12 { padding-bottom: 3rem; }
.site-footer .pt-8  { padding-top: 2rem; }
.site-footer .mb-16 { margin-bottom: 4rem; }
@media (min-width: 768px) {
    .site-footer .md\:px-16        { padding-left: 4rem; padding-right: 4rem; }
    .site-footer .md\:items-center { align-items: center; }
}
.site-footer .font-light { font-weight: 300; }
.site-footer .opacity-60 { opacity: 0.6; }
.site-footer .opacity-70 { opacity: 0.7; }
.site-footer .opacity-80 { opacity: 0.8; }
.site-footer .opacity-85 { opacity: 0.85; }
.site-footer .tracking-wide    { letter-spacing: 0.025em; }
.site-footer .tracking-widest  { letter-spacing: 0.1em; }
.site-footer .tracking-\[0\.1em\]  { letter-spacing: 0.1em; }
.site-footer .tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.site-footer .tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.site-footer .tracking-\[0\.3em\]  { letter-spacing: 0.3em; }
.site-footer .tracking-\[0\.35em\] { letter-spacing: 0.35em; }
.site-footer .tracking-\[0\.4em\]  { letter-spacing: 0.4em; }
.site-footer .text-\[10px\] { font-size: 10px; }
.site-footer .text-\[11px\] { font-size: 11px; }
.site-footer .placeholder-white\/40::placeholder { color: rgba(255,255,255,0.4); }
.site-footer .text-\[\#1a1a18\] { color: #1a1a18; }
.site-footer .min-w-\[380px\] { min-width: 380px; }

.site-footer .brand-watermark {
    position: absolute;
    left: 50%;
    bottom: -2rem;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    color: var(--footer-text, #ffffff);
    opacity: 0.05;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 300;
    font-size: clamp(80px, 17vw, 240px);
    line-height: 0.9;
    letter-spacing: 0.25em;
    white-space: nowrap;
    text-transform: uppercase;
    user-select: none;
}