/* =============================================================================
   MAIN.CSS — Component stilleri
   style.css'teki CSS değişkenlerine bağımlı — o dosya önce yüklenmeli.

   Bölüm sırası:
     1.  Buton sistemi
     2.  Section yardımcıları
     3.  Skip link (erişilebilirlik)
     4.  Header + Navigasyon
     5.  Limelight nav göstergesi
     6.  Mobile nav overlay
     7.  Footer
     8.  Hero bölümü
     9.  Reveal bölümü (The Sentinel)
    10.  Spotlight bölümü (koleksiyon)
    11.  Process mini timeline
    12.  Quote CTA
    13.  404 sayfası
    14.  Fallback (index.php)
    15.  Scroll animasyonları
    16.  @keyframes
   ============================================================================= */


/* =============================================================================
   1. BUTON SİSTEMİ
   ============================================================================= */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-4) var(--space-8);
    font-family:     var(--font-body);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-medium);
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          none;
    border-radius:   var(--radius-base);
    cursor:          pointer;
    transition:      background-color var(--transition-base),
                     color            var(--transition-base),
                     border-color     var(--transition-base),
                     opacity          var(--transition-fast);
    white-space: nowrap;
}

.btn:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Dolu altın — birincil CTA */
.btn--gold {
    background: var(--color-gold);
    color:      var(--color-black);
}

.btn--gold:hover {
    background: var(--color-cream);
    color:      var(--color-black);
}

/* Altın çerçeve — ikincil CTA */
.btn--outline-gold {
    background:    transparent;
    color:         var(--color-gold);
    border:        1px solid var(--color-gold);
    padding:       calc(var(--space-4) - 1px) calc(var(--space-8) - 1px);
}

.btn--outline-gold:hover {
    background: var(--color-gold);
    color:      var(--color-black);
}

/* Ghost — üçüncül / navigasyon */
.btn--ghost {
    background:    transparent;
    color:         var(--color-cream);
    border:        1px solid var(--color-smoke);
    padding:       calc(var(--space-4) - 1px) calc(var(--space-8) - 1px);
}

.btn--ghost:hover {
    border-color: var(--color-cream);
}

/* Animated gradient border — §6.6 Quote CTA
   @property --gradient-angle: CSS Houdini, modern browsers (Chrome 85+, FF 128+, Safari 16.4+) */
@property --gradient-angle {
    syntax:        '<angle>';
    initial-value: 0deg;
    inherits:      false;
}

.btn--gradient-border {
    --gradient-angle: 0deg;
    position:    relative;
    padding:     2px; /* bu padding = border kalınlığı */
    background:  conic-gradient(
                     from var(--gradient-angle),
                     var(--color-copper) 0%,
                     var(--color-gold)   30%,
                     var(--color-cream)  50%,
                     var(--color-gold)   70%,
                     var(--color-copper) 100%
                 );
    border-radius:    var(--radius-base);
    display:          inline-flex;
    text-decoration:  none;
    animation:        rotate-gradient 4s linear infinite;
}

.btn--gradient-border .btn__inner {
    display:        block;
    background:     transparent;
    color:          rgba(14, 10, 4, 0.92);
    padding:        var(--space-4) var(--space-12);
    border-radius:  calc(var(--radius-base) - 2px);
    font-family:    var(--font-body);
    font-size:      var(--text-xs);
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition:     color var(--transition-fast);
}

.btn--gradient-border:hover .btn__inner {
    color: rgba(8, 6, 2, 1);
}

/* Link ile alt çizgi — process footer linki */
.link-underline {
    color:          var(--color-cream);
    text-decoration: none;
    font-size:      var(--text-sm);
    letter-spacing: 0.06em;
    border-bottom:  1px solid var(--color-smoke);
    padding-bottom: 2px;
    transition:     color var(--transition-fast), border-color var(--transition-fast);
}

.link-underline:hover {
    color:         var(--color-gold);
    border-color:  var(--color-gold);
}


/* =============================================================================
   2. SECTION YARDIMCILARI
   Tüm section'larda tekrar eden başlık + etiket yapısı.
   ============================================================================= */

.section-header {
    margin-bottom: var(--space-16);
    max-width:     var(--max-width-text);
}

.section-label {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.18em;
    color:          var(--color-gold);
    margin-bottom:  var(--space-4);
    display:        block;
}

.section-title {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight:    var(--weight-light);
    line-height:    1.05;
    letter-spacing: -0.025em;
    color:          var(--color-cream);
}


/* =============================================================================
   3. SKIP LINK (Erişilebilirlik)
   style.css'te .sr-only ile gizli, focus'ta görünür.
   ============================================================================= */

.skip-link:focus,
.skip-link:focus-visible {
    position:      fixed;
    top:           var(--space-4);
    left:          var(--space-4);
    z-index:       9999;
    padding:       var(--space-3) var(--space-6);
    background:    var(--color-gold);
    color:         var(--color-black);
    font-size:     var(--text-sm);
    font-weight:   var(--weight-medium);
    border-radius: var(--radius-base);
    /* sr-only değerlerini sıfırla */
    clip:          auto;
    width:         auto;
    height:        auto;
    margin:        0;
    overflow:      visible;
    white-space:   normal;
}


/* =============================================================================
   4. HEADER + NAVİGASYON
   ============================================================================= */

.site-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--z-header);
    padding:    var(--space-6) 0;
    transition: background-color var(--transition-slow),
                padding          var(--transition-slow),
                box-shadow       var(--transition-slow);
}

/* Scroll sonrası — Apple glass efekti */
.site-header.scrolled {
    background-color:        rgba(10, 9, 8, 0.52);
    backdrop-filter:         blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    padding:                 var(--space-4) 0;
    border-bottom:           1px solid rgba(201, 166, 107, 0.10);
    box-shadow:              0 1px 24px rgba(0, 0, 0, 0.18);
}

/* İç sayfa — hero video yok, baştan glass görünsün */
.is-interior .site-header {
    background-color:        rgba(10, 9, 8, 0.52);
    backdrop-filter:         blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom:           1px solid rgba(201, 166, 107, 0.10);
}

.header-inner {
    display:     flex;
    align-items: center;
    gap:         var(--space-8);
}

/* Logo */
.site-logo-link {
    flex-shrink: 0;
    display:     block;
    line-height: 1;
}

.site-logo-link img,
.site-logo-link svg {
    height:    40px;
    width:     auto;
    display:   block;
}

/* WordPress custom-logo wrapper'ı */
.site-logo-link .custom-logo-link {
    display: block;
}

.site-logo-link .custom-logo {
    height:    40px;
    width:     auto;
    display:   block;
}

/* Nav — masaüstü */
.site-nav {
    position:    relative;
    margin-left: auto;
}

.nav-menu {
    display:     flex;
    align-items: center;
    gap:         var(--space-8);
    list-style:  none;
}

.nav-menu a {
    font-family:    var(--font-body);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-cream);
    text-decoration: none;
    padding:        var(--space-1) 0;
    transition:     color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
    color: var(--color-gold);
}

/* Header CTA butonu — pill şekli + attention animation */
.header-cta {
    flex-shrink:   0;
    margin-left:   var(--space-6);
    border-radius: 9999px;
    padding:       calc(var(--space-3) - 1px) var(--space-8);
    font-size:     calc(var(--text-xs) * 0.92);
    position:      relative;
    overflow:      hidden;
    animation:     ih-cta-attention 9s ease-in-out 2.5s infinite;
}
.header-cta::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);
    transform:      translateX(-140%) skewX(-15deg);
    animation:      ih-cta-shine 9s ease-in-out 2.5s infinite;
    pointer-events: none;
    border-radius:  inherit;
}
@keyframes ih-cta-shine {
    0%    { transform: translateX(-140%) skewX(-15deg); }
    16%   { transform: translateX(240%)  skewX(-15deg); }
    100%  { transform: translateX(-140%) skewX(-15deg); }
}
@keyframes ih-cta-attention {
    0%,  74%, 100% { transform: scale(1);     }
    78%            { transform: scale(1.055); }
    82%            { transform: scale(0.975); }
    86%            { transform: scale(1.022); }
    90%            { transform: scale(1);     }
}

/* Hamburger butonu — mobilde görünür */
.menu-toggle {
    display:         none;
    flex-direction:  column;
    gap:             6px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         var(--space-2);
    margin-left:     auto;
    flex-shrink:     0;
}

