/* --- Temel Renk Değişkenleri ve Temaya Göre Ayarlamalar --- */
:root {
    --bg-color: #f8f9fa;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --primary-color: #3b82f6; /* Mavi tonu */
    --primary-hover: #2563eb;
    --accent-color: #10b981; /* Yeşil tonu */
    --accent-hover: #059669;
    --text-dark: #1f2937; /* Koyu gri */
    --text-light: #6b7280; /* Açık gri */
    --border-color: #e5e7eb;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius: 0.75rem; /* Köşe yuvarlama */
    --danger-color: #ef4444;
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --info-color: #38bdf8; /* Açık mavi */
    --primary-light-bg: #eaf3ff;
    --success-light-bg: #d1fae5;
    --warning-light-bg: #fef3c7;
    --white: #ffffff; /* Beyaz renk değişkeni */
    --footer-bg: #111827; /* Footer için koyu arka plan */
    --footer-text-color: #9ca3af; /* Footer için açık gri metin */
    --footer-title-color: #ffffff; /* Footer başlıkları için beyaz */
    --header-height: 65px; /* Yeni değişken: Sabit başlık yüksekliği */
    --sidebar-width: 260px; /* Yeni değişken: Sidebar genişliği */

    /* Bootstrap Tablo Değişkenleri İçin Tema Ayarlamaları (Sadece Gündüz Modu) */
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-dark);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-color);
    --bs-table-hover-bg: var(--primary-light-bg);

    /* NEW: Custom colors for specific service cards */
    --mobile-proxy-color: #3b82f6; /* Blue */
    --residential-proxy-color: #10b981; /* Green */
    --datacenter-proxy-color: #9333ea; /* Purple */
    --rotating-residential-proxy-color: #f59e0b; /* Orange */
    --ipv6-proxy-color: #38bdf8; /* Light Blue */
}

/* --- Global Stil Ayarlamaları --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    height: 100%;
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-y: auto; /* Ana sayfa kaydırmasını body yönetsin */
}

/* Dashboard wrapper (sabit sidebar ve kaydırılabilir içerik için flex konteyneri) */
.dashboard-wrapper {
    display: flex;
    flex-grow: 1; /* Esnek bir şekilde büyüyerek mevcut alanı doldurur */
    margin: auto; /* Yatayda ortalar */
    width: 100%;
    border-radius: var(--radius); /* Köşe yuvarlama */
    box-shadow: var(--shadow-lg); /* Gölge */
    background-color: var(--card-bg); /* Arka plan rengi */
    /* YENİ: Header'ın yüksekliği kadar üstten boşluk bırakın */
    margin-top: var(--header-height); /* Düzeltildi: Dashboard wrapper, global header'ın altında başlar */
    position: relative; /* Sidebar'ın fixed pozisyonu için referans olabilir */
    height: calc(100vh - var(--header-height)); /* Toplamda ekran yüksekliğinden header'ı çıkar */
}

/* --- Main Header Stilleri --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-bg);
    padding: 1rem 2rem;
    position: fixed; /* Genel main-header'ı sabit tut */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Bootstrap navbardan yüksek */
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: var(--shadow); /* Gölge ekle */
    border-radius: 0; /* Köşe yuvarlamayı kaldır */
}

