/* =========================================
   TASARIM SİSTEMİ (Metin2 Ember Teması)
   ========================================= */
:root{
  --primary:#B91C1C;  /* kızıl (ana vurgu) */
  --accent:#D97706;   /* kehribar/altın (sekonder) */
  --dark:#0B0E13;     /* koyu taş zemin */
  --panel:#141922;    /* panel/kart arka planı */
  --text:#F3F4F6;     /* metin rengi (açık) */
  --muted:#B8A98A;    /* soluk altın/deri tonu */
  --radius:16px;
  --shadow:0 12px 32px rgba(0,0,0,.35);
}

/* =========================================
   TEMEL (Body / Link)
   ========================================= */
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--dark);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }

/* =========================================
   NAVBAR
   ========================================= */
.navbar{
  background:rgba(11,14,19,.75);
  backdrop-filter:blur(6px);
  transition:all .3s ease;
  padding:.75rem 1rem;
}
.navbar.scrolled{
  background:rgba(11,14,19,.95);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  padding:.4rem 1rem;
}

/* Logo & Marka */
.navbar-brand{
  display:flex; align-items:center;
  font-weight:700; letter-spacing:.5px;
  font-size:1.25rem; color:var(--text);
}
.navbar-brand .logo{
  height:36px; width:auto;
  filter:brightness(1.15) contrast(1.05);
  transition:transform .2s ease, filter .2s ease;
}
.navbar-brand:hover .logo{ transform:scale(1.05); filter:brightness(1.25); }

