/* ============================================================
   REKSER REKLAM ATÖLYESİ — styles.css
   Palet: lacivert zemin + TEK vurgu (kırmızı) + ince altın çizgi
   ============================================================ */

/* ---- 1. TOKENS ---- */
:root{
  /* Renk */
  --navy-900:#071426;
  --navy-800:#0B1B2E;   /* ana koyu zemin */
  --navy-700:#12263D;   /* kart / yüzey */
  --navy-600:#1B3350;   /* kenarlık */
  --light:#F5F6F8;      /* açık zemin */
  --light-2:#E7EAEF;

  --red:#D7262C;        /* TEK vurgu rengi — sadece CTA/aktif/odak.
                           DOLGU olarak kullan (buton zemini, aktif chip, çizgi).
                           Beyaz yazıyla 5.0:1 — butonlarda sorun yok. */
  --red-text:#E85F65;   /* Koyu zeminde KIRMIZI YAZI için. --red metin olarak
                           3.47:1'de kalıyordu (AA 4.5 ister); bu ton navy-700
                           üstünde 4.57:1. Dolgularda ASLA kullanma — marka
                           kırmızısı --red olarak kalmalı. */
  --red-600:#B81E24;
  --gold:#C9A227;       /* sadece ince çizgi ve küçük etiket */
  --wa:#17803F;         /* WhatsApp yeşili, beyaz yazı 5.0:1 için koyulaştırıldı
                           (#1FA855 iken 3.09:1 ile AA altındaydı) */
  --wa-600:#12692F;     /* hover — tabandan daha koyu olmalı */

  --text:#FFFFFF;
  --text-2:#A8B4C4;     /* koyu zeminde ikincil metin — en kötü durumda 7.29:1 */
  --text-3:#828F9F;     /* koyu zeminde EN sönük metin (yardım, telif, placeholder).
                           Daha aşağı inme: navy-700 üstünde 4.65:1 ile AA sınırında. */
  --text-dark:#0B1B2E;
  /* DİKKAT: --text-dark-* yalnızca AÇIK zeminde (Referanslar bölümü) kullanılır.
     Koyu zeminde kontrastı 2.5:1'e düşer — orada --text-2 / --text-3 kullan. */
  --text-dark-2:#4A5768;

  /* Tipografi */
  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Boşluk ritmi (4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* Hareket — giriş ease-out, çıkış ease-in, çıkış ~%65 */
  --d-in:280ms; --d-out:180ms;
  --e-out:cubic-bezier(.16,.84,.44,1);
  --e-in:cubic-bezier(.55,.06,.68,.19);

  /* Katman */
  --z-nav:100; --z-float:90; --z-bar:95; --z-skip:200;

  --wrap:1320px;
}

/* ---- 2. RESET ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--navy-800);
  overflow-x:hidden;
}
img,svg,iframe{display:block;max-width:100%;}
img{height:auto;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,p,dl,dd,figure{margin:0;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}

/* Görünür odak halkası — asla kaldırma */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.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:fixed;top:-100px;left:var(--s-4);z-index:var(--z-skip);
  background:var(--red);color:#fff;padding:var(--s-3) var(--s-5);
  border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600;
  transition:top var(--d-out) var(--e-out);
}
.skip-link:focus{top:0;}

/* ---- 3. TİPOGRAFİ ---- */
h1,h2,h3,.num,.step-no{
  font-family:var(--f-head);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  text-transform:uppercase;
}
h1{font-size:clamp(38px,6.2vw,72px);}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;}
h3{font-size:18px;letter-spacing:-.01em;}
.lead{font-size:clamp(16px,1.3vw,18px);color:var(--text-2);max-width:46ch;}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s-4);
  padding-left:var(--s-3);border-left:2px solid var(--gold);
}
.rule-gold{display:block;width:88px;height:1px;background:var(--gold);margin:var(--s-5) 0;}

/* ---- 4. LAYOUT ---- */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;}
.section{padding-block:clamp(56px,7vw,var(--s-9));}
.section:nth-of-type(even){background:var(--navy-800);}

/* Ortalanmış bölüm başlığı (çizgili) */
.section-title-center{
  display:flex;align-items:center;gap:var(--s-5);
  font-size:14px;letter-spacing:.18em;font-weight:700;
  color:var(--text-2);margin-bottom:var(--s-7);
}
.section-title-center::before,.section-title-center::after{
  content:'';flex:1;height:1px;background:var(--navy-600);
}
.section-title-center span{white-space:nowrap;}

/* Sol sütun başlıklı iki kolonlu düzen */
.split{display:grid;grid-template-columns:1fr;gap:var(--s-6);}
@media (min-width:1024px){
  .split{grid-template-columns:280px 1fr;gap:var(--s-8);align-items:start;}
}

/* ---- 5. BUTONLAR ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:0 var(--s-5);
  font-weight:600;font-size:15px;
  border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--d-out) var(--e-out),
             transform 120ms var(--e-out),
             border-color var(--d-out) var(--e-out);
  touch-action:manipulation;
}
.btn .arrow{transition:transform var(--d-out) var(--e-out);}
.btn:hover .arrow{transform:translateX(4px);}
.btn:active{transform:scale(.97);}

.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-600);}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.btn-sm{min-height:42px;font-size:14px;padding:0 var(--s-4);}
.btn-block{width:100%;}
.btn-wa{background:var(--wa);color:#fff;}
.btn-wa:hover{background:var(--wa-600);}
.btn-wa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;}

/* ---- 6. HEADER ---- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  /* beyaz saydam bant — hero'nun üstünde ayrı bir katman gibi dursun */
  background:
    linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.06)),
    rgba(11,27,46,.26); /* altta ince koyu taban: menü yazısı fotoğrafın
                           açık kısmına denk gelse de kontrast düşmesin */
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:background var(--d-in) var(--e-out),
             border-color var(--d-in) var(--e-out),
             box-shadow var(--d-in) var(--e-out);
}
/* Aşağı kaydırınca bant koyulaşır: altındaki açık zeminli bölümlerde
   (güven şeridi) beyaz yazı okunaklı kalsın diye. */
