/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'Nordvik';
  src: url('fonts/nordvik.regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


body{
  background:#0b0e14;
  color:#fff;
}

.brand-name{
  font-family: 'Nordvik', Arial, sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
}

img {
  max-width: 100%; /* Görsel konteyneri aşmaz */
  height: auto;    /* Oranı bozulmaz */
  display: block;  /* Gereksiz boşlukları kaldırır */
  margin: 0 auto;  /* Ortalamak için */
}

#slotragImage {
  width: 300px;   /* İstediğiniz sabit genişlik */
  height: auto;
}

#instagramImage {
  width: 150px;
  height: auto;
}


/* ================= HEADER ================= */
.top-bar{
  background:linear-gradient(180deg,#1b1b1b 0%, #0f1116 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

.brand-link{
  text-decoration: none;
  color: inherit;
  display: inline-block;
}


.top-inner{
  height:78px;
  max-width:1180px;
  margin:0 auto;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}


.btn-about{

  /* HAREKETİ KİLİTLEYENLER */
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 14px;
  font-weight: 600;
}

/* Hover'da SADECE renk değişsin */
.btn-about:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.15);
  font-weight: 600;          /* değişmesin */
  transform: translateY(-50%); /* aynen kalsın */
}

/* Sol brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.brand-avatar{
  width:80px;
  height:80px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  background:rgba(255,255,255,.06);
}
.brand-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.brand-name{
  color:#f5c542;
  font-weight:900;
  letter-spacing:3px;
  font-size:50px;
}

/* Orta sosyal */
.social{
  display:flex;
  gap:12px;
  justify-content:center;
  flex:1;
}

/* Sağ butonlar */
.right-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  min-width:320px;
}

/* Genel btn */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 18px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  font-size:12px;
  letter-spacing:.5px;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  transition:.18s ease;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.btn-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(255,255,255,.14);
}

.btn-icon img{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
  filter:brightness(1.1);
}

