/* Theme3 ek kurallar — referans şablonun (eglib.css + style_v-4.4.css) sayfa-içi
   <style> bloklarında tanımlı olup merkezi CSS'e taşınan parçalar + bu yazılıma
   özgü (sepet/checkout/sipariş sorgulama gibi referansta karşılığı olmayan)
   birkaç ek bileşen. Tüm renk/aralık değerleri eglib.css :root değişkenleriyle uyumludur. */

/* KRİTİK: font.css `i { font-family: 'eg' !important; }` tanımlıyor — bu, Font Awesome
   (fa-solid/fa-brands/fa-regular) ile yazılan TÜM ikonların (platform markaları, check,
   arrow, xmark, trash, tag, bolt, whatsapp vb.) yanlış/bozuk glyph göstermesine sebep olur.
   Aynı ya da daha yüksek özgüllükte class seçicilerle FA'yı geri kazandırıyoruz. */
i[class*="fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; }
i.fa-solid { font-weight: 900 !important; }
i.fa-regular { font-weight: 400 !important; }
i.fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* eglib.css'te sadece .jc-center var — .jc-between hiç tanımlı değil, birçok satırın
   (sepet/checkout özet satırları, mobil sabit barlar) "yapışık" görünmesinin sebebi buydu. */
.jc-between { justify-content: space-between !important; }

/* Header üstteki bar + nav ile birlikte position:absolute (bkz. style.css `header{position:absolute}`)
   — .intro--page/.intro--service gibi kendi payload-top'u olmayan sayfalarda (ödeme sonucu,
   sipariş alındı) içerik header'ın altına gizlenir. Bu sayfalarda .tz-page-pad kullanılır. */
.tz-page-pad { padding-top: 170px; }
@media (max-width: 768px) {
    .tz-page-pad { padding-top: 100px; }
}

/* Orijinal tasarımda .service--features her zaman büyük bir .poster görselinin ALTINDA yer
   alır ve üstüne -65px ile "biner" (kart-görsel üstüne binme efekti). Bizim ürün sayfamızda
   sahte "X kullanıcı alışveriş yapıyor" görseli/posteri KULLANILMIYOR, dolayısıyla bu negatif
   boşluk .service--detail'i header'ın altına/üstüne çekip görsel çakışmaya sebep oluyordu. */
.service--detail .service--features { margin-top: 0; }

/* .service--detail position:sticky; top:100px kullanıyor — ama header (top--head-area 50px +
   header 80px) masaüstünde toplam 130px yer kaplıyor. 100px < 130px olduğu için sayfa
   kaydırıldığında sidebar header'ın 30px altına/üstüne biniyordu. Header'ın tam yüksekliğini
   güvenli payla aşan bir değere çekiyoruz (mobilde header zaten sadece 80px, sorun yok). */
.service--detail { top: 145px !important; }

/* Masaüstünde header .scrolled class'ı gelene kadar arkaplansız/yarı saydam kalır (position:absolute
   üstünde). Mobilde ise header HER ZAMAN position:fixed (bkz. style.css @media max-width:768px) —
   yani .scrolled durumuna bakılmaksızın, en baştan itibaren altındaki içerik üstünden geçtiğinde
   şeffaf görünüp karman çorman bir görüntü oluşturuyordu. Mobilde header'a koşulsuz opak arkaplan. */
@media (max-width: 768px) {
    header { background: #12131aed; }
}

/* Orijinal tasarımda .intro--well (hero metin bloğu), ≤1024px'te büyük bir arkaplan
   görseli (.intro--image) üzerine "bindirilmek" için position:absolute; bottom:0 olur —
   .main--intro'nun flex akışında görselin kendisi yüksekliği sağlar. Biz o dekoratif
   görseli hiç kullanmadığımız için (gerçek varlığımız yok), tek çocuk mutlak konumlanınca
   #intro'nun yüksekliği 0'a çöküyor ve hemen altındaki #popular-services header'ın
   altına/üstüne biniyordu. Metni normal akışa geri döndürüyoruz. */
@media (max-width: 1024px) {
    .main--intro .intro--well {
        position: static !important;
        bottom: auto !important;
    }
    .intro--well .intro-rate { display: flex !important; }
}

/* #popular-services, .intro--image'ın altına "biniyormuş" gibi görünmesi için ≤600px'te
   -44px negatif margin alıyordu — artık .intro--well normal akışta olduğundan bu boşluk
   gereksiz ve header/hero ile çakışmaya sebep oluyor. Ayrıca gizlenen başlığı geri getiriyoruz. */
@media (max-width: 600px) {
    #popular-services { margin-top: 30px !important; }
    #popular-services .title-heading { display: flex !important; }
}

/* section#intro'nun padding-top'u dar ekranlarda kademeli olarak 90px→35px→15px'e
   iniyor (orijinal tasarımda dekoratif görsel küçüldükçe boşluğa ihtiyaç azalıyordu).
   Ama mobil header her zaman sabit 80px yer kaplıyor — 15px/35px yetmez, hero'nun üst
   kısmı (site-title rozeti) header'ın altında kalıyordu. Header'ı güvenle aşan bir
   taban değer veriyoruz. */
@media (max-width: 768px) {
    section#intro { padding-top: 100px !important; }
}

.hileler-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    position: relative;
    transition: background 0.3s;
    color: #fff;
    background: #ffffff0d;
    border: 1px solid #ffffff29;
}
.hileler-btn i { font-size: 18px; color: var(--main-color); }
.hileler-btn:hover { background: #1f2330; }

/* NOT: .mobile-navbar-button merkezi style.css'te zaten tanımlı (display:none, 3 çizgili
   CSS-only hamburger, ≤1024px'te display:flex olur) — burada tekrar tanımlamıyoruz, aksi
   halde her ekran boyutunda görünür kalır ve masaüstünde header'a bindirir. */

.menu--control .control--area { max-width: 85%; }

.content--navbar i,
.nav-sub-item i {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3c3f57;
    border: none;
    color: #fff;
    font-size: 18px;
    border-radius: 7px;
    margin: 0 5px;
}
.nav-sub-item i { background: var(--main-color); }

.darkbutons { display: flex; gap: 8px; }

.hesap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #ffffff0d;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #ffffff29;
}
.hesap-btn:hover { background-color: var(--main-color); transform: scale(1.05); }

/* Sekme pilleri (paket sayfasındaki fixed-nav deseni, platform.php kategori filtresinde de kullanılır) */
.fixed-nav-wrapper { width: 100%; }
.fixed-nav-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 5px 20px 5px;
    scrollbar-width: none;
}
.fixed-nav-scroll::-webkit-scrollbar { display: none; }
.f-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--soft-text);
    text-decoration: none;
    background: #ffffff0f;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.f-nav-item.active { background: var(--main-color); color: #fff !important; }
