/* ============================================================
   COACHTURBO — stil
   ============================================================ */

:root{
  --siyah:      #04070a;
  --siyah-2:    #080d12;
  --kart:       #0d141b;
  --kart-2:     #111a22;
  --cizgi:      rgba(255,255,255,.09);
  --cizgi-2:    rgba(255,255,255,.16);

  --neon:       #00e0ff;
  --neon-koyu:  #00b4d8;
  --neon-soft:  rgba(0,224,255,.14);

  --beyaz:      #ffffff;
  --gri:        #9fb0bd;
  --gri-2:      #6d7f8c;

  --wrap:       1240px;
  --r:          18px;
  --r-sm:       12px;

  --font-b:     'Outfit', system-ui, sans-serif;   /* başlıklar */
  --font-m:     'Inter', system-ui, sans-serif;    /* metin */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:104px; }

body{
  background:var(--siyah);
  color:var(--beyaz);
  font-family:var(--font-m);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- ortak tipografi ---------- */
.h2{
  font-family:var(--font-b);
  font-weight:800;
  font-size:clamp(28px, 4vw, 46px);
  line-height:1.12;
  letter-spacing:-.02em;
}
.h2 em{ color:var(--neon); font-style:normal; }

.kicker{
  display:block;
  font-family:var(--font-b);
  font-weight:700;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--neon);
  margin-bottom:14px;
}

.lead{
  color:var(--gri);
  font-size:16px;
  max-width:56ch;
}
.lead--ortali{ margin-inline:auto; }

.ortali{ text-align:center; margin-bottom:56px; }
.ortali .kicker{ margin-bottom:12px; }
.ortali .lead{ margin-top:16px; }

/* ---------- butonlar ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-b);
  font-weight:600;
  font-size:15px;
  padding:15px 28px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.25s ease;
  white-space:nowrap;
}
.btn::after{
  content:"→";
  font-size:16px;
  transition:transform .25s ease;
}
.btn:hover::after{ transform:translateX(4px); }

.btn--primary{
  background:var(--neon);
  color:#02171d;
  box-shadow:0 0 0 0 rgba(0,224,255,.45);
}
.btn--primary:hover{
  background:#3ceaff;
  box-shadow:0 10px 34px -8px rgba(0,224,255,.55);
  transform:translateY(-2px);
}

.btn--ghost{
  border-color:var(--cizgi-2);
  color:var(--beyaz);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:var(--neon); color:var(--neon); }

.btn--sm{ padding:11px 22px; font-size:14px; }
.btn--sm::after{ display:none; }
.btn--lg{ padding:18px 36px; font-size:16px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:.3s ease;
}
.nav.sabit{
  background:rgba(4,7,10,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi);
}
/* nav ve hero ekranın kenarlarına kadar açılır */
.nav__in,
.hero__in,
.strip__in{
  max-width:100%;
  padding-inline:clamp(24px, 3.4vw, 64px);
}

.nav__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:94px;
}
.nav__logo img{ height:60px; width:auto; }