/* Sayfa Başlığı Stilleri */
.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-title a { /* Logo bağlantısı için */
    color: var(--primary-color) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-title .icon { /* İkonlar için */
    color: var(--primary-color);
    font-size: 1.5rem;
}

/* Başlık Eylemleri Stilleri */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Logo stili */
.header-logo {
    height: 40px;
    width: auto;
}

/* --- Ana İçerik Alanı Stilleri --- */
/* Bu, `<main>` etiketine uygulanır */
.main-content {
    flex-grow: 1; /* Esnek bir şekilde büyüyerek kalan alanı doldurur */
    width: 100%;
    min-height: 0; /* Flex öğelerinin doğru çalışması için */
    display: flex; /* İçindeki çocukları düzgün yerleştirmek için */
    flex-direction: column; /* İçindeki çocukları dikey yığmak için */
}

/* For homepage-body specifically, push down the main content below the fixed header */
body.homepage-body .main-content {
    margin-top: var(--header-height);
}

/* index.html'deki ana içerik için (dashboard-wrapper içinde olmayan) */
body:not(.dashboard-wrapper) .main-content .container {
    max-width: 1200px; /* Maksimum genişlik sınırı */
    margin-left: auto; /* Ortalar */
    margin-right: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
/* Admin/User Panel'deki ana içerik alanı (sidebar'ın sağındaki alan) */
.page-content-wrapper { /* Bu div sidebar'ın sağındaki tüm alanı kapsar */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Kalan tüm yatay alanı kapla */
    /* YENİ: Yüksekliği doğrudan dashboard-wrapper tarafından yönetildiği için buradan kaldırın */
    /* height: calc(100vh - var(--header-height)); */
    overflow-y: auto; /* Kendi içeriği taşarsa kaydırma çubuğu oluşsun */
    overflow-x: hidden; /* Yatay taşmayı engelle */
    margin-left: var(--sidebar-width); /* Sabit sidebar için boşluk bırak */
    padding: 2rem; /* Ana içeriğin iç boşluğu */
}
/* Page content wrapper'daki main content'in ekstra padding'e ihtiyacı yok */
.page-content-wrapper > .main-content {
    padding: 0; /* Üstteki .page-content-wrapper padding'i yeterli */
}


/* --- Button Stilleri --- */
.btn {
    border-radius: var(--radius);
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-accent { background-color: var(--accent-color); border-color: var(--accent-color); color: white; }
.btn-accent:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline-secondary { color: var(--text-light); border-color: var(--border-color); background-color: transparent; }
.btn-outline-secondary:hover { color: var(--primary-color); border-color: var(--primary-color); background-color: transparent; }
.btn-outline-danger { border-color: var(--danger-color); color: var(--danger-color); }
.btn-outline-danger:hover { background-color: var(--danger-color); color: white; }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); background-color: transparent; }
.btn-outline-primary:hover { background-color: var(--primary-color); color: white; }
.btn-info { background-color: var(--info-color); border-color: var(--info-color); color: white; }
.btn-info:hover { background-color: #3299c8; border-color: #3299c8; } /* Darker info */
.btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); color: var(--text-dark); }
.btn-warning:hover { background-color: #e38e07; border-color: #e38e07; } /* Darker warning */
.btn-success { background-color: var(--success-color); border-color: var(--success-color); color: white; }
.btn-success:hover { background-color: #1eac4b; border-color: #1eac4b; } /* Darker success */
.btn-secondary { background-color: var(--text-light); border-color: var(--text-light); color: white; } /* Admin specific secondary */
.btn-secondary:hover { background-color: #5a6268; border-color: #5a6268; } /* Darker secondary */

/* Specific "Menu" toggler button (index.html) */
/* Modified for clean hamburger icon as per request */
.btn-mobile-nav-toggler {
    background-color: transparent;
    border: none;
    color: var(--text-dark); /* Color of the hamburger icon */
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: none; /* No shadow */
    font-size: 1.5rem; /* Larger icon size */
    padding: 0;
}
.btn-mobile-nav-toggler:hover {
    color: var(--primary-color); /* Hover effect for icon */
    background-color: transparent;
    box-shadow: none;
}

/* Mobile toggler for admin/user panels (replaces btn-menu for internal use) */
.mobile-toggler {
    display: none; /* Hidden by default for desktop */
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    margin-right: 1rem;
    order: -1; /* Place at the beginning in flex order */
}

/* --- Card Stilleri --- */
.card-custom {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}
.card-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-header-custom {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}
.card-header-custom i { color: var(--primary-color); }
.card-body-custom { padding: 1.5rem; }

/* Admin specific card header (overrides card-header-custom for these instances) */
.card-custom .card-header {
    background-color: var(--primary-color); /* Primary background */
    color: white; /* White text on primary background */
    border-top-left-radius: calc(var(--radius) - 1px) !important;
    border-top-right-radius: calc(var(--radius) - 1px) !important;
    font-weight: 600;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.card-custom .card-header .fas {
    color: white; /* Header icon color white */
}
.card-custom .card-body {
    padding: 1.5rem; /* Ensure padding is consistent */
}

/* Daha küçük kopyalama butonları için stil (user_panel.html) */
.btn-copy-compact {
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
}
.btn-copy-compact i {
    font-size: 0.9em;
}

/* --- Form Elemanları Stilleri --- */
.form-control, .form-select, textarea {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-dark);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus, textarea:focus {
    background-color: var(--card-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.form-label { color: var(--text-dark); font-weight: 500; margin-bottom: 0.5rem; }
.form-text {
    font-size: 0.875em;
    color: var(--text-light);
    margin-top: 0.5rem;
}

/* --- Durum Rozetleri --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3em 0.8em;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: capitalize;
}
.status-badge.aktif, .status-badge.approved, .status-badge.delivered, .status-badge.active {
    background-color: var(--success-light-bg);
    color: var(--accent-color);
}
.status-badge.beklemede, .status-badge.pending, .status-badge.pending_manual {
    background-color: var(--warning-light-bg);
    color: var(--warning-color);
}
.status-badge.süresi-doldu, .status-badge.trafik-bitti, .status-badge.expired {
    background-color: var(--warning-light-bg);
    color: var(--warning-color);
}
.status-badge.rejected, .status-badge.revoked {
    background-color: #fce4e4;
    color: #d32f2f;
}
.status-badge.open {
    background-color: var(--primary-light-bg);
    color: var(--primary-color);
}
.status-badge.answered { /* Admin specific */
    background-color: var(--info-color);
    color: white;
}
.status-badge.closed, .status-badge.cancelled {
    background-color: #e0e0e0;
    color: #424242;
}
/* ACL specific colors */
.status-badge.whitelist { background-color: var(--accent-color); color: white; }
.status-badge.blacklist { background-color: var(--danger-color); color: white; }


/* Dashboard İstatistik Kartları (user_panel.html) */
.dashboard-stat-card {
    position: relative;
    padding: 1.5rem;
    border-radius: var(--radius);
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.dashboard-stat-card.bg-blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.dashboard-stat-card.bg-green { background: linear-gradient(135deg, #10b981, #34d399); }
.dashboard-stat-card.bg-orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); }

.stat-card-icon-bg {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 5rem;
    opacity: 0.15;
    transform: rotate(-15deg);
}
.stat-card-label {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}
.stat-card-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}
.stat-card-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: 1rem;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.stat-card-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Hızlı İşlem Linkleri (user_panel.html) --- */
.action-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    height: 100%;
    transition: all 0.2s ease;
    background-color: var(--card-bg);
    text-align: center;
}
.action-link:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-color);
    color: var(--primary-color);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.action-link .action-icon { font-size: 2.2rem; margin-bottom: 1rem; color: var(--primary-color); transition: color 0.2s ease; }
.action-link .action-title { font-weight: 600; font-size: 1.1rem; }

/* --- Trafik Kullanım Grafiği (user_panel.html) --- */
#trafficChartContainer {} /* Placeholder, actual styles are often minimal for Chart.js container */

/* --- Proxy Oluşturucu (user_panel.html) --- */
.proxy-generator textarea { font-family: monospace; font-size: 0.9rem; }
.proxy-generator .input-group .btn { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }


/* ======================================== */
/* === PAKET KARTI TASARIMI (index.html ve user_panel.html) === */
/* ======================================== */

/* Genel grid ayarları */
.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Her bir paket kartı */
.package-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border-top: 4px solid var(--primary-color);
    position: relative;
}

/* Hover efekti */
.package-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

/* Popüler etiketi için sağ üst köşe etiketi */
.package-popular-tag {
    position: absolute;
    top: 75px; /* Matches earlier requests for visual consistency */
    right: -30px;
    background-color: var(--warning-color); /* Orange color for warning/popular */
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0.3rem 2.2rem;
    text-align: center;
    white-space: nowrap;
    transform: rotate(45deg);
    transform-origin: 100% 0%;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 0;
}

/* Kartın body'si */
.package-card .card-body-custom {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    padding-bottom: 1.5rem; 
}

/* Etiketler (Badges) */
.package-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    /* Position for badges on the top-left corner of the card, similar to the popular tag position logic */
    position: absolute; 
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10;
}
.package-badges .badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4em 0.8em;
    border-radius: 9999px;
}
.package-badges .badge.bg-primary { background-color: var(--primary-color) !important; color: white; }
.package-badges .badge.bg-info { background-color: var(--info-color) !important; color: white; }
.package-badges .badge.bg-success { background-color: var(--accent-color) !important; color: white; }


