/* ==========================================================================
   İmece Düğün — Refresh Layer
   style.css'in ustune biner. Amac: premium gece paleti, gorsel sadelestirme,
   kaydirma tetikli mikro-etkilesimler, dokunmatik oncelikli yogunluk yonetimi.
   Bu dosya bilerek ayri tutuldu: geri almak icin tek <link> silmek yeterli.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gece yuzey olcegi & hareket egrileri
   -------------------------------------------------------------------------- */
:root {
    /* Gece katmanlari: her basamak bir yukseklik seviyesi. Altin artik
       kenarlik degil, yalnizca vurgu. */
    --n-0: #08080A;   /* sayfa zemini */
    --n-1: #0D0D10;   /* alternatif bolum */
    --n-2: #131318;   /* kart */
    --n-3: #1B1B21;   /* yukseltilmis kart / hover */

    --n-line: rgba(255, 255, 255, 0.08);
    --n-line-strong: rgba(255, 255, 255, 0.16);

    --n-text: #F3F1EE;
    --n-text-muted: #A6A2A8;
    /* Onceki deger #6F6C75, --n-2/--n-0/--n-3 zeminlerine karsi 3.33-3.89:1
       veriyordu; 11-13px kucuk etiketlerde kullanildigi icin WCAG AA'nin
       4.5:1 esigini (buyuk metin istisnasi gecerli degil) gecmiyordu.
       #8E8B95 ile (python3, WCAG bagil parlaklik formulu):
         --n-0 (#08080A) -> 5.98:1
         --n-2 (#131318) -> 5.54:1
         --n-3 (#1B1B21) -> 5.12:1
       Ucu de 4.5:1'in uzerinde. */
    --n-text-faint: #8E8B95;

    /* Tek bir altin aksan. Kartlarda dolgu/kenarlik olarak degil,
       CTA ve tek kelimelik vurgularda kullanilir. */
    --accent: #D9B46A;
    --accent-deep: #B08A3C;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Bolum ritmi: negatif alan burada uretiliyor. */
    --sec-pad: clamp(72px, 7.5vw, 124px);
    --stack-lg: clamp(40px, 5vw, 72px);
}

.dark-overlay {
    background-color: var(--n-0);
    /* Mobil/reduced-motion yolunda JS scrub yok; gecis CSS'e birakildi. */
    transition: opacity 0.6s ease;
}
.dark-overlay.is-on {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Tipografi hiyerarsisi
   Playfair yalnizca buyuk anlatim basliklarinda kalir. Kart basliklari
   Inter'e cekilir: 12 kartin ust uste serif olmasi gurultunun yarisiydi.
   -------------------------------------------------------------------------- */
h3,
h4 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.021em;
    line-height: 1.3;
}

/* style.css bu basliklara daha ozgul secicilerle Playfair veriyor;
   kart baslikları burada tek tek Inter'e cekiliyor. */
.card-title,
.asistan-card h3,
.gunici-head h3,
.feature-card h3,
.details-card h3,
.template-card h3,
.timeline-card-header h3,
.surprise-content-box h3,
.rsvp-sim-controls h3,
.calculator-result h3,
.comparison-card h3 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.021em;
}

/* Anlatim rolundeki h3'ler serif kalir. */
.section-header h3,
.pain-result-body h3,
.cta-container h3,
.pricing-header h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.005em;
}

h2 {
    line-height: 1.15;
}

.section-header {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--stack-lg);
}

.section-subtitle {
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
}

/* Bolum etiketi: dolgulu altin rozet yerine ince harf araligi.
   Sayfada 9 tane vardi; hepsi ayni anda dikkat cekiyordu. */
