/* ============================================================
   Tema: dinamik — anasayfa tasarımı

   Bu dosya taban home.css'in üstüne yazılır ve iki iş yapar:

     1) Yalnızca bu temada var olan bileşenleri getirir
        .dh  → hero (aurora zemin + creative slider + akan rakam bandı)
        .dr  → yorumlar (akan iki sıra + puan halkası)

     2) Taban bölümlerin (özellik kartları, adım sekmeleri, SSS, blog,
        kapanış) sınıflarını KORUYARAK görünümünü ve hareketini değiştirir.
        Sınıf isimleri korunduğu için js/pages/home.js — sekmeler, SSS
        akordeonu, hızlı değerleme formu — olduğu gibi çalışır.

   Yükleme sırası: css/pages/home.css → BU DOSYA
   (bkz. Themes/dinamik/Views/Home/Index.cshtml)

   Renk/köşe/gölge değerleri burada SABİT yazılmaz; hepsi
   themes/dinamik/theme.css içindeki değişkenlerden gelir.

   HAREKET KURALI: Kendiliğinden dönen her animasyon dosyanın sonundaki
   `prefers-reduced-motion: no-preference` bloğundadır. Hareket
   hassasiyeti olan kullanıcı sayfayı durağan ama eksiksiz görür —
   bu yüzden hiçbir öğenin GÖRÜNÜRLÜĞÜ animasyona bağlı değildir.
   ============================================================ */

/* ============================================================
   Bölüm başlıkları
   ============================================================ */
.od-section-head {
    max-width: 48rem;
}

/* ============================================================
   HERO (.dh)

   Katman sırası (arkadan öne):
     .dh__bg__media    panelden gelen sabit görsel, çok düşük opaklık
     .dh__bg__video    arka plan videosu (sonradan yüklenir, yoksa yok)
     .dh__orb          üç renkli ışık lekesi — süzülür
     .dh__grid         ince ızgara — aşağı akar
     .dh__bg__overlay  koyu perde (metin kontrastı)
     .dh__inner        sahne + form
     .dh__ticker       akan rakam bandı
   ============================================================ */
.dh {
    position: relative;
    isolation: isolate;
    padding: clamp(2rem, 4vw, 3.5rem) 0 0;
    background: var(--od-secondary);
    color: #fff;
    overflow: hidden;
}

.dh__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.dh__bg__media {
    position: absolute;
    inset: -10%;
    background-image: var(--dh-bg-image);
    background-size: cover;
    background-position: center;
    opacity: .18;
    /* --dh-scroll: hero.js tarafından 0→1 arası sürülür (kaydırma paralaksı) */
    transform: translate3d(0, calc(var(--dh-scroll, 0) * 5%), 0);
}

/* Arka plan videosu — hero.js tarafından sayfa yüklendikten sonra
   eklenir, hazır olunca .is-ready ile belirir. Paralaks uygulanmıyor:
   kaydırmayla yer değiştirseydi kenarlarda boşluk açılırdı, hareketi
   zaten videonun kendisi taşıyor. */
.dh__bg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(.8);
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.dh__bg__video.is-ready {
    opacity: .3;
}

/* ---------------- Aurora lekeleri ----------------
   Üç renkli daire, güçlü bulanıklık. Görsel dosyası yok; hero'nun
   "canlı" hissi büyük ölçüde bunların yavaş süzülmesinden geliyor. */
.dh__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

.dh__orb--1 {
    top: -18%;
    left: -8%;
    width: 38rem;
    height: 38rem;
    background: radial-gradient(circle, var(--od-primary) 0%, transparent 68%);
}

.dh__orb--2 {
    top: 10%;
    right: -12%;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, var(--dn-accent) 0%, transparent 68%);
    opacity: .4;
}

.dh__orb--3 {
    bottom: -25%;
    left: 35%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, var(--dn-accent-2) 0%, transparent 68%);
    opacity: .28;
}

/* ---------------- Izgara deseni ----------------
   İki lineer gradyandan oluşur, kenarlara doğru söner. */
.dh__grid {
    position: absolute;
    inset: -50% 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 45%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 55% at 50% 45%, #000, transparent 78%);
    pointer-events: none;
}

.dh__bg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--od-secondary) 55%, transparent) 0%,
        color-mix(in srgb, var(--od-secondary) 25%, transparent) 45%,
        color-mix(in srgb, var(--od-secondary) 85%, transparent) 100%);
}