/* Metin2 uyumlu brand gradient */
.brand-text{
  background:linear-gradient(90deg, #B91C1C, #D97706);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

/* Nav linkler */
.nav-link{
  font-weight:500; letter-spacing:.3px;
  position:relative; transition:color .2s ease;
}
.nav-link:hover,.nav-link:focus{ color:var(--accent); }
.nav-link::after{
  content:""; position:absolute; bottom:0; left:0;
  height:2px; width:0%; background:var(--accent);
  transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

/* Navbar buton */
.btn-buy-nav{
  padding:.5rem 1.1rem; border-radius:50px; font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-buy-nav:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(217,119,6,.35);
}

/* Responsive navbar */
@media (max-width:991px){
  .navbar{ background:rgba(11,14,19,.95); }
  .navbar-brand .logo{ height:32px; }
  .btn-buy-nav{ margin-top:.5rem; width:100%; }
}

/* =========================================
   HERO (kor alev hissi)
   ========================================= */
.hero{
  padding:96px 0;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(185,28,28,.28), transparent),
    radial-gradient(700px 450px at 100% 15%, rgba(217,119,6,.22), transparent),
    var(--dark);
}
.display-3{ font-weight:700; line-height:1.1; }
.lead{ color:var(--muted); }

/* =========================================
   PANEL & GENEL KARTLAR
   ========================================= */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid rgba(184,169,138,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =========================================
   PAKET KARTLARI
   ========================================= */
.card-pricing{
  background:var(--panel);
  border:1px solid rgba(184,169,138,.2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-pricing:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
}
.card-pricing.highlight{
  border:1px solid rgba(185,28,28,.38);
  box-shadow:0 0 35px rgba(185,28,28,.25);
}
/* Fiyat yazısı (kızıl→altın) */
.card-pricing .display-4{
  background:linear-gradient(90deg, #B91C1C, #D97706);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

/* Rozet (altın ton) */
.badge-soft{
  background:rgba(217,119,6,.14);
  color:#F59E0B;
  padding:.35rem .6rem;
  border-radius:999px; font-weight:600;
}

/* =========================================
   BUTONLAR
   ========================================= */
.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-primary:hover{
  filter:none;
  box-shadow:0 10px 26px rgba(217,119,6,.35);
  transform:translateY(-1px);
}
.btn-outline{ border:1px solid rgba(184,169,138,.35); color:var(--text); }
.btn-outline:hover{ background:rgba(184,169,138,.12); }

/* Bootstrap btn-link override */
.btn-link:hover,.btn-link:focus{ color:inherit!important; text-decoration:none; }

/* =========================================
   BÖLÜM BOŞLUKLARI
   ========================================= */
.section{ padding:80px 0; }

/* =========================================
   CHECK LİST
   ========================================= */
.check li{ position:relative; padding-left:28px; margin-bottom:.5rem; }
.check li:before{ content:"✔"; position:absolute; left:0; top:0; color:var(--accent); }

/* =========================================
   FAQ
   ========================================= */
.faq .card{ border-bottom:1px solid rgba(184,169,138,.18); }
.faq .card:last-child{ border-bottom:none; }
.faq-btn{ position:relative; width:100%; padding:1rem 3rem 1rem 1rem; color:var(--text); }
.faq-btn:hover{ text-decoration:none; filter:brightness(1.08); }
.faq-btn .q{ display:inline-block; font-weight:600; }
.faq-btn:after{
  content:""; position:absolute; right:16px; top:50%;
  width:10px; height:10px; transform:translateY(-50%) rotate(0deg);
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transition:transform .2s ease, border-color .2s ease;
}
.faq-btn[aria-expanded="true"]:after{ transform:translateY(-50%) rotate(45deg); border-color:var(--accent); }
.faq .card-body{ padding:0 1rem 1rem 1rem; }
.faq-search input.form-control{
  background:transparent; color:var(--text);
  border-color:rgba(184,169,138,.35);
}
.faq-search input.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(185,28,28,.25);
}

/* =========================================
   REFERANSLAR (kızıl+altın glow)
   ========================================= */
.references-section{
  position:relative; overflow:hidden; z-index:1;
  background:
    radial-gradient(800px circle at 50% 20%, rgba(185,28,28,.22), transparent),
    radial-gradient(600px circle at 80% 80%, rgba(217,119,6,.16), transparent),
    #0e1526;
}
.references-bg{
  content:""; position:absolute; top:-100px; left:-50px; right:-50px; bottom:-100px;
  background:linear-gradient(135deg, rgba(185,28,28,.22), rgba(217,119,6,.14));
  filter:blur(90px); opacity:.6; z-index:0;
}
.references-section .section-title{
  position:relative; display:inline-block; font-weight:700; letter-spacing:.5px; color:var(--text);
}
.references-section .section-title::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:90px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #B91C1C, #F59E0B);
  box-shadow:0 0 12px rgba(217,119,6,.55);
}
.logo-cloud img{
  height:64px; max-width:100%; opacity:1;
  filter:brightness(1.05) contrast(1.05) saturate(1.1);
  transition:all .35s ease; transform:scale(1);
}
.logo-cloud img:hover{
  transform:scale(1.1);
  filter:brightness(1.2) contrast(1.15) saturate(1.25);
}
.logo-cloud div{ position:relative; }
.logo-cloud div::after{
  content:""; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(185,28,28,.25);
  transform:translate(-50%,-50%); opacity:0;
  transition:all .4s ease; pointer-events:none;
}
.logo-cloud div:hover::after{ width:130%; height:130%; opacity:1; }

/* =========================================
   MÜŞTERİ YORUMLARI
   ========================================= */
.testimonial .stars{ color:var(--accent); font-size:1.1rem; }
.testimonial .quote{ color:var(--muted); }

/* =========================================
   GÖRSELLER & YARDIMCI
   ========================================= */
.thumb{ border-radius:12px; border:1px solid rgba(184,169,138,.2); }
.text-muted-2{ color:var(--muted)!important; }
.rounded-2xl{ border-radius:var(--radius); }

/* Back to top */
#backToTop{ position:fixed; right:16px; bottom:16px; display:none; z-index:1050; }

/* =========================================
   PAKETLER ARKA PLAN
   ========================================= */
.packs-section{
  background:
    radial-gradient(1000px circle at 50% 10%, rgba(185,28,28,.22), transparent),
    #0b0e13;
}

/* =========================================
   MODERN MODAL
   ========================================= */
.modern-modal{
  background:rgba(20,25,34,.92);
  border:1px solid rgba(184,169,138,.22);
  backdrop-filter:blur(12px);
  border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  color:var(--text);
  transform:translateY(6px) scale(.98);
  transition:transform .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.modal.show .modern-modal{
  transform:translateY(0) scale(1);
  box-shadow:0 20px 60px rgba(0,0,0,.65);
}
.modern-modal .form-control{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(184,169,138,.28);
  color:var(--text); border-radius:10px;
}
.modern-modal .form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(185,28,28,.25);
}
.text-accent{ color:var(--accent)!important; }
.price-row .price-chip{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  background:rgba(217,119,6,.14); color:#F59E0B; font-weight:600; font-size:.875rem;
}
.secure-note{ display:flex; align-items:center; color:var(--muted); font-size:.875rem; margin-top:.25rem; }
.secure-note .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:.5rem; }

/* Discord yardımcıları (varsa) */
.discord-online-badge{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  background:rgba(217,119,6,.14); color:#F59E0B; font-weight:600; font-size:.8rem;
}
#discordUser{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(184,169,138,.25);
  padding:.35rem .5rem; border-radius:8px; color:var(--text);
}

/* =========================================
   FOOTER
   ========================================= */
footer{
  padding:48px 0;
  border-top:1px solid rgba(184,169,138,.2);
}

/* =========================================
   RESPONSIVE GENEL
   ========================================= */
@media (max-width:767px){
  .section{ padding:60px 0; }
  .references-section .section-title::after{ width:70px; }
  .logo-cloud img{ height:52px; }
}


/* ===== TEK ÜRÜN VİTRİNİ (FULL PAGE) ===== */
.files-hero{
  min-height: 100vh;
  padding: 120px 0 80px; /* navbar boşluğu + alt nefes */
  position: relative;
  background:
    radial-gradient(1000px 520px at 15% -10%, rgba(185,28,28,.25), transparent),
    radial-gradient(800px 480px at 95% 90%, rgba(217,119,6,.18), transparent),
    var(--dark);
  overflow: hidden;
}
.files-hero-bg{
  position:absolute; inset:-20% -10% -20% -10%;
  background: linear-gradient(135deg, rgba(185,28,28,.18), rgba(217,119,6,.12));
  filter: blur(80px);
  opacity: .6;
  z-index: 0;
}
.files-hero .container{ position: relative; z-index: 1; }

.files-hero-thumb img{
  display:block; transform: scale(1.03);
  transition: transform .4s ease, filter .4s ease;
  filter: brightness(1.06) contrast(1.04);
}
.files-hero-thumb:hover img{
  transform: scale(1.07);
  filter: brightness(1.12) contrast(1.08) saturate(1.06);
}

/* etiketler */
.files-tags .tag{
  display:inline-block; margin:0 .35rem .35rem 0;
  padding:.25rem .6rem; border-radius:999px;
  background: rgba(217,119,6,.14);
  color:#F59E0B; font-weight:600; font-size:.82rem;
}

/* mini specs */
.specs-grid .spec{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(184,169,138,.18);
  border-radius: 12px;
  padding: .75rem .9rem;
}
.specs-grid .label{
  font-size:.8rem; color:var(--muted); margin-bottom:.15rem;
}
.specs-grid .val{
  font-weight:700; letter-spacing:.3px;
  background: linear-gradient(90deg, #B91C1C, #D97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(184,169,138,.45);
  border-radius:20px; display:flex; align-items:flex-start; justify-content:center;
  opacity:.8;
}
.scroll-cue span{
  display:block; width:4px; height:10px; margin-top:6px;
  background:#D97706; border-radius:2px; animation:cue 1.3s infinite;
}
@keyframes cue{
  0%{ transform: translateY(0); opacity:1; }
  100%{ transform: translateY(14px); opacity:0; }
}


/* =========================================
   VİDEOLAR BÖLÜMÜ
   ========================================= */
.videos-section {
  position: relative;
  background:
    radial-gradient(800px 400px at 50% 10%, rgba(185,28,28,.2), transparent),
    radial-gradient(600px 300px at 80% 85%, rgba(217,119,6,.15), transparent),
    var(--dark);
  overflow: hidden;
  z-index: 1;
}

.videos-section::before {
  content:"";
  position:absolute;
  top:-100px; left:-50px; right:-50px; bottom:-100px;
  background:linear-gradient(135deg, rgba(185,28,28,.25), rgba(217,119,6,.1));
  filter:blur(80px);
  opacity:.5;
  z-index:0;
}

/* Başlık alt çizgisi */
.videos-section .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 90px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #B91C1C, #D97706);
  box-shadow: 0 0 12px rgba(217,119,6,.55);
}

/* Kartlar */
.video-card {
  transition: transform .25s ease, box-shadow .25s ease;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(184,169,138,.18);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(217,119,6,.35);
}

/* Başlık */
.video-card h5 {
  font-weight: 600;
  color: var(--text);
}

/* Video kenar ışıltısı */
.video-thumb iframe {
  border: none;
  box-shadow: 0 0 16px rgba(217,119,6,.25);
  transition: box-shadow .3s ease;
}
.video-card:hover .video-thumb iframe {
  box-shadow: 0 0 24px rgba(217,119,6,.4);
}



/* =========================================
   ÖNE ÇIKAN ÖZELLİKLER
   ========================================= */
.features-section {
  position: relative;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(185,28,28,.25), transparent),
    radial-gradient(600px 300px at 85% 90%, rgba(217,119,6,.15), transparent),
    #0e1526;
  overflow: hidden;
}

.features-section::before {
  content:"";
  position:absolute;
  inset:-20% -10%;
  background:linear-gradient(135deg, rgba(185,28,28,.18), rgba(217,119,6,.12));
  filter:blur(90px);
  opacity:.55;
  z-index:0;
}

.features-section .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 90px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #B91C1C, #D97706);
  box-shadow: 0 0 12px rgba(217,119,6,.55);
}

