/* =========================================================================
   ORTAK SAYFA BILESENLERI — assets/css/hm-sayfa.css
   -------------------------------------------------------------------------
   NE ISE YARAR
   Sepetim, Giris Yap, Favoriler, Hakkimizda, Iletisim, Banka Hesaplari,
   Gizlilik, Odeme Bildirimi, Siparis Durumu, SSS, B2B — bu sayfalarin
   hepsi ayni parcalardan olusuyor: sayfa basligi, kart, form, tablo,
   bos durum, akordiyon, uyari, buton, ozet kutusu.
   Her sayfada bunlari yeniden tasarlamak yerine BIR KEZ burada
   tanimliyoruz. Yeni sayfa = mevcut parcalari dizmek.

   YUKLEME SIRASI (index.php)
     theme.css → header.css → ... → kategori.css → urun.css
     → hm-sayfa.css → footer.css
   hm-sayfa.css urun.css'ten SONRA gelmeli; ortak parcalar ozel sayfa
   kurallarinin uzerine yazmasin diye ozellikler dusuk ozgullukte tutuldu.

   BAGIMLILIK: theme.css icindeki token'lar
     --c-orange --c-slate --c-text --c-muted --c-border --c-wa --font
     --s1..--s8  --r-sm --r-md --r-lg --r-pill

   ISIMLENDIRME: hm-sf__* ("sayfa")
   Tema sinif adlariyla cakismamasi icin hepsi bu onekte.
   ========================================================================= */

/* =========================================================================
   0) TEMA NOTRLESTIRME
   Urun ve kategori sayfasinda ogrendigimiz ders: tema sarmalayicilari
   kendi cerceve/radius/golge/float'ini basiyor ve icerideki bloklar
   kutu-icinde-kutu gorunuyor ya da saga kaciyor. Sayfa kokune
   .hm-sf sinifi verildiginde bunlar toptan susturuluyor.
   ========================================================================= */
.hm-sf{font-family:var(--font);color:var(--c-text);}

.hm-sf .page-header,
.hm-sf .single-page,
.hm-sf .single-content,
.hm-sf .product-info,
.hm-sf .product-detail,
.hm-sf .accordion-detail,
.hm-sf .tab-content,
.hm-sf .tab-pane,
.hm-sf .card,
.hm-sf .widget-category{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
}
/* temanin float dizilimi: bloklarimiz akistan cikmasin */
.hm-sf .row > *,
.hm-sf .single-content > *,
.hm-sf .single-page > *{float:none;}
.hm-sf .container::after{content:'';display:table;clear:both;}


/* =========================================================================
   1) SAYFA BASLIGI + BREADCRUMB
   Breadcrumb sinifi urun sayfasindakiyle AYNI (hm-crumbwrap / hm-crumb).
   Orada tanimli, burada tekrar edilmiyor — iki sayfa ayni gorunsun diye.
   ========================================================================= */
.hm-sf__head{
    padding:var(--s4) 0 var(--s3);
}
.hm-sf__h1{
    margin:0 0 6px!important;
    font-size:28px;font-weight:800;line-height:1.2;
    letter-spacing:-.02em;color:var(--c-slate);
}
.hm-sf__lead{
    margin:0;
    max-width:70ch;
    font-size:14.5px;line-height:1.65;color:var(--c-muted);
}
.hm-sf__h2{
    margin:0 0 var(--s2)!important;
    font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--c-slate);
    line-height:1.3;
}
.hm-sf__h3{
    margin:var(--s3) 0 var(--s1)!important;
    font-size:16px;font-weight:800;color:var(--c-slate);line-height:1.35;
}


/* =========================================================================
   2) DUZEN — iki sutunlu sayfa (icerik + yan kutu)
   Sepetim: sol sepet tablosu, sag ozet.  Giris: form + yan bilgi.
   Grid; tema float'larina bagimli degil.
   ========================================================================= */
.hm-sf__govde{padding-bottom:var(--s6);}

.hm-sf__ikili{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:var(--s4);
    align-items:start;
}
.hm-sf__tekli{max-width:820px;}
.hm-sf__yan{position:sticky;top:90px;}


/* =========================================================================
   3) KART — her seyin temel kabi
   ========================================================================= */
.hm-sf__kart{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    padding:var(--s3);
}
.hm-sf__kart + .hm-sf__kart{margin-top:var(--s3);}
.hm-sf__kart--sik{padding:var(--s2);}
.hm-sf__kart--duz{border:0;padding:0;background:transparent;}

.hm-sf__kart-bas{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:0 0 var(--s2);
    padding-bottom:var(--s2);
    border-bottom:1px solid var(--c-border);
}
.hm-sf__kart-bas h2,
.hm-sf__kart-bas h3{
    margin:0!important;
    font-size:16px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}


/* =========================================================================
   4) METIN BLOGU — Hakkimizda, Gizlilik, B2B gibi yazi agirlikli sayfalar
   Admin'den gelen HTML burada makul gorunsun diye.
   ========================================================================= */
.hm-sf__metin{
    font-size:14.5px;line-height:1.75;color:#5A6773;
    max-width:78ch;
}
.hm-sf__metin > *:first-child{margin-top:0;}
.hm-sf__metin > *:last-child{margin-bottom:0;}
.hm-sf__metin h1,
.hm-sf__metin h2,
.hm-sf__metin h3,
.hm-sf__metin h4{
    margin:var(--s4) 0 var(--s1);
    font-size:17px;font-weight:800;color:var(--c-slate);line-height:1.35;
    letter-spacing:-.01em;
}
.hm-sf__metin p{margin:0 0 var(--s2);}
.hm-sf__metin strong,
.hm-sf__metin b{color:var(--c-slate);font-weight:700;}
.hm-sf__metin a{color:var(--c-orange);text-decoration:underline;}
.hm-sf__metin ul,
.hm-sf__metin ol{margin:0 0 var(--s2);padding-left:20px;}
.hm-sf__metin li{margin-bottom:6px;}
.hm-sf__metin img{max-width:100%;height:auto;border-radius:var(--r-md);margin:0 0 var(--s2);}
.hm-sf__metin hr{border:0;border-top:1px solid var(--c-border);margin:var(--s3) 0;}
.hm-sf__metin blockquote{
    margin:0 0 var(--s2);padding:var(--s2);
    background:#F7F8F9;border-left:3px solid var(--c-orange);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
}


