/* ==================================================================
   Forton Ozel Guvenlik | assets/css/layout.css
   ------------------------------------------------------------------
   Kapsayici, izgara, bolum ritmi, hero.
   ================================================================== */

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

.wrap--narrow{max-width:860px}

/* ------------------------------------------------------------------
   BOLUM RITMI
   Monotonluğu kirmak icin dort zemin tipi donusumlu kullanilir.
   Ayni tip asla art arda gelmez.

     A  standart   -> ana zemin
     B  kademe     -> ana zemin + flame katmani (yeni renk DEGIL)
     C  serit      -> flame zemin + ust/alt kirmizi cizgi (CTA)
     D  ayrac      -> ince mavi cizgi
   ------------------------------------------------------------------ */
.sec{
  padding-block:clamp(3.5rem,8vw,var(--sp-9));
  position:relative;
}

.sec--b{background:var(--flame-05)}

.sec--c{
  background:var(--bg-flame);
  border-block:1px solid var(--accent-red);
  padding-block:clamp(2.75rem,6vw,var(--sp-8));
}

.sec--tight{padding-block:clamp(2.5rem,5vw,var(--sp-7))}

.rule{height:1px;background:var(--line-soft);border:0}

/* ------------------------------------------------------------------
   IZGARA
   ------------------------------------------------------------------ */
.grid{display:grid;gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}

/* Metin + yan sutun. 58/42 - esit degil, bilincli asimetri. */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
  gap:clamp(var(--sp-6),5vw,var(--sp-8));
  align-items:start;
}

@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4,.grid--auto{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   HERO
   Ortalanmis degil, SOL HIZALI ve asimetrik.
   Ates glow YALNIZCA burada yasar. Baska hicbir bolumde yok.
   Boldness tek yerde toplansin, gerisi disiplinli kalsin.
   ------------------------------------------------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-block:clamp(4rem,11vw,7.5rem) 0;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(160deg,
      var(--bg-deep)  0%,
      var(--bg-flame) 55%,
      var(--bg-deep) 100%);
}

/* mavi ates — sol alt eksen */
.hero::before{
  content:"";position:absolute;z-index:-2;
  left:-12%;bottom:-45%;width:72%;height:155%;
  background:radial-gradient(closest-side,var(--glow-blue),transparent 70%);
  filter:blur(70px);
  pointer-events:none;
}

/* kirmizi sizinti — sag ust, cok hafif */
.hero::after{
  content:"";position:absolute;z-index:-2;
  right:-8%;top:-45%;width:48%;height:135%;
  background:radial-gradient(closest-side,var(--glow-red),transparent 70%);
  filter:blur(80px);
  pointer-events:none;
}

/* ------------------------------------------------------------------
   ARKA PLAN GORSELI  (istege bagli — panelden yuklenir)

   KATMAN SIRASI (arkadan one)
     .hero background gradient   ... gorsel yokken tek basina calisir
     .hero__bg      z-index -4   ... fotograf
     .hero__veil    z-index -3   ... okunabilirlik ortusu
     .hero::before  z-index -2   ... mavi ates
     .hero::after   z-index -2   ... kirmizi sizinti
     .hero__grid    z-index -1   ... izgara dokusu
     icerik         (otomatik)   ... baslik, CTA, sayaclar
   ------------------------------------------------------------------ */
.hero__bg{
  position:absolute;inset:0;z-index:-4;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;
  /* Fotograf yuklenene kadar zemin koyu kalsin, beyaz parlama olmasin */
  background:var(--bg-deep);
}

/* Okunabilirlik ortusu.
   Iki sabit kademe + bir ayarlanabilir kademeden olusur.

   Sabit kademeler PANELDEN DEGISTIRILEMEZ ve bilincli olarak boyle:
   metnin oturdugu sol serit ile sayaclarin oturdugu alt kenar her
   kosulda koyu kalir. Yonetici "hafif" secse bile baslik okunur;
   degisen sey fotografin geri kalaninin ne kadar gorunecegidir. */
