/* BAFF Mimarlık — ortak stiller
   Tüm sayfalar bu dosyayı <head> içinde, kendi <style> bloklarından ÖNCE yükler.
   Sayfaya özel kurallar ilgili HTML dosyasının <style> bloğunda kalır ve
   aynı özgüllükte olduklarında buradaki kuralları geçersiz kılar. */

/* ---- Tasarım token'ları ---- */
:root{
  --color-bg:#FFFFFF;
  --color-text:#111111;
  --color-text-secondary:#5A5A5A;
  --color-border:#E5E5E5;
  --color-bg-dark:#111111;
  --color-text-on-dark:#FFFFFF;
  --font-base:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --space-xs:8px; --space-sm:16px; --space-md:32px; --space-lg:56px; --space-xl:80px; --space-2xl:130px;
  --container-max:1280px;
}
@media (max-width:768px){ :root{ --space-md:24px; --space-lg:40px; --space-xl:60px; --space-2xl:90px; } }

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* scroll-behavior:smooth burada YOK: Lenis (assets/js/main.js) kaydırmayı
   kendi RAF döngüsüyle yönetiyor, native smooth-scroll ile çakışıp kesik/
   titrek harekete yol açardı. */
body{ font-family:var(--font-base); color:var(--color-text); background:var(--color-bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--color-text); outline-offset:3px; }

/* ---- Layout ---- */
.container{ max-width:var(--container-max); margin-inline:auto; padding-inline:clamp(1rem,5vw,3rem); }
.section{ padding-block:var(--space-2xl); }
.section-header{ max-width:640px; margin-bottom:var(--space-xl); }

/* ---- Tipografi ---- */
h1,h2,h3{ line-height:1.15; }
h1{ font-weight:400; }
h2{ font-weight:500; }
h3{ font-weight:500; }
h1{ font-size:clamp(2.5rem,5vw,4.5rem); }
h2{ font-size:clamp(2rem,3.5vw,3rem); }
h3{ font-size:clamp(1.25rem,2vw,1.75rem); }
p{ color:var(--color-text-secondary); }
.eyebrow{ display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:var(--space-sm); }
.lead{ font-size:1.125rem; max-width:640px; }

/* ---- Butonlar ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 32px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; border:1px solid transparent; border-radius:999px; cursor:pointer; transition:all .3s ease; }
.btn-primary{ background:var(--color-text); color:#fff; }
.btn-primary:hover{ background:#fff; color:var(--color-text); border-color:var(--color-text); }
.btn-outline{ border-color:var(--color-text); color:var(--color-text); background:transparent; }
.btn-outline:hover{ background:var(--color-text); color:#fff; }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:#fff; background:transparent; }
.btn-outline-light:hover{ background:#fff; color:var(--color-text); }
.btn-light{ background:#fff; color:var(--color-text); border-color:#fff; }
.btn-light:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-row{ display:flex; gap:var(--space-sm); flex-wrap:wrap; }

/* Ok ikonlu buton — hover'da ok sağa kayar, premium mikro-etkileşim */
.btn-arrow::after{ content:'→'; display:inline-block; transition:transform .3s ease; }
.btn-arrow:hover::after{ transform:translateX(5px); }

/* ---- Header / navigasyon ---- */
/* background+blur bilerek ::before'a taşındı: backdrop-filter, position:fixed
   torunlar (mobil .nav-list) için yeni bir containing block oluşturuyor ve bu
   sticky header "yapışık" durumdayken .nav-list'in viewport yerine header'ın
   kendi kutusuna göre konumlanıp çökmesine yol açıyordu. */
.site-header{ position:sticky; top:0; z-index:100; border-bottom:1px solid var(--color-border); }
.site-header::before{ content:''; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.logo img{ height:56px; width:auto; }
.main-nav{ display:flex; align-items:center; }
.nav-list{ display:flex; align-items:center; gap:var(--space-lg); }
.nav-list a{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding-bottom:4px; position:relative; }
.nav-list a:hover{ color:var(--color-text); }
.nav-list a.active{ color:var(--color-text); }
.nav-list a:hover::after, .nav-list a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--color-text); }
/* İletişim CTA — nav'ın birincil eylemi, bu yüzden dolu pill olarak ayrışır.
   "a.nav-cta" ile yazılıyor: yukarıdaki ".nav-list a" (0,1,1) padding-bottom:4px
   veriyor ve sade ".nav-cta" (0,1,0) ona yenilerek pill'i alttan eziyordu. */