.section-tag,
.section-tag.gold {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: var(--n-text-faint) !important;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
body:not(.dark-active) .section-tag,
body:not(.dark-active) .section-tag.gold {
    color: var(--text-light) !important;
}

/* Altin gradyan basliklar: gradyan yerine duz aksan.
   Gradyan metin alt satirlarda kirpiliyor ve okunurlugu dusuruyordu. */
body.dark-active .text-gold-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   3. Bolum ritmi — nefes alani
   -------------------------------------------------------------------------- */
.pain-check-section,
.kriz-cozum-section,
.asistan-section,
.gunici-section,
.rsvp-showcase-section,
.interactive-calculator,
.features,
.pricing,
.faq-section,
.cta-bottom {
    padding-top: var(--sec-pad);
    padding-bottom: var(--sec-pad);
}

/* Gece bolumleri arasinda sessiz bir zemin farki: cizgi cekmeden ayirir. */
body.dark-active .asistan-section,
body.dark-active .features,
body.dark-active .faq-section {
    background-color: rgba(255, 255, 255, 0.014);
}

/* --------------------------------------------------------------------------
   4. Gece yuzeyleri — altin kenarliklarin temizligi
   -------------------------------------------------------------------------- */
body.dark-active .flip-card-front,
body.dark-active .flip-card-back,
body.dark-active .asistan-card,
body.dark-active .gunici-card,
body.dark-active .details-card,
body.dark-active .feature-card,
body.dark-active .pricing-card,
body.dark-active .calculator-container,
body.dark-active .calculator-result,
body.dark-active .comparison-card {
    background-color: var(--n-2) !important;
    background-image: none !important;
    border: 1px solid var(--n-line) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    transition:
        transform 0.45s var(--ease-out-expo),
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        background-color 0.45s ease;
}

body.dark-active .flip-card-front,
body.dark-active .flip-card-back {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kart ici mockup panelleri: bir alt basamak, kenarlik yok. */
body.dark-active .asistan-mockup,
body.dark-active .gunici-mock,
body.dark-active .card-mockup,
body.dark-active .mini-mockup {
    background-color: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--n-line) !important;
    box-shadow: none !important;
}

/* Hesaplayici sonuc karti: metin renkleri satir ici stille acik zemine
   gore yazilmisti; koyu yuzeyde okunmuyordu. */
body.dark-active .calculator-result .plan-features-list > div,
body.dark-active .calculator-result .plan-features-list span {
    color: var(--n-text) !important;
}
body.dark-active .calculator-result .price-period,
body.dark-active .calculator-result #recommendedPlanPeriod {
    color: var(--n-text-faint) !important;
}
body.dark-active .calculator-result #recommendedPlanDesc {
    color: var(--n-text-muted) !important;
}
body.dark-active .calculator-result .plan-features-list {
    border-top-color: var(--n-line) !important;
}
body.dark-active .result-badge {
    background: rgba(217, 180, 106, 0.12) !important;
    border: 1px solid rgba(217, 180, 106, 0.28) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}

/* Altin ikon kutulari: dolgu yerine ince cerceve. */
body.dark-active .asistan-icon-wrap,
body.dark-active .gunici-icon,
body.dark-active .card-icon-wrapper,
body.dark-active .feature-icon-wrapper,
body.dark-active .details-card-icon {
    background: rgba(217, 180, 106, 0.10) !important;
    border: 1px solid rgba(217, 180, 106, 0.20) !important;
    box-shadow: none !important;
    color: var(--accent) !important;
}
body.dark-active .asistan-icon-wrap .material-icons-round,
body.dark-active .gunici-icon .material-icons-round,
body.dark-active .feature-icon-wrapper .material-icons-round,
body.dark-active .details-card-icon .material-icons-round {
    color: var(--accent) !important;
}

/* Sira numaralari / kickerlar: bilgi degil dekor. Geri cekiliyor. */
body.dark-active .asistan-ordinal {
    color: rgba(255, 255, 255, 0.045) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.045) !important;
    background: none !important;
}
body.dark-active .asistan-tag,
body.dark-active .gunici-kicker {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--n-text-faint) !important;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.dark-active .asistan-desc,
body.dark-active .gunici-desc,
body.dark-active .flip-card-front p,
body.dark-active .flip-card-back p {
    color: var(--n-text-muted) !important;
}

/* Govde metnindeki altin ic vurgular: gece zemininde satir satir
   altin kelime okumayi yoruyordu. Beyaz + agirlik yeterli. */
body.dark-active .asistan-desc strong,
body.dark-active .gunici-desc strong,
body.dark-active .flip-card-back p strong,
body.dark-active .flip-card-front p strong {
    color: var(--n-text) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Mikro-etkilesimler
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    body.dark-active .asistan-card:hover,
    body.dark-active .gunici-card:hover,
    body.dark-active .feature-card:hover,
    body.dark-active .details-card:hover {
        transform: translateY(-4px);
        border-color: var(--n-line-strong) !important;
        background-color: var(--n-3) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
    }
}