/* =========================================================================
   5) FORM — Giris Yap, Iletisim, Odeme Bildirimi, Siparis Durumu
   ========================================================================= */
.hm-sf__form{display:grid;gap:var(--s2);}
.hm-sf__alan{display:block;min-width:0;}
.hm-sf__satir{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);
}

.hm-sf__etiket{
    display:block;margin-bottom:6px;
    font-size:12.5px;font-weight:700;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__etiket span{color:var(--c-orange);}   /* zorunlu isareti */

.hm-sf__girdi,
.hm-sf .hm-sf__form input[type="text"],
.hm-sf .hm-sf__form input[type="email"],
.hm-sf .hm-sf__form input[type="tel"],
.hm-sf .hm-sf__form input[type="number"],
.hm-sf .hm-sf__form input[type="password"],
.hm-sf .hm-sf__form input[type="date"],
.hm-sf .hm-sf__form textarea{
    display:block;
    width:100%;max-width:100%;
    min-height:48px;
    padding:12px 14px;
    background:#fff;
    border:1.5px solid var(--c-border);
    border-radius:var(--r-md);
    font-family:var(--font);font-size:15px;font-weight:500;
    color:var(--c-slate);line-height:1.4;
    transition:border-color .16s ease, box-shadow .16s ease;
}
.hm-sf__girdi::placeholder,
.hm-sf textarea::placeholder{color:#9AA5B0;font-weight:400;}
.hm-sf__girdi:hover{border-color:#C4CBD2;}
.hm-sf__girdi:focus,
.hm-sf .hm-sf__form input:focus,
.hm-sf .hm-sf__form textarea:focus{
    outline:none;border-color:var(--c-orange);
    box-shadow:0 0 0 3px rgba(253,87,34,.13);
}
.hm-sf textarea.hm-sf__girdi{min-height:130px;padding-top:12px;resize:vertical;}

/* secim kutusu: ok isareti select'in KENDI arka plani (urun sayfasindaki
   dersin aynisi — ayri bir oge olsa tema genisligi kisitlayinca disari
   tasiyordu) */
.hm-sf__sec{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    display:block;width:100%;max-width:100%;min-height:48px;
    padding:12px 42px 12px 14px;
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8894' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;
    background-size:18px 18px;
    border:1.5px solid var(--c-border);border-radius:var(--r-md);
    font-family:var(--font);font-size:15px;font-weight:600;color:var(--c-slate);
    cursor:pointer;
    transition:border-color .16s ease, box-shadow .16s ease;
}
.hm-sf__sec:focus{outline:none;border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(253,87,34,.13);}

/* onay kutusu / radyo */
.hm-sf__onay{
    display:flex;align-items:flex-start;gap:10px;
    font-size:13.5px;line-height:1.5;color:var(--c-text);
    cursor:pointer;user-select:none;
}
.hm-sf__onay input{
    flex:0 0 auto;width:19px;height:19px;margin:1px 0 0;
    accent-color:var(--c-orange);cursor:pointer;
}
.hm-sf__onay a{color:var(--c-orange);text-decoration:underline;}

.hm-sf__ipucu{
    margin:5px 0 0;
    font-size:12px;line-height:1.5;color:var(--c-muted);
}
.hm-sf__hata-metin{
    margin:5px 0 0;
    font-size:12px;font-weight:600;color:#C62828;
}
.hm-sf__alan.is-hata .hm-sf__girdi,
.hm-sf__alan.is-hata .hm-sf__sec{border-color:#E53935;}


/* =========================================================================
   6) BUTONLAR
   ========================================================================= */
.hm-sf__btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:13px 22px;
    border:1.5px solid transparent;border-radius:var(--r-md);
    font-family:var(--font);font-size:14.5px;font-weight:700;
    letter-spacing:-.01em;line-height:1;
    text-decoration:none!important;cursor:pointer;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .08s ease;
}
.hm-sf__btn:active{transform:translateY(1px);}
.hm-sf__btn svg{width:17px;height:17px;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.hm-sf__btn--ana{background:var(--c-orange);color:#fff!important;}
.hm-sf__btn--ana:hover{background:#E84B18;}

.hm-sf__btn--ikincil{background:#fff;border-color:var(--c-border);color:var(--c-slate)!important;}
.hm-sf__btn--ikincil:hover{border-color:var(--c-orange);color:var(--c-orange)!important;}

.hm-sf__btn--wa{background:var(--c-wa);color:#fff!important;}
.hm-sf__btn--wa:hover{filter:brightness(.94);}

.hm-sf__btn--sade{background:transparent;color:var(--c-muted)!important;padding:10px 12px;min-height:auto;}
.hm-sf__btn--sade:hover{color:var(--c-orange)!important;}

.hm-sf__btn--tehlike{background:#fff;border-color:#F1C6C2;color:#C62828!important;}
.hm-sf__btn--tehlike:hover{background:#FDF3F2;border-color:#E53935;}

.hm-sf__btn--tam{width:100%;}
.hm-sf__btn--kucuk{min-height:38px;padding:9px 14px;font-size:13px;}
.hm-sf__btn[disabled],
.hm-sf__btn.is-pasif{opacity:.5;pointer-events:none;}

.hm-sf__btnler{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}


/* =========================================================================
   7) UYARI / BILGI KUTUSU
   ========================================================================= */
.hm-sf__uyari{
    display:flex;align-items:flex-start;gap:11px;
    padding:13px 15px;
    border:1px solid;border-radius:var(--r-md);
    font-size:13.5px;line-height:1.55;font-weight:500;
}
.hm-sf__uyari strong{display:block;margin-bottom:2px;font-weight:800;}
.hm-sf__uyari svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.hm-sf__uyari--bilgi{background:#F1F6FA;border-color:#D3E2EE;color:#31576F;}
.hm-sf__uyari--basari{background:#F0F8F4;border-color:#CDE7DA;color:#1F6B4A;}
.hm-sf__uyari--dikkat{background:#FFF7EF;border-color:#F7DFC6;color:#8A5320;}
.hm-sf__uyari--hata{background:#FDF3F2;border-color:#F1C6C2;color:#A5231C;}


/* =========================================================================
   8) TABLO — Sepetim, Banka Hesaplari, Siparis Durumu
   Masaustunde normal tablo; mobilde satirlar karta donusuyor.
   Mobil donusum icin her <td>'ye data-bas="Baslik" verilmeli.
   ========================================================================= */
.hm-sf__tablokap{width:100%;}
.hm-sf__tablo{
    width:100%;border-collapse:separate;border-spacing:0;
    font-size:14px;
}
.hm-sf__tablo th{
    padding:11px 14px;
    background:#F7F8F9;
    border-bottom:1px solid var(--c-border);
    font-size:11.5px;font-weight:800;color:var(--c-muted);
    text-transform:uppercase;letter-spacing:.04em;text-align:left;
    white-space:nowrap;
}
.hm-sf__tablo th:first-child{border-radius:var(--r-md) 0 0 0;}
.hm-sf__tablo th:last-child{border-radius:0 var(--r-md) 0 0;}
.hm-sf__tablo td{
    padding:14px;
    border-bottom:1px solid var(--c-border);
    color:var(--c-text);vertical-align:middle;
}
.hm-sf__tablo tr:last-child td{border-bottom:0;}
.hm-sf__tablo .sag{text-align:right;}
.hm-sf__tablo .orta{text-align:center;}
.hm-sf__tablo .tutar{font-weight:800;color:var(--c-slate);white-space:nowrap;}
.hm-sf__tablo .urunad{font-weight:700;color:var(--c-slate);line-height:1.4;}
.hm-sf__tablo .urunalt{
    margin-top:3px;font-size:12px;font-weight:500;color:var(--c-muted);line-height:1.5;
}


/* =========================================================================
   9) ADET SECICI — Sepetim
   Urun sayfasindakiyle ayni davranis, kucuk boy.
   ========================================================================= */
.hm-sf__adet{
    display:inline-flex;align-items:center;
    border:1.5px solid var(--c-border);border-radius:var(--r-md);
    overflow:hidden;background:#fff;
}
.hm-sf__adet button{
    width:34px;height:40px;
    background:none;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--c-slate);
    transition:background .14s ease,color .14s ease;
}
.hm-sf__adet button:hover{background:#F3F5F6;color:var(--c-orange);}
.hm-sf__adet button svg{width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:2.4;stroke-linecap:round;}
.hm-sf__adet span{
    min-width:34px;text-align:center;
    font-size:14.5px;font-weight:800;color:var(--c-slate);
    font-variant-numeric:tabular-nums;
}


/* =========================================================================
   10) OZET KUTUSU — Sepetim sag sutunu
   ========================================================================= */
.hm-sf__ozet{
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
    padding:var(--s3);
}
.hm-sf__ozet h2{
    margin:0 0 var(--s2)!important;
    font-size:16px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__ozet-sat{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:9px 0;
    font-size:13.5px;color:var(--c-muted);
}
.hm-sf__ozet-sat b{font-weight:700;color:var(--c-slate);font-variant-numeric:tabular-nums;}
.hm-sf__ozet-cizgi{height:1px;background:var(--c-border);margin:var(--s1) 0;}
.hm-sf__ozet-top{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:var(--s1) 0 var(--s2);
    font-size:14px;font-weight:700;color:var(--c-slate);
}
.hm-sf__ozet-top strong{
    font-size:23px;font-weight:800;color:var(--c-orange);
    letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.hm-sf__ozet-not{
    margin:var(--s2) 0 0;
    font-size:12px;line-height:1.55;color:var(--c-muted);
}


/* =========================================================================
   11) BOS DURUM — Favoriler bos, Sepet bos, Sonuc yok
   ========================================================================= */
.hm-sf__bos{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:var(--s7) var(--s3);
    background:#FAFBFB;border:1px solid var(--c-border);border-radius:var(--r-lg);
}
.hm-sf__bos-ik{
    display:flex;align-items:center;justify-content:center;
    width:64px;height:64px;margin-bottom:var(--s2);
    background:rgba(253,87,34,.09);border-radius:var(--r-lg);
}
.hm-sf__bos-ik svg{width:28px;height:28px;
    fill:none;stroke:var(--c-orange);stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;}
.hm-sf__bos h2{
    margin:0 0 6px!important;
    font-size:18px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__bos p{
    margin:0 0 var(--s3);
    max-width:44ch;
    font-size:13.5px;line-height:1.6;color:var(--c-muted);
}


/* =========================================================================
   12) AKORDIYON — Gizlilik, SSS, Siparis detayi
   <details>/<summary>, JS yok. Icerik DOM'da durdugu icin SEO etkilenmez.
   SSS'de FAQPage semasiyla birlikte kullanilacak.
   ========================================================================= */
.hm-sf__akr{width:100%;}
.hm-sf__ak{margin-bottom:10px;width:100%;}
.hm-sf__ak-bas{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 18px;
    background:#F5F7F8;border-radius:var(--r-md);
    font-size:14.5px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
    line-height:1.4;
    cursor:pointer;list-style:none;
    transition:background .18s ease,color .18s ease,border-radius .18s ease;
}
.hm-sf__ak-bas::-webkit-details-marker{display:none;}
.hm-sf__ak-bas:hover{background:#EFF1F3;}
.hm-sf__ak-bas svg{
    width:18px;height:18px;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s ease;
}
.hm-sf__ak[open] > .hm-sf__ak-bas{
    background:var(--c-orange);color:#fff;
    border-radius:var(--r-md) var(--r-md) 0 0;
}
.hm-sf__ak[open] > .hm-sf__ak-bas svg{transform:rotate(180deg);}
.hm-sf__ak-bas:focus-visible{outline:2px solid var(--c-orange);outline-offset:-2px;}
.hm-sf__ak-ic{
    padding:var(--s3) 18px var(--s4);
    background:#fff;
    border:1px solid var(--c-border);border-top:0;
    border-radius:0 0 var(--r-md) var(--r-md);
    font-size:14px;line-height:1.7;color:#5A6773;
}
.hm-sf__ak-ic > *:first-child{margin-top:0;}
.hm-sf__ak-ic > *:last-child{margin-bottom:0;}
.hm-sf__ak-ic p{margin:0 0 var(--s2);}
.hm-sf__ak-ic ul,
.hm-sf__ak-ic ol{margin:0 0 var(--s2);padding-left:20px;}
.hm-sf__ak-ic li{margin-bottom:5px;}
.hm-sf__ak-ic a{color:var(--c-orange);text-decoration:underline;}


/* =========================================================================
   13) BILGI SATIRLARI — Banka Hesaplari, Iletisim
   Ikon + baslik + deger; kopyalanabilir alan.
   ========================================================================= */
.hm-sf__bilgi{display:grid;gap:var(--s2);}
.hm-sf__bilgi-o{
    display:flex;align-items:flex-start;gap:13px;
    padding:var(--s2);
    background:#FAFBFB;border:1px solid var(--c-border);border-radius:var(--r-md);
}
.hm-sf__bilgi-ik{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:0 0 auto;
    background:rgba(253,87,34,.09);border-radius:var(--r-md);
}
.hm-sf__bilgi-ik svg{width:19px;height:19px;
    fill:none;stroke:var(--c-orange);stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;}
.hm-sf__bilgi-tx{min-width:0;flex:1 1 auto;}
.hm-sf__bilgi-tx b{
    display:block;margin-bottom:2px;
    font-size:13px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__bilgi-tx span{
    display:block;
    font-size:13.5px;line-height:1.55;color:var(--c-muted);
    word-break:break-word;
}
.hm-sf__iban{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:14px;font-weight:600;color:var(--c-slate);
    letter-spacing:.04em;
}
.hm-sf__kopyala{
    flex:0 0 auto;
    padding:7px 12px;
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-sm);
    font-family:var(--font);font-size:12px;font-weight:700;color:var(--c-slate);
    cursor:pointer;
    transition:border-color .16s ease,color .16s ease;
}
.hm-sf__kopyala:hover{border-color:var(--c-orange);color:var(--c-orange);}
.hm-sf__kopyala.is-ok{border-color:var(--c-wa);color:var(--c-wa);}


/* =========================================================================
   14) ADIM GOSTERGESI — Sepet → Teslimat → Odeme
   ========================================================================= */
.hm-sf__adimlar{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    margin-bottom:var(--s3);
}
.hm-sf__adimlar li{
    display:flex;align-items:center;gap:8px;
    list-style:none;
    font-size:13px;font-weight:700;color:var(--c-muted);
}
.hm-sf__adimlar li::after{
    content:'';width:5px;height:5px;
    border-top:1.5px solid #C4CBD2;border-right:1.5px solid #C4CBD2;
    transform:rotate(45deg);margin-left:6px;
}
.hm-sf__adimlar li:last-child::after{display:none;}
.hm-sf__adimlar li b{
    display:flex;align-items:center;justify-content:center;
    width:22px;height:22px;
    background:#E9ECEF;color:#8A96A0;
    border-radius:var(--r-pill);font-size:11.5px;font-weight:800;
}
.hm-sf__adimlar li.is-aktif{color:var(--c-slate);}
.hm-sf__adimlar li.is-aktif b{background:var(--c-orange);color:#fff;}
.hm-sf__adimlar li.is-bitti b{background:var(--c-wa);color:#fff;}


/* =========================================================================
   15) URUN SATIRI — Sepetim ve Favoriler'de ortak
   ========================================================================= */
.hm-sf__usat{
    display:grid;
    grid-template-columns:76px minmax(0,1fr) auto;
    gap:14px;align-items:center;
}
.hm-sf__usat-gorsel{
    width:76px;height:76px;
    background:#F5F6F7;border:1px solid var(--c-border);border-radius:var(--r-md);
    overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.hm-sf__usat-gorsel img{width:100%;height:100%;object-fit:contain;}
.hm-sf__usat-ad{
    font-size:14px;font-weight:700;color:var(--c-slate);line-height:1.4;
    text-decoration:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hm-sf__usat-ad:hover{color:var(--c-orange);}
.hm-sf__usat-ozet{
    margin-top:4px;
    font-size:12px;line-height:1.5;color:var(--c-muted);
}
.hm-sf__usat-ozet span{font-weight:700;color:#5A6773;}


/* =========================================================================
   16) YARDIMCILAR
   ========================================================================= */
.hm-sf__ayrac{height:1px;background:var(--c-border);margin:var(--s3) 0;border:0;}
.hm-sf__sil{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md);
    color:var(--c-muted);cursor:pointer;
    transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.hm-sf__sil:hover{border-color:#E53935;color:#C62828;background:#FDF3F2;}
.hm-sf__sil svg{width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.hm-sf__rozet{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;border-radius:var(--r-pill);
    font-size:11.5px;font-weight:800;letter-spacing:.01em;
}
.hm-sf__rozet--bekliyor{background:#FFF3E4;color:#8A5320;}
.hm-sf__rozet--hazir{background:#EAF4FB;color:#31576F;}
.hm-sf__rozet--yolda{background:#F0F8F4;color:#1F6B4A;}
.hm-sf__rozet--iptal{background:#FDF0EF;color:#A5231C;}

.hm-sf__link{color:var(--c-orange);font-weight:700;text-decoration:none;font-size:13.5px;}
.hm-sf__link:hover{text-decoration:underline;}


/* =========================================================================
   17) MOBIL
   ========================================================================= */
@media (max-width: 991px){
    .hm-sf__ikili{grid-template-columns:minmax(0,1fr);gap:var(--s3);}
    .hm-sf__yan{position:static;}
}

@media (max-width: 767px){
    .hm-sf__head{padding:var(--s3) 0 var(--s2);}
    .hm-sf__h1{font-size:22px;}
    .hm-sf__h2{font-size:17px;}
    .hm-sf__lead{font-size:13.5px;}

    .hm-sf__kart{padding:var(--s2);border-radius:var(--r-md);}
    .hm-sf__ozet{padding:var(--s2);border-radius:var(--r-md);}
    .hm-sf__satir{grid-template-columns:minmax(0,1fr);}

    .hm-sf__btn{width:100%;}
    .hm-sf__btn--kucuk,
    .hm-sf__btn--sade{width:auto;}
    .hm-sf__btnler{gap:8px;}
    .hm-sf__btnler .hm-sf__btn{flex:1 1 100%;}

    /* tablo -> kart:  her <td> data-bas="Baslik" tasimali */
    .hm-sf__tablo,
    .hm-sf__tablo tbody,
    .hm-sf__tablo tr,
    .hm-sf__tablo td{display:block;width:100%;}
    .hm-sf__tablo thead{display:none;}
    .hm-sf__tablo tr{
        margin-bottom:12px;padding:var(--s2);
        border:1px solid var(--c-border);border-radius:var(--r-md);background:#fff;
    }
    .hm-sf__tablo td{
        display:flex;align-items:center;justify-content:space-between;gap:12px;
        padding:8px 0;border-bottom:1px solid #F0F2F4;text-align:left!important;
    }
    .hm-sf__tablo tr td:last-child{border-bottom:0;padding-bottom:0;}
    .hm-sf__tablo tr td:first-child{padding-top:0;}
    .hm-sf__tablo td::before{
        content:attr(data-bas);
        flex:0 0 auto;
        font-size:11.5px;font-weight:800;color:var(--c-muted);
        text-transform:uppercase;letter-spacing:.04em;
    }
    .hm-sf__tablo td:empty{display:none;}
    /* etiketi istemedigimiz hucreler (urun adi, sil butonu) */
    .hm-sf__tablo td.hm-sf__tam-hucre{display:block;}
    .hm-sf__tablo td.hm-sf__tam-hucre::before,
    .hm-sf__tablo td.hm-sf__bassiz::before{display:none;}
    .hm-sf__tablo td.hm-sf__bassiz{justify-content:flex-end;}

    .hm-sf__usat{grid-template-columns:64px minmax(0,1fr);row-gap:10px;}
    .hm-sf__usat-gorsel{width:64px;height:64px;}
    .hm-sf__usat > *:nth-child(3){grid-column:1 / -1;}

    .hm-sf__bos{padding:var(--s5) var(--s2);}
    .hm-sf__bos-ik{width:54px;height:54px;}
    .hm-sf__bos-ik svg{width:24px;height:24px;}

    .hm-sf__ak-bas{padding:13px 14px;font-size:13.5px;}
    .hm-sf__ak-ic{padding:var(--s2) 14px var(--s3);font-size:13.5px;}

    .hm-sf__bilgi-o{padding:12px;gap:11px;}
    .hm-sf__adimlar{font-size:12px;gap:6px;}
    .hm-sf__adimlar li{font-size:12px;}
}

@media (max-width: 380px){
    .hm-sf__h1{font-size:20px;}
    .hm-sf__usat{grid-template-columns:56px minmax(0,1fr);}
    .hm-sf__usat-gorsel{width:56px;height:56px;}
}

@media (prefers-reduced-motion: reduce){
    .hm-sf__btn,.hm-sf__ak-bas svg,.hm-sf__girdi,.hm-sf__sec,
    .hm-sf__sil,.hm-sf__kopyala{transition:none;}
}


/* =========================================================================
   18) FATURA TIPI ANAHTARI — Bireysel / Kurumsal
   -------------------------------------------------------------------------
   ESKI HATANIN KAYNAGI: TC Kimlik alani "teslimat adresim farkli" kutusuna
   baglanmisti. Bunlar BAGIMSIZ iki eksen:
     A) Fatura tipi (bireysel/kurumsal) -> TC mi VKN mi
     B) Teslimat adresi farkli mi        -> ikinci adres blogu acilsin mi
   Burada sadece A ekseni var. B ekseni ayri bir onay kutusu.

   DIKKAT — PHP tarafinda yapilmasi gereken:
   Gizlenen alanlar hala formda duruyor. required kalirsa tarayici
   "gorunmeyen alan doldurulmali" diyip formu kilitler. Sayfa JS'i,
   secili olmayan grubun input'larina disabled + required kaldirma
   uygulamali. Sunucu tarafinda da fatura_tipi'ne gore dogrulama sart —
   istemciye guvenilmez.
   ========================================================================= */
.hm-sf__segment{
    display:inline-flex;align-items:center;gap:4px;
    padding:4px;margin-bottom:var(--s2);
    background:#F2F4F5;border-radius:var(--r-md);
}
.hm-sf__segment input{
    position:absolute!important;width:1px!important;height:1px!important;
    opacity:0;pointer-events:none;margin:0;
}
.hm-sf__segment label{
    display:flex;align-items:center;gap:7px;
    padding:9px 18px;
    border-radius:var(--r-sm);
    font-size:13.5px;font-weight:700;color:var(--c-muted);
    cursor:pointer;user-select:none;white-space:nowrap;
    transition:background .16s ease,color .16s ease;
}
.hm-sf__segment label svg{width:16px;height:16px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hm-sf__segment input:checked + label{
    background:#fff;color:var(--c-slate);
    box-shadow:0 1px 3px rgba(37,61,78,.12);
}
.hm-sf__segment input:focus-visible + label{outline:2px solid var(--c-orange);outline-offset:2px;}

/* secime gore alan grubu ac/kapa — :has() ile, JS'siz gorsel katman.
   required/disabled yonetimi yine de JS ile yapilacak (yukarida). */
.hm-sf__fatura:has(input[value="bireysel"]:checked) .hm-sf__grup--kurumsal,
.hm-sf__fatura:has(input[value="kurumsal"]:checked) .hm-sf__grup--bireysel{display:none;}
.hm-sf__grup{display:grid;gap:var(--s2);}


/* =========================================================================
   19) ADRES BLOGU + TESLIMAT KOSULLARI
   Levha urunlerinde adres tek basina yetmiyor: kamyon girisi, indirme
   imkani ve saat araligi teslimat basarisini dogrudan etkiliyor.
   ========================================================================= */
.hm-sf__adres{display:grid;gap:var(--s2);}
.hm-sf__adres--ucizgi{grid-template-columns:repeat(3,minmax(0,1fr));}
.hm-sf__teslimat{
    margin-top:var(--s2);padding:var(--s2);
    background:#FAFBFB;border:1px solid var(--c-border);border-radius:var(--r-md);
}
.hm-sf__teslimat > b{
    display:block;margin-bottom:10px;
    font-size:12.5px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__teslimat .hm-sf__onay{margin-bottom:9px;}
.hm-sf__teslimat .hm-sf__onay:last-child{margin-bottom:0;}


/* =========================================================================
   20) SECIM KARTLARI — Uye ol / Misafir devam
   Misafir secenegi GIZLENMIYOR (karanlik desen olur, donusumu de dusurur);
   sadece ikincil plana aliniyor.
   ========================================================================= */
.hm-sf__secimler{display:grid;gap:var(--s2);}
.hm-sf__secim{
    display:block;
    padding:var(--s3);
    background:#fff;border:1.5px solid var(--c-border);border-radius:var(--r-lg);
    text-decoration:none;
    transition:border-color .16s ease,box-shadow .16s ease;
}
.hm-sf__secim:hover{border-color:#C4CBD2;}
.hm-sf__secim--one{border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(253,87,34,.09);}
.hm-sf__secim h3{
    margin:0 0 5px!important;
    font-size:16px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__secim p{margin:0 0 var(--s2);font-size:13.5px;line-height:1.6;color:var(--c-muted);}
.hm-sf__secim--sade{
    padding:var(--s2);border-style:dashed;background:#FAFBFB;
}
.hm-sf__secim--sade h3{font-size:14.5px;}
.hm-sf__secim--sade p{margin-bottom:12px;font-size:13px;}

/* fayda listesi — B2B'ye ozel, genel "kolay takip" degil */
.hm-sf__fayda{margin:0 0 var(--s2);padding:0;list-style:none;display:grid;gap:9px;}
.hm-sf__fayda li{
    display:flex;align-items:flex-start;gap:9px;
    font-size:13.5px;line-height:1.5;color:#5A6773;
}
.hm-sf__fayda svg{
    width:17px;height:17px;flex:0 0 auto;margin-top:1px;
    fill:none;stroke:var(--c-wa);stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;
}


/* =========================================================================
   21) SOSYAL GIRIS — Google
   Facebook onerilmiyor (isletme dogrulamasi + video anlatimli uygulama
   incelemesi gerekiyor, B2B'de getirisi yuku karsilamiyor).
   Buton Google marka kurallarina uygun: beyaz zemin, resmi G logosu.
   ========================================================================= */
.hm-sf__sosyal{display:grid;gap:10px;}
.hm-sf__google{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;min-height:48px;padding:12px 18px;
    background:#fff;border:1.5px solid #DADCE0;border-radius:var(--r-md);
    font-family:var(--font);font-size:14.5px;font-weight:700;color:#3C4043;
    text-decoration:none;cursor:pointer;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hm-sf__google:hover{background:#F8F9FA;border-color:#C6C9CD;box-shadow:0 1px 3px rgba(60,64,67,.12);}
.hm-sf__google svg{width:19px;height:19px;flex:0 0 auto;}

.hm-sf__veya{
    display:flex;align-items:center;gap:14px;
    margin:var(--s2) 0;
    font-size:12px;font-weight:700;color:var(--c-muted);
    text-transform:uppercase;letter-spacing:.06em;
}
.hm-sf__veya::before,
.hm-sf__veya::after{content:'';flex:1 1 auto;height:1px;background:var(--c-border);}


/* =========================================================================
   22) SIFRE ALANI — goster/gizle
   ========================================================================= */
.hm-sf__sifre{position:relative;}
.hm-sf__sifre .hm-sf__girdi{padding-right:48px;}
.hm-sf__sifre-goz{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:none;border:0;border-radius:var(--r-sm);
    color:var(--c-muted);cursor:pointer;
}
.hm-sf__sifre-goz:hover{background:#F3F5F6;color:var(--c-slate);}
.hm-sf__sifre-goz svg{width:18px;height:18px;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}


/* =========================================================================
   23) SOZLESME ONAYLARI
   Mevzuat IKI AYRI onay istiyor: On Bilgilendirme Formu ve Mesafeli
   Satis Sozlesmesi. Tek kutuda birlestirilmiyor.
   Olcuye kesim urunlerde cayma hakki istisnasi da burada belirtiliyor.
   ========================================================================= */
.hm-sf__sozlesme{
    display:grid;gap:11px;
    padding:var(--s2);
    background:#FAFBFB;border:1px solid var(--c-border);border-radius:var(--r-md);
}
.hm-sf__sozlesme .hm-sf__onay{font-size:13px;}
.hm-sf__sozlesme .hm-sf__onay.is-hata{color:#C62828;}
.hm-sf__sozlesme .hm-sf__onay.is-hata input{outline:2px solid #E53935;outline-offset:2px;}


/* =========================================================================
   24) KARGO IBARESI
   Ucretsiz kargo YOK; bedel teslimatta aliciya ait. Surpriz olmamasi icin
   urun sayfasi, sepet ozeti ve odeme adiminda ayni ifade gorunuyor.
   ========================================================================= */
.hm-sf__kargonot{
    display:flex;align-items:flex-start;gap:10px;
    padding:12px 14px;
    background:#FFF7EF;border:1px solid #F7DFC6;border-radius:var(--r-md);
    font-size:13px;line-height:1.55;color:#8A5320;
}
.hm-sf__kargonot svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hm-sf__kargonot b{font-weight:800;}
.hm-sf__ozet-sat .alici{font-weight:700;color:#8A5320;}


/* =========================================================================
   25) SIPARIS SONRASI HESAP OLUSTURMA
   Bilgiler zaten girilmis; tek alan kaliyor. Kayit oranini en cok
   artiran kalip bu.
   ========================================================================= */
.hm-sf__sonrahesap{
    display:grid;gap:12px;
    padding:var(--s3);
    background:linear-gradient(180deg,#FFF6F2 0%,#FFFFFF 100%);
    border:1.5px solid #F7D3C4;border-radius:var(--r-lg);
}
.hm-sf__sonrahesap h3{
    margin:0!important;
    font-size:16px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__sonrahesap p{margin:0;font-size:13.5px;line-height:1.6;color:#6B7783;}
.hm-sf__sonrahesap .hm-sf__satir{grid-template-columns:minmax(0,1fr) auto;align-items:end;}


/* --- 18-25 arasi bilesenlerin mobil davranisi --------------------------- */
@media (max-width: 767px){
    .hm-sf__segment{display:grid;grid-template-columns:1fr 1fr;width:100%;}
    .hm-sf__segment label{justify-content:center;padding:11px 12px;}
    .hm-sf__adres--ucizgi{grid-template-columns:minmax(0,1fr);}
    .hm-sf__secim{padding:var(--s2);}
    .hm-sf__sonrahesap{padding:var(--s2);}
    .hm-sf__sonrahesap .hm-sf__satir{grid-template-columns:minmax(0,1fr);}
}


/* =========================================================================
   26) HESABIM PANOSU — sol menu + sag icerik
   Eski yapi Bootstrap tab'lariydi; mobilde menu dikey uzuyor ve secili
   sekme belli olmuyordu. Grid + yatay kaydirmali menu.
   ========================================================================= */
.hm-sf__pano{
    display:grid;grid-template-columns:236px minmax(0,1fr);
    gap:var(--s4);align-items:start;
}
.hm-sf__pano-menu{
    display:grid;gap:4px;
    padding:var(--s1);margin:0;list-style:none;
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
}
.hm-sf__pano-menu a{
    display:flex;align-items:center;gap:10px;
    padding:11px 13px;border-radius:var(--r-md);
    font-size:13.5px;font-weight:700;color:#5A6773;
    text-decoration:none;white-space:nowrap;
    transition:background .16s ease,color .16s ease;
}
.hm-sf__pano-menu a svg{width:17px;height:17px;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hm-sf__pano-menu a:hover{background:#F4F6F7;color:var(--c-slate);}
.hm-sf__pano-menu a.is-aktif{background:var(--c-orange);color:#fff;}
.hm-sf__pano-menu a.is-cikis{color:#C62828;}
.hm-sf__pano-menu a.is-cikis:hover{background:#FDF3F2;}


/* =========================================================================
   27) SIPARIS KARTI — Hesabim > Siparislerim
   Eski hali Bootstrap accordion + ic ice iki tablo idi. Burada <details>
   ve tanim listesi kullaniliyor: JS yok, mobilde bozulmuyor.
   ========================================================================= */
.hm-sf__siparisler{display:grid;gap:12px;}
.hm-sf__siparis{
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
    overflow:hidden;
}
.hm-sf__siparis-bas{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 18px;
    cursor:pointer;list-style:none;
    transition:background .16s ease;
}
.hm-sf__siparis-bas::-webkit-details-marker{display:none;}
.hm-sf__siparis-bas:hover{background:#FAFBFB;}
.hm-sf__siparis-sol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0;}
.hm-sf__siparis-no{
    font-size:14.5px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}
.hm-sf__siparis-tarih{font-size:12.5px;font-weight:500;color:var(--c-muted);}
.hm-sf__siparis-tut{
    font-size:15px;font-weight:800;color:var(--c-orange);
    font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hm-sf__siparis-ok{
    width:18px;height:18px;flex:0 0 auto;
    fill:none;stroke:var(--c-muted);stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s ease;
}
.hm-sf__siparis[open] .hm-sf__siparis-bas{background:#FAFBFB;border-bottom:1px solid var(--c-border);}
.hm-sf__siparis[open] .hm-sf__siparis-ok{transform:rotate(180deg);}
.hm-sf__siparis-ic{padding:var(--s3) 18px;}

/* siparis detay bilgileri: etiket + deger */
.hm-sf__kunye{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 16px;margin:0;}
.hm-sf__kunye dt{
    font-size:12px;font-weight:800;color:var(--c-muted);
    text-transform:uppercase;letter-spacing:.03em;line-height:1.5;
}
.hm-sf__kunye dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--c-text);}
.hm-sf__kunye dd b{color:var(--c-slate);font-weight:700;}


/* =========================================================================
   28) SIPARIS DURUMU ZAMAN CIZELGESI
   "Siparişim ne durumda" sayfasi tek satir metin donduruyordu.
   ========================================================================= */
.hm-sf__zaman{margin:0;padding:0;list-style:none;display:grid;gap:0;}
.hm-sf__zaman li{
    position:relative;
    padding:0 0 var(--s3) 34px;
    font-size:13.5px;line-height:1.5;color:var(--c-muted);
}
.hm-sf__zaman li:last-child{padding-bottom:0;}
.hm-sf__zaman li::before{
    content:'';position:absolute;left:0;top:2px;
    width:18px;height:18px;border-radius:var(--r-pill);
    background:#fff;border:2px solid #D8DDE1;
}
.hm-sf__zaman li::after{
    content:'';position:absolute;left:8px;top:20px;bottom:0;
    width:2px;background:#E5E8EB;
}
.hm-sf__zaman li:last-child::after{display:none;}
.hm-sf__zaman li b{display:block;font-size:14px;font-weight:800;color:var(--c-slate);margin-bottom:2px;}
.hm-sf__zaman li.is-bitti::before{background:var(--c-wa);border-color:var(--c-wa);}
.hm-sf__zaman li.is-bitti::after{background:var(--c-wa);}
.hm-sf__zaman li.is-aktif::before{
    background:var(--c-orange);border-color:var(--c-orange);
    box-shadow:0 0 0 4px rgba(253,87,34,.15);
}
.hm-sf__zaman li.is-aktif{color:var(--c-text);}

.hm-sf__takip{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin-top:var(--s2);padding:13px 15px;
    background:#F1F6FA;border:1px solid #D3E2EE;border-radius:var(--r-md);
    font-size:13.5px;color:#31576F;
}
.hm-sf__takip b{font-weight:800;}
.hm-sf__takip code{
    padding:3px 9px;background:#fff;border:1px solid #D3E2EE;border-radius:var(--r-sm);
    font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;color:#1F3D52;
    letter-spacing:.03em;
}


/* =========================================================================
   29) BANKA HESAP KARTI
   Eski hali blog kartiydi: buyuk gorsel + baslik + aciklama. IBAN
   aciklama metninin icinde kayboluyordu ve kopyalanamiyordu.
   ========================================================================= */
.hm-sf__bankalar{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);
}
.hm-sf__banka{
    display:grid;gap:12px;
    padding:var(--s3);
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
}
.hm-sf__banka-ust{display:flex;align-items:center;gap:12px;}
.hm-sf__banka-logo{
    width:52px;height:52px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:#F5F6F7;border:1px solid var(--c-border);border-radius:var(--r-md);
    overflow:hidden;
}
.hm-sf__banka-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.hm-sf__banka-ad{
    font-size:15px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
    line-height:1.35;min-width:0;
}
.hm-sf__banka-satir{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 13px;
    background:#FAFBFB;border:1px solid var(--c-border);border-radius:var(--r-md);
}
.hm-sf__banka-satir > div{min-width:0;}
.hm-sf__banka-satir small{
    display:block;margin-bottom:2px;
    font-size:11px;font-weight:800;color:var(--c-muted);
    text-transform:uppercase;letter-spacing:.04em;
}


/* =========================================================================
   30) SONUC SAYFALARI — siparis alindi / odeme alinamadi
   Eski hali 25px inline stilli <center> bloklariydi.
   ========================================================================= */
.hm-sf__sonuc{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    max-width:620px;margin:0 auto;
    padding:var(--s6) var(--s3);
}
.hm-sf__sonuc-ik{
    display:flex;align-items:center;justify-content:center;
    width:76px;height:76px;margin-bottom:var(--s3);
    border-radius:var(--r-pill);
}
.hm-sf__sonuc-ik svg{width:36px;height:36px;
    fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;}
.hm-sf__sonuc--ok .hm-sf__sonuc-ik{background:rgba(47,158,139,.12);color:var(--c-wa);}
.hm-sf__sonuc--hata .hm-sf__sonuc-ik{background:rgba(229,57,53,.10);color:#C62828;}
.hm-sf__sonuc h1{
    margin:0 0 8px!important;
    font-size:24px;font-weight:800;color:var(--c-slate);letter-spacing:-.02em;
}
.hm-sf__sonuc > p{
    margin:0 0 var(--s3);max-width:52ch;
    font-size:14.5px;line-height:1.65;color:var(--c-muted);
}
.hm-sf__sonuc-kutu{
    width:100%;display:grid;gap:10px;
    padding:var(--s3);margin-bottom:var(--s3);
    background:#FAFBFB;border:1px solid var(--c-border);border-radius:var(--r-lg);
}
.hm-sf__sonuc-sat{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    font-size:13.5px;color:var(--c-muted);text-align:left;
}
.hm-sf__sonuc-sat b{
    font-size:15px;font-weight:800;color:var(--c-slate);
    font-variant-numeric:tabular-nums;
}
.hm-sf__sonuc-sat b.tutar{color:var(--c-orange);font-size:19px;}


/* --- 26-30 arasi mobil -------------------------------------------------- */
@media (max-width: 991px){
    .hm-sf__pano{grid-template-columns:minmax(0,1fr);}
    .hm-sf__pano-menu{
        display:flex;overflow-x:auto;gap:6px;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .hm-sf__pano-menu::-webkit-scrollbar{display:none;}
    .hm-sf__pano-menu a{flex:0 0 auto;}
    .hm-sf__bankalar{grid-template-columns:minmax(0,1fr);}
}

@media (max-width: 767px){
    .hm-sf__siparis-bas{padding:13px 14px;flex-wrap:wrap;}
    .hm-sf__siparis-ic{padding:var(--s2) 14px var(--s3);}
    .hm-sf__siparis-sol{gap:4px 10px;}
    .hm-sf__siparis-no{font-size:13.5px;}
    .hm-sf__kunye{grid-template-columns:minmax(0,1fr);gap:2px;}
    .hm-sf__kunye dt{margin-top:10px;}
    .hm-sf__kunye dd{margin-bottom:2px;}
    .hm-sf__banka{padding:var(--s2);}
    .hm-sf__sonuc{padding:var(--s5) var(--s2);}
    .hm-sf__sonuc h1{font-size:20px;}
    .hm-sf__sonuc-ik{width:64px;height:64px;}
    .hm-sf__sonuc-ik svg{width:30px;height:30px;}
    .hm-sf__zaman li{padding-left:30px;}
}