.site-header.is-stuck{
  background:rgba(7,20,38,.86);
  border-bottom-color:var(--navy-600);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
@supports not (backdrop-filter:blur(1px)){
  .site-header{background:rgba(11,27,46,.55);}
}
.header-inner{display:flex;align-items:center;gap:var(--s-5);min-height:80px;}

.logo{display:flex;align-items:center;flex-shrink:0;}
.logo img{height:56px;width:auto;}
@media (max-width:520px){.logo img{height:46px;}}

.nav{display:flex;gap:var(--s-6);margin-left:auto;}
.nav a{
  font-size:15px;color:var(--text-2);position:relative;padding:var(--s-2) 0;
  transition:color var(--d-out) var(--e-out);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-out) var(--e-out);
}
.nav a:hover,.nav a.is-active{color:#fff;}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);}

.header-cta{margin-left:var(--s-6);}
.nav-toggle{display:none;width:48px;height:48px;flex-direction:column;gap:5px;align-items:center;justify-content:center;margin-left:auto;}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;transition:transform var(--d-out) var(--e-out),opacity var(--d-out) var(--e-out);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1100px){
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .nav{
    position:fixed;inset:80px 0 auto 0;flex-direction:column;gap:0;margin:0;
    background:var(--navy-900);border-top:1px solid var(--navy-600);
    padding:var(--s-3) 20px var(--s-5);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--d-out) var(--e-in),transform var(--d-out) var(--e-in);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto;transition-timing-function:var(--e-out);}
  .nav a{padding:var(--s-4) 0;border-bottom:1px solid var(--navy-700);font-size:17px;}
  .nav a::after{display:none;}
}

/* ---- 7. HERO ---- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;padding-block:120px var(--s-8);overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center right;
  /* fotoğraf arka planda kalsın: hafif blur + karartma.
     scale, blur'un kenarda yumuşak şerit bırakmasını engeller. */
  filter:blur(2px) brightness(.86);
  transform:scale(1.06);
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--navy-800) 10%,rgba(11,27,46,.72) 40%,rgba(11,27,46,.10) 78%),
    linear-gradient(0deg,var(--navy-800) 2%,transparent 38%);
}
@media (max-width:768px){
  /* mobilde metin fotoğrafın tam üstüne biniyor — okunabilirlik için daha kapalı */
  .hero-media img{filter:blur(3px) brightness(.62);}
  .hero-media::after{
    background:linear-gradient(0deg,var(--navy-800) 4%,rgba(11,27,46,.74) 58%,rgba(11,27,46,.60) 100%);
  }
}
.hero-inner{
  position:relative;z-index:1;width:min(100% - 40px,var(--wrap));
  display:grid;grid-template-columns:1fr;gap:var(--s-6);
}
@media (min-width:1100px){
  .hero-inner{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-8);align-items:end;}
}
.hero-copy{max-width:640px;}

/* Kırmızı çizgili üst etiket */
.hero-eyebrow{
  display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);
}
/* Çizgi de yazıyla aynı tonda olsun — yan yana iki farklı kırmızı göze batıyor */
.he-dash{display:block;width:28px;height:2px;background:var(--red-text);flex-shrink:0;}

.hero .lead{margin-top:var(--s-5);}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);}

