:root{

    --primary:#0d6efd;
    --primary2:#2563eb;

    --dark:#0f172a;

    --body:#f4f7fb;

    --text:#1e293b;

    --muted:#94a3b8;

    --white:#ffffff;

    --success:#22c55e;
    --danger:#ef4444;

    --shadow:
    0 10px 35px rgba(0,0,0,.08);

    --radius:20px;
}

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

body{

    font-family:'Poppins',sans-serif;

    background:var(--body);

    color:var(--text);
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}



.main-gradient{



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);

}



.shadow-modern{

box-shadow:var(--shadow);

}



.radius{

border-radius:var(--radius);

}



.topbar{



height:42px;



background:#071120;



display:flex;

align-items:center;



font-size:14px;

}



.topbar a{



color:#cbd5e1;



margin-right:20px;



transition:.3s;

}



.topbar a{

color:white;

}



.custom-navbar {

position: fixed;

top: 0; /* En tepeden başlatıyoruz */

left: 0;

width: 100%;

z-index: 999;

padding: 20px 0;

background: transparent;



/* Topbar'ın (42px) altında kalması için ilk başta transform ile aşağı itiyoruz */

transform: translateY(42px); 



/* Tüm geçişleri transform ve background üzerinden yapıyoruz */

transition: transform 0.3s ease, background 0.3s ease, padding 0.3s ease;

}



