/* ==========================================================================
   Online Satış (passteknik.com) — header butonu + anasayfa vitrin bandı
   Sol kenardaki .onlineStore yüzen sekmesinin yerini alır.
   Marka renkleri: mor #2F2483, sarı #F2B804
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Header butonu — her sayfada, kaydırma gerektirmeden görünür.
      Ölçüler .btn (36px / radius 20 / 0 18px) ile aynı tutuldu.
   -------------------------------------------------------------------------- */
.storeBtnHead{
    background:#F2B804;
    color:#2F2483;
    /* Servis butonuyla ayni incelik (.serviceBtn font-weight:500) */
    font-weight:500;
    white-space:nowrap;
}
.storeBtnHead:hover{
    background:#ffc820;
    color:#2F2483;
    box-shadow:0 6px 16px rgba(242,184,4,.38);
}
.storeBtnHead i{ font-size:20px; }

/* Dar masaüstünde yazıyı gizleyip ikon butona düş */
@media (max-width:1300px){
    .storeBtnHead{ padding:0 12px; gap:0; }
    .storeBtnHead span{ display:none; }
}

/* --------------------------------------------------------------------------
   2) Mobil menüde vurgulu satır
   -------------------------------------------------------------------------- */
.mobile_menu .storeRow > a{
    display:flex !important;
    align-items:center;
    gap:10px;
    background:#F2B804;
    color:#2F2483 !important;
    font-weight:600;
    border-radius:10px;
    margin:10px 14px;
    padding:14px 16px !important;
}
.mobile_menu .storeRow > a i{ font-size:20px; }
.mobile_menu .storeRow > a .ext{ width:13px; height:13px; margin-left:auto; opacity:.8; }

/* --------------------------------------------------------------------------
   3) Anasayfa vitrin şeridi

   Tam genişlik, köşeler keskin (mediaCard/blogCard/productC dahil hiçbir alt
   bölüm kartı yuvarlatılmıyor).

   -------------------------------------------------------------------------- */