.menu-toggle__bar {
    display:    block;
    width:      24px;
    height:     1px;
    background: var(--color-cream);
    transition: transform var(--transition-base),
                opacity   var(--transition-fast);
    transform-origin: center;
}

/* X formu — menü açıkken */
.menu-toggle.is-active .menu-toggle__bar:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__bar:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* Tema toggle butonu */
.theme-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      none;
    border:          1px solid rgba(201, 166, 107, 0.25);
    border-radius:   50%;
    color:           var(--color-muted);
    cursor:          pointer;
    flex-shrink:     0;
    transition:      color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    animation:       theme-toggle-attention 9s ease-in-out 3s infinite;
}

.theme-toggle:hover {
    color:        var(--color-gold);
    border-color: var(--color-gold);
    transform:    rotate(20deg);
    animation:    none; /* hover'da attention durur */
}

.theme-toggle__icon {
    width:          18px;
    height:         18px;
    pointer-events: none;
}

/* Güneş ikonu: yavaş döner — "canlı" hissi */
.theme-toggle__icon--sun {
    animation: theme-icon-spin 22s linear infinite;
}

/* Ay ikonu (light modda görünür): hafif sallanır */
[data-theme="light"] .theme-toggle__icon--moon {
    animation: theme-icon-rock 9s ease-in-out infinite;
}

@keyframes theme-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes theme-icon-rock {
    0%, 100% { transform: rotate(-15deg); }
    50%       { transform: rotate(15deg);  }
}

/* Periyodik dikkat çekici glow — 9s'de bir */
@keyframes theme-toggle-attention {
    0%, 62%, 100% {
        box-shadow:  none;
        border-color: rgba(201, 166, 107, 0.25);
    }
    72% {
        box-shadow:   0 0 18px rgba(201, 166, 107, 0.55), 0 0 36px rgba(201, 166, 107, 0.18);
        border-color: rgba(201, 166, 107, 0.75);
        transform:    scale(1.18);
    }
    84% {
        box-shadow:   0 0 8px rgba(201, 166, 107, 0.2);
        border-color: rgba(201, 166, 107, 0.4);
        transform:    scale(1.0);
    }
}

/* Dark mode: sun visible; moon hidden */
.theme-toggle__icon--moon { display: none; }

/* Light mode: moon visible; sun hidden */
[data-theme="light"] .theme-toggle__icon--sun  { display: none; }
[data-theme="light"] .theme-toggle__icon--moon { display: block; }


/* =============================================================================
   4b. DİL DEĞİŞTİRİCİ (.ih-lang-switch)
   Polylang pll_the_languages() çıktısını stilize eder.
   Çıktı: <ul><li class="lang-item [current-lang]"><a>en</a></li>…</ul>
   ============================================================================= */

/* <ul>: flex satır, dikey ortala */
.ih-lang-switch ul {
    display:     flex;
    align-items: center;
    list-style:  none;
    gap:         0;
    margin:      0;
    padding:     0;
}

/* <li>: flex container — ::before ve <a> aynı flex ekseninde, dikey ortalı */
.ih-lang-switch .lang-item {
    display:     inline-flex;
    align-items: center;
    line-height: 1;
}

/* Ayraç — birinci hariç her item'dan önce.
   padding-inline ile dot'un her iki yanında eşit boşluk sağlanır;
   margin yerine padding: <li> flex context'inde daha öngörülebilir. */
.ih-lang-switch .lang-item + .lang-item::before {
    content:        '·';
    color:          rgba(239, 230, 215, 0.2);
    font-size:      var(--text-xs);
    font-family:    var(--font-body);
    line-height:    1;
    padding-inline: 0.45em; /* dot solunda ve sağında simetrik boşluk */
}

/* Link genel */
.ih-lang-switch .lang-item a {
    font-family:     var(--font-body);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-medium);
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           rgba(239, 230, 215, 0.45);
    line-height:     1;
    transition:      color var(--transition-fast);
}

.ih-lang-switch .lang-item a:hover {
    color: var(--color-cream);
}

/* Aktif dil */
.ih-lang-switch .current-lang a {
    color:   var(--color-cream);
    cursor:  default;
}

/* Focus */
.ih-lang-switch .lang-item a:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}

/* Desktop: header içinde göster */
.site-header .ih-lang-switch {
    display:     inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Mobil (< 1024px): header'da gizle — overlay versiyonu devreye girer */
@media (max-width: 1023px) {
    .site-header .ih-lang-switch {
        display: none;
    }
}

/* Mobil overlay versiyonu */
.ih-lang-switch--mobile {
    display:     inline-flex;
    align-items: center;
}

.ih-lang-switch--mobile .lang-item a {
    font-family:    var(--font-display);
    font-size:      var(--text-xl);
    font-weight:    var(--weight-light);
    letter-spacing: 0.06em;
    color:          rgba(239, 230, 215, 0.45);
    line-height:    1;
}

.ih-lang-switch--mobile .lang-item a:hover {
    color: var(--color-gold);
}

.ih-lang-switch--mobile .current-lang a {
    color: var(--color-cream);
}

.ih-lang-switch--mobile .lang-item + .lang-item::before {
    font-family:    var(--font-display);
    font-size:      var(--text-xl);
    line-height:    1;
    color:          rgba(239, 230, 215, 0.15);
    padding-inline: 0.35em;
}


/* =============================================================================
   5. LİMELİGHT NAV GÖSTERGESİ
   JS tarafından konumlandırılır. hover'da nav öğesinin altında ışık çizgisi.
   ============================================================================= */

.limelight-indicator {
    position:   absolute;
    bottom:     -6px;
    left:       0;
    height:     1px;
    width:      0;
    background: var(--color-gold);
    opacity:    0;
    box-shadow: 0 0 8px var(--color-gold), 0 0 20px rgba(201, 166, 107, 0.4);
    transition: left      var(--transition-base),
                width     var(--transition-base),
                opacity   var(--transition-fast);
    pointer-events: none;
    border-radius:  1px;
}


/* =============================================================================
   6. MOBİL NAV OVERLAY
   ============================================================================= */

.mobile-nav-overlay {
    position:         fixed;
    inset:            0;
    z-index:          var(--z-overlay);
    background-color: var(--color-black);
    display:          flex;
    align-items:      center;
    /* justify-content: center kaldırıldı — overflow-y: auto ile çakışır,
       taşan içerik scroll edilemez. margin: auto inner'da centering sağlar. */
    flex-direction:   column;
    overflow-y:       auto;
    opacity:          0;
    visibility:       hidden;
    transition:       opacity     var(--transition-slow),
                      visibility  var(--transition-slow);
}

.mobile-nav-overlay.is-open {
    opacity:    1;
    visibility: visible;
}

/* Scroll kilidi — menü açıkken body kaymasın */
body.menu-open {
    overflow: hidden;
}

.mobile-nav-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-8);
    margin:         auto;           /* centering — content kısa ise ortalar, uzunsa scroll */
    padding:        var(--space-14) var(--space-4);
    width:          100%;
    transform:      translateY(-16px);
    transition:     transform var(--transition-slow);
}

.mobile-nav-overlay.is-open .mobile-nav-inner {
    transform: translateY(0);
}

.mobile-menu {
    list-style: none;
    text-align: center;
}

.mobile-menu li {
    overflow: hidden;
}

.mobile-menu a {
    display:         block;
    font-family:     var(--font-display);
    font-size:       clamp(var(--text-2xl), 7vw, var(--text-4xl));
    font-weight:     var(--weight-light);
    letter-spacing:  -0.02em;
    color:           var(--color-cream);
    text-decoration: none;
    padding:         var(--space-2) 0;
    transition:      color var(--transition-fast);
}

.mobile-menu a:hover {
    color: var(--color-gold);
}

.mobile-cta {
    /* Zaten .btn .btn--gold sınıfı var */
}


/* =============================================================================
   7. FOOTER
   ============================================================================= */

.site-footer {
    padding:    var(--space-20) 0 var(--space-12);
    margin-top: var(--space-32);
    border-top: 1px solid var(--color-smoke);
}

.footer-inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-12);
}

.footer-top {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-12);
    align-items:           start;
}

