/* /assets/css/style.css */

:root{

  --bg:#070b18;

  --bg2:#0b1330;

  --card:#0f1b3a;

  --card2:#0d1730;

  --text:#eaf0ff;

  --muted:#b9c5ff;

  --line:rgba(255,255,255,.10);

  --a:#4b9bff;

  --b:#8a5bff;

  --shadow: 0 14px 40px rgba(0,0,0,.35);

  --radius:18px;

}


*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background: linear-gradient(180deg, var(--bg), var(--bg2));

  color: var(--text);

}


/* Wrap */

.wrap{max-width:1100px;margin:0 auto;padding:0 18px}


/* Header */

.site-header{

  position:sticky; top:0; z-index:50;

  background: rgba(8,12,28,.78);

  backdrop-filter: blur(10px);

  border-bottom:1px solid var(--line);

}

.header-top{

  display:flex; align-items:center; justify-content:space-between;

  padding:14px 18px;

  gap:14px;

}

.brand{

  display:flex; align-items:center; gap:10px;

  text-decoration:none; color:var(--text);

  min-width: 170px;

}

.brand-logo{width:36px;height:36px;object-fit:contain;border-radius:10px}

.brand-text{font-weight:800;letter-spacing:.6px}


.gradient-text{

  background: linear-gradient(90deg, var(--a), var(--b));

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  font-weight:800;

}


.follow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.follow-label{margin-right:6px}


.social-link{

  position:relative;

  display:inline-flex; align-items:center; gap:8px;

  padding:8px 10px;

  border:1px solid var(--line);

  border-radius:999px;

  text-decoration:none;

  color: #00e5ff

  background: rgba(255,255,255,.03);

  transition:.2s transform, .2s background, .2s border;

}

.social-link:hover{transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}

.social-icon{width:18px;height:18px;display:block}

.social-link .label{

  font-size:12px;

  opacity:0;

  width:0;

  overflow:hidden;

  transition:.2s ease;

}

.social-link:hover .label{

  opacity:1;

  width:auto;

}


/* Orijinal renk hissi */

.social-link.ig{border-color:rgba(255, 90, 160,.25)}

.social-link.tg{border-color:rgba(50, 170, 255,.25)}

.social-link.mail{border-color:rgba(255, 255, 255,.22)}


/* Nav */

.header-nav{padding:10px 18px 14px}

.main-nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.nav-link{

  text-decoration:none; color:var(--text);

  padding:10px 14px;

  border-radius:999px;

  border:1px solid transparent;

  transition:.2s background, .2s border;

  font-weight:650;

}

.nav-link:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10)}

.nav-link.active{

  border-color:rgba(80,160,255,.45);

  background: linear-gradient(90deg, rgba(75,155,255,.18), rgba(138,91,255,.18));

}


/* Hamburger (mobil) */

.hamburger{

  display:none;

  border:1px solid var(--line);

  background: rgba(255,255,255,.03);

  border-radius:12px;

  padding:10px;

  cursor:pointer;

}

.hamburger .bar{

  display:block; width:22px; height:2px; background:var(--text);

  margin:4px 0; border-radius:2px;

}


/* Splash */

#splash{

  position:fixed; inset:0;

  background: radial-gradient(800px 420px at 50% 40%, rgba(75,155,255,.20), transparent 55%),

              linear-gradient(180deg, rgba(7,11,24,.95), rgba(7,11,24,.98));

  display:none;

  place-items:center;

  z-index:999;

}

#splash.show{display:grid}

.splash-mascot{width:min(180px, 34vw); height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}

.splash-bubble{

  margin-top:14px;

  background: rgba(255,255,255,.06);

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

  padding:12px 14px;

  border-radius:14px;

  max-width: 520px;

  text-align:center;

  color: var(--text);

  font-weight:700;

}


/* Hero */

.hero-wrap{position:relative; padding:34px 0 12px}

.starfield{

  position:absolute; inset:0;

  background-image:

    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.55), transparent 60%),

    radial-gradient(2px 2px at 180px 90px, rgba(255,255,255,.35), transparent 60%),

    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.35), transparent 60%),

    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.25), transparent 60%),

    radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.25), transparent 60%);

  opacity:.7;

  pointer-events:none;

}

.hero{

  position:relative;

  display:flex; flex-direction:column; align-items:center; text-align:center;

  gap:12px;

  padding:14px 0 8px;

}

.hero-mascot{

  width:min(220px, 42vw);

  height:auto;

  filter:drop-shadow(0 16px 40px rgba(0,0,0,.35));

}

.hero-title{

  font-size: clamp(28px, 4.5vw, 44px);

  margin:0;

  font-weight:900;

  letter-spacing:.3px;

}

.hero-sub{

  margin:0;

  color: var(--muted);

  font-weight:650;

}


/* Ticker */

.ticker-wrap{padding:12px 0 18px}

.ticker{

  overflow:hidden;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background: rgba(255,255,255,.03);

}