.custom-navbar.scrolled {

/* Sayfa kaydığında transformu sıfırlayıp tam tepeye çekiyoruz */

transform: translateY(0); 

padding: 12px 0;

background: rgba(7, 17, 32, 0.92);

backdrop-filter: blur(12px);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.logo-box{



display:flex;

align-items:center;

}



.logo-icon{



width:55px;

height:55px;



border-radius:18px;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



display:flex;

align-items:center;

justify-content:center;



color:white;



font-size:24px;



margin-right:15px;

}



.logo-title{



color:white;



font-size:24px;



font-weight:700;

}



.logo-sub{



color:#94a3b8;



font-size:13px;

}



.nav-link{



color:white !important;



font-weight:500;



margin:0 10px;



position:relative;

}



.nav-link::after{



content:'';



position:absolute;



left:0;

bottom:-6px;



width:0;

height:2px;



background:#0d6efd;



transition:.3s;

}



.nav-link:hover::after,

.nav-link.active::after{



width:100%;

}



.btn-register{



height:48px;



padding:0 24px;



border-radius:14px;



border:1px solid rgba(255,255,255,.15);



color:white;



margin-right:12px;



display:flex;

align-items:center;

}



.btn-login{



height:48px;



padding:0 24px;



border-radius:14px;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



display:flex;

align-items:center;



border:none;

}



.btn-login,

.btn-register{



color:white;



transform:translateY(-2px);

}



.hero-section{



min-height:100vh;



background:

linear-gradient(

    rgba(4,10,25,.82),

    rgba(4,10,25,.88)

),



url('../images/hero-bg.jpg');



background-size:cover;

background-position:center;



position:relative;



overflow:hidden;

}



.hero-badge{



display:inline-flex;

align-items:center;



padding:10px 18px;



border-radius:50px;



background:

rgba(255,255,255,.08);



backdrop-filter:blur(8px);



color:white;



margin-bottom:30px;

}



.hero-badge i{

margin-right:10px;

}



.hero-title{



font-size:72px;



line-height:1.1;



font-weight:700;



color:white;



margin-bottom:25px;

}



.hero-text{



color:#cbd5e1;



font-size:18px;



line-height:1.9;



margin-bottom:40px;

}



.hero-buttons{

display:flex;

gap:18px;

}



.hero-btn-primary{



height:58px;



padding:0 35px;



border-radius:16px;



display:flex;

align-items:center;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



font-weight:600;

}



.hero-btn-secondary{



height:58px;



padding:0 35px;



border-radius:16px;



display:flex;

align-items:center;



border:1px solid rgba(255,255,255,.12);



color:white;

}



.hero-image img{



width:100%;



animation:float 4s ease-in-out infinite;

}



@keyframes float{



0%{

    transform:translateY(0px);

}



50%{

    transform:translateY(-18px);

}



100%{

    transform:translateY(0px);

}

}



.packages-section{



padding:120px 0;



background:#f8fbff;

}



.section-title-area{



margin-bottom:70px;

}



.section-badge{



display:inline-block;



padding:10px 20px;



border-radius:50px;



background:

rgba(13,110,253,.1);



color:#0d6efd;



font-weight:600;



margin-bottom:20px;

}



.section-title{



font-size:52px;



font-weight:700;



color:#0f172a;



margin-bottom:20px;

}



.section-text{



color:#64748b;



font-size:18px;

}



.package-card{



position:relative;



background:white;



border-radius:30px;



padding:45px;



box-shadow:

0 10px 40px rgba(0,0,0,.06);



transition:.4s;



overflow:hidden;



height:100%;

}



.package-card{



transform:translateY(-10px);



box-shadow:

0 25px 60px rgba(13,110,253,.18);

}



.active-package{



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



transform:scale(1.04);

}



.active-package .package-features li,

.active-package .package-price span{



color:rgba(255,255,255,.85);

}



.popular-badge{



position:absolute;



top:20px;

right:20px;



background:white;



color:#0d6efd;



font-size:13px;



font-weight:700;



padding:8px 16px;



border-radius:50px;

}



.package-name{



font-size:28px;



font-weight:700;



margin-bottom:25px;

}



.package-price{



font-size:60px;



font-weight:700;



line-height:1;



margin-bottom:35px;

}



.package-price span{



font-size:16px;



font-weight:400;



color:#64748b;

}



.package-features{



list-style:none;



padding:0;



margin:0 0 35px;

}



.package-features li{



display:flex;

align-items:center;



margin-bottom:18px;



color:#475569;

}



.package-features i{



color:#22c55e;



margin-right:12px;



font-size:18px;

}



.package-btn{



width:100%;



height:58px;



border-radius:16px;



display:flex;

align-items:center;

justify-content:center;



font-weight:600;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



border:none;

}



.active-package .package-btn{



background:white;



color:#0d6efd;

}



.product-detail-section{



padding:180px 0 120px;



background:#f4f7fb;

}



.product-detail-card,

.product-buy-box{



background:white;



border-radius:30px;



padding:40px;



box-shadow:

0 10px 40px rgba(0,0,0,.06);

}



.product-category{



display:inline-block;



padding:10px 18px;



border-radius:50px;



background:

rgba(13,110,253,.1);



color:#0d6efd;



margin-bottom:20px;

}



.product-title{



font-size:52px;



font-weight:700;



margin-bottom:20px;

}



.product-desc{



color:#64748b;



margin-bottom:40px;



line-height:1.9;

}



.product-specs{



display:grid;



grid-template-columns:

repeat(2,1fr);



gap:20px;

}



.spec-item{



display:flex;



align-items:center;



padding:22px;



border-radius:20px;



background:#f8fbff;

}



.spec-icon{



width:55px;

height:55px;



border-radius:16px;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



display:flex;

align-items:center;

justify-content:center;



margin-right:18px;



font-size:22px;

}



.spec-title{



font-size:14px;



color:#64748b;

}



.spec-text{



font-size:18px;



font-weight:600;

}



.price-box{



padding:25px;



border-radius:20px;



background:#f8fbff;



margin-bottom:30px;

}



.price-label{



color:#64748b;



margin-bottom:10px;

}



.dynamic-price{



font-size:42px;



font-weight:700;



color:#0d6efd;

}



.buy-btn{



height:58px;



border:none;



border-radius:16px;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



font-weight:600;

}

/* ==========================================================================

İÇ SAYFALARI ANASAYFA İLE UYUMLU YAPMA (TUTARLI NAVBAR)

========================================================================== */



/* İç sayfanın ana kartlarını navbarın altına girmesi ve şeffaflığın

korunması için yukarı taşıyoruz (Tipik Hero mantığı) */

.product-detail-section {

padding-top: 160px !important; /* Navbar ve Topbarın altında ezilmesin */

background: #0f172a; /* İlk açılışta navbarın arkası anasayfa gibi koyu başlasın */

position: relative;

}



/* Sayfanın alt kısımları yine senin o istediğin açık gri/beyaz tonda kalmaya devam eder */

.product-detail-section::before {

content: '';

position: absolute;

top: 300px; /* Belirli bir noktadan sonra arka plan beyaz fona döner */

left: 0;

width: 100%;

height: calc(100% - 300px);

background: #f4f7fb;

z-index: 1;

}



/* Detay kartlarının beyaz zeminin üzerinde kalmasını garanti ediyoruz */

.product-detail-section .container {

position: relative;

z-index: 2;

}



.clientarea-section{



padding:180px 0 120px;



background:#f4f7fb;



min-height:100vh;

}



.client-sidebar{



background:white;



border-radius:30px;



padding:35px;



box-shadow:

0 10px 40px rgba(0,0,0,.06);

}



.client-user{



text-align:center;



margin-bottom:35px;

}



.client-avatar{



width:90px;

height:90px;



border-radius:50%;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



display:flex;

align-items:center;

justify-content:center;



color:white;



font-size:32px;



font-weight:700;



margin:auto auto 20px;

}



.client-menu a{



display:flex;

align-items:center;



height:56px;



padding:0 20px;



border-radius:16px;



color:#475569;



margin-bottom:12px;



transition:.3s;

}



.client-menu a,

.client-menu a.active{



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;

}



.client-menu i{



margin-right:14px;

}



.dashboard-card{



background:white;



border-radius:24px;



padding:30px;



display:flex;

align-items:center;



box-shadow:

0 10px 40px rgba(0,0,0,.06);

}



.dashboard-icon{



width:70px;

height:70px;



border-radius:20px;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



display:flex;

align-items:center;

justify-content:center;



color:white;



font-size:28px;



margin-right:20px;

}



.dashboard-title{



color:#64748b;



margin-bottom:5px;

}



.dashboard-value{



font-size:34px;



font-weight:700;

}



/* ==========================================================================

MÜŞTERİ PANELİ SAYFASINI ANASAYFA İLE UYUMLU YAPMA (TUTARLI NAVBAR)

========================================================================== */



/* Panel ana alanını navbarın altına girmesi ve şeffaflığın korunması için yukarı taşıyoruz */

.clientarea-section {

padding-top: 160px !important; /* Navbar ve Topbarın altında ezilmesin */

background: #0f172a; /* İlk açılışta navbarın arkası anasayfa gibi koyu başlasın */

position: relative;

min-height: 100vh; /* Sayfa kısa kalsa bile arka plan boydan boya kaplasın */

}



/* Sayfanın alt kısımları yine senin o istediğin açık gri/beyaz tonda kalmaya devam eder */

.clientarea-section::before {

content: '';

position: absolute;

top: 300px; /* Belirli bir noktadan sonra arka plan beyaz fona döner */

left: 0;

width: 100%;

height: calc(100% - 300px);

background: #f4f7fb;

z-index: 1;

}



/* Panel içerik kartlarının beyaz zeminin üzerinde kalmasını garanti ediyoruz */

.clientarea-section .container {

position: relative;

z-index: 2;

}



/* Ekstra Görsel Dokunuş: Koyu arka planda kalan başlıkların veya

kartların üstte temiz durması için gerekirse padding ayarı */

.client-sidebar, .dashboard-card {

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Yumuşak bir gölge ile kartları öne çıkar */

}





/* ==========================================================================

NAVBAR BUTONLARI HİZALAMA VE DÜZENLEME

========================================================================== */



/* Menü listesinin (ul) butonları sağa doğru itmesini garanti ediyoruz */

.navbar-nav {

flex-grow: 1;

}



/* Buton kapsayıcısını sağa yaslıyor ve dikeyde tam ortalıyoruz */

.navbar-buttons {

display: flex !important;

flex-direction: row !important;

align-items: center !important;

justify-content: flex-end;

gap: 12px;

margin-left: auto; /* Sağ köşede kalmasını garanti eder */

}



/* Çıkış yap butonunun şeffaf arka planını ve sınırlarını korurken yüksekliğini eşitliyoruz */

.navbar-buttons .btn-register {

height: 48px !important;

display: inline-flex !important;

align-items: center !important;

justify-content: center !important;

margin-right: 0 !important; /* Eski kalan payı sıfırla */

white-space: nowrap; /* Yazının alt satıra kaymasını engeller */

}



/* Müşteri paneli butonunun yüksekliğini ve içindeki ikon düzenini eşitliyoruz */

.navbar-buttons .btn-login {

height: 48px !important;

display: inline-flex !important;

align-items: center !important;

justify-content: center !important;

white-space: nowrap;

}



/* İkonların metinlerle olan dikey hizasını sıfırlayalım */

.navbar-buttons i {

font-size: 16px;

margin-right: 8px; /* Kodda me-2 yerine CSS ile temiz boşluk verelim */

display: inline-flex;

align-items: center;

}



/* Mobil Ekranlar İçin Tasarımın Patlamasını Engelleme */

@media (max-width: 991.98px) {

.navbar-buttons {

    margin-top: 20px;

    justify-content: center;

    width: 100%;

    margin-left: 0;

}

.btn-register, .btn-login {

    flex: 1;

    justify-content: center;

}

}





.cart-section{



padding:180px 0 120px;



background:#f4f7fb;



min-height:100vh;

}



.cart-card,

.summary-card{



background:white;



border-radius:30px;



padding:35px;



box-shadow:

0 10px 40px rgba(0,0,0,.06);

}



.cart-item{



display:flex;



justify-content:space-between;



align-items:center;



padding:25px 0;



border-bottom:

1px solid #eef2f7;

}



.cart-item-left{



display:flex;



align-items:center;

}



.cart-icon{



width:70px;

height:70px;



border-radius:20px;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



display:flex;



align-items:center;

justify-content:center;



color:white;



font-size:28px;



margin-right:20px;

}



.cart-title{



font-size:22px;



font-weight:700;



margin-bottom:8px;

}



.cart-specs{



color:#64748b;



margin-bottom:6px;

}



.cart-period{



display:inline-block;



padding:6px 14px;



border-radius:50px;



background:

rgba(13,110,253,.1);



color:#0d6efd;



font-size:14px;

}



.cart-price{



font-size:28px;



font-weight:700;



margin-bottom:12px;

}



.remove-btn{



width:42px;

height:42px;



border-radius:12px;



background:#ef4444;



color:white;



display:flex;



align-items:center;

justify-content:center;

}



.summary-item,

.summary-total{



display:flex;



justify-content:space-between;



margin-bottom:20px;

}



.summary-total{



font-size:28px;



font-weight:700;

}



.checkout-btn{



width:100%;



height:58px;



border:none;



border-radius:16px;



display:flex;



align-items:center;

justify-content:center;



background:

linear-gradient(

    135deg,

    #0d6efd,

    #2563eb

);



color:white;



font-weight:600;



margin-top:35px;

}









.checkout-section{



padding:180px 0 120px;



background:#f4f7fb;



min-height:100vh;

}



.checkout-card{



background:white;



border-radius:30px;



padding:35px;



box-shadow:

0 10px 40px rgba(0,0,0,.06);

}



.payment-item{



display:flex;



align-items:center;



padding:24px;



border-radius:20px;



border:

1px solid #eef2f7;



margin-bottom:20px;



cursor:pointer;



transition:.3s;

}



.payment-item{



border-color:#0d6efd;

}



.payment-item input{



width:22px;

height:22px;



margin-right:18px;

}



.payment-title{



font-size:20px;



font-weight:600;



margin-bottom:5px;

}



.payment-text{



color:#64748b;

}



.summary-product{



display:flex;



justify-content:space-between;



margin-bottom:18px;

}



.summary-product-title{



font-weight:600;

}



.summary-product-cycle{



color:#64748b;



font-size:14px;



margin-top:5px;

}



.summary-product-price{



font-weight:700;

}











.invoice-summary{



margin-top:30px;

}



.payment-method-box{



padding:25px;



border-radius:20px;



background:#f8fbff;

}



.bank-line{



margin-bottom:15px;



color:#334155;

}





.service-detail-card{



background:#f8fbff;



border-radius:24px;



padding:30px;

}



.detail-line{



margin-bottom:18px;



color:#334155;

}



.power-actions{



display:flex;



flex-wrap:wrap;



gap:15px;

}



.power-btn{



height:52px;



padding:0 22px;



border:none;



border-radius:16px;



color:white;



font-weight:600;

}



.power-btn.start{



background:#22c55e;

}



.power-btn.stop{



background:#ef4444;

}



.power-btn.reboot{



background:#f59e0b;

}



.power-btn.rebuild{



background:#8b5cf6;

}



.power-btn.console{



background:#0d6efd;

}







.payment-success-section{

padding-top:30px;

padding-bottom:120px;

background:#f4f7fb;

min-height:100vh;

}



.success-wrapper{

max-width:700px;

margin:auto;

background:#fff;

border-radius:24px;

padding:60px;

box-shadow:

0 10px 40px rgba(0,0,0,0.06);

text-align:center;

}



.success-icon{

width:110px;

height:110px;

background:linear-gradient(

135deg,

#22c55e,

#16a34a

);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

margin-bottom:30px;

color:#fff;

font-size:55px;

}



.success-title{

font-size:42px;

font-weight:800;

color:#0f172a;

margin-bottom:12px;

}



.success-subtitle{

color:#64748b;

font-size:17px;

line-height:30px;

margin-bottom:45px;

}



.success-card{

background:#f8fafc;

border-radius:18px;

padding:30px;

margin-bottom:40px;

}



.success-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

border-bottom:1px solid #e2e8f0;

}



