:root{
      --aven-dark:#0b1020;
      --aven-dark-2:#101a34;
      --aven-text:#eef2ff;
      --aven-muted:rgba(238,242,255,.72);
      --aven-card:rgba(255,255,255,.07);
      --aven-stroke:rgba(255,255,255,.12);
      --aven-shadow: 0 22px 70px rgba(0,0,0,.45);
      --aven-radius: 22px;
      --wa:#25D366;
      --grad1:#7c3aed;
      --grad2:#38bdf8;
    }

    html,body{ height:100%; }
    body{
      padding-top: 86px; /* fixed navbar offset */
      background:
        radial-gradient(1200px 700px at 18% 12%, rgba(124,58,237,.35), transparent 55%),
        radial-gradient(900px 650px at 82% 18%, rgba(56,189,248,.22), transparent 55%),
        linear-gradient(180deg, var(--aven-dark), var(--aven-dark-2));
      color: var(--aven-text);
    }

    section{ scroll-margin-top: 100px; }
    .muted{ color: var(--aven-muted); }

    /* NAVBAR: %100 sabit */
    .nav-fixed{
      position: fixed !important;
      top: 0; left: 0; right: 0;
      z-index: 1100;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(10,14,28,.70) !important;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .brand-badge{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    /* HERO */
    .hero{
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-30%;
      background:
        radial-gradient(circle at 20% 30%, rgba(124,58,237,.35), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(34,197,94,.18), transparent 40%),
        radial-gradient(circle at 70% 85%, rgba(56,189,248,.18), transparent 45%);
      filter: blur(45px);
      animation: drift 12s ease-in-out infinite alternate;
      opacity:.9;
      pointer-events:none;
    }
    @keyframes drift{
      from{ transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1deg); }
      to{ transform: translate3d(2%, 1%, 0) scale(1.06) rotate(1deg); }
    }

    .hero-card{
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--aven-shadow);
      border-radius: calc(var(--aven-radius) + 6px);
      overflow: hidden;
    }
    .hero-card::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(800px 420px at 35% 15%, rgba(255,255,255,.10), transparent 60%);
      pointer-events:none;
    }

    .badge-soft{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.85);
    }

    /* Cards */
    .glass{
      background: var(--aven-card);
      border: 1px solid var(--aven-stroke);
      border-radius: var(--aven-radius);
      box-shadow: 0 16px 50px rgba(0,0,0,.25);
    }

    /* Projects */
    .tile{
      position:relative;
      overflow:hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      min-height: 220px;
      display:block;
      text-decoration:none;
      color: var(--aven-text);
    }
    .tile img{
      width:100%;
      height: 260px;
      object-fit: cover;
      display:block;
      opacity:.92;
      transform: scale(1.02);
      transition: transform .35s ease, opacity .35s ease;
    }
    .tile:hover img{ transform: scale(1.08); opacity:1; }
    .tile .cap{
      position:absolute;
      left:0; right:0; bottom:0;
      padding: 14px 14px 12px;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
    }

    /* WhatsApp */
    .btn-wa{
      background: linear-gradient(135deg, rgba(37,211,102,.98), rgba(16,185,129,.92));
      border: 1px solid rgba(255,255,255,.16);
      color:#fff;
      box-shadow: 0 18px 45px rgba(16,185,129,.20);
    }
    .btn-wa:hover{ filter: brightness(1.05); color:#fff; }

    .wa-float{
      position: fixed;
      right: 18px;
      bottom: 48px; /* yukarıda */
      z-index: 1200;
      text-decoration:none;
      color:#fff;
      border-radius: 999px;
      padding: 12px 14px;
      display:flex;
      gap:10px;
      align-items:center;
      background: linear-gradient(135deg, rgba(37,211,102,.98), rgba(16,185,129,.92));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 22px 55px rgba(16,185,129,.22);
      transition: transform .15s ease, filter .15s ease;
    }
    .wa-float:hover{ transform: translateY(-2px); filter: brightness(1.04); color:#fff; }
    .wa-bubble{
      width: 36px; height: 36px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.20);
      border: 1px solid rgba(255,255,255,.22);
    }

    /* Reveal */
    .reveal{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.show{ opacity: 1; transform: translateY(0); }

    /* FOOTER */
    footer{
      border-top: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(900px 420px at 15% 10%, rgba(124,58,237,.22), transparent 60%),
        radial-gradient(900px 420px at 85% 10%, rgba(56,189,248,.16), transparent 60%),
        rgba(0,0,0,.18);
    }

    .foot-title{ font-weight: 700; letter-spacing: .2px; margin-bottom: 10px; }
    .foot-link{
      color: rgba(238,242,255,.70);
      text-decoration:none;
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding: 6px 0;
    }
    .foot-link:hover{ color: rgba(238,242,255,.95); text-decoration: underline; }

 

    @media (max-width: 576px){
      body{ padding-top: 78px; }
      .wa-float{ bottom: 92px; }
    }

    @media (prefers-reduced-motion: reduce){
      .hero::before{ animation:none !important; }
      .tile img{ transition:none !important; }
      .reveal{ transition:none !important; }
    }

    /* HERO slider (Bootstrap Carousel) */
    .hero-slider{
      border-radius: 18px;
      overflow: hidden;
    }
    .hero-slider .carousel-item img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      display:block;
    }
    .hero-slider .carousel-item{
      transition: transform .7s ease, opacity .7s ease;
    }
    .hero-slider .carousel-control-prev,
    .hero-slider .carousel-control-next{
      width: 44px;
      height: 44px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 999px;
      background: rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(6px);
    }
    .hero-slider .carousel-control-prev{ left: 10px; }
    .hero-slider .carousel-control-next{ right: 10px; }
    .hero-slider .carousel-indicators [data-bs-target]{
      width: 10px;
      height: 10px;
      border-radius: 999px;
    }
    /* Page header / hero */
    .page-hero{
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .page-hero::before{
      content:"";
      position:absolute;
      inset:-30%;
      background:
        radial-gradient(circle at 20% 30%, rgba(124,58,237,.30), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(56,189,248,.20), transparent 45%);
      filter: blur(45px);
      opacity:.9;
      pointer-events:none;
    }

    .hero-cover{
      border-radius: calc(var(--aven-radius) + 8px);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--aven-shadow);
      background: rgba(0,0,0,.16);
    }
    .hero-cover img{
      width:100%;
      height: 420px;
      object-fit: cover;
      display:block;
      opacity:.95;
    }

    /* Gallery thumbnails */
    .thumb{
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      cursor: pointer;
      display:block;
    }
    .thumb img{
      width:100%;
      height: 120px;
      object-fit: cover;
      display:block;
      transition: transform .25s ease, opacity .25s ease;
      opacity:.92;
    }
    .thumb:hover img{ transform: scale(1.06); opacity:1; }