.nav__links{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav__links > a{
  font-family:var(--font-b);
  font-weight:500;
  font-size:15px;
  color:var(--gri);
  transition:color .2s;
  position:relative;
}
.nav__links > a:not(.btn):hover,
.nav__links > a.aktif{ color:var(--beyaz); }
.nav__links > a.btn--primary{ color:#02171d; }   /* CTA metni koyu kalsın */
.nav__links > a:not(.btn)::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-7px;
  height:2px;
  background:var(--neon);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
}
.nav__links > a.aktif::before{ transform:scaleX(1); }

.nav__burger{
  display:none;
  width:44px; height:44px;
  background:none;
  border:1px solid var(--cizgi-2);
  border-radius:10px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.nav__burger span{
  width:18px; height:2px;
  background:var(--beyaz);
  transition:.3s;
}
.nav__burger.acik span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.acik span:nth-child(2){ opacity:0; }
.nav__burger.acik span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  filter:saturate(1.05) contrast(1.05);
}
.hero__veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 80% at 15% 40%, rgba(4,7,10,.94) 0%, rgba(4,7,10,.6) 45%, rgba(4,7,10,.25) 70%),
    linear-gradient(180deg, rgba(4,7,10,.85) 0%, rgba(4,7,10,.25) 35%, rgba(4,7,10,.92) 100%);
}
.hero__in{
  padding-top:150px;
  padding-bottom:64px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero__title{
  font-family:var(--font-b);
  font-weight:900;
  font-size:clamp(38px, 7.2vw, 82px);
  line-height:1.02;
  letter-spacing:-.035em;
  max-width:15ch;
}
.hero__title .satir{ display:block; }
.hero__title .vurgu{ color:var(--neon); }
.hero__text{
  margin-top:26px;
  max-width:52ch;
  color:#c9d6de;
  font-size:clamp(15px, 1.3vw, 18px);
}
.hero__btns{
  margin-top:38px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* şerit */
.strip{
  position:relative;
  border-top:1px solid var(--cizgi);
  background:rgba(4,7,10,.55);
  backdrop-filter:blur(10px);
}
.strip__in{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.strip__oge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:22px 26px;
  font-family:var(--font-b);
  font-weight:500;
  font-size:14px;
  color:#c2d0da;
  border-left:1px solid var(--cizgi);
}
.strip__oge:first-child{ border-left:0; padding-left:0; }
.strip__oge svg{ width:20px; height:20px; color:var(--neon); flex:none; }

/* ============================================================
   NEDEN BEN
   ============================================================ */
.ozellik{
  background:#f4f8fa;
  color:#0a1219;
  padding:96px 0;
}
.ozellik__in{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 2.4fr;
  gap:48px;
  align-items:start;
}
.ozellik__head .h2{ color:#0a1219; }
.ozellik__head .kicker{ color:var(--neon-koyu); }

.ozellik__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.oz-kart{
  background:#fff;
  border:1px solid #e3ecf1;
  border-radius:var(--r);
  padding:28px 22px;
  transition:.28s ease;
}
.oz-kart:hover{
  transform:translateY(-6px);
  border-color:var(--neon);
  box-shadow:0 18px 40px -22px rgba(0,120,150,.5);
}
.oz-kart svg{ width:34px; height:34px; color:var(--neon-koyu); }
.oz-kart h3{
  font-family:var(--font-b);
  font-weight:700;
  font-size:18px;
  margin:20px 0 10px;
}
.oz-kart p{ font-size:14px; color:#5c6f7c; line-height:1.6; }

/* ============================================================
   HAKKIMDA
   ============================================================ */
.hakkimda{
  padding:110px 0;
  background:
    radial-gradient(70% 60% at 85% 20%, rgba(0,224,255,.09) 0%, transparent 60%),
    var(--siyah-2);
}
.hakkimda__in{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.hakkimda__gorsel{ position:sticky; top:120px; }
.hakkimda .lead{ margin-top:20px; }

.hakkimda__yazi{ margin-top:24px; display:grid; gap:16px; }
.hakkimda__yazi .lead{ margin-top:0; max-width:60ch; }
.hakkimda__yazi .lead--ilk{
  color:#dfe9f0;
  font-size:17.5px;
  line-height:1.6;
}

/* imza bloğu */
.imza{
  margin-top:30px;
  padding-left:20px;
  border-left:2px solid var(--neon);
  display:grid;
  gap:2px;
}
.imza__ad{
  font-family:var(--font-b);
  font-weight:800;
  font-size:19px;
  letter-spacing:-.01em;
}
.imza__unvan{ font-size:14px; color:var(--gri-2); }
.imza__slogan{
  margin-top:8px;
  font-family:var(--font-b);
  font-weight:700;
  font-size:16px;
  color:var(--neon);
  letter-spacing:-.01em;
}

.tikli{ margin:30px 0 34px; display:grid; gap:14px; }
.tikli li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  color:#d3dee5;
}
.tikli li::before{
  content:"";
  flex:none;
  width:20px; height:20px;
  margin-top:2px;
  border-radius:50%;
  background:var(--neon-soft);
  border:1px solid rgba(0,224,255,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e0ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;
  background-position:center;
  background-repeat:no-repeat;
}

.hakkimda__gorsel{ position:relative; }
.hk__medya{ position:relative; }
.hk__sahne{
  position:relative;
  border-radius:var(--r);
  border:1px solid var(--cizgi);
  overflow:hidden;
  background:#0a1117;
}
.hk__gorsel{
  display:block;
  width:100%;
  aspect-ratio:4/4.7;
  object-fit:cover;
}
/* dikey çekilmiş video: kırpma yerine tam görünsün, yanlarda koyu boşluk kalsın */
video.hk__gorsel{ object-fit:contain; }

/* sahne üzerindeki yuvarlak düğmeler:
   sol üstte ses (video açıkken), sağ üstte videoya dön (foto açıkken) */
.hk__ses,
.hk__don{
  position:absolute;
  top:14px;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--cizgi-2);
  background:rgba(10,17,23,.72);
  backdrop-filter:blur(10px);
  color:#fff;
  cursor:pointer;
  transition:.25s ease;
}
.hk__ses{ left:14px; }
.hk__don{ right:14px; }
.hk__ses[hidden],
.hk__don[hidden]{ display:none; }
.hk__ses svg,
.hk__don svg{ width:19px; height:19px; }
.hk__ses:hover,
.hk__don:hover{ border-color:var(--neon); color:var(--neon); }
.hk__ses .hk__ses-acik{ display:none; }
.hk__ses.acik{ color:var(--neon); border-color:var(--neon); }
.hk__ses.acik .hk__ses-acik{ display:block; }
.hk__ses.acik .hk__ses-kapali{ display:none; }

/* "bu kişi antrenörün kendisi" etiketi — 500+ rozetinin karşısında,
   görselin sol altında durur ki karedeki kişi öğrenci sanılmasın */
.hk__etiket{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--cizgi-2);
  background:rgba(10,17,23,.82);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
}
.hk__etiket[hidden]{ display:none; }
.hk__etiket-ust{
  display:block;
  font-family:var(--font-b);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neon);
}
.hk__etiket-ad{
  display:block;
  font-family:var(--font-b);
  font-weight:600;
  font-size:15px;
  line-height:1.25;
  white-space:nowrap;
}

.hk__serit-baslik{
  margin-top:14px;
  font-family:var(--font-b);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gri-2);
}
.hk__serit-baslik[hidden]{ display:none; }
.hk__serit-baslik + .hk__serit{ margin-top:10px; }

/* küçük kareler şeridi */
.hk__serit{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.hk__kucuk{
  position:relative;
  padding:0;
  overflow:hidden;
  border:1px solid var(--cizgi);
  border-radius:14px;
  background:none;
  cursor:pointer;
  transition:.3s ease;
}
.hk__kucuk img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:grayscale(.35) brightness(.78);
  transition:.3s ease;
}
.hk__kucuk:hover img{ filter:none; }
.hk__kucuk.aktif{ border-color:var(--neon); }
.hk__kucuk.aktif img{ filter:none; }
.hk__oynat{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(6,10,14,.34);
  transition:.3s ease;
}
.hk__oynat::before{
  content:"";
  width:0;
  height:0;
  margin-left:3px;
  border-left:13px solid #fff;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.hk__kucuk.aktif .hk__oynat{ background:rgba(6,10,14,.1); }

.rozet{
  position:absolute;
  right:16px;
  bottom:16px;
  background:rgba(10,17,23,.92);
  backdrop-filter:blur(12px);
  border:1px solid var(--cizgi-2);
  border-radius:var(--r);
  padding:20px 26px;
  min-width:200px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.8);
}
.rozet__ust{ font-size:12px; color:var(--gri-2); display:block; }
.rozet__sayi{
  display:block;
  font-family:var(--font-b);
  font-weight:800;
  font-size:44px;
  line-height:1.1;
  color:var(--neon);
  letter-spacing:-.03em;
}
.rozet__alt{ font-size:13px; color:var(--gri); }

/* ============================================================
   SÜREÇ / AŞAMALAR
   ============================================================ */
.surec{
  padding:110px 0;
  background:
    radial-gradient(60% 55% at 10% 15%, rgba(0,224,255,.08) 0%, transparent 62%),
    var(--siyah);
}
.surec__in{
  display:grid;
  grid-template-columns:minmax(260px, .85fr) 1.35fr;
  gap:64px;
  align-items:start;
}
.surec__head{ position:sticky; top:120px; }
.surec__head .lead{ margin-top:20px; }

.adimlar{ counter-reset:adim; display:grid; }
.adim{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:26px;
  padding:0 0 42px 0;
}
.adim:last-child{ padding-bottom:0; }

/* numaraları birleştiren dikey çizgi */
.adim::before{
  content:"";
  position:absolute;
  left:27px;
  top:56px;
  bottom:-6px;
  width:1px;
  background:linear-gradient(180deg, rgba(0,224,255,.45), rgba(0,224,255,.05));
}
.adim:last-child::before{ display:none; }

.adim__no{
  width:56px; height:56px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--kart);
  border:1px solid rgba(0,224,255,.35);
  color:var(--neon);
  font-family:var(--font-b);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.02em;
  transition:.3s ease;
}
.adim:hover .adim__no{
  background:var(--neon);
  color:#02171d;
  box-shadow:0 0 30px -6px rgba(0,224,255,.65);
}
.adim__baslik{
  font-family:var(--font-b);
  font-weight:700;
  font-size:21px;
  letter-spacing:-.01em;
  margin:12px 0 10px;
}
.adim__metin{ color:var(--gri); font-size:15.5px; line-height:1.7; max-width:58ch; }