/* Sol: marka */
.footer-brand {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.footer-logo-link {
    display:   block;
    width:     fit-content;
}

.footer-logo-link img,
.footer-logo-link svg,
.footer-logo-link .custom-logo {
    height:  30px;
    width:   auto;
    display: block;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.footer-logo-link:hover img,
.footer-logo-link:hover .custom-logo {
    opacity: 1;
}

.footer-tagline {
    font-size:  var(--text-sm);
    color:      var(--color-muted);
    max-width:  36ch;
    line-height: 1.6;
}

/* Sosyal medya */
.footer-social {
    display:     flex;
    align-items: center;
    gap:         var(--space-6);
}

.social-link {
    display:    flex;
    color:      var(--color-smoke);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.social-link:hover {
    color:     var(--color-gold);
    transform: translateY(-2px);
}

.social-link svg {
    display: block;
}

/* Sağ: footer nav */
.footer-nav .footer-menu {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
    text-align: right;
}

.footer-menu a {
    font-size:      var(--text-sm);
    letter-spacing: 0.06em;
    color:          var(--color-muted);
    text-decoration: none;
    transition:     color var(--transition-fast);
}

.footer-menu a:hover {
    color: var(--color-cream);
}

/* Alt şerit */
.footer-bottom {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.footer-divider {
    border:     none;
    border-top: 1px solid rgba(58, 58, 58, 0.5);
    margin:     0;
}

.footer-copyright {
    font-size:  var(--text-xs);
    color:      var(--color-muted);
    line-height: 1.6;
}

.footer-location {
    font-size:  var(--text-xs);
    color:      var(--color-muted);
    max-width:  none;
}


/* =============================================================================
   8. HERO BÖLÜMÜ
   ============================================================================= */

.section-hero {
    position:   relative;
    height:     100svh; /* safe viewport height */
    min-height: 600px;
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
}

/* Altın drop shadow — yalnızca light modda; dark modda hero sayfayla bütünleşir */
[data-theme="light"] .section-hero {
    box-shadow: 0 16px 80px rgba(201, 166, 107, 0.22);
}

/* Hero metinler — video zeminde her zaman açık kalır, tema değişkeni geçersiz kılınır */
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-subtitle {
    color: #EFE6D7;
}

[data-theme="light"] .hero-eyebrow {
    color: #C9A66B;
}

/* Video + poster arkaplan */
.hero-media {
    position: absolute;
    inset:    0;
    z-index:  var(--z-below);
}

.hero-video {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center;
}

/* Metin okunabilirliği için karanlık gradient — alttan üste */
.hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(10, 9, 8, 0.92) 0%,
        rgba(10, 9, 8, 0.55) 40%,
        rgba(10, 9, 8, 0.15) 75%,
        rgba(10, 9, 8, 0.05) 100%
    );
}

/* Hero metin içeriği */
.hero-content {
    position:        relative;
    z-index:         var(--z-above);
    width:           100%;
    padding-bottom:  var(--space-24);
    padding-top:     calc(var(--header-height) + var(--space-8));
}

.hero-eyebrow {
    font-size:      var(--text-xs);
    letter-spacing: 0.2em;
    color:          var(--color-gold);
    margin-bottom:  var(--space-6);
    max-width:      none;
}

.hero-title {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-5xl), 9vw, var(--text-8xl));
    font-weight:    var(--weight-light);
    line-height:    0.95;
    letter-spacing: -0.04em;
    color:          var(--color-cream);
    margin-bottom:  var(--space-6);
    max-width:      none;
}

.hero-subtitle {
    font-size:     var(--text-lg);
    color:         rgba(239, 230, 215, 0.7);
    margin-bottom: var(--space-10);
    max-width:     45ch;
}

/* Hero CTA — sol altta */
.hero-cta {
    /* .btn .btn--outline-gold sınıfından geliyor */
}

/* Scroll göstergesi — animasyonlu dikey çizgi */
.hero-scroll-indicator {
    position:        absolute;
    bottom:          var(--space-8);
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    justify-content: center;
    z-index:         var(--z-above);
}

.scroll-line {
    display:    block;
    width:      1px;
    height:     48px;
    background: linear-gradient(to bottom, transparent, var(--color-gold));
    animation:  scroll-draw 2.4s ease-in-out infinite;
}


/* =============================================================================
   9. REVEAL BÖLÜMÜ — THE SENTINEL
   ============================================================================= */

.section-reveal {
    padding:    var(--space-32) 0;
    overflow:   hidden;
}

.reveal-layout {
    display:               grid;
    grid-template-columns: 55% 1fr;
    gap:                   var(--space-16);
    align-items:           center;
}

/* İnteraktif görsel konteyner */
.reveal-hero {
    position:     relative;
    aspect-ratio: 9 / 7;
    cursor:       crosshair;
    overflow:     hidden;
    border-radius: var(--radius-sm);
    background:   var(--color-black);
}

/* Alt katman: wireframe (her zaman görünür) */
.reveal-beneath {
    position: absolute;
    inset:    0;
    z-index:  1;
}

/* Üst katman: bitmiş heykel (JS mask ile deler) */
.reveal-surface {
    position:  absolute;
    inset:     0;
    z-index:   2;
    transition: opacity var(--transition-base);
}

/* is-revealed: JS bu sınıfı ekler, mask-image devreye girer */
.reveal-hero.is-revealed .reveal-surface {
    -webkit-mask-image: radial-gradient(
        circle 160px at var(--reveal-x, 50%) var(--reveal-y, 50%),
        transparent 30%,
        black 70%
    );
    mask-image: radial-gradient(
        circle 160px at var(--reveal-x, 50%) var(--reveal-y, 50%),
        transparent 30%,
        black 70%
    );
}

.reveal-img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center;
    display:     block;
}

/* Hover ipucu — is-revealed'da kaybolur */
.reveal-hint {
    position:    absolute;
    bottom:      var(--space-6);
    left:        50%;
    transform:   translateX(-50%);
    z-index:     3;
    font-size:   var(--text-xs);
    letter-spacing: 0.15em;
    color:       rgba(201, 166, 107, 0.6);
    white-space: nowrap;
    transition:  opacity var(--transition-base);
    max-width:   none;
    pointer-events: none;
}

.reveal-hero.is-revealed .reveal-hint {
    opacity: 0;
}

/* Sağ panel: ürün bilgisi */
.reveal-info {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.reveal-label {
    font-size:      var(--text-xs);
    letter-spacing: 0.18em;
    color:          var(--color-gold);
    max-width:      none;
}

.reveal-title {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
    font-weight:    var(--weight-light);
    letter-spacing: -0.02em;
    line-height:    1;
}

.reveal-description {
    font-size:   var(--text-base);
    line-height: 1.75;
    color:       rgba(239, 230, 215, 0.75);
}

/* Teknik specs */
.reveal-specs {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    border-top:     1px solid var(--color-smoke);
    padding-top:    var(--space-6);
}

.spec-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             var(--space-4);
}

.spec-row dt {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-smoke);
}

.spec-row dd {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.08em;
    color:          var(--color-cream);
}


/* =============================================================================
   10. SPOTLIGHT BÖLÜMÜ — KOLEKSİYON
   ============================================================================= */

.section-spotlight {
    position: relative;
    padding:  var(--space-32) 0;
    overflow: hidden;
}

/* Cursor takipli ışık halesi — JS --sx / --sy günceller */
.spotlight-bg {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    background:     radial-gradient(
                        700px circle at var(--sx, -200px) var(--sy, -200px),
                        rgba(201, 166, 107, 0.065),
                        transparent 50%
                    );
    transition:     background var(--transition-slow);
}

/* Touch cihazlarda cursor yok — sabit atmosferik ışık */
@media (hover: none) {
    .spotlight-bg {
        background: radial-gradient(
            80% 50% at 50% 0%,
            rgba(201, 166, 107, 0.04),
            transparent 70%
        );
    }
}

.section-spotlight .container {
    position: relative;
    z-index:  var(--z-above);
}

.section-spotlight .section-header {
    max-width: none;
}

/* 2 sütunlu grid */
.spotlight-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-6);
}

.spotlight-item {
    /* Coming soon öğeler hafif soluk */
}

/* ── Dormant kart — ızgarada 1 sütun, sol hizalı ── */
.spotlight-item--coming-soon {
    position:  relative;
    animation: ares-flanking-glow 5s ease-in-out 1.5s infinite;
}

/* Kartın iki yanında pulsing drop spotlights */
@keyframes ares-flanking-glow {
    0%, 100% {
        box-shadow:
            -28px 0 64px rgba(201, 166, 107, 0.06),
             28px 0 64px rgba(201, 166, 107, 0.06);
    }
    50% {
        box-shadow:
            -28px 0 88px rgba(201, 166, 107, 0.20),
             28px 0 88px rgba(201, 166, 107, 0.20);
    }
}