/* ---------------- Yerleşim ---------------- */
/* minmax(0, 1fr) — düz `1fr` DEĞİL: slider kolonunun en küçük genişliği
   "auto" kalırsa Swiper'ın içeriği kolonu ekrandan taşıracak kadar
   genişletiyor (telefonda slayt metni sağdan kesiliyordu). */
.dh__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   Sahne — slider + kontroller
   Perspektif burada tanımlı: imleçle eğilme (hero.js) bu düzlemde
   çalışıyor.
   ============================================================ */
.dh__stage {
    position: relative;
    min-width: 0;
    perspective: 1400px;
}

.dh__slider {
    position: relative;
    border-radius: var(--od-r-xl);
    overflow: hidden;
    box-shadow: 0 2rem 4rem rgba(8, 10, 28, .55);
    transform: rotateX(var(--dh-rx, 0deg)) rotateY(var(--dh-ry, 0deg));
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* Swiper kurulmadıysa (JS engellendi / hata) ilk slayt tek başına,
   üst üste binmeden görünsün. */
.dh__slider:not(.swiper-initialized) .swiper-wrapper {
    display: block;
}

.dh__slider:not(.swiper-initialized) .dh__slide:not(:first-child) {
    display: none;
}

.dh__slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(23rem, 52vw, 33rem);
    overflow: hidden;
    border-radius: inherit;
}

/* Görsel katmanı slaytdan GENİŞ: Swiper paralaksı bu katmanı yatayda
   kaydırıyor, dar olsaydı kenarda boşluk açılırdı. */
.dh__media {
    position: absolute;
    inset: 0 -15%;
    overflow: hidden;
}

.dh__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ken Burns yakınlaşması yalnızca aktif slaytta çalışır (dosya sonu) */
    transform-origin: 55% 45%;
}

/* Metin okunurluğu için koyu perde — alttan yukarı */
.dh__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 12, 30, .15) 0%,
        rgba(10, 12, 30, .55) 45%,
        rgba(10, 12, 30, .92) 100%);
    pointer-events: none;
}

.dh__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 44rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.dh__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem .35rem .6rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--od-r-pill);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    font-size: var(--od-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

/* Rozetin başındaki nabız atan nokta */
.dh__badge__dot {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--dn-accent);
}

.dh__badge__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--dn-accent);
    opacity: 0;
}

.dh__title {
    font-size: var(--od-fs-h1);
    line-height: var(--od-lh-tight);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 1rem;
    text-wrap: balance;
}

/* "Vurgulanacak kelimeler" — koyu zeminde açık gradyan.
   Ortadaki ton sabit bir renk DEĞİL, marka renginin açık hali: müşteri
   panelden başka bir renk seçtiğinde vurgu da onunla birlikte döner. */
.dh__title .hl {
    background: linear-gradient(115deg,
        var(--dn-accent) 0%,
        color-mix(in srgb, var(--od-primary) 45%, #fff) 52%,
        var(--dn-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dh__lead {
    max-width: 36rem;
    margin: 0 0 1.75rem;
    font-size: var(--od-fs-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

/* Slayt butonu — çerçeveli, üzerine gelince dolan */
.dh__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--od-r-pill);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    transition: color var(--od-t-fast), border-color var(--od-t-fast), transform var(--od-t-fast);
}

.dh__cta::before {
    content: "";
    position: absolute;
    /* -1px: sözde öğe padding box'a göre konumlanır, butonun 1px
       kenarlığı altında ince bir boşluk kalmasın */
    inset: -1px;
    z-index: -1;
    background: var(--dn-grad);
    transform: translateY(101%);
    transition: transform var(--od-t);
}

.dh__cta:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}

.dh__cta:hover::before {
    transform: translateY(0);
}

.dh__cta i {
    transition: transform var(--od-t-fast);
}

.dh__cta:hover i {
    transform: translateX(.25rem);
}

/* ============================================================
   Kontroller — numaralı sayfalama + oklar + ilerleme
   ============================================================ */
.dh__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.dh__dots {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

/* Swiper'ın kendi nokta stilini kullanmıyoruz: renderBullet ile
   iki haneli numara + altında çizgi basılıyor (bkz. hero.js). */
.dh__dot {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    width: auto;
    height: auto;
    padding: .25rem .5rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    opacity: 1;
    cursor: pointer;
}

.dh__dot__num {
    font-size: var(--od-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    transition: color var(--od-t-fast);
}

.dh__dot__line {
    display: block;
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .22);
    transition: width var(--od-t), background var(--od-t);
}

.dh__dot:hover .dh__dot__num {
    color: rgba(255, 255, 255, .8);
}

.swiper-pagination-bullet-active.dh__dot .dh__dot__num {
    color: #fff;
}

.swiper-pagination-bullet-active.dh__dot .dh__dot__line {
    width: 3.25rem;
    background: var(--dn-grad);
}

.dh__arrows {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dh__arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--od-t-fast), border-color var(--od-t-fast), transform var(--od-t-fast);
}

.dh__arrow:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .45);
    transform: translateY(-2px);
}

.dh__arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* "Sonraki" butonunun çevresindeki otomatik geçiş halkası.
   Dolum hero.js içinde stroke-dashoffset ile sürülür. */
.dh__ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transform: rotate(-90deg);
    pointer-events: none;
}