/* Hero istatistikleri — projeler bölümündeki üçlüyle bilinçli olarak aynı */
.hero-stats{
  display:flex;flex-wrap:wrap;gap:var(--s-4) 0;
  margin-top:var(--s-7);
}
.hero-stats > div{
  display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--s-5);
  border-left:1px solid var(--navy-600);
}
.hero-stats > div:first-child{padding-left:0;border-left:0;}
/* Mobilde dikey ayraçlar alt alta dizilince bozuk durur → 2'li ızgara */
@media (max-width:639px){
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4);margin-top:var(--s-6);}
  .hero-stats > div{padding:0;border-left:0;}
}
.stat-ico{
  width:26px;height:26px;flex-shrink:0;
  fill:none;stroke:var(--red);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.hero-stats .num{font-size:clamp(24px,2.4vw,30px);line-height:1;color:#fff;}
.hero-stats dd{
  margin:5px 0 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);line-height:1.3;
}

/* Kaydırma ipucu */
.hero-scroll{
  display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-7);
  color:var(--text-2);transition:color var(--d-out) var(--e-out);
}
.hero-scroll:hover{color:#fff;}
/* Mobilde gereksiz — kart zaten aşağıda içerik olduğunu söylüyor */
@media (max-width:767px){.hero-scroll{display:none;}}
.hs-label{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.hs-track{
  position:relative;width:22px;height:36px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;overflow:hidden;
}
.hs-track i{
  position:absolute;left:50%;top:7px;width:2px;height:8px;margin-left:-1px;
  background:var(--red);border-radius:2px;
  animation:hsDrop 1.9s var(--e-out) infinite;
}
@keyframes hsDrop{
  0%{transform:translateY(0);opacity:0;}
  18%{opacity:1;}
  75%{transform:translateY(14px);opacity:0;}
  100%{opacity:0;}
}

/* Öne çıkan proje kartı (hero sağ alt) */
.hero-proj{
  display:block;padding:var(--s-5);
  background:rgba(11,27,46,.74);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  transition:border-color var(--d-out) var(--e-out),
             transform var(--d-out) var(--e-out),
             box-shadow var(--d-out) var(--e-out);
}
.hero-proj:hover{
  transform:translateY(-3px);border-color:rgba(215,38,44,.55);
  box-shadow:0 18px 38px rgba(0,0,0,.42);
}
.hp-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:var(--s-4);
}
.hp-main{display:flex;align-items:flex-start;gap:var(--s-4);}
.hp-txt{flex:1;min-width:0;display:block;}
.hp-txt b{
  display:block;font-family:var(--f-head);font-weight:700;text-transform:uppercase;
  font-size:19px;line-height:1.12;letter-spacing:-.01em;color:#fff;
}
.hp-sub{display:block;margin-top:var(--s-3);font-size:12.5px;color:var(--text-2);line-height:1.4;}
.hp-meta{
  display:flex;align-items:center;gap:6px;margin-top:var(--s-3);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
}
.hp-meta svg{
  width:14px;height:14px;flex-shrink:0;
  fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.hp-thumb{
  flex:0 0 auto;width:76px;height:56px;overflow:hidden;border-radius:var(--r-sm);
  border:1px solid var(--navy-600);
}
.hp-thumb img{width:100%;height:100%;object-fit:cover;}
.hp-cta{
  display:flex;align-items:center;gap:var(--s-2);
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;font-weight:600;color:#fff;
}
.hp-cta .arrow{margin-left:auto;color:var(--red);transition:transform var(--d-out) var(--e-out);}
.hero-proj:hover .hp-cta .arrow{transform:translateX(4px);}

@media (prefers-reduced-motion:reduce){
  .hs-track i{animation:none;opacity:1;}
  .hero-proj{transition:none;}
}
.ico{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* ---- 8. REFERANSLAR ---- */
.trust{
  background:var(--light);color:var(--text-dark);
  border-block:1px solid var(--light-2);
  padding-block:clamp(48px,6vw,var(--s-8));
}
/* Ortalanmış eyebrow (varsayılan sol-kenarlıklıyı ezer) */
.eyebrow-center{
  display:table;margin-inline:auto;padding-left:0;border-left:0;text-align:center;
}
/* Açık zeminde başlık koyu okunmalı */
.trust .section-title-center{color:var(--text-dark);margin-bottom:var(--s-4);}
.trust .section-title-center::before,
.trust .section-title-center::after{background:var(--light-2);}
.trust-sub{
  text-align:center;max-width:58ch;margin:0 auto var(--s-7);
  font-size:14.5px;line-height:1.6;color:var(--text-dark-2);
}
.logo-wall{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-3);margin-bottom:var(--s-7);list-style:none;
}
.logo-wall li{flex:0 1 150px;display:flex;}
.logo-card{
  width:100%;height:86px;padding:var(--s-4) var(--s-3);
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--light-2);border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(11,27,46,.05);
  transition:transform var(--d-out) var(--e-out),box-shadow var(--d-out) var(--e-out),border-color var(--d-out) var(--e-out);
}
.logo-card img{max-height:46px;max-width:100%;width:auto;object-fit:contain;}
.logo-card .ph{
  background:none;height:auto;min-height:0;padding:0;
  color:var(--text-dark-2);font-size:10.5px;letter-spacing:.04em;
  line-height:1.35;text-align:center;white-space:normal;
}
.logo-wall li:hover .logo-card{
  transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 10px 24px rgba(11,27,46,.13);
}

/* Rakam üçlüsü artık Hero ve Projeler'de; Referanslar'daki `.trust-stats`
   bloğu buradan kaldırıldı. `.num` her iki yerde de kullanılıyor. */
.num{
  font-size:28px;color:var(--red);
  font-variant-numeric:tabular-nums;/* zıplamayı önler */
}
.num-text{font-size:20px;}

/* ---- 9. HİZMETLER (HUD / glassmorphic) ---- */
.services{background:var(--navy-900);position:relative;overflow:hidden;}
.services > .wrap{position:relative;z-index:2;}
/* Hafif teknik zemin parıltısı */
.services::before{
  content:'';position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:min(900px,90%);height:420px;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,rgba(224,42,58,.10) 0%,rgba(224,42,58,0) 70%);
}

/* Arka plan videosu — çok düşük opasite, sadece hareket hissi.
   Kırmızı parıltının (::before) ALTINDA, içeriğin altında kalır. */
.svc-video{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
/* Video soyut, yumuşak bir gradyan döngüsü (yüksek frekanslı detay yok) →
   gerçek çekime göre metnin arkasında çok daha güvenli, bu yüzden daha görünür
   olabiliyor. saturate() canlı maviyi paletin lacivertine yaklaştırır ki
   kırmızı vurgu rengiyle yarışmasın. */
.svc-video video{
  width:100%;height:100%;object-fit:cover;
  opacity:.34;
  filter:saturate(.7) brightness(.95);
}
/* Kenarlarda ve altta yumuşasın — kutu gibi durmasın, alt bölümle dikiş olmasın */
.svc-video::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--navy-900) 0%,rgba(7,20,38,.42) 24%,rgba(7,20,38,.42) 72%,var(--navy-900) 100%),
    linear-gradient(90deg,var(--navy-900) 0%,transparent 20%,transparent 80%,var(--navy-900) 100%);
}
/* Mobilde ve hareket hassasiyetinde tamamen kapalı (JS de istek atmaz) */
@media (max-width:767px),(prefers-reduced-motion:reduce){
  .svc-video{display:none;}
}

/* HUD köşe parantezleri */
.hud-bracket{position:absolute;top:-6px;width:26px;height:26px;pointer-events:none;opacity:.6;}
.hud-tl{left:-6px;border-top:2px solid var(--red);border-left:2px solid var(--red);}
.hud-tr{right:-6px;border-top:2px solid var(--red);border-right:2px solid var(--red);}

.svc-head{text-align:center;margin-bottom:var(--s-7);}
.svc-head-title{
  font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:clamp(26px,4.4vw,46px);line-height:1.05;letter-spacing:.01em;
  text-transform:uppercase;margin:var(--s-2) 0 var(--s-3);
}
.services-sub{
  text-align:center;max-width:52ch;margin:0 auto;
  font-size:14.5px;line-height:1.6;color:var(--text-2);
}

.svc-cards{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-top:var(--s-7);}
@media (min-width:600px){.svc-cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.svc-cards{grid-template-columns:repeat(4,1fr);}}