.ticker-inner{

  display:inline-flex;

  gap:28px;

  padding:10px 18px;

  white-space:nowrap;

  animation: ticker 22s linear infinite;

}

.ticker:hover .ticker-inner{animation-play-state:paused}

.ticker-item{color:var(--text); font-weight:700}

@keyframes ticker{

  from{transform:translateX(0)}

  to{transform:translateX(-50%)}

}


/* Section base */

.section{padding:26px 0}

.section h1{margin:0 0 10px; font-size:34px}

.section h2{margin:0 0 10px; font-size:22px}

.section p{color:var(--muted); font-weight:600; line-height:1.55}


/* Cards grid */

.grid{

  display:grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap:16px;

}

.card{

  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));

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

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding:16px;

}

.card .mini-row{display:flex; align-items:center; justify-content:space-between; gap:10px}

.badge{

  font-size:12px;

  padding:6px 10px;

  border-radius:999px;

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

  background: rgba(255,255,255,.05);

  color: var(--text);

  font-weight:800;

}

.card-title{font-weight:900; margin:10px 0 6px}

.card-desc{margin:0; color:var(--muted); font-weight:650}

.btn{

  display:inline-flex; align-items:center; justify-content:center;

  padding:10px 14px;

  border-radius:14px;

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

  background: linear-gradient(90deg, rgba(75,155,255,.35), rgba(138,91,255,.35));

  color: var(--text);

  text-decoration:none;

  font-weight:900;

  margin-top:12px;

}

.btn:hover{filter:brightness(1.08)}


/* Placeholder box for “Yakında” */

.placeholder{

  display:flex; align-items:center; gap:12px;

  min-height:110px;

}

.placeholder img{

  width:74px; height:74px; object-fit:contain;

  opacity:.95;

}

.placeholder .text{

  display:flex; flex-direction:column; gap:4px;

}

.placeholder .soon{

  font-weight:950;

  letter-spacing:.6px;

}

.placeholder .note{

  color: var(--muted);

  font-weight:650;

}


/* Footer */

.site-footer{

  margin-top:26px;

  border-top:1px solid var(--line);

  background: rgba(255,255,255,.02);

}

.footer-top{

  display:flex; align-items:center; justify-content:space-between;

  gap:14px;

  padding:16px 18px;

  flex-wrap:wrap;

}

.footer-links a{

  color: var(--muted);

  text-decoration:none;

  font-weight:700;

}

.footer-links a:hover{color:var(--text)}

.footer-links .dot{opacity:.6; margin:0 8px}

.footer-social{display:flex; gap:10px; flex-wrap:wrap}

.footer-bottom{

  padding:10px 18px 18px;

  color: rgba(234,240,255,.75);

  font-weight:650;

  text-align:center;

}


/* Responsive */

@media (max-width: 860px){

  .follow{display:none}

  .hamburger{display:block}

  .header-nav{display:none}

  .header-nav.open{display:block}

  .grid{grid-template-columns:1fr}

}

/* ===============================
   NAV LIST SAFETY (if UL is used)
================================= */
.main-nav ul, .main-nav ol{
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li{ list-style: none; }

/* ===============================
   DROPDOWN - EA PAKETLERİ (DESKTOP + MOBILE)
   Kullanılan HTML: <div class="has-dropdown"> ... <div class="dropdown">...</div>
================================= */

.has-dropdown{
  position: relative;
  display: inline-flex; /* flex nav ile uyumlu */
  align-items: center;
}

.has-dropdown > .nav-link{
  display: inline-flex;
  align-items: center;
}

/* dropdown panel */
.has-dropdown .dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  min-width: 220px;
  padding: 10px 0;

  background: rgba(8,12,28,.95);
  backdrop-filter: blur(12px);

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

  box-shadow: 0 20px 40px rgba(0,0,0,.45);

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

  z-index: 9999;
}

/* hover open */
.has-dropdown:hover .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* links inside dropdown */
.has-dropdown .dropdown a{
  padding: 12px 18px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  transition: background .2s ease, padding-left .2s ease;
  white-space: nowrap;
}

.has-dropdown .dropdown a:hover{
  background: rgba(255,255,255,.08);
  padding-left: 22px;
}

/* Prevent parent from clipping dropdown */
.header-nav, .main-nav{
  overflow: visible !important;
}

/* MOBILE: hamburger açıkken dropdown görünür, kapalıyken gizli */
@media (max-width: 860px){
  .has-dropdown{
    width: 100%;
    display: block;
  }
  .has-dropdown > .nav-link{
    width: 100%;
  }
  .has-dropdown .dropdown{
    position: static;
    top: auto;
    left: auto;
    min-width: 0;

    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0 0 10px;

    opacity: 1;
    visibility: visible;
    transform: none;

    display: none; /* default kapalı */
  }

  .header-nav.open .has-dropdown .dropdown{
    display: flex; /* hamburger açılınca göster */
  }

  .has-dropdown .dropdown a{
    padding: 8px 0;
  }
}