/*
 * Mr Usta — Hero Component Styles
 * Dosya: /wp-content/themes/pantry-child/assets/css/mrusta-hero.css
 *
 * Prefix : mrh__ (Mr Hero)
 * Kapsam : [mrusta_hizmet_kart] shortcode çıktısı
 *
 * SINIF HARİTASI
 * .mrh               → <section> wrapper
 * .mrh__visual       → görsel sütun / resim alanı
 * .mrh__img          → usta görseli <img>
 * .mrh__card         → içerik sütunu / beyaz kart
 * .mrh__review       → yıldız + puan özeti
 * .mrh__title        → <h1>
 * .mrh__desc         → açıklama <p>
 * .mrh__badges       → 4 güven rozeti satırı
 * .mrh__badge        → tek rozet (ikon + etiket)
 * .mrh__cta          → select + buton satırı
 * .mrh__select-wrap  → select container (ok pseudo-ikonu için relative)
 * .mrh__btn          → sipariş butonu
 * .mrh__partners     → iş ortakları (her iki viewport'ta görünür)
 * .mrh__partners-lbl → "İş Ortaklarımız" etiketi
 */

/* ── Temel ─────────────────────────────────────────────────── */
.mrh {
    font-family: 'Lexend', sans-serif;
    box-sizing: border-box;
}
.mrh *,
.mrh *::before,
.mrh *::after {
    box-sizing: inherit;
}

/*
 * Tema select_container::after fontello ikonu — gizle, kendi chevron'umuzu koyuyoruz.
 * mrh__select-wrap::after ile konumlandırıyoruz (select_container'ın parent'ı,
 * position:relative ayarlı).
 */
.mrh .select_container::after {
    display: none !important;
}
.mrh__select-wrap {
    position: relative;
}
.mrh__select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #6A778B;
    z-index: 3;
}