.f-nav-item:hover { transform: scale(1.05); }
section:not(.intro--page) .fixed-nav-scroll .f-nav-item { background: var(--bg); color: var(--main-text); }
section:not(.intro--page) .fixed-nav-scroll .f-nav-item.active { background: var(--main-color); color: #fff !important; }

/* Sepet rozeti */
.tz-cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px !important;
    line-height: 18px;
    text-align: center;
}
.tz-cart-badge-sm {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 10px !important;
    line-height: 16px;
    text-align: center;
}

.tz-social-row { display: flex; gap: 8px; margin: 14px 0; }

/* Eksik badge varyantları (StatusLabels sözleşmesi: success/warning/danger/info/orange/muted) */
.badge-info { color: #fff !important; background: var(--primary); font-weight: 500; }
.badge-orange { color: #fff !important; background: var(--main-color); font-weight: 500; }
.badge-muted { color: #fff !important; background: var(--light); font-weight: 500; }

/* Referansta karşılığı olmayan sayfalar (sepet/checkout özet/sipariş sorgulama/statik sayfa/ödeme sonucu)
   için aynı tasarım diliyle (--radius-main, --bg, --soft-text vb.) kart bileşeni */
.tz-card { background: #fff; border-radius: var(--radius-main); border: 1px solid #eef0f4; }
.tz-card-pad { padding: 20px; }

.tz-status-card { max-width: 34rem; margin: 3rem auto; padding: 2.5rem 2rem; text-align: center; background: #fff; border-radius: var(--radius-main); border: 1px solid #eef0f4; }
.tz-status-icon { display: flex; width: 72px; height: 72px; border-radius: 999px; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 1.75rem; color: #fff; }
.tz-status-icon.success { background: var(--success); }
.tz-status-icon.danger { background: var(--danger); }

.tz-alert { padding: 14px 16px; border-radius: var(--radius-main); font-size: 14px; }
.tz-alert-danger { background: #fdeded; color: #b23b3b; }
.tz-alert-warning { background: #fdf6e8; color: #96742a; }

.tz-star-picker { display: flex; gap: 4px; }
.tz-star-picker button { background: none; border: none; font-size: 22px; color: #d8dce6; cursor: pointer; padding: 0; line-height: 1; }
.tz-star-picker button.active { color: var(--main-color); }

.tz-stepper { display: flex; }
.tz-step { flex: 1; position: relative; text-align: center; }
.tz-step-line { position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--bg); z-index: 0; }
.tz-step.done .tz-step-line { background: var(--main-color); }
.tz-step:first-child .tz-step-line { display: none; }
.tz-step-dot { position: relative; z-index: 1; display: flex; width: 28px; height: 28px; border-radius: 999px; background: var(--bg); color: var(--soft-text); align-items: center; justify-content: center; margin: 0 auto; font-size: 12px; font-weight: 700; }
.tz-step.done .tz-step-dot { background: var(--main-color); color: #fff; }
.tz-step-label { display: block; margin-top: 6px; font-size: 11px; color: var(--soft-text); }
.tz-step.done .tz-step-label { color: var(--dark-text); font-weight: 600; }

.tz-qty-stepper { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border-radius: var(--radius-in); padding: 4px 10px; }
.tz-qty-stepper button { background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--main-text); padding: 2px 4px; }
.tz-qty-stepper span { font-weight: 700; min-width: 1.2rem; text-align: center; }

/* Mobilde .bottom--menu (alt navigasyon çubuğu) üstünde sabit duran, tek eylemli "Devam Et"
   tipi barlar için (sepet → ödeme). Masaüstünde hiç gösterilmez, normal akıştaki buton yeterli. */
.tz-mobile-buybar { display: none; }
@media (max-width: 768px) {
    .tz-mobile-buybar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 85px;
        z-index: 90;
        padding: 0 15px;
    }
    /* .tz-mobile-buybar (bottom:85px + ~51px yükseklik) + altındaki .bottom--menu (~69px) sabit
       konumlandığı için, altındaki içerik (ör. sepet özeti kartı) bu barların ARKASINDA kalıp
       görünmez oluyordu. Bu barlar varken sayfanın son bölümüne yeterli alt boşluk veriyoruz. */
    .tz-mobile-buybar-space { padding-bottom: 170px !important; }
}

/* NOT: .intro--pab'ın 100px'lik ekstra alt boşluğuna DOKUNMUYORUZ — #order-step (checkout)
   ve #platform (platform.php) merkezi CSS'te bu boşluğa "binmek" için -70px/-60px margin-top
   kullanıyor (bkz. style.css). Bu boşluğu küçültmek o sayfalarda başlığın beyaz kartın altında
   kalmasına sebep olur. Bunun yerine, kendi negatif margin'i OLMAYAN sayfalarda (sepet, statik
   sayfa, sipariş sorgula) aynı "kart hero'ya biniyor" görünümünü .tz-pull-up-hero ile veriyoruz —
   böylece o sayfalar da kompakt olur ama #order-step/#platform'a dokunulmamış olur. */
.tz-pull-up-hero {
    position: relative;
    z-index: 2;
    margin-top: -60px;
}

/* Referansta merkezi dikey boşluk tanımı olmayan section'lar (article-section, tz-card
   içeren düz section'lar) için tutarlı ritim */
.article-section, section:not([id]):not(.intro--page):not(.intro--service) { padding: 40px 0; }

/* checkout/sepet formlarındaki "grid-column: span 2" inline stili, .md-grid-auto ile
   grid-template-columns:auto'ya (TEK açık sütun) düşen mobil görünümde tarayıcının span
   isteğini karşılamak için GÖRÜNMEZ bir ikinci (implicit) sütun oluşturmasına sebep oluyordu.
   Sonuç: 2. grid öğesi (özet kartı) sadece 1. sütunun genişliğini alıp yarım genişlikte kalıyordu.
   Inline stil yerine bu class kullanılır — aynı breakpoint'te span'i iptal ediyoruz. */
.tz-grid-span-2 { grid-column: span 2; }
@media (max-width: 1024px) {
    .tz-grid-span-2 { grid-column: 1; }
}

/* checkout.html'in kendi sayfa-içi <style> bloğunda tanımlı ödeme yöntemi kartları
   (.order--payment_method .item/.payment-content/.payment-icon/.payment-text) — merkezi
   style_v-4.4.css'te karşılığı yok, burada birebir taşındı. */
.order--payment_method .item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    width: 100%;
    min-height: 64px;
    padding: 5px 20px 5px 10px;
    border: 1px solid #e1e5ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.order--payment_method .item:hover { border-color: var(--main-color); }
.order--payment_method .item.selected { border: 1.5px solid var(--main-color); background: #fff; }
.order--payment_method .payment-content { display: flex !important; align-items: center !important; width: 100%; gap: 9px; }
.order--payment_method .payment-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 9px;
    background: #eef1f5 !important;
    color: #7c849b !important;
    font-size: 20px;
    transition: background-color .2s ease, color .2s ease;
}
.order--payment_method .item.selected .payment-icon { background: var(--main-color) !important; color: #fff !important; }
.order--payment_method .payment-text { display: flex !important; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; text-align: left; }
.order--payment_method .payment-title { display: block; color: #7c849b; font-size: 13px; font-weight: 700; line-height: 1.2; }
.order--payment_method .payment-description { display: block; margin-top: 1px; color: #a0a6b5; font-size: 10px; font-weight: 500; line-height: 1.2; }
.order--payment_method .grid-w100 { grid-column: 1 / -1; }

/* style.css .accordion .item .body varsayılan olarak display:none (jQuery slideToggle bekler);
   burada Alpine x-show'un inline display stiliyle tam kontrol edebilmesi için sıfırlanır. */
.accordion .item .body { display: block; }

/* Gerçek ürün yorumları için (referanstaki sahte müşteri yorumlarının YERİNE, kendi $reviews verimizle) */
.comments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.comment-card { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; padding: 16px; }
.comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-header .avatar { width: 44px; height: 44px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--soft-text); }
.comment-body { color: var(--main-text); font-size: 14px; line-height: 1.5; }