/* ===== ToptanMarket public website ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background: #ffffff;
}

/* ===== Scroll bar gizli — scroll çalışır, bar görünmez ===== */
html {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* eski Edge/IE */
}

::-webkit-scrollbar {
    display: none;              /* Chrome/Edge/Safari */
}

/* ===== İçerik genişliği — ortalanmış sabit container ===== */
.site-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Üst bar (ince çizgi) ===== */
.site-topbar {
    height: 40px;
    background: linear-gradient(90deg, #7c3aed 0%, #ec4899 50%, #ef4444 100%);
    font-family: 'Outfit', sans-serif;
    color: #ffffff;
}

.site-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-topbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 24px;
}

.site-topbar-link {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.site-topbar-link:hover {
    opacity: 0.8;
}

/* Numara ile sosyal ikonlar arası boşluk, WA ikonu↔numara boşluğunun (8px) 2 katı (16px)
   → "iletişim" grubu ile sosyal grup görsel olarak ayrışır. */
.site-topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* WhatsApp glyph'i kendi 24x24 viewBox'ının içinde ~2px içeriden (kutunun ~%83'ü); sosyal
   ikonlar viewBox'ı tam dolduruyor. Çizili boyut EŞİT görünsün diye WA kutusu ~%20 büyük
   (22 ≈ 18 / 0.83) → çizili glyph ≈ 18px = sosyal ikonlarla aynı. */
.site-topbar-wa {
    width: 22px;
    height: 22px;
    color: #ffffff;
    flex-shrink: 0;
}

.site-topbar-phone {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
}

/* WhatsApp numarası tıklanınca wa.me'ye gider; ikon + numara birlikte tek link. */
.site-topbar-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 0.15s ease;
}
.site-topbar-wa-link[hidden] {
    display: none;
}
.site-topbar-wa-link:hover {
    opacity: 0.8;
}

/* Kayıtlı sosyal medya ikonları — telefon numarasının sağında. */
.site-topbar-socials {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
/* Hiç sosyal link yoksa kap boş kalır; flex öğesi olarak durunca parent'ın gap'i telefonun
   sağında boşluk yapar → boşken akıştan çıkar. */
.site-topbar-socials:empty {
    display: none;
}
.site-topbar-soc {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    transition: opacity 0.15s ease;
}
.site-topbar-soc svg {
    width: 18px;
    height: 18px;
}
.site-topbar-soc:hover {
    opacity: 0.8;
}

/* ===== Header (logo + search + sepet) ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 300;
    background: #ffffff;
    /* Alt border yalnız scroll'da görünür (en üstte transparent → 1px korunur, layout kaymaz).
       .scrolled class'ı website.js scroll'da ekler/kaldırır. */
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    border-bottom-color: #ececf2;
}

/* Anasayfa dışındaki sayfalarda header altında mor şerit yok → header alt border'ı HER ZAMAN
   görünür (scroll'a bağlı değil). Anasayfa (body.site-home) mevcut scroll davranışını korur. */
body:not(.site-home) .site-header {
    border-bottom-color: #ececf2;
}

.site-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 70px;
}

/* Logo — Market default mor (#6c63ff) */
.site-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-logo-accent {
    color: #6c63ff;
}

/* Search — birleşik buton (referans: .cd-eml-group). KAPSAYICIDA BORDER YOK;
   border'lar segmentlerde, mor buton border'ını kendi bg rengiyle alır. Hepsi 31px. */
.site-search {
    position: relative;   /* arama sonuç dropdown'unun (.site-search-menu) konumlandığı referans */
    display: flex;
    align-items: stretch;
    height: 40px;
    box-sizing: border-box;
    border-radius: 20px;
    background: transparent;
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Outfit', sans-serif;
}

/* Arama sonuç dropdown'u: input'a yazınca eşleşen ürünler (thumb + ad + kod). Lang menüsüyle
   aynı görsel dil (beyaz kart, 1.5px border, radius 10, gölge). */
.site-search-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    overflow-y: auto;
    max-height: 360px;
    z-index: 300;
    font-family: 'Outfit', sans-serif;
}

.site-search.search-open .site-search-menu {
    display: flex;
}

.site-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

.site-search-item:hover,
.site-search-item.active {
    background: #f1f3f5;
}

.site-search-item-img {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5fa;
    border-radius: 6px;
    overflow: hidden;
}

.site-search-item-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.site-search-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-search-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-search-item-code {
    font-size: 11px;
    color: #a0a0b0;
    line-height: 1;
}

.site-search-empty {
    padding: 12px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: #a0a0b0;
}

.site-search-input {
    flex: 1;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px 0 18px;
    border: 1.5px solid #e0e0e8;
    border-right: none;
    border-radius: 20px 0 0 20px;
    font-size: 13px;
    line-height: 1;
    font-family: inherit;
    background: #ffffff;
    color: #1a1a2e;
    outline: none;
    min-width: 0;
}

.site-search-input::placeholder {
    color: #a0a0b0;
}

.site-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    box-sizing: border-box;
    padding: 0 18px 0 14px;
    border: 1.5px solid #6c63ff;
    border-radius: 0 20px 20px 0;
    background: #6c63ff;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.site-search-btn:hover {
    background: #5a52d5;
    border-color: #5a52d5;
}

.site-search-btn svg {
    width: 16px;
    height: 16px;
}

/* Sepet + adet rozeti (şimdilik işlevsiz, görsel) */
.site-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    text-decoration: none;
    flex-shrink: 0;
}

.site-cart svg {
    width: 24px;
    height: 24px;
}

.site-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #6c63ff;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* Sepet + profil grubu (sağ uçta). Profil sağda, sepet onun solunda. */
.site-account {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* Giriş yapılmışken profil ikonuna tıklayınca açılan menü (müşteri adı + çıkış). */
.site-profile-menu {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #ffffff;
    border: 1.5px solid #e0e0e8;
    border-radius: 0 0 10px 10px;
    z-index: 200;
    font-family: 'Outfit', sans-serif;
    /* Üst kenar header'ın altına sabit; içerik aşağı doğru açılır (header'ın üstüne taşmaz). */
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    /* KAPANIŞ: yalnız opacity solar; clip-path/visibility sıfırlaması opacity bitene kadar
       geciktirilir → yukarı toplanma (header altındaki anlık şerit) görünmez, flash yok. */
    transition: opacity 0.15s ease, clip-path 0s linear 0.15s, visibility 0s linear 0.15s;
}

.site-account.profile-open .site-profile-menu {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
    /* AÇILIŞ: header altından aşağı doğru reveal + fade (gecikmesiz). */
    transition: opacity 0.18s ease, clip-path 0.22s ease, visibility 0s;
}

/* Scroll'da header'ın alt çizgisi (#ececf2) çıkınca dropdown'un üst border'ı kalkar → çift çizgi
   olmaz, dropdown header çizgisinin altına flush oturur. En üstte (çizgi yokken) üst border durur. */
.site-header.scrolled .site-profile-menu {
    border-top: none;
}

/* Anasayfa dışındaki sayfalarda header alt border'ı zaten HER ZAMAN var → dropdown'un üst border'ı
   normalde de (scroll'a bakılmaksızın) kaldırılır; çift çizgi olmadan header çizgisine flush oturur. */
body:not(.site-home) .site-profile-menu {
    border-top: none;
}

.site-profile-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
    text-align: left;
    word-break: break-word;
    padding: 8px 12px 6px;
}

/* Menü satırı — projedeki dropdown menü konvansiyonu (site-lang-option): ikon + metin satırı. */
.site-profile-item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: none;
    color: #1a1a2e;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}

.site-profile-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.site-profile-item:hover {
    background: #f1f3f5;
}

/* Çıkış — projedeki logout konvansiyonu kırmızı (#dc3545); dolu buton yerine kırmızı yazılı satır. */
.site-profile-logout {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: none;
    color: #dc3545;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}

.site-profile-logout svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.site-profile-logout:hover {
    background: #fbe9e7;
}

/* Profil ikonunun sağındaki müşteri adı (girişten sonra JS hidden class'ını kaldırır). */
.site-profile-username {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #1a1a2e;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-profile-username-hidden {
    display: none;
}

/* Profil ikonu — sepetle aynı görsel ölçek (24px ikon, aynı renk). */
.site-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #1a1a2e;
    text-decoration: none;
    flex-shrink: 0;
}