.nav-list a.nav-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; line-height:1; border:1px solid var(--color-text);
  background:var(--color-text); color:#fff; border-radius:999px;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.nav-list a.nav-cta:hover{ background:transparent; color:var(--color-text); }
/* Nav'ın alt çizgisi CTA'ya uygulanmasın — pill'in altına ayrıca çubuk çiziyordu. */
.nav-list a.nav-cta::after{ content:none; }
/* Nav ikonları yalnızca mobil/tablet'teki yandan açılan menüde görünür. */
.nav-icon{ display:none; width:20px; height:20px; flex-shrink:0; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--color-text); transition:.3s; }
@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav-list{ position:fixed; inset:88px 0 0 0; background:#fff; flex-direction:column; align-items:flex-start; padding:var(--space-lg) var(--space-md); gap:var(--space-md); transform:translateX(100%); transition:transform .35s ease; overflow-y:auto; }
  .nav-list.open{ transform:translateX(0); }
  .nav-list a{ font-size:1rem; display:flex; align-items:center; gap:12px; }
  .nav-icon{ display:inline-block; }
}

/* ---- Erişilebilirlik yardımcıları ---- */
/* Ekran okuyucuya/arama motoruna görünür, ekranda yer kaplamaz — heading hiyerarşisi
   (H1->H2->H3) için görsel tasarımı bozmadan gerekli H2'leri eklemekte kullanılıyor.
   .hp-field (iletisim.html) ile aynı "ekran dışına konumlandır" tekniği. */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- CTA bandı ---- */
.cta-band{ position:relative; overflow:hidden; isolation:isolate; background:var(--color-bg-dark); color:#fff; padding-block:calc(var(--space-xl) * 1.25); text-align:center; }
.cta-band::before{ content:''; position:absolute; inset:-20%; z-index:-1; background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.08) 0%, transparent 55%); animation:cta-glow 12s ease-in-out infinite; pointer-events:none; }
.cta-band h2{ font-weight:400; }
.cta-band p{ color:rgba(255,255,255,.6); margin-block:var(--space-sm) var(--space-lg); }

/* Kademeli beliriş: kapsayıcının kendi fade-in'i nötrlenir, çocuklar (h2/p/buton)
   aynı .in-view tetikleyicisiyle sırayla belirir — main.js'e dokunmaya gerek yok. */
.cta-band .container.fade-in{ opacity:1; transform:none; transition:none; }
.cta-band .container > *{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.cta-band .container.in-view > *{ opacity:1; transform:none; }
.cta-band .container.in-view > *:nth-child(1){ transition-delay:0s; }
.cta-band .container.in-view > *:nth-child(2){ transition-delay:.12s; }
.cta-band .container.in-view > *:nth-child(3){ transition-delay:.26s; }
.cta-band .btn::after{ content:'→'; display:inline-block; transition:transform .3s ease; }
.cta-band .btn:hover::after{ transform:translateX(5px); }

@keyframes cta-glow{
  0%,100%{ transform:translate(-3%,-2%) scale(1); }
  50%{ transform:translate(3%,2%) scale(1.1); }
}

@media (prefers-reduced-motion:reduce){
  .cta-band::before{ animation:none; }
  .cta-band .container > *{ transition:none; }
}

/* ---- Scroll ile beliren animasyon (assets/js/main.js tetikler) ---- */
.fade-in{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.fade-in.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .fade-in{ transition:none; }
}

/* ---- Video (proje videoları) — YouTube'a hiçbir istek gitmez, kullanıcı
   küçük resme tıklayana kadar; tıklayınca video bir popup'ta (lightbox) oynar.
   İmg src YouTube'un statik thumbnail servisinden (img.youtube.com), iframe
   yalnızca tıklamada DOM'a ekleniyor — Google'ın 3. parti video gömme için
   önerdiği "facade" deseni. */
.video-facade{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; cursor:pointer; background:var(--color-bg-dark); }
.video-facade.is-vertical{ aspect-ratio:9/16; max-width:360px; margin-inline:auto; }
.video-facade img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.85; transition:opacity .3s ease; }
.video-facade:hover img{ opacity:1; }
.video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; transition:transform .3s ease; pointer-events:none; }
.video-play svg{ width:24px; height:24px; margin-left:3px; color:var(--color-text); }
.video-facade:hover .video-play{ transform:translate(-50%,-50%) scale(1.08); }