.svc-card{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:440px;display:flex;border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 40px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform var(--d-out) var(--e-out),border-color var(--d-out) var(--e-out),box-shadow var(--d-out) var(--e-out);
}
/* Arka plan görseli — üstte görünür, aşağı doğru silinir */
.svc-card-media{position:absolute;inset:0;z-index:-2;}
.svc-card-media img,.svc-card-media .ph{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);opacity:.4;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 80%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 80%);
  transition:opacity var(--d-out) var(--e-out);
}
.svc-card-media .ph{opacity:.28;}
/* Kontrast örtüsü */
.svc-card::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(4,10,20,.55) 0%,rgba(4,10,20,.72) 42%,rgba(7,20,38,.93) 100%);
}
/* Alt kırmızı ışık çizgisi */
.svc-card::after{
  content:'';position:absolute;left:18%;right:18%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  box-shadow:0 0 16px 1px rgba(224,42,58,.5);opacity:.7;
  transition:opacity var(--d-out) var(--e-out);
}
.svc-card:hover{
  transform:translateY(-6px);border-color:rgba(224,42,58,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 54px rgba(0,0,0,.45);
}
.svc-card:hover .svc-card-media img{opacity:.55;}
.svc-card:hover::after{opacity:1;}

.svc-card-ticks{position:absolute;top:16px;right:16px;display:flex;gap:3px;align-items:flex-end;height:16px;opacity:.5;}
.svc-card-ticks i{width:2px;background:var(--text-2);}
.svc-card-ticks i:nth-child(1){height:8px;}
.svc-card-ticks i:nth-child(2){height:16px;background:var(--red);}
.svc-card-ticks i:nth-child(3){height:11px;}

.svc-card-body{
  position:relative;display:flex;flex-direction:column;flex:1;
  padding:var(--s-5) var(--s-5) var(--s-6);
}
.svc-card-no{
  font-family:var(--f-head);font-weight:800;font-size:15px;
  color:var(--red-text);letter-spacing:.05em;
}
.svc-card-title{
  font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:22px;line-height:1.1;text-transform:uppercase;
  margin:var(--s-2) 0 var(--s-3);
}
.svc-card-tag{font-size:13px;line-height:1.5;color:var(--text-2);min-height:2.6em;}
.svc-card-list{
  list-style:none;margin:var(--s-4) 0 0;display:flex;flex-direction:column;gap:9px;
}
.svc-card-list li{
  position:relative;padding-left:18px;font-size:13.5px;color:#E7ECF3;
}
.svc-card-list li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--red);
}
.svc-card-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:var(--s-5);
  font-family:var(--f-head);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;
}
.svc-card-link .arrow{transition:transform var(--d-out) var(--e-out);}
.svc-card-link:hover .arrow{transform:translateX(5px);}
.svc-card-link:hover{color:#fff;}
.svc-card-code{
  position:absolute;right:var(--s-5);bottom:var(--s-4);
  font-size:10.5px;letter-spacing:.12em;color:var(--text-3);font-family:var(--f-head);
}

.svc-foot{
  display:flex;align-items:center;justify-content:center;gap:var(--s-4);
  margin-top:var(--s-7);color:var(--text-3);
  font-family:var(--f-head);font-size:11px;letter-spacing:.35em;text-transform:uppercase;
}
.svc-foot::before,.svc-foot::after{content:'';height:1px;width:min(20vw,180px);background:linear-gradient(90deg,transparent,var(--navy-600));}
.svc-foot::after{background:linear-gradient(90deg,var(--navy-600),transparent);}

/* ---- 10. PROJELER ----
   Dil: gerçek fotoğraf önde, minimal kart, büyük tipografi, ince kırmızı vurgu.
   Hizmetlerdeki glass dili burada BİLİNÇLİ olarak tekrarlanmıyor.        */
/* NOT: `.section:nth-of-type(even)` (satır ~108) özgüllük olarak sade `.projects`i
   eziyordu; bölüm istemeden navy-800 kalıyor ve Hizmetler'le arasında görünür bir
   renk basamağı oluşuyordu. `.section.projects` ile özgüllük eşitlenip sonra
   geldiği için artık kazanıyor.
   Üst = navy-900 (Hizmetler ile dikişsiz), alt = navy-800'e yumuşak geçiş (Süreç ile dikişsiz). */
.section.projects{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,
    var(--navy-900) 0%,
    var(--navy-900) 84%,
    var(--navy-800) 100%);
}

/* Hareketli arka plan — video yok, sıfır ek dosya boyutu.
   İki katman: yavaş kayan teknik ızgara + çok yavaş geçen kırmızı ışık.
   Her ikisi de transform ile animasyonlu (GPU) — layout/paint tetiklemez. */
.projects::before,
.projects::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
}
/* 1) Izgara deseni — atölye/teknik çizim hissi.
   Kutu 4 yandan 80px taşar: animasyon 64px kaydırdığında kenarda boşluk kalmasın.
   Dikey maske px tabanlı → bölüm yüksekliği ne olursa olsun üstte/altta
   ~220px'lik yumuşak geçiş. Hizmetler bölümüyle arada sert dikiş oluşmaz. */
.projects::before{
  inset:-80px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px,#000 calc(100% - 220px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 220px,#000 calc(100% - 220px),transparent 100%);
  animation:projGrid 34s linear infinite;
  will-change:transform;
}
/* 2) Kırmızı ışık süpürmesi — çok düşük opasite, sadece "canlı" hissi.
   Üst/alt sınıra yaklaşmaması için dikeyde içeride tutuluyor. */
.projects::after{
  inset:8% -30% 4%;
  background:radial-gradient(ellipse 38% 46% at 50% 50%,rgba(215,38,44,.15),transparent 68%);
  animation:projGlow 26s ease-in-out infinite;
  will-change:transform,opacity;
}
/* İçerik her zaman animasyonun üstünde kalsın */
.projects > .wrap{position:relative;z-index:1;}

@keyframes projGrid{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(64px,64px,0);} /* tam bir hücre → dikişsiz döngü */
}
@keyframes projGlow{
  0%  {transform:translate3d(-16%,6%,0)  scale(1);   opacity:.55;}
  50% {transform:translate3d(14%,-8%,0)  scale(1.25);opacity:1;}
  100%{transform:translate3d(-16%,6%,0)  scale(1);   opacity:.55;}
}