.site-profile svg {
    width: 24px;
    height: 24px;
}

/* ===== Giris / Kayit popup =====
   Kartin gorseli admin login ile birebir: admin-login-card + login / form / btn-login
   siniflari login.css ten gelir. Buradaki kurallar yalnizca overlay (dim + ortalama) ve
   uzun kayit formu icin scroll icindir. */
.lp-overlay {
    /* Kapalıyken display:none → akışta yer kaplamaz, asla görünmez (opacity/visibility'e
       göre daha sağlam). Açıkken JS .lp-open ekler → tam ekran sabit, ortalanmış. */
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: 'Outfit', sans-serif;
}

.lp-overlay.lp-open {
    display: flex;
}

/* Uzun kayıt formunda kart taşmasın diye dikey scroll (scrollbar gizli — landing geneliyle aynı). */
.lp-overlay .admin-login-card {
    width: 480px;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Kayıt 2. aşaması 90vh'yi az da olsa aştığı için popup'ın dikey iç boşluğunu (48px) kıs →
   içerik sığar, ufak scroll oluşmaz. Yalnızca popup'a scope'lu; admin login etkilenmez. */
.lp-overlay .admin-login-card .login-content {
    padding-top: 30px;
    padding-bottom: 30px;
}

.lp-overlay .admin-login-card::-webkit-scrollbar {
    display: none;
}

/* "Beni Hatırla" ile "Şifremi Unuttum" tam hizada. NOT: login.css'teki
   .login-form .remember-me (2 class) ile eşit specificity'de kalmamak için selektörler
   3 class'a çıkarıldı; aksi halde login.css sonra yüklendiğinden display'i ezip hizayı bozuyordu.
   Her iki öğe de 16px yükseklikte, içeriği dikeyde ortalı flex kutu → metinler aynı satırda. */
.lp-overlay .login-form .form-options {
    display: flex;
    align-items: center;
}

.lp-overlay .login-form .form-options > .remember-me,
.lp-overlay .login-form .form-options > .forgot-password {
    display: inline-flex;
    align-items: center;
    height: 16px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.lp-overlay .login-form .form-options .remember-me input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* ===== Dil seçici dropdown (header'da sepetin solunda; 3 dil) =====
   Sistemin default dropdown'u (aq-sort) ile birebir: toggle 31px, gap 6px,
   padding 0 12px, icon 14px, menü box-shadow + overflow hidden, option 8px 14px. */
.site-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
}

.site-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 31px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    background: #ffffff;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.site-lang-toggle:hover {
    border-color: #6c63ff;
}

/* Genişlik JS ile en uzun dile sabitlenir → seçim değişince dalgalanmaz (rule #6) */
.site-lang-label {
    display: inline-block;
    text-align: left;
}

.site-lang-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #565e6b;
    transition: transform 0.2s ease;
}

.site-lang.open .site-lang-chevron {
    transform: rotate(180deg);
}

.site-lang-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    display: none;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    z-index: 200;
}

.site-lang.open .site-lang-menu {
    display: flex;
}

.site-lang-option {
    padding: 8px 14px;
    border: none;
    background: none;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.site-lang-option:hover {
    background: #f1f3f5;
}

.site-lang-option.active {
    color: #6c63ff;
    font-weight: 600;
}

/* ===== Özellik şeridi (lacivert -> mor gradient) ===== */
.site-features {
    background: linear-gradient(90deg, #1a1a3e 0%, #6c63ff 100%);
    color: #ffffff;
}

.site-features-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    height: 44px;
}

.site-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
}

.site-feature svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== Ürün grupları (görsel üstte, ad altta; hover'da görsel yukarı kalkar) ===== */
.site-groups {
    padding: 32px 0;
}

.site-groups-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 16px;
}

.site-group-card {
    width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-group-img-wrap {
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flash önleme (rule 20): görsel /api/products/{syUk}/image'dan geliyor → gelmeden GÖSTERME.
   Görsel yüklenirken tarayıcı alt metnini link rengiyle (mavi) basıyordu = "önce mavi grup adı,
   sonra görsel" flash'ı. .site-group-img-wrap 104x104 alanı rezerve ettiği için (visibility,
   display değil) hiçbir şey kaymaz. website.js görseller hazır olunca .is-loading'i kaldırır. */
.site-groups-grid.is-loading .site-group-img {
    visibility: hidden;
}

.site-group-img {
    width: 104px;
    height: 104px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 10px;
    display: block;
    transition: transform 0.3s ease;
}

.site-group-card:hover .site-group-img {
    transform: translateY(-6px);
}

.site-group-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #1a1a2e;
    text-align: center;
}

/* ===== Öne çıkan ürünler (sol 1 büyük 50% + sağ 2x2 dört kutu 50%) ===== */
.site-promos {
    padding: 0 0 40px;
}

.promo-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* sol 50%, sağ iki sütun 25%+25% (genişlik responsive) */
    /* Yükseklik SABİT: 172+172+16gap = 360 (büyük kutu) / 172 (küçük). Üründen ürüne, boş-dolu,
       ad uzunluğuna göre DEĞİŞMEZ (1fr auto iken içerik yüksekliği oynatıyordu). */
    grid-template-rows: 172px 172px;
    gap: 16px;
}

/* Flash önleme: içerik /api/featured/cards yanıtından geliyor → yanıt gelmeden kutuları GÖSTERME.
   Boş kutu + sonradan pop-in metin (BOISSON/fiyat geç gelir, ad zıplar) YASAK (response'u bekle,
   elinde veri varken bas). Grid satır yükseklikleri sabit (360px) → alan zaten rezerve, alt bölümler
   kaymaz. website.js yanıt gelince (veya hata olunca) .is-loading'i kaldırır → kutular tek seferde
   TAM içerikle görünür. */
.promo-grid.is-loading .promo-box {
    visibility: hidden;
}

/* İlk kutu: sol sütun, iki satır boyunca (50% genişlik, tam yükseklik) */
.promo-box:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
}

.promo-box {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
}

