/* ==========================================================================
   mobile-fixes.css — mobil (<=991px) duzeltmeleri

   NEDEN AYRI DOSYA: style.css (398KB) ve responsive.css (40KB) satin alinmis
   sablon dosyalari. Duzeltmeleri onlarin icine dagitmak yerine tek dosyada
   toplandi; index.phtml'de responsive.css'ten SONRA yuklenir, boylece ayni
   ozgulluk (specificity) ile override eder ve tek dosya silinerek geri alinabilir.

   TUM kurallar media query icindedir — masaustu gorunumu degismez.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) URUN SEKME SERIDI  (.prod-tabs .tab-btns)

   Sorun: style.css:16174 -> display:flex + justify-content:center, flex-wrap yok,
   overflow yok. 4 sekme 375px ekranda 416px yer kapliyor; ilk sekme left:-41px,
   son sekme right:416px'e tasiyor. body{overflow-x:hidden} oldugu icin yatay
   kaydirma da yok => "Urun Hakkinda" ve "Taksit Secenekleri" sekmelerine
   HIC ERISILEMIYOR.

   Cozum: wrap + pill stili. Kaydirma (overflow-x:auto) yerine wrap secildi;
   kaydirma serisinde gizli sekmelerin varligi kullaniciya belli olmuyor.

   OZGULLUK NOTU: style.css'teki kurallarla ayni selector'u kullanip "sonra
   yukleniyorum" diye kazanmaya guvenmiyoruz. <link> sirasi (media=print+onload
   swap, tarayici/CDN farklari) degisebiliyor. Bu yuzden her override en az bir
   basamak daha ozgul: .prod-tabs -> .prod-tabs.tabs-box, .tab-btn -> li.tab-btn.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

    .prod-tabs.tabs-box .tab-btns {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 15px;
    }

    .prod-tabs.tabs-box .tab-btns li.tab-btn {
        margin: 0;
        padding: 9px 16px;
        font-size: 15px;
        line-height: 20px;
        white-space: nowrap;
        border: 1px solid #e0e3e8;
        border-radius: 999px;
        background: #ffffff;
    }

    .prod-tabs.tabs-box .tab-btns li.tab-btn.active-btn {
        color: #ffffff;
        background: #1967D2;
        border-color: #1967D2;
    }

    /* style.css:16201 -> padding:65px 0 0; mobilde sekme ile icerik arasinda
       kocaman bos alan biraktigi icin kisaltildi. */
    .prod-tabs.tabs-box .tabs-content .tab .content {
        padding-top: 28px;
    }
}