/* Butonlar: tek bir basma/parlama dili. */
.btn {
    border-radius: 12px;
    transition:
        transform 0.28s var(--ease-spring),
        box-shadow 0.28s ease,
        background-color 0.28s ease,
        color 0.28s ease;
    will-change: transform;
}
.btn:active {
    transform: scale(0.975);
}
.btn-primary {
    position: relative;
    overflow: hidden;
}
/* Isik suzulmesi: yalnizca hover'da, tek gecis. */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(176, 138, 60, 0.35);
    }
    .btn-primary:hover::after {
        transform: translateX(120%);
        transition: transform 0.75s var(--ease-out-expo);
    }
}

/* Klavye odagi: gece zemininde gorunur tek bir halka. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* Magaza rozetleri */
.store-badge-official {
    transition:
        transform 0.28s var(--ease-spring),
        box-shadow 0.28s ease;
}
@media (hover: hover) and (pointer: fine) {
    .store-badge-official:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    }
}
.store-badge-official:active {
    transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   6. Kaydirma tetikli goruntuleme
   IntersectionObserver .is-in ekler. Yalnizca opacity + transform:
   layout tetiklemez, telefonlarda da 60fps kalir.
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 0.7s var(--ease-out-expo),
        transform 0.7s var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal].is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* Animasyon bitince will-change birakilir. */
[data-reveal].is-settled {
    will-change: auto;
    transition: none;
}

/* Dekoratif derinlik: destekleyen tarayicilarda kaydirma zaman cizgisi,
   digerlerinde hicbir sey olmaz (progressive enhancement). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
        .asistan-mockup,
        .gunici-mock {
            animation: refresh-parallax linear both;
            animation-timeline: view();
            animation-range: entry 15% cover 70%;
        }
        @keyframes refresh-parallax {
            from { transform: translate3d(0, 18px, 0); }
            to   { transform: translate3d(0, -14px, 0); }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn-primary::after {
        display: none;
    }
    /* Cekmece ve basa don butonu: acilis/kapanis aninda olsun, kayarak degil. */
    .nav-drawer-scrim,
    .nav-drawer-panel,
    .nav-toggle-bar,
    .to-top {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   7. Yogunluk — "Tanidik gelenler" listesi katlanir
   14 madde bir anda ekrani doldurmuyor; 6 gorunur, gerisi istege bagli.
   -------------------------------------------------------------------------- */
.pain-check-list.is-collapsed .pain-item[data-overflow] {
    display: none;
}

.pain-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 14px 20px;
    background: transparent;
    border: 1px dashed var(--n-line-strong);
    border-radius: 14px;
    color: var(--n-text-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}
body:not(.dark-active) .pain-more {
    border-color: rgba(29, 29, 31, 0.18);
    color: var(--text-muted);
}
.pain-more:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(217, 180, 106, 0.06);
}
.pain-more .material-icons-round {
    font-size: 1.15rem;
    transition: transform 0.35s var(--ease-out-expo);
}
.pain-check-list:not(.is-collapsed) + .pain-more .material-icons-round,
.pain-more[aria-expanded="true"] .material-icons-round {
    transform: rotate(180deg);
}

body.dark-active .pain-item {
    background-color: var(--n-2) !important;
    border: 1px solid var(--n-line) !important;
    box-shadow: none !important;
}
body.dark-active .pain-item .pain-quote {
    color: var(--n-text) !important;
}
body.dark-active .pain-item .pain-meta {
    color: var(--n-text-faint) !important;
}
body.dark-active .pain-item.checked {
    background-color: rgba(217, 180, 106, 0.09) !important;
    border-color: rgba(217, 180, 106, 0.38) !important;
}
body.dark-active .pain-result-card {
    background-color: var(--n-2) !important;
    border: 1px solid var(--n-line) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
body.dark-active .pain-result-body p,
body.dark-active .pain-solution-name {
    color: var(--n-text-muted) !important;
}
/* Sonuc karti artik koyu: sayac ve halka acik zemin icin ayarlanmisti. */
body.dark-active .pain-score-num {
    color: var(--n-text) !important;
}
body.dark-active .pain-score-den {
    color: var(--n-text-faint) !important;
}
body.dark-active .pain-gauge-track {
    stroke: rgba(255, 255, 255, 0.10);
}
body.dark-active .pain-gauge-fill {
    stroke: var(--accent);
}
body.dark-active .pain-solution-check,
body.dark-active .pain-solution-arrow {
    color: var(--accent) !important;
}
body.dark-active .pain-result-tag {
    color: var(--n-text-faint) !important;
}
body.dark-active .pain-solution-row {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--n-line) !important;
}