/* kart */
.feature-card {
  position: relative;
  background: rgba(15,23,42,.95);
  border: 1px solid rgba(184,169,138,.15);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  transition: all .3s ease;
  z-index: 1;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(217,119,6,.35);
  border-color: rgba(217,119,6,.4);
}

/* ikon */
.feature-card .icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(217,119,6,.25), rgba(185,28,28,.15));
  color: #F59E0B;
  font-size: 1.75rem;
  box-shadow: 0 0 20px rgba(217,119,6,.15);
  transition: all .25s ease;
}
.feature-card:hover .icon-wrap {
  transform: scale(1.08);
  box-shadow: 0 0 28px rgba(217,119,6,.4);
  color: #FFD966;
}

/* Başlık */
.feature-card h5 {
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}


/* =========================================
   DISCORD BUTONU (NAV)
   ========================================= */
.btn-discord {
  background: linear-gradient(90deg, #5865F2, #4752C4);
  border: none;
  color: #fff !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  border-radius: 50px;
  box-shadow: 0 0 20px rgba(88,101,242,0.35);
}

.btn-discord:hover {
  background: linear-gradient(90deg, #6874FF, #5A64E0);
  box-shadow: 0 0 30px rgba(88,101,242,0.5);
  transform: translateY(-2px);
}

.btn-discord i {
  font-size: 1.1rem;
}

/* =========================================
   VİDEOLAR BÖLÜMÜ
   ========================================= */
.videos-section {
  position: relative;
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(109,40,217,.15), transparent),
    radial-gradient(600px 300px at 90% 80%, rgba(34,197,94,.1), transparent),
    #0e1526;
}

.video-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

/* 🎥 Sabit video boyutu */
.video-thumb {
  position: relative;
  height: 240px;        /* sabit yükseklik */
  overflow: hidden;
  border-radius: var(--radius);
}

.video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* videoyu çerçeveye sığdırır */
  border-radius: var(--radius);
}

