/* ==================================================================
   Forton Ozel Guvenlik | assets/css/components.css
   ------------------------------------------------------------------
   Buton, kart, bolum basligi, menu, sayac, form, harita.

   TASARIM KARARLARI
   - GOLGE YOK. Derinlik 1px hairline kenarlikla verilir.
   - Kose yariciapi her yerde 2px.
   - Hover'da sicrama/olcek yok; kenarlik isinir, ust cizgi belirir.
   - Buyuk harf yalnizca etiket ve butonlarda.
   ================================================================== */

/* ------------------------------------------------------------------
   BUTON
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9375rem 1.75rem;
  border-radius:var(--r);
  font-size:.75rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  line-height:1;
  border:1px solid transparent;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
}

.btn--primary{background:var(--accent-red);color:var(--text)}
.btn--primary:hover{background:var(--text);color:var(--bg-deep)}

.btn--ghost{border-color:var(--on-dark-24);color:var(--text)}
.btn--ghost:hover{border-color:var(--text);background:var(--on-dark-08)}

.btn--line{border-color:var(--line-hot);color:var(--blue-flame)}
.btn--line:hover{border-color:var(--blue-flame);color:var(--text)}

.btn--sm{padding:.6875rem 1.125rem;font-size:.6875rem}
.btn--wide{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn__ico{width:16px;height:16px;stroke-width:1.6;flex:none}

/* Metin baglantisi — ok isareti hover'da kayar */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-flame);
  padding-bottom:.4375rem;
  border-bottom:1px solid var(--line-hot);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.tlink:hover{color:var(--text);border-bottom-color:var(--text)}
.tlink svg{width:14px;height:14px;stroke-width:1.8;transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ------------------------------------------------------------------
   BOLUM BASLIGI
   Sola hizali. Ortalanmis baslik + 3 kart duzeni jenerik gorunuyor.
   ------------------------------------------------------------------ */
.shead{margin-bottom:clamp(1.75rem,4vw,var(--sp-7))}
.shead__title{margin-top:var(--sp-4)}
.shead__title::after{
  content:"";display:block;
  width:40px;height:3px;background:var(--accent-red);
  margin-top:var(--sp-4);
}
.shead__desc{margin-top:var(--sp-5);color:var(--text-muted);max-width:62ch}

.shead--row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-5);flex-wrap:wrap;
}

/* ------------------------------------------------------------------
   KART
   ------------------------------------------------------------------ */
.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.375rem,2.5vw,1.75rem);
  background:var(--flame-05);
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
  height:100%;
  display:flex;flex-direction:column;
}

/* ust kenarda kirmizi cizgi — hover'da soldan saga acilir */
.card::before{
  content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--accent-red);
  transition:width .28s var(--ease);
}
.card:hover{border-color:var(--line-hot);background:var(--flame-10)}
.card:hover::before{width:46px}

.card__ico{
  width:30px;height:30px;
  color:var(--blue-flame);
  stroke-width:1.5;
  margin-bottom:var(--sp-5);
  transition:color .22s var(--ease);
}
.card:hover .card__ico{color:var(--accent-red)}

.card__title{margin-bottom:var(--sp-3)}
.card__text{color:var(--text-muted);font-size:.9375rem;flex:1}
.card__more{margin-top:var(--sp-5)}

/* numarali kart — Neden Biz */
.card--num{padding-left:clamp(3.25rem,5vw,4rem)}
.card__num{
  position:absolute;left:1.375rem;top:1.5rem;
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;
  color:var(--accent-red);line-height:1;
}

/* kompakt alan karti */
.acard{
  display:flex;align-items:center;gap:var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.0625rem 1.25rem;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.acard:hover{border-color:var(--line-hot);background:var(--flame-05)}
.acard__ico{width:26px;height:26px;color:var(--blue-flame);stroke-width:1.5;flex:none;
  transition:color .22s var(--ease)}
.acard:hover .acard__ico{color:var(--accent-red)}
.acard__title{font-family:var(--font-head);font-weight:600;font-size:1.0625rem;line-height:1.2}

/* ------------------------------------------------------------------
   SAYAC
   ------------------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.75rem,5vw,4rem);
  justify-content:start}
.stat__val{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2.25rem,4.5vw,3.125rem);
  line-height:1;color:var(--accent-red);letter-spacing:-.02em;
}
.stat__lbl{
  margin-top:.5rem;color:var(--text-muted);
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,auto);gap:var(--sp-5)}
}

/* ------------------------------------------------------------------
   USTBILGI
   ------------------------------------------------------------------ */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(5,11,26,.86);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.hdr.is-stuck{background:rgba(5,11,26,.96);border-bottom-color:var(--line)}

.hdr__in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  min-height:4.5rem;
}

