/* =============================================================================
   MOBİL UYGULAMA ŞERİDİ — "VİTRİN KARTI"  (04-10-2026, v1.16.0)
   Views\Shared\_Layout.cshtml ve Views\Shared\_Layout_peyzaj.cshtml alt bilgisindeki
   Google Play / App Store şeridi. İki layout da bu dosyayı ayrıca bağlar (?v=sürüm).
   Eski krem şeridin stilleri yeni-tasarim.css "8) MOBİL UYGULAMA ŞERİDİ"nden kaldırıldı.

   Görünüm: krem bant içinde koyu kart; uygulamanın 3 ekranı telefon çerçevesinde,
   ortadaki kartın üst kenarından taşar, alttan kartın içine batar (kart kenarında kesilir).
   Görseller: Content\uygulama\ (iPhone mağaza ekranlarından 330x714 küçültüldü).

   Renkler tema değişkenlerinden (elle hex yok): zemin --yt-siyah, düğme --yt-krem.
   Bütün paletlerde --yt-siyah koyu, --yt-krem açık → kontrast her temada korunur.
   ERİŞİLEBİLİRLİK: düğmeler dolgu zeminli, yazı soluklaştırılmaz, odak halkası belirgin.

   Ölçüler (04-10-2026, yerel sitede ölçüldü — kart / şeridin tamamı):
     masaüstü 1440 ve 1100: 178 / 270px · tablet 820: 237 / 329px (yazı solda, telefonlar sağda)
     · telefon 375: 297 / 353px (alt alta). Eski krem şerit: 110px masaüstü, 222px telefon.
   Önizleme: MOCKUP\onizleme\uygulama-serit.html (bu dosyayı yükler; yerel DB'de mağaza
   adresi boşken görsel doğrulama oradan yapılır).
   ============================================================================= */

.yt-uygulamaSerit {
    background: var(--yt-krem);
    padding: 64px 0 28px; /* üst boşluk: telefonların karttan taşan kısmı */
}

    /* site layout'unda arkasından gelen koyu bandın üst boşluğu şeridin alt dolgusuyla aynı işi görür */
    .yt-uygulamaSerit + .yt-altSerit {
        margin-top: 0;
    }

.yt-uaKart {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px auto;
    align-items: center;
    gap: 36px;
    min-height: 178px;
    padding: 26px 40px;
    border-radius: 22px;
    color: #fff;
    background: radial-gradient(90% 160% at 58% 115%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%), var(--yt-siyah);
}