/* Başlık kısmı */
.video-card h5 {
  font-weight: 600;
  color: var(--text);
  font-size: 1.05rem;
}
.video-card p {
  font-size: .9rem;
}

/* Mobil uyum */
@media (max-width: 767px) {
  .video-thumb {
    height: 200px;
  }
}




/* =========================================
   FAQ (Sıkça Sorulan Sorular)
   ========================================= */
.faq-section {
  position: relative;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(109,40,217,.25), transparent),
    radial-gradient(600px 400px at 85% 90%, rgba(34,197,94,.15), transparent),
    #0e1526;
  overflow: hidden;
}

.faq-section::before {
  content:"";
  position:absolute;
  inset:-100px;
  background:linear-gradient(135deg, rgba(109,40,217,.15), rgba(34,197,94,.1));
  filter:blur(100px);
  opacity:.5;
  z-index:0;
}

/* Başlık */
.faq-section .section-title::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:90px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow:0 0 12px rgba(109,40,217,.4);
}

/* Arama paneli */
.faq-search input.form-control {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,184,.25);
  color:var(--text);
  border-radius:10px;
}
.faq-search input.form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(109,40,217,.25);
}

/* =========================================
   TESTİMONİALS (Müşteri Yorumları)
   ========================================= */
.testimonials-section{
  position:relative;
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(185,28,28,.22), transparent),
    radial-gradient(700px 420px at 85% 95%, rgba(217,119,6,.16), transparent),
    var(--dark);
  overflow:hidden;
}
.testimonials-section::before{
  content:"";
  position:absolute; inset:-12% -6%;
  background:linear-gradient(135deg, rgba(185,28,28,.18), rgba(217,119,6,.12));
  filter:blur(90px); opacity:.55; z-index:0;
}