/* Hareket hassasiyeti olan kullanıcılarda tamamen dursun */
@media (prefers-reduced-motion:reduce){
  .projects::before,.projects::after{animation:none;}
}

/* --- 10a. Öne çıkan proje + güven rayı --- */
.pf{display:grid;grid-template-columns:1fr;gap:var(--s-6);align-items:start;}
@media (min-width:1024px){.pf{grid-template-columns:340px 1fr;gap:var(--s-8);}}

.pf-note{color:var(--text-2);font-size:14px;line-height:1.65;margin-top:var(--s-4);max-width:36ch;}

.pf-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4) var(--s-3);
  margin-top:var(--s-6);padding-top:var(--s-6);
  border-top:1px solid var(--navy-600);
}
.pf-stat-ico{
  width:20px;height:20px;margin-bottom:var(--s-3);
  fill:none;stroke:var(--text-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.pf-stats .num{font-size:clamp(23px,2.3vw,30px);line-height:1;color:var(--red);}
.pf-stats dd{
  margin:7px 0 0;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);line-height:1.35;
}

/* --- 10a-2. Slider sahnesi --- */
.pf-stage{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--navy-600);background:var(--navy-800);
  /* width:100% ŞART. Onsuz genişlik belirsiz kalıyor ve tarayıcı aspect-ratio'yu
     ters yönde çözüyor: min-height 420px'ten 420×4/3 = 560px genişlik üretiyor.
     335px'lik mobil sütunda sahne sağdan taşıp kırpılıyordu (oklar ekran dışında
     kalıyordu). Genişlik kesinleşince aspect-ratio yüksekliği türetiyor,
     min-height de yalnızca alt sınır olarak çalışıyor — istenen davranış bu. */
  width:100%;
  /* min-height: slayt metni hiçbir genişlikte sahneden taşmasın */
  aspect-ratio:4/3;min-height:420px;
}
@media (min-width:640px){.pf-stage{aspect-ratio:16/9;min-height:400px;}}
@media (min-width:1024px){.pf-stage{aspect-ratio:auto;height:clamp(420px,34vw,480px);}}

.pf-slides{position:absolute;inset:0;}
.pf-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity 520ms var(--e-out),visibility 0s linear 520ms;
}
.pf-slide.is-active{opacity:1;visibility:visible;transition:opacity 520ms var(--e-out);}
/* Zoom süresi otomatik geçiş aralığından (main.js DUR=6500ms) KISA olmalı;
   7s iken hareket her seferinde yarıda kesiliyordu. 6.2s'te tamamlanıp
   geçişten önce ~300ms duruyor. DUR değişirse bu da güncellenmeli. */
.pf-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6.2s linear;}
.pf-slide.is-active img{transform:scale(1);}

/* Okunabilirlik katmanı — mobilde alttan, masaüstünde soldan */
.pf-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(7,20,38,.95) 8%,rgba(7,20,38,.72) 46%,rgba(7,20,38,.18) 100%);
}
@media (min-width:1024px){
  .pf-slide::after{
    background:linear-gradient(90deg,rgba(7,20,38,.95) 0%,rgba(7,20,38,.82) 32%,rgba(7,20,38,.30) 62%,rgba(7,20,38,.06) 100%);
  }
}

/* Alt padding kontrollere yer ayırır — metin oklarla/noktalarla asla çakışmaz */
.pf-slide-body{
  position:absolute;z-index:2;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  gap:var(--s-3);
  padding:var(--s-5) var(--s-5) calc(var(--s-5) + 52px);
}
@media (min-width:1024px){
  .pf-slide-body{
    inset:0 auto 0 0;width:min(460px,54%);
    justify-content:center;
    padding:var(--s-6) var(--s-7) calc(var(--s-6) + 56px);
  }
}
.pf-badge{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-text);border:1px solid var(--red-text);border-radius:3px;padding:5px 10px;
}
.pf-slide-body h3{font-size:clamp(21px,2.4vw,32px);line-height:1.08;}
.pf-role{font-size:14px;color:var(--text-2);}
.pf-line{display:block;width:56px;height:1px;background:var(--navy-600);}
.pf-meta{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);}
.pf-cta{margin-top:var(--s-2);}

/* Slider kontrolleri */
.pf-nav{
  position:absolute;z-index:3;left:var(--s-5);right:var(--s-5);bottom:var(--s-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  pointer-events:none;
}
@media (min-width:1024px){.pf-nav{left:var(--s-7);right:var(--s-5);bottom:var(--s-5);}}
.pf-nav > *{pointer-events:auto;}
.pf-dots{display:flex;gap:var(--s-2);}
.pf-dot{
  width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.26);
  transition:background var(--d-out) var(--e-out);
  position:relative;
}
/* Çubuk 26×3 görünüyor ama dokunma hedefi olarak çok ince (WCAG 2.5.8 min 24×24).
   ::after görünmez bir tıklama alanı serer: 26×25px. Konumlandırılmış olduğu için
   layout'a ve görünüme hiç dokunmaz. */
.pf-dot::after{
  content:'';position:absolute;left:0;right:0;top:-11px;bottom:-11px;
}
.pf-dot:hover{background:rgba(255,255,255,.55);}
.pf-dot.is-active{background:var(--red);}
.pf-arrows{display:flex;gap:var(--s-2);}
.pf-arrow{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.20);border-radius:var(--r-sm);
  background:rgba(7,20,38,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background var(--d-out) var(--e-out),border-color var(--d-out) var(--e-out);
}
.pf-arrow:hover{background:var(--red);border-color:var(--red);}
.pf-arrow svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Duraklat/oynat: tek düğme, iki ikon — hangisinin görüneceğini durum belirler */
#pfPause .pf-ico-play{display:none;fill:#fff;stroke:none;}
#pfPause.is-paused .pf-ico-pause{display:none;}
#pfPause.is-paused .pf-ico-play{display:block;}