/* --------------------------------------------------------------------------
   8. Yogunluk — 12 cozum karti yatay galeri
   Uc satirlik izgara yerine tek satirlik, kaydirma-yapisan bir ray.
   Mobilde parmakla, masaustunde ok tuslari/duglemelerle gezilir.
   -------------------------------------------------------------------------- */
.kriz-rail {
    position: relative;
    margin-top: var(--stack-lg);
}

.kriz-cozum-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 20px;
    margin-top: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 6px 4px 22px;
    /* Kenarlarda kirpilma sinyali: daha fazlasi oldugunu soyler. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kriz-cozum-grid::-webkit-scrollbar {
    display: none;
}
.kriz-cozum-grid > .flip-card {
    flex: 0 0 clamp(272px, 25vw, 340px);
    scroll-snap-align: start;
    height: 470px;
}

/* Ray kontrolleri */
.kriz-rail-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.kriz-rail-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--n-line-strong);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s var(--ease-spring),
        opacity 0.3s ease;
}
body:not(.dark-active) .kriz-rail-btn {
    border-color: rgba(29, 29, 31, 0.16);
}
.kriz-rail-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.kriz-rail-btn:active:not(:disabled) {
    transform: scale(0.92);
}
.kriz-rail-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.kriz-rail-progress {
    flex: 1;
    height: 2px;
    background: var(--n-line);
    border-radius: 2px;
    overflow: hidden;
    max-width: 260px;
    margin-right: auto;
}
.kriz-rail-progress i {
    display: block;
    height: 100%;
    width: 18%;
    background: var(--accent);
    border-radius: 2px;
    transform-origin: left;
    transition: width 0.25s ease, transform 0.25s ease;
}

.kriz-rail-hint {
    font-size: 0.8125rem;
    color: var(--n-text-faint);
    letter-spacing: 0.02em;
}

@media (max-width: 767px) {
    .kriz-rail-nav {
        justify-content: space-between;
    }
    .kriz-rail-btn {
        display: none;
    }
    .kriz-cozum-grid {
        gap: 14px;
        padding-left: max(4px, env(safe-area-inset-left));
    }
    .kriz-cozum-grid > .flip-card {
        flex: 0 0 84vw;
        height: 500px;
    }
}

/* Ray icinde 3D salinim gereksiz: yatay kaydirmada titreme yapiyordu. */
.kriz-cozum-grid .flip-card-wobble {
    animation: none !important;
}

/* --------------------------------------------------------------------------
   9. Sabit mobil CTA — donusum
   Kahraman alandan sonra beliren, ayak bolumunde geri cekilen indirme cubugu.
   -------------------------------------------------------------------------- */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(10, 10, 12, 0.82);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--n-line);
    transform: translate3d(0, 110%, 0);
    transition: transform 0.5s var(--ease-out-expo);
    will-change: transform;
}
.sticky-cta.is-visible {
    transform: translate3d(0, 0, 0);
}
.sticky-cta-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.sticky-cta-copy b {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--n-text);
}
.sticky-cta-copy span {
    font-size: 0.75rem;
    color: var(--n-text-faint);
}
.sticky-cta .btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 12px 22px;
    font-size: 0.9rem;
}
@media (min-width: 768px) {
    .sticky-cta {
        display: none;
    }
}

/* Sabit cubuk sayfayi kapatmasin. */
@media (max-width: 767px) {
    body.has-sticky-cta footer {
        padding-bottom: 96px;
    }
}

/* --------------------------------------------------------------------------
   10. Navbar — kaydirmada incelen, CTA'si one cikan
   -------------------------------------------------------------------------- */
