/* ======== 1. GENEL STİLLER VE FONT ======== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

:root {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --color-main-dark: #1E3A5F;
  --color-accent-gold: #D4AF37;
  --color-bg-body: #f8f9fa;
  --color-bg-content: #ffffff;
  --color-text-primary: #333;
  --color-text-secondary: #6c757d;
  --color-border: #dee2e6;
  --color-success: #155724;
  --color-success-bg: #d4edda;
  --color-error: #721c24;
  --color-error-bg: #f8d7da;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.04);
  --header-height: 85px; /* Header yüksekliği için değişken */
}

body {
    font-family: var(--font-body);
    margin: 0;
    background-color: var(--color-bg-body);
    color: var(--color-text-primary);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ======== 2. HEADER (ÜST BİLGİ) VE LOGO ======== */
header {
    background-color: var(--color-bg-content);
    /* padding: 5px 0; */ /* Kaldırıldı, container padding'i yeterli */
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-md);
    height: var(--header-height); /* Sabit yükseklik */
    display: flex; /* Dikey ortalama için */
    align-items: center;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* padding: 5px 0; */ /* Kaldırıldı */
}
.logo { margin: 0; font-size: 1em; }
.logo-link { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 65px; width: auto; margin-right: 15px; } /* Yüksekliğe göre ayarlandı */
.logo-text {
    font-family: var(--font-heading);
    font-size: 1.6em; /* Yüksekliğe göre ayarlandı */
    font-weight: 700;
    color: var(--color-main-dark);
}

/* ======== 3. NAVİGASYON (HEADER SAĞ TARAF) ======== */
.main-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
    margin-left: 30px;
}
.nav-items-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}
.cart-btn {
    background-color: var(--color-main-dark);
    color: white; border: none; padding: 10px 20px; font-size: 1em;
    font-weight: 700; border-radius: 6px; cursor: pointer; position: relative;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-family: var(--font-body); letter-spacing: 0.5px;
}
.cart-btn:hover { background-color: #345a8d; transform: translateY(-1px); }
#cart-count {
    background-color: #e63946; color: white; border-radius: 50%; padding: 2px 7px;
    font-size: 0.8em; position: absolute; top: -8px; right: -8px; font-weight: bold;
    border: 2px solid var(--color-bg-content);
}

