/**
 * Telefon peek carousel — bir kart tam, sağda sonraki kartın ucu
 */

@media (max-width: 767px) {
    :root {
        --carousel-peek: 36px;
        --carousel-gap: 10px;
        --carousel-card-w: calc(100vw - var(--phone-gutter, 16px) - var(--carousel-peek));
    }

    /* ---- Ortak kaydırma ipucu ---- */
    .mh-scroll-hint {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 2px 0 0;
        padding: 0;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mh-muted, #b8c5d4);
        opacity: 1;
        transition: opacity 0.35s ease;
    }

    .mh-scroll-hint i {
        font-size: 0.65rem;
        animation: mh-hint-nudge 1.6s ease-in-out infinite;
    }

    .mh-scroll-hint.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    @keyframes mh-hint-nudge {
        0%,
        100% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(4px);
        }
    }

    /* ---- Peek şeridi (yatay kaydırma) ---- */
    .mh-peek-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--carousel-gap);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: var(--phone-gutter, 16px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        padding-bottom: 4px;
    }

    .mh-peek-track::-webkit-scrollbar {
        display: none;
    }

    .mh-peek-track::after {
        content: "";
        flex: 0 0 var(--phone-gutter, 16px);
        scroll-snap-align: none;
    }

    .mh-peek-track > .mh-peek-item {
        flex: 0 0 var(--carousel-card-w);
        max-width: var(--carousel-card-w);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .mh-peek-track > .mh-peek-item.is-near {
        transform: scale(0.985);
        opacity: 0.92;
    }

    /* ---- Çözümler bento ---- */
    .page-content:has(.mh) .mh-bento-section {
        position: relative;
        overflow: visible;
    }

    .page-content:has(.mh) .mh-bento-section .mh-section-head {
        padding-left: var(--phone-gutter, 16px);
        padding-right: var(--phone-gutter, 16px);
    }

    .page-content:has(.mh) .mh-bento-section::before {
        content: "";
        position: absolute;
        top: 48px;
        right: 0;
        bottom: 36px;
        width: 48px;
        background: linear-gradient(90deg, transparent, rgba(7, 11, 18, 0.75));
        pointer-events: none;
        z-index: 3;
    }

    .page-content:has(.mh) .mh-bento {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: unset !important;
        gap: var(--carousel-gap);
        margin: 0;
        padding: 0 0 6px var(--phone-gutter, 16px);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: var(--phone-gutter, 16px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .page-content:has(.mh) .mh-bento::-webkit-scrollbar {
        display: none;
    }

    .page-content:has(.mh) .mh-bento::after {
        content: "";
        flex: 0 0 var(--phone-gutter, 16px);
    }

    .page-content:has(.mh) .mh-bento-card {
        flex: 0 0 var(--carousel-card-w) !important;
        max-width: var(--carousel-card-w) !important;
        width: var(--carousel-card-w) !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        grid-column: auto !important;
        min-width: 0;
    }

    .page-content:has(.mh) .mh-bento-card--featured {
        flex: 0 0 var(--carousel-card-w) !important;
        max-width: var(--carousel-card-w) !important;
    }

    /* ---- İstatistik foto kartları — yatay peek ---- */
    .page-content:has(.mh) .mh-stats--photo {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--carousel-gap);
        margin: 0 0 18px;
        padding: 0 0 4px var(--phone-gutter, 16px);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: var(--phone-gutter, 16px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page-content:has(.mh) .mh-stats--photo::-webkit-scrollbar {
        display: none;
    }

    .page-content:has(.mh) .mh-stats--photo::after {
        content: "";
        flex: 0 0 var(--phone-gutter, 16px);
    }

    .page-content:has(.mh) .mh-stats--photo .mh-stat-card {
        flex: 0 0 var(--carousel-card-w);
        max-width: var(--carousel-card-w);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-height: 132px;
    }

    .page-content:has(.mh) .mh-stats--photo .mh-stat-card__body {
        min-height: 132px;
    }

    /* ---- Yazılım kartları — 2 sütun, karartma/peek yok ---- */
    .page-content:has(.mh) .mh-software__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        margin: 0;
        padding: 0 var(--phone-gutter, 16px);
        overflow: visible;
        scroll-snap-type: none;
    }

    .page-content:has(.mh) .mh-software__grid::after {
        display: none;
    }

    .page-content:has(.mh) .mh-software__grid .mh-app-card {
        flex: unset;
        max-width: none;
        width: 100%;
        min-width: 0;
        opacity: 1 !important;
        transform: none !important;
    }

    .page-content:has(.mh) .mh-software__grid .mh-app-card.is-near {
        opacity: 1 !important;
        transform: none !important;
    }

    .page-content:has(.mh) .mh-software .mh-scroll-hint {
        display: none;
    }

    /* ---- Güven rozetleri — peek pill ---- */
    .page-content:has(.mh) .mh-trust {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        margin: 0 0 20px;
        padding: 0 0 4px var(--phone-gutter, 16px);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .page-content:has(.mh) .mh-trust::after {
        content: "";
        flex: 0 0 var(--phone-gutter, 16px);
    }

    .page-content:has(.mh) .mh-trust li {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* ---- Nokta göstergesi ---- */
    .mh-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 10px var(--phone-gutter, 16px) 2px;
    }

    .mh-carousel-dots__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        transition: width 0.25s ease, background 0.25s ease;
    }

    .mh-carousel-dots__dot.is-active {
        width: 18px;
        border-radius: 3px;
        background: linear-gradient(90deg, #01b1af, #c9a962);
    }

    body.light-mode .mh-carousel-dots__dot {
        background: rgba(15, 23, 42, 0.15);
    }

    body.light-mode .mh-carousel-dots__dot.is-active {
        background: linear-gradient(90deg, #018a88, #01b1af);
    }

    body.light-mode .page-content:has(.mh) .mh-bento-section::before {
        background: linear-gradient(90deg, transparent, rgba(240, 244, 248, 0.92));
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .mh-scroll-hint i {
        animation: none;
    }

    .mh-peek-track,
    .page-content:has(.mh) .mh-bento,
    .page-content:has(.mh) .mh-stats--photo,
    .page-content:has(.mh) .mh-software__grid {
        scroll-snap-type: none;
    }
}