.dh__ring circle {
    fill: none;
    stroke-width: 2;
}

/* Halkanın "boş" hali çizilmiyor: butonun kendi kenarlığı zaten aynı
   yerde duruyor, ikinci bir çember üstüne binip çift çizgi yapardı.
   Öğe yine de duruyor — dolum yayıyla aynı yarıçapı belgeliyor. */
.dh__ring__track {
    stroke: transparent;
}

.dh__ring__bar {
    stroke: var(--dn-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset .12s linear;
}

/* Slayt altındaki ince ilerleme çizgisi */
.dh__progress {
    position: relative;
    height: 2px;
    margin-top: .75rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.dh__progress span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--dn-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .12s linear;
}

/* ============================================================
   Hızlı değerleme formu

   Zemin AÇIK: select2 koyu zeminde kendi stilini bozuyor, ayrıca
   form sayfadaki en yüksek kontrastlı öğe olmalı. Cam his, kartın
   etrafındaki gradyan çerçeve ve imleci takip eden ışıkla veriliyor.
   ============================================================ */
.dh__form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: var(--od-r-lg);
    background: var(--od-surface);
    color: var(--od-ink);
    box-shadow: 0 1.5rem 3rem rgba(8, 10, 28, .45);
    overflow: hidden;
}

/* Gradyan çerçeve (iki maskenin farkı = yalnızca kenar) */
.dh__form::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--dn-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* İmleci takip eden ışık — konumu hero.js yazar (--dh-mx/--dh-my).
   Değişken yoksa leke kartın dışında kalır, görünmez. */
.dh__form::after {
    content: "";
    position: absolute;
    top: var(--dh-my, -20rem);
    left: var(--dh-mx, -20rem);
    width: 22rem;
    height: 22rem;
    margin: -11rem 0 0 -11rem;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--od-primary) 22%, transparent) 0%,
        transparent 65%);
    opacity: 0;
    transition: opacity var(--od-t);
    pointer-events: none;
}

.dh__form:hover::after {
    opacity: 1;
}

.dh__form > * {
    position: relative;
}

.dh__form__intro {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dh__form__intro strong {
    display: block;
    font-size: var(--od-fs-lg);
    color: var(--od-ink);
}

.dh__form__intro small {
    display: block;
    color: var(--od-muted);
    font-size: var(--od-fs-sm);
}

.dh__form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

.dh__form__field label {
    display: block;
    margin-bottom: .3rem;
    font-size: var(--od-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--od-muted);
}

.dh__form__note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--od-fs-sm);
    color: var(--od-muted);
}

.dh__form__note i {
    color: var(--od-primary);
}

/* ============================================================
   Akan rakam bandı
   Track içinde iki özdeş set var; -%50 kaydırma dikişsiz döngü verir.
   ============================================================ */
.dh__ticker {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
    /* Kenarlarda yumuşak giriş/çıkış */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dh__ticker__track {
    display: flex;
    width: max-content;
}

.dh__ticker__set {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin: 0;
    /* Sağdaki boşluk gap ile AYNI: iki set birleştiği yerde ritim bozulmasın */
    padding: .9rem 3rem .9rem 0;
    list-style: none;
}

.dh__ticker__set li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    white-space: nowrap;
}