/* Her kutu için tonlu gradient (sol alt KOYU -> sağ üst AÇIK; tek renk değil, border yok) */
.promo-box:nth-child(1) { background: linear-gradient(to top right, #ffd6a8, #fff6ec); } /* turuncu */
.promo-box:nth-child(2) { background: linear-gradient(to top right, #c7dbff, #f2f7ff); } /* mavi */
.promo-box:nth-child(3) { background: linear-gradient(to top right, #ffcbdd, #fff2f7); } /* pembe */
.promo-box:nth-child(4) { background: linear-gradient(to top right, #bde6cb, #f0faf3); } /* yeşil */
.promo-box:nth-child(5) { background: linear-gradient(to top right, #d2c4ff, #f6f2ff); } /* mor */

.promo-box-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.promo-box-group {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #565e6b;
    /* Grup adı eskiden ham veriyle (BOISSON) tamamen büyük harfti; çeviri title-case ("İçecekler") olunca
       değişti → görünümü koru. CSS uppercase (JS değil) → data-i18n çevirisi/dil değişimi bozmaz; html
       lang="tr" ile Türkçe-doğru büyütme (i→İ). */
    text-transform: uppercase;
}

.promo-box-name {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
    /* Uzun ad kutu yüksekliğini büyütmesin (yükseklik sabit) → 2 satıra clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-box-price {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #4b5563;
}

.promo-box-btn {
    height: 31px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    margin-top: 4px;
    border: 1.5px solid #6c63ff;
    border-radius: 10px;
    background: #6c63ff;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.promo-box-btn:hover {
    background: #5a52d5;
    border-color: #5a52d5;
}

.promo-box-img {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-box-img img {
    width: 100%;
    height: 120px; /* sabit yükseklik: görsel kutu yüksekliğini değiştirmesin; 4 sağ kutu aynı */
    object-fit: contain;
}

/* Sol büyük kutu görseli daha büyük (yine sabit) */
.promo-box:first-child .promo-box-img img {
    height: 320px;
}

/* ===== Sol büyük kutu — özel düzen (yalnız ilk kutu) ===== */
/* Soldan boşluk artır (yazılar + buton) */
.promo-box:first-child {
    padding-left: 48px;
}

/* Öğeler arası boşluk artır */
.promo-box:first-child .promo-box-info {
    gap: 18px;
}

/* Ürün grubu adına bi tık yakın */
.promo-box:first-child .promo-box-group {
    margin-bottom: -10px;
}

/* Ürün adını büyült + bi tık daha bold */
.promo-box:first-child .promo-box-name {
    font-size: 32px;
    font-weight: 800;
}

/* Fiyat: siyah ama ince */
.promo-box:first-child .promo-box-price {
    color: #1a1a2e;
    font-weight: 300;
}

/* Buton: yüksekliği artır, radius'u azalt, biraz uzat, beyaz + siyah ince yazı
   (NOT: bu kutu için 31px standardından sapar — kullanıcı isteği) */
.promo-box:first-child .promo-box-btn {
    height: 40px;
    border-radius: 8px;
    padding: 0 32px;
    background: #ffffff;
    color: #1a1a2e;
    border: none;
    font-weight: 400;
    margin-top: 14px; /* base 4px + 10px (grubun ada yaklaştığı kadar uzaklaşsın) */
}

/* Hover yok — normal hâliyle aynı (base mor hover'ı nötrle) */
.promo-box:first-child .promo-box-btn:hover {
    background: #ffffff;
    border: none;
}

/* ===== Sağdaki 4 küçük kutu — büyük kutuyla aynı treatment (yalnız font BOYUTLARI küçük kalır);
   İncele butonu yok, kutu tıklanabilir ===== */
.promo-box:not(:first-child) {
    cursor: pointer;
}

.promo-box:not(:first-child) .promo-box-info {
    gap: 18px;
}

/* Ürün grubu adına bi tık yakın (büyük kutuyla aynı) */
.promo-box:not(:first-child) .promo-box-group {
    margin-bottom: -10px;
}

/* Ad bi tık daha bold (büyük kutuyla aynı; boyut base 20px kalır) */
.promo-box:not(:first-child) .promo-box-name {
    font-weight: 800;
}

/* Fiyat siyah + ince (büyük kutuyla aynı; boyut base 18px kalır) */
.promo-box:not(:first-child) .promo-box-price {
    color: #1a1a2e;
    font-weight: 300;
}

/* ===== Bugünün avantajlı ürünleri (7 ürün yan yana; hover yok, sadece cursor pointer) ===== */
.site-deals {
    padding: 0 0 48px;
}

.deals-title {
    margin: 0 0 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a2e;
}

.deals-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

/* Flash önleme (rule 20): kartlar /api/home-products/{bölüm}/cards yanıtından geliyor → yanıt +
   GÖRSELLER hazır olmadan gösterme. Server-side basılan 6 boş kutu alanı rezerve ettiği için
   (visibility, display değil) altındaki bölümler kaymaz. website.js reveal eder (hata dahil). */
.deals-grid.is-loading > * {
    visibility: hidden;
}

.deal-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Görsel alanı: üst + sol + sağ border (alt YOK), sadece üst köşeler yuvarlak */
.deal-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #f1f3f5;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

/* Ad + yıldız + fiyat bölümü — hafif gri (bi tık açık), sadece ALT köşeler yuvarlak */
.deal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(to bottom right, #f1f3f5, #f8f9fa);
    border-radius: 0 0 8px 8px;
    padding: 10px;
}

.deal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: scale(1.2); /* sadece görsel büyür; kutu (deal-img-wrap) sabit kalır */
}

.deal-name {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
}

/* Yıldız + fiyat sol alta sabit (kartlar eşit yükseklikte; ad uzunluğundan etkilenmez) */
.deal-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* Yıldızların SOLUNDAKİ puan yazısı — yıldız kullanılan her yerde aynı (şimdilik sabit 4.9).
   Gri + ince: website'in ikincil metin rengi (#565e6b) + fiyatla aynı incelik (300). */
.deal-score {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
    color: #565e6b;
}

/* 5 yıldız: boş kısım beyaz + altın dolu kısım (genişlik = rating yüzdesi) */
.deal-stars {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.deal-stars::before {
    content: "★★★★★";
    color: #ffffff;
}

.deal-stars::after {
    content: "★★★★★";
    color: #FFAA00;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pct, 90%);
    overflow: hidden;
}

.deal-price {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    color: #1a1a2e;
}

/* Boş slot (admin "İçerik Düzenlemesi → Ürünler"de seçilmemiş) — parçalı (dashed) border kutu,
   İÇERİK YOK (+/label yok). Yükseklik dolu .deal-card ile eşleşsin diye kare görsel alanı (aspect 1/1)
   + info yüksekliği gövdesi; grid stretch satırdaki dolu kartla eşitler. */
.deal-empty {
    display: flex;
    flex-direction: column;
    border: 1.5px dashed #e8e8f0;   /* admin .ce-slot-empty ile birebir (var(--admin-header-border) açık tema) */
    border-radius: 8px;
    background: #fff;
}
.deal-empty-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.deal-empty-body {
    flex: 1;
    min-height: 100px;
}

/* ===== Bannerlar (2 x 50%; cover görsel, solda yazı, soldan sağa fade-out blur) ===== */
.site-banners {
    padding: 0 0 48px;
}

.banners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.banner {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 10px 0; /* sol alt köşe kare: beyaz kutu oraya sharp otursun, görsel sızmasın (köşe zaten kutuyla örtülü) */
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center;
}

.banner-text {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px 26px;
    color: #000000;
    background: #ffffff;
    border-radius: 0 10px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Her satır tek satırda kalsın (büyük fontta sarmasın) */
.banner-line {
    white-space: nowrap;
}

/* Vurgulu kelimeler — default mor */
.banner-hl {
    color: #6c63ff;
}

/* ===== Kullanıcı yorumları (3 kutu; profil dairesi yarısı kutu üstünde; ortadaki bi tık yukarıda) ===== */
.site-testimonials {
    padding: 24px 0 48px;
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 48px; /* üstte taşan avatar yarıları için boşluk */
}

.testi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: linear-gradient(to bottom right, #f8f9fa 0%, #d3d9e0 50%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 54px 24px 28px;
}

/* Ortadaki kutu bi tık yukarıda */
.testi-card:nth-child(2) {
    transform: translateY(-24px);
}

/* Profil dairesi — yarısı kutunun üstünde (top: -42px = yarıçap) */
.testi-avatar {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
}

.testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testi-name {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a2e;
}

/* Puan + yıldızlar tek satırda ortalı (kart içeriği ortalı) */
.testi-rating {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Testimonial yıldızları daha büyük (deals'taki .deal-stars'ı etkilemeden) */
.testi-rating .deal-stars {
    font-size: 22px;
}

/* Büyük yıldızlarla orantılı puan yazısı */
.testi-rating .deal-score {
    font-size: 16px;
}

.testi-quote {
    margin-top: 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #565e6b;
}

/* ===== Referanslarımız (10 kutu, ekranda 7; 3sn'de bir sağa kayar; hover'da ok'lar) ===== */
.site-refs {
    padding: 0 0 48px;
}

.refs-title {
    margin: 0 0 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: #000000;
    text-align: center;
}

.refs-carousel {
    position: relative;
}

/* Görünür pencere — taşan kartları kırpar (yarım kart görünmez) */
.refs-viewport {
    overflow: hidden;
}

/* JS transform ile kaydırılır; sonsuz loop için kartlar baş↔son taşınır */
.refs-track {
    display: flex;
    gap: 12px;
    will-change: transform;
}

/* 7 kutu ekranda: (100% - 6 boşluk) / 7 — kalanlar pencere dışında */
.ref-card {
    flex: 0 0 calc((100% - 6 * 12px) / 7);
    aspect-ratio: 1 / 1;
    background: linear-gradient(to bottom right, #f1f3f5, #f8f9fa);
    border-radius: 10px;
}
/* Admin "Referanslar"dan yüklenen görsel/link (website.js doldurur). Görsel kareyi kaplar, köşeler
   kartla aynı yuvarlaklıkta; link varsa tüm kare tıklanır. */
.ref-card-link {
    display: block;
    width: 100%;
    height: 100%;
}
.ref-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Ok butonları — hover'da belirir; solda ve sağda dikey ortada (ikon-kare 36px) */
.refs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececf2;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a2e;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.refs-carousel:hover .refs-arrow {
    opacity: 1;
}

.refs-arrow svg {
    width: 18px;
    height: 18px;
}

.refs-arrow-left {
    left: 8px;
}

.refs-arrow-right {
    right: 8px;
}

/* Çok daha fazlası — tıklanabilir text link, ortada (şimdilik işlevsiz) */
.refs-more {
    display: block;
    width: fit-content;
    margin: 24px auto 0;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #6c63ff;
    text-decoration: none;
    cursor: pointer;
}

.refs-more:hover {
    text-decoration: underline;
}

/* ===== Palet Görselleri carousel — İş Ortaklarımız (.refs-*) ile BİREBİR; tek fark: ekranda 4 kart
   (7 değil). JS 4'er 4'er kaydırır (website.js). Seçim yoksa bölüm [hidden]. ===== */
.site-pallets {
    padding: 0 0 48px;
}
.pallets-carousel {
    position: relative;
}
.pallets-viewport {
    overflow: hidden;
}
.pallets-track {
    display: flex;
    gap: 16px;
    will-change: transform;
}
/* 4 kart ekranda: (100% - 3 boşluk) / 4 — kalanlar pencere dışında */
.pallet-card {
    flex: 0 0 calc((100% - 3 * 16px) / 4);
    aspect-ratio: 1 / 1;
    background: linear-gradient(to bottom right, #f1f3f5, #f8f9fa);
    border-radius: 10px;
    overflow: hidden;
}
.pallet-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
/* Ok butonları — İş Ortaklarımız (.refs-arrow) ile BİREBİR (hover'da belirir, 36px daire). */
.pallets-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececf2;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a2e;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.pallets-carousel:hover .pallets-arrow {
    opacity: 1;
}
.pallets-arrow svg {
    width: 18px;
    height: 18px;
}
.pallets-arrow-left {
    left: 8px;
}
.pallets-arrow-right {
    right: 8px;
}

/* ===== Sıkça Sorulan Sorular (sol: büyük siyah başlık, sağ: 5 akordeon) ===== */
.site-faq {
    padding: 0 0 48px;
}

.faq-inner {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.faq-title {
    flex: 1 1 0;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 64px;
    font-weight: 200;
    line-height: 1.15;
    color: #000000;
}

.faq-list {
    flex: 1 1 0;
    min-width: 0;
}

.faq-item {
    border-bottom: 1px solid #ececf2;
}

/* Son sorunun altındaki çizgi olmasın */
.faq-item:last-child {
    border-bottom: none;
}

/* Soru satırı — tam genişlik tıklanabilir disclosure başlığı (website ölçeği; 31px kapsamı dışı) */
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1a1a2e;
    text-align: left;
}

.faq-q-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #565e6b;
    transition: transform 0.2s ease;
}

.faq-item.open .faq-q-icon {
    transform: rotate(180deg);
}

/* Açıklama — kapalıyken max-height 0; JS scrollHeight ile açar */
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-a-inner {
    padding: 0 0 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: #565e6b;
}

/* ===== Footer (mor diagonal gradient koyu→orta→açık; başlıklar beyaz, içerik hafif gri) ===== */
.site-footer {
    background: linear-gradient(to bottom right, #2e2766 0%, #4d44a5 50%, #6c63ff 100%);
    color: #ffffff;
    padding: 48px 0;
    font-family: 'Outfit', sans-serif;
}

.site-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-logo {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 16px;
}

.footer-address {
    max-width: 260px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #d3d4df;
    margin-bottom: 20px;
}

.footer-contact {
    display: flex;
    gap: 40px;
}

.footer-contact-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 4px;
}

.footer-contact-value {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.2;
    color: #d3d4df;
}

.footer-cols {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
}

.footer-link {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.2;
    color: #d3d4df;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.footer-link:hover {
    opacity: 0.8;
}

/* ===== Grup sayfası (sol kategori sütunu + sağ ürün şeritleri) ===== */
.gp-section {
    /* Alt padding YOK: footer hemen içeriğin altına gelsin, border footer'a kadar inip
       boşlukta asılı kalmasın. Üst/alt nefes payını footer'ın kendi padding'i sağlar. */
    padding: 32px 0 0;
}

.gp-layout {
    display: flex;
    /* stretch: kısa kolon uzun kolona kadar uzar → sidebar border'ı her zaman footer'a değer
       (sağ içerik uzun olsa bile altta boşlukta asılı kalmaz). */
    align-items: stretch;
    gap: 24px;
}

/* Sol: kategoriler + alt kategoriler (hepsi açık) */
.gp-sidebar {
    flex: 0 0 240px;
    /* Border-right header'dan başlasın: bölümün 32px üst padding'i kadar yukarı çek. Nefes
       payları (üst/alt/sağ) artık dış padding'de DEĞİL, .gp-sidebar-inner scroll kutusunun
       İÇİNDE (böylece scroll alanı dışında boşluk kalmaz — kullanıcı isteği). Border yine
       flex stretch ile footer'a iner; alt padding'e gerek yok (içerik zaten sticky/cap'li). */
    margin-top: -32px;
    border-right: 1px solid #ececf2;
}

/* Favoriler gibi .gp-sidebar-inner sarmalayıcısı OLMAYAN sayfalarda (o sarmalayıcı yalnız grup
   sayfasında JS ile oluşur ve nefes paylarını kendi içinde taşır) eski dış padding'ler korunur —
   yoksa ilk öğe ("Tümü") header'a yapışır. Grup sayfası bu kuralın dışında kalır (inner'ı vardır). */
.gp-sidebar:not(:has(.gp-sidebar-inner)) {
    padding: 32px 24px 32px 0;
}

/* Kategori menüsü sayfa scroll'unda header'ın hemen altında takılı kalsın (uzun ürün listesinde
   yukarıda kaybolmasın). .gp-sidebar stretch kalır (border-right footer'a kadar iner); yalnız
   bu iç blok sticky olur.
   Scroll alanı GÖRÜNEN SAYFANIN İÇİNDE kalsın (footer'a/alt kenara sarkmasın), alt/üst oku dahil.
   Sorun: üst offset scroll durumuna göre DEĞİŞİR — en üstte topbar(40)+header(70)=110px, scroll'da
   yalnız header 70px. Bu yüzden kutu yüksekliği JS ile mevcut konuma göre ayarlanır (website.js
   değil, aşağıdaki inline script → sizeSidebarScroll): her durumda dibi viewport'un 24px üstünde
   biter. Buradaki max-height yalnızca FALLBACK'tir (JS çalışmadan önceki kare / JS kapalı) → en
   kötü duruma (topbar görünür, offset 110) göre güvenli, taşmayı önler.
   top:70 = scroll'da header'ın hemen altına pinlenme. Nefes payları (üst 32 / sağ 24) kutunun
   İÇİNDE padding. İlk item 70+32 = 102px (sağ sütun başlığıyla hizalı). Scrollbar GÖRÜNÜR. */
.gp-sidebar-inner {
    position: sticky;
    top: 70px;
    /* JS (sizeSidebarScroll) gerçek yüksekliği header alt kenarına göre set eder (height, inline).
       Buradaki max-height yalnızca fallback (JS öncesi kare / JS kapalı): sayfa tepesinde üst şerit
       görünürken (offset 110) taşmayı önler, kutu viewport dibine kadar dolar. */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    /* Sol bölümü ne kadar scrollarsan scrolla sayfa kaymasın (scroll zincirleme engellenir). */
    overscroll-behavior: contain;
    padding: 32px 24px 32px 0;
}

.gp-cat {
    /* Grup arası boşluk kısıldı (20→14) → daha çok grup kaydırmadan görünür (kullanıcı isteği). */
    margin-bottom: 14px;
}

/* Son kategorinin alt boşluğu sidebar'ın (ve border'ın) son öğeden sonra uzamasına yol
   açıyordu (flex item = kendi BFC'si → margin dışarı taşmaz). Sıfırla → border tam içerikte biter. */
.gp-cat:last-child {
    margin-bottom: 0;
}

.gp-cat-title {
    /* inline-block → yalnız yazı kadar yer kaplar; satırın boş kısmı tıklanmaz/hover olmaz */
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: #6c63ff;            /* ana kategori: sistem moru */
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 0.25s ease;
}

/* Hover: sistem morundan koyu mora (alt kategorilerdeki gibi yavaş geçişle) */
.gp-cat-title:hover {
    color: #4f46e5;
}

/* Seçili üst kategori: koyu mor (seçili olduğu belli olsun) */
.gp-cat-title.gp-active {
    color: #4f46e5;
}

.gp-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gp-sub {
    /* inline-flex → yalnız ok+yazı kadar yer kaplar; satırın boşu tıklanmaz/hover olmaz */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: #565e6b;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.25s ease, background 0.25s ease;
}

/* Alt kategori solundaki sağa bakan ok */
.gp-sub-arrow {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Hover: gri arka plan yok, sadece yazı mora döner (geçişle) */
.gp-sub:hover {
    color: #6c63ff;
}

/* Seçili alt kategori */
.gp-sub.gp-active {
    background: #eef2ff;
    color: #6c63ff;
}

/* Sağ: ürün şeritleri */
.gp-content {
    flex: 1;
    min-width: 0;
}

.gp-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.gp-product-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Lazy-render sentinel: listeye görünmez şekilde eklenir (kaydırınca sonraki parti tetiklenir).
   Izgara modunda tam satırı kaplar → boş hücre/çizgi bırakmaz; liste modunda 0 yükseklikte görünmez. */
.gp-sentinel {
    grid-column: 1 / -1;
    height: 1px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* Bir ürün satırı: kutu değil, satır satır — altında ince ayraç çizgi.
   margin-left: -24px (kolon boşluğu kadar) → ayraç çizgisi sola, sidebar border'ına kadar
   yapışır; padding-left: 24px ile içerik (görsel) başlık ile aynı hizada kalır. */
.gp-product {
    position: relative;   /* satırdaki favori yıldızının konumlandığı referans (satırın sol üstü) */
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: -24px;
    /* sağ padding 0 → +/- bölümü satır altı border'ının sağ ucuyla hizalı biter */
    padding: 12px 0 12px 24px;
    border-bottom: 1px solid #ececf2;
}

.gp-product:last-child {
    border-bottom: none;
}

/* Seçili kategoride ürün yoksa */
.gp-empty {
    padding: 24px 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #94a3b8;
}

/* Izgara görünümünde: mesaj grid hücresi olup sola yapışmasın — tüm kolonları kapla ve
   grid container'ının margin-left:-24px kaymasını telafi et → satır görünümüyle aynı hizada dur. */
.gp-grid .gp-empty {
    grid-column: 1 / -1;
    padding-left: 28px;
}

.gp-product-img {
    /* Satırda konumlanan referans yıldız DEĞİL bu değil, .gp-product (satır) olsun diye burada
       position YOK; ızgarada yıldız görsele göre konumlansın diye .gp-grid .gp-product-img'e eklenir. */
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Favori yıldızı — HER ZAMAN görünür (hover YOK). Gölge yok, ince border var.
   SATIR görünümünde SATIRIN (.gp-product) sol üst köşesine, IZGARA görünümünde GÖRSELİN
   (.gp-grid .gp-product-img) sol üst köşesine konumlanır. transition top/left'i ANİME ETMEZ →
   görünüm değiştirince yıldız kaymaz/oynamaz. */
.gp-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 1.5px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    cursor: pointer;
    color: #d1d5db;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    /* Satır: referans .gp-product (satır). Satırın sol üst köşesi; sol boşluk = üst boşluk (9px = 9px). */
    top: 9px;
    left: 9px;
    z-index: 2;
}

/* Izgara: referans .gp-grid .gp-product-img (görsel). Görselin sol üstü; sol boşluk = üst boşluk (6px = 6px). */
.gp-grid .gp-fav {
    top: 6px;
    left: 6px;
}

.gp-fav svg {
    width: 14px;
    height: 14px;
}

.gp-fav:active {
    transform: scale(1.3);
}

.gp-fav.gp-fav-active {
    color: #f59e0b;
    background: rgba(255, 255, 255, 0.95);
}

.gp-fav.gp-fav-active svg {
    fill: #f59e0b;
}

.gp-product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gp-product-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gp-product-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
}

/* Ürün kodu — gri, ürün adının sonunda inline */
.gp-product-code {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #a0a0b0;
    margin-left: 6px;
}

/* Sağ grup: fiyat + U/CAR toggle + miktar stepper (mobil sipariş kartı düzeni) */
.gp-product-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Fiyat — mobil sipariş gibi mavi */
.gp-product-price {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #2563eb;
    white-space: nowrap;
}

/* Giriş yapılmadan fiyat + U/CAR yerine gösterilen giriş daveti (login sayfasına link) */
.gp-login-prompt {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #2563eb;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}

.gp-login-prompt:hover {
    text-decoration: underline;
}

/* U/CAR birim toggle — mobil sipariş kartındaki .mq-pc-unit ile birebir.
   Sabit genişlik: U ve CAR aynı eni kaplar → fiyatların sağ kenarı her satırda aynı hizada. */
.gp-unit,
.gp-unit-label {
    flex-shrink: 0;
    display: inline-block;
    width: 46px;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    background: #eef2ff;
    color: #4f46e5;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1.5px solid #c7d2fe;
    line-height: 1.4;
}

.gp-unit {
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.gp-unit:active {
    transform: scale(0.92);
    background: #c7d2fe;
}

/* Miktar +/- stepper — mobil sipariş kartındaki .mq-pc-qty-controls ile birebir */
.gp-qty {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    margin-left: 12px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.gp-qty-minus,
.gp-qty-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: #ffffff;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Outfit', sans-serif;
}

.gp-qty-minus {
    border: 1.5px solid #ececf2;
    border-radius: 10px 0 0 10px;
}

.gp-qty-plus {
    border-left: 1.5px solid #ececf2;
    background: linear-gradient(135deg, #6c63ff, #8b83ff);
    color: #fff;
}

.gp-qty-minus:hover {
    color: #ef4444;
    background: #fef2f2;
}

.gp-qty-minus:active,
.gp-qty-plus:active {
    transform: scale(0.95);
}

.gp-qty-plus:active {
    background: linear-gradient(135deg, #5b52ee, #7a73ee);
}

.gp-qty-value {
    width: 34px;
    height: 28px;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a2e;
    border: none;
    border-top: 1.5px solid #ececf2;
    border-bottom: 1.5px solid #ececf2;
    background: #ffffff;
    padding: 2px 0;
    outline: none;
    -moz-appearance: textfield;
}

.gp-qty-value::-webkit-outer-spin-button,
.gp-qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gp-qty-value:focus {
    background: #f0eeff;
}

/* Miktar > 0 (sepete eklendi): mobil sipariş kartının in-cart durumundan BİREBİR alındı —
   + yeşil gradient + yeşil border, miktar yeşil, − kırmızı, kontrol border'ı yeşil. */
/* (Ürün detay sayfasındaki stepper de aynı sarmalayıcı durumunu kullanır: .pd-qty.gp-in-cart) */
.gp-product.gp-in-cart .gp-qty,
.pd-qty.gp-in-cart .gp-qty {
    border-color: #86efac;
}

.gp-product.gp-in-cart .gp-qty-value,
.pd-qty.gp-in-cart .gp-qty-value {
    color: #166534;
}

.gp-product.gp-in-cart .gp-qty-minus,
.pd-qty.gp-in-cart .gp-qty-minus {
    color: #dc2626;
}

.gp-product.gp-in-cart .gp-qty-plus,
.pd-qty.gp-in-cart .gp-qty-plus {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
}

/* ===== Başlık satırı + görünüm (satır/ızgara) toggle ===== */
.gp-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.gp-content-header .gp-title {
    margin: 0;
}

.gp-view-toggle {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.gp-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #8a8a9a;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.gp-view-btn svg {
    width: 18px;
    height: 18px;
}

.gp-view-btn:hover {
    background: #f1f3f5;
}

.gp-view-btn.active {
    background: #eef2ff;
    color: #6c63ff;
}

/* ===== Izgara görünümü: bitişik hücreler, aralarında boşluk YOK; sadece çizgilerle ayrılır.
   Boşluksuz olduğu için border-radius da yok. Container üst+sol çizgi, her hücre sağ+alt çizgi. ===== */
.gp-product-list.gp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
    /* Sol menüye bitişik: kolon boşluğu (24px) kadar sola çek. Sol çizgi olarak sidebar'ın
       border-right'ı yeterli → grid'in kendi border-left'i yok (çift çizgi/boşluk olmaz). */
    margin-left: -24px;
    /* En üstteki hücrelerin üst border'ı yok; en sağdaki hücrelerin sağ border'ı
       overflow:hidden ile kırpılır (aşağıdaki margin-right:-1px ile birlikte). */
    overflow: hidden;
}

.gp-grid .gp-product {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
    /* Sağ border'ı 1px taşır → son kolonun border'ı kapsayıcının dışına çıkıp kırpılır. */
    margin-right: -1px;
    padding: 12px;
    border: none;
    border-right: 1px solid #ececf2;
    border-bottom: 1px solid #ececf2;
    border-radius: 0;
}

.gp-grid .gp-product-img {
    position: relative;   /* ızgarada favori yıldızı görsele göre konumlanır (görselin sol üstü) */
    flex: none;
    width: 100%;
    /* Kare alan: görsel object-fit:contain ile bu karenin içine sığar (kırpılmaz). */
    aspect-ratio: 1;
    height: auto;
}

.gp-grid .gp-product-main {
    flex: none;
}

/* Alt satır kartın dibine sabit: fiyat+U/CAR sol altta, stepper sağ altta */
.gp-grid .gp-product-right {
    width: 100%;
    margin-top: auto;            /* kartın en altına sabitle (isim kısa olsa da) */
    align-items: flex-end;       /* fiyat/U/CAR ile +/- alta hizalı → altlarındaki boşluk eşit */
    justify-content: flex-start;
    gap: 10px;
}

/* Fiyata sabit en → U/CAR fiyat uzunluğuna göre kaymaz, hep aynı uzaklıkta (satırdaki mantık) */
.gp-grid .gp-product-price {
    min-width: 60px;
}

/* Izgarada kartlar dar → giriş daveti tek satıra sığmayabilir, sarmalamasına izin ver */
.gp-grid .gp-login-prompt,
.deal-card .gp-login-prompt {
    white-space: normal;
}

.gp-grid .gp-qty {
    margin-left: auto;           /* stepper sağ alta sabit */
}

/* ===== Favoriler (grup düzeni) sayfası: footer'ı en alta sabitle ===== */
/* Az ürün olunca içerik kısa kalıp footer yukarıda asılı kalmasın; gp-layout viewport'a kadar uzasın
   (sol menü border'ı da footer'a iner — grup sayfasındaki stretch davranışıyla tutarlı). */
body.gp-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.gp-page .gp-section {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body.gp-page .gp-section > .gp-layout {
    flex: 1 0 auto;
}

body.gp-page .site-footer {
    margin-top: auto;
}

/* ===== Sepet sayfası ===== */
/* Az ürün olsa da footer en alta yapışsın (sayfa içeriği kısa kalınca boşlukta asılı kalmasın). */
body.ct-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.ct-page .ct-section {
    flex: 1 0 auto;
}

body.ct-page .site-footer {
    margin-top: auto;
}

.ct-section {
    padding: 32px 0 0;
}

.ct-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.ct-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 32px;
}

/* Sol: ürünler satır satır (grup sayfası ürün satırıyla aynı düzen) */
.ct-items {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Satırlar grup detayındaki ürün satırıyla aynı (gp-product class'ları yeniden kullanılır) —
   sadece sidebar'a hizalı offset'i (negatif margin + sol padding) sepet düzenine göre sıfırla. */
.ct-items .gp-product {
    margin-left: 0;
    padding: 12px 0;
}

/* Boş sepet: ortada ikon + metin + buton (dikeyde de biraz nefes alsın). */
.ct-empty {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 4px;
    text-align: center;
}

.ct-empty-icon {
    display: inline-flex;
    color: #cbd5e1;
}

.ct-empty-icon svg {
    width: 64px;
    height: 64px;
}

.ct-empty-text {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
}

.ct-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    box-sizing: border-box;
    /* Yazı ile buton arası, ikon ile yazı arasının (16px) 2 katı = 32px (16px gap + 16px). */
    margin-top: 16px;
    padding: 0 18px;
    border: 1.5px solid #6c63ff;
    border-radius: 10px;
    background: #6c63ff;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ct-empty-btn:hover {
    background: #5a52d5;
    border-color: #5a52d5;
}

/* Sağ: özet (ara toplam + kargo + toplam + devam) */
.ct-summary {
    flex: 0 0 320px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #ffffff;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
}

.ct-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a2e;
}

.ct-summary-divider {
    height: 1px;
    background: #ececf2;
}

.ct-summary-total {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Toplam değeri sistem morunda */
.ct-summary-total span:last-child {
    color: #6c63ff;
}

.ct-continue {
    width: 100%;
    height: 31px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    margin-top: 4px;
    border: 1.5px solid #6c63ff;
    border-radius: 10px;
    background: #6c63ff;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ct-continue:hover {
    background: #5a52d5;
    border-color: #5a52d5;
}

/* Minimum sipariş tutarı altında: "Devam" kilitli — tıklanamaz görünür (disabled DEĞİL ki
   hover'da bilgi kutusu tetiklensin — kural 1 / locked-tooltip pattern). Hover'da renk değişmez. */
.ct-continue.ct-locked {
    opacity: 0.6;
    cursor: default;
}

.ct-continue.ct-locked:hover {
    background: #6c63ff;
    border-color: #6c63ff;
}

/* Website bilgi kutusu (tooltip) — admin .admin-tooltip ile birebir (rule 10). */
.site-tooltip {
    position: fixed;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s;
}

/* ===== Giriş/Çıkış bildirimi — sağ altta şerit, sağdan sola kayarak gelir ===== */
.site-toast-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
}

.site-toast {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    font-family: 'Outfit', sans-serif;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-toast-overlay.site-toast-show .site-toast {
    opacity: 1;
    transform: translateX(0);
}

.site-toast-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f7ee;
    color: #16a34a;
}

.site-toast-icon svg {
    width: 18px;
    height: 18px;
}

.site-toast-text {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    text-align: left;
    white-space: nowrap;
}

/* ===== Ürün alım limiti uyarısı — ekran ortasında animasyonlu popup, kendiliğinden kapanır =====
   Sağ alt toast'ın (site-toast / app-toast) yerine: sarı ünlem + "Uyarı" başlığı + açıklama.
   pointer-events:none → arka planla etkileşimi engellemez, süre sonunda kendisi kaybolur. */
.wlw-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
}

.wlw-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 28px;
    max-width: 360px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wlw-overlay.wlw-show .wlw-popup {
    opacity: 1;
    transform: scale(1);
}

.wlw-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef3c7;
    color: #f59e0b;
}

.wlw-icon svg {
    width: 28px;
    height: 28px;
}

/* Başarı varyantı: yeşil tik (uyarıdaki sarı ünlemin yerine). Diğer her şey aynı. */
.wlw-popup.wlw-success .wlw-icon {
    background: #e7f7ee;
    color: #16a34a;
}

.wlw-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}

.wlw-text {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #4a4a6a;
    line-height: 1.45;
}

/* ===== Website: Siparişlerim (geçmiş siparişler) — ilk sürüm, tasarım sonra ===== */
.wo-header {
    margin-bottom: 20px;
}

.wo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Son sipariş satırı ile footer arasında, başlığın üstündeki (gp-section 32px) kadar boşluk. */
    margin-bottom: 32px;
}

/* Satırlar mobile geçmiş siparişler (.oh-*) ile BİREBİR — home.css .oh-card ailesinden
   birebir taşındı (CSS değişkenleri light değerleriyle: --phone-bg #ffffff,
   --header-border #e8e8f0, --content-title-color #1a1a2e, --content-subtitle-color #9a9ab0). */
.wo-card {
    font-family: 'Outfit', sans-serif;
    background: #ffffff;
    border: 1px solid #e8e8f0;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wo-card:hover {
    box-shadow: 0 2px 12px rgba(108, 99, 255, 0.08);
}

.wo-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.wo-card-id {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}

.wo-status {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wo-status-pending { background: #fef3c7; color: #d97706; }
.wo-status-rejected { background: #f8d7da; color: #721c24; }
.wo-status-cancelled { background: #e2e2e8; color: #6b7280; }
.wo-status-shipped { background: #dbeafe; color: #2563eb; }
.wo-status-sent { background: #ffedd5; color: #ea580c; }
.wo-status-in_transit { background: #ffedd5; color: #ea580c; }
.wo-status-completed { background: #dcfce7; color: #16a34a; }
.wo-status-failed { background: #fee2e2; color: #dc2626; }

.wo-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wo-card-date {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: #9a9ab0;
}

.wo-card-total {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #6c63ff;
}

.wo-empty {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: #6b7280;
    text-align: center;
    padding: 48px 0;
}

/* ===== Website: Profilim — mobil profil ekranı (.profile-*) ile BİREBİR; home.css'ten
   birebir taşındı (CSS değişkenleri light değerleriyle: --phone-bg #ffffff,
   --header-border #e8e8f0, --content-title-color #1a1a2e, --content-subtitle-color #9a9ab0,
   --avatar-bg #6c63ff, --avatar-color #ffffff). ===== */
.wp-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 640px;
    width: 100%;
    /* Son kart ile footer arasında, başlığın üstündeki (gp-section 32px) kadar boşluk. */
    margin-bottom: 32px;
}

.wp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.wp-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: #6c63ff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.wp-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wp-page h1.wp-name {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-card {
    width: 100%;
    background: #ffffff;
    border-radius: 14px;
    border: 1.5px solid #e8e8f0;
    overflow: hidden;
}

.wp-card + .wp-card {
    margin-top: 16px;
}

.wp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e8e8f0;
}

.wp-row:last-child {
    border-bottom: none;
}

.wp-label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #9a9ab0;
    flex-shrink: 0;
}

.wp-value {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    text-align: right;
    word-break: break-word;
}

/* ===== Hakkımızda sayfası (About) ===== */
/* Alt-sayfa iskeleti (ct-page/gp-page ile birebir): içerik kısa kalınca footer en alta yapışsın. */
body.ab-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.ab-page .ab-main {
    flex: 1 0 auto;
}

body.ab-page .site-footer {
    margin-top: auto;
}

/* About'ta header altı gri border'ı YOK (band header'a bitişik dursun). Yalnız bu sayfaya özel →
   diğer alt sayfalardaki (body:not(.site-home)) header border'ı korunur. transparent = 1px layout kayması yok. */
body.ab-page .site-header {
    border-bottom-color: transparent;
}

/* Şerit (band): header'ın hemen altında, tam genişlik; MAVİ gradient SOL ÜST (KOYU) → SAĞ ALT (AÇIK).
   Bitiş rengi beyaza DEĞİL, açık maviye gider (İletişim şeridindeki turuncu ile aynı mantık). */
.about-hero {
    background: linear-gradient(to bottom right, #1e6fc9, #a9d1f7);
}

.about-hero-inner {
    display: flex;
    align-items: stretch;   /* görsel band'ın tüm yüksekliğini kaplasın → üstte header'a BİRLEŞİK dursun */
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
    min-height: 320px;   /* MİNİMUM yükseklik — görsel değişse de band KISALMAZ; açıklama uzayınca band metinle birlikte UZAR */
    padding: 0 24px;   /* DİKEY padding YOK → görsel üstte header'a bitişik (site-container yatay padding korunur) */
}

.about-hero-text {
    flex: 1 1 420px;
    min-width: 0;
    padding: 56px 0;   /* içerik üst boşluğu */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* içerik ÜSTE sabit → başlığın konumu satır sayısından etkilenmez */
}

.about-hero-title {
    margin: 0 0 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    /* CSS uppercase (JS değil) → data-i18n çevirisi/dil değişimi bozulmaz; html lang="tr" ile
       Türkçe-doğru büyütme (i→İ). */
    text-transform: uppercase;
}

/* Flash önleme (rule 20): açıklama /api/about yanıtından geliyor → yanıt gelmeden HTML'deki lorem
   default'u gösterme. visibility (display değil) → yer rezerve kalır, metin gelince layout kaymaz. */
.about-hero.is-loading .about-hero-desc {
    visibility: hidden;
}

/* Açıklama: başlıktan (beyaz) bir tık koyu, beyazımsı gri — koyu mavi şerit üzerinde okunur kalır. */
.about-hero-desc {
    margin: 0;
    max-width: 560px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #e8eef6;
}

/* Görsel: header'a BİRLEŞİK (band yüksekliğini kaplar, üstü header'a bitişik) + radius YOK. Genişlik
   sabit; yükseklik band'ı doldurur (align-items: stretch). min-height: dar ekranda alt satıra sarınca
   çökmesin. Görselin intrinsic büyüklüğü/küçüklüğü çerçeveyi değiştirmez (object-fit: cover). */
.about-hero-media {
    position: relative;
    flex: 0 0 440px;
    width: 440px;
    min-height: 320px;
    border-radius: 0;
    overflow: hidden;
}

/* Görsel absolute → intrinsic yüksekliği band'ı BÜYÜTEMEZ → band yüksekliği görselden bağımsız SABİT
   (metin veya min-height 320 belirler; uzun/portre görsel de yüksekliği oynatmaz). */
.about-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mavi bölümün ALTINDAKİ konular (admin "Yeni Konu Ekle"). Konu sayısı kadar satır; görsel
   SOL/SAĞ dönüşümlü — ilk konu SOL (.is-right → row-reverse). Ölçüler eski sabit alt bölümle
   birebir (500×360 görsel, 48px ara, 56px dikey boşluk). */
.about-topics-inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 56px 24px;
}

/* Kayıtlı konu yokken bölüm hiç yer kaplamaz (boş dikey boşluk kalmasın). */
.about-topics-inner:empty {
    padding: 0;
}

.about-topic {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.about-topic.is-right {
    flex-direction: row-reverse;
}

/* Konu görseli: SABİT çerçeve (500×360) — görselin intrinsic boyutu satırı büyütmez/küçültmez. */
.about-topic-media {
    flex: 0 0 500px;
    width: 500px;
    height: 360px;
    border-radius: 4px;
    overflow: hidden;
}

.about-topic-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-topic-text {
    flex: 1 1 420px;
    min-width: 0;
}

.about-topic-title {
    margin: 0 0 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
}

.about-topic-desc {
    margin: 0;
    max-width: 560px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #565e6b;
    white-space: pre-line;   /* admin'de girilen satır sonları korunur */
}

/* ===== İletişim sayfası (/website/contact) ===== */
/* Sayfa iskeleti: Hakkımızda (.ab-page) ile birebir — footer en altta yapışık. */
body.ct-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.ct-page .ct-main {
    flex: 1 0 auto;
}

body.ct-page .site-footer {
    margin-top: auto;
}

/* Hakkımızda'daki gibi: header altı gri border YOK (band header'a bitişik dursun). */
body.ct-page .site-header {
    border-bottom-color: transparent;
}

/* Sepet sayfası da body.ct-page kullanıyor ama band'ı YOK → header altı gri border GÖRÜNÜR
   (diğer alt sayfalarla aynı). .ct-layout yalnız Cart.cshtml'de olduğu için yalnız sepeti hedefler;
   İletişim ve Sipariş Alındı sayfalarının transparent header'ı korunur. */
body.ct-page:has(.ct-layout) .site-header {
    border-bottom-color: #ececf2;
}

/* Şerit (band): Hakkımızda band'ı ile aynı yapı/yükseklik; farkı TURUNCU gradient
   SOL ÜST (KOYU turuncu) → SAĞ ALT (AÇIK turuncu) ve içeriğin ORTALI olması.
   Bitiş rengi beyaza DEĞİL, açık turuncuya gider (kullanıcı isteği). */
.ct-hero {
    background: linear-gradient(to bottom right, #e1730d, #ffc98d);
}

.ct-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Başlık ↔ ikonlar boşluğu, Hakkımızda'daki başlık ↔ açıklama boşluğuyla BİREBİR
       (.about-hero-title margin-bottom: 16px). */
    gap: 16px;
    height: 320px;   /* SABİT — Hakkımızda band'ı ile aynı yükseklik */
    padding: 0 24px;
    text-align: center;
}

/* Font büyüklüğü/ağırlığı Hakkımızda başlığıyla (.about-hero-title) BİREBİR: 40px / 700 / 1.15. */
.ct-hero-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    /* Hakkımızda başlığıyla birebir: CSS uppercase (çeviri/dil değişimi bozulmaz, i→İ doğru). */
    text-transform: uppercase;
}

/* Sosyal medya ikonları — başlığın ALTINDA, ortalı. Admin'de set EDİLMEYEN platform hiç
   eklenmez (website.js), yani burada görünmez. Kayıt yoksa satır tamamen boş kalır. */
.ct-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* İkon rengi = Hakkımızda şerit açıklamasıyla aynı beyazımsı gri (başlıktan bir tık koyu). */
.ct-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e8eef6;
    transition: opacity 0.15s;
}

.ct-soc:hover {
    opacity: 0.7;
}

.ct-soc svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Şeridin altındaki gövde: SOLDA form, SAĞDA 3 kutu — 50/50, aynı hizada başlar/biter. */
.ct-body-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 24px;
    padding: 56px 24px;
}

/* 3 kutu: ALT ALTA (yan yana değil), sağ sütunu tam dolduracak şekilde eşit yükseklikte. */
.ct-cards-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ct-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 46, 0.07);   /* daha şeffaf border */
    border-radius: 10px;
    text-align: center;
    /* Yükseklik SABİT: değer 1/2 satır olsa da kutular eşit; yanıt beklenirken de alan rezerve (rule 20). */
    min-height: 168px;
    box-sizing: border-box;
}

/* Flash önleme (rule 20): değerler /api/site-content/contact yanıtından geliyor → yanıt gelmeden
   kutuları GÖSTERME. min-height + grid alanı rezerve ettiği için altındaki footer kaymaz.
   website.js yanıt gelince (veya hata/boş olunca) .is-loading'i kaldırır → tek seferde TAM görünür. */
.ct-cards-inner.is-loading .ct-card {
    visibility: hidden;
}

/* Büyük ikon — band ile aynı turuncu aileden (sayfa teması). */
.ct-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0912a;
}

.ct-card-icon svg {
    width: 48px;
    height: 48px;
    display: block;
}

.ct-card-value {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #565e6b;
    word-break: break-word;
}

/* Dar ekran: iki sütun alt alta (önce form, sonra kutular). */
@media (max-width: 900px) {
    .ct-body-inner {
        grid-template-columns: 1fr;
    }
}

/* ===== İletişim formu (şeridin altı, SOL sütun) =====
   Ölçüler website form ölçüsü (login/kayıt .form-input ailesi): 48px yükseklik, 15px font,
   1.5px border, 12px radius, #f4f4f8 dolgu. */
.cf-form {
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
}

/* İki alan yan yana; dar ekranda alt alta (aşağıdaki media query). */
.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cf-group {
    margin-bottom: 16px;
}

.cf-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #3a3a4e;
    margin-bottom: 6px;
}

.cf-input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 16px;
    background-color: #f4f4f8;
    border: 1.5px solid #e0e0e8;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    line-height: 1;
    color: #1a1a2e;
    outline: none;
}

.cf-input::placeholder {
    color: #a0a0b0;
}

/* Focus'ta border rengi DEĞİŞMEZ (mor focus border yok — proje kuralı). */

/* Mesaj alanı: input ile aynı dolgu/çerçeve/font; tek farkı çok satırlı olması.
   resize KAPALI — kullanıcı kutuyu büyütünce 50/50 hizası bozulmasın. */
.cf-textarea {
    display: block;
    width: 100%;
    height: 140px;
    box-sizing: border-box;
    padding: 14px 16px;
    background-color: #f4f4f8;
    border: 1.5px solid #e0e0e8;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1a1a2e;
    outline: none;
    resize: none;
}

.cf-textarea::placeholder {
    color: #a0a0b0;
}

/* İşletme tipi dropdown'u: header dil seçicisi (.site-lang) ile aynı yapı, form ölçüsünde. */
.cf-select {
    position: relative;
}

.cf-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 16px;
    background-color: #f4f4f8;
    border: 1.5px solid #e0e0e8;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #1a1a2e;
    text-align: left;
    cursor: pointer;
}

.cf-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Henüz seçim yapılmamış → placeholder rengi (input placeholder'ı ile aynı). */
.cf-select-placeholder {
    color: #a0a0b0;
}

.cf-select-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #565e6b;
    transition: transform 0.2s ease;
}

.cf-select.open .cf-select-chevron {
    transform: rotate(180deg);
}

.cf-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    z-index: 200;
}

.cf-select.open .cf-select-menu {
    display: flex;
}

.cf-select-option {
    padding: 10px 16px;
    border: none;
    background: none;
    color: #1a1a2e;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.cf-select-option:hover {
    background: #f1f3f5;
}

.cf-select-option.active {
    color: #6c63ff;
    font-weight: 600;
}

/* Alan altı doğrulama hatası (native dialog yok — kural 1). Boşken yer kaplamaz. */
.cf-error {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    min-height: 16px;
    margin-top: 4px;
}

.cf-submit {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 16px;
    background-color: #6c63ff;
    color: #ffffff;
    border: 1.5px solid #6c63ff;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cf-submit:hover {
    background-color: #5a52d5;
    border-color: #5a52d5;
}

.cf-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Dar ekran: yan yana alanlar alt alta. */
@media (max-width: 700px) {
    .cf-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ===== Ürün detay sayfası (/website/product/{id}) — solda büyük görsel, sağda ad + açıklama + fiyat.
   İçerik /api/products/{id}/detail yanıtından gelir; görsel alanı sabit kare (yanıt/görsel gelmesi
   düzeni kaydırmaz — rule 20). ===== */
.pd-main {
    padding: 32px 0 48px;
}

.pd-inner {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Büyük görsel çerçevesi — sabit kare (ürün görselinin boyutu kutuyu değiştirmez) */
.pd-media {
    flex: 0 0 480px;
    width: 480px;
    height: 480px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #f1f3f5;
    border-radius: 8px;
}

.pd-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Sağ kolon: ad → açıklama → puan/yıldız → fiyat → miktar (alt alta, bu sırayla).
   align-self: stretch → kolon görselin yüksekliğine uzar; böylece en alta yaslanan +/- stepper
   açıklama uzun/kısa/hiç yok fark etmeksizin HER üründe aynı yerde (görselin alt hizasında) durur. */
.pd-info {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-name {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: #1a1a2e;
}

.pd-desc {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #565e6b;
    white-space: pre-line;   /* AKEAD açıklamasındaki satır sonları korunur */
    word-break: break-word;
}

/* Fiyatın üstündeki 5 yıldız: anasayfa kartlarındaki .deal-rating/.deal-stars aynen kullanılır.
   Tek fark: kartlarda yıldızlar kutunun altına yaslanır (margin-top:auto); burada ad/açıklama ile
   fiyat arasında akışta durmalı → o kural sıfırlanır. */
.pd-info .deal-rating {
    margin-top: 0;
}

/* Detay sayfasında yıldızlar bir tık büyük. Boş kısım: kartlarda zemin renkli olduğu için beyaz
   kalır; burada sayfa zemini beyaz olduğundan 5. yıldızın dolu OLMAYAN yarısı açık gri olmalı ki
   görünsün. */
.pd-rating .deal-stars {
    font-size: 20px;
}

.pd-rating .deal-stars::before {
    color: #d3d4df;
}

/* Fiyat — grup sayfasındaki ürün fiyatıyla aynı mavi */
.pd-price {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #2563eb;
}

/* Fiyatın altındaki miktar +/- stepper — grup sayfasındaki .gp-qty ailesi aynen kullanılır.
   Sarmalayıcı: sütun flex'te esnemesin (align-self) + grup satırındaki sol boşluk burada gereksiz.
   margin-top: auto → kolonun SOL ALTINA yaslanır, açıklama uzunluğuna göre yeri değişmez. */
.pd-qty {
    align-self: flex-start;
    margin-top: auto;
}

.pd-qty .gp-qty {
    margin-left: 0;
}

/* Dar ekran: görsel üstte, bilgiler altta (görsel kutusu genişliğe uyar, kare kalır). */
@media (max-width: 900px) {
    .pd-inner {
        flex-direction: column;
    }

    .pd-media {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}