.logo{display:flex;align-items:center;gap:.75rem;flex:none}
.logo img{max-height:42px;width:auto}
.logo__txt{font-family:var(--font-head);font-weight:700;font-size:1.1875rem;
  letter-spacing:.01em;line-height:1.05}
.logo__txt span{display:block;font-family:var(--font-body);font-weight:400;
  font-size:.625rem;letter-spacing:.19em;text-transform:uppercase;color:var(--text-muted);
  margin-top:.1875rem}

/* Menu 9 ogeye cikti (Blog + Galeri eklendi).
   Kapsayici 1180px'de sabit oldugu icin ekrani genisletmek menuye
   yer kazandirmiyor; bu yuzden bosluk ve yazi boyu kademeli olarak
   sikilastiriliyor. */
.nav{display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.25rem)}
.nav__link{
  position:relative;font-size:.8125rem;font-weight:500;
  letter-spacing:.05em;color:var(--text-muted);
  padding-block:.5rem;
  transition:color .2s var(--ease);
  white-space:nowrap;
}
.nav__link:hover{color:var(--text)}
.nav__link.is-active{color:var(--text)}
.nav__link.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1875rem;
  height:2px;background:var(--accent-red);
}

.hdr__act{display:flex;align-items:center;gap:var(--sp-3);flex:none}

.burger{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--on-dark-24);border-radius:var(--r);
}
.burger span{
  display:block;width:18px;height:1.5px;background:var(--text);
  position:relative;transition:background-color .18s var(--ease);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text);
  transition:transform .22s var(--ease),top .22s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}

/* Telefon butonu 1440px altinda gizlenir.
   Menu 9 ogeye ciktiginda ilk feda edilecek sey odur: numara zaten
   mobil menude, altbilgide ve iletisim sayfasinda duruyor.
   Kirmizi "Teklif Al" butonu her zaman kalir - ticari cagri o. */
@media (max-width:1440px){
  .hdr__act .btn--ghost{display:none}
}

/* 1340px altinda menu yazisi bir tik kuculur */
@media (max-width:1340px){
  .nav__link{font-size:.78125rem;letter-spacing:.03em}
}

/* Hamburger 1240px altinda.
   Blog ve Galeri eklenince ust menu 9 ogeye cikti; bu genislikten
   sonra logo + menu + Teklif Al ayni satira sigmiyor. */
@media (max-width:1240px){
  .nav,.hdr__act .btn{display:none}
  .burger{display:flex}
}

/* mobil menu — tam ekran ortu */
.mnav{
  position:fixed;inset:0;z-index:99;
  background:var(--bg-deep);
  padding:5.5rem var(--gut) var(--sp-6);
  display:flex;flex-direction:column;
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.mnav.is-open{opacity:1;visibility:visible;transform:none}
.mnav__link{
  font-family:var(--font-head);font-weight:600;font-size:1.5rem;
  padding-block:.9375rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-muted);
  transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.mnav__link:hover,.mnav__link.is-active{color:var(--text);padding-left:.5rem}
.mnav__link.is-active{border-bottom-color:var(--accent-red)}
.mnav__foot{margin-top:auto;padding-top:var(--sp-6);display:grid;gap:var(--sp-3)}
body.is-locked{overflow:hidden}

/* ------------------------------------------------------------------
   ALTBILGI
   ------------------------------------------------------------------ */
.ftr{
  background:var(--flame-05);
  border-top:1px solid var(--line);
  padding-block:clamp(2.75rem,6vw,var(--sp-8)) var(--sp-5);
}
.ftr__top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) minmax(0,1.2fr);
  gap:clamp(var(--sp-5),4vw,var(--sp-7));
}
/* Kariyer sutunu eklenince altbilgi bese cikti.
   Ilk sutun (kurumsal tanitim) daha genis kalir. */
.ftr__top--5{
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.85fr)) minmax(0,1fr) minmax(0,1.1fr);
}
@media (max-width:1100px){.ftr__top--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .ftr__top,.ftr__top--5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ftr__top,.ftr__top--5{grid-template-columns:1fr}
}