/* Köşe braket çerçeve — iki köşegen köşe */
.spotlight-item--coming-soon::before,
.spotlight-item--coming-soon::after {
    content:        '';
    position:       absolute;
    width:          20px;
    height:         20px;
    border-color:   rgba(201, 166, 107, 0.45);
    border-style:   solid;
    pointer-events: none;
    z-index:        6;
    transition:     border-color 0.4s ease;
}
.spotlight-item--coming-soon::before {
    top: -2px; left: -2px;
    border-width: 1px 0 0 1px;
}
.spotlight-item--coming-soon::after {
    bottom: -2px; right: -2px;
    border-width: 0 1px 1px 0;
}
.spotlight-item--coming-soon:hover::before,
.spotlight-item--coming-soon:hover::after {
    border-color: rgba(201, 166, 107, 0.85);
}

/* Image wrap — normal aspect-ratio, tek üst çizgi */
.spotlight-item--coming-soon .spotlight-item__image-wrap {
    background:    #0a0704;
    border-top:    1px solid rgba(201, 166, 107, 0.3);
    margin-bottom: var(--space-4);
}

/* İç spotlight kaldırıldı — dış box-shadow spotlights ile değiştirildi */
.spotlight-item--coming-soon .spotlight-item__image-wrap::before {
    content:    '';
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: none;
    animation:  none;
}

/* Blueprint (wireframe) görsel */
.spotlight-item__image--blueprint {
    opacity:        0.36;
    mix-blend-mode: screen;
    filter:         brightness(1.9) saturate(0.12) hue-rotate(10deg);
    transition:     opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}
.spotlight-item--coming-soon .spotlight-item__link:hover .spotlight-item__image--blueprint {
    opacity:   0.18;
    filter:    brightness(2.2) saturate(0.1);
    transform: scale(1.03);
}

/* Metal render — hover'da yavaşça belirir */
.spotlight-item__image--metal {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: center;
    display:        block;
    opacity:        0;
    z-index:        2;
    transition:     opacity 1s ease;
    mix-blend-mode: normal;
}
.spotlight-item--coming-soon .spotlight-item__link:hover .spotlight-item__image--metal {
    opacity: 0.62;
}
/* Metal görselin default hover ölçek/filtre override'ı */
.spotlight-item--coming-soon .spotlight-item__link:hover .spotlight-item__image--metal {
    transform: none;
    filter:    none;
}

/* Dormant hover-layer z-index — metal üstünde */
.spotlight-item--coming-soon .spotlight-item__hover-layer {
    z-index: 3;
}

/* Dormant ipucu metni */
.spotlight-item__dormant-hint {
    font-size:      var(--text-xs);
    letter-spacing: 0.12em;
    color:          rgba(201, 166, 107, 0.35);
    margin-top:     var(--space-2);
    animation:      hint-blink 4s ease-in-out infinite;
}

@keyframes seed-pulse {
    0%, 100% { opacity: 0.65; }
    50%       { opacity: 1;    }
}


/* ── Mystery Card — canlı blob + typewriter animasyonu ── */

.spotlight-item--mystery {
    position: relative;
    height:   100%; /* grid satır yüksekliğini doldurur */
}

.mystery-card {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          100%;
    min-height:      340px;
    border:          1px solid rgba(201, 166, 107, 0.18);
    border-radius:   var(--radius-sm);
    overflow:        hidden;
    background:      var(--color-black);
    position:        relative;
    cursor:          default;
}

/* Köşe braketler */
.mystery-card::before,
.mystery-card::after {
    content:        '';
    position:       absolute;
    width:          18px;
    height:         18px;
    border-color:   rgba(201, 166, 107, 0.35);
    border-style:   solid;
    pointer-events: none;
    z-index:        6;
    transition:     border-color 0.4s ease;
}
.mystery-card::before { top: -1px;    left: -1px;  border-width: 1px 0 0 1px; }
.mystery-card::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.mystery-card:hover::before,
.mystery-card:hover::after { border-color: rgba(201, 166, 107, 0.65); }

/* Organik blob şekli — metin yazılınca yatay açılır, buharlaşınca yuvarlağa döner */
.mystery-blob {
    width:           160px;
    height:          160px;
    border-radius:   55% 45% 35% 65% / 55% 35% 65% 45%;
    border:          1px solid rgba(201, 166, 107, 0.22);
    background:      radial-gradient(
                         ellipse at 40% 38%,
                         rgba(201, 166, 107, 0.07) 0%,
                         transparent 70%
                     );
    display:         flex;
    align-items:     center;
    justify-content: center;
    animation:       mystery-blob-morph   14s ease-in-out         infinite,
                     mystery-blob-expand   8s ease-in-out 0.5s    infinite;
    position:        relative;
}

/* İç parıltı */
.mystery-blob::before {
    content:       '';
    position:      absolute;
    inset:         25%;
    border-radius: 50%;
    background:    radial-gradient(ellipse, rgba(201, 166, 107, 0.1) 0%, transparent 65%);
    animation:     mystery-blob-glow 5s ease-in-out infinite;
}

@keyframes mystery-blob-morph {
    0%   { border-radius: 55% 45% 35% 65% / 55% 35% 65% 45%; }
    16%  { border-radius: 40% 60% 55% 45% / 40% 60% 40% 60%; }
    33%  { border-radius: 65% 35% 45% 55% / 60% 40% 55% 45%; }
    50%  { border-radius: 45% 55% 65% 35% / 50% 65% 35% 50%; }
    66%  { border-radius: 30% 70% 50% 50% / 55% 45% 55% 45%; }
    83%  { border-radius: 60% 40% 30% 70% / 45% 55% 45% 55%; }
    100% { border-radius: 55% 45% 35% 65% / 55% 35% 65% 45%; }
}

/* Metinle birlikte yatay açılır — typewriter döngüsüyle eş zamanlı (8s, 0.5s delay) */
@keyframes mystery-blob-expand {
    0%, 28%    { width: 160px; height: 160px; }
    44%, 60%   { width: 228px; height: 112px; }
    76%, 100%  { width: 160px; height: 160px; }
}

@keyframes mystery-blob-glow {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50%       { opacity: 1;   transform: scale(1.15); }
}

/* Typewriter — yazar, durur, buharlaşır, döngüler */
/* clip-path kullanılır: width+letter-spacing uyumsuzluğunu önler */
.mystery-typewriter {
    position:       relative;
    z-index:        1;
    display:        inline-block;
    white-space:    nowrap;
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.18em;
    color:          rgba(201, 166, 107, 0.9);
    text-transform: uppercase;
    animation:      mystery-type-cycle 8s linear 0.5s infinite;
}

/* İmleç */
.mystery-typewriter::after {
    content:   '|';
    margin-left: 1px;
    animation: mystery-cursor-blink 0.85s step-end infinite;
    color:     rgba(201, 166, 107, 0.7);
}

@keyframes mystery-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* "COMING SOON" = 11 karakter → steps(11, end) ile clip-path sağdan sola açılır */
@keyframes mystery-type-cycle {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity:   1;
        filter:    blur(0);
        animation-timing-function: steps(11, end);
    }
    38% {
        clip-path: inset(0 0% 0 0);
        opacity:   1;
        filter:    blur(0);
        animation-timing-function: linear;
    }
    60% {
        clip-path: inset(0 0% 0 0);
        opacity:   1;
        filter:    blur(0);
        animation-timing-function: ease-in;
    }
    78% {
        clip-path: inset(0 0% 0 0);
        opacity:   0;
        filter:    blur(10px);
    }
    79%, 100% {
        clip-path: inset(0 100% 0 0);
        opacity:   0;
        filter:    blur(0);
    }
}

.spotlight-item__link {
    display:        block;
    text-decoration: none;
    color:          inherit;
}

/* Görsel */
.spotlight-item__image-wrap {
    position:      relative;
    aspect-ratio:  3 / 2;
    overflow:      hidden;
    border-radius: var(--radius-sm);
    background:    rgba(26, 25, 24, 0.8);
    margin-bottom: var(--space-4);
}

.spotlight-item__image {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: center;
    display:        block;
    transition:     transform var(--transition-slow),
                    filter    var(--transition-slow);
}

.spotlight-item__link:hover .spotlight-item__image {
    transform: scale(1.03);
    filter:    brightness(1.1);
}