/* Rakamlar arasındaki ayırıcı nokta */
.dh__ticker__set li::after {
    content: "";
    width: .3rem;
    height: .3rem;
    margin-left: 2.5rem;
    border-radius: 50%;
    background: var(--dn-accent);
    opacity: .6;
}

.dh__ticker__set strong {
    font-size: var(--od-fs-lg);
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--dn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dh__ticker__set span {
    font-size: var(--od-fs-sm);
    color: rgba(255, 255, 255, .62);
}

/* ============================================================
   Telefonda dekoratif zeminlerin dağılımı

   Masaüstünde hero iki kolon (slider + form yan yana) olduğu için
   ~600px yüksekliğinde; telefonda bunlar alt alta dizilince bölüm
   1000px'i aşıyor. Işık lekeleri rem ölçüsüyle ve yalnızca üst
   bölgeye konumlandığı için uzayan bölümün ALT YARISI çıplak
   kalıyordu — zemin "tam oturmuyor" görüntüsü buradan geliyor.

   Çözüm: lekeleri bölümün yüksekliğine ORANLA dağıtmak (top: %) ve
   ızgara maskesini dikeyde genişletmek. Aynı sorun kapanış şeridinde
   de var; o da aşağıda düzeltiliyor.
   ============================================================ */
@media (max-width: 991.98px) {
    .dh__orb {
        filter: blur(60px);
    }

    .dh__orb--1 {
        top: -4%;
        left: -32%;
        width: 26rem;
        height: 26rem;
    }

    .dh__orb--2 {
        top: 34%;
        right: -36%;
        width: 24rem;
        height: 24rem;
    }

    /* bottom yerine top: bölüm uzadıkça leke de ortadan aşağı kayar */
    .dh__orb--3 {
        top: 62%;
        bottom: auto;
        left: -20%;
        width: 26rem;
        height: 26rem;
        opacity: .34;
    }

    /* Maske dikeyde daha geniş: ızgara bölümün altına kadar sürsün */
    .dh__grid {
        -webkit-mask-image: radial-gradient(ellipse 120% 72% at 50% 50%, #000, transparent 88%);
        mask-image: radial-gradient(ellipse 120% 72% at 50% 50%, #000, transparent 88%);
    }

    /* Kapanış şeridi telefonda iki satıra düşüyor; tek köşedeki ışık
       alt yarıyı boş bırakıyordu, ikinci bir leke ekleniyor. */
    .hp-app::before {
        top: -14%;
        right: -30%;
        width: 22rem;
        height: 22rem;
    }

    .hp-app::after {
        content: "";
        position: absolute;
        bottom: -18%;
        left: -25%;
        width: 20rem;
        height: 20rem;
        border-radius: 50%;
        background: radial-gradient(circle,
            color-mix(in srgb, var(--od-primary) 32%, transparent) 0%,
            transparent 65%);
        pointer-events: none;
    }
}

/* ============================================================
   Hero — telefon düzeni
   Panelden seçilen home.hero.mobileLayout değerinin karşılığı.
   Anahtarlar tabanla aynı, yalnızca sınıf öneki bu temaya ait.
   ============================================================ */
@media (max-width: 991.98px) {
    .dh--m-form-first .dh__inner {
        display: flex;
        flex-direction: column;
    }

    .dh--m-form-first .dh__form {
        order: -1;
    }

    .dh--m-form-only .dh__stage {
        display: none;
    }
}

/* ============================================================
   NEDEN BİZ — taban .hp-feature kartları
   Sınıflar korunuyor; kart burada gradyan çerçeveli bir yüzeye
   dönüşüyor ve üzerine gelince ikon ileri çıkıyor.
   ============================================================ */
.hp-feature {
    position: relative;
    padding: 1.75rem 1.5rem;
    overflow: hidden;
}

/* Kartın üstünde, hover'da soldan sağa açılan gradyan şerit */
.hp-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dn-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--od-t);
}

.hp-feature:hover::before {
    transform: scaleX(1);
}

.hp-feature .od-icon {
    transition: transform var(--od-t), box-shadow var(--od-t);
}

.hp-feature:hover .od-icon {
    transform: translateY(-.25rem) rotate(-6deg);
    box-shadow: 0 .75rem 1.75rem color-mix(in srgb, var(--od-primary) 32%, transparent);
}

/* ============================================================
   NASIL ÇALIŞIR — taban sekmeler (.hp-tab / .hp-tabs__panel)
   Yapı korunuyor (js/pages/home.js sekmeleri bu sınıflarla yönetiyor);
   sekmeler hap biçimine, aktif panel içeriği kayarak giren bir
   animasyona dönüşüyor.
   ============================================================ */
.hp-tabs__nav {
    gap: .5rem;
    padding: .4rem;
    border: 1px solid var(--od-line);
    border-radius: var(--od-r-pill);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-sm);
}

