:root{
      --bg: #0b1020;
      --bg2:#070a14;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.08);
      --stroke: rgba(255,255,255,.12);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.65);

      --brand: #7c3aed;   /* mor */
      --brand2:#22c55e;   /* yeşil */
      --brand3:#06b6d4;   /* cyan */
      --danger:#ef4444;

      --r: 18px;
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --shadow2: 0 10px 30px rgba(0,0,0,.35);

      --wrap: 1180px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(124,58,237,.30), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(6,182,212,.18), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(34,197,94,.10), transparent 60%),

    /* DAHA KOYU KARARTMA */
    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.50)),

    url("background.png");

  background-size:
    auto,
    auto,
    auto,
    cover,
    cover;

  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
}

    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; height:auto; display:block; }
    button{ font-family:inherit; }
    .wrap{ width:min(var(--wrap), calc(100% - 32px)); margin-inline:auto; }

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(14px);
      background: rgba(10,14,30,.92);
      border-bottom: 1px solid var(--stroke);
    }
    .topbar__row{
      display:flex; align-items:center; gap:14px;
      padding:10px 0;
      flex-wrap:wrap;
    }
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      font-size:13px;
      color: var(--muted);
      white-space:nowrap;
    }
    .chip b{ color: var(--text); font-weight:600; }

        .chip2{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background: rgba(223, 161, 26, 0.712);
      border: 1px solid rgba(255,255,255,.10);
      font-size:13px;
      color: var(--muted);
      white-space:nowrap;
    }
    .chip2 b{ color: var(--text); font-weight:600; }


    .spacer{ flex:1; }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:10px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-weight:600;
      font-size:14px;
      transition:.18s transform, .18s background, .18s border;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
    .btn:active{ transform: translateY(0); }

    .btn--brand{
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.75));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 40px rgba(124,58,237,.18);
    }
    .btn--brand:hover{ background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,.85)); }
    .btn--ghost{
      background: transparent;
    }

     .btn--yellow{
      background: linear-gradient(135deg, rgba(238, 186, 17, 0.95), rgba(196, 209, 9, 0.75));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 40px rgba(124,58,237,.18);
    }
    .btn--yellow:hover{ background: linear-gradient(135deg, rgb(139, 184, 15), rgba(27, 203, 235, 0.85)); }
    .btn--ghost{
      background: transparent;
    }

         .btn--yellow2{
      background: linear-gradient(135deg, rgba(243, 151, 13, 0.95), rgba(226, 123, 6, 0.959));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 40px rgba(124,58,237,.18);
    }
    .btn--yellow2:hover{ background: linear-gradient(135deg, rgb(224, 175, 11), rgba(231, 209, 11, 0.85)); }
    .btn--ghost{
      background: transparent;
    }

    /* Language dropdown */
    .dd{ position:relative; }
    .dd > button{
      padding:10px 12px;
    }
    .dd__menu{
      position:absolute; right:0; top:calc(100% + 8px);
      width: 190px;
      background: rgba(10,14,30,.92);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      box-shadow: var(--shadow2);
      overflow:hidden;
      display:none;
    }
    .dd[aria-expanded="true"] .dd__menu{ display:block; }
    .dd__item{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      font-size:14px;
      color: var(--text);
      cursor:pointer;
      transition:.15s background;
    }
    .dd__item:hover{ background: rgba(255,255,255,.07); }
    .flag{
      width:22px; height:16px; border-radius:4px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      display:inline-block;
    }

    /* Nav */
    .nav{
      border-top: 1px solid rgba(4, 68, 121, 0.781);
    }
    .nav__row{
      display:flex; align-items:center; gap:14px;
      padding:12px 0;
      background-color: #1C276F;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .brand__logo{
      width:34px; height:34px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,197,94,.70));
      box-shadow: 0 10px 30px rgba(124,58,237,.18);
      border: 1px solid rgba(255,255,255,.18);
    }
    .brand__name{ font-size:15px; }
    .nav__links{
      display:flex; gap:10px; align-items:center;
      margin-left: 8px;
    }
    .nav__link{
      padding:10px 12px;
      border-radius:12px;
      color: var(--muted);
      border: 1px solid transparent;
      transition:.15s background,.15s color,.15s border;
      font-weight:600;
      font-size:14px;
      white-space:nowrap;
    }
    .nav__link:hover{
      color: var(--text);
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.10);
    }

    .burger{
      display:none;
      width:42px; height:42px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      cursor:pointer;
    }

    /* Mobile menu */
    .mnav{
      display:none;
      padding: 6px 0 14px;
    }
    .mnav a{
      display:block;
      padding:12px 12px;
      margin-top:8px;
      border-radius:14px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      color: var(--text);
      font-weight:650;
    }

    /* Hero */
    .hero{
      position:relative;
      padding: 26px 0 10px;
    }
    .hero__grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
      align-items:stretch;
    }
    .heroCard{
      border-radius: calc(var(--r) + 6px);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
      min-height: 260px;
    }
    .heroCard::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 240px at 10% 0%, rgba(124,58,237,.32), transparent 60%),
        radial-gradient(520px 240px at 90% 10%, rgba(6,182,212,.22), transparent 55%);
      pointer-events:none;
    }