/* ════════════════════════════════════════════════════════════
   DESKTOP  (≥ 768 px)
   Sol: içerik kartı  |  Sağ: usta görseli
   Review kartı görselin üzerine position:absolute ile yüzer

   max-width + margin:auto → component kendi kendini ortalar.
   Elementor section boxed/stretched fark etmez.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    /*
     * Grid layout:
     *   Sol sütun: card (içerik) üstte + partners altında
     *   Sağ sütun: görsel — her iki satırı kapsar (row-span)
     */
    .mrh {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "card   visual"
            "partners visual";
        position: relative;     /* .mrh__review absolute'un referans noktası */
        min-height: 500px;
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* ── Sol-üst: metin içeriği ── */
    .mrh__card {
        grid-area: card;
        padding: 8% 32px 24px clamp(16px, 3%, 48px);
        background: transparent;
        min-width: 0;
    }

    /* ── Sağ sütun: görsel — her iki satırı kapsar ── */
    .mrh__visual {
        grid-area: visual;
        overflow: hidden;
       
    }
    .mrh__img {
        width: 100%;
        height: 100%;
        object-fit: contain;      /* prod'da usta tam boy görünüyor, cover kesmiyor */
        object-position: bottom center;
        display: block;
    }

    /*
     * Review kartı: .mrh__card'ın DOM çocuğu ama position:absolute
     * ile .mrh referansına göre görselin üzerine konumlanıyor.
     * left: calc(50% + 32px) → sağ yarı = görsel alanı.
     */
    .mrh__review {
        position: absolute;
        bottom: 20%;
        right: 5%;
        background: #fff;
        border-radius: 16px;
        padding: 14px 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        z-index: 2;
        white-space: nowrap;
    }
    /* Yorum kartı iç düzeni: yıldız+puan üst satır, inceleme sayısı alt satır */
    .mrh__review .review-summary {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .mrh__review .review-stars-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .mrh__review .review-count {
        display: block !important;
    }

    /* ── H1 ── */
    .mrh__title {
        color: #243752;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        letter-spacing: -0.96px;
        margin: 0 0 24px;
    }

    /* ── Açıklama ── */
    .mrh__desc {
        color: #6A778B;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin: 0 0 32px;
        max-width: 480px;
    }

    /* ── Güven rozetleri ── */
    .mrh__badges {
        display: flex;
        gap: 74px;            /* prod değeri */
        margin: 0 0 32px;
        flex-wrap: nowrap;    /* prod'da tek satır */
    }
    .mrh__badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .mrh__badge-icon {
        width: 48px;
        height: 48px;
        background: #F2F9FF;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-bottom: 8px;
    }
    .mrh__badge p {
        color: #42526B;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        margin: 0;
    }

    /* ── CTA satırı ── */
    .mrh__cta {
        display: flex;
        align-items: center;
        gap: 16px;
        max-width: 570px;
        margin: 0 0 32px;
    }
    .mrh__select-wrap {
        flex: 1;
        min-width: 0;
        /* position/::after yok — ok ikonu select_container::after'dan geliyor */
    }
    /* select_container tema wrapper'ı — arka plan ve border burada */
    .mrh .select_container {
        width: 100%;
        display: block;
        position: relative;
        background: #fff;
        border: 1px solid #E6E8EC;
        border-radius: 12px;
    }
    .mrh .select_container:focus-within {
        border-color: #061C3D;
    }
    .mrh__cta .select_container > select {
        width: 100%;
        height: 50px;
        padding: 12px 44px 12px 18px;
        border: none;             /* border select_container'da */
        border-radius: 12px;
        background: transparent;  /* ::after görünsün diye transparent */
        color: #061C3D;
        font-family: 'Lexend', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        cursor: pointer;
        outline: none;
        position: relative;
        z-index: 1;               /* ::after z-index:2 üstünde görünür */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    .mrh__btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        height: 50px;
        padding: 0 32px;
        border: none;
        border-radius: 12px;
        background: #061C3D;
        color: #fff;
        font-family: 'Lexend', sans-serif;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.2s;
    }
    .mrh__btn:hover { background: #243752; }
    .mrh__btn svg   { color: #fff; flex-shrink: 0; }

    /* ── Sol-alt: iş ortakları ── */
    .mrh__partners {
        grid-area: partners;
        display: block;
        padding: 0 32px 40px clamp(16px, 3%, 48px);  /* card ile hizalı */
    }
    .mrh__partners-lbl {
        display: block;
        color: #6A778B;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.192px;
        margin-bottom: 12px;
    }
    .mrh__partners img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}


/* ════════════════════════════════════════════════════════════
   MOBILE  (≤ 767 px)  —  Figma tasarımına uygun
   ────────────────────────────────────────────────────────
   Yapı:
   1. Görsel — tam genişlik, sayfanın kenarına kadar uzanır
   2. Beyaz kart — görselin üzerine yuvarlak üst köşeyle bindirilir
      İçerik: review → başlık → açıklama → rozetler → CTA
   3. İş ortakları — kartın altında, ayırıcı çizgiyle
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /*
     * Full-bleed: Elementor container padding'ini aşarak viewport kenarına uzanır.
     * Formül: margin-left = (container_genişliği - 100vw) / 2
     * Örnek: container 360px, viewport 400px → margin-left = -20px
     * Horizontal scroll önlemi: theme veya Elementor'un overflow-x:hidden'ı devreye girer.
     * Ek önlem olarak body veya .page_wrap'e overflow-x:hidden eklenebilir.
     */
    .mrh {
        display: flex;
        flex-direction: column;
        width: 100vw;
        margin-left: calc((100% - 100vw) / 2);
        background: #fff;
        /* overflow:hidden yok — kart alt köşe radius'u ve partners görünsün */
    }

    /* ── 1. Görsel ── */
    .mrh__visual {
        order: 1;
        width: 100%;
        height: 220px;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 0 0 24px 24px;  /* Figma: alt köşeler yuvarlak */
    }
    .mrh__img {
        width: 100%;
        height: 100%;
        object-fit: contain;      /* prod'da usta tam boy görünüyor, cover kesmiyor */
        object-position: bottom center;
        display: block;
    }

    /* ── 2. Beyaz kart ── */
    .mrh__card {
        order: 2;
        background: #fff;
        border-radius: 20px;           /* tüm köşeler yuvarlak */
        padding: 20px 20px 24px;
        margin: -20px 16px 16px;       /* alt margin: kart altı görünsün */
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    }

    /* ── Review: kartın en üstünde normal akışta ── */
    .mrh__review {
        position: static;
        margin-bottom: 12px;
    }

    /* ── H1 ── */
    .mrh__title {
        color: #243752;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: -0.48px;
        margin: 4px 0 12px;
    }

    /* ── Açıklama ── */
    .mrh__desc {
        color: #42526B;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 20px;
    }

    /* ── Güven rozetleri ── */
    .mrh__badges {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .mrh__badge {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }
    .mrh__badge-icon {
        width: 40px;
        height: 40px;
        background: #F2F9FF;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-bottom: 2px;
    }
    .mrh__badge p {
        font-size: 11px;
        color: #42526B;
        margin: 0;
        line-height: 1.4;
    }

    /* ── CTA ── */
    .mrh__cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;  /* yatay ortala */
        width: 100%;
    }
    .mrh__cta .select_container,
    .mrh__cta .mrh__select-wrap {
        width: 100%;
    }

    /* select_container tema wrapper — border ve bg burada, select transparent */
    .mrh .select_container {
        width: 100%;
        display: block;
        position: relative;
        background: #fff;
        border: 1.5px solid #E6E8EC;
        border-radius: 12px;
    }
    .mrh .select_container:focus-within {
        border-color: #061C3D;
    }
    .mrh__cta .select_container > select {
        display: block;
        width: 100%;
        height: 50px;
        padding: 0 44px 0 16px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: #061C3D;
        font-family: 'Lexend', sans-serif;
        font-size: 16px;
        font-weight: 400;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        cursor: pointer;
        outline: none;
        position: relative;
        z-index: 1;
        /* Chrome user-agent select { text-align: start } ezmek için !important */
        text-align: center !important;
        text-align-last: center !important;
    }
    .mrh__cta .select_container > select::-ms-expand { display: none; }
    .mrh__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        height: 50px;
        padding: 0 32px;
        border: none;
        border-radius: 12px;
        background: #061C3D;
        color: #fff;
        font-family: 'Lexend', sans-serif;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
    }
    .mrh__btn:hover { background: #243752; }
    .mrh__btn svg   { color: #fff; flex-shrink: 0; }

    /* ── 3. İş ortakları — kart dışında, sayfa arka planında ── */
    .mrh__partners {
        order: 3;   /* visual:1 card:2 partners:3 — sırayı sabitle */
        display: block;
        padding: 24px 20px 8px;
        background: transparent;
    }
    .mrh__partners-lbl {
        display: block;
        color: #061C3D;
        font-family: 'Lexend', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.192px;
        margin-bottom: 14px;
    }
    .mrh__partners img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}