/* Split görsel — real / metal (The Sentinel için) */
.spotlight-split-real {
    position:   absolute;
    inset:      0;
    clip-path:  inset( 0 80% 0 0 );
    overflow:   hidden;
    will-change: clip-path;
}

.spotlight-split-real .spotlight-item__image {
    transform: none;
}

/* Geniş hit alanı — görsel çizgi ::before ile */
.spotlight-split-divider {
    position:       absolute;
    top:            0;
    bottom:         0;
    left:           20%;
    width:          48px;
    transform:      translateX( -50% );
    cursor:         ew-resize;
    pointer-events: all;
    z-index:        2;
}

.spotlight-split-divider::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       50%;
    width:      2px;
    transform:  translateX( -50% );
    background: rgba( 201, 166, 107, 0.6 );
    transition: background 0.2s ease;
}

.spotlight-split-divider:hover::before,
.spotlight-split-divider.is-dragging::before {
    background: var( --color-gold );
}

/* Sürükleme kolu — merkezde oval slot */
.spotlight-split-handle {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate( -50%, -50% );
    width:           36px;
    height:          22px;
    border-radius:   100px;
    background:      var( --color-gold );
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    box-shadow:      0 2px 10px rgba( 0, 0, 0, 0.6 );
    pointer-events:  none;
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.spotlight-split-divider:hover .spotlight-split-handle,
.spotlight-split-divider.is-dragging .spotlight-split-handle {
    transform:  translate( -50%, -50% ) scale( 1.1 );
    box-shadow: 0 3px 14px rgba( 0, 0, 0, 0.7 );
}

.spotlight-split-handle__arrow {
    font-size:   8px;
    line-height: 1;
    color:       var( --color-black );
    user-select: none;
}

/* Büyüteç cursor — gerçek zoom efekti */
.spotlight-split-cursor {
    position:       absolute;
    width:          176px;
    height:         176px;
    border-radius:  50%;
    overflow:       hidden;
    border:         1.5px solid rgba( 201, 166, 107, 0.75 );
    box-shadow:     0 0 0 1px rgba( 0, 0, 0, 0.3 ),
                    0 6px 20px rgba( 0, 0, 0, 0.55 );
    pointer-events: none;
    top:            0;
    left:           0;
    transform:      translate( calc( var(--cx, -999px) - 50% ), calc( var(--cy, -999px) - 50% ) );
    opacity:        0;
    transition:     opacity 0.2s ease;
    z-index:        4;
}

[data-spotlight-split]:hover .spotlight-split-cursor {
    opacity: 1;
}

[data-spotlight-split].is-near-divider .spotlight-split-cursor,
[data-spotlight-split].is-dragging-split .spotlight-split-cursor {
    opacity: 0;
}

/* Büyüteç içindeki görsel — global max-width:100% override zorunlu */
.spotlight-split-magnify-img {
    position:        absolute;
    top:             0;
    left:            0;
    transform-origin: top left;
    pointer-events:  none;
    display:         block;
    max-width:       none !important;
    width:           auto;
    height:          auto;
    object-fit:      unset;
}

/* Item hover glow — o parçaya odaklanmış ışık */
.spotlight-item__hover-layer {
    position: absolute;
    inset:    0;
    background: radial-gradient(
        ellipse at 50% 20%,
        rgba(201, 166, 107, 0.18) 0%,
        transparent 65%
    );
    opacity:    0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.spotlight-item__link:hover .spotlight-item__hover-layer {
    opacity: 1;
}

/* Durum etiketi */
.spotlight-item__status {
    display:        block;
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-gold);
    margin-bottom:  var(--space-2);
}

/* IN DEVELOPMENT etiketi — sol hizalı + sağa uzanan ince altın çizgi */
.spotlight-item--coming-soon .spotlight-item__status {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    color:          rgba(201, 166, 107, 0.65);
    letter-spacing: 0.2em;
    font-size:      calc( var(--text-xs) * 0.9 );
    text-align:     left;
    margin-bottom:  var(--space-3);
}

.spotlight-item--coming-soon .spotlight-item__status::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: linear-gradient(
        to right,
        rgba(201, 166, 107, 0.35),
        transparent
    );
}

/* Dormant ember container */
.dormant-embers {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        4;
    overflow:       hidden;
    border-radius:  inherit;
}

/* Sparkle partikülleri — JS tarafından eklenir */
.dormant-spark {
    position:    absolute;
    color:       rgba(201, 166, 107, 0.95);
    font-size:   clamp(6px, 0.8vw, 9px);
    line-height: 1;
    animation:   dormant-rise 2.8s ease-out forwards;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(201, 166, 107, 0.9),
                 0 0 12px rgba(201, 166, 107, 0.4);
    will-change: transform, opacity;
}

@keyframes dormant-rise {
    0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   scale(0.4); }
    12%  { opacity: 0.9; transform: translateY(-6px)   rotate(25deg)  scale(1);   }
    80%  { opacity: 0.5; transform: translateY(-65px)  rotate(110deg) scale(0.7); }
    100% { opacity: 0;   transform: translateY(-85px)  rotate(160deg) scale(0.2); }
}

/* İsim + alt başlık */
.spotlight-item__info {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.spotlight-item__name {
    font-family:    var(--font-display);
    font-size:      var(--text-xl);
    font-weight:    var(--weight-light);
    letter-spacing: -0.01em;
    color:          var(--color-cream);
    transition:     color var(--transition-fast);
}

.spotlight-item__link:hover .spotlight-item__name {
    color: var(--color-gold);
}

.spotlight-item__sub {
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    color:          var(--color-smoke);
    max-width:      none;
}

.spotlight-footer {
    margin-top: var(--space-12);
    text-align: center;
}


/* =============================================================================
   11. PROCESS MİNİ TİMELİNE
   ============================================================================= */

.section-process {
    padding: var(--space-32) 0;
}

.process-timeline {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    position:              relative;
    margin-bottom:         var(--space-12);
}

/* Adımları birleştiren yatay çizgi */
.process-timeline::before {
    content:    '';
    position:   absolute;
    /* Dot yüksekliğine hizalanmış — number(~1.5rem) + margin(1rem) + dot/2(4px) */
    top:        3rem;
    left:       10%;
    right:      10%;
    height:     1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-smoke) 10%,
        var(--color-smoke) 90%,
        transparent
    );
    pointer-events: none;
}

.process-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        0 var(--space-3);
}

.process-step__inner {
    display:        flex;
    flex-direction: column;
    transition:     transform 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
    will-change:    transform;
    align-items:    center;
    width:          100%;
}

.process-step__number {
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-gold);
    margin-bottom:  var(--space-4);
    display:        block;
    max-width:      none;
}

.process-step__dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--color-gold);
    margin-bottom: var(--space-6);
    position:      relative;
    z-index:       1;
    box-shadow:    0 0 8px rgba(201, 166, 107, 0.5);
}

.process-step__title {
    font-family:    var(--font-display);
    font-size:      var(--text-lg);
    font-weight:    var(--weight-light);
    letter-spacing: -0.01em;
    color:          var(--color-cream);
    margin-bottom:  var(--space-2);
}

.process-step__desc {
    font-size:   var(--text-sm);
    line-height: 1.6;
    color:       var(--color-muted);
    max-width:   18ch;
    margin:      0 auto;
}

/* Balonlama hover efekti — JS is-hovered / is-prev / is-next sınıfları ekler */
.process-step.is-hovered .process-step__inner {
    transform: scale( 1.18 ) translateY( -6px );
    position:  relative;
    z-index:   2;
}

.process-step.is-prev .process-step__inner {
    transform: translateX( -22px );
}

.process-step.is-next .process-step__inner {
    transform: translateX( 22px );
}

@media ( prefers-reduced-motion: reduce ) {
    .process-step__inner {
        transition: none;
    }
}

.process-footer {
    text-align: center;
}


/* =============================================================================
   12. QUOTE CTA
   ============================================================================= */

.section-cta {
    padding:    var(--space-40) 0;
    text-align: center;
}

.cta-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-8);
    max-width:      560px;
    margin-inline:  auto;
}

.cta-title {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-4xl), 5vw, var(--text-6xl));
    font-weight:    var(--weight-light);
    letter-spacing: -0.03em;
    line-height:    1;
    color:          var(--color-cream);
    max-width:      none;
}