/* --- 10b. Filtre barı — featured ile galeri arasındaki geçiş --- */
.pfilter{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin:var(--s-8) 0 var(--s-6);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--navy-600);border-radius:var(--r-lg);
  background:var(--navy-800);
}
@media (min-width:1024px){.pfilter{border-radius:100px;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);}}

.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);min-width:0;}
@media (max-width:639px){
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
  .filters::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;}
}
.chip{
  min-height:40px;padding:0 var(--s-4);
  border:1px solid transparent;border-radius:100px;
  font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;
  transition:background var(--d-out) var(--e-out),color var(--d-out) var(--e-out),border-color var(--d-out) var(--e-out);
}
.chip:hover{color:#fff;border-color:var(--navy-600);}
.chip.is-active{background:var(--red);border-color:var(--red);color:#fff;}

.pfilter-all{
  display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap;
  padding:0 var(--s-3);font-size:13px;font-weight:600;color:var(--red-text);
  transition:color var(--d-out) var(--e-out);
}
.pfilter-all:hover{color:#fff;}
.pfilter-all .arrow{transition:transform var(--d-out) var(--e-out);}
.pfilter-all:hover .arrow{transform:translateX(3px);}

/* --- 10c. Galeri — foto baskın, minimal kart --- */
.project-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:640px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1100px){.project-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* minmax(0,…) şart: kart altındaki tek satır metin (nowrap) yoksa sütunu
   min-content'e kadar şişirip ızgarayı taşırıyor. min-width:0 aynı sebeple. */
.project-card{position:relative;display:flex;min-width:0;}
.project-card[hidden]{display:none;}

.pc{
  display:flex;flex-direction:column;width:100%;padding:0;text-align:left;
  border-radius:var(--r-md);overflow:hidden;
  background:transparent;border:1px solid rgba(255,255,255,.07);
  transition:transform var(--d-out) var(--e-out),
             border-color var(--d-out) var(--e-out),
             box-shadow var(--d-out) var(--e-out);
}
.pc:hover{transform:translateY(-4px);border-color:rgba(215,38,44,.5);box-shadow:0 16px 34px rgba(0,0,0,.42);}
.pc:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

.pc-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--navy-700);}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--e-out);}
.pc:hover .pc-media img{transform:scale(1.06);}
.pc-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(7,20,38,.6) 100%);
  opacity:.75;transition:opacity var(--d-out) var(--e-out);
}
.pc:hover .pc-media::after{opacity:1;}