/* Paket Adı ve Kategori */
.package-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    padding-top: 50px; /* Badges'ın altına düşmesi için */
}
.package-category {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

/* Fiyat Bölümü */
.package-price-area {
    margin-bottom: 0.5rem;
    display: flex; /* Allow current and original price to sit side by side */
    align-items: baseline; /* Align prices at their baseline */
}
.package-current-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}
/* Premium kartın fiyat rengi de artık primary-color ile aynı olacak */
.package-card.premium .package-current-price { color: var(--primary-color); }
.package-original-price { /* Used in user_panel.html's packages section for strike-through price */
    text-decoration: line-through;
    color: var(--text-light);
    font-size: 1.25rem;
    margin-left: 0.5rem;
}
.package-price-per-gb {
    font-size: 0.85rem;
    color: var(--text-light);
    height: 1.2em; /* Keep a consistent height even if content is empty */
}

/* Ayırma Çizgisi */
hr.my-3 {
    border-color: #d1d5db !important;
    border-width: 2px !important;
}


/* Özellikler Listesi */
.package-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allow features list to take available space */
}
.package-features li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start; /* Aligns items to the top of the line */
    gap: 0.75rem;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95rem;
}
/* Özellik ikonları artık primary-color renginde olacak */
.package-features li i {
    color: var(--primary-color);
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-top: 4px; /* Align icon with the top of the text */
}

/* Satın Al butonu */
.package-card .btn-buy {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    border-radius: var(--radius); /* All corners rounded */
    margin-top: auto; /* Pushes button to the bottom */
}


/* ======================================== */
/* === PAKET KARTI TASARIMI (END) === */
/* ======================================== */


/* --- Login/Register Konteyneri Stili --- */
.login-container, .register-container {
    background-color: var(--card-bg);
    padding: 2.5rem; /* Standard padding for login/register forms */
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-width: 450px; /* Default max-width, overridden for register if needed */
    width: 100%;
}

/* NEW: Explicit centering for authentication pages */
body.auth-page-body {
    display: grid; /* Changed from flex to grid */
    place-items: center;   /* Centers both horizontally and vertically */
    min-height: 100vh;     /* Ensure body takes full viewport height */
    padding: 0;            /* Reset padding, container will manage it */
    margin: 0;             /* Reset margin */
    padding-top: 0; /* GİRİŞ SAYFASINDA SABİT BAŞLIK BOŞLUĞUNU İPTAL ET */
}

/* NEW: When body is centering, the container itself doesn't need auto margins */
body.auth-page-body .login-container,
body.auth-page-body .register-container {
    margin: 0; /* Remove auto margin as parent is centering */
}

.login-container h2, .register-container h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.login-container h2 i, .register-container h2 i {
    color: var(--primary-color);
}
/* Admin login specific heading */
.login-container.admin-login h2 {
    font-size: 1.5rem;
    gap: 0.5rem;
}


/* --- Toast Bildirimleri --- */
.toast-container { z-index: 1100; }
.toast {
    background-color: var(--card-bg);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transition: all 0.2s ease;
}
.toast .toast-body { font-weight: 600; }
.toast.bg-success { border-left: 5px solid var(--success-color) !important; background-color: var(--card-bg) !important; color: var(--text-dark) !important; }
.toast.bg-danger { border-left: 5px solid var(--danger-color) !important; background-color: var(--card-bg) !important; color: var(--text-dark) !important; }
.toast.bg-info { border-left: 5px solid var(--info-color) !important; background-color: var(--card-bg) !important; color: var(--text-dark) !important; }
.toast.bg-warning { border-left: 5px solid var(--warning-color) !important; background-color: var(--card-bg) !important; color: var(--text-dark) !important; }

.toast .btn-close, .modal .btn-close, .offcanvas .btn-close { filter: none; } /* Bootstrap'ın koyu tema filtresini iptal et */


/* Bağlantı metinleri (login.html, register.html) */
.link-text {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.link-text:hover {
    text-decoration: underline;
}

/* Metin Renkleri - Bootstrap'ın .text-light, .text-muted gibi sınıflarını temayla uyumlu hale getirir */
.text-light, .text-muted, .text-secondary {
    color: var(--text-light) !important;
}


/* --- Index.html specific sections --- */

/* Hero Section Styles (New Design) */
.hero-new-design {
    text-align: center;
    padding: 4rem 1rem;
    padding-bottom: 2rem;
    background-color: var(--bg-color); /* Matches body background */
}
.hero-new-design h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}
.hero-new-design p.lead {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto 2rem auto;
}
.hero-new-design .trustpilot-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
    font-weight: 600;
}
.hero-new-design .trustpilot-rating .fas {
    font-size: 1.2rem;
}
.hero-new-design .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.hero-new-design .btn {
    font-size: 1.1rem;
    padding: 0.8rem 2.5rem;
    min-width: 180px;
}
/* Hero Section Logo (Top Left) */
.main-header .header-logo.hero-logo {
    height: 48px; /* Slightly larger for the hero section */
}

/* General section headings for index.html */
h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 3.5rem;
    text-align: center;
}


/* Technical Details Section */
.tech-details-section {
    padding: 4rem 0;
    background-color: var(--bg-color); /* Ensure background is consistent */
}
.tech-detail-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tech-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}
.tech-detail-card .tech-icon {
    font-size: 3rem;
    color: var(--primary-color); /* Default primary color */
    margin-bottom: 1.5rem;
    background-color: var(--primary-light-bg);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.tech-detail-card:hover .tech-icon {
    background-color: var(--primary-color);
    color: white;
}
.tech-detail-card .card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}
.tech-detail-card .card-text {
    font-size: 0.95rem;
    color: var(--text-light);
}


/* Proxy Services Section (Used for Categories on Homepage) */
.proxy-services-section {
    padding: 4rem 0;
    background-color: var(--bg-color);
}
/* Re-using package-card structure for categories, so modify it here or ensure it's versatile */
.proxy-services-section .package-card {
    border-top: none; /* Remove top border for these cards */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to start */
    padding: 2rem; /* Adjust padding */
    min-height: 350px;
}
.proxy-services-section .package-card:hover {
    border-color: var(--primary-color);
}
.proxy-services-section .package-card .service-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow);
    background-color: var(--white); /* White background */
    border: 1px solid transparent; /* Default transparent border */
    transition: all 0.3s ease; /* Add transition */
}
.proxy-services-section .package-card:hover .service-icon-wrapper {
    box-shadow: var(--shadow-lg); /* Larger shadow on hover */
    transform: translateY(-3px); /* Slight lift */
}