.cta-description {
    font-size:   var(--text-base);
    line-height: 1.7;
    color:       rgba(239, 230, 215, 0.65);
    max-width:   42ch;
}


/* =============================================================================
   13. 404 SAYFASI
   ============================================================================= */

.error-404 {
    position:   relative;
    min-height: 100vh;
    display:    flex;
    align-items: center;
    padding-top: var(--header-height);
    overflow:   hidden;
}

/* Sabit spotlıght — cursor efekti değil, atmosferik */
.error-404__spotlight {
    position: absolute;
    inset:    0;
    background: radial-gradient(
        55% 55% at 50% 35%,
        rgba(201, 166, 107, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.error-404__inner {
    position:    relative;
    width:       100%;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     var(--space-32) 0;
}

/* Ghost büyük 404 rakamı — arka planda */
.error-404__number {
    position:     absolute;
    font-family:  var(--font-display);
    font-size:    clamp(180px, 28vw, 360px);
    font-weight:  var(--weight-light);
    color:        rgba(201, 166, 107, 0.04);
    letter-spacing: -0.05em;
    line-height:  1;
    user-select:  none;
    pointer-events: none;
    top:          50%;
    left:         50%;
    transform:    translate(-50%, -50%);
    white-space:  nowrap;
    max-width:    none;
}

.error-404__content {
    position:        relative;
    z-index:         1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--space-6);
    text-align:      center;
    max-width:       480px;
}

.error-404__label {
    font-size:      var(--text-xs);
    letter-spacing: 0.2em;
    color:          var(--color-gold);
    max-width:      none;
}

.error-404__title {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight:    var(--weight-light);
    letter-spacing: -0.025em;
    line-height:    1.05;
    color:          var(--color-cream);
}

.error-404__description {
    color:      rgba(239, 230, 215, 0.6);
    max-width:  38ch;
}

.error-404__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    flex-wrap:   wrap;
    justify-content: center;
}

/* Arama alanı — CTA'ların altında, ikincil eylem */
.error-404__search {
    margin-top:     var(--space-10);
    padding-top:    var(--space-8);
    border-top:     1px solid rgba(58, 58, 58, 0.25);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-4);
    width:          100%;
}

.error-404__search-label {
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-muted);
    max-width:      none;
}

.error-404__search .search-form {
    width:     100%;
    max-width: 380px;
    margin:    0 auto;
}


/* =============================================================================
   14. FALLBACK (index.php)
   ============================================================================= */

.fallback-main {
    padding-top: calc(var(--header-height) + var(--space-16));
    min-height:  60vh;
    padding-bottom: var(--space-24);
}

.fallback-entry {
    max-width: var(--max-width-text);
}

.fallback-entry .entry-title {
    font-size:     clamp(var(--text-3xl), 4vw, var(--text-5xl));
    margin-bottom: var(--space-8);
}

.fallback-entry .entry-content {
    color:       rgba(239, 230, 215, 0.8);
    line-height: 1.75;
}

.fallback-entry .entry-content * + * {
    margin-top: var(--space-4);
}

.no-content {
    padding:    var(--space-16) 0;
    color:      var(--color-muted);
    text-align: center;
}


/* =============================================================================
   15. GENERİK SAYFA — page.php (.page-standard)
   Atelier ve Contact dışında kalan WordPress sayfaları için fallback.
   ============================================================================= */

.page-standard {
    padding-top:    calc( var(--header-height) + var(--space-16) );
    padding-bottom: var(--space-32);
    min-height:     60vh;
}

.page-standard .entry-title {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-3xl), 4vw, var(--text-5xl) );
    font-weight:    var(--weight-light);
    letter-spacing: -0.025em;
    line-height:    1.05;
    margin-bottom:  var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom:  1px solid rgba(58, 58, 58, 0.4);
}

.page-standard .entry-content {
    max-width:   var(--max-width-text);
    color:       rgba(239, 230, 215, 0.8);
    line-height: 1.8;
    font-size:   var(--text-base);
}

.page-standard .entry-content > * + * {
    margin-top: var(--space-5);
}

.page-standard .entry-content h2,
.page-standard .entry-content h3 {
    color:       var(--color-cream);
    margin-top:  var(--space-10);
}

.page-standard .entry-content a {
    color:                 var(--color-gold);
    text-decoration:       underline;
    text-underline-offset: 3px;
}

.page-standard .entry-content a:hover {
    color: var(--color-cream);
}


/* =============================================================================
   16. ARAMA FORMU — searchform.php
   get_search_form() çağrısında render edilir.
   Şu an hiçbir template aktif olarak çağırmıyor — ileriye dönük hazır.
   ============================================================================= */

.search-form {
    display:  flex;
    gap:      var(--space-2);
    max-width: 480px;
}

.search-form .search-field {
    flex:          1;
    background:    rgba(26, 25, 24, 0.8);
    border:        1px solid var(--color-smoke);
    border-radius: var(--radius-base);
    color:         var(--color-cream);
    font-family:   var(--font-body);
    font-size:     var(--text-base);
    padding:       var(--space-3) var(--space-5);
    outline:       none;
    transition:    border-color var(--transition-fast);
}

.search-form .search-field::placeholder {
    color: rgba(58, 58, 58, 0.8);
}

.search-form .search-field:focus {
    border-color: var(--color-gold);
    box-shadow:   0 0 0 2px rgba(201, 166, 107, 0.15);
}

.search-form .search-submit {
    appearance:     none;
    -webkit-appearance: none;
    background:     var(--color-smoke);
    border:         none;
    border-radius:  var(--radius-base);
    color:          var(--color-cream);
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        var(--space-3) var(--space-6);
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background var(--transition-fast), color var(--transition-fast);
}

.search-form .search-submit:hover {
    background: var(--color-gold);
    color:      var(--color-black);
}

.search-form .search-submit:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
}


/* =============================================================================
   17. SCROLL ANİMASYONLARI
   JS (Intersection Observer) .is-visible sınıfı ekler.
   prefers-reduced-motion durumunda JS tüm öğeleri anında görünür yapar.
   ============================================================================= */

[data-animate] {
    opacity:    0;
    transition: opacity   var(--transition-slow),
                transform var(--transition-slow);
}

[data-animate='fade-up'] {
    transform: translateY(28px);
}

[data-animate='fade-down'] {
    transform: translateY(-20px);
}

[data-animate='fade-left'] {
    transform: translateX(32px);
}

[data-animate='fade-right'] {
    transform: translateX(-32px);
}

[data-animate].is-visible {
    opacity:   1;
    transform: none;
}


/* =============================================================================
   16. @KEYFRAMES
   ============================================================================= */

/* CTA butonu — dönen gradient border */
@keyframes rotate-gradient {
    to { --gradient-angle: 360deg; }
}

/* Hero scroll göstergesi — çizgi oluşumu */
@keyframes scroll-draw {
    0%   { transform: scaleY(0); transform-origin: top center;    opacity: 0; }
    20%  { opacity: 1; }
    60%  { transform: scaleY(1); transform-origin: top center;    opacity: 1; }
    61%  { transform-origin: bottom center; }
    100% { transform: scaleY(0); transform-origin: bottom center; opacity: 0; }
}


/* =============================================================================
   RESPONSİVE — Tablet ve mobil uyarlamalar
   ============================================================================= */

/* Büyük tablet ve altı */
@media (max-width: 1023px) {

    .site-nav {
        display: none; /* JS ile mobile overlay'e taşınır */
    }

    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    /* Reveal — üst üste */
    .reveal-layout {
        grid-template-columns: 1fr;
        gap:                   var(--space-10);
    }

    .reveal-hero {
        aspect-ratio: 4 / 3;
    }

    /* Process — 2 sütun tablet (3-col'dan dengeli 2+2+1 → 2+3 daha iyi) */
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        row-gap:               var(--space-10);
    }

    .process-timeline::before {
        display: none;
    }

    /* Spotlight — tablet'te de 2 sütun, değişiklik yok */

    /* Footer top — üst üste */
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-nav .footer-menu {
        text-align: left;
    }
}