.pc-foot{
  display:flex;align-items:center;gap:var(--s-3);margin-top:auto;
  padding:var(--s-3) var(--s-4);background:var(--navy-800);
}
.pc-txt{flex:1;min-width:0;display:block;}
.pc-txt b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:600;color:#fff;line-height:1.25;
}
.pc-txt > span{
  display:block;margin-top:2px;font-size:11.5px;color:var(--text-2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pc-arrow{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:var(--red);
  transition:transform var(--d-out) var(--e-out);
}
.pc-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pc:hover .pc-arrow{transform:translateX(4px);}

.tag-public{
  position:absolute;left:var(--s-3);top:var(--s-3);z-index:2;
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:3px;padding:3px 8px;
  background:rgba(7,20,38,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}

/* --- 10d. Mobilde galeri: yatay kaydırmalı şerit --- */
.grid-hint{display:none;}

@media (max-width:639px){
  .grid-hint{
    display:flex;align-items:center;gap:6px;
    margin:0 0 var(--s-3);font-size:12px;color:var(--text-2);
    transition:opacity 320ms var(--e-out);
  }
  .grid-hint svg{
    width:16px;height:16px;flex:0 0 auto;
    fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    animation:hint-nudge 1.8s var(--e-out) infinite;
  }
  .grid-hint.is-done{opacity:0;}

  .project-grid{
    display:flex;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .project-grid::-webkit-scrollbar{display:none;}

  /* %62 = sonraki kart kenardan görünsün; kaydırılabilir olduğu anlaşılsın */
  .project-card{flex:0 0 62%;scroll-snap-align:start;}
}

@keyframes hint-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

.filter-empty{margin-top:var(--s-5);color:var(--text-2);font-size:14px;}

/* --- 10d. Proje büyütme penceresi --- */
body.lb-open{overflow:hidden;}
.lb{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:var(--s-4);
}
.lb[hidden]{display:none;}
.lb-backdrop{
  position:absolute;inset:0;background:rgba(3,10,20,.85);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lb-panel{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;
  width:min(1040px,100%);max-height:88vh;overflow:auto;
  background:var(--navy-800);border:1px solid var(--navy-600);border-radius:var(--r-lg);
  animation:lbIn 260ms var(--e-out);
  /* Metinler kısa, scroll neredeyse hiç gerekmiyor — çubuk göz tırmalamasın */
  scrollbar-width:none;-ms-overflow-style:none;
}
.lb-panel::-webkit-scrollbar{display:none;}
@media (min-width:860px){.lb-panel{grid-template-columns:1.2fr 1fr;}}
@keyframes lbIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}

.lb-media{background:var(--navy-900);display:flex;align-items:center;justify-content:center;}
.lb-media img{width:100%;max-height:88vh;object-fit:contain;}
.lb-body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);}
.lb-sub{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.lb-body h3{font-size:clamp(19px,2.2vw,26px);line-height:1.15;}
.lb-body p{font-size:14px;color:var(--text-2);line-height:1.7;}
.lb-list{display:grid;gap:7px;margin-top:var(--s-2);}
.lb-list li{position:relative;padding-left:22px;font-size:13.5px;color:#fff;}
.lb-list li::before{
  content:'';position:absolute;left:3px;top:6px;width:5px;height:9px;
  border:solid var(--red);border-width:0 1.7px 1.7px 0;transform:rotate(45deg);
}
.lb-close{
  position:absolute;z-index:2;top:var(--s-3);right:var(--s-3);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--navy-600);background:rgba(7,20,38,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background var(--d-out) var(--e-out),border-color var(--d-out) var(--e-out);
}
.lb-close:hover{background:var(--red);border-color:var(--red);}
.lb-close svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}

@media (prefers-reduced-motion:reduce){
  .pf-slide,.pf-slide img,.pc,.pc-media img,.pc-arrow{transition:none !important;}
  .grid-hint svg{animation:none !important;}
  .pf-slide img,.pf-slide.is-active img{transform:none;}
  .lb-panel{animation:none;}
}

/* ---- 11. SÜREÇ ---- */
.process{background:var(--navy-800);}
.steps{position:relative;display:grid;gap:var(--s-6);grid-template-columns:1fr;}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1200px){
  .steps{grid-template-columns:repeat(4,1fr);gap:var(--s-5);}
  /* adımları birleştiren ince altın çizgi — scroll'da çizilir */
  .steps::before{
    content:'';position:absolute;left:24px;right:24px;top:24px;height:1px;
    background:var(--gold);opacity:.45;
    transform:scaleX(0);transform-origin:left;
    transition:transform 900ms var(--e-out);
  }
  .steps.is-drawn::before{transform:scaleX(1);}
}
.step{position:relative;display:flex;flex-direction:column;}
.step-ico{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;margin-bottom:var(--s-4);
  border:1px solid var(--gold);background:var(--navy-800);
}
.step-ico svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.step-no{
  display:block;font-family:var(--f-head);font-weight:800;
  font-size:13px;letter-spacing:.16em;color:var(--gold);margin-bottom:6px;
}
.step h3{font-size:16px;margin-bottom:var(--s-2);}
.step p{font-size:13px;color:var(--text-2);max-width:34ch;}

.process-note{
  display:flex;align-items:center;gap:var(--s-3);
  margin-top:var(--s-7);padding:var(--s-4) var(--s-5);
  border:1px solid var(--navy-600);border-left:2px solid var(--gold);
  border-radius:var(--r-sm);background:var(--navy-700);
  font-size:14px;color:var(--text-2);
}
.process-note a{color:#fff;font-weight:600;border-bottom:1px solid var(--red);}

/* ---- 12. HAKKIMIZDA ---- */
/* NOT: burada bir `.about{background:var(--navy-900)}` vardı; `.section:nth-of-type(even)`
   (satır ~108) özgüllük olarak eziyordu, yani hiç uygulanmıyordu. Hakkımızda navy-800
   render ediliyor ve öyle kalması isteniyor — yanıltıcı olduğu için kural kaldırıldı. */
.about-inner{display:grid;gap:var(--s-7);grid-template-columns:1fr;align-items:center;}
@media (min-width:1024px){.about-inner{grid-template-columns:.9fr 1fr;gap:var(--s-9);}}
.about-media{position:relative;border-radius:var(--r-lg);overflow:visible;}
.about-media>img,.about-media>.ph{
  width:100%;aspect-ratio:9/10;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid var(--navy-600);
}
.about-media .medallion{
  position:absolute;right:-16px;bottom:32px;
  width:120px;height:120px;border-radius:50%;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.about-media .medallion img,.about-media .medallion .ph{width:100%;height:100%;object-fit:cover;}
.about-copy p{color:var(--text-2);margin-bottom:var(--s-4);max-width:56ch;}
.about-list{margin-top:var(--s-5);display:grid;gap:var(--s-3);}
.about-list li{display:flex;align-items:center;gap:var(--s-3);font-size:15px;font-weight:500;}
.tick{
  width:20px;height:20px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--red);position:relative;
}
.tick::after{
  content:'';position:absolute;left:6px;top:5px;width:5px;height:9px;
  border:solid var(--red);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}

/* ---- 12b. SIKÇA SORULAN SORULAR ----
   `.section.faq` (0,2,0) — sade `.faq` (0,1,0) olsaydı `.section:nth-of-type(even)`
   ezerdi (bkz. Projeler'deki aynı tuzak). SSS 7. bölüm (tek) olduğu için şu an
   nth kuralı zaten tutmuyor, ama araya bir bölüm daha girerse kırılmasın diye
   özgüllük baştan eşitlendi. Üstteki Hakkımızda ve alttaki İletişim navy-800;
   SSS navy-900 ile aralarına görünür bir bant koyuyor. */
.section.faq{background:var(--navy-900);}

.faq-aside-note{margin-top:var(--s-4);font-size:13.5px;color:var(--text-3);max-width:30ch;}
.faq-aside-note a{color:#fff;font-weight:600;border-bottom:1px solid var(--red);}

.faq-list{display:grid;gap:var(--s-3);}

.faq-item{
  border:1px solid var(--navy-600);border-radius:var(--r-md);
  background:var(--navy-800);
  transition:border-color var(--d-out) var(--e-out);
}
.faq-item[open]{border-color:rgba(215,38,44,.45);}
.faq-item:hover{border-color:rgba(255,255,255,.22);}

.faq-item summary{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);min-height:56px;
  font-size:15.5px;font-weight:600;color:#fff;line-height:1.4;
  cursor:pointer;list-style:none;
}
/* Safari/Chrome varsayılan üçgenini kaldır */
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:var(--r-md);}

.faq-ico{
  flex:0 0 auto;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--navy-600);color:var(--red-text);
  transition:transform var(--d-out) var(--e-out),
             background var(--d-out) var(--e-out),
             border-color var(--d-out) var(--e-out);
}
.faq-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.faq-item[open] .faq-ico{transform:rotate(135deg);background:var(--red);border-color:var(--red);color:#fff;}

.faq-body{padding:0 var(--s-5) var(--s-5);}
.faq-body p{font-size:14.5px;color:var(--text-2);line-height:1.65;max-width:66ch;}

/* ---- 13. İLETİŞİM ---- */
.contact{background:var(--navy-800);}
.contact-grid{display:grid;gap:var(--s-5);grid-template-columns:1fr;}
@media (min-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1280px){.contact-grid{grid-template-columns:1fr 1.1fr .9fr;}}

.contact-info{display:grid;gap:var(--s-4);align-content:start;}
.ci{display:flex;gap:var(--s-3);align-items:flex-start;font-size:14px;color:var(--text-2);transition:color var(--d-out) var(--e-out);}
.ci b{color:#fff;font-size:17px;font-weight:600;}
a.ci:hover{color:#fff;}
.ci-static{cursor:default;}

.contact-form{
  background:var(--navy-700);border:1px solid var(--navy-600);
  border-radius:var(--r-md);padding:var(--s-5);
}
.fields{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,1fr);}
.field-full{grid-column:1/-1;}
@media (max-width:560px){.fields{grid-template-columns:1fr;}}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:6px;}
.req{color:var(--red-text);}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);
  background:var(--navy-900);border:1px solid var(--navy-600);
  border-radius:var(--r-sm);color:#fff;
  transition:border-color var(--d-out) var(--e-out);
}
.field textarea{min-height:104px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red);}
.err{font-size:12.5px;color:#FF8A8F;margin-top:6px;min-height:0;}
.err:empty{display:none;}
.help{font-size:12px;color:var(--text-3);margin-top:6px;}
.contact-form .btn{margin-top:var(--s-5);}
.form-status{margin-top:var(--s-3);font-size:13.5px;color:var(--text-2);}
.form-status.is-ok{color:#5BD48A;}
.form-status.is-err{color:#FF8A8F;}
/* WhatsApp yedeği: form gönderilemediğinde durum alanına basılan buton */
.form-status-wa{margin-top:var(--s-3);}
.form-status-tel{display:block;margin-top:var(--s-3);color:var(--text-2);}
.form-status-tel a{color:#fff;font-weight:600;border-bottom:1px solid var(--red);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.btn.is-loading{opacity:.7;pointer-events:none;}

.map{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--navy-600);min-height:300px;}
.map iframe{width:100%;height:100%;min-height:300px;border:0;filter:grayscale(.35) contrast(1.05) brightness(.85);}
.map-btn{
  position:absolute;left:var(--s-4);bottom:var(--s-4);
  background:#fff;color:var(--text-dark);font-size:13px;font-weight:600;
  padding:10px var(--s-4);border-radius:var(--r-sm);min-height:44px;
  display:inline-flex;align-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* ---- 14. FOOTER ---- */
.site-footer{background:var(--navy-900);border-top:1px solid var(--navy-600);padding-top:var(--s-8);}
.footer-inner{display:grid;gap:var(--s-6);grid-template-columns:1fr;}
@media (min-width:768px){.footer-inner{grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--s-8);}}
.footer-logo{height:76px;width:auto;}
.footer-brand p{color:var(--text-2);font-size:13.5px;margin-top:var(--s-4);max-width:40ch;}
.site-footer h3{font-size:12px;letter-spacing:.14em;color:var(--gold);margin-bottom:var(--s-4);}
.footer-nav,.footer-contact{display:grid;gap:var(--s-2);align-content:start;}
.footer-nav a,.footer-contact a{font-size:14px;color:var(--text-2);width:fit-content;padding-block:6px;transition:color var(--d-out) var(--e-out);}
.footer-nav a:hover,.footer-contact a:hover{color:#fff;}
.footer-contact p{font-size:13.5px;color:var(--text-2);margin-top:var(--s-2);}
.ig{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);}
.ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);
  margin-top:var(--s-7);padding-block:var(--s-4);
  border-top:1px solid var(--navy-700);
  font-size:12.5px;color:var(--text-3);
}

/* ---- 15. YÜZEN AKSİYONLAR ---- */
.wa-float{
  position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:var(--z-float);
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--navy-700);border:1px solid var(--wa);
  border-radius:100px;padding:10px var(--s-4) 10px 10px;
  font-size:12px;line-height:1.25;color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform var(--d-out) var(--e-out),background var(--d-out) var(--e-out);
}
.wa-float:hover{transform:translateY(-2px);background:var(--navy-600);}
.wa-float svg{
  width:36px;height:36px;padding:8px;border-radius:50%;
  background:var(--wa);fill:none;stroke:#fff;stroke-width:1.6;flex-shrink:0;
}
.wa-float b{font-size:13px;}