/* başlık alt çizgisi */
.testimonials-section .section-title{
  position:relative; display:inline-block;
}
.testimonials-section .section-title::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:90px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #B91C1C, #D97706);
  box-shadow:0 0 12px rgba(217,119,6,.5);
}

/* kart */
.testimonial{
  position:relative; z-index:1;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(184,169,138,.18);
  border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.testimonial .quote{ 
  color:var(--muted); 
}


/* ==== İKİ KATMANLI BAŞLIK ==== */
#siteHeader { z-index:1030; }

/* Üst satır */
.header-top{
  background: rgba(11,14,19,.95);
  border-bottom:1px solid rgba(184,169,138,.18);
}
.brand-left .logo{ height:38px; width:auto; filter:brightness(1.1); }
.brand-left .brand-text{
  background:linear-gradient(90deg,#B91C1C,#D97706);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:700;
}
.top-info .info-item{ color:var(--text); opacity:.9; }
.top-info .info-item:hover{ color:var(--accent); }

/* Alt satır (menü) */
.header-nav{
  background: rgba(11,14,19,.82);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(184,169,138,.12);
  transition: box-shadow .25s ease, background .25s ease;
}
.menu-centered .nav-link{
  padding:.75rem 1rem;
  font-weight:600; letter-spacing:.2px; position:relative;
}
.menu-centered .nav-link::after{
  content:""; position:absolute; left:50%; bottom:6px; width:0; height:2px;
  background: linear-gradient(90deg,#B91C1C,#D97706);
  transform:translateX(-50%); transition:width .22s ease;
}
.menu-centered .nav-link:hover::after{ width:60%; }

/* Scroll gölgesi */
body.header-scrolled .header-nav{
  background: rgba(11,14,19,.95);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}

/* Discord butonu küçük varyant */
.btn-discord.btn-sm{
  padding:.35rem .7rem; border-radius:999px; font-weight:600;
  background:linear-gradient(90deg,#5865F2,#4752C4); color:#fff!important; border:0;
}
.btn-discord.btn-sm:hover{ transform:translateY(-1px); box-shadow:0 0 18px rgba(88,101,242,.4); }

/* Navbar toggler görünürlüğü (koyu) */
.navbar-dark .navbar-toggler {
  border: none;
  outline: none;
}

.navbar-dark .navbar-toggler-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(229,231,235,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobil hizalama */
@media (max-width:991.98px){
  .header-nav .navbar-collapse{ text-align:center; }
}

/* ================== SİSTEMLER ================== */
.systems-section{
  position: relative;
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(185,28,28,.20), transparent),
    radial-gradient(700px 420px at 85% 95%, rgba(217,119,6,.14), transparent),
    var(--dark);
  overflow: hidden;
}
.systems-section .section-title{
  position: relative; display: inline-block;
}
.systems-section .section-title::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:90px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#B91C1C,#D97706);
  box-shadow:0 0 12px rgba(217,119,6,.5);
}

/* Filtre butonları */
.sys-filter .btn{
  border-color: rgba(184,169,138,.35);
  color: var(--text);
}
.sys-filter .btn.active,
.sys-filter .btn:hover{
  background: rgba(217,119,6,.14);
  border-color: rgba(217,119,6,.45);
  color: #F59E0B;
}

/* Kart */
.sys-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  background: rgba(15,23,42,.95);
  border:1px solid rgba(184,169,138,.18);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.sys-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(217,119,6,.35);
  border-color: rgba(217,119,6,.45);
}

/* Thumb */
.sys-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;        /* sabit oran (modern tarayıcılarda desteklenir) */
  overflow: hidden;
  border-bottom: 1px solid rgba(148,163,184,.1);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.sys-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* orantılı kırpma */
  transition: transform .3s ease;
}

.sys-item:hover .sys-thumb img {
  transform: scale(1.05);
}

/* Şerit */
.sys-ribbon{
  position:absolute; left:12px; top:12px;
  background: linear-gradient(90deg,#B91C1C,#D97706);
  color:#111; font-weight:700; font-size:.75rem;
  padding:.25rem .55rem; border-radius:999px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* İkon */
.sys-icon{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, rgba(217,119,6,.25), rgba(185,28,28,.12));
  color:#F59E0B; font-size:1rem;
  box-shadow:0 0 16px rgba(217,119,6,.15);
}

/* Etiketler */
.sys-tags .tag{
  display:inline-block; margin:0 .35rem .35rem 0;
  padding:.25rem .6rem; border-radius:999px;
  background: rgba(217,119,6,.14);
  color:#F59E0B; font-weight:600; font-size:.82rem;
}


/* =========================================
   SİSTEMLER MODAL — Sabit Görsel Boyutu
   ========================================= */
#sysCarousel .carousel-item img {
  height: 420px;
  width: 100%;
  object-fit: contain;  /* cover yerine contain */
  background-color: #0b1220; /* kenar boşluğu olursa zemin rengi */
  border-radius: var(--radius);
}

/* responsive ayar */
@media (max-width: 768px) {
  #sysCarousel .carousel-item img {
    height: 280px;
  }
}