/* ============================================================
   PAKETLER
   ============================================================ */
.paketler{
  padding:110px 0;
  background:#f4f8fa;
  color:#0a1219;
}
.paketler .h2{ color:#0a1219; }
.paketler .kicker{ color:var(--neon-koyu); }
.paketler .lead{ color:#5c6f7c; }

/* form doldurulunca çıkan özet kartı */
.ozet{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  max-width:720px;
  margin:0 auto 30px;
  background:#fff;
  border:1px solid var(--neon);
  border-left:4px solid var(--neon);
  border-radius:var(--r);
  padding:20px 24px;
  box-shadow:0 20px 40px -30px rgba(0,120,150,.7);
}
.ozet__sol{ display:grid; gap:3px; }
.ozet__ust{
  font-family:var(--font-b);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--neon-koyu);
}
.ozet__ad{
  font-family:var(--font-b);
  font-weight:700;
  font-size:19px;
  color:#0a1219;
  letter-spacing:-.01em;
}
.ozet__alt{ font-size:14px; color:#5c6f7c; }
.ozet__duzenle{
  background:none;
  border:1px solid #cfdde6;
  border-radius:999px;
  padding:10px 20px;
  font-family:var(--font-b);
  font-weight:600;
  font-size:14px;
  color:#5c6f7c;
  cursor:pointer;
  transition:.22s;
  white-space:nowrap;
}
.ozet__duzenle:hover{ border-color:var(--neon-koyu); color:var(--neon-koyu); }

/* branş sekmeleri */
.sekme{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  background:#e8f0f5;
  border:1px solid #dbe6ed;
  border-radius:999px;
  padding:6px;
  width:fit-content;
  margin:0 auto 18px;
}
.sekme__btn{
  font-family:var(--font-b);
  font-weight:600;
  font-size:15px;
  padding:12px 26px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#5c6f7c;
  cursor:pointer;
  transition:.25s ease;
  white-space:nowrap;
}
.sekme__btn:hover{ color:#0a1219; }
.sekme__btn.aktif{
  background:var(--neon-koyu);
  color:#fff;
  box-shadow:0 8px 20px -10px rgba(0,180,216,.9);
}

.brans__aciklama{
  text-align:center;
  color:#5c6f7c;
  font-size:15px;
  margin:0 auto 44px;
  max-width:52ch;
}

.paket__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
}
.paket{
  position:relative;
  background:#fff;
  border:1px solid #e1eaf0;
  border-radius:var(--r);
  padding:38px 30px 32px;
  display:flex;
  flex-direction:column;
  transition:.3s ease;
}
.paket:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(0,90,120,.45); }

.paket--populer{
  border-color:var(--neon);
  box-shadow:0 24px 60px -30px rgba(0,180,216,.7);
  padding-top:52px;
}
.paket__etiket{
  position:absolute;
  top:0; left:0; right:0;
  background:var(--neon);
  color:#02171d;
  font-family:var(--font-b);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-align:center;
  padding:8px;
  border-radius:var(--r) var(--r) 0 0;
}
.paket__ad{
  font-family:var(--font-b);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.01em;
}
.paket__alt{ font-size:13px; color:#7d8e9a; margin-top:2px; }
.paket__fiyat{
  margin:22px 0 4px;
  font-family:var(--font-b);
  font-weight:800;
  font-size:46px;
  line-height:1;
  color:var(--neon-koyu);
  letter-spacing:-.03em;
}
.paket__birim{ font-size:14px; color:#7d8e9a; font-weight:500; margin-left:6px; }
.paket__fiyat--yok{
  font-size:22px;
  color:#0a1219;
  line-height:1.3;
  margin-bottom:12px;
}
.paket__cizgi{ height:1px; background:#e6eef3; margin:26px 0; }
.paket__liste{ display:grid; gap:13px; margin-bottom:30px; }
.paket__liste li{
  display:flex;
  gap:11px;
  font-size:14.5px;
  color:#3c4c58;
  line-height:1.5;
}
.paket__liste li::before{
  content:"";
  flex:none;
  width:16px; height:16px;
  margin-top:4px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b4d8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}
.paket__btn{
  margin-top:auto;
  display:block;
  text-align:center;
  font-family:var(--font-b);
  font-weight:600;
  font-size:15px;
  padding:15px;
  border-radius:999px;
  border:1px solid var(--neon-koyu);
  color:var(--neon-koyu);
  transition:.25s;
}
.paket__btn:hover{ background:var(--neon-koyu); color:#fff; }
.paket--populer .paket__btn{ background:var(--neon); border-color:var(--neon); color:#02171d; }
.paket--populer .paket__btn:hover{ background:#00c8e6; border-color:#00c8e6; color:#fff; }

/* ============================================================
   GALERİ
   ============================================================ */
.galeri{ padding:100px 0; background:var(--siyah); overflow:hidden; }
.galeri__ray{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:4px 24px 20px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--neon) transparent;
}
.galeri__ray::-webkit-scrollbar{ height:6px; }
.galeri__ray::-webkit-scrollbar-thumb{ background:var(--neon-koyu); border-radius:99px; }
.galeri__ray::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:99px; }

.galeri__ray img,
.galeri__ray video{
  flex:none;
  width:min(340px, 78vw);
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r-sm);
  border:1px solid var(--cizgi);
  scroll-snap-align:start;
  filter:grayscale(.25) brightness(.92);
  transition:.35s ease;
  cursor:pointer;
}
.galeri__ray img:hover,
.galeri__ray video:hover{ filter:none; transform:scale(1.02); border-color:var(--neon); }
/* videolar şeritte hareket ettiği için gri filtresi olmadan dursun */
.galeri__ray video{ filter:none; border-color:var(--cizgi-2); }

/* ============================================================
   BAŞVURU FORMU
   ============================================================ */
.basvuru{
  padding:110px 0;
  background:
    radial-gradient(65% 55% at 85% 25%, rgba(0,224,255,.1) 0%, transparent 62%),
    var(--siyah);
}
.basvuru__in{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:start;
}
.basvuru__yan{ position:sticky; top:120px; }
.basvuru__yan .lead{ margin-top:20px; }
.basvuru__yan .tikli{ margin-bottom:0; }

.form{
  background:var(--kart);
  border:1px solid var(--cizgi);
  border-radius:var(--r);
  padding:34px 32px;
  display:grid;
  gap:22px;
}
.form__satir{ display:grid; grid-template-columns:1fr auto; gap:18px; }

.alan{ display:grid; gap:10px; border:0; padding:0; min-width:0; }
/* fieldset + legend grid içinde tuhaf davranıyor — blok akışta bırak */
fieldset.alan{ display:block; }
fieldset.alan legend{ margin-bottom:10px; }
.alan--kisa{ width:120px; }
.alan__ad{
  font-family:var(--font-b);
  font-weight:600;
  font-size:13.5px;
  color:#c2d0da;
  letter-spacing:.01em;
  padding:0;
}
.alan__ad b{ color:var(--neon); font-weight:600; }

.form input,
.form textarea{
  width:100%;
  background:var(--siyah-2);
  border:1px solid var(--cizgi-2);
  border-radius:var(--r-sm);
  padding:14px 16px;
  color:var(--beyaz);
  font-family:var(--font-m);
  font-size:15px;
  transition:.22s ease;
}
.form textarea{ resize:vertical; min-height:88px; line-height:1.6; }
.form input::placeholder,
.form textarea::placeholder{ color:#5b6b77; }
.form input:focus,
.form textarea:focus{
  outline:none;
  border-color:var(--neon);
  box-shadow:0 0 0 3px rgba(0,224,255,.14);
}

/* seçenek çipleri */
.secim{ display:flex; flex-wrap:wrap; gap:9px; }
.cip{ position:relative; cursor:pointer; }
.cip input{
  position:absolute;
  opacity:0;
  width:0; height:0;
  padding:0; margin:0;
}
.cip span{
  display:block;
  border:1px solid var(--cizgi-2);
  border-radius:999px;
  padding:10px 18px;
  font-family:var(--font-b);
  font-weight:500;
  font-size:14px;
  color:var(--gri);
  transition:.22s ease;
  user-select:none;
}
.cip:hover span{ border-color:rgba(0,224,255,.5); color:var(--beyaz); }
.cip input:checked + span{
  background:var(--neon);
  border-color:var(--neon);
  color:#02171d;
  font-weight:600;
}
.cip input:focus-visible + span{ box-shadow:0 0 0 3px rgba(0,224,255,.3); }

.form__gonder{ justify-content:center; margin-top:4px; }
.form__not{ font-size:13px; color:var(--gri-2); text-align:center; }
.form__hata{
  background:rgba(255,86,86,.1);
  border:1px solid rgba(255,86,86,.4);
  color:#ff9b9b;
  border-radius:var(--r-sm);
  padding:12px 16px;
  font-size:14px;
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  padding:90px 0;
  background:
    linear-gradient(120deg, rgba(0,224,255,.1) 0%, transparent 55%),
    #f4f8fa;
  color:#0a1219;
}
.cta__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta .h2{ color:#0a1219; }
.cta .kicker{ color:var(--neon-koyu); }
.cta .lead{ color:#5c6f7c; margin-top:14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--siyah); border-top:1px solid var(--cizgi); padding-top:70px; }
.footer__in{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;
  gap:40px;
  padding-bottom:50px;
}
.footer__logo{ height:52px; margin-bottom:18px; }
.footer__marka p{ color:var(--gri-2); font-size:14.5px; max-width:34ch; }
.footer__slogan{
  display:block;
  margin-top:16px;
  font-family:var(--font-b);
  font-weight:700;
  font-size:15px;
  color:var(--neon);
  letter-spacing:-.01em;
}
.footer__kol h4{
  font-family:var(--font-b);
  font-weight:700;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--neon);
  margin-bottom:18px;
}
.footer__kol a,
.footer__kol .sat{
  display:block;
  color:var(--gri);
  font-size:14.5px;
  padding:5px 0;
  transition:color .2s;
}
.footer__kol a:hover{ color:var(--neon); }

/* ikon + metin: ikona sabit genişlikte kendi sütunu verilir ki
   bütün satırların metni aynı hizadan başlasın. Satır iki satıra
   taşsa bile ikon ilk satırın ortasına sabitlenir.
   NOT: seçici `.footer__kol .footer__sat` olmalı — yukarıdaki
   `.footer__kol a{display:block}` kuralı daha spesifik olduğu için
   tek başına `.footer__sat` display'i ezemiyor. */
.footer__kol .footer__sat{
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:start;
  gap:11px;
}
.footer__kol .footer__sat > span{ display:block; }   /* satır kutusu net olsun */
.footer__kol .footer__sat svg{
  width:18px;
  height:18px;
  color:var(--neon);
  justify-self:center;
  margin-top:calc((1.65em - 18px) / 2);
}
.footer__saat{ display:flex; justify-content:space-between; gap:16px; color:var(--gri); font-size:14.5px; padding:5px 0; max-width:260px; }
.footer__saat span:last-child{ color:#dbe5ec; }

.footer__sosyal{ display:flex; gap:10px; margin-top:14px; }
.footer__sosyal a{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--cizgi-2);
  border-radius:10px;
  color:var(--gri);
  transition:.25s;
}
.footer__sosyal a:hover{ border-color:var(--neon); color:var(--neon); }
.footer__sosyal svg{ width:17px; height:17px; }

.footer__alt{
  border-top:1px solid var(--cizgi);
  padding-block:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 28px;
  color:var(--gri-2);
  font-size:13.5px;
}

/* künye: logo + "Site Tasarımı Tez.Web" + telefon + instagram */
.kunye{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
}
.kunye__rozet{
  flex:none;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:8px;
  border:1px solid var(--cizgi-2);
  transition:border-color .25s ease;
}
.kunye__rozet:hover{ border-color:var(--neon); }
.kunye__rozet img{ width:100%; height:100%; object-fit:cover; }
.kunye strong{ color:#c3d2dc; font-weight:600; }
.kunye a{ color:inherit; transition:color .2s ease; }
.kunye a:hover{ color:var(--neon); }

/* ============================================================
   WHATSAPP
   ============================================================ */
.wa{
  position:fixed;
  right:22px; bottom:22px;
  z-index:90;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:.25s;
}
.wa:hover{ transform:scale(1.08); }
.wa svg{ width:30px; height:30px; }

/* ============================================================
   GİRİŞ ANİMASYONU
   ============================================================ */
/* metinler soldan sağa süzülerek gelir */
.anim{
  opacity:0;
  transform:translateX(-46px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
/* kartlar ve görseller aşağıdan gelir */
.anim--y{ transform:translateY(32px); }
/* sağ sütundaki görsel sağdan gelir */
.anim--sag{ transform:translateX(46px); }

.anim.gorundu{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .anim{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .ozellik__in{ grid-template-columns:1fr; gap:34px; }
  .ozellik__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__in{ grid-template-columns:1fr 1fr; gap:34px; }
}

@media (max-width:900px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed;
    inset:94px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(4,7,10,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--cizgi);
    padding:12px 24px 26px;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:.28s ease;
  }
  .nav__links.acik{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links > a{ padding:14px 0; border-bottom:1px solid var(--cizgi); font-size:16px; }
  .nav__links > a::before{ display:none; }
  .nav__cta{ margin-top:18px; justify-content:center; border-bottom:0 !important; }

  .strip__in{ grid-template-columns:repeat(2,1fr); }
  .strip__oge{ padding:16px 18px; font-size:13px; border-left:0; }
  .strip__oge:nth-child(2n){ border-left:1px solid var(--cizgi); }
  .strip__oge:nth-child(n+3){ border-top:1px solid var(--cizgi); }
  .strip__oge:first-child{ padding-left:18px; }

  .hakkimda__in{ grid-template-columns:1fr; gap:56px; }
  .hakkimda__gorsel{ position:static; }
  .surec__in{ grid-template-columns:1fr; gap:44px; }
  .surec__head{ position:static; }
  .basvuru__in{ grid-template-columns:1fr; gap:40px; }
  .basvuru__yan{ position:static; }
  .sekme{ width:100%; justify-content:stretch; }
  .sekme__btn{ flex:1; padding:12px 14px; font-size:14px; }
  .rozet{ right:12px; bottom:12px; padding:16px 22px; min-width:170px; }
  .rozet__sayi{ font-size:36px; }
  .hk__gorsel{ aspect-ratio:4/4.4; }
  .hk__serit{ gap:8px; }
  .hk__ses,
  .hk__don{ width:38px; height:38px; }

  .paket__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .cta__in{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:620px){
  .wrap,
  .nav__in,
  .hero__in,
  .strip__in{ padding-inline:18px; }
  /* HERO — mobil.
     Video 1080x1920 (9:16). Telefon ekranı bundan daha uzun olduğu için
     100svh'lik kutuda object-fit:cover videonun enini ~%18 kırpıyordu.
     Kutuyu videonun oranına sabitliyoruz: yükseklik = genişlik * 16/9.
     Böylece kare tam oturuyor. min() ile yatay/kısa ekranlarda
     ekranı aşması engelleniyor. Metinler de küçültüldü ki içerik
     bu kısalan kutuya sığsın. */
  .hero{ min-height:min(100svh, calc(100vw * 16 / 9)); }

  /* Perde masaüstünde soldan %94 karartıyor; orada ekran geniş olduğu
     için sağ taraf açık kalıyor ve video görünüyordu. Telefonda "sağ
     taraf" olmadığı için tüm kare kararıyordu. Mobilde perdeyi
     üst (nav) ve alt (yazılar) bantlara topluyoruz, orta açık kalıyor. */
  .hero__veil{
    background:
      linear-gradient(180deg,
        rgba(4,7,10,.84) 0%,
        rgba(4,7,10,.40) 15%,
        rgba(4,7,10,.28) 33%,
        rgba(4,7,10,.60) 46%,
        rgba(4,7,10,.86) 60%,
        rgba(4,7,10,.93) 78%,
        rgba(4,7,10,.96) 100%);
  }

  /* içerik dibe toplanıyor: videonun üst ve orta kısmı temiz kalsın */
  .hero__in{
    justify-content:flex-end;
    padding-top:92px;
    padding-bottom:18px;
  }
  /* perdeye ek olarak yazının kendi altlığı — video açık bir kareye
     denk geldiğinde de okunaklı kalsın */
  .hero__title{
    font-size:clamp(25px, 7.2vw, 31px);
    text-shadow:0 2px 16px rgba(4,7,10,.8);
  }
  .hero__text{
    margin-top:12px;
    font-size:13.5px;
    line-height:1.55;
    color:#dbe6ed;
    text-shadow:0 1px 12px rgba(4,7,10,.85);
  }
  .hero__btns{ margin-top:18px; gap:8px; }
  .hero__btns .btn{
    flex:1 1 100%;
    justify-content:center;
    padding:11px 20px;
    font-size:14px;
  }
  .strip__oge{ padding:11px 16px; font-size:12px; gap:8px; }
  .strip__oge svg{ width:15px; height:15px; }
  .ozellik{ padding:72px 0; }
  .ozellik__grid{ grid-template-columns:1fr; }
  .hakkimda,.paketler,.surec,.basvuru{ padding:80px 0; }
  .sekme{ flex-direction:column; border-radius:var(--r); }
  .sekme__btn{ width:100%; }
  .form{ padding:26px 20px; }
  .form__satir{ grid-template-columns:1fr; }
  .alan--kisa{ width:100%; }
  .adim{ grid-template-columns:auto 1fr; gap:18px; padding-bottom:34px; }
  .adim__no{ width:46px; height:46px; font-size:15px; }
  .adim::before{ left:22px; top:48px; }
  .adim__baslik{ font-size:18px; margin-top:8px; }
  .galeri__ray{ padding-inline:18px; }

  /* dar ekranda etiket ile 500+ rozeti üst üste binerdi:
     ikisi de görselin altına, alt alta iner */
  .hk__medya{ display:grid; gap:10px; }
  .hk__etiket,
  .rozet{
    position:static;
    border-radius:14px;
    box-shadow:none;
  }
  .hk__etiket{ padding:12px 16px; }
  .rozet{ padding:14px 18px; min-width:0; }
  .hk__etiket-ad{ white-space:normal; }

  .footer__in{ grid-template-columns:1fr; }
  .footer__alt{ justify-content:center; text-align:center; gap:16px; }
  .kunye{ justify-content:center; }
}