/* Popup: kapanınca inner boşaltılır (main.js değil, sayfaya özel script) —
   iframe DOM'dan kalkınca YouTube oynatımı da durur. */
.video-lightbox{ position:fixed; inset:0; background:rgba(17,17,17,.95); z-index:200; display:none; align-items:center; justify-content:center; padding:var(--space-lg); }
.video-lightbox.open{ display:flex; }
.video-lightbox-inner{ width:min(90vw,960px); aspect-ratio:16/9; position:relative; }
.video-lightbox-inner.is-vertical{ width:min(90vw,400px); aspect-ratio:9/16; }
.video-lightbox-inner iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-lightbox-close{ position:absolute; top:var(--space-md); right:var(--space-md); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; transition:all .3s ease; z-index:2; }
.video-lightbox-close:hover{ background:#fff; color:var(--color-text); }

/* ---- Proje mini-SSS ("[proje adı] kim yaptı" sorgularına düz metin cevap) ----
   Sayfadaki FAQPage JSON-LD'siyle birebir eşleşen görünür karşılık. sss.html'deki
   akordeondan farklı olarak burada <details> ile gizleme YOK: blok 1-2 soruluk ve
   hep açık, çünkü amaç arama motorunun/AI Overview'ın doğrudan alıntılayabileceği
   bir soru-cevap yapısı sunmak. .video-facade gibi yalnızca bazı proje sayfalarında
   kullanılıyor ama ortak bileşen olduğu için base.css'te duruyor. */
.project-faq{ margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:1px solid var(--color-border); }
.project-faq h2{ font-size:clamp(1.25rem,2vw,1.75rem); margin-bottom:var(--space-md); }
.project-faq-item + .project-faq-item{ margin-top:var(--space-md); }
.project-faq-item h3{ font-size:1rem; font-weight:600; margin-bottom:var(--space-xs); }
.project-faq-item p{ max-width:680px; }

/* ---- Footer ---- */
.site-footer{ background:var(--color-bg-dark); color:#fff; padding-block:var(--space-xl) var(--space-md); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-lg); padding-bottom:var(--space-lg); border-bottom:1px solid rgba(255,255,255,.15); }
.footer-logo{ height:150px; width:auto; margin-bottom:var(--space-md); }
.footer-cta-heading{ font-size:clamp(1.375rem,2.2vw,1.75rem); font-weight:500; line-height:1.25; letter-spacing:-.01em; color:#fff; margin-bottom:var(--space-xs); }
.footer-brand p{ color:rgba(255,255,255,.6); max-width:300px; margin-bottom:var(--space-md); }
.footer-col h3{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--space-md); font-weight:600; }
.footer-col li{ margin-bottom:var(--space-xs); }
.footer-col a,.footer-col address{ color:rgba(255,255,255,.65); font-style:normal; font-size:.9rem; line-height:1.9; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ padding-top:var(--space-md); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-sm); font-size:.75rem; color:rgba(255,255,255,.45); }

/* ---- Footer imzası (geliştirici kredisi) ---- */
.footer-signature{ padding-top:var(--space-lg); }
.signature-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-sm); padding-top:var(--space-lg); border-top:1px solid rgba(255,255,255,.08); text-align:center; color:rgba(255,255,255,.55); opacity:.85; transition:opacity .3s ease, color .3s ease; }
.signature-link:hover{ opacity:1; color:#fff; }
.signature-logo{ height:126px; width:auto; opacity:.9; transition:opacity .3s ease; }
.signature-link:hover .signature-logo{ opacity:1; }
.signature-link span{ font-size:1.008rem; line-height:1.4; max-width:100%; }

@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-logo{ height:110px; }
  .signature-logo{ height:92px; }
  .signature-link span{ font-size:.805rem; }
}