/* ======== 4. AÇILIR MENÜLER ======== */
.dropdown { position: relative; display: inline-block; }
.dropdown-button {
    background: none; border: none; font-size: 0.95em; cursor: pointer; padding: 8px 10px;
    display: flex; align-items: center; gap: 5px; transition: color 0.2s ease;
}
.dropdown-button .dropdown-arrow { font-size: 0.8em; margin-left: 2px; }
.dropdown-content {
    display: none; position: absolute; top: 100%; z-index: 10; margin-top: 8px;
    overflow: hidden; min-width: 160px; box-shadow: var(--shadow-lg);
    border-radius: 8px; border: 1px solid var(--color-border); background-color: var(--color-bg-content); /* Arka plan eklendi */
}
.dropdown-content.show { display: block; }
/* Profil & Bildirim */
.profile-dropdown .dropdown-button, .notification-dropdown .dropdown-button { color: #4a5568; }
.profile-dropdown .dropdown-button:hover, .notification-dropdown .dropdown-button:hover { color: var(--color-accent-gold); }
.profile-menu-content, .notification-content { right: 0; left: auto; }
.profile-menu-content { min-width: 220px; }
.notification-content { min-width: 350px; max-width: 400px; }
.profile-menu-header, .notification-header {
    padding: 15px 20px; font-size: 0.95em; font-weight: 700; color: var(--color-main-dark);
    border-bottom: 1px solid var(--color-border); background-color: var(--color-bg-body);
    font-family: var(--font-heading);
}
.notification-header { font-size: 1.1em; }
.profile-menu-content a, .notification-item {
    color: var(--color-text-primary); padding: 12px 20px; text-decoration: none;
    display: flex; align-items: center; font-size: 0.95em; transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}
.notification-item { gap: 15px; }
.profile-menu-content a:last-child, .notification-item:last-child { border-bottom: none; }
.profile-menu-content a i { margin-right: 12px; color: #777; width: 20px; text-align: center; }
.notification-item i { font-size: 1.4em; color: var(--color-main-dark); width: 25px; text-align: center; }
.profile-menu-content a:hover, .notification-item:hover { background-color: #f1f5f9; }
.profile-menu-content a.logout-link { border-top: 1px solid var(--color-border); color: #e63946; }
.profile-menu-content a.logout-link i { color: #e63946; }
.profile-menu-content a.logout-link:hover { background-color: #fdf0f0; }
.notification-item-content { flex-grow: 1; }
.notification-item-content p { margin: 0 0 5px 0; font-size: 0.9em; line-height: 1.4; color: var(--color-text-primary); font-weight: 500; }
.notification-item-content small { font-size: 0.8em; color: #555; }
.notification-item-empty { padding: 25px 20px; text-align: center; color: #555; font-style: normal; font-size: 0.9em; }
.notification-footer {
    display: block; text-align: center; padding: 12px; font-size: 0.9em; font-weight: 700;
    color: var(--color-main-dark); text-decoration: none; background-color: var(--color-bg-body);
    border-top: 1px solid var(--color-border);
}
.notification-footer:hover { background-color: #e2e8f0; }
/* Dil & Para Birimi */
.language-dropdown .dropdown-button, .currency-dropdown .dropdown-button { color: var(--color-text-secondary); font-weight: 700; }
.language-dropdown .dropdown-button:hover, .currency-dropdown .dropdown-button:hover { color: var(--color-accent-gold); }
.language-dropdown .dropdown-content, .currency-dropdown .dropdown-content { left: 0; right: auto; }
.language-dropdown .dropdown-content a, .currency-dropdown .dropdown-content a {
    color: var(--color-text-primary); padding: 10px 15px; text-decoration: none; display: block;
    font-size: 0.9em; transition: all 0.2s ease; white-space: nowrap;
}
.language-dropdown .dropdown-content a:hover, .currency-dropdown .dropdown-content a:hover { background-color: #f1f5f9; color: var(--color-main-dark); }
.language-dropdown .dropdown-content a.active, .currency-dropdown .dropdown-content a.active {
    background-color: var(--color-accent-gold); color: var(--color-main-dark); font-weight: bold;
}
/* Profil İkon & Bildirim Zili */
.profile-btn { padding: 0; font-size: initial; color: initial; }
.profile-pic-nav {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--color-border); transition: border-color 0.2s ease;
}
.profile-btn:hover .profile-pic-nav { border-color: var(--color-accent-gold); }
.profile-btn .fa-user-circle {
    font-size: 1.8em; color: #aaa; width: 38px; height: 38px; transition: color 0.2s ease;
}
.profile-btn:hover .fa-user-circle { color: var(--color-accent-gold); }
.notification-bell { font-size: 1.3em; position: relative; }
.notification-bell .dropdown-arrow { display: none; }
.notification-count {
    position: absolute; top: 2px; right: 2px; background-color: #e63946; color: white;
    font-size: 0.6em; font-weight: 700; width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    border: 2px solid var(--color-bg-content);
}

/* ======== 5. GİRİŞ YAP / KAYIT OL LİNKLERİ ======== */
.auth-link {
    color: var(--color-main-dark); text-decoration: none; font-weight: 700; font-size: 0.95em;
    padding: 8px 10px; border-radius: 6px; transition: background-color 0.2s ease;
}
.auth-link:hover { background-color: #f1f5f9; }
.auth-link.register-link { background-color: #f1f5f9; color: var(--color-main-dark); }
.auth-link.register-link:hover { background-color: #e2e8f0; }

/* ======== 6. BAKİYE (HEADER) ======== */
.balance-display {
    background-color: #e8ecf1; color: var(--color-main-dark); font-weight: bold;
    padding: 8px 15px; border-radius: 6px; font-size: 0.95em; white-space: nowrap;
}

/* ======== 7. ARAMA ÇUBUĞU (HEADER) ======== */
.search-form {
    display: flex; align-items: center; background-color: var(--color-bg-body);
    border-radius: 20px; padding: 5px 5px 5px 15px; flex-grow: 1; max-width: 500px;
    border: 1px solid var(--color-border); transition: box-shadow 0.2s ease;
}
.search-form:focus-within {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); border-color: var(--color-accent-gold);
}
.search-input {
    border: none; background: none; outline: none; flex-grow: 1; font-size: 0.95em;
    color: var(--color-text-primary); font-family: var(--font-body);
}
.search-input::placeholder { color: #888; }
.search-button {
    background-color: var(--color-accent-gold); color: var(--color-main-dark); border: none;
    border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: background-color 0.3s ease; margin-left: 5px;
}
.search-button:hover { background-color: #b99831; }
.search-button i { font-size: 0.9em; }

/* ======== 8. HAMBURGER MENÜ VE MOBİL NAVİGASYON ======== */
.hamburger-menu { display: none; background: none; border: none; font-size: 1.8em; color: var(--color-main-dark); cursor: pointer; padding: 5px; margin-left: auto; }

/* ======== 9. HERO (BAŞLIK) BÖLÜMLERİ ======== */
.hero { text-align: center; padding: 50px 20px; background-color: var(--color-bg-content); }
.hero h1, .hero h2, .hero h3 { font-family: var(--font-heading); font-weight: 700; color: var(--color-main-dark); }
.hero h2 { font-size: 2.5em; font-weight: 300; margin-top: 0; margin-bottom: 15px; }
.hero p { font-size: 1.1em; max-width: 650px; margin: 0 auto 15px auto; color: var(--color-text-secondary); }
.hero.store-hero, .hero.category-hero, .hero.search-hero, .hero.dashboard-hero, .hero.wishlist-hero, .hero.checkout-hero {
     background-color: var(--color-bg-content); border: 1px solid var(--color-border); border-radius: 8px;
     box-shadow: var(--shadow-sm); max-width: 1400px; margin: 30px auto; padding: 25px 30px;
     margin-bottom: 20px; text-align: left;
}
.hero.store-hero h2, .hero.category-hero h2, .hero.search-hero h2, .hero.checkout-hero h1 { font-size: 2em; font-weight: 700; margin-top: 0; margin-bottom: 5px; }
.hero.store-hero p, .hero.category-hero p, .hero.search-hero p, .hero.checkout-hero p { font-size: 1.05em; margin: 0; color: var(--color-text-secondary); max-width: none; }
.hero.search-hero, .hero.store-hero { text-align: left; }
.hero.category-hero, .hero.wishlist-hero, .hero.checkout-hero { text-align: center; }
.hero.checkout-hero { max-width: 900px; }
.hero.dashboard-hero { text-align: center; padding: 30px 35px; margin-bottom: 40px; }
.hero.dashboard-hero h1 { font-size: 1.8em; }
.hero.dashboard-hero p { font-size: 1em; color: #666; }
.store-info { display: flex; align-items: center; gap: 20px; text-align: left; }
.store-pfp img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-border); box-shadow: var(--shadow-sm); }
.store-pfp .fa-user-circle { font-size: 80px; color: #e0e0e0; }
.store-details h2 { font-size: 2em; }
.store-details p { font-size: 1.05em; }

/* ======== 10. KATEGORİ NAVİGASYONU (index.php) ======== */
.category-navigation { padding: 25px 0; background-color: var(--color-bg-content); border-bottom: 1px solid var(--color-border); margin-bottom: 30px; }
.category-nav-title { text-align: center; font-size: 1.5em; font-weight: 700; margin-top: 0; margin-bottom: 20px; color: var(--color-main-dark); font-family: var(--font-heading); }
.category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.category-list a {
    display: block; padding: 7px 16px; background-color: var(--color-bg-body); border: 1px solid var(--color-border);
    border-radius: 20px; color: var(--color-text-secondary); font-size: 0.9em; font-weight: 700;
    text-decoration: none; transition: all 0.3s ease;
}
.category-list a:hover {
    background-color: var(--color-accent-gold); color: var(--color-main-dark); border-color: var(--color-accent-gold);
    transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

/* ======== 11. KENAR ÇUBUĞU (SIDEBAR) VE FİLTRELER ======== */
.main-content-area {
    display: flex;
    gap: 30px;
    padding-top: 30px;
    padding-bottom: 40px;
}
.sidebar { width: 240px; flex-shrink: 0; } /* filter-sidebar kaldırıldı, genel .sidebar */
.filter-widget {
    background-color: var(--color-bg-content); border: 1px solid var(--color-border); border-radius: 8px;
    padding: 20px; margin-bottom: 25px; box-shadow: var(--shadow-sm);
}
.widget-title { font-size: 1.15em; font-weight: 700; margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); color: var(--color-main-dark); font-family: var(--font-heading); }
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li { margin-bottom: 6px; }
.filter-list a { display: block; padding: 8px 12px; color: var(--color-text-secondary); text-decoration: none; border-radius: 5px; transition: all 0.2s ease; font-size: 0.95em; }
.filter-list a:hover { background-color: #f1f5f9; color: var(--color-main-dark); }
.filter-list a.active { background-color: var(--color-main-dark); color: #fff; font-weight: 700; }
/* Fiyat Filtresi */
.price-filter-form {}
.price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.price-inputs .form-group-inline { flex-grow: 1; }
.price-inputs label { display: block; font-size: 0.8em; font-weight: 700; color: #555; margin-bottom: 4px; }
.price-inputs input[type="number"] { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 5px; box-sizing: border-box; font-size: 0.9em; -moz-appearance: textfield; }
.price-inputs input[type="number"]::-webkit-outer-spin-button,
.price-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-separator { font-weight: bold; color: #888; padding-top: 15px; }
.button-filter-price {
    width: 100%; padding: 10px; background-color: var(--color-main-dark); color: white; border: none;
    border-radius: 6px; font-size: 0.95em; font-weight: 700; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; font-family: var(--font-body);
}
.button-filter-price:hover { background-color: #345a8d; transform: translateY(-1px); }

/* ======== 12. ÜRÜN LİSTELEME ALANI (SAĞ TARAF) ======== */
.product-listing-area { flex-grow: 1; min-width: 0; /* İçeriğin daralabilmesi için */ }
.product-listing-area .hero { margin-top: 0; margin-bottom: 25px; }
.product-listing-area .product-section { padding-top: 0; padding-bottom: 0; }
/* Sıralama Dropdown */
.sort-options { margin-bottom: 25px; text-align: right; }
.sort-options label { margin-right: 10px; font-weight: 700; color: #555; font-size: 0.95em; }
.sort-options select {
    padding: 10px 15px; border: 1px solid var(--color-border); border-radius: 6px; background-color: var(--color-bg-content);
    font-size: 0.95em; color: var(--color-text-primary); cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231E3A5F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 15px center; background-size: 10px auto; padding-right: 40px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sort-options select:focus { border-color: var(--color-accent-gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); }
/* Ürün Grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }

/* ======== 13. ÜRÜN KARTI (Product Card) ======== */
.product-card {
    text-align: center; background-color: var(--color-bg-content); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 20px; box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; padding-top: 45px;
    display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.product-link { text-decoration: none; display: block; margin-bottom: 15px; }
.product-link img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    border-radius: 8px; margin-bottom: 15px; border: 1px solid #f0f0f0;
}
.product-link h3 { font-size: 1.3em; font-weight: 700; color: var(--color-main-dark); margin: 0 0 8px 0; font-family: var(--font-heading); transition: color 0.3s ease; }
.product-link:hover h3 { color: var(--color-accent-gold); }
.product-card-details {
    margin-bottom: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;
}
.product-category { margin-bottom: 8px; margin-top: 0; }
.product-category a { display: inline-block; padding: 3px 10px; font-size: 0.8em; font-weight: 700; color: var(--color-main-dark); background-color: #e8ecf1; border: 1px solid #dde2e8; border-radius: 15px; text-decoration: none; transition: all 0.3s ease; text-transform: capitalize; }
.product-category a:hover { background-color: var(--color-accent-gold); color: var(--color-main-dark); border-color: var(--color-accent-gold); }
.product-card-rating { margin-bottom: 8px; min-height: 1.5em; display: flex; align-items: center; justify-content: center; }
.product-card-rating .stars { font-size: 1em; }
.product-card-rating .review-count-card { font-size: 0.8em; }
.product-card .price { font-size: 1.4em; font-weight: 700; color: var(--color-main-dark); margin-bottom: 0; font-family: var(--font-heading); }
.product-card-actions { margin-top: auto; }
.add-to-cart-btn {
    background-color: var(--color-bg-content); color: var(--color-main-dark); border: 2px solid var(--color-main-dark);
    padding: 10px 20px; font-size: 0.95em; font-weight: 700; border-radius: 6px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; font-family: var(--font-body);
    display: block; width: 100%; box-sizing: border-box;
}
.add-to-cart-btn:hover { background-color: var(--color-main-dark); color: white; transform: translateY(-1px); }
.product-vendor { margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--color-border); font-size: 0.9em; color: var(--color-text-secondary); }
.product-vendor a { color: var(--color-accent-gold); font-weight: 700; text-decoration: none; }
.product-vendor a:hover { text-decoration: underline; }

/* ======== 14. FOOTER (ALT BİLGİ) ======== */
.site-footer { background-color: var(--color-main-dark); color: #f1f1f1; padding: 50px 0 20px 0; margin-top: auto; /* Sayfa kısa olsa bile en alta iter */ }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 35px; margin-bottom: 35px; }
.site-footer h4 { font-size: 1.15em; font-weight: 700; color: #fff; border-bottom: 2px solid var(--color-accent-gold); padding-bottom: 8px; display: inline-block; margin-bottom: 15px; font-family: var(--font-heading); }
.site-footer p, .site-footer li { font-size: 0.9em; color: #ddd; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer a { color: #ddd; text-decoration: none; transition: color 0.3s ease; }
.site-footer a:hover { color: var(--color-accent-gold); }
.social-icons a { color: #fff; font-size: 1.4em; margin-right: 15px; transition: color 0.3s ease, transform 0.2s ease; display: inline-block; }
.social-icons a:hover { color: var(--color-accent-gold); transform: scale(1.1); }
.footer-bottom { text-align: center; border-top: 1px solid #345a8d; padding-top: 20px; font-size: 0.85em; color: #aaa; }

/* ======== 15. SEPET YAN PANELİ (AÇILIR) ======== */
.cart-sidebar {
    position: fixed; top: 0; right: -400px; width: 380px; max-width: 90%; height: 100%;
    background-color: var(--color-bg-content); box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1001;
    display: flex; flex-direction: column; border-left: 1px solid var(--color-border);
}
.cart-sidebar.open { right: 0; }
.cart-sidebar h2 { padding: 20px; margin: 0; border-bottom: 1px solid var(--color-border); font-weight: 700; font-family: var(--font-heading); color: var(--color-main-dark); flex-shrink: 0; }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 2.5em; font-weight: 300; color: #888; background: none; border: none; cursor: pointer; line-height: 1; transition: color 0.2s ease; }
.close-btn:hover { color: #000; }
#cart-items { flex-grow: 1; padding: 20px; overflow-y: auto; }
.cart-item { display: flex; margin-bottom: 15px; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; align-items: center; }
.cart-item img { width: 70px; height: 70px; margin-right: 15px; border-radius: 5px; border: 1px solid var(--color-border); object-fit: cover; flex-shrink: 0; }
.cart-item-info { flex-grow: 1; }
.cart-item-info h4 { margin: 0 0 5px 0; font-size: 1em; font-weight: 700; font-family: var(--font-heading); color: var(--color-text-primary); }
.cart-item-info p { margin: 0; font-size: 1em; font-weight: 700; color: var(--color-main-dark); }
.cart-item-qty { display: flex; align-items: center; margin-top: 10px; }
.qty-change { background: #f1f1f1; border: 1px solid #ddd; color: #555; cursor: pointer; width: 28px; height: 28px; font-size: 1.3em; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.2s ease; }
.qty-change:hover { background-color: #e0e0e0; }
.qty-input { width: 40px; text-align: center; margin: 0 5px; border: 1px solid #ccc; border-radius: 4px; height: 28px; padding: 0; -moz-appearance: textfield; font-size: 1em; }
.cart-footer { padding: 20px; border-top: 1px solid var(--color-border); background: var(--color-bg-body); flex-shrink: 0; }
.cart-footer h3 { display: flex; justify-content: space-between; font-size: 1.2em; font-weight: 700; margin: 0 0 15px 0; font-family: var(--font-heading); }
.cart-footer .checkout-btn { background-color: var(--color-main-dark); color: white; border: none; padding: 15px; width: 100%; font-size: 1.1em; font-weight: 700; cursor: pointer; border-radius: 6px; transition: background-color 0.3s ease, transform 0.2s ease; font-family: var(--font-body); }
.cart-footer .checkout-btn:hover:not(:disabled) { background-color: #345a8d; transform: translateY(-1px); }
.cart-footer .checkout-btn:disabled { background-color: #6c757d; cursor: not-allowed; opacity: 0.7; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
.overlay.show { display: block; opacity: 1; }

/* ======== 16. GİRİŞ/KAYIT FORMLARI ======== */
.auth-container { max-width: 450px; margin: 50px auto; padding: 30px 40px; background-color: var(--color-bg-content); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-md); }
.auth-form h2 { text-align: center; font-size: 1.8em; font-weight: 700; margin-top: 0; margin-bottom: 25px; font-family: var(--font-heading); color: var(--color-main-dark); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--color-text-secondary); font-size: 0.9em; }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="url"], /* Site ayarları için eklendi */
.form-group input[type="number"], /* Fiyat/Stok için eklendi */
.form-textarea,
.form-select {
    width: 100%; padding: 12px 15px; border: 1px solid var(--color-border); border-radius: 6px;
    box-sizing: border-box; font-size: 1em; font-family: var(--font-body); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--color-accent-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); outline: none; }
.auth-button { width: 100%; padding: 14px; background-color: var(--color-main-dark); color: white; border: none; border-radius: 6px; font-size: 1.05em; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; font-family: var(--font-body); }
.auth-button:hover:not(:disabled) { background-color: #345a8d; transform: translateY(-1px); }
.auth-switch { text-align: center; margin-top: 25px; font-size: 0.95em; }
.auth-switch a { color: var(--color-accent-gold); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.form-errors, .form-success { padding: 15px 20px; margin-bottom: 20px; border-radius: 6px; border-width: 1px; border-style: solid; display: flex; align-items: center; gap: 10px; }
.form-errors { background-color: var(--color-error-bg); color: var(--color-error); border-color: rgba(114, 28, 36, 0.3); }
.form-success { background-color: var(--color-success-bg); color: var(--color-success); border-color: rgba(21, 87, 36, 0.3); }
.form-errors p, .form-success p { margin: 0; font-weight: 500; }
.form-errors::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f071"; font-size: 1.1em; }
.form-success::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f058"; font-size: 1.1em; }

/* ======== 17. PROFİL GÜNCELLEME FORMU (profile.php) ======== */
.current-profile-pic { text-align: center; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--color-border); }
.current-profile-pic label { font-weight: 700; color: #555; margin-bottom: 15px; font-size: 1.1em; }
.profile-pic-preview { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #f0f0f0; box-shadow: var(--shadow-sm); }
.default-pic-preview { font-size: 120px; color: #ddd; }
.file-input { width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 6px; background-color: var(--color-bg-body); font-size: 0.95em; }
.remove-pic-form { margin-top: 15px; border-top: 1px solid var(--color-border); padding-top: 20px; }
.auth-button.remove-button { background-color: #e63946; font-size: 0.9em; }
.auth-button.remove-button:hover { background-color: #c92c3a; }

/* ======== 18. ÜRÜN DETAY SAYFASI (product.php) ======== */
.product-detail-container { display: flex; flex-wrap: wrap; gap: 40px; padding: 40px; max-width: 1400px; margin: 30px auto; background: var(--color-bg-content); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-md); }
.product-image-column { flex: 1; min-width: 300px; max-width: 550px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
#main-product-image {
    width: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: contain; /* Değişiklik burada */
    border-radius: 8px;
    border: 1px solid var(--color-border); 
    transition: opacity 0.3s ease; 
    box-shadow: var(--shadow-sm);
    background-color: #fff; /* contain kullanırken boşluklar için arka plan */
}
.product-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.product-thumbnails img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid var(--color-border); cursor: pointer; opacity: 0.7; transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.2s ease; }
.product-thumbnails img:hover { opacity: 1; border-color: var(--color-accent-gold); transform: scale(1.05); }
.product-thumbnails img.thumbnail-active { opacity: 1; border-color: var(--color-main-dark); }
.product-info-column { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; }
.product-title { font-size: 2.3em; font-weight: 700; color: var(--color-main-dark); margin: 0 0 15px 0; line-height: 1.2; font-family: var(--font-heading); }
.average-rating-display { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; --color-empty: #d3d3d3; }
.review-count { font-size: 0.9em; color: #666; }
.product-page-price { font-size: 2.2em; margin-bottom: 20px; color: var(--color-main-dark); font-family: var(--font-heading); font-weight: 700; }
.product-page-vendor { font-size: 1.05em; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.product-description { margin-top: 20px; flex-grow: 1; margin-bottom: 20px; }
.product-description h3 { font-size: 1.2em; font-weight: 700; color: var(--color-main-dark); border-bottom: 1px solid var(--color-border); padding-bottom: 8px; margin-bottom: 10px; font-family: var(--font-heading); }
.product-description p { font-size: 1em; color: #555; line-height: 1.7; overflow-wrap: break-word; word-break: break-word; }
.product-page-btn { padding: 15px 30px; font-size: 1.1em; width: 100%; margin-top: 10px; }
.product-page-wishlist-btn { margin-top: auto; }

/* ======== 19. SAYFALAMA (PAGINATION) ======== */
.pagination { margin-top: 40px; text-align: center; }
.pagination ul { list-style: none; padding: 0; margin: 0; display: inline-flex; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-sm); }
.pagination a, .pagination span { display: block; padding: 10px 15px; background-color: var(--color-bg-content); color: var(--color-main-dark); text-decoration: none; border-right: 1px solid var(--color-border); transition: all 0.2s ease; font-size: 0.95em; font-weight: 700; }
.pagination span { color: #aaa; background-color: #f9f9f9; }
.pagination li:last-child a, .pagination li:last-child span { border-right: none; }
.pagination a:hover { background-color: #f1f5f9; }
.pagination a.active { background-color: var(--color-main-dark); color: #fff; cursor: default; }
.pagination a.active:hover { background-color: var(--color-main-dark); }

/* ======== 21. FAVORİLERE EKLE/ÇIKAR (WISHLIST) BUTONU ======== */
.wishlist-toggle-btn {
    position: absolute; top: 15px; right: 15px; background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #eee; border-radius: 50%; width: 36px; height: 36px; display: flex;
    align-items: center; justify-content: center; cursor: pointer; color: #adb5bd;
    font-size: 1.1em; transition: all 0.3s ease; z-index: 5;
}
.wishlist-toggle-btn:hover { background-color: #fff; color: #e63946; transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.wishlist-toggle-btn.active { color: #e63946; background-color: #fff; border-color: #f0f0f0; }
.wishlist-toggle-btn.active:hover { color: #d00000; }
.product-page-wishlist-btn {
    position: static; width: 100%; border-radius: 6px; margin-bottom: 10px; padding: 12px 20px;
    background-color: var(--color-bg-body); border: 1px solid var(--color-border); color: var(--color-text-primary);
    font-size: 1em; font-weight: 700; font-family: var(--font-body); display: flex; align-items: center; justify-content: center;
}
.product-page-wishlist-btn i { margin-right: 8px; }
.product-page-wishlist-btn span { display: inline-block; }
.product-page-wishlist-btn.active { background-color: #fff0f1; color: #e63946; border-color: #fcc2c7; }
.product-page-wishlist-btn:hover { background-color: #e9ecef; transform: none; box-shadow: none; }
.product-page-wishlist-btn.active:hover { background-color: #ffe0e3; color: #d00000; }

/* ======== 22. ÜRÜN YORUMLARI (product.php) ======== */
.stars {
    --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: 1.3em;
    font-family: Times, "Times New Roman", serif; line-height: 1;
    background: linear-gradient(90deg, var(--color-accent-gold) var(--percent), var(--color-empty, #d3d3d3) var(--percent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-empty, #d3d3d3);
}
.stars::before { content: '★★★★★'; letter-spacing: 2px; }
.reviews-section {
    margin-top: 40px; background-color: var(--color-bg-content); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 30px; margin-bottom: 40px; box-shadow: var(--shadow-sm);
}
.section-title { font-size: 1.6em; font-weight: 700; margin-top: 0; margin-bottom: 25px; text-align: center; color: var(--color-main-dark); font-family: var(--font-heading); }
.review-form-container { background-color: var(--color-bg-body); padding: 25px; border-radius: 6px; border: 1px solid var(--color-border); margin-bottom: 30px; }
.review-form-container h4 { margin-top: 0; margin-bottom: 20px; font-size: 1.2em; font-weight: 700; font-family: var(--font-heading); }
.rating-group { margin-bottom: 15px; }
.star-rating { display: inline-block; unicode-bidi: bidi-override; direction: rtl; text-align: left; }
.star-rating > input { display: none; }
.star-rating > label { display: inline-block; padding: 0 3px; font-size: 1.8em; color: #d3d3d3; cursor: pointer; transition: color 0.2s ease; }
.star-rating > label::before { content: '★'; }
.star-rating > label:hover,
.star-rating > label:hover ~ label { color: var(--color-accent-gold); }
.star-rating > input:checked ~ label { color: var(--color-accent-gold); }
.review-list { margin-top: 30px; }
.review-item { border-bottom: 1px solid var(--color-border); padding: 20px 0; position: relative; padding-right: 80px; min-height: 50px; }
.review-item:last-child { border-bottom: none; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 5px;} /* Wrap eklendi */
.review-author { font-weight: 700; color: var(--color-text-primary); }
.review-date { font-size: 0.85em; color: #888; white-space: nowrap;}
.review-rating { margin-bottom: 10px; }
.review-comment { font-size: 1em; color: #555; line-height: 1.6; margin: 0; }
.vendor-reply { margin-top: 20px; margin-left: 30px; padding: 15px; background-color: var(--color-bg-body); border-radius: 6px; border: 1px solid var(--color-border); }
.vendor-reply .review-author.vendor-reply-author { color: var(--color-main-dark); font-weight: 700; }
.vendor-reply .review-comment { font-size: 0.95em; color: #333; }
.vendor-reply-form-container { margin-top: 15px; margin-left: 30px; }
.toggle-reply-form-btn { background: none; border: none; color: var(--color-main-dark); font-weight: 700; cursor: pointer; font-size: 0.9em; padding: 5px 0; }
.toggle-reply-form-btn:hover { text-decoration: underline; }
.vendor-reply-form { margin-top: 10px; padding: 15px; background-color: #fdfdfd; border: 1px solid var(--color-border); border-radius: 6px; }
.vendor-reply-form .form-group { margin-bottom: 10px; }
.vendor-reply-form label { font-weight: 700; font-size: 0.9em; }
.vendor-reply-form .auth-button { padding: 8px 15px; font-size: 0.9em; }

/* ======== 24. HESAP KENAR ÇUBUĞU (account_sidebar.php) ======== */
.account-sidebar { width: 260px; } /* Biraz genişletildi */
.account-sidebar .filter-widget { padding-bottom: 10px; box-shadow: none; border: none; background: none; }
.account-sidebar .widget-title { border: none; padding-bottom: 0; margin-bottom: 15px; font-size: 1.3em; }
.account-nav-list li { margin-bottom: 5px; }
.account-nav-list a { display: flex; align-items: center; padding: 12px 15px; font-size: 0.95em; font-weight: 700; color: #555; text-decoration: none; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; border-left: 4px solid transparent; }
.account-nav-list a i { margin-right: 12px; width: 20px; text-align: center; color: #888; transition: color 0.2s ease; font-size: 1.1em; }
.account-nav-list a.active { background-color: #e8ecf1; color: var(--color-main-dark); border-left-color: var(--color-main-dark); }
.account-nav-list a.active i { color: var(--color-main-dark); }
.account-nav-list a:hover:not(.active) { background-color: #f1f5f9; color: var(--color-main-dark); transform: translateX(3px); }
.account-nav-list a:hover:not(.active) i { color: var(--color-main-dark); }
.account-nav-list a.logout-link { border-top: 1px solid var(--color-border); margin-top: 15px; padding-top: 15px; color: #e63946; border-left-color: transparent; }
.account-nav-list a.logout-link i { color: #e63946; }
.account-nav-list a.logout-link:hover { background-color: #fdf0f0; color: #c92c3a; transform: translateX(3px); }
.account-nav-list a.logout-link:hover i { color: #c92c3a; }

/* ======== 25. ÖDEME SAYFASI (checkout.php) ======== */
.checkout-container { display: flex; flex-wrap: wrap-reverse; gap: 30px; width: 100%; max-width: 900px; margin: 0 auto; }
.checkout-form-container { flex: 1.5; min-width: 300px; } /* Form alanı biraz daha geniş */
.checkout-form-container .admin-widget { padding: 25px 30px; }
.form-group-row { display: flex; gap: 20px; flex-wrap: wrap; } /* Wrap eklendi */
.form-group-row .form-group { flex: 1; min-width: 150px; } /* Minimum genişlik */
.checkout-summary-container { flex: 1; min-width: 300px; position: sticky; top: calc(var(--header-height) + 20px); align-self: flex-start; }
.checkout-summary-container .admin-widget { padding: 25px; }
#checkout-summary-items { max-height: 400px; overflow-y: auto; padding-right: 10px; margin-bottom: 15px;}
#checkout-summary-items .notification-item { padding: 10px 0; border-bottom: 1px solid var(--color-border); gap: 10px; align-items: flex-start;} /* Dikey hizalama */
#checkout-summary-items img { width: 50px; height: 50px; border-radius: 4px; border: 1px solid #eee; object-fit: cover; }
.checkout-summary-total { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--color-border); } /* Ayracı üste aldık */
.checkout-summary-total hr { display: none; } /* Fazla hr'ları gizle */
.checkout-summary-total div { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95em; color: var(--color-text-secondary); }
.checkout-summary-total div span:last-child { font-weight: 700; color: var(--color-text-primary); }
.checkout-summary-total div:last-of-type { font-size: 1.2em; color: var(--color-text-primary); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } /* Toplamı ayır */
.checkout-summary-total div:last-of-type span:last-child { color: var(--color-main-dark); }

#apply-coupon-btn {
    width: auto; 
}

/* ======== 26. SİPARİŞ DURUM STİLLERİ (my_orders.php, admin/manage_orders.php) ======== */
.order-status-badge { display: inline-block; padding: 4px 10px; font-size: 0.8em; font-weight: 700; border-radius: 4px; line-height: 1.4; text-transform: capitalize; white-space: nowrap; }
/* Renkler admin_header.php içindeydi, buraya taşıyalım */
.status-pending_payment { background-color: #ffc107; color: #333; }
.status-processing { background-color: #007bff; color: white; }
.status-shipped { background-color: #17a2b8; color: white; }
.status-completed { background-color: #28a745; color: white; }
.status-cancelled { background-color: #dc3545; color: white; }
.status-refunded { background-color: #6c757d; color: white; }

/* ======== 27. REKLAM BANNER'I (index.php) ======== */
.ad-banner { margin-bottom: 30px; background-color: var(--color-bg-content); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ad-banner img { display: block; width: 100%; height: auto; }

/* ======== 28. ADMIN PANELİ ÖZEL STİLLERİ ======== */
/* Admin container ve sidebar */
.admin-container { display: flex; }
.admin-sidebar {
    width: 240px; background-color: #fff; min-height: calc(100vh - var(--header-height));
    padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.05); flex-shrink: 0;
    position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); overflow-y: auto;
}
.admin-sidebar ul { list-style: none; padding: 0; margin: 0; }
.admin-sidebar ul li a {
    display: flex; align-items: center; padding: 12px 15px; text-decoration: none;
    color: #333; font-weight: 700; border-radius: 6px; transition: all 0.3s ease;
    font-family: var(--font-body); font-size: 0.95em; margin-bottom: 5px;
}
.admin-sidebar ul li a:hover, .admin-sidebar ul li a.active {
    background-color: #f8f7f4; color: var(--color-main-dark); transform: translateX(5px);
}
.admin-sidebar ul li a i { margin-right: 12px; width: 20px; text-align: center; font-size: 1.1em; }
.admin-main-content { flex-grow: 1; padding: 30px 40px; overflow-x: auto; min-height: calc(100vh - 65px); } /* min-height eklendi */

/* Admin widget */
.admin-widget {
    background: var(--color-bg-content); border: 1px solid #d8d8d8; border-radius: 8px;
    padding: 25px; margin-bottom: 25px; box-shadow: var(--shadow-sm);
}
.admin-widget h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.5em; font-family: var(--font-heading); color: var(--color-main-dark); }
.admin-widget h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.3em; font-family: var(--font-heading); color: var(--color-main-dark); }
.admin-widget h4 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; font-family: var(--font-heading); color: var(--color-main-dark); }
.admin-widget p { font-size: 0.95em; color: #555; margin-top: 0; }
.admin-widget small { font-size: 0.85em; color: #777; }
.admin-widget .auth-container { max-width: none; margin: 0; padding: 0; border: none; box-shadow: none; }

/* Admin Genel Form ve Buton Stilleri */
.admin-main-content .form-control,
.admin-main-content .form-select,
.admin-main-content .file-input,
.admin-main-content .form-textarea { padding: 8px 12px; font-size: 0.9em; }
.admin-main-content .auth-button { padding: 10px 15px; font-size: 0.95em; }
.admin-main-content .filter-form-admin .filter-grid { gap: 15px; }
.admin-main-content .button-clear-filter { padding: 10px 15px; font-size: 0.9em; }

.product-list-table { overflow-x: auto; }
.product-list-table table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.product-list-table th,
.product-list-table td {
    padding: 10px 12px;
    font-size: 0.9em;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
.product-list-table th { background-color: var(--color-bg-body); font-weight: 700; font-size: 0.85em; }
.table-product-img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; display: block; margin: auto; }
.action-buttons { text-align: center; white-space: nowrap; }
.action-buttons a,
.action-buttons button,
.approve-button { padding: 6px 8px; font-size: 0.85em; margin: 0 2px; }
.edit-btn { background-color: #ffc107; color: #333; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.edit-btn:hover { background-color: #e0a800; }
.delete-btn { background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; }
.delete-btn:hover { background-color: #c82333; }
.approve-button { background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.approve-button:hover { background-color: #218838; }

/* Admin Dashboard Kartları */
.admin-main-content .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.admin-main-content .dashboard-link-card { padding: 20px; }
.admin-main-content .dashboard-link-card i { font-size: 2em; margin-bottom: 10px; }
.admin-main-content .dashboard-link-card h3 { font-size: 1.6em; margin-bottom: 8px; }
.admin-main-content .dashboard-link-card p { font-size: 0.85em; }
.admin-main-content .stats-container-horizontal .dashboard-link-card { text-align: left; }
.admin-main-content .stats-container-horizontal .dashboard-link-card i { float: right; opacity: 0.5; }

/* Admin Kullanıcı Tablosu Özel Stiller */
.status-vendor, .status-customer,
.status-admin, .status-no {
    display: inline-block; padding: 3px 8px; font-size: 0.8em; font-weight: 700; border-radius: 4px;
}
.status-vendor { background-color: #e8ecf1; color: var(--color-main-dark); }
.status-customer { background-color: #e9ecef; color: #495057; }
.status-admin { background-color: var(--color-success-bg); color: var(--color-success); }
.status-no { background-color: #f8d7da; color: #721c24; }
.current-user-row td { background-color: #fff9e6; }

/* ======== TAŞINAN BLOK (Düzeltme) ======== */
/* ======== 31. MOBİL FİLTRE ÇUBUĞU VE YAN PANELİ ======== */

/* Mobilde görünecek FİLTRELE / SIRALA çubuğu */
.mobile-filter-bar {
    display: none; /* Masaüstünde gizli */
    gap: 10px;
    margin-bottom: 20px;
}

.mobile-filter-btn,
.mobile-sort-btn {
    flex: 1; /* Eşit genişlik */
    padding: 12px 10px;
    font-size: 1em;
    font-weight: 700;
    background-color: var(--color-bg-content);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.mobile-filter-btn:hover,
.mobile-sort-btn:hover {
    background-color: #f1f5f9;
}

/* Filtre paneli için kapatma butonu (Sepetle aynı stil) */
.close-filter-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5em;
    font-weight: 300;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
    display: none; /* Masaüstünde gizli */
    z-index: 1002; /* Sidebar içeriğinin üstünde */
}

.close-filter-btn:hover {
    color: #000;
}
/* ======== TAŞINAN BLOK BİTİŞİ ======== */


/* ======== 29. MOBİL UYUMLULUK (MEDIA QUERIES) ======== */
@media (max-width: 992px) {
    .container { max-width: 960px; }
    .main-nav { margin-left: 15px; }
    .search-form { max-width: 350px; }
    .nav-items-right { gap: 10px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .product-detail-container { gap: 25px; padding: 25px; }
    .product-image-column { max-width: 450px; }
    .product-title { font-size: 2em; }
    .product-page-price { font-size: 1.9em; }
    .admin-container { 
        flex-direction: column; 
        margin-top: var(--header-height); 
    }
    .admin-sidebar {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 20px;
    }
    .admin-main-content { padding: 20px; }
    .stats-container-horizontal .dashboard-link-card { min-width: 180px; } /* Mobil kartlar */
}

@media (max-width: 768px) {
    .container { padding: 0 15px; }
    .header-container { flex-wrap: wrap; }
    .logo-img { height: 55px; }
    .logo-text { font-size: 1.4em; }
    .hamburger-menu { display: block; order: 3; /* Sağ üste */ }
    .main-nav {
        display: none; /* Başlangıçta gizli */
        order: 4; /* En alta */
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--color-bg-content);
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Alt gölge */
        margin-left: 0; margin-top: 10px;
    }
    .main-nav.active { display: flex; } /* JS ile açılınca göster */
    .search-form { order: 1; max-width: none; width: calc(100% - 100px); margin: 0; } /* Logo ve hamburger arası */
    .nav-items-right { order: 2; margin-left: 0; gap: 8px; } /* Sağdaki ikonlar */
    .cart-btn { padding: 8px 15px; font-size: 0.9em; }
    #cart-count { top: -6px; right: -6px; }
    .balance-display { padding: 6px 10px; font-size: 0.85em; }
    .profile-pic-nav, .profile-btn .fa-user-circle { width: 32px; height: 32px; }
    .profile-btn .fa-user-circle { font-size: 1.5em; }
    .notification-bell { font-size: 1.1em; }
    .notification-count { width: 14px; height: 14px; font-size: 0.5em; top: 1px; right: 1px; }
    .dropdown-button { font-size: 0.9em; }
    .auth-link { font-size: 0.9em; padding: 6px 8px; }

    .main-content-area { 
        /* flex-direction: column; */ /* Yorum satırı yapıldı veya silindi */
        gap: 20px; 
        padding-top: 20px; 
    }
    
    /* Sidebar stilini mobilde tamamen değiştir (sepet gibi) */
    .sidebar {
        position: fixed;
        top: 0;
        left: -320px; /* Başlangıçta ekranın solunda gizli */
        width: 300px;
        max-width: 90%;
        height: 100%;
        background-color: var(--color-bg-content);
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 1001;
        overflow-y: auto;
        padding-top: 60px; /* Kapatma butonu için üstte boşluk */
        margin-bottom: 0;
        border-right: 1px solid var(--color-border); /* Sağ tarafa çizgi */
    }

    .sidebar.open {
        left: 0; /* Açık durum */
    }
    
    /* Mobilde filtre kapatma butonunu göster */
    .close-filter-btn {
        display: block;
    }

    /* Mobilde FİLTRELE/SIRALA çubuğunu göster */
    .mobile-filter-bar {
        display: flex;
    }
    
    /* Orijinal sıralama dropdown'unu mobilde gizle */
    .sort-options {
        display: none;
    }

    /* Mobilde SIRALA butonuna basınca açılacak şekilde ayarla (Bonus) */
    .sort-options.mobile-visible {
        display: block;
        text-align: left;
        margin-top: 15px;
        padding: 15px;
        background: var(--color-bg-body);
        border: 1px solid var(--color-border);
        border-radius: 6px;
    }
    .sort-options.mobile-visible label {
        display: block;
        margin-bottom: 10px;
    }
    .sort-options.mobile-visible select {
        width: 100%;
    }
    
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
    .product-card { padding: 15px; }
    .product-link h3 { font-size: 1.1em; }
    .product-card .price { font-size: 1.2em; }
    .add-to-cart-btn { padding: 8px 15px; font-size: 0.85em; }
    .product-vendor { font-size: 0.8em; }
    .product-detail-container { padding: 20px; gap: 20px; }
    .product-title { font-size: 1.8em; }
    .product-page-price { font-size: 1.7em; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; } /* Footer tek sütun */
    .site-footer h4 { display: block; }
    .social-icons { text-align: center; margin-top: 10px; }

    /* Mobil Yorum Düzenle/Sil Butonları */
    .review-item { padding-right: 0; padding-bottom: 60px; }
    .review-actions { top: auto; bottom: 15px; right: 15px; left: 15px; flex-direction: row; }
    .btn-review-action { flex-grow: 1; font-size: 0.9em; padding: 8px; width: auto; }
    /* Mobil Aktif Filtreler */
    .active-filters-container { padding: 8px; gap: 6px; }
    .filter-tag { padding: 3px 8px; font-size: 0.8em; }
    .clear-all-filters-btn { margin-left: 0; width: 100%; text-align: center; margin-top: 8px; }
}

@media (max-width: 576px) {
    .container { padding: 0 10px; }
    .header-container { /* padding: 8px 0; */ }
    .logo-img { height: 45px; margin-right: 10px; }
    .logo-text { font-size: 1.2em; }
    .search-form { padding: 3px 3px 3px 10px; width: calc(100% - 90px); }
    .search-button { width: 26px; height: 26px; }
    .search-button i { font-size: 0.8em; }
    .main-nav { padding: 15px; } /* Mobil menü iç boşluk */
    .hero h2 { font-size: 2em; }
    .hero p { font-size: 1em; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .product-card { padding: 10px; padding-top: 40px; }
    .product-link h3 { font-size: 1em; }
    .product-card .price { font-size: 1.1em; }
    .add-to-cart-btn { padding: 7px 12px; font-size: 0.8em; border-width: 1px; }
    .product-vendor { font-size: 0.8em; }
    .wishlist-toggle-btn { width: 30px; height: 30px; font-size: 1em; top: 10px; right: 10px; }
    .auth-container { margin: 30px auto; padding: 20px; }
    .auth-form h2 { font-size: 1.5em; margin-bottom: 20px; }
    .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="tel"], .form-group input[type="email"], .form-textarea, .form-select { padding: 10px; font-size: 0.95em; }
    .auth-button { padding: 12px; font-size: 1em; }
    .cart-sidebar { width: 300px; }
    .cart-item img { width: 60px; height: 60px; margin-right: 10px; }
    .cart-item-info h4 { font-size: 0.9em; }
    .cart-item-info p { font-size: 0.9em; }
    .qty-change { width: 24px; height: 24px; font-size: 1.1em; }
    .qty-input { width: 35px; height: 24px; font-size: 0.9em; }
    .cart-footer h3 { font-size: 1.1em; }
    .cart-footer .checkout-btn { padding: 12px; font-size: 1em; }
    .product-list-table th, .product-list-table td { padding: 8px; font-size: 0.8em; white-space: normal; } /* Mobilde kaymasın */
    .table-product-img { width: 35px; height: 35px; }
    .action-buttons { white-space: normal; } /* Butonlar alt alta gelebilir */
    .action-buttons a, .action-buttons button, .approve-button { margin-bottom: 3px; }
    .product-detail-container { padding: 15px; }
    .product-title { font-size: 1.6em; }
    .product-page-price { font-size: 1.6em; }
    .average-rating-display .stars { font-size: 1.1em; }
    .panel-nav-grid { grid-template-columns: 1fr; } /* Mobilde kartlar tek sıra */

    .product-list-table table {
        border: 0;
    }
    .product-list-table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .product-list-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .product-list-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        white-space: normal;
    }
    .product-list-table td:last-child {
        border-bottom: 0;
    }
    .product-list-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        color: var(--color-main-dark);
    }
    .product-list-table td.action-buttons,
    .product-list-table td.table-product-img-cell {
        padding-left: 10px;
        text-align: center;
    }
    .product-list-table td.action-buttons::before,
    .product-list-table td.table-product-img-cell::before {
        display: none;
    }
    .table-product-img {
        margin: 0;
    }
}

/* ======== EKLENTİ: YÜKLENME DURUMU (LOADING STATE) ======== */
.auth-button.loading,
.add-to-cart-btn.loading,
.wishlist-toggle-btn.loading {
    opacity: 0.7; cursor: wait; position: relative;
}
.auth-button.loading::after,
.add-to-cart-btn.loading::after {
    content: ''; display: inline-block; width: 1em; height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
    border-top-color: #fff; animation: spinner 0.6s linear infinite;
    margin-left: 10px; vertical-align: middle;
}
@keyframes spinner { to { transform: rotate(360deg); } }

/* ======== Mevcut Diğer Stiller ======== */
.stats-container-horizontal {
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: stretch;
}
.stats-container-horizontal .dashboard-link-card {
    flex: 1; min-width: 200px;
}
.vendor-order-group {
    background-color: #fff; border: 1px solid var(--color-border); border-radius: 8px;
    margin-bottom: 25px; box-shadow: var(--shadow-sm);
}
.vendor-order-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; background-color: var(--color-bg-body);
    border-bottom: 1px solid var(--color-border); border-radius: 8px 8px 0 0;
}
.vendor-order-header h3 { margin: 0; font-family: var(--font-heading); color: var(--color-main-dark); font-size: 1.1em;}
.vendor-order-header small { font-size: 0.85em; color: #555; }
.vendor-order-header .order-status-badge { flex-shrink: 0; margin-left: 15px; } /* order-status -> order-status-badge */
.vendor-order-group .admin-widget { border: none; box-shadow: none; margin-bottom: 0; padding: 0; } /* Padding kaldırıldı, tablo kendi padding'ini ayarlar */
.vendor-order-group .product-list-table table { border: none; } /* Tablonun kendi kenarlığı olmasın */
.vendor-order-group .product-list-table th, .vendor-order-group .product-list-table td { border-left: none; border-right: none; } /* Dikey kenarlıkları kaldır */
.vendor-order-group .product-list-table tr:first-child th { border-top: none; }
.vendor-order-group .product-list-table tr:last-child td { border-bottom: none; }
.vendor-order-group .dashboard-grid { gap: 20px; align-items: flex-start; }
.vendor-order-footer { padding: 10px 20px; background-color: var(--color-bg-body); border-top: 1px solid var(--color-border); border-radius: 0 0 8px 8px; }
.toggle-address-btn { background: none; border: none; color: var(--color-main-dark); font-weight: 700; cursor: pointer; font-size: 0.9em; padding: 5px 0; }
.toggle-address-btn:hover { text-decoration: underline; }
.address-details { font-size: 0.9em; color: #333; line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border); }
.address-details p { margin: 0; }
.vendor-order-group .form-control { padding: 5px 8px; font-size: 0.9em; }

/* Tükendi Butonu Stilleri */
.add-to-cart-btn.out-of-stock-btn,
.add-to-cart-btn.out-of-stock-btn:disabled,
.add-to-cart-btn.out-of-stock-btn:hover {
    background-color: #6c757d; border-color: #6c757d; color: white;
    cursor: not-allowed; opacity: 0.7; transform: none;
}
.product-page-btn.out-of-stock-btn,
.product-page-btn.out-of-stock-btn:disabled,
.product-page-btn.out-of-stock-btn:hover {
    background-color: #6c757d; border-color: #6c757d; color: white;
    cursor: not-allowed; opacity: 0.7; transform: none;
}
/* Düşük Stok Uyarısı */
.stock-level-warning { background-color: #fff8e1; border: 1px solid #ffecb3; color: #c07b00; padding: 10px 15px; border-radius: 6px; font-weight: 700; font-size: 0.95em; text-align: center; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.stock-level-warning i { font-size: 1.1em; }
.stock-level-warning-card { color: #c07b00; font-weight: 700; font-size: 0.85em; text-align: center; margin-bottom: 10px; margin-top: -10px; }
/* Varyasyon Seçenekleri */
.product-options { margin-top: 20px; margin-bottom: 25px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.option-group-display { margin-bottom: 15px; }
.option-group-display label.option-label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--color-text-secondary); }
.option-values { display: flex; flex-wrap: wrap; gap: 10px; }
.option-values input[type="radio"] { display: none; }
.option-values label.value-label { display: inline-block; padding: 8px 15px; border: 1px solid var(--color-border); border-radius: 20px; cursor: pointer; font-size: 0.9em; font-weight: 600; transition: all 0.3s ease; background-color: var(--color-bg-body); color: var(--color-text-primary); min-width: 40px; text-align: center; }
.option-values input[type="radio"]:checked + label.value-label { background-color: var(--color-main-dark); color: white; border-color: var(--color-main-dark); }
.option-values input[type="radio"]:disabled + label.value-label { background-color: #f8f9fa; color: #adb5bd; cursor: not-allowed; opacity: 0.7; text-decoration: line-through; border-color: var(--color-border); }
.option-values label.value-label:hover:not(.disabled) { border-color: var(--color-main-dark); }
.variant-selection-error { color: #dc3545; font-size: 0.9em; font-weight: bold; margin-top: 10px; display: none; /* Başlangıçta gizli */}

/* Yorum Düzenle/Sil Butonları */
.review-actions { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; }
.btn-review-action { background: none; border: 1px solid var(--color-border); border-radius: 5px; padding: 5px 8px; font-size: 0.8em; font-weight: 700; cursor: pointer; transition: all 0.3s ease; width: 65px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px;}
.btn-review-edit { color: var(--color-main-dark); background-color: #f1f5f9; }
.btn-review-edit:hover { background-color: var(--color-main-dark); color: white; }
.btn-review-delete { color: #e63946; background-color: #fdf0f0; }
.btn-review-delete:hover { background-color: #e63946; color: white; }

/* Aktif Filtre Etiketleri */
.active-filters-container { background-color: var(--color-bg-body); border: 1px solid var(--color-border); padding: 10px 15px; margin-bottom: 20px; border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.active-filters-label { font-weight: 700; color: var(--color-text-secondary); font-size: 0.9em; margin-right: 5px; }
.filter-tag { background-color: var(--color-main-dark); color: white; padding: 4px 10px; border-radius: 15px; font-size: 0.85em; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.remove-filter-btn { color: white; text-decoration: none; font-weight: bold; font-size: 1.1em; line-height: 1; margin-left: 2px; opacity: 0.7; transition: opacity 0.2s ease; }
.remove-filter-btn:hover { opacity: 1; color: #ffdddd; }
.clear-all-filters-btn { margin-left: auto; font-size: 0.85em; color: var(--color-text-secondary); text-decoration: none; font-weight: 700; padding: 5px 8px; border-radius: 4px; background-color: #e9ecef; transition: background-color 0.2s ease; }
.clear-all-filters-btn:hover { background-color: #dee2e6; color: var(--color-main-dark); }

/* Mobil Uyumlu Yorum Butonları */
@media (max-width: 576px) {
    .review-item { padding-right: 0; padding-bottom: 60px; }
    .review-actions { top: auto; bottom: 15px; right: 20px; left: 20px; flex-direction: row; }
    .btn-review-action { flex-grow: 1; font-size: 0.9em; padding: 8px; width: auto; }
}
/* Mobil Uyumlu Aktif Filtreler */
@media (max-width: 576px) {
    .active-filters-container { padding: 8px; gap: 6px; }
    .filter-tag { padding: 3px 8px; font-size: 0.8em; }
    .clear-all-filters-btn { margin-left: 0; width: 100%; text-align: center; margin-top: 8px; }
}


/* ======== YENİ EKLENEN BÖLÜM (image_56237d.png için) ======== */

/* ======== 30. SATICI PANELİ NAVİGASYON KARTLARI (dashboard.php) ======== */
.panel-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Esnek grid yapısı */
    gap: 20px;
    margin-top: 20px;
}
.panel-nav-card {
    display: block; /* Tıklanabilir tüm alan için */
    padding: 25px 20px;
    background-color: var(--color-bg-body); /* Resimdeki gibi gri arka plan */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    text-align: center; /* İkon ve yazıları ortala */
}
.panel-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-main-dark);
}
.panel-nav-card i {
    font-size: 2.5em; /* Büyük ikon */
    color: var(--color-main-dark);
    margin-bottom: 15px; /* İkon ile başlık arası boşluk */
}
.panel-nav-card h4 {
    font-family: var(--font-heading);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-text-primary); /* Başlık rengi */
    margin: 0 0 8px 0;
}
.panel-nav-card p {
    font-size: 0.9em;
    color: var(--color-text-secondary); /* Soluk açıklama metni */
    line-height: 1.5;
    margin: 0;
}
/* ======== 24. HESAP KENAR ÇUBUĞU (account_sidebar.php) ======== */
.account-sidebar { width: 260px; }

/* === YENİ VEYA GÜNCELLENECEK KURAL === */
.account-nav-list {
    list-style: none; /* Bu satır noktaları kaldırır */
    padding: 0;       /* Varsayılan iç boşluğu sıfırlar */
    margin: 0;        /* Varsayılan dış boşluğu sıfırlar */
}
/* === KURAL BİTTİ === */

.account-nav-list li { margin-bottom: 5px; }
/* ======== SATICI SORU FİLTRE SEKMELERİ (vendor_questions.php) ======== */
.filter-tab-container {
    display: flex; /* Linkleri yan yana diz */
    gap: 5px;      /* Sekmeler arası hafif boşluk */
    border-bottom: 2px solid var(--color-border); /* Alt çizgi */
    margin-bottom: 25px; /* Altındaki içerikle arasına boşluk */
    padding-bottom: 0; /* İç boşluğu sıfırla */
}

.filter-tab-link {
    padding: 10px 18px; /* İç boşluk */
    font-size: 0.95em;
    font-weight: 700;
    color: var(--color-text-secondary); /* Normalde soluk renk */
    text-decoration: none;
    border: 2px solid transparent; /* Alttaki çizgi için yer ayır */
    border-bottom: none; /* Alt kenarlığı başta gizle */
    border-radius: 6px 6px 0 0; /* Üst köşeleri yuvarla */
    margin-bottom: -2px; /* Alt çizginin üzerine binsin */
    transition: all 0.2s ease-in-out;
    background-color: transparent; /* Başlangıçta arka plan yok */
}

.filter-tab-link:hover {
    color: var(--color-main-dark); /* Üzerine gelince renk değiştir */
    background-color: #e9ecef; /* Hafif arkaplan */
}

.filter-tab-link.active {
    color: var(--color-main-dark); /* Aktif sekme rengi */
    border-color: var(--color-border) var(--color-border) var(--color-bg-content) var(--color-border); /* Kenarlıklar */
    border-width: 2px;
    border-style: solid;
    background-color: var(--color-bg-content); /* Arka planı içerikle aynı yap (çizgiyi kesmek için) */
}
/* ======== 6. BAKİYE (HEADER DROPDOWN) - GÜNCELLENDİ ======== */
.balance-display {
    /* Bu sınıf artık kullanılmıyor, ancak eski header'ı cache'lemiş 
       kullanıcılar için bir yedek olarak kalabilir veya silebilirsiniz.
       Yeni yapı .balance-dropdown kullanıyor. */
    background-color: #e8ecf1; color: var(--color-main-dark); font-weight: bold;
    padding: 8px 15px; border-radius: 6px; font-size: 0.95em; white-space: nowrap;
}

.balance-dropdown {
    position: relative;
    display: inline-block;
}
.balance-btn {
    background-color: #e8ecf1;
    color: var(--color-main-dark);
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.95em;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
}
.balance-btn .dropdown-arrow {
    font-size: 0.8em;
    margin-left: 2px;
}
.balance-btn:hover {
    background-color: #dde3ea;
    color: #000;
}
.balance-menu-content {
    right: 0;
    left: auto;
    min-width: 220px; /* Profil menüsüyle benzer genişlik */
}
.balance-menu-content a {
    color: var(--color-text-primary);
    padding: 12px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 0.95em;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}
.balance-menu-content a:last-child {
    border-bottom: none;
}
.balance-menu-content a:hover {
    background-color: #f1f5f9;
}
.balance-menu-content a i {
    margin-right: 12px;
    color: #777;
    width: 20px;
    text-align: center;
}
.balance-menu-content a.load-balance-link {
    color: var(--color-success); /* Yeşil */
    font-weight: 700;
}
.balance-menu-content a.load-balance-link i {
    color: var(--color-success);
}
.balance-menu-content a.load-balance-link:hover {
    background-color: var(--color-success-bg); /* Açık yeşil */
}
/* ======== 30. BAKİYE YÜKLEME (ÖDEME SAYFASI) ======== */
.payment-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 20px;
}
.payment-form-widget,
.payment-summary-widget {
    background-color: var(--color-bg-content);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--shadow-sm);
}
.payment-form-widget h3 {
    margin-top: 0;
    font-family: var(--font-heading);
    color: var(--color-main-dark);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.expiry-group {
    display: flex;
    gap: 15px;
}
.expiry-group .form-group {
    flex: 1;
}
.card-input-group {
    position: relative;
}
.card-input {
    padding-right: 45px !important; /* Kredi kartı ikonu için yer (önemli) */
}
.card-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6em;
    color: #ccc;
    /* JS ile bu sınıf değiştirilebilir (visa, mastercard vb.) */
}
.payment-summary-widget h3 {
    margin-top: 0;
    font-family: var(--font-heading);
    color: var(--color-main-dark);
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95em;
}
.summary-row span {
    color: var(--color-text-secondary);
}
.summary-row strong {
    color: var(--color-text-primary);
    font-weight: 700;
}
.summary-row.total {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-main-dark);
    border-top: 2px solid var(--color-main-dark);
    border-bottom: none;
    margin-top: 10px;
}
.summary-row.total span,
.summary-row.total strong {
    color: var(--color-main-dark);
}

/* Mobilde ödeme sayfasını düzenle */
@media (max-width: 768px) {
    .payment-layout {
        grid-template-columns: 1fr; /* Mobilde alt alta */
    }
    .payment-summary-widget {
        order: -1; /* Özeti üste al (mobilde) */
    }
}