.hp-tab {
    border: 0;
    border-radius: var(--od-r-pill);
    background: none;
    transition: color var(--od-t-fast), background var(--od-t);
}

.hp-tab__num {
    background: var(--od-surface-2);
    color: var(--od-primary);
    transition: background var(--od-t), color var(--od-t), transform var(--od-t);
}

.hp-tab:hover {
    background: var(--od-surface-2);
}

.hp-tab.is-active {
    background: var(--dn-grad);
    color: #fff;
    box-shadow: var(--od-shadow-primary);
}

.hp-tab.is-active .hp-tab__num {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    transform: scale(1.06);
}

/* Panel her açılışta yeniden kayarak girer: sekme değişimi
   "içerik değişti" hissi versin. */
.hp-tabs__panel.is-active {
    animation: dn-panel-in .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes dn-panel-in {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
}

/* Görselin altında renkli hale. Taban .hp-tabs__media `overflow:hidden`
   olduğu için hale sözde öğeyle değil gölgeyle veriliyor — kutunun
   dışına taşabilsin. */
.hp-tabs__media {
    position: relative;
    box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--od-primary) 25%, transparent);
}

/* Taban görsel düz birincil renk zemin üzerinde duruyor; burada gradyan.

   Yükseklik de görselden geliyor: taban kutu 16/11 oranına sabit,
   görseller ise kare. `contain` ile yerleşince iki yanda ve altta
   gradyan zemin boş kalıyordu — gradyan düz renkten çok daha belirgin
   olduğu için bu boşluk göze batıyor. Oranı serbest bırakıp görselin
   kendi yüksekliğini kullanınca kutu görseli tam sarıyor. */
.hp-tabs__media {
    aspect-ratio: auto;
    /* Kare kutu geniş ekranda gereğinden iri durmasın */
    max-width: 26rem;
    margin-inline: auto;
}

.hp-tabs__media img {
    height: auto;
    background: var(--dn-grad);
}

/* ============================================================
   YORUMLAR (.dr) — akan iki sıra + puan halkası
   ============================================================ */
.dr__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    padding: 1.75rem;
    border: 1px solid var(--od-line);
    border-radius: var(--od-r-lg);
    background: var(--od-surface);
    box-shadow: var(--od-shadow);
    text-align: center;
}

/* Puan halkası — dolum oranı --dr-pct (0..1), view'den geliyor */
.dr__dial {
    position: relative;
    flex-shrink: 0;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--od-primary) 0turn,
                               var(--dn-accent) calc(var(--dr-pct, 1) * 1turn),
                               var(--od-surface-2) calc(var(--dr-pct, 1) * 1turn));
    display: grid;
    place-items: center;
}

.dr__dial__face {
    display: grid;
    place-items: center;
    width: 6.75rem;
    height: 6.75rem;
    border-radius: 50%;
    background: var(--od-surface);
    box-shadow: inset 0 0 0 1px var(--od-line);
}

.dr__dial__face strong {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--od-ink);
}

.dr__dial__face span {
    font-size: var(--od-fs-xs);
    color: var(--od-muted);
}

.dr__score__body {
    width: 100%;
}

.dr__score__count {
    margin: .35rem 0 1.25rem;
    color: var(--od-muted);
    font-size: var(--od-fs-sm);
}

.dr__bars {
    display: grid;
    gap: .45rem;
}

.dr__bar {
    display: grid;
    grid-template-columns: 3rem 1fr 2.5rem;
    align-items: center;
    gap: .6rem;
    font-size: var(--od-fs-xs);
    color: var(--od-muted);
}

.dr__bar__label {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    justify-content: flex-start;
}

.dr__bar__label i {
    color: var(--od-star);
}

.dr__bar__track {
    height: .45rem;
    border-radius: var(--od-r-pill);
    background: var(--od-surface-2);
    overflow: hidden;
}

.dr__bar__fill {
    display: block;
    width: var(--dr-w, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--dn-grad);
}

.dr__bar__pct {
    text-align: right;
}

