/* ==================================================================
   Forton Ozel Guvenlik | assets/css/base.css
   ------------------------------------------------------------------
   Sifirlama, degiskenler, tipografi, olcek.

   RENK KURALI (KIRMIZI CIZGI)
   Yalnizca asagidaki ALTI renk kullanilir. Ara tonlar yeni bir hex
   ile DEGIL, bu renklerin saydamlik turevleriyle uretilir.
   Dosyalarda bu altisi disinda hicbir hex degeri bulunmaz.
   ================================================================== */

:root{
  /* --- palet (zorunlu, birebir) --- */
  --bg-deep:    #050B1A;
  --bg-flame:   #0A1F4D;
  --blue-flame: #1E6BFF;
  --text:       #FFFFFF;
  --text-muted: #B8C4DA;
  --accent-red: #E10600;

  /* --- paletten turetilen saydamliklar --- */
  --flame-05: rgba(10,31,77,.28);     /* kademe zemin */
  --flame-10: rgba(10,31,77,.55);     /* kutu zemin  */
  --flame-20: rgba(10,31,77,.78);

  --line:      rgba(30,107,255,.16);  /* kenarlik    */
  --line-soft: rgba(30,107,255,.10);
  --line-hot:  rgba(30,107,255,.42);  /* hover       */

  --glow-blue: rgba(30,107,255,.22);
  --glow-red:  rgba(225,6,0,.07);

  --on-dark-08: rgba(255,255,255,.08);
  --on-dark-24: rgba(255,255,255,.24);
  --on-dark-40: rgba(255,255,255,.40);

  /* --- tipografi --- */
  --font-head: 'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- olcek --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7rem;

  --wrap: 1180px;
  --gut:  clamp(1.25rem, 4vw, 2.5rem);

  /* Kose yariciapi 2px. Yuvarlak kose = yumusaklik;
     bir guvenlik firmasi icin yanlis sinyal. */
  --r: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------
   FONTLAR — self-host. CDN KULLANILMAZ.
   Dosyalar yoksa yedek aile devreye girer, site bozulmaz.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  background:var(--bg-deep);
  color:var(--text);
  font:400 1rem/1.75 var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}

img,svg,video{display:block;max-width:100%;height:auto}
svg{fill:none;stroke:currentColor}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

::selection{background:var(--accent-red);color:var(--text)}

:focus-visible{
  outline:2px solid var(--blue-flame);
  outline-offset:3px;
}

/* ------------------------------------------------------------------
   TIPOGRAFI
   Basliklar BUYUK HARF DEGIL. Sadece etiketler ve butonlar buyuk harf.
   Her sey buyuk harf olursa sablon hissi baslar.
   ------------------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.01em;
}

h1{font-size:clamp(2.375rem,6vw,4.25rem);font-weight:700;line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(1.625rem,3.4vw,2.375rem)}
h3{font-size:1.25rem}
h4{font-size:1.0625rem}

p{max-width:68ch}
p + p{margin-top:var(--sp-4)}

strong,b{font-weight:500;color:var(--text)}

.eyebrow{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue-flame);
  padding-left:.875rem;
  border-left:3px solid var(--accent-red);
  display:inline-block;
  /* Etiket artik hero'da H1'in ICINDE duruyor. H1'in satir yuksekligi
     .99 ve harf araligi negatif; bunlar etikete sizmasin diye burada
     kesin deger veriliyor. */
  line-height:1.5;
}

.lead{
  color:var(--text-muted);
  font-size:1.0625rem;
  max-width:64ch;
}

.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-size:.8125rem}

/* Panelden gelen zengin metin */
.rte > * + *{margin-top:var(--sp-4)}
.rte p{color:var(--text-muted)}
.rte h3,.rte h4{color:var(--text);margin-top:var(--sp-6)}
.rte strong{color:var(--text)}
.rte a{color:var(--blue-flame);border-bottom:1px solid var(--line-hot)}
.rte a:hover{border-bottom-color:var(--blue-flame)}
.rte ul,.rte ol{color:var(--text-muted);padding-left:1.125rem}
.rte li + li{margin-top:var(--sp-2)}
.rte ul li{list-style:none;position:relative}
.rte ul li::before{
  content:"";position:absolute;left:-1.125rem;top:.72em;
  width:5px;height:5px;background:var(--accent-red);
}
.rte ol{list-style:decimal}
.rte ol li{list-style:decimal}
.rte blockquote{
  border-left:3px solid var(--accent-red);
  padding-left:var(--sp-5);
  color:var(--text);
}

/* ------------------------------------------------------------------
   ERISILEBILIRLIK
   ------------------------------------------------------------------ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--sp-4);top:-4rem;z-index:200;
  background:var(--accent-red);color:var(--text);
  padding:.75rem 1.25rem;border-radius:var(--r);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:var(--sp-4)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}