.storeBand{
    position:relative;
    padding:74px 0;
    /* Zemin body'nin #F6F6F6 grisinden AÇIK tarafta tutulur. Önce nötr gri
       (birebir aynı renk), sonra lavanta denendi; ikisi de alttaki bölümle
       kaynaşıyordu — lavanta griden koyu tarafta kaldığı için özellikle.
       Şimdi beyazdan çok hafif sıcak beyaza iniyor: %4.4 daha açık,
       üstündeki beyaz homeProduct'la yumuşak geçiyor, alttaki griden
       ayrışıyor. Renk yalnızca köşedeki amber ışımada.                     */
    background:
        radial-gradient(880px 420px at 93% 6%, rgba(242,184,4,.11) 0%, rgba(242,184,4,0) 58%),
        linear-gradient(180deg,#FFFFFF 0%,#FDFDFC 46%,#FCFBF9 100%);
    border-bottom:1px solid #E6E4E0;
    overflow:hidden;
}
.storeBand > .container{ position:relative; z-index:1; }

.storeBandInner{
    display:flex;
    align-items:center;
    gap:64px;
}

/* --- sol taraf: metin --- */
.storeText{ flex:1 1 50%; min-width:0; }

.storeBadge{
    display:inline-flex; align-items:center; gap:9px;
    font-size:12.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase;
    color:#FFFFFF;
    background:#2F2483;
    padding:8px 16px 8px 13px;
    margin-bottom:20px;
    box-shadow:0 6px 16px rgba(47,36,131,.28);
}
.storeBadge::before{
    content:''; width:7px; height:7px; border-radius:50%;
    background:#F2B804;
    box-shadow:0 0 0 0 rgba(242,184,4,.9);
    animation:storePulse 2.4s ease-out infinite;
}
@keyframes storePulse{
    0%   { box-shadow:0 0 0 0 rgba(242,184,4,.85); }
    70%  { box-shadow:0 0 0 8px rgba(242,184,4,0); }
    100% { box-shadow:0 0 0 0 rgba(242,184,4,0); }
}

.storeText h2{
    font-size:34px; font-weight:700; line-height:1.22;
    color:#171144; margin:0 0 14px;
}
.storeText p{
    font-size:16px; line-height:1.75;
    color:#5A5A6E; margin:0 0 28px;
    max-width:470px;
}

.storeCta{
    display:inline-flex; align-items:center; gap:11px;
    height:54px; padding:0 30px;
    background:#F2B804; color:#171144;
    font-size:16.5px; font-weight:700;
    border:2px solid #F2B804;
    box-shadow:0 10px 22px rgba(242,184,4,.34);
    transition:all .28s;
}
.storeCta:hover{
    background:#2F2483; border-color:#2F2483; color:#FFFFFF;
    box-shadow:0 14px 28px rgba(47,36,131,.32);
    transform:translateY(-2px);
}
.storeCta .ext{ width:15px; height:15px; flex:0 0 15px; }

.storeDomain{
    display:block;
    margin-top:16px;
    font-size:13.5px; color:#635F78;
}
.storeDomain b{ color:#2F2483; font-weight:600; }

/* --- sağ taraf: kategori kartları ---------------------------------------
   Uzun şerit denendi ama fazla yatay kaldı. Kart düzeni: ikon ve başlık
   yan yana, altında kısa açıklama, en altta bağlantı. Her kartın rengi
   işaretlemeden --c (dolu) ve --cl (açık) değişkenleriyle gelir. */
.storeGrid{
    flex:1 1 50%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.storeCard{
    position:relative;
    display:flex; flex-direction:column;
    gap:12px;
    padding:22px 20px;
    background:#FFFFFF;
    border:1px solid #E7E4F4;
    color:#171144;
    overflow:hidden;
    transition:all .28s;
}
/* hover'da kart kendi rengiyle alttan dolar */
.storeCard::before{
    content:'';
    position:absolute; inset:0;
    background:var(--c,#2F2483);
    transform:translateY(101%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);
    z-index:0;
}
.storeCard > *{ position:relative; z-index:1; }
.storeCard:hover{
    border-color:var(--c,#2F2483);
    color:#FFFFFF;
    box-shadow:0 14px 28px rgba(23,17,68,.16);
    transform:translateY(-4px);
}
.storeCard:hover::before{ transform:translateY(0); }

/* ikon + başlık yan yana */
.storeCard .hd{
    display:flex; align-items:center; gap:12px;
}
.storeCard .ico{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 42px; width:42px; height:42px;
    /* hafif yuvarlaklık: kare fazla sert, daire fazla iddialı duruyordu */
    border-radius:10px;
    background:var(--cl,rgba(47,36,131,.10));
    transition:background .28s;
}
.storeCard .ico svg{
    width:23px; height:23px;
    stroke:var(--c,#2F2483); stroke-width:1.7;
    fill:none; stroke-linecap:round; stroke-linejoin:round;
    transition:stroke .28s;
}
.storeCard:hover .ico{ background:rgba(255,255,255,.20); }
.storeCard:hover .ico svg{ stroke:#FFFFFF; }

.storeCard .t{
    font-size:16px; font-weight:600; line-height:1.3;
    transition:color .28s;
}

/* kısa açıklama */
.storeCard .d{
    font-size:13.5px; line-height:1.55;
    color:#6E6A8A;
    transition:color .28s;
}
/* .94 saydamlık: .88'de kırmızı (4.12) ve amber (3.86) kartlarda
   açıklama AA eşiğinin altına düşüyordu; .94'te dördü de geçiyor. */
.storeCard:hover .d{ color:rgba(255,255,255,.94); }

/* alt bağlantı */
.storeCard .go{
    display:flex; align-items:center; gap:6px;
    margin-top:auto; padding-top:4px;
    font-size:13.5px; font-weight:600;
    color:var(--c,#2F2483);
    transition:color .28s;
}
.storeCard:hover .go{ color:#FFFFFF; }
.storeCard .go svg{
    width:14px; height:14px; stroke:currentColor; stroke-width:2.2;
    fill:none; stroke-linecap:round; stroke-linejoin:round;
    transition:transform .28s;
}
.storeCard:hover .go svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   4) Duyarlı davranış
   -------------------------------------------------------------------------- */
@media (max-width:1199px){
    .storeBandInner{ gap:42px; }
    .storeText h2{ font-size:29px; }
    .storeGrid{ gap:12px; }
    .storeCard{ padding:18px 16px; gap:10px; }
    .storeCard .ico{ flex:0 0 38px; width:38px; height:38px; }
    .storeCard .ico svg{ width:21px; height:21px; }
    .storeCard .t{ font-size:15px; }
    .storeCard .d{ font-size:13px; }
}

@media (max-width:991px){
    .storeBand{ padding:56px 0; }
    .storeBandInner{ flex-direction:column; align-items:stretch; gap:34px; }
    .storeText{ flex:none; }
    .storeText p{ max-width:none; }
    .storeGrid{ flex:none; }
}

@media (max-width:575px){
    .storeBand{ padding:44px 0; }
    .storeText h2{ font-size:24px; }
    .storeText p{ font-size:15px; margin-bottom:24px; }
    /* dar ekranda iki sütun kartı sıkıştırıyor, tek sütuna düşer */
    .storeGrid{ grid-template-columns:1fr; gap:10px; }
    .storeCard{ padding:16px 15px; }
    .storeCta{ height:50px; width:100%; justify-content:center; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
    .storeBadge::before{ animation:none; }
    .storeCard, .storeCta, .storeBtnHead, .storeCard::before{ transition:none; }
    .storeCard:hover, .storeCta:hover{ transform:none; }
    .storeCard:hover .go svg{ transform:none; }
}