.success-row{

border-bottom:none;

}



.success-row .left{

color:#64748b;

font-weight:600;

}



.success-row .right{

font-weight:700;

color:#0f172a;

}



.success-paid{

color:#22c55e !important;

}



.success-buttons{

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;

}



.success-btn{

height:54px;

padding:0 35px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

text-decoration:none;

transition:.3s;

}



.primary-btn{

background:linear-gradient(

135deg,

#2563eb,

#1d4ed8

);

color:#fff;

}



.primary-btn{

transform:translateY(-3px);

color:#fff;

}



.secondary-btn{

background:#eef2ff;

color:#1e293b;

}



.secondary-btn{

background:#dbeafe;

color:#1e293b;

}









.client-sidebar{

background:#fff;

border-radius:22px;

padding:20px;

box-shadow:

0 10px 30px rgba(0,0,0,0.05);

}



.sidebar-link{

height:58px;

border-radius:14px;

display:flex;

align-items:center;

gap:14px;

padding:0 18px;

text-decoration:none;

color:#0f172a;

font-weight:600;

margin-bottom:10px;

transition:.3s;

}



.sidebar-link{

background:#f1f5f9;

color:#2563eb;

}



.sidebar-link.active{

background:linear-gradient(

135deg,

#2563eb,

#1d4ed8

);

color:#fff;

}



.sidebar-link i{

font-size:20px;

}



.logout-link{

margin-top:25px;

color:#ef4444;

}