.proxy-services-section .package-card .service-icon {
    font-size: 2.5rem;
    color: var(--primary-color); /* Default color for icons */
}

/* Specific colors for service icons based on their type (border and icon color) */
.proxy-services-section .package-card.mobile .service-icon-wrapper { border-color: var(--mobile-proxy-color); }
.proxy-services-section .package-card.mobile .service-icon { color: var(--mobile-proxy-color); }

.proxy-services-section .package-card.residential .service-icon-wrapper { border-color: var(--residential-proxy-color); }
.proxy-services-section .package-card.residential .service-icon { color: var(--residential-proxy-color); }

.proxy-services-section .package-card.datacenter .service-icon-wrapper { border-color: var(--datacenter-proxy-color); }
.proxy-services-section .package-card.datacenter .service-icon { color: var(--datacenter-proxy-color); }

.proxy-services-section .package-card.rotating-residential .service-icon-wrapper { border-color: var(--rotating-residential-proxy-color); }
.proxy-services-section .package-card.rotating-residential .service-icon { color: var(--rotating-residential-proxy-color); }

.proxy-services-section .package-card.ipv6 .service-icon-wrapper { border-color: var(--ipv6-proxy-color); }
.proxy-services-section .package-card.ipv6 .service-icon { color: var(--ipv6-proxy-color); }


.proxy-services-section .package-name { /* Used for category name */
    font-size: 1.8rem; /* Slightly smaller than main package name */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.proxy-services-section .package-features { /* Used for features list */
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}
.proxy-services-section .package-features li {
    font-size: 0.95rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.proxy-services-section .package-features li i {
    font-size: 0.8rem;
    color: var(--primary-color); /* Checkmark color */
}
.proxy-services-section .btn-explore { /* "Detayları İncele" button */
    margin-top: auto; /* Push to bottom */
    width: auto; /* Adjust width */
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.proxy-services-section .btn-explore .fas {
    font-size: 0.9em;
}


/* Category Group Title (if used) */
.category-group-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
}

/* Pricing Section (index.html) */
.pricing-section {
    padding: 3rem 0;
    margin-bottom: 3rem;
}

/* Package Detail Section (index.html) */
.package-detail-section {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 1.5rem;
    margin-bottom: 3rem;
}
.package-detail-section h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}
.package-detail-section .lead {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}
/* Specific overrides for package card inside package detail section */
.package-detail-section .package-card {
    box-shadow: none;
    border: 1px solid var(--border-color);
}
.package-detail-section .package-card.popular {
    border: 2px solid var(--primary-color);
}
.package-detail-section .package-card.premium {
    border: 2px solid var(--primary-color);
}

/* FAQ Section (index.html) */
.faq-section {
    padding: 2rem 0;
    margin-bottom: 3rem;
}
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow);
}
.accordion-button {
    background-color: var(--card-bg) !important;
    color: var(--text-dark) !important;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: var(--radius) !important;
    padding: 1rem 1.5rem;
    transition: all 0.2s ease; /* transition for all properties for smooth effect */
    border: 1px solid var(--border-color) !important; /* Default border matching accordion-item */
    box-shadow: none !important; /* Remove any default box-shadow from Bootstrap's accordion-button:focus */
}
.accordion-button:not(.collapsed) {
    background-color: var(--card-bg) !important; /* Active state: white background */
    color: var(--primary-color) !important;     /* Active state: primary blue text */
    border: 1px solid var(--primary-color) !important; /* Active state: blue border on all sides */
    border-bottom: none !important; /* Connects smoothly to the content below */
    border-radius: var(--radius) var(--radius) 0 0 !important; /* Top corners rounded, bottom sharp */
}

/* Arrow icon styling */
.accordion-button::after {
    /* Default (collapsed) arrow color: var(--text-dark) -> #1f2937 (koyu gri) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f2937'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transition: transform 0.2s ease !important; /* Ensure transition for rotation */
}

.accordion-button:not(.collapsed)::after {
    /* Active (expanded) arrow color: var(--primary-color) -> #3b82f6 (mavi) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233b82f6'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg) !important; /* Rotate the arrow up */
}

/* Remove Bootstrap's default focus outline for accordion buttons */
.accordion-button:focus {
    box-shadow: none !important;
}


.accordion-body {
    background-color: var(--bg-color);
    color: var(--text-light);
    padding: 1.25rem 1.5rem;
    border-radius: 0 0 var(--radius) var(--radius); /* Bottom corners rounded */
    border: 1px solid var(--primary-color) !important; /* Blue border to match active header */
    border-top: none !important; /* No top border to blend with active header */
}

/* Sidebar - Masaüstü versiyonu (d-none d-lg-flex) */
.sidebar {
    width: var(--sidebar-width); /* Genişlik değişkeni kullanıldı */
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: absolute; /* Dashboard wrapper'a göre konumlandır */
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* İçerik üzerinde olabilir */
    overflow-y: auto; /* Sidebar içeriği taşarsa kendi içinde kaysın */
    
    /* Webkit tarayıcıları için scrollbar gizleme */
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    /* Firefox için scrollbar gizleme */
    scrollbar-width: none;

    border-top-left-radius: var(--radius); /* Admin panel specific */
    border-bottom-left-radius: var(--radius); /* Admin panel specific */
}
.sidebar-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar-header i { color: var(--primary-color); }
.sidebar-nav { list-style: none; padding: 0; }

/* Collapsible sidebar menu items */
.sidebar-nav .nav-item .nav-subheader-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem 0.5rem; /* Matches .nav-subheader padding */
    color: var(--text-light) !important; /* Gri olacak */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}
.sidebar-nav .nav-item .nav-subheader-link:hover {
    color: var(--primary-color) !important; /* Mavi olacak */
    background-color: transparent !important; /* Arka plan yok */
}
.sidebar-nav .nav-item .nav-subheader-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    color: var(--text-light); /* Gri olacak */
}
.sidebar-nav .nav-item .nav-subheader-link:hover .nav-subheader-icon,
.sidebar-nav .nav-item .nav-subheader-link:not(.collapsed) .nav-subheader-icon {
    color: var(--primary-color); /* Mavi olacak */
}