/* =========================================
   DISCORD İLETİŞİM BÖLÜMÜ
   ========================================= */
.contact-discord {
  position: relative;
  background: radial-gradient(900px circle at 50% 20%, rgba(88,101,242,.15), transparent),
              #0e1526;
  overflow: hidden;
  z-index: 1;
}

.contact-discord::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(88,101,242,.3) 0%, transparent 70%);
  filter: blur(80px);
  opacity: .5;
  z-index: 0;
}

.discord-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid rgba(88,101,242,.25);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  max-width: 600px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.discord-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 46px rgba(88,101,242,.4);
}

.btn.btn-primary i {
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Davet linki kutusu */
#discordUser {
  display: inline-block;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.18);
  padding: .35rem .75rem;
  border-radius: 8px;
  color: var(--text);
  font-size: .95rem;
  font-family: monospace;
  transition: background .25s ease, border-color .25s ease;
}
#discordUser:hover {
  background: rgba(88,101,242,.15);
  border-color: rgba(88,101,242,.35);
}

/* Küçük ekran uyumu */
@media (max-width: 767px) {
  .discord-card {
    padding: 2.5rem 1.5rem;
  }
}





/* =========================================
   FOOTER TASARIMI
   ========================================= */
.site-footer {
  background: #0b1220;
  border-top: 1px solid rgba(148,163,184,.15);
  padding: 60px 0 30px;
  position: relative;
}

.footer-logo {
  height: 42px;
  filter: brightness(1.1) contrast(1.1);
}

.footer-nav a {
  color: var(--muted);
  font-weight: 500;
  margin: 0 .5rem;
  transition: color .25s ease;
}
.footer-nav a:hover {
  color: var(--accent);
}

.social-links .social-icon {
  display: inline-block;
  color: var(--muted);
  font-size: 1.25rem;
  margin-left: .75rem;
  transition: color .25s ease, transform .25s ease;
}
.social-links .social-icon:hover {
  color: var(--accent);
  transform: translateY(-3px);
}

/* Alt satır */
.footer-bottom {
  margin-top: 40px;
  position: relative;
}
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
  padding: 0.6rem 1.1rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  z-index: 1050;
}
.back-to-top i {
  margin-right: 6px;
  font-size: 0.9rem;
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  text-decoration: none;
}
.back-to-top.show {
  display: inline-flex;
}

/* Mobilde biraz küçültelim */
@media (max-width: 767px) {
  .back-to-top {
    bottom: 18px;
    right: 16px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
  }
  .back-to-top i {
    margin-right: 4px;
  }
}


