/* ══════════════════════════════════════════════════════════════
   ÖDEME AVANTAJI — "Havalede %N indirim · Vade farksız N taksit"
   --------------------------------------------------------------
   Üç ayrı gösterim, tek dosya:
     0) .ph-ust-serit          → SAYFA ÜSTÜ (menünün üstünde), BELİRGİN
        (koyu zemin + rozet; scroll'da kaybolur)
     1) .ph-odeme-serit        → SİTE GENELİ, footer üstü, SAKİN
        (her sayfada var; dikkat çekmemesi bilinçlidir)
     2) .detay-odeme           → YAZILIM DETAYI hero'sunda, BELİRGİN
        (fiyatın hemen altında, tutar hesaplı)

   0 ile 1 aynı bilgiyi taşır ama görevleri ZITTIR: üsttteki karşılar,
   alttaki hatırlatır. Biri sakinleştirilirse diğeri de gözden geçirilmeli —
   ikisi birden sakin olursa mesaj hiç görülmez, ikisi birden bağırırsa
   sayfa ödeme reklamına döner.

   Şerit renkleri theme.css token'larından okunur → açık/karanlık tema
   kendiliğinden döner. Detay bloğu her zaman koyu hero üzerindedir,
   bu yüzden sabit açık tonlar kullanır (yazilim-detay.css ile aynı dil).
   ══════════════════════════════════════════════════════════════ */

/* ── 0) SAYFA ÜSTÜ ŞERİT ────────────────────────────────────────
   Navbar .fixed-top olduğu için şerit de fixed olmak ZORUNDA — akışta
   bırakılsaydı menü üstüne biner, şerit hiç görünmezdi. Yer kaplaması
   body.ust-serit-var padding-top'u ile telafi edilir.

   Yükseklik iki yerde birden kullanılıyor (şerit + navbar top) →
   --ust-serit-h değişkeni TEK KAYNAK; mobil değeri de burada döner.
   ─────────────────────────────────────────────────────────────── */
:root {
    --ust-serit-h: 38px;
}

.ph-ust-serit {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;                    /* navbar (Bootstrap fixed-top = 1030) üstünde */
    height: var(--ust-serit-h);
    display: flex;
    align-items: center;
    /* Koyu lacivert → marka mavisi → lacivert: ortada hafif bir aydınlanma
       bırakır, düz renkten canlı ama gradyan gökkuşağından uzak durur. */
    background: linear-gradient(90deg, #0b1220 0%, #14356b 50%, #0b1220 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}

/* Şerit varken menü onun ALTINDAN başlar, içerik de şerit kadar aşağı iner. */
body.ust-serit-var {
    padding-top: var(--ust-serit-h);
}

    body.ust-serit-var .navbar.fixed-top {
        top: var(--ust-serit-h);
        transition: top .35s cubic-bezier(.16, 1, .3, 1),
                    padding .4s cubic-bezier(.16, 1, .3, 1),
                    box-shadow .4s ease,
                    background-color .35s ease,
                    border-color .35s ease;
    }

/* Aşağı inildi: şerit yukarı kayar, menü boşalan yere yapışır.
   Sınıfı _OdemeUstSerit.cshtml içindeki küçük script ekler (eşik 50px). */
body.ust-serit-kapali .ph-ust-serit {
    transform: translateY(-100%);
}

body.ust-serit-var.ust-serit-kapali .navbar.fixed-top {
    top: 0;
}

/* Ana sayfanın tam ekran hero'su (style.css → .hero-section { height:100vh })
   şerit kadar kısalır. Kısaltılmazsa sayfa 100vh + 38px olur ve daha ilk
   açılışta anlamsız bir kaydırma payı doğar. Detay hero'ları sabit padding
   kullandığı için etkilenmez. */
body.ust-serit-var .hero-section {
    height: calc(100vh - var(--ust-serit-h));
}

.ph-ust-serit-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 22px;
    white-space: nowrap;
}

.ph-ust-madde {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
    cursor: default;
}

    .ph-ust-madde i {
        font-size: 1rem;
        line-height: 1;
        color: #5cb3ff;              /* koyu zeminde okunur açık mavi */
    }

/* Ödeme türü — cümlenin öznesi, sakin ağırlıkta */
.ph-ust-tur {
    font-weight: 600;
    letter-spacing: .01em;
}

/* İkincil bilgi — "12 aya varan taksit imkânı". Vade FARKLI olan bu; solukluğu
   bilinçli, çünkü yanındaki vurgulu rozet vade FARKSIZ olanı söylüyor. */
.ph-ust-vade {
    font-size: .8rem;
    color: rgba(255, 255, 255, .62);
}

    .ph-ust-vade::before {
        content: "·";
        margin-right: 8px;
        opacity: .5;
    }

/* Ödeme şartı — asıl mesaj. Rozet kontrastı yükseltir. */
.ph-ust-sart {
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(92, 179, 255, .18);
    border: 1px solid rgba(92, 179, 255, .34);
    color: #ffffff;
    font-weight: 700;
    font-size: .8rem;
}

/* VURGULU ŞART — "vade farksız N taksit".
   Yanındaki "12 aya varan taksit" ile karışmasın diye üç kat vurgu taşır:
   büyük harf + rozet + yavaş renk döngüsü.
   ⚠ Döngü yalnız ZEMİN ve KENARLIKTA gezer, metin beyaz SABİT kalır — koyu
   zeminde okunabilirliği renge teslim etmemek için. 9sn/tur ve ease-in-out:
   fark edilir ama göz ucuyla bakıldığında "yanıp sönen reklam" izlenimi vermez. */
.ph-ust-sart-vurgu {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .78rem;
    animation: phUstVurgu 9s ease-in-out infinite;
}

@keyframes phUstVurgu {
    0%, 100% {
        background: rgba(92, 179, 255, .20);
        border-color: rgba(92, 179, 255, .48);
    }

    33% {
        background: rgba(126, 231, 135, .20);
        border-color: rgba(126, 231, 135, .52);
    }

    66% {
        background: rgba(255, 209, 102, .20);
        border-color: rgba(255, 209, 102, .52);
    }
}

/* Dar ekran karşılığı — masaüstünde basılmaz (aşağıdaki media query açar).
   Vurgulu olan mobilde de rozet görünümünü korur (kural aşağıda). */
.ph-ust-sart-dar {
    display: none;
}

.ph-ust-ayrac {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .18);
}

