/*
 * SunucuRadar ürün detay mobil v5.
 * Yalnız .sr-product-page için çalışır.
 */

@media (max-width: 720px) {

    body:has(.sr-product-page) {
        overflow-x: hidden;
    }

    .sr-product-page,
    .sr-product-page * {
        box-sizing: border-box;
    }

    .sr-product-page {
        width: calc(100% - 18px) !important;
        max-width: 680px !important;
        min-width: 0;
        margin: 12px auto 34px !important;
    }

    /*
     * Breadcrumb
     */

    .sr-product-breadcrumb {
        gap: 6px !important;
        min-width: 0;
        margin: 0 3px 11px !important;
        overflow: hidden;
        color: #94a3b8;
        font-size: 11px !important;
    }

    .sr-product-breadcrumb a {
        flex: 0 0 auto;
        color: #86efac;
        font-weight: 800;
    }

    .sr-product-breadcrumb strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Ana ürün vitrini
     */

    .sr-product-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        min-width: 0;
    }

    /*
     * Görsel
     */

    .sr-product-media {
        min-width: 0;
        padding: 7px;
        overflow: hidden;
        border:
            1px solid
            rgba(148, 163, 184, .16);
        border-radius: 19px !important;
        background:
            linear-gradient(
                145deg,
                rgba(15, 23, 42, .88),
                rgba(2, 6, 23, .94)
            );
        box-shadow:
            0 16px 44px
            rgba(0, 0, 0, .22);
    }

    .sr-store-gallery-main {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 14px !important;
        background: #020617;
    }

    .sr-store-gallery-main img,
    .sr-store-gallery-main video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sr-store-gallery-thumbs {
        display: grid !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 6px !important;
    }

    .sr-store-gallery-item {
        width: 100% !important;
        min-width: 0;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: 8px !important;
    }

    /*
     * Satış kartı
     */

    .sr-product-summary {
        position: static !important;
        min-width: 0;
        padding: 18px 16px !important;
        overflow: hidden;
        border:
            1px solid
            rgba(96, 165, 250, .16) !important;
        border-radius: 19px !important;
        background:
            radial-gradient(
                circle at 95% 0%,
                rgba(59, 130, 246, .11),
                transparent 34%
            ),
            linear-gradient(
                145deg,
                rgba(15, 23, 42, .96),
                rgba(2, 6, 23, .92)
            ) !important;
        box-shadow:
            0 18px 48px
            rgba(0, 0, 0, .20) !important;
    }

    .sr-product-category {
        margin: 0 0 10px !important;
        padding: 6px 9px !important;
        color: #93c5fd;
        font-size: 9px !important;
        font-weight: 900;
        letter-spacing: .08em;
        border:
            1px solid
            rgba(96, 165, 250, .16);
        background:
            rgba(59, 130, 246, .09) !important;
    }

    .sr-product-summary h1 {
        margin: 0 0 10px !important;
        color: #f8fafc;
        font-size: clamp(
            28px,
            8.2vw,
            36px
        ) !important;
        font-weight: 1000;
        line-height: 1.02 !important;
        letter-spacing: -.8px;
        overflow-wrap: anywhere;
    }

    .sr-product-description {
        margin: 0 !important;
        color: #b7c2d1;
        font-size: 13px !important;
        line-height: 1.62 !important;
        opacity: 1 !important;
    }

    /*
     * Fiyat alanı
     */

    .sr-product-price-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        margin: 17px 0 13px !important;
        padding: 14px !important;
        border:
            1px solid
            rgba(34, 197, 94, .18) !important;
        border-radius: 14px !important;
        background:
            linear-gradient(
                135deg,
                rgba(34, 197, 94, .085),
                rgba(15, 23, 42, .48)
            ) !important;
    }

    .sr-product-price-box > div:first-child {
        gap: 3px !important;
    }

    .sr-product-price-box span {
        color: #94a3b8;
        font-size: 10px !important;
        font-weight: 750;
    }

    .sr-product-price-box strong {
        color: #f8fafc;
        font-size: 29px !important;
        font-weight: 1000;
        line-height: 1.05;
        letter-spacing: -.6px;
    }

    .sr-product-price-box form,
    .sr-product-price-box > a,
    .sr-product-price-box > button {
        width: 100% !important;
        margin: 0 !important;
    }

    .sr-product-price-box a,
    .sr-product-price-box button,
    .sr-product-price-box .button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 49px;
        padding: 12px 15px !important;
        border-radius: 11px !important;
        text-align: center;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    /*
     * Lisans / teslim / gereksinim
     */

    .sr-store-info-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 0 !important;
    }

    .sr-store-info-grid > *,
    .sr-store-info-grid article,
    .sr-store-info-grid > div {
        min-width: 0;
        padding: 11px !important;
        border-radius: 11px !important;
        background:
            rgba(255, 255, 255, .035) !important;
    }

    .sr-store-info-grid span {
        display: block;
        margin-bottom: 4px;
        color: #94a3b8;
        font-size: 9px !important;
    }

    .sr-store-info-grid strong {
        display: block;
        color: #e2e8f0;
        font-size: 11px !important;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /*
     * Alt içerik
     */

    .sr-product-content {
        display: grid !important;
        gap: 11px !important;
        min-width: 0;
        margin-top: 11px !important;
    }

    .sr-product-content
    .sr-store-detail-section {
        min-width: 0;
        padding: 17px 15px !important;
        border-radius: 17px !important;
        background:
            rgba(15, 23, 42, .62) !important;
    }

    .sr-product-content
    .sr-store-detail-section h3 {
        margin: 0 0 12px !important;
        font-size: 20px !important;
        line-height: 1.1;
    }

    .sr-product-content
    .sr-store-feature-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .sr-product-content
    .sr-store-feature-list li {
        align-items: flex-start;
        gap: 8px !important;
        min-width: 0;
        padding: 10px 11px !important;
        color: #dbe5f1;
        font-size: 12px !important;
        line-height: 1.45;
        border:
            1px solid
            rgba(148, 163, 184, .09);
        border-radius: 10px !important;
        background:
            rgba(255, 255, 255, .028) !important;
    }

    /*
     * Destek
     */

    .sr-product-support {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 13px !important;
        align-items: stretch !important;
        min-width: 0;
        padding: 17px 15px !important;
        border-radius: 17px !important;
        background:
            linear-gradient(
                135deg,
                rgba(37, 99, 235, .13),
                rgba(124, 58, 237, .08)
            ) !important;
    }

    .sr-product-support span {
        color: #93c5fd;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .sr-product-support h2 {
        margin: 6px 0 7px !important;
        font-size: 21px !important;
        line-height: 1.1;
    }

    .sr-product-support p {
        margin: 0 !important;
        color: #b8c2d0;
        font-size: 12px !important;
        line-height: 1.55 !important;
        opacity: 1 !important;
    }

    .sr-product-support a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 45px;
        padding: 11px 14px !important;
        border-radius: 11px !important;
        text-align: center;
    }

    /*
     * Giriş modalı
     */

    .sr-store-auth-modal {
        align-items: flex-end !important;
        padding:
            8px
            8px
            max(
                8px,
                env(safe-area-inset-bottom)
            ) !important;
    }

    .sr-store-auth-dialog {
        width: 100% !important;
        max-width: none !important;
        max-height:
            calc(100dvh - 16px) !important;
        margin: 0 !important;
        padding: 18px 16px !important;
        overflow-y: auto;
        border-radius:
            20px 20px
            13px 13px !important;
    }

    .sr-store-auth-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .sr-store-auth-actions a,
    .sr-store-auth-actions button {
        width: 100% !important;
        min-height: 46px;
    }
}

@media (max-width: 420px) {

    .sr-product-page {
        width: calc(100% - 12px) !important;
        margin-top: 8px !important;
    }

    .sr-product-summary {
        padding: 15px 13px !important;
    }

    .sr-product-summary h1 {
        font-size: 27px !important;
    }

    .sr-product-price-box strong {
        font-size: 26px !important;
    }

    .sr-store-info-grid {
        grid-template-columns: 1fr !important;
    }

    .sr-store-gallery-thumbs {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}