.sidebar-nav .nav-item .nav-link {
    display: flex;
    align-items: flex-start; /* Aligns items to the top of the line */
    padding: 0.7rem 1rem; /* Slightly reduced padding */
    border-radius: var(--radius);
    color: var(--text-light) !important; /* Gri olacak */
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
    white-space: normal; /* Allow text to wrap */
    overflow: visible;   /* Ensure text is not clipped */
    text-overflow: clip; /* No ellipsis */
    word-break: break-word; /* Break long words */
    line-height: 1.2; /* Adjust line height for wrapped text */
    font-size: 0.9rem; /* Make the main nav item text smaller */
}
.sidebar-nav .nav-item .nav-link:hover { 
    background-color: transparent !important; /* Arka plan yok */
    color: var(--primary-color) !important; /* Mavi olacak */
}
.sidebar-nav .nav-item .nav-link.active { 
    background-color: transparent !important; /* Arka plan yok */
    color: var(--primary-color) !important; /* Mavi olacak */
    box-shadow: none !important; /* Gölge yok */
    /* border-left: 4px solid var(--primary-color); Düzeltme: Sol kenarlık kaldırıldı */
    /* padding-left: calc(1rem - 4px); Düzeltme: Kenarlık kaldığı için padding kaldırıldı */
}
.nav-item .nav-link .nav-icon {
    width: 24px;
    margin-right: 1rem;
    text-align: center;
    color: var(--text-light); /* Gri olacak */
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-top: 2px; /* Align icon with the top of the text */
}
/* İkonlar hover ve active durumlarda mavi olacak */
.sidebar-nav .nav-item .nav-link:hover .nav-icon,
.sidebar-nav .nav-item .nav-link.active .nav-icon {
    color: var(--primary-color) !important;
}

/* Nested navigation links */
.sidebar-nav .nested-nav {
    padding-left: 0.5rem; /* Indent nested lists */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.sidebar-nav .nav-item .nav-link.nested {
    padding-left: 2rem; /* Further indent for nested links */
    font-size: 0.85rem; /* Adjusted nested font size */
}
/* Nested link aktif olduğunda sol border */
.sidebar-nav .nav-item .nav-link.nested.active {
    /* border-left: 4px solid var(--primary-color); Düzeltme: Sol kenarlık kaldırıldı */
    /* padding-left: calc(2rem - 4px); Düzeltme: Kenarlık kaldığı için padding kaldırıldı */
}

.sidebar-nav .nav-item .nav-link small {
    color: var(--text-light) !important; /* Gri olacak */
    font-weight: normal;
    font-size: 0.7em; /* Even smaller relative to parent .nav-link */
    line-height: 1.2;
    display: block; /* Ensure it's on its own line */
}
/* Nested small text hover/active durumunda maviye dönecek */
.sidebar-nav .nav-item .nav-link.active small,
.sidebar-nav .nav-item .nav-link:hover small { /* Added hover state */
    color: var(--primary-color) !important;
}


.sidebar-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }

/* --- Footer Stilleri (DÜZELTİLDİ) --- */
.main-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text-color);
    padding: 3rem 0 0;
    margin-top: auto; /* Sayfa içeriği kısa olsa bile footer'ı aşağıya iter */
    flex-shrink: 0; /* Küçülmesini engeller */
}
.footer-logo {
    height: 48px;
    width: auto;
    /* filter: brightness(0) invert(1); */ /* Removed filter as per request */
    opacity: 0.9;
}
.footer-text {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 320px;
}
.footer-title {
    color: var(--footer-title-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 0.6rem;
}
.footer-links a {
    color: var(--footer-text-color);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-links a:hover {
    color: var(--white);
    padding-left: 5px;
}
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.social-links a {
    color: var(--footer-text-color);
    font-size: 1.2rem;
    transition: color 0.2s ease, transform 0.2s ease;
}
.social-links a:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}
.footer-bottom p {
    margin: 0;
    font-size: 0.85rem;
}


/* User menu dropdown (user_panel.html) */
.user-menu .dropdown-toggle { text-decoration: none; display: flex; align-items: center; gap: 0.75rem; color: var(--text-dark); font-weight: 600; }
.user-menu .dropdown-toggle:hover { color: var(--primary-color); }
.user-menu .dropdown-toggle::after { display: none; }
.user-menu .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color); color: white; display: inline-flex; justify-content: center; align-items: center; font-weight: 600; flex-shrink: 0; }
.dropdown-menu { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-lg); transition: all 0.2s ease; }
.dropdown-menu .dropdown-item { color: var(--text-dark); padding: 0.5rem 1rem; border-radius: var(--radius); transition: background-color 0.2s ease, color 0.2s ease; }
.dropdown-menu .dropdown-item:hover { background-color: var(--primary-color); color: white; }
.dropdown-menu .dropdown-item i { margin-right: 0.75rem; }

/* Table specific styles for user_panel.html and admin.html */
.table {
    margin-bottom: 0;
    /* Bootstrap table variables are set in :root */
}

/* head and body th/td text color */
.table thead th,
.table tbody td,
.table tbody th {
    color: var(--bs-table-color);
    vertical-align: middle; /* Align table content vertically */
    white-space: nowrap; /* Prevent text wrapping in tables unless necessary */
    padding: 0.75rem 1rem; /* Cell padding */
}
/* Admin table headers */
.table thead th {
    background-color: var(--bg-color);
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    position: sticky; /* Make header sticky when scrolling table */
    top: 0;
    z-index: 1;
}
/* Striped rows for tables */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-color);
}
/* Hover effect for table rows */
.table-hover tbody tr:hover {
    background-color: var(--primary-light-bg);
}
/* Table responsive wrapper with border and radius */
.table-responsive {
    overflow-x: auto; /* Enable horizontal scrolling for tables */
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}


/* --- Sohbet Konteyneri (Destek Talepleri) --- */
.chat-container, .ticket-replies-container {
    max-height: 500px; /* user_panel.html default */
    overflow-y: auto;
    padding: 1rem;
    border-radius: var(--radius);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}
.ticket-replies-container { /* Admin specific */
    max-height: 400px;
    background-color: var(--bg-color); /* Default background for messages list */
    border: 1px solid var(--border-color); /* Border around messages list */
}

.chat-message {
    display: flex;
    margin-bottom: 1rem;
}
.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius); /* General rounded corners for bubbles */
    word-wrap: break-word;
    font-size: 0.95rem;
}
.chat-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