/* Header buton renkleri (bunlar kart renkleri değil) */
.btn-telegram{  background:linear-gradient(90deg,#a7b4c5,#0a3f9c); }
.btn-instagram{ background:linear-gradient(90deg,#c9b6c1,#a000ff); }
.btn-youtube{   background:linear-gradient(90deg,#406f34,#000000); }
.btn-green{     background:linear-gradient(90deg,#000000,#0a3f9c); }
.btn-gold{      background:linear-gradient(90deg,#f3b400,#8a5a00); }

.top-inner{
  position: relative; /* referans */
}

.btn-about {
  background-color: #E0B12F;
  color: #111; /* koyu yazı daha şık durur */
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 6px;
  transition: 0.2s ease;
}

.btn-about:hover {
  background-color: #C99A1A; /* hover'da biraz koyulaşsın */
}

.btn-about {
  background-color: #1a1a1a;
  color: #E0B12F;
  border: 1px solid #E0B12F;
}


.live-pill{
  position: absolute;
  left: -140px;          /* 🔥 brand'in üstünden kurtarır */
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}


@media (max-width: 720px){
  .live-pill{
    position: static !important;
    transform: none !important;
    margin: 0 0 10px 0;   /* sola */
  }
}


.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;

  background:rgba(15,15,15,.65);
  border:1px solid rgba(255,60,60,.35);

  color:#e9e9e9;
  font-weight:800;
  font-size:14px;
  text-decoration:none;

  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff2b2b;
  box-shadow:0 0 10px rgba(255,43,43,.8);
  animation:livePulse 1.2s infinite ease-in-out;
}

@keyframes livePulse{
  0%   { transform:scale(1);   opacity:1;   }
  50%  { transform:scale(1.6); opacity:.45; }
  100% { transform:scale(1);   opacity:1;   }
}



/* ================= BANNER SLIDER ================= */



.banner{
  padding:18px 0 8px;
}

.slider{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:0 22px;
  overflow:visible;
}

.banner {
    background-color: transparent; /* Şeffaf arka plan */
}

.banner {
    background-image: url('banner.png');
    background-color: transparent;
}


.slider-viewport{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  background:rgba(255,255,255,.03);
}

.slider-track{
  display:flex;
  will-change:transform;
  transform:translateX(0);
}

.slide{
  flex:0 0 100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

/* 🔥 DÜZELTİLEN GÖRSEL */
.slide img{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;          /* sabit height kaldırıldı */
  display:block;
  object-fit:contain;   /* kırpma yok */
  opacity:1 !important;
}

/* Blur Arkaplan */
.slide::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg);
  background-size:cover;
  background-position:center;
  filter:blur(18px);
  transform:scale(1.08);
  opacity:.55;
  z-index:0;
}

.slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.25);
}

/* 📱 MOBİL */
@media (max-width:768px){

  .slide{
    aspect-ratio:16 / 9;   /* Mobil daha yüksek görünür */
  }

}


/* Oklar */
.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:28px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  transition:.15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  z-index:1000;
  pointer-events:auto;
}

.slider-btn:hover{
  transform:translateY(-50%) scale(1.05);
  background:rgba(0,0,0,.45);
}

.slider-btn.prev{ left:30px; }
.slider-btn.next{ right:30px; }


/* Noktalar */
.slider-dots{
  display:flex;
  gap:8px;
  justify-content:center;
  padding:12px 0 0;
}

.slider-dots button{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.12);
  cursor:pointer;
  transition:.15s ease;
}

.slider-dots button.active{
  width:22px;
  background:rgba(10,169,255,.75);
  border-color:rgba(10,169,255,.65);
  box-shadow:0 0 14px rgba(10,169,255,.45);
}


/* Mobil Optimizasyon */
@media (max-width:768px){
  .slider{
    padding:0 10px;
  }

  .slider-btn.prev{ left:10px; }
  .slider-btn.next{ right:10px; }
}


/* ================= SECTION TITLE ================= */
.section-title{
  position:relative;
  margin:42px auto 22px;
  padding:14px 36px;
  width:fit-content;
  border-radius:999px;
  font-size:18px;
  letter-spacing:3px;
  font-weight:900;
  text-transform:uppercase;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
}
.section-title::before,
.section-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:160px;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,#0aa9ff,transparent);
  filter:drop-shadow(0 0 10px rgba(10,169,255,.7));
}
.section-title::before{ right:calc(100% + 26px); }
.section-title::after{ left:calc(100% + 26px); }

/* ================= CARDS (SADECE BG RESİM) ================= */
.cards{
  max-width:1120px;
  margin:0 auto;
  padding:0 22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* Kart */
.card{
  position:relative;
  min-height:120px;
  padding:16px;
  border-radius:16px;
  text-decoration:none;
  color:#fff;
  overflow:hidden;

  background:transparent; /* Renk yok */
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  transition:.18s ease;
}
.card:hover{
  transform:translateY(-3px);
  filter:brightness(1.04);
}

/* Arkaplan resim */
.card-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:1;            /* resim tam görünsün */
  filter:none;          /* blur yok */
  z-index:0;
}

/* Okunurluk için karartma (istersen opaklığı azalt/çoğalt) */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.55),
    rgba(0,0,0,.25),
    rgba(0,0,0,.55)
  );
  z-index:1;
}

/* Hafif parlama/border ışıltısı */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  z-index:2;
  pointer-events:none;
}

/* İçerik üstte */
.card img,
.card h3,
.card .cta{
  position:relative;
  z-index:3;
}

.card img{
  width:120px;
  height:36px;
  object-fit:contain;
  margin-bottom:10px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.card h3{
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  text-align:left;
}

/* Buton */
.card .cta{
  position:absolute;
  right:0px;
  bottom:0px;
  height:25px;
  padding:0 8px;
  border-radius:999px;

  /* SARiYI KALDIRDIK */
  background: rgba(15,15,15,.55);
  color:#fff;

  font-size:9px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.35);

 
  -webkit-backdrop-filter: blur(6px);

  transition:.2s ease;
}

.card .cta:hover{
  transform: translateY(-1px);
  background: rgba(15,15,15,.70);
  border-color: rgba(255,255,255,.28);
}

.card .cta{
  /* üstteki kod aynı */
  box-shadow:0 10px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(245,197,66,.35);
}