/* Dar masaüstü / tablet: ikincil vade bilgisi düşer.
   Üç parça ("Kredi Kartı · 12 aya varan taksit imkânı · VADE FARKSIZ 5 TAKSİT")
   ~694px yer kaplıyor; 800px ekranda kapsayıcıya 2px kalıyordu, altında taşardı.
   Düşen parça bilinçli olarak vade bilgisi: asıl vaat vurgulu rozettir. */
@media (max-width: 991.98px) {
    .ph-ust-vade {
        display: none;
    }
}

/* Tablet ve altı: tür adı düşer, şart kısa biçime geçer.
   "Havale / EFT %11 indirim · Kredi Kartı Vade farksız 5 taksit" tek satıra
   sığmıyor; iki satıra çıkmak yerine metni kısaltmak şeridi ince tutar. */
@media (max-width: 767.98px) {
    :root {
        --ust-serit-h: 34px;
    }

    .ph-ust-serit-ic {
        gap: 0 14px;
    }

    /* Tür adı ve ikincil vade bilgisi düşer; asıl vaat kalır. */
    .ph-ust-tur,
    .ph-ust-vade,
    .ph-ust-sart {
        display: none;
    }

    .ph-ust-sart-dar {
        display: inline;
        font-weight: 600;
        font-size: .74rem;
        color: #ffffff;
    }

        /* Vurgulu olan dar ekranda da rozet kalır — kart maddesinin asıl vaadi
           mobilde de havale maddesinden ayrışsın diye. Dolgu masaüstünden dar. */
        .ph-ust-sart-dar.ph-ust-sart-vurgu {
            padding: .16rem .42rem;
            border-radius: 999px;
            border: 1px solid rgba(92, 179, 255, .48);
            font-weight: 700;
        }

    .ph-ust-madde {
        gap: 6px;
    }

        .ph-ust-madde i {
            font-size: .94rem;
        }
}

/* Hareket azaltma tercihi: şerit anında gizlenir, renk döngüsü de durur.
   Vurgu kaybolmaz — rozet sabit mavide kalır, büyük harf ve kontrast durur. */
@media (prefers-reduced-motion: reduce) {
    .ph-ust-serit,
    body.ust-serit-var .navbar.fixed-top {
        transition: none !important;
    }

    .ph-ust-sart-vurgu {
        animation: none !important;
        background: rgba(92, 179, 255, .20);
        border-color: rgba(92, 179, 255, .48);
    }
}

/* ── 1) SİTE GENELİ ŞERİT ───────────────────────────────────── */
.ph-odeme-serit {
    background: var(--surface-2, #f8f9fa);
    border-top: 1px solid var(--surface-border, rgba(15, 23, 42, .08));
    border-bottom: 1px solid var(--surface-border, rgba(15, 23, 42, .08));
    padding: 14px 0;
}

.ph-odeme-serit-ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 30px;
    text-align: center;
}