/* User's messages (right-aligned, blue bubble) */
.chat-message.user {
    justify-content: flex-end;
}
.chat-message.user .chat-bubble {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 0.25rem; /* Pointed corner */
}
.chat-message.user .chat-meta {
    text-align: right;
}

/* Admin's messages (left-aligned, white/light gray bubble) */
.chat-message.admin {
    justify-content: flex-start; /* Ensure admin messages are left-aligned */
}
.chat-message.admin .chat-bubble {
    background-color: var(--card-bg); /* Use card background for admin messages */
    border: 1px solid var(--border-color); /* Subtle border */
    color: var(--text-dark);
    border-bottom-left-radius: 0.25rem; /* Pointed corner */
}
/* Ensure admin chat meta text color is correct */
.chat-message.admin .chat-meta {
    color: var(--text-light);
}

/* Admin ticket replies container specifics */
.ticket-replies-container .card {
    box-shadow: none;
    border: none;
    margin-bottom: 0.75rem;
}
.ticket-replies-container .card:last-child {
    margin-bottom: 0;
}
.ticket-replies-container .card.bg-light {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color);
}
.ticket-replies-container .card.bg-primary {
    background-color: var(--primary-color) !important;
}
.ticket-replies-container .card-body small {
    color: var(--text-light) !important;
}
.ticket-replies-container .card.bg-primary .card-body small {
    color: rgba(255,255,255,0.7) !important;
}
.ticket-replies-container .card-body p {
    color: var(--text-dark);
}
.ticket-replies-container .card.bg-primary .card-body p {
    color: rgba(255,255,255,0.9);
}

/* Admin panel ticket view specific header styles */
.ticket-view-header { /* Applied to .card-header-custom */
    background-color: var(--primary-color) !important;
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ticket-view-header .fas {
    color: white !important;
}

.ticket-view-header .status-badge {
    background-color: var(--info-color) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Add a subtle border */
    padding: 0.5em 1em; /* Make it a bit larger like the image */
    font-size: 0.9rem; /* Adjust font size */
    border-radius: 9999px; /* Fully rounded */
}

.ticket-view-header .btn { /* Buttons inside the ticket view header */
    background-color: var(--primary-hover); /* Solid background from primary color */
    border: 1px solid var(--primary-color); /* Ensure border matches */
    color: white; /* White text */
    padding: 0.6rem 1rem; /* Adjust padding */
    font-weight: 500; /* Slightly less bold than default buttons */
}
.ticket-view-header .btn:hover {
    background-color: var(--primary-hover); /* Keep background same or slightly darker on hover */
    border-color: var(--primary-color); /* Keep border same */
    filter: brightness(1.1); /* Slightly brighter on hover */
}

/* "Cevap Yaz" heading and form padding */
.card-body-custom h5.mt-4.mb-3 {
    padding-left: 1.5rem; /* Match card-body-custom padding */
}
.card-body-custom form.p-3 { /* Ensure reply form also has correct padding */
    padding: 1.5rem !important; /* Override if it was previously smaller */
}

/* Ensure reply button is standard btn-primary, not circular */
.card-body-custom button.btn-primary {
    border-radius: var(--radius); /* Ensure standard button radius */
    /* Removed fixed width/height for normal buttons */
    padding: 0.6rem 1.2rem; /* Standard padding */
}

/* Custom style for the "Ödeme Bilgileri" heading within payment details */
#payment_details_area h6 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark); /* Ensure text color is dark */
    margin-bottom: 1rem; /* Adjust spacing */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
}
#payment_details_area h6 i {
    color: var(--info-color); /* Info icon color as per image */
    font-size: 1.25em; /* Slightly larger icon */
}

/* --- Ödeme Detayları Mobil Uyumluluğu İyileştirmeleri --- */
/* Her bir bilgi satırı (label + value/button) için genel konteyner */
#method_specific_details > div {
    display: flex; /* Flexbox kullanmaya devam et */
    flex-direction: column; /* Etiket ve değer/buton grubunu alt alta hizala */
    align-items: flex-start; /* Tüm içeriği sola hizala */
    margin-bottom: 1rem; /* Satırlar arası boşluk */
    padding-bottom: 0.5rem; /* İçindeki öğelerden sonra küçük bir boşluk */
    border-bottom: 1px solid var(--border-color); /* İsteğe bağlı olarak ayırıcı çizgi */
}
#method_specific_details > div:last-child {
    margin-bottom: 0 !important; /* Son öğede boşluğu kaldır */
    padding-bottom: 0 !important;
    border-bottom: none !important; /* Son öğede ayırıcı çizgi olmasın */
}

/* Label metni (örn. "Network:", "Address:", "Bank Name:") */
#method_specific_details > div > span {
    font-weight: 700; /* Kalın yazılı olacak */
    color: var(--text-dark); /* Koyu renk */
    margin-bottom: 0.25rem; /* Değerle arasında küçük boşluk */
    line-height: 1.2;
    text-align: left; /* Sola hizala */
}

/* Değer (strong) ve kopyala butonu (button) grubunu içeren inner div */
#method_specific_details > div > div.d-flex.align-items-center.gap-2 {
    width: 100%; /* İçerik tüm genişliği kaplasın */
    justify-content: flex-start; /* İçindeki öğeleri sola hizala */
    flex-wrap: nowrap; /* Değer ve kopyala butonunun yan yana kalmasını sağla */
    min-width: 0; /* İçeriğin taşmasını önlemede kritik */
}

/* Değer metni (örn. "TRC20", adres, "Garanti Bankası") */
#method_specific_details strong {
    font-weight: normal; /* İnce yazılı olacak */
    word-break: break-all; /* Uzun metinleri kes */
    flex-grow: 1; /* Gerekirse yer kapla */
    min-width: 0; /* Metnin küçülmesine izin ver */
    text-align: left; /* Sola hizala */
}

/* Kopyala butonu */
#method_specific_details button.btn-copy-compact {
    flex-shrink: 0; /* Asla küçülmesini engelle */
    margin-left: 0.5rem; /* Değerden biraz boşluk */
}

/* QR Kodu görseli */
#method_specific_details img {
    display: block; /* Kendi satırına gelsin */
    margin-top: 1rem; /* Üstten boşluk */
    max-width: 300px; /* Belirlenmiş max genişlik */
    height: auto; /* Oranını koru */
    border-radius: var(--radius); /* Köşe yuvarlama */
    align-self: center; /* Ortalamak için */
}