.ftr__h{
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-flame);
  margin-bottom:var(--sp-4);
}
.ftr__list li + li{margin-top:.625rem}
.ftr__list a,.ftr__info{color:var(--text-muted);font-size:.875rem;
  transition:color .18s var(--ease)}
.ftr__list a:hover{color:var(--text)}
.ftr__about{color:var(--text-muted);font-size:.875rem;max-width:38ch}

.ftr__cert{
  margin-top:var(--sp-5);padding:.75rem 1rem;
  border:1px solid var(--line);border-radius:var(--r);
  font-size:.75rem;color:var(--text-muted);display:inline-block;
}
.ftr__cert b{color:var(--text);font-weight:500}

.ftr__soc{display:flex;gap:.5rem;margin-top:var(--sp-5)}
.ftr__soc a{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);color:var(--text-muted);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.ftr__soc a:hover{border-color:var(--line-hot);color:var(--text)}
.ftr__soc svg{width:16px;height:16px;stroke-width:1.6}

.ftr__bot{
  margin-top:clamp(2rem,4vw,var(--sp-7));padding-top:var(--sp-5);
  border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  color:var(--text-muted);font-size:.8125rem;
}
.ftr__bot a:hover{color:var(--text)}

/* Tasarim imzasi — altbilginin en alti.
   Bilincli olarak sessiz: telif satirindan daha kucuk ve daha soluk,
   kurumsal tonu bozmuyor. Baglanti hover'da beyaza doner. */
.ftr__credit{
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--line-soft);
  text-align:center;
  color:var(--text-muted);
  font-size:.75rem;letter-spacing:.04em;
  opacity:.72;
}
.ftr__credit a{
  color:var(--text-muted);
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ftr__credit a:hover{color:var(--text);border-bottom-color:var(--accent-red)}

/* ------------------------------------------------------------------
   CTA BANDI
   ------------------------------------------------------------------ */
.cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);flex-wrap:wrap;
}
.cta__title{font-size:clamp(1.375rem,2.6vw,1.875rem)}
.cta__text{color:var(--text-muted);margin-top:var(--sp-3);max-width:56ch;font-size:.9375rem}

/* ------------------------------------------------------------------
   SABIT WHATSAPP
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   SABIT ILETISIM BUTONLARI  (sol alt)

   Onceki .wa sinifinin yerini alir. Iki buton dikey siralanir.
   Genis ekranda uzerine gelince numara/etiket aciliyor; mobilde
   yalnizca ikon kaliyor cunku ekranin alt serdi zaten dar.
   ------------------------------------------------------------------ */
.stk{
  position:fixed;left:var(--sp-5);bottom:var(--sp-5);z-index:90;
  display:flex;flex-direction:column;gap:.5rem;
  align-items:flex-start;
}

.stk__b{
  display:flex;align-items:center;
  height:52px;min-width:52px;
  padding:0 14px;
  background:var(--bg-flame);
  border:1px solid var(--line-hot);border-radius:var(--r);
  color:var(--text);
  overflow:hidden;
  transition:background-color .2s var(--ease),
             border-color .2s var(--ease);
}
.stk__b:hover{background:var(--accent-red);border-color:var(--accent-red)}

.stk__i{width:24px;height:24px;stroke-width:1.5;flex:none}

/* Etiket varsayilan olarak kapali; genislik gecisiyle aciliyor.
   display:none yerine genislik kullaniliyor cunku display gecise
   girmiyor ve buton zipliyordu. */
.stk__t{
  max-width:0;opacity:0;
  white-space:nowrap;font-size:.875rem;font-weight:500;
  transition:max-width .28s var(--ease),
             opacity .2s var(--ease),
             margin-left .28s var(--ease);
}
.stk__b:hover .stk__t,
.stk__b:focus-visible .stk__t{max-width:220px;opacity:1;margin-left:10px}

/* Klavye ile gezinirken buton gorunur olmali */
.stk__b:focus-visible{outline:2px solid var(--blue-flame);outline-offset:2px}

@media (max-width:900px){
  .stk{left:var(--sp-4);bottom:var(--sp-4);gap:.4375rem}
  .stk__b{height:48px;min-width:48px;padding:0 12px}
  .stk__i{width:22px;height:22px}
  /* Dokunmatikte :hover takilip kaliyor - etiket tamamen kapali */
  .stk__t{display:none}
}

/* Uc buton alt alta 152px yer kapliyor. Alcak ekranlarda (yatay
   cevrilmis telefon, kucuk dizustu) bu, icerigin uzerine binebilir;
   o durumda butonlar biraz kuculur. */