.heroCard__inner{
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;

  background-image: url("hero-bg.jpg");
  background-size: cover;      /* alanı kaplasın */
  background-position: center; /* ortalansın */
  background-repeat: no-repeat;
}
    .heroTitle{
      font-size: clamp(22px, 2.4vw, 34px);
      line-height: 1.1;
      margin:0;
      letter-spacing: -.3px;
    }
    .heroTitle span{
      background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,1));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .heroText{
      margin:0;
      color: var(--muted);
      max-width: 60ch;
      line-height: 1.55;
      font-size: 14.5px;
    }
    .heroCtas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
    .miniStats{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 14px;
    }
    .stat{
      border-radius: 16px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      padding: 12px;
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
    }
    .stat small{ color: var(--muted); font-weight:600; display:block; }
    .stat b{ font-size: 18px; display:block; margin-top:6px; }

    /* Layout */
    .layout{
      display:grid;
      grid-template-columns: 310px 1fr 310px;
      gap: 18px;
      padding: 18px 0 28px;
      align-items:start;
    }

.card{
  border-radius: var(--r);
  background: rgba(0,0,0,.75);          /* daha koyu */
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
    .card__hd{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 14px;
      background-color: #1D2A78;
      border-bottom: 1px solid rgba(255,255,255,.10);
      gap:10px;
    }
    .card__title{
      margin:0;
      font-size: 14px;
      letter-spacing:.2px;
      font-weight:800;
    }
    .card__link{
      color: rgba(255,255,255,.75);
      font-size: 13px;
      font-weight:700;
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      transition:.15s background;
      white-space:nowrap;
    }
    .card__link:hover{ background: rgba(255,255,255,.08); }
    .card__bd{ padding: 14px; }

    /* Lists */
    .list{ display:flex; flex-direction:column; gap:10px; }
    .row{
      display:flex; gap:12px; align-items:center;
      padding: 10px 10px;
      border-radius: 16px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.09);
    }
    .pill{
      min-width: 28px;
      height: 28px;
      display:inline-flex; align-items:center; justify-content:center;
      border-radius: 10px;
      background: rgba(124,58,237,.22);
      border:1px solid rgba(124,58,237,.35);
      font-weight:800;
      font-size: 12px;
    }
    .row__main{ flex:1; min-width:0; }
    .row__main b{
      display:block;
      font-size: 14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .row__main small{
      display:block;
      color: var(--muted);
      margin-top:2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .row__end{
      color: rgba(255,255,255,.86);
      font-weight:800;
      font-size: 13px;
      white-space:nowrap;
    }

    /* News */
    .newsGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .news{
      border-radius: 18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      min-height: 140px;
      position:relative;
    }
    .news__bg{
      position:absolute; inset:0;
      background:
        radial-gradient(700px 220px at 15% 0%, rgba(124,58,237,.26), transparent 60%),
        radial-gradient(600px 220px at 80% 20%, rgba(6,182,212,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    }
    .news__inner{
      position:relative;
      padding: 14px;
      display:flex;
      flex-direction:column;
      gap: 8px;
      height:100%;
    }
    .news__inner h3{
      margin:0;
      font-size: 15px;
      font-weight:900;
      letter-spacing:.1px;
    }
    .news__inner p{
      margin:0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.5;
    }
    .news__cta{
      margin-top:auto;
      display:inline-flex;
      gap:10px;
      align-items:center;
      font-weight:800;
      font-size: 13px;
      color: rgba(255,255,255,.86);
      opacity:.95;
    }

    /* Announcements */
    .announce{
      display:flex; flex-direction:column; gap:10px;
    }
    .announce a{
      padding: 12px 12px;
      border-radius: 16px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      transition:.15s background, .15s transform;
    }
    .announce a:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
    .announce b{ display:block; font-size:14px; }
    .announce small{ display:block; margin-top:6px; color: var(--muted); font-weight:650; }

    /* Progress bar */
    .progress{
      width: 150px;
      height: 10px;
      border-radius: 999px;
      background: rgba(31, 216, 25, 0.1);
      border:1px solid rgba(7, 90, 11, 0.12);
      overflow:hidden;
      position:relative;
    }
    .progress > span{
      display:block;
      height:100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(34,197,94,1), rgba(6,182,212,1), rgba(124,58,237,1));
      transition: width .35s ease;
    }

    /* Footer */
    footer{
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(6,8,16,.6);
      padding: 20px 0 28px;
    }
    .footerGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items:start;
    }
    .footLinks{
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .footLinks a{
      padding:10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.80);
      font-weight:700;
      font-size: 13px;
    }
    .footLinks a:hover{ background: rgba(255,255,255,.08); }
    .copy{
      color: var(--muted);
      font-size: 13px;
      line-height:1.55;
    }

    /* Modal */
    .modal{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      display:none;
      z-index:80;
      padding: 18px;
    }
    .modal[open]{ display:grid; place-items:center; }
    .modal__card{
      width:min(780px, 100%);
      border-radius: 20px;
      background: rgba(10,14,30,.92);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .modal__hd{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 14px;
      border-bottom:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
    }
    .modal__hd b{ font-size: 14px; letter-spacing:.2px; }
    .modal__bd{
      padding: 14px;
      color: rgba(255,255,255,.84);
      max-height: 70vh;
      overflow:auto;
      line-height: 1.65;
      font-size: 14px;
    }
    .iconBtn{
      width:40px; height:40px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      display:grid; place-items:center;
    }

    /* Responsive */
    @media (max-width: 1080px){
      .layout{ grid-template-columns: 1fr; }
      .hero__grid{ grid-template-columns: 1fr; }
      .newsGrid{ grid-template-columns: 1fr; }
      .nav__links{ display:none; }
      .burger{ display:inline-grid; place-items:center; }
      .mnav[data-open="true"]{ display:block; }
      .progress{ width: 120px; }
      .footerGrid{ grid-template-columns: 1fr; }
    }