/* ---- yazı ---- */
.yt-uaUst {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #fff;
}

    .yt-uaUst img {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

.yt-uaBaslik {
    margin: 12px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 31px;
    line-height: 1.12;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
}

.yt-uaOzellik {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: #fff;
}

    .yt-uaOzellik i {
        margin-right: 7px;
        font-size: 16px;
    }

/* ---- telefonlar ----
   Kutu kartın üst kenarından 100px YUKARI uzatılır, alt kenarı kartın alt kenarına oturur
   ve overflow:hidden ile kırpar → telefon üstten taşar, alttan kartın içine "batar".
   (clip-path inset'in negatif değeri yerine bu yol: her tarayıcıda aynı çalışır.)
   Yanlara 70px pay: dönük telefonun köşesi + gölgesi kesilmesin (kesilirse krem zeminde
   düz çizgi kalıyordu). Pay komşu sütunların üstüne biner → pointer-events:none ŞART,
   yoksa mağaza düğmesinin sol kenarı tıklanmaz. */
.yt-uaTeller {
    position: relative;
    align-self: stretch;
    margin: -126px -70px -26px; /* 26 kart dolgusu + 100 taşma */
    overflow: hidden;
    pointer-events: none;
}

.yt-uaTel {
    position: absolute;
    left: 50%;
    display: block;
    width: var(--g, 150px);
    padding: 7px 6px 6px;
    border-radius: calc(var(--g, 150px) * .17);
    background: #0c0c0c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 18px 40px rgba(0, 0, 0, .38);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

    .yt-uaTel::before { /* üst hoparlör çizgisi */
        content: "";
        position: absolute;
        top: 3px;
        left: 37%;
        width: 26%;
        height: 3px;
        border-radius: 3px;
        background: #2a2a2a;
    }

    .yt-uaTel img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: calc(var(--g, 150px) * .13);
    }

/* top: kutunun üstüne göre (kutu üstü = kart üstü - 100px) → orta kartın 60px üstünden başlar */
.yt-uaTel-orta { --g: 148px; margin-left: -74px; top: 40px; z-index: 2; }
.yt-uaTel-sol  { --g: 126px; margin-left: -178px; top: 82px; transform: rotate(-8deg); }
.yt-uaTel-sag  { --g: 126px; margin-left: 52px; top: 82px; transform: rotate(8deg); }

.yt-uaKart:hover .yt-uaTel-orta { transform: translateY(-8px); }
.yt-uaKart:hover .yt-uaTel-sol  { transform: rotate(-10deg) translate(-6px, -4px); }
.yt-uaKart:hover .yt-uaTel-sag  { transform: rotate(10deg) translate(6px, -4px); }

/* ---- mağaza düğmeleri: koyu kart üstünde krem dolgu ---- */
.yt-uaMagaza {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yt-magazaDugme {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 196px;
    min-height: 54px;
    padding: 8px 20px;
    border-radius: 12px;
    background: var(--yt-krem);
    color: var(--yt-metin);
    text-decoration: none;
    transition: background .2s, transform .2s;
}

    .yt-magazaDugme:hover, .yt-magazaDugme:focus {
        background: #fff;
        color: var(--yt-metin);
        text-decoration: none;
    }

    .yt-magazaDugme:hover {
        transform: translateY(-2px);
    }

    .yt-magazaDugme:focus-visible {
        outline: 3px solid var(--yt-ayrac);
        outline-offset: 3px;
    }

    .yt-magazaDugme > i {
        font-size: 26px;
        line-height: 1;
    }

    .yt-magazaDugme small {
        display: block;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--yt-metin-ikincil);
    }

    .yt-magazaDugme b {
        display: block;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.2;
    }

/* ============================== DAR MASAÜSTÜ ============================== */
@media (max-width: 1199px) {
    .yt-uaKart {
        grid-template-columns: minmax(0, 1fr) 320px auto;
        gap: 24px;
        padding: 26px 30px;
    }

    .yt-uaTel-sol { margin-left: -160px; }
    .yt-uaTel-sag { margin-left: 34px; }

    .yt-uaBaslik {
        font-size: 27px;
        letter-spacing: .1em;
    }
}

/* ===================== TABLET: yazı + düğmeler solda, telefonlar sağda ===================== */
/* Alt alta dizilince kart 385px oluyordu; iki sütunla masaüstüne yakın kalır (≈240px). */
@media (max-width: 991px) {
    .yt-uaKart {
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-areas: "yazi teller" "magaza teller";
        gap: 16px 20px;
        padding: 24px 28px;
    }

    .yt-uaYazi   { grid-area: yazi; }
    .yt-uaMagaza { grid-area: magaza; }

    .yt-uaTeller {
        grid-area: teller;
        margin: -124px -60px -24px; /* 24 kart dolgusu + 100 taşma */
    }

    .yt-uaTel-orta { --g: 128px; margin-left: -64px; top: 40px; }
    .yt-uaTel-sol  { --g: 108px; margin-left: -150px; top: 78px; }
    .yt-uaTel-sag  { --g: 108px; margin-left: 42px; top: 78px; }

    .yt-uaBaslik {
        font-size: 25px;
        letter-spacing: .08em;
    }

        .yt-uaOzellik li:nth-child(3) { /* tablet + telefonda tek satır kalsın */
            display: none;
        }

    .yt-uaMagaza {
        flex-direction: row;
    }

    .yt-magazaDugme {
        min-width: 170px;
    }
}

/* ================================ TELEFON: alt alta ================================ */
@media (max-width: 767px) {
    .yt-uygulamaSerit {
        padding: 40px 0 16px;
    }

    .yt-uaKart {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        gap: 12px;
        padding: 0 16px 18px;
        border-radius: 18px;
        text-align: center;
    }

    .yt-uaYazi, .yt-uaMagaza, .yt-uaTeller {
        grid-area: auto;
    }

    /* telefonlar en üstte: ortadaki kartın üst kenarından 38px taşar, kartın içinde 112px
       görünür. Kutu 30px daha yukarıdan başlar (gölge payı) ve kartın 12px dışına taşar
       (yan gölge payı; .yt-kapsayici dolgusu telefonda 14px → ekran dışına çıkmaz). */
    .yt-uaTeller {
        order: -1;
        align-self: auto;
        height: 180px; /* 30 gölge payı + 38 taşma + 112 kart içi */
        margin: -68px -28px 0; /* 16 kart dolgusu + 12 dış pay */
    }

        /* kartın ortasındaki kesim çizgisi yerine kart rengine yumuşak geçiş
           (yalnız kart genişliğinde: kutunun kart dışına taşan 12px'ine boyanmaz) */
        .yt-uaTeller::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 0;
            height: 40px;
            z-index: 3;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--yt-siyah));
        }

    .yt-uaUst, .yt-uaOzellik {
        justify-content: center;
    }

    .yt-uaTel-orta { --g: 104px; margin-left: -52px; top: 30px; }
    .yt-uaTel-sol  { --g: 88px; margin-left: -130px; top: 58px; }
    .yt-uaTel-sag  { --g: 88px; margin-left: 42px; top: 58px; }

    .yt-uaUst {
        gap: 9px;
        font-size: 11.5px;
        letter-spacing: .14em;
    }

        .yt-uaUst img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }

    .yt-uaBaslik {
        margin-top: 8px;
        font-size: 21px;
        letter-spacing: .06em;
    }

    .yt-uaOzellik {
        gap: 4px 14px;
        margin-top: 9px;
        font-size: 13.5px;
    }

        .yt-uaOzellik i {
            margin-right: 5px;
            font-size: 14px;
        }

    .yt-uaMagaza {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .yt-magazaDugme {
        flex: 1 1 0;
        justify-content: center;
        gap: 9px;
        min-width: 0;
        min-height: 50px;
        padding: 8px 10px;
    }

        .yt-magazaDugme > i {
            font-size: 21px;
        }

        .yt-magazaDugme small {
            font-size: 10px;
        }

        .yt-magazaDugme b {
            font-size: 15px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .yt-uaTel, .yt-magazaDugme {
        transition: none;
    }

    .yt-uaKart:hover .yt-uaTel-orta,
    .yt-uaKart:hover .yt-uaTel-sol,
    .yt-uaKart:hover .yt-uaTel-sag,
    .yt-magazaDugme:hover {
        transform: none;
    }

    .yt-uaKart:hover .yt-uaTel-sol { transform: rotate(-8deg); }
    .yt-uaKart:hover .yt-uaTel-sag { transform: rotate(8deg); }
}