/* Mobil */
@media (max-width: 767px) {

    /* Spotlight — tek sütun */
    .spotlight-grid {
        grid-template-columns: 1fr;
        max-width:             420px;
        margin-inline:         auto;
    }

    /* Mystery card mobilde minimum yükseklik */
    .mystery-card {
        min-height: 260px;
    }

    .mystery-blob {
        width:  120px;
        height: 120px;
        animation:
            mystery-blob-morph   14s ease-in-out         infinite,
            mystery-blob-expand-sm 8s ease-in-out 0.5s   infinite;
    }

    @keyframes mystery-blob-expand-sm {
        0%, 28%    { width: 120px; height: 120px; }
        44%, 60%   { width: 190px; height:  88px; }
        76%, 100%  { width: 120px; height: 120px; }
    }

    /* Process — tek sütun */
    .process-timeline {
        grid-template-columns: 1fr;
    }

    .process-step {
        flex-direction: row;
        align-items:    flex-start;
        text-align:     left;
        gap:            var(--space-6);
    }

    .process-step__inner {
        align-items: flex-start;
    }

    .process-step__dot {
        display: none; /* mobilde dot gerekmez */
    }

    .process-step__desc {
        max-width: none;
        margin:    0;
    }

    /* Hero içerik padding */
    .hero-content {
        padding-bottom: var(--space-16);
    }

    /* CTA buton tam genişlik */
    .error-404__actions {
        flex-direction: column;
        width:          100%;
    }

    .error-404__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Küçük mobil */
@media (max-width: 479px) {

    /* Spotlight — 2 sütun küçük kartlar */
    .spotlight-grid {
        max-width: none;
    }

    /* Reveal — daha kısa aspect ratio */
    .reveal-hero {
        aspect-ratio: 1 / 1;
    }
}


/* =============================================================================
   CUSTOM CURSOR — Gold crosshair
   @media (hover: none) tarafından gizlenir (touch).
   ============================================================================= */

@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }

    a, button, [role="button"], label, input, textarea, select,
    [data-comparison-slider] { cursor: none; }
}

.ih-cursor {
    position:       fixed;
    top:            0;
    left:           0;
    width:          24px;
    height:         24px;
    margin-left:    -12px;
    margin-top:     -12px;
    pointer-events: none;
    z-index:        99999;
    will-change:    transform;
    transition:     opacity 0.2s ease;
}