/* ---------------- Akan sıralar ----------------
   .dr__track içinde iki özdeş set; -%50 kaydırma dikişsiz döngü verir.
   Sıra imleç üzerindeyken durur (okumak isteyen durdurabilsin). */
.dr__marquee {
    display: grid;
    gap: 1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dr__row {
    overflow: hidden;
}

.dr__track {
    display: flex;
    width: max-content;
}

.dr__set {
    display: flex;
    gap: 1rem;
    padding-right: 1rem;
}

.dr__card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 21rem;
    flex-shrink: 0;
    padding: 1.35rem;
    border: 1px solid var(--od-line);
    border-radius: var(--od-r-md);
    background: var(--od-surface);
    box-shadow: var(--od-shadow-sm);
    transition: transform var(--od-t), box-shadow var(--od-t), border-color var(--od-t);
}

.dr__card:hover {
    transform: translateY(-.3rem);
    border-color: color-mix(in srgb, var(--od-primary) 35%, transparent);
    box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--od-primary) 20%, transparent);
}

.dr__card__text {
    margin: 0;
    flex: 1;
    color: var(--od-text);
    font-size: var(--od-fs-sm);
    line-height: 1.65;
}

.dr__card__foot {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-top: .75rem;
    border-top: 1px solid var(--od-line);
}

.dr__card__avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dn-grad);
    color: #fff;
    font-weight: 800;
}

.dr__card__name {
    display: block;
    font-weight: 700;
    font-size: var(--od-fs-sm);
    color: var(--od-ink);
}

.dr__card__meta {
    display: block;
    font-size: var(--od-fs-xs);
    color: var(--od-muted);
}

/* ============================================================
   TANITIM — taban .hp-about
   Video çerçevesi gradyan kenarlı ve hafifçe süzülüyor.
   ============================================================ */
/* Çerçeve sözde öğeyle değil ZEMİNLE veriliyor: taban .hp-about__video
   `overflow:hidden` olduğu için dışarı taşan bir katman görünmezdi.
   Gradyan kutunun zemininde duruyor, iframe 2px içeri çekiliyor. */
.hp-about__video {
    background: var(--dn-grad);
    box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--od-primary) 30%, transparent);
}

.hp-about__video iframe {
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: calc(var(--od-r-md) - 2px);
}

/* ============================================================
   SSS — taban .hp-faq
   Açık maddede solda gradyan bir kolon büyüyor, ok yumuşak dönüyor.
   Sınıf isimleri korunuyor: akordeon js/pages/home.js'te.
   ============================================================ */
.hp-faq__item {
    position: relative;
    overflow: hidden;
    transition: border-color var(--od-t), box-shadow var(--od-t);
}

.hp-faq__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--dn-grad);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform var(--od-t);
}

.hp-faq__item.is-open::before {
    transform: scaleY(1);
}

.hp-faq__item.is-open {
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--od-primary) 14%, transparent);
}

.hp-faq__q i {
    transition: transform var(--od-t), color var(--od-t);
}

.hp-faq__item.is-open .hp-faq__q i {
    color: var(--od-primary);
}

/* ============================================================
   BLOG — taban .hp-post
   Görsel yakınlaşıyor, kartın üzerinden bir ışık şeridi geçiyor.
   ============================================================ */
.hp-post {
    position: relative;
    overflow: hidden;
}

.hp-post__thumb img {
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.hp-post:hover .hp-post__thumb img {
    transform: scale(1.12);
}

/* Işık şeridi — kartın üzerinden bir kez geçer */
.hp-post::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-140%) skewX(-18deg);
    pointer-events: none;
}

.hp-post:hover::after {
    animation: dn-sheen 1s ease-out;
}

.hp-post .od-link i {
    transition: transform var(--od-t-fast);
}

.hp-post:hover .od-link i {
    transform: translateX(.3rem);
}

/* ============================================================
   KAPANIŞ — taban .hp-app
   Koyu zemin + arkada nabız atan halkalar; telefon görseli süzülüyor.
   ============================================================ */
.hp-app {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--od-secondary) 0%,
        color-mix(in srgb, var(--od-secondary) 60%, var(--od-primary)) 100%);
    color: #fff;
}

.hp-app::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--dn-accent) 35%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.hp-app > * {
    position: relative;
}

.hp-app h2 {
    color: #fff;
}

.hp-app p {
    color: rgba(255, 255, 255, .78);
}