.mobile-bar{display:none;}
@media (max-width:768px){
  .wa-float{display:none;}
  .mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);
    display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1px;
    background:var(--navy-600);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;background:var(--navy-900);
    font-size:12px;font-weight:600;color:var(--text-2);
  }
  .mobile-bar a.primary{background:var(--red);color:#fff;font-size:14px;}
  .mobile-bar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;}
  body{padding-bottom:58px;}
  .site-footer{padding-bottom:var(--s-5);}
}

/* ---- 16. GÖRSEL PLACEHOLDER (gerçek foto gelene kadar) ---- */
.ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;height:100%;min-height:inherit;padding:var(--s-3);
  background:
    repeating-linear-gradient(45deg,#16243A 0 12px,#12263D 12px 24px);
  color:#5A6B80;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.4;
}
.hero-media .ph{min-height:100%;}

/* ---- 17. SCROLL REVEAL ---- */
/* NOT: burada `will-change:opacity,transform` vardı. Sayfada 79 `.reveal` var;
   her biri kalıcı bir compositor katmanı tutuyordu ve animasyon bittikten sonra
   da bırakmıyordu. opacity/transform zaten ucuz özellikler — ipucu kaldırıldı. */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity 480ms var(--e-out),transform 480ms var(--e-out);
  transition-delay:var(--delay,0ms);
}
.reveal.is-in{opacity:1;transform:none;}

/* ---- 18. HAREKET AZALTMA ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important;}
  .steps::before{transform:scaleX(1) !important;}
}

/* ---- 19. YAZDIRMA ---- */
@media print{
  .site-header,.wa-float,.mobile-bar,.map,.contact-form,.skip-link{display:none !important;}
  body{background:#fff;color:#000;}
}