/* crosshair — four gold lines meeting at centre with a gap */
.ih-cursor::before,
.ih-cursor::after {
    content:          '';
    position:         absolute;
    background:       var(--color-gold, #C9A66B);
    border-radius:    1px;
    transition:       transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                      width    0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                      height   0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                      opacity  0.25s ease;
}

/* horizontal bar */
.ih-cursor::before {
    top:       50%;
    left:      0;
    width:     100%;
    height:    1px;
    transform: translateY(-50%);
    /* 4px gap in the middle — two halves via box-shadow trick */
    background: linear-gradient(
        to right,
        var(--color-gold, #C9A66B) calc(50% - 4px),
        transparent                calc(50% - 4px),
        transparent                calc(50% + 4px),
        var(--color-gold, #C9A66B) calc(50% + 4px)
    );
}

/* vertical bar */
.ih-cursor::after {
    left:      50%;
    top:       0;
    height:    100%;
    width:     1px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        var(--color-gold, #C9A66B) calc(50% - 4px),
        transparent                calc(50% - 4px),
        transparent                calc(50% + 4px),
        var(--color-gold, #C9A66B) calc(50% + 4px)
    );
}

/* Hover: slightly larger crosshair */
.ih-cursor.is-hover {
    width:       36px;
    height:      36px;
    margin-left: -18px;
    margin-top:  -18px;
}

@media (prefers-reduced-motion: reduce) {
    .ih-cursor::before,
    .ih-cursor::after { transition: none; }
}


/* =============================================================================
   LIGHT MODE — Element overrides for hardcoded dark values
   CSS variable token overrides live in style.css [data-theme="light"].
   ============================================================================= */

/* Smooth transition on theme switch — runs once, then JS removes the class */
html.theme-switching,
html.theme-switching * {
    transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease !important;
}

/* Header glass — hardcoded rgba needs override */
[data-theme="light"] .site-header.scrolled,
[data-theme="light"] .is-interior .site-header {
    background-color: rgba(240, 234, 224, 0.72);
    border-bottom-color: rgba(154, 106, 48, 0.18);
}

/* Dil seçici — hardcoded cream rgba light modda zeminde kaybolur */
[data-theme="light"] .ih-lang-switch .lang-item a {
    color: rgba(28, 21, 16, 0.5);
}

[data-theme="light"] .ih-lang-switch .lang-item a:hover,
[data-theme="light"] .ih-lang-switch .current-lang a {
    color: rgba(28, 21, 16, 0.9);
}

[data-theme="light"] .ih-lang-switch .lang-item + .lang-item::before {
    color: rgba(28, 21, 16, 0.2);
}

/* btn--gold hover — light modda var(--color-cream) = #1C1510 (koyu) → düzelt */
[data-theme="light"] .btn--gold:hover {
    background: rgba(201, 166, 107, 0.88);
    color:      var(--color-black);
}

/* btn--gradient-border — light modda conic-gradient cream segmenti koyu görünür */
/* Çözüm: header CTA ile aynı frame / outline-gold stiline geç */
[data-theme="light"] .btn--gradient-border {
    background:    transparent;
    border:        1px solid var(--color-gold);
    padding:       0;
    animation:     none;
    border-radius: var(--radius-base);
}

[data-theme="light"] .btn--gradient-border .btn__inner {
    background: transparent;
    color:      var(--color-gold);
}

[data-theme="light"] .btn--gradient-border:hover {
    background: var(--color-gold);
}

[data-theme="light"] .btn--gradient-border:hover .btn__inner {
    color: var(--color-black);
}

/* Process timeline — muted desc opacity arttırıldı, espresso okunurluğu */
[data-theme="light"] .process-step__title {
    color: #1C1510;
}

[data-theme="light"] .process-step__desc {
    color: rgba(28, 21, 16, 0.65);
}

/* Hero overlay — hardcoded rgba(10,9,8) korunur (video her zaman dark zemin) */

/* Reveal bölümü — hardcoded cream */
[data-theme="light"] .reveal-description {
    color: rgba(28, 21, 16, 0.7);
}

/* Spotlight alt metin — var(--color-smoke) light modda #BFB3A6, çok soluk */
[data-theme="light"] .spotlight-item__sub {
    color: rgba(28, 21, 16, 0.5);
}

/* CTA açıklama metni */
[data-theme="light"] .cta-description {
    color: rgba(28, 21, 16, 0.65);
}

/* 404 sayfası */
[data-theme="light"] .error-404__description {
    color: rgba(28, 21, 16, 0.6);
}

[data-theme="light"] .error-404__search {
    border-top-color: rgba(28, 21, 16, 0.15);
}

/* Fallback ve genel sayfa içerikleri */
[data-theme="light"] .fallback-entry .entry-content,
[data-theme="light"] .page-standard .entry-content {
    color: rgba(28, 21, 16, 0.8);
}

[data-theme="light"] .page-standard .entry-title {
    border-bottom-color: rgba(28, 21, 16, 0.15);
}

/* Spotlight görsel wrap — near-black placeholder → warm neutral */
[data-theme="light"] .spotlight-item__image-wrap {
    background: rgba(180, 165, 150, 0.25);
}

/* Blueprint (wireframe): mix-blend-mode:screen açık zemin üzerinde sisi bulutu yaratır
   (screen(açık,açık) ≈ beyaz) → normal blend ile wireframe fotoğraf olduğu gibi görünür */
[data-theme="light"] .spotlight-item__image--blueprint {
    mix-blend-mode: normal;
    opacity:        0.92;
    filter:         brightness(0.88) saturate(0.15) contrast(1.05);
}

/* Hover: blueprint neredeyse kaybolur, metal öne çıkar */
[data-theme="light"] .spotlight-item--coming-soon .spotlight-item__link:hover .spotlight-item__image--blueprint {
    opacity: 0.06;
    filter:  brightness(1.0) saturate(0.1);
}

/* Metal hover — light modda daha belirgin */
[data-theme="light"] .spotlight-item--coming-soon .spotlight-item__link:hover .spotlight-item__image--metal {
    opacity: 0.9;
}

/* Arama input — dark background → açık zemin */
[data-theme="light"] .search-form .search-field {
    background:   rgba(240, 234, 224, 0.6);
    border-color: rgba(28, 21, 16, 0.2);
    color:        #1C1510;
}

[data-theme="light"] .search-form .search-field::placeholder {
    color: rgba(28, 21, 16, 0.35);
}

/* Logo — light modda hafif espresso drop-shadow (SVG şekline uyar) */
[data-theme="light"] .site-logo-link img,
[data-theme="light"] .site-logo-link svg,
[data-theme="light"] .site-logo-link .custom-logo {
    filter: drop-shadow(0 1px 4px rgba(28, 21, 16, 0.22));
}

[data-theme="light"] .footer-logo-link img,
[data-theme="light"] .footer-logo-link svg,
[data-theme="light"] .footer-logo-link .custom-logo {
    filter: drop-shadow(0 1px 4px rgba(28, 21, 16, 0.22));
}

/* Theme toggle in mobile — keep visible after .header-cta hides */
@media (max-width: 1023px) {
    .theme-toggle {
        margin-left: auto;
        order: 2;
    }
    .menu-toggle {
        order: 3;
        margin-left: 0;
    }
}



/* =============================================================================
   INSTAGRAM POPUP — Zamanlı takip daveti
   Sağ alt köşeden spring animasyonuyla girer. Bir kez gösterilir (sessionStorage).
   ============================================================================= */

/* Spring entrance — bounce overshoot */
@keyframes ih-popup-spring {
    0%   { transform: translateY(48px) scale(0.90); opacity: 0; }
    55%  { transform: translateY(-8px)  scale(1.02); opacity: 1; }
    75%  { transform: translateY(4px)   scale(0.99); opacity: 1; }
    90%  { transform: translateY(-2px)  scale(1.00); opacity: 1; }
    100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Instagram ikon sürekli nabız */
@keyframes ih-popup-icon-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(220, 39, 67, 0); }
    50%       { transform: scale(1.10); box-shadow: 0 0 0 8px rgba(220, 39, 67, 0); }
}

/* Buton üzerinde kayan parlama */
@keyframes ih-popup-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.ih-ig-popup {
    position:        fixed;
    bottom:          var(--space-6);
    right:           var(--space-6);
    z-index:         900;
    width:           310px;
    background:      rgba(10, 9, 8, 0.90);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border:          1px solid rgba(201, 166, 107, 0.22);
    border-radius:   var(--radius-base);
    box-shadow:      0 12px 56px rgba(0, 0, 0, 0.60),
                     0 0 0 1px rgba(201, 166, 107, 0.07);
    padding:         var(--space-6);
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-4);
    /* hidden state */
    opacity:         0;
    pointer-events:  none;
    transform:       translateY(48px) scale(0.90);
    /* no transition on hidden — animation handles entrance */
    transition:      opacity 0.4s ease, transform 0.4s ease;
}

.ih-ig-popup.is-visible {
    opacity:        1;
    pointer-events: auto;
    animation:      ih-popup-spring 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Header satırı */
.ih-ig-popup__head {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
}

/* Avatar wrapper — profil fotoğrafı + Instagram rozeti */
.ih-ig-popup__avatar-wrap {
    position:    relative;
    flex-shrink: 0;
    width:       46px;
    height:      46px;
}

/* Profil fotoğrafı — yuvarlak, gradient halka */
.ih-ig-popup__avatar {
    width:         46px;
    height:        46px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
    /* Instagram gradient border via outline trick */
    padding:       2px;
    background:    linear-gradient( #0a0908, #0a0908 ) padding-box,
                   linear-gradient( 135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888 ) border-box;
    border:        2px solid transparent;
}

/* Fallback: profil fotoğrafı yoksa gradient kutu */
.ih-ig-popup__icon-fallback {
    width:           46px;
    height:          46px;
    border-radius:   12px;
    background:      linear-gradient( 135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% );
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
}
.ih-ig-popup__icon-fallback svg { width: 20px; height: 20px; }

/* Instagram rozeti — sağ alt köşede küçük IG ikonu */
.ih-ig-popup__ig-badge {
    position:         absolute;
    bottom:           -3px;
    right:            -3px;
    width:            20px;
    height:           20px;
    border-radius:    6px;
    background:       linear-gradient( 135deg, #f09433 0%, #dc2743 50%, #bc1888 100% );
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            #fff;
    border:           1.5px solid #0a0908;
}
.ih-ig-popup__ig-badge .ih-ig-popup__badge-icon { width: 11px; height: 11px; stroke-width: 2; }

/* Avatar nabız — popup göründükten 0.7s sonra */
.ih-ig-popup.is-visible .ih-ig-popup__avatar-wrap {
    animation: ih-popup-icon-pulse 2.4s ease-in-out 0.7s infinite;
}

/* Metin grubu */
.ih-ig-popup__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ih-ig-popup__title {
    font-family:    var(--font-display);
    font-size:      var(--text-base);
    font-weight:    var(--weight-light);
    letter-spacing: -0.01em;
    color:          var(--color-cream);
    line-height:    1.2;
}

.ih-ig-popup__subtitle {
    font-family:    var(--font-body);
    font-size:      calc( var(--text-xs) * 0.95 );
    color:          rgba(239, 230, 215, 0.55);
    line-height:    1.45;
    letter-spacing: 0;
}

.ih-ig-popup__handle {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.09em;
    color:          rgba(201, 166, 107, 0.70);
}

/* Kapat butonu */
.ih-ig-popup__close {
    appearance:      none;
    flex-shrink:     0;
    width:           28px;
    height:          28px;
    background:      transparent;
    border:          none;
    border-radius:   50%;
    color:           rgba(239, 230, 215, 0.30);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition:      color var(--transition-fast),
                     background var(--transition-fast);
    margin-top:      -2px;
    margin-right:    -4px;
}

.ih-ig-popup__close:hover {
    color:      var(--color-cream);
    background: rgba(239, 230, 215, 0.08);
}

.ih-ig-popup__close svg { width: 12px; height: 12px; }

/* Takip et butonu — shimmer parlama efekti */
.ih-ig-popup__btn {
    position:        relative;
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-3) var(--space-5);
    border-radius:   var(--radius-sm);
    background:      linear-gradient(
                         135deg,
                         #f09433 0%, #e6683c 25%,
                         #dc2743 50%, #cc2366 75%, #bc1888 100%
                     );
    color:           #fff;
    font-family:     var(--font-mono);
    font-size:       var(--text-xs);
    letter-spacing:  0.12em;
    text-decoration: none;
    text-transform:  uppercase;
    font-weight:     500;
    transition:      opacity var(--transition-fast),
                     transform var(--transition-fast),
                     box-shadow var(--transition-fast);
}

/* Shimmer şeridi */
.ih-ig-popup__btn::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
                    105deg,
                    transparent 30%,
                    rgba(255, 255, 255, 0.28) 50%,
                    transparent 70%
                );
    background-size: 200% auto;
    animation: ih-popup-shimmer 2.8s linear 1.4s infinite;
}

.ih-ig-popup__btn:hover {
    opacity:    0.92;
    transform:  translateY(-2px);
    box-shadow: 0 6px 24px rgba(220, 39, 67, 0.35);
}

.ih-ig-popup__btn svg { width: 14px; height: 14px; flex-shrink: 0; position: relative; z-index: 1; }

/* Küçük not */
.ih-ig-popup__note {
    font-family:    var(--font-mono);
    font-size:      calc( var(--text-xs) * 0.85 );
    letter-spacing: 0.07em;
    color:          rgba(239, 230, 215, 0.22);
    text-align:     center;
    line-height:    1.5;
}

/* Light mode */
[data-theme="light"] .ih-ig-popup {
    background:   rgba(240, 234, 224, 0.94);
    border-color: rgba(154, 106, 48, 0.25);
    box-shadow:   0 12px 56px rgba(28, 21, 16, 0.20),
                  0 0 0 1px rgba(154, 106, 48, 0.08);
}

[data-theme="light"] .ih-ig-popup__title    { color: #1c1510; }
[data-theme="light"] .ih-ig-popup__subtitle { color: rgba(28, 21, 16, 0.50); }
[data-theme="light"] .ih-ig-popup__note     { color: rgba(28, 21, 16, 0.28); }
[data-theme="light"] .ih-ig-popup__close    { color: rgba(28, 21, 16, 0.35); }
[data-theme="light"] .ih-ig-popup__close:hover {
    color:      rgba(28, 21, 16, 0.80);
    background: rgba(28, 21, 16, 0.07);
}

/* Mobil — tam genişlik, altta sabitli */
@media (max-width: 479px) {
    .ih-ig-popup {
        left:         var(--space-4);
        right:        var(--space-4);
        bottom:       var(--space-4);
        width:        auto;
    }
}