@media (max-height:620px){
  .stk__b{height:42px;min-width:42px;padding:0 10px}
  .stk__i{width:20px;height:20px}
  .stk{gap:.375rem;bottom:var(--sp-3)}
}

/* Hareket azaltma tercihi acikken gecis yapilmaz */
@media (prefers-reduced-motion:reduce){
  .stk__t{transition:none}
}

/* ------------------------------------------------------------------
   SAYFA YOLU
   ------------------------------------------------------------------ */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.75rem;color:var(--text-muted)}
.crumb a:hover{color:var(--text)}
.crumb__sep{color:var(--line-hot)}
.crumb [aria-current]{color:var(--text)}

/* ------------------------------------------------------------------
   FORM
   ------------------------------------------------------------------ */
.field{margin-bottom:var(--sp-5)}
.field__lbl{
  display:block;margin-bottom:.5rem;
  font-size:.6875rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue-flame);
}
.field__lbl .req{color:var(--accent-red)}

.input,.select,.textarea{
  width:100%;
  background:rgba(5,11,26,.6);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:.8125rem .9375rem;
  color:var(--text);
  font-size:.9375rem;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--text-muted);opacity:.55}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--blue-flame);background:rgba(5,11,26,.85);
}
.textarea{min-height:9rem;resize:vertical;line-height:1.7}

.select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
                   linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 14px) center;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:2.75rem;
}
.select option{background:var(--bg-deep);color:var(--text)}

.check{display:flex;gap:.75rem;align-items:flex-start;
  color:var(--text-muted);font-size:.875rem}
.check input{margin-top:.3125rem;accent-color:var(--accent-red);flex:none}
.check a{color:var(--blue-flame);border-bottom:1px solid var(--line-hot)}

.field__err{
  margin-top:.4375rem;font-size:.8125rem;color:var(--text);
  border-left:2px solid var(--accent-red);padding-left:.625rem;
}
.input.has-err,.textarea.has-err,.select.has-err{border-color:var(--accent-red)}

.alert{
  border:1px solid var(--line);border-left:3px solid var(--blue-flame);
  border-radius:var(--r);padding:1rem 1.25rem;
  font-size:.9375rem;color:var(--text-muted);
  background:var(--flame-05);
  margin-bottom:var(--sp-5);
}
.alert strong{color:var(--text)}
.alert--ok{border-left-color:var(--blue-flame)}
.alert--err{border-left-color:var(--accent-red)}

.formbox{
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,var(--sp-6));
  background:var(--flame-05);
}

/* ------------------------------------------------------------------
   HARITA ON YUZU
   Iframe tiklanana kadar YUKLENMEZ. Hem Lighthouse hem KVKK kazanci:
   ziyaretcinin IP adresi o ana kadar ucuncu tarafa gitmez.
   ------------------------------------------------------------------ */
.mapf{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--flame-10);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
  text-align:center;
}
.mapf::before{
  content:"";position:absolute;inset:0;opacity:.06;
  background-image:
    linear-gradient(var(--blue-flame) 1px,transparent 1px),
    linear-gradient(90deg,var(--blue-flame) 1px,transparent 1px);
  background-size:38px 38px;
}
.mapf__in{position:relative;padding:var(--sp-5)}
.mapf__ico{width:30px;height:30px;color:var(--accent-red);stroke-width:1.5;margin:0 auto var(--sp-4)}
.mapf__t{font-family:var(--font-head);font-weight:600;font-size:1.125rem}
.mapf__d{color:var(--text-muted);font-size:.8125rem;margin-top:.4375rem;max-width:38ch}
.mapf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.mapf{aspect-ratio:4/3}}

/* ------------------------------------------------------------------
   MADDE LISTESI
   ------------------------------------------------------------------ */
.ticks li{
  position:relative;padding-left:1.625rem;
  color:var(--text-muted);font-size:.9375rem;
}
.ticks li + li{margin-top:.75rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;border:2px solid var(--accent-red);border-radius:50%;
}

/* ------------------------------------------------------------------
   SCROLL REVEAL
   Tek seferlik. Yatay kayma, zoom, dondurme YOK.
   prefers-reduced-motion aciksa tamamen kapali.
   ------------------------------------------------------------------ */
.rev{opacity:0;transform:translateY(16px);
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
.rev.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .rev{opacity:1;transform:none;transition:none}
}