.ph-odeme-madde {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color, #333);
    cursor: default;
}

    .ph-odeme-madde i {
        font-size: 1.05rem;
        line-height: 1;
        color: var(--secondary-color, #0d6efd);
        opacity: .9;
    }

/* Kart maddesindeki iki bilgi — üst şeritteki ayrımın SAKİN karşılığı.
   Orada rozet + renk döngüsü vardı; burada yalnız ağırlık ve ton farkı, çünkü
   bu şeridin görevi hatırlatmak, dikkat çekmek değil (bkz. dosya başı).
   ⚠ İkisi eşit ağırlıkta yazılırsa 12 ayın da vade farksız olduğu sanılır. */
.ph-odeme-ikincil {
    opacity: .72;
}

    /* Nokta ayracı iki bilgiyi ayırır; ayrı bir <span> açmaya gerek bırakmaz. */
    .ph-odeme-ikincil::after {
        content: "·";
        margin: 0 6px;
        opacity: .6;
    }

.ph-odeme-vurgu {
    font-weight: 700;
    color: var(--secondary-color, #0d6efd);
}

.ph-odeme-ayrac {
    width: 1px;
    height: 18px;
    background: var(--surface-border, rgba(15, 23, 42, .14));
}

@media (max-width: 575.98px) {
    .ph-odeme-serit {
        padding: 12px 0;
    }

    .ph-odeme-serit-ic {
        flex-direction: column;
        gap: 8px;
    }

    .ph-odeme-madde {
        font-size: .84rem;
    }

    /* Dikey dizilimde dikey çizgi anlamsız kalır */
    .ph-odeme-ayrac {
        display: none;
    }

    /* Kart maddesi dar ekranda tek satıra sığmıyor (360px'de sarıyordu) ve sarma
       kelime bazlı olduğu için cümleyi rastgele yerden bölüyordu. İkincil bilgiyi
       kendi satırına alarak bölünmeyi ANLAMLI yere taşı: üstte "12 aya varan
       taksit imkânı", altta "Vade farksız N taksit". Nokta ayracı alt alta
       dizilimde gereksizleşir. */
    .ph-odeme-ikincil {
        display: block;
    }

        .ph-odeme-ikincil::after {
            display: none;
        }
}

/* ── 2) YAZILIM DETAYI — satın alma bloğu içinde SADE LİSTE ─────
   28.07.2026: burası önce hero'da ayrı duran, kartlı ve çerçeveli bir
   "Ödeme Avantajları" kutusuydu. Fiyat bloğu ondan uzakta olduğu için
   sayfada dört rakam (liste · kampanya · havale · taksit) birbirine
   karışıyordu. Artık fiyatın hemen altında, satın alma düğmesinin hemen
   üstünde iki satır: "Havale/EFT ile → tutar" · "Kredi kartı ile → tutar".
   Kendi çerçevesi yok; içinde durduğu satın alma kutusuna yaslanır. */
.yazilim-detay .detay-odeme-liste {
    margin: 0 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.12);
}

.yazilim-detay .detay-odeme-liste-baslik {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--renk) 55%, #fff);
    margin-bottom: .35rem;
}

/* Tek satır = bir ödeme yolu. Not satırı flex-basis:100% ile alta iner,
   ikon genişliği kadar girintilenir → tutarlarla aynı hizada durmaz. */
.yazilim-detay .detay-odeme-satir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    padding: .7rem 0;
}

    .yazilim-detay .detay-odeme-satir + .detay-odeme-satir {
        border-top: 1px dashed rgba(255,255,255,.10);
    }

.yazilim-detay .detay-odeme-satir-ikon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
    color: #fff;
    background: color-mix(in srgb, var(--renk) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--renk) 45%, transparent);
}

.yazilim-detay .detay-odeme-satir-ad {
    flex: 1 1 auto;
    min-width: 110px;
    font-size: .95rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* margin-left:auto → tutar (ve varsa rozet) satırın sağına yaslanır. */
.yazilim-detay .detay-odeme-satir-tutar {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 1.2rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--renk) 50%, #fff);
    line-height: 1.2;
}

.yazilim-detay .detay-odeme-satir-rozet {
    flex: 0 0 auto;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: rgba(74,222,128,.14);
    border: 1px solid rgba(74,222,128,.35);
    color: #4ade80;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.yazilim-detay .detay-odeme-satir-not {
    flex: 1 0 100%;
    padding-left: calc(34px + .7rem);
    font-size: .78rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* Liste altındaki tek satırlık açıklama (hangi fiyattan hesaplandığı) */
.yazilim-detay .detay-odeme-dipnot {
    padding-left: 0;
    margin-top: .6rem;
    font-size: .74rem;
    opacity: .85;
}

@media (max-width: 575.98px) {
    /* Dar ekranda tutar kendi satırına insin — ad ile aynı satırda sıkışıp
       yazı boyutu okunmaz hâle gelmesin. */
    .yazilim-detay .detay-odeme-satir-tutar {
        margin-left: calc(34px + .7rem);
        flex-basis: 100%;
    }

    .yazilim-detay .detay-odeme-satir-rozet {
        margin-left: calc(34px + .7rem);
    }
}