.navbar {
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        padding 0.4s var(--ease-out-expo);
}
.nav-links a {
    position: relative;
    transition: color 0.28s ease;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
    .nav-links a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }
}
.nav-download-btn {
    box-shadow: 0 6px 20px rgba(176, 138, 60, 0.25);
}

/* --------------------------------------------------------------------------
   11. Fiyatlandirma & SSS sadelestirme
   -------------------------------------------------------------------------- */
/* Sol sutun, sagdaki uzun sonuc kartina gore ortalaniyordu; ust bosluk
   forma degil hicbir seye hizalaniyordu. */
.calculator-container {
    align-items: start;
}

/* "199 ₺ / 6 ay geçerli" ikinci satira kaciyordu. Yalnizca genis ekranda:
   dar ekranda nowrap satiri karttan tasiriyor. */
@media (min-width: 768px) {
    .result-price-row,
    .pricing-header .price {
        white-space: nowrap;
    }
}
body.dark-active .pricing-card.featured,
body.dark-active .pricing-card.popular {
    border-color: rgba(217, 180, 106, 0.45) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
body.dark-active .faq-item {
    border-bottom-color: var(--n-line) !important;
}
body.dark-active .faq-question {
    transition: color 0.28s ease;
}
.faq-answer p {
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   12b. Kurucu notu — fiyat oncesi guven halkasi
   Sayfada hicbir sosyal kanit yoktu. Gercek puan/yorum verisi olmadigi icin
   uydurma rakam yerine imzali bir not ve dogrulanabilir taahhutler var.
   -------------------------------------------------------------------------- */
.founder-section {
    padding-top: var(--sec-pad);
    padding-bottom: 0;
}

.founder-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px);
    border-radius: 24px;
    border: 1px solid var(--n-line);
    background-color: var(--n-2);
}
body:not(.dark-active) .founder-card {
    border-color: var(--border-color);
    background-color: var(--surface);
    box-shadow: var(--shadow-soft);
}

/* Dev tirnak: dekor, ekran okuyucudan gizli, metnin arkasinda. */
.founder-quote-mark {
    position: absolute;
    top: 4px;
    left: clamp(20px, 4vw, 40px);
    font-family: var(--font-heading);
    font-size: 7rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
}

.founder-quote {
    position: relative;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem);
    line-height: 1.55;
    letter-spacing: -0.005em;
}
.founder-quote p + p {
    margin-top: 16px;
}
body.dark-active .founder-quote {
    color: var(--n-text);
}

.founder-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--n-line);
}
body:not(.dark-active) .founder-meta {
    border-top-color: var(--border-color);
}
.founder-sign {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.founder-role {
    font-size: 0.8125rem;
    color: var(--n-text-faint);
}
body:not(.dark-active) .founder-role {
    color: var(--text-light);
}

.founder-promises {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.founder-promises li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--n-text-muted);
}
body:not(.dark-active) .founder-promises li {
    color: var(--text-muted);
}
.founder-promises b {
    color: var(--n-text);
    font-weight: 600;
}
body:not(.dark-active) .founder-promises b {
    color: var(--text-main);
}
.founder-promises .material-icons-round {
    font-size: 20px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
}

.founder-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid var(--n-line-strong);
    color: var(--accent);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.28s var(--ease-spring);
}
body:not(.dark-active) .founder-mail {
    border-color: rgba(29, 29, 31, 0.16);
    color: var(--gold-text);
}
.founder-mail:hover {
    border-color: var(--accent);
    background: rgba(217, 180, 106, 0.08);
}
.founder-mail:active {
    transform: scale(0.975);
}
.founder-mail .material-icons-round {
    font-size: 18px;
}

@media (max-width: 767px) {
    .founder-quote-mark {
        font-size: 5rem;
    }
}

/* --------------------------------------------------------------------------
   12. Kapanis CTA — sayfanin en belirgin dugmesi
   -------------------------------------------------------------------------- */