.hero__veil{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    /* 1) sol serit — baslik ve aciklama bolgesi */
    linear-gradient(100deg,
      rgba(5,11,26,.94) 0%,
      rgba(5,11,26,.70) 34%,
      rgba(5,11,26,.10) 72%,
      rgba(5,11,26,.30) 100%),
    /* 2) alt kenar — sayac seridi */
    linear-gradient(to top,
      rgba(5,11,26,.92) 0%,
      rgba(5,11,26,.35) 22%,
      transparent 46%);
}

/* 3) ayarlanabilir genel karartma — panelden gelen deger */
.hero__veil::before{
  content:"";position:absolute;inset:0;
  background:var(--bg-deep);
  opacity:var(--hero-dim,.55);
}

/* Gorsel varken izgara dokusu biraz geri cekilir; fotografin uzerinde
   ayni yogunlukta durunca kirli bir tul etkisi yapiyor. */
.hero--bg .hero__grid{opacity:.018}

/* ince izgara dokusu — yuzey duz plastik gorunmesin */
.hero__grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.03;
  background-image:
    linear-gradient(var(--text) 1px,transparent 1px),
    linear-gradient(90deg,var(--text) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 20%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 20%,transparent 92%);
}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(var(--sp-6),5vw,var(--sp-8));
  align-items:end;
  padding-bottom:clamp(2.5rem,5vw,var(--sp-7));
}

@media (max-width:940px){
  .hero__inner{grid-template-columns:1fr;align-items:start}
}

/* Etiket H1'in icinde; blok yapilarak slogan satirlarindan ayriliyor.
   width:fit-content, kirmizi kenar cizgisinin metni kucaklamasi icin. */
.hero__eyebrow{
  display:block;
  width:fit-content;
  margin-bottom:clamp(1.25rem,3vw,var(--sp-5));
}

/* Ataturk sozu — sayfanin kalbi.
   Ilk satir kirmizi, gerisi beyaz. Satir kirilimi ELLE yapilir;
   kirilma noktasi anlamli olmali, tarayiciya birakilamaz. */
.hero__quote{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(2rem,5.6vw,4rem);
  line-height:.99;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.hero__quote .fire{color:var(--accent-red);display:block}
.hero__quote .rest{color:var(--text);display:block}

.hero__author{
  margin-top:clamp(1rem,2.5vw,var(--sp-5));
  color:var(--text-muted);
  font-size:.875rem;
  letter-spacing:.04em;
  display:flex;align-items:center;gap:.75rem;
}
.hero__author::before{
  content:"";width:34px;height:1px;background:var(--accent-red);flex:none;
}

.hero__desc{
  margin-top:clamp(1.5rem,3vw,var(--sp-6));
  color:var(--text-muted);
  font-size:1.0625rem;
  max-width:52ch;
}

.hero__cta{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  margin-top:clamp(1.75rem,3.5vw,var(--sp-6));
}

/* Sayac seridi hero'nun ICINDE. Ayri bolum yapilsaydi bir scroll
   daha yenirdi ve hero bos kalirdi. */
.hero__stats{
  border-top:1px solid var(--line);
  padding-top:clamp(1.5rem,3vw,var(--sp-6));
}

/* ------------------------------------------------------------------
   IC SAYFA BASLIGI
   Hero'nun sakin surumu. Glow YOK, sadece gradient ve cizgi.
   ------------------------------------------------------------------ */
.phead{
  position:relative;
  padding-block:clamp(2.75rem,7vw,var(--sp-8)) clamp(2rem,4vw,var(--sp-6));
  background:linear-gradient(165deg,var(--bg-deep) 0%,var(--bg-flame) 140%);
  border-bottom:1px solid var(--line);
}
.phead__title{margin-top:var(--sp-4)}
.phead__desc{margin-top:var(--sp-4);color:var(--text-muted);max-width:60ch}

/* ------------------------------------------------------------------
   YARDIMCI
   ------------------------------------------------------------------ */
.stack > * + *{margin-top:var(--sp-4)}
.stack-lg > * + *{margin-top:var(--sp-6)}
.center{text-align:center}
.mt-0{margin-top:0}
.mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}