/* --------------------------------------------------------------------------
   2) SABIT CTA'LAR -> ALT AKSIYON BARI
      (.scroll-to-top-ara-wp / -whatsapp-wp / -basvur-wp)

   Sorun: style.css:1082/1135/1190 -> position:fixed; right:-25px; width:200px.
   375px ekranda x=[200,400] araligini kapliyor: ekranin sag yarisi + 25px tasma.
   Paket kartindaki fiyati ve govde metnini orituyor.

   Cozum: ucu de ekranin altinda tam genislikte 3 esit sutuna donusur.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

    .social-share.scroll-to-top-ara-wp,
    .social-share.scroll-to-top-whatsapp-wp,
    .social-share.scroll-to-top-basvur-wp {
        display: block;
        position: fixed;
        right: auto;
        bottom: 0;
        width: 33.3333%;
        height: auto;
        line-height: normal;
        z-index: 1001;
    }

    .social-share.scroll-to-top-ara-wp      { left: 0; }
    .social-share.scroll-to-top-whatsapp-wp { left: 33.3333%; }
    .social-share.scroll-to-top-basvur-wp   { left: 66.6667%; }

    .social-share.scroll-to-top-ara-wp > a,
    .social-share.scroll-to-top-whatsapp-wp > a,
    .social-share.scroll-to-top-basvur-wp > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        /* 52px dokunma hedefi + iPhone home indicator guvenli alani */
        min-height: 52px;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        border-radius: 0;
        font-size: 13px;
        line-height: 1.15;
        text-align: center;
    }

    .social-share.scroll-to-top-ara-wp > a i,
    .social-share.scroll-to-top-whatsapp-wp > a i,
    .social-share.scroll-to-top-basvur-wp > a i {
        margin: 0;
        font-size: 15px;
    }

    /* Yukari cik oku bar ile cakismasin */
    .scroll-to-top {
        bottom: 70px;
    }

    /* Bar sayfanin son satirini kalici olarak ortmesin */
    .page-wrapper {
        padding-bottom: 58px;
    }

    /* mmenu acikken .mm-slideout'a transform binerve position:fixed o elemana
       gore konumlanir; bar sayfa sonuna kacar. Menu acikken gizle. */
    .mm-wrapper--opened .social-share.scroll-to-top-ara-wp,
    .mm-wrapper--opened .social-share.scroll-to-top-whatsapp-wp,
    .mm-wrapper--opened .social-share.scroll-to-top-basvur-wp,
    .mm-wrapper_opened .social-share.scroll-to-top-ara-wp,
    .mm-wrapper_opened .social-share.scroll-to-top-whatsapp-wp,
    .mm-wrapper_opened .social-share.scroll-to-top-basvur-wp {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   3) MOBIL ANA SAYFA GIRIS BOLUMU  (.zb-mgiris)

   Markup: app/views/components/mobilGiris.phtml
   Masaustunde tamamen gizli — asagidaki `display:none` bilincli olarak media
   query DISINDA durur; boylece bolum yalnizca 767px alti acilir ve masaustu
   gorunumu hicbir sekilde etkilenmez. (Dosyanin geri kalanindaki "her kural
   media query icinde" kurali icin tek istisna budur.)
   -------------------------------------------------------------------------- */
.zb-mgiris {
    display: none;
}

@media only screen and (max-width: 767px) {

    .zb-mgiris {
        display: block;
        padding: 28px 0 36px;
        background: #ffffff;
        border-bottom: 1px solid #eef0f4;
    }

    .zb-mgiris__ust {
        margin: 0 0 10px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #1967D2;
    }

    .zb-mgiris__baslik {
        margin: 0 0 12px;
        font-size: 27px;
        line-height: 1.22;
        font-weight: 700;
        color: #202124;
    }

    .zb-mgiris__alt {
        margin: 0 0 20px;
        font-size: 15px;
        line-height: 1.6;
        color: #5c6068;
    }

    /* Birincil aksiyon: ilk ekranda, tam genislikte, 52px dokunma hedefi */
    .zb-mgiris__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 12px 18px;
        border-radius: 10px;
        background: #34A853;
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        text-align: center;
    }

    .zb-mgiris__cta:hover,
    .zb-mgiris__cta:focus {
        color: #ffffff;
        background: #2d9247;
    }

    .zb-mgiris__cta-not {
        margin: 8px 0 0;
        font-size: 13px;
        color: #7a7f88;
        text-align: center;
    }

    /* Kartlarin altinda duruyor (bkz. mobilGiris.phtml'deki not) */
    .zb-mgiris__sayac {
        display: flex;
        gap: 8px;
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
    }

    .zb-mgiris__sayac li {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 6px;
        border-radius: 10px;
        background: #f5f7fa;
        text-align: center;
    }

    .zb-mgiris__sayac strong {
        display: block;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
        color: #1967D2;
    }

    .zb-mgiris__sayac span {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.3;
        color: #5c6068;
    }

    /* margin-top 30px -> 22px: 375x812'de ilk urun kartinin alt kenari 815px'e,
       yani katlamanin 3px altina dusuyordu. Kart butonlariyla birlikte tamamen
       ilk ekranda kalsin diye kisaltildi (olcum: ilk kart bottom ~807). */
    .zb-mgiris__kartlar-baslik {
        margin: 22px 0 14px;
        font-size: 19px;
        font-weight: 700;
        color: #202124;
    }

    .zb-mgiris__kartlar {
        display: grid;
        gap: 12px;
    }

    .zb-mgiris__kart {
        padding: 18px 16px;
        border: 1px solid #e6e8ec;
        border-radius: 12px;
        background: #ffffff;
    }

    .zb-mgiris__kart-gorsel {
        max-width: 150px;
        max-height: 40px;
        width: auto;
        height: auto;
        margin-bottom: 12px;
    }

    .zb-mgiris__kart-ad {
        margin: 0 0 6px;
        font-size: 17px;
        font-weight: 700;
        color: #202124;
    }

    /* Aciklama urunden urune cok farkli uzunlukta; 3 satirda kes ki
       kartlar ayni boyda kalsin ve 6 kart ilk ekrandan cok uzaklasmasin. */
    .zb-mgiris__kart-metin {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 0 14px;
        font-size: 14px;
        line-height: 1.55;
        color: #5c6068;
    }

    .zb-mgiris__kart-butonlar {
        display: flex;
        gap: 8px;
    }

    .zb-mgiris__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }

    .zb-mgiris__btn--birincil {
        background: #1967D2;
        border: 1px solid #1967D2;
        color: #ffffff;
    }

    .zb-mgiris__btn--birincil:hover,
    .zb-mgiris__btn--birincil:focus {
        color: #ffffff;
        background: #1557b0;
    }

    .zb-mgiris__btn--ikincil {
        background: #ffffff;
        border: 1px solid #c9ced6;
        color: #202124;
    }

    .zb-mgiris__btn--ikincil:hover,
    .zb-mgiris__btn--ikincil:focus {
        color: #1967D2;
        border-color: #1967D2;
    }
}


/* --------------------------------------------------------------------------
   4) URUN GORSELI / PAKET KARTLARI ince ayar
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    /* urun/index.phtml — sutun artik col-12 (onceden col-6); gorseli ortala.
       Genislik siniri img'in inline max-width:70% degerinden geliyor, dokunulmadi. */
    .shop-single .product-image-column {
        text-align: center;
    }

    /* variations.phtml — Aylik/Yillik secici mobilde tasmasin */
    #product-prices .btn-group {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .pricingCard.-type-2 .pricingCard__price {
        font-size: 34px;
        line-height: 1.15;
        word-break: break-word;
    }
}