/* Mağaza rozetleri: koyu zeminde koyu kalmasın, cam yüzeye dönsün */
.hp-app__badges a {
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.hp-app__badges a:hover {
    background: rgba(255, 255, 255, .22);
}

.hp-app__visual img {
    filter: drop-shadow(0 1.5rem 2.5rem rgba(8, 10, 28, .5));
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 576px) {
    .dh__form__fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .dr__score {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 2rem;
    }

    .dr__marquee {
        gap: 1.25rem;
    }
}

@media (min-width: 992px) {
    .dh {
        padding-top: clamp(2.5rem, 4vw, 4rem);
    }

    /* Slider solda, değerleme formu sağda sabit bir kolon */
    .dh__inner {
        grid-template-columns: minmax(0, 1fr) 23rem;
        gap: 2rem;
        align-items: center;
    }

    .dh__content {
        padding: clamp(2rem, 3vw, 3.25rem);
    }
}

/* ============================================================
   KENDİLİĞİNDEN DÖNEN HAREKETLER
   Yalnızca hareket kısıtlaması OLMAYAN kullanıcılarda çalışır.
   Yukarıdaki hiçbir öğenin görünürlüğü bu bloğa bağlı değildir;
   blok devre dışı kaldığında tasarım durağan ama eksiksizdir.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    /* ---------------- Hero zemini ---------------- */
    .dh__orb--1 { animation: dn-drift 20s ease-in-out infinite; }
    .dh__orb--2 { animation: dn-drift 26s ease-in-out infinite reverse; }
    .dh__orb--3 { animation: dn-drift 32s ease-in-out infinite; }

    .dh__grid {
        animation: dn-grid-scroll 24s linear infinite;
    }

    @keyframes dn-grid-scroll {
        to { background-position: 0 56px, 56px 0; }
    }

    /* Rozetteki noktanın nabzı */
    .dh__badge__dot::after {
        animation: dn-pulse 2.4s ease-out infinite;
    }

    /* ---------------- Slayt içeriği ----------------
       Görünürlüğü animasyona bağlamak yalnızca slider GERÇEKTEN
       kurulduğunda güvenli: swiper-initialized sınıfı yoksa
       (JS engellendi) metinler olduğu gibi görünür. */
    .dh__slider.swiper-initialized .dh__anim {
        opacity: 0;
    }

    .dh__slider.swiper-initialized .swiper-slide-active .dh__anim {
        animation: dn-slide-in .75s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: var(--dh-d, 0s);
    }

    @keyframes dn-slide-in {
        from { opacity: 0; transform: translateY(1.75rem) scale(.98); filter: blur(6px); }
        to   { opacity: 1; transform: none; filter: blur(0); }
    }

    /* Aktif slaytın görseli yavaşça yakınlaşır (Ken Burns) */
    .dh__slider.swiper-initialized .swiper-slide-active .dh__media img {
        animation: dn-kenburns 9s ease-out both;
    }

    @keyframes dn-kenburns {
        from { transform: scale(1.02); }
        to   { transform: scale(1.14); }
    }

    /* ---------------- Akan bantlar ---------------- */
    .dh__ticker__track {
        animation: dn-marquee 34s linear infinite;
    }

    .dh__ticker:hover .dh__ticker__track,
    .dr__row:hover .dr__track {
        animation-play-state: paused;
    }

    .dr__track {
        animation: dn-marquee 52s linear infinite;
    }

    .dr__row--reverse .dr__track {
        animation-duration: 64s;
        animation-direction: reverse;
    }

    @keyframes dn-marquee {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(-50%, 0, 0); }
    }

    /* ---------------- Bölüm içi küçük hareketler ---------------- */
    .hp-about__video {
        animation: dn-float 7s ease-in-out infinite;
    }

    .hp-app__visual img {
        animation: dn-float 5.5s ease-in-out infinite;
    }

    /* Kapanış bölümündeki ışık lekesi */
    .hp-app::before {
        animation: dn-drift 16s ease-in-out infinite;
    }

    /* Puan dağılım çubukları: bölüm göründüğünde soldan dolar.
       .od-reveal.is-visible core/ui.js tarafından eklenir. */
    .od-reveal.is-visible .dr__bar__fill {
        animation: dn-bar-fill 1.1s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes dn-bar-fill {
        from { width: 0; }
        to   { width: var(--dr-w, 0%); }
    }
}