/* =========================================
   MÜŞTERİ YORUMLARI GELİŞMİŞ
   ========================================= */
.testimonials-section {
  position: relative;
  background: radial-gradient(800px circle at 50% 20%, rgba(109,40,217,.15), transparent),
              radial-gradient(600px circle at 80% 80%, rgba(34,197,94,.12), transparent),
              #0e1526;
  overflow: hidden;
  z-index: 1;
}

/* Carousel öğesi */
.testimonials-section .carousel {
  position: relative;
  padding: 0 70px; /* sağ-sol boşluk ekleyelim, butonlar sığsın */
}

/* Navigasyon okları */
.testimonials-section .carousel-control-prev,
.testimonials-section .carousel-control-next {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(148,163,184,.25);
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.25s ease;
  z-index: 5;
}

.testimonials-section .carousel-control-prev:hover,
.testimonials-section .carousel-control-next:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 16px rgba(109,40,217,.35);
}

.testimonials-section .carousel-control-prev-icon,
.testimonials-section .carousel-control-next-icon {
  filter: invert(1) brightness(1.4);
  width: 18px;
  height: 18px;
}

.testimonials-section .carousel-control-prev {
  left: -30px; /* dışarı taşı */
}
.testimonials-section .carousel-control-next {
  right: -30px; /* dışarı taşı */
}

/* Carousel indicator dots */
.testimonials-section .carousel-indicators {
  bottom: -60px;
}
.testimonials-section .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(148, 163, 184, 0.4);
  transition: all 0.3s ease;
  margin: 0 6px;
}
.testimonials-section .carousel-indicators li.active {
  background-color: var(--accent);
  width: 12px;
  height: 12px;
  transform: translateY(1px); /* aktif nokta yukarı taşmasın */
}

/* Panel ve avatar halkası */
.testimonial .panel {
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.avatar-ring {
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.avatar-ring img {
  display: block;
  border-radius: 50%;
}

/* Responsive */
@media (max-width: 767px) {
  .testimonials-section .carousel {
    padding: 0 40px;
  }
  .testimonials-section .carousel-control-prev {
    left: -15px;
  }
  .testimonials-section .carousel-control-next {
    right: -15px;
  }
  .testimonials-section .carousel-indicators {
    bottom: -50px;
  }
}

/* =========================================
   BUTONLAR (Global)
   ========================================= */

/* Ana buton (mor tonlu) */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transition: all 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background: #5b21b6; /* biraz koyu mor hover tonu */
  border-color: #5b21b6;
  box-shadow: 0 0 20px rgba(109, 40, 217, 0.4);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: none;
}

/* Outline (şeffaf) buton */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, .35);
  color: var(--text);
  transition: all 0.25s ease;
}
.btn-outline:hover,
.btn-outline:focus {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(34,197,94, .08);
  box-shadow: 0 0 16px rgba(34,197,94, 0.2);
}

/* Discord butonu (özel renk paleti) */
.btn-discord {
  background: #5865F2;
  border: none;
  color: #fff;
  font-weight: 600;
  transition: all 0.25s ease;
}
.btn-discord:hover {
  background: #4752C4;
  box-shadow: 0 0 24px rgba(88, 101, 242, 0.4);
  transform: translateY(-2px);
}

/* Nav menü butonları */
.btn-buy-nav {
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.25s ease;
}
.btn-buy-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(109,40,217,0.3);
}

/* Disable edilmiş butonlar */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.navbar-nav.menu-centered .nav-link {
  text-transform: uppercase;          
  letter-spacing: 1.2px;              
  padding: 0.85rem 1.25rem;          
  font-size: 0.95rem;            
  font-weight: 600;
  color: var(--text) !important;
  transition: all 0.25s ease;
  border-radius: 10px;
}

/* Hover efekti */
.navbar-nav.menu-centered .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Aktif durum */
.navbar-nav.menu-centered .nav-link.active {
  background: rgba(109, 40, 217, 0.15);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.3);
}

/* Alt çizgi efekti – isteğe bağlı */
.navbar-nav.menu-centered .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.navbar-nav.menu-centered .nav-link:hover::after {
  transform: scaleX(1);
}