/* Custom switch for settings (admin.html) */
.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    margin-left: -2.5em;
    background-color: var(--text-light);
    border: none;
    transition: background-color .25s ease-in-out;
}
.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
}
.form-switch .form-check-input:focus {
    box-shadow: none;
}
.form-check-label {
    color: var(--text-dark);
}


/* Mobil Offcanvas Specific Styles */
.offcanvas.offcanvas-end { /* index.html for categories */
    width: 300px;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--border-color);
    /* Görseldeki gibi yuvarlatılmış köşeler */
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}
.offcanvas.offcanvas-start { /* user_panel.html for sidebar */
    width: 280px;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border-color); /* Note: user_panel has border-right, index has border-left */
}

.offcanvas-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.offcanvas-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.offcanvas-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.offcanvas-body .list-group-flush {
    list-style: none;
    padding: 0;
    flex-grow: 1;
}
.offcanvas-body .list-group-flush .list-group-item {
    background-color: transparent !important;
    padding: 0;
    border: none;
    margin-bottom: 0.25rem;
}
/* New styles for main category toggles in offcanvas */
.offcanvas-body .list-group-item-category-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    color: var(--text-light) !important; /* Gri olacak */
    font-weight: 700; /* Bold for main categories */
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.offcanvas-body .list-group-item-category-toggle:hover {
    background-color: transparent !important; /* Arka plan yok */
    color: var(--primary-color) !important; /* Mavi olacak */
}
.offcanvas-body .list-group-item-category-toggle.collapsed .fa-chevron-down {
    transform: rotate(0deg);
}
.offcanvas-body .list-group-item-category-toggle:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}
.offcanvas-body .list-group-item-category-toggle .fas {
    font-size: 1rem; /* Adjust chevron size */
    color: var(--text-light); /* Gri olacak */
    transition: transform 0.2s ease, color 0.2s ease;
}
.offcanvas-body .list-group-item-category-toggle:not(.collapsed) .fas {
    color: var(--primary-color); /* Mavi olacak */
}

/* New styles for sub-category links in offcanvas */
.offcanvas-body .list-group-item-sub-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem; /* Smaller padding */
    padding-left: 0.5rem; /* Indent for sub-links */
    border-radius: var(--radius);
    color: var(--text-light) !important; /* Gri olacak */
    font-weight: 500;
    font-size: 0.9rem; /* Smaller font size */
    text-decoration: none;
    transition: all 0.2s ease;
}
.offcanvas-body .list-group-item-sub-link:hover {
    background-color: transparent !important; /* Arka plan yok */
    color: var(--primary-color) !important; /* Mavi olacak */
}
.offcanvas-body .list-group-item-sub-link.active {
    background-color: transparent !important; /* Arka plan yok */
    color: var(--primary-color) !important; /* Mavi olacak */
    box-shadow: none !important; /* Gölge yok */
    /* border-left: 4px solid var(--primary-color); Düzeltme: Sol kenarlık kaldırıldı */
    /* padding-left: calc(2.5rem - 4px); Düzeltme: Kenarlık kaldığı için padding kaldırıldı */
}
.offcanvas-body .list-group-item-sub-link i {
    width: 20px; /* Adjust icon width for sub-links */
    margin-right: 0.75rem;
    text-align: center;
    color: var(--text-light); /* Gri olacak */
    flex-shrink: 0;
}
/* Sub-link ikonları hover ve active durumlarda mavi olacak */
.offcanvas-body .list-group-item-sub-link:hover i,
.offcanvas-body .list-group-item-sub-link.active i {
    color: var(--primary-color) !important;
}