.cta-bottom .cta-container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.cta-bottom .central-store-buttons {
    margin-top: 34px;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   13. Mobil navigasyon cekmecesi
   .nav-links 767px altinda zaten display:none (style.css). Onun yerine
   sagdan kayan tam ekran bir cekmece; hamburger <-> capraz gecisi transform
   ile, layout tetiklemeden.
   -------------------------------------------------------------------------- */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--n-line-strong);
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .nav-toggle {
        display: inline-flex;
    }
}
.nav-toggle-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 2px;
    background: var(--n-text);
    border-radius: 2px;
    transform: translateY(-4px);
    transition: transform 0.35s var(--ease-out-expo);
}
.nav-toggle-bar:nth-child(2) {
    transform: translateY(3px);
}
/* Capraz: iki cubuk ortada bulusup zit yonde donuyor. Yalnizca transform
   degisiyor, boylece gecis GPU'da kalir. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
}

/* Cekmece: tam ekran katman. .navbar z-index:1000 oldugu icin daha dusuk
   bir deger (ör. 120) cekmeceyi navbar'in ARKASINDA birakir — ust seritte
   navbar'in kendi (opak/blur) zemini cekmecenin uzerini kapatir. Bu yuzden
   navbar'in ustunde kaliyor. */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1010;
}
/* [hidden] normalde UA stilinden display:none alir; asagida display atayan
   bir kural yok ama guvenlik agi olarak aciktan yaziliyor. */
.nav-drawer[hidden] {
    display: none;
}

.nav-drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 6, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
}
.nav-drawer.is-open .nav-drawer-scrim {
    opacity: 1;
}

.nav-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(86vw, 360px);
    background: var(--n-1);
    border-left: 1px solid var(--n-line);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4);
    padding: calc(20px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 20px;
    overflow-y: auto;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.45s var(--ease-out-expo);
}
.nav-drawer.is-open .nav-drawer-panel {
    transform: translate3d(0, 0, 0);
}

.nav-drawer-panel a:not(.nav-drawer-cta) {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--n-text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border-bottom: 1px solid var(--n-line);
    transition: color 0.25s ease;
}
.nav-drawer-panel a:not(.nav-drawer-cta):hover,
.nav-drawer-panel a:not(.nav-drawer-cta):focus-visible {
    color: var(--accent);
}
.nav-drawer-cta {
    margin-top: auto;
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   14. Okuma ilerleme cubugu
   navbar'in altina yaslanan ince cizgi. width degil transform: scaleX
   kullaniliyor ki her scroll frame'inde layout tetiklenmesin.
   -------------------------------------------------------------------------- */
.read-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    pointer-events: none;
}
.read-progress i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
    /* Kasitli olarak transition yok: bu bir gosterge, sus degil — oran
       her zaman gercek scroll konumunu birebir yansitmali. */
}

/* --------------------------------------------------------------------------
   15. Scroll-spy — aktif bolum vurgusu
   -------------------------------------------------------------------------- */
.nav-links a[aria-current="true"] {
    color: var(--accent);
}
.nav-links a[aria-current="true"]::after {
    transform: scaleX(1);
    transform-origin: left;
}
.nav-drawer-panel a[aria-current="true"] {
    color: var(--accent);
    background: rgba(217, 180, 106, 0.08);
}

/* --------------------------------------------------------------------------
   16. "Basa don" butonu
   -------------------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 95;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--n-2);
    border: 1px solid var(--n-line-strong);
    color: var(--accent);
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.3s var(--ease-out-expo),
        transform 0.3s var(--ease-out-expo),
        bottom 0.3s ease;
}
.to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .to-top:hover {
        border-color: var(--accent);
    }
}
.to-top:active {
    transform: scale(0.94);
}
/* Mobilde .sticky-cta cubugu ayni koseyi kullaniyor; ustune biner.
   Cubugun yaklasik yuksekligi (~68px) + guvenli alan kadar pay birakiliyor. */
@media (max-width: 767px) {
    .to-top {
        right: 16px;
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   17. "Yakinda" rozeti — Google Play
   Urun henuz yayinda degil; rozet olu degil "beklemede" hissi vermeli.
   -------------------------------------------------------------------------- */
.store-badge-official.is-soon {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .store-badge-official.is-soon:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}
.store-badge-official.is-soon .store-sub {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.56rem;
}

/* --------------------------------------------------------------------------
   18. Klavye erisilebilirligi — icerige atla baglantisi
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--n-2);
    border: 1px solid var(--accent);
    border-radius: 0 0 10px 0;
    color: var(--n-text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}