/* Renk class’ları artık kartı boyamasın (sadece isim kalsın) */
.purple, .green, .blue, .gold, .red{ background:transparent; }

/* ================= FOOTER ================= */


/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .slide img{ height:200px; }
  .slider-btn.prev{ left:22px; }
  .slider-btn.next{ right:22px; }
  .right-actions{ min-width:auto; }
  .brand{ min-width:auto; }
}

@media(max-width:720px){
  .top-inner{
    height:auto;
    padding:14px 16px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .brand{ width:100%; justify-content:center; }
  .social{ width:100%; justify-content:center; }
  .right-actions{ width:100%; justify-content:center; flex-wrap:wrap; }
  .section-title::before,
  .section-title::after{ display:none; }
}

@media(max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .slide img{ height:170px; }
  .slider-btn{ display:none; }
}

body{
  background-image: url("images/site-bg.png"); /* BURAYA RESMİN */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* scroll’da sabit dursun */
  color:#fff;
}


body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(11,14,20,.78); /* koyuluk */
  z-index:-1;
}

.site-footer {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #aaa;
  padding: 30px 0;
}

.site-footer a {
  color: #aaa;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* İletişim alanındaki linkler */
.page-card a,
.contact a,
.iletisim a {
  color: #f1c86a;              /* soft gold */
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color .25s ease, opacity .25s ease;
}

/* Alt çizgi animasyonu */
.page-card a::after,
.contact a::after,
.iletisim a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(241,200,106,.85);
  transition: width .25s ease;
}

.page-card a:hover,
.contact a:hover,
.iletisim a:hover {
  color: #ffd77d;
}

.page-card a:hover::after,
.contact a:hover::after,
.iletisim a:hover::after {
  width: 100%;
}

.page-card a[title]{
  border-bottom:1px dashed rgba(245,197,66,.55);
  padding-bottom:1px;
}
.page-card a[title]:hover{
  opacity:.9;
  border-bottom-color: rgba(245,197,66,.95);
}

.menu-btn{
position:fixed;
left:15px;
top:25px;
font-size:20px;
background:none;
border:none;
color:white;
cursor:pointer;
z-index:9999;
}

.side-menu{
position:fixed;
top:0;
right:-300px;
width:300px;
height:100%;
background:#0b0e14;
padding:40px 20px;
transition:0.4s;
z-index:9998;
box-shadow:-5px 0 20px rgba(0,0,0,0.5);
}

.side-menu a{
display:block;
padding:12px 0;
color:white;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.side-menu.open{
right:0;
}

.side-menu{
position:fixed;
top:0;
left:-300px;
width:300px;
height:100%;
background:#0b0e14;
padding:40px 20px;
transition:0.4s;
z-index:9998;
box-shadow:5px 0 20px rgba(0,0,0,0.5);
}

.side-menu.open{
left:0;
}

body{
transform: translateZ(0);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #fff;
  font-family: 'Arial', sans-serif;
}

.btn-instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-instagram .btn-icon img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.btn-instagram:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn-instagram:hover .btn-icon img {
  transform: scale(1.2) rotate(15deg);
}

.btn-text {
  letter-spacing: 1px;
  font-size: 14px;
}

/* Mobil uyumlu */
@media (max-width: 480px) {
  .btn {
    padding: 8px 12px;
    gap: 6px;
  }

  .btn-text {
    font-size: 12px;
  }

  .btn-icon img {
    width: 20px;
    height: 20px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #fff;
  font-family: 'Arial', sans-serif;
}

.btn .btn-icon img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn:hover .btn-icon img {
  transform: scale(1.2) rotate(15deg);
}

.btn .btn-text {
  letter-spacing: 1px;
  font-size: 14px;
}

/* Instagram butonu rengi */
.btn-instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Kick butonu rengi */
.btn-kick {
  background: linear-gradient(45deg, #ff0000, #ff4b4b, #ff1a1a);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Mobil uyumlu */
@media (max-width: 480px) {
  .btn {
    padding: 8px 12px;
    gap: 6px;
  }

  .btn .btn-text {
    font-size: 12px;
  }

  .btn .btn-icon img {
    width: 20px;
    height: 20px;
  }
}