.offcanvas-body .btn-group-vertical {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.offcanvas-body .btn-group-vertical .btn {
    border-radius: var(--radius) !important;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
}
.offcanvas .sidebar-header { /* Offcanvas header for admin/user panels */
    font-size: 1.5rem;
    margin-bottom: 0;
}
.offcanvas .sidebar-nav .nav-link { /* Offcanvas nav links for admin/user panels */
     padding: 1rem 1rem;
     font-size: 1rem;
}
.offcanvas .sidebar-footer { /* Offcanvas footer for admin/user panels */
    padding: 1rem;
}


/* --- Responsive Ayarlamalar --- */

@media (max-width: 991.98px) { /* Medium and smaller screens (lg breakpoint) */
    body {
        overflow-y: auto; /* Mobil görünümde body'nin kendisi kaydırma çubuğu sağlar */
        overflow-x: hidden;
    }
    .dashboard-wrapper {
        flex-direction: column; /* Sidebar ve ana içeriği dikey yığ */
        margin: 0; /* Dış kenar boşluklarını kaldır */
        border-radius: 0; /* Köşe yuvarlamayı kaldır */
        box-shadow: none; /* Gölgeyi kaldır */
        height: auto; /* Yüksekliği içeriğe göre ayarla */
        min-height: 100vh; /* En az tam ekran yüksekliği */
        overflow: visible; /* İçerik taşmasına izin ver (body kaydırır) */
        margin-top: var(--header-height); /* Mobil için de header altına başla */
    }
    .sidebar { 
        display: none; /* Masaüstü sidebar'ı gizle */
        position: static; /* Sabit konumlandırmayı kaldır */
        width: 100%; /* Mobil sidebar offcanvas'ta ayrı yönetiliyor */
    } 
    .main-content { padding: 1rem; } /* İçerik dolgusunu azalt */
    .main-header {
        padding: 0.75rem 1rem;
        border-radius: 0; /* Tam genişlik için başlık köşe yuvarlamayı kaldır */
        margin-bottom: 0; /* DÜZELTİLDİ: Sabit başlığın altında boşluk olmamalı */
        border-bottom: 1px solid var(--border-color); /* Kullanıcı paneli için alt çizgi ekle */
    }
    /* index.html ana başlığı için özel */
    body:not(.dashboard-wrapper) .main-header { /* Sadece ana sayfa header'ı */
        border-radius: 0;
        margin-bottom: 0; /* DÜZELTİLDİ */
    }

    .page-title { font-size: 1.25rem; } /* Sayfa başlığı font boyutunu azalt */

    /* Kullanıcı paneline özel */
    .user-menu .dropdown-toggle span { display: none; } /* Küçük ekranlarda kullanıcı adını gizle */
    .mobile-toggler { display: block; } /* Mobil tetikleyiciyi göster */
    .card-custom { margin-bottom: 1rem; } /* Mobil kart marjını azalt */
    .dashboard-stat-card, .action-link { min-height: 120px; } /* Dashboard kart yüksekliklerini ayarla */
    .stat-card-value { font-size: 1.75rem; }
    .stat-card-icon-bg { font-size: 4rem; }

    /* index.html özel */
    .hero-new-design h1 { font-size: 2.2rem; }
    .hero-new-design p.lead { font-size: 1.0rem; }
    .hero-new-design .btn { font-size: 0.9rem; padding: 0.7rem 1.5rem; }
    h2 { font-size: 1.8rem; margin-bottom: 2.5rem; } /* General h2 on homepage */
    .package-popular-tag { /* Küçük ekranlar için konumu ayarla */
        top: 75px;
        right: -30px;
        font-size: 1.3rem;
        padding: 0.3rem 2.2rem;
    }

    /* Tüm tablolar için mobil ayarlamalar */
    .table-responsive table {
        width: 100%; /* Varsayılan genişlik, içerik gerekirse daha geniş olabilir */
        table-layout: auto; /* Sütunların içeriğe göre boyutlanmasına izin verir, yatay kaydırmayı etkinleştirir */
    }
    .table-responsive table th,
    .table-responsive table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    /* Tablo hücrelerinin varsayılan olarak sarmalamasını sağlar */
    .table thead th,
    .table tbody td,
    .table tbody th {
        white-space: nowrap; /* Masaüstü için standart tablo davranışı */
    }
    /* Tablo hücrelerindeki butonlar için */
    .table tbody td form,
    .table tbody td .btn {
        display: inline-block; /* Birden fazla buton/formun yan yana sığmasına izin verir */
        margin-bottom: 0; /* Yan yana olduğunda ekstra marjı kaldır */
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    .table tbody td form.d-inline,
    .table tbody td .d-inline {
        display: inline-block !important; /* Varsa Bootstrap'ın d-block'unu geçersiz kıl */
    }
    /* Küçük butonlar için özel stil */
    .table tbody td .btn-sm {
         font-size: 0.7rem;
         padding: 0.3rem 0.6rem;
    }
    /* Birden fazla butonun olduğu hücreler için (örn. admin bakiye) */
    .table tbody td:has(button[data-bs-target="#updateBalanceModal"]) {
        display: flex;
        flex-wrap: wrap; /* Butonların alana sığmazsa bir alt satıra geçmesine izin ver */
        gap: 0.25rem;
        align-items: center;
        justify-content: flex-start; /* Soldan başla */
    }

    /* Login/Register sayfaları ayarları */
    .login-container, .register-container {
        padding: 1.5rem; /* İç dolguyu ayarla */
    }
    /* auth-page-body'nin küçük ekranlarda dolgusu olduğundan emin ol */
    body.auth-page-body {
        padding: 1rem; /* Çok küçük ekranlar için dolgu ekle */
    }

    /* Mobil Görünümde page-content-wrapper'ın kendi kaydırma çubuğu olmasın */
    .page-content-wrapper {
        overflow-y: visible; /* Mobil görünümde kaydırmayı body'ye bırak */
        height: auto; /* Yüksekliğini içeriğine göre ayarla */
        min-height: 0; /* Flexbox düzeltmesi */
        margin-left: 0; /* Mobil görünümde sidebar sabitlenmediği için boşluk bırakma */
        padding: 1rem; /* Mobil panel içeriği padding'i */
    }
    /* page-content-wrapper içindeki main-content'in ekstra padding'e ihtiyacı yok */
    .page-content-wrapper > .main-content {
        padding: 0; 
    }
}

@media (max-width: 767.98px) { /* Küçük ve daha küçük ekranlar (md breakpoint) */
    /* index.html özel */
    .hero-new-design h1 { font-size: 2.0rem; }
    .hero-new-design p.lead { font-size: 1.0rem; }
    .hero-new-design .btn { font-size: 0.9rem; padding: 0.7rem 1.5rem; }
    h2 { font-size: 1.8rem; margin-bottom: 2.5rem; } /* General h2 on homepage */
    
    .tech-detail-card .tech-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    .tech-detail-card .card-title { font-size: 1.2rem; }

    .proxy-services-section .package-card { padding: 1.5rem; }
    .proxy-services-section .package-card .service-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    .proxy-services-section .package-card .service-icon { font-size: 2rem; }
    .proxy-services-section .package-name { font-size: 1.5rem; }
    .proxy-services-section .package-features { font-size: 0.95rem; }
    .proxy-services-section .package-features li {
        font-size: 0.9rem; /* Further reduced for smaller screens */
    }
    .proxy-services-section .btn-explore { padding: 0.6rem 1.2rem; font-size: 0.9rem; }


    .faq-section {
        padding: 2rem 0;
        margin-bottom: 3rem;
    }
    .accordion-button { font-size: 0.95rem; padding: 0.9rem 1.2rem; }
    .accordion-body { padding: 1rem 1.2rem; }

    /* Paket kartı ayarlamaları */
    .package-name { font-size: 1.5rem; }
    .package-current-price { font-size: 2rem; }
    .package-features li { font-size: 0.85rem; }
    .package-card .btn-buy { font-size: 1rem; }

    /* Admin paneli başlık butonları */
    .header-actions .btn.d-none.d-md-inline-block {
        display: none !important;
    }
}

@media (max-width: 575.98px) { /* Çok küçük ekranlar (sm breakpoint) */
    /* Offcanvas menü font boyutu */
    .offcanvas-body .list-group-flush .list-group-item a {
        font-size: 0.90rem; /* Çok küçük ekranlar için biraz daha küçük */
    }

    .hero-new-design h1 { font-size: 1.8rem; }
    .hero-new-design p.lead { font-size: 0.85rem; }
    .hero-new-design .btn { font-size: 0.85rem; padding: 0.6rem 1.2rem; }
    .hero-new-design .trustpilot-rating { font-size: 0.9rem; }
    .hero-new-design .hero-buttons { flex-direction: column; gap: 0.75rem;}
    .hero-new-design .hero-buttons .btn { width: 100%; }

    h2 { font-size: 1.4rem; margin-bottom: 2rem; } /* General h2 on homepage */

}