/* =========================================================================
   DENİZ İLETİŞİM AJANSI — Ana Stil Dosyası
   Tasarım Dili: Editoryal Lüks (Navy + Gold) — Playfair Display + Inter
   ========================================================================= */

/* ---------- 1. Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- 2. Design Tokens ---------- */
:root{
  /* Marka renkleri (logodan örneklendi: #012870) */
  --navy-950:#03081a;
  --navy-900:#050b24;
  --navy-850:#081338;
  --navy-800:#0a1c4d;
  --navy-700:#0d2668;
  --navy-600:#12377f;
  --navy-500:#1c4fa8;
  --navy-400:#3568c4;
  --navy-100:#e7edf9;

  --gold-700:#8a6a17;
  --gold-600:#a3791f;
  --gold-500:#c9a227;
  --gold-400:#dcb84a;
  --gold-300:#e9cd7f;
  --gold-100:#f7ecc9;

  --cream-50:#fdfcfa;
  --cream-100:#f7f4ee;
  --cream-200:#efe9de;
  --cream-300:#e3dbca;

  --ink-900:#0a0d16;
  --ink-800:#141827;
  --ink-700:#232a3d;
  --ink-500:#565f77;
  --ink-300:#8891a5;
  --ink-100:#c7ccd8;

  --white:#ffffff;

  --line-light: rgba(10,13,22,.10);
  --line-dark: rgba(255,255,255,.14);

  /* Anlamsal roller */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --surface: var(--white);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --brand: var(--navy-800);
  --brand-strong: var(--navy-900);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);

  /* Tipografi */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-base: 16px;
  --lh-body: 1.65;

  /* Boşluk skalası (spacious — pazarlama sitesi) */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;
  --sp-8: 9rem;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container: 1280px;
  --container-narrow: 860px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-1: 200ms;
  --dur-2: 380ms;
  --dur-3: 650ms;

  --shadow-sm: 0 2px 10px rgba(10,13,22,.06);
  --shadow-md: 0 12px 32px rgba(6,12,35,.14);
  --shadow-lg: 0 24px 70px rgba(6,12,35,.22);
  --shadow-gold: 0 14px 34px rgba(201,162,39,.28);

  --header-h: 92px;
}

/* Karanlık zeminler için yerel değişken kümesi (bölüm bazlı .on-dark sınıfı) */
.on-dark{
  --bg: var(--navy-900);
  --surface: var(--navy-850);
  --text: var(--white);
  --text-muted: rgba(255,255,255,.66);
  color: var(--text);
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video,canvas,svg{ display:block; max-width:100%; }
img{ height:auto; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--accent); color:var(--navy-900); }

/* Erişilebilir odak halkası */
:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
a.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  background:var(--navy-900); color:#fff; padding:.9rem 1.4rem;
  border-radius:var(--radius-sm); transition:top var(--dur-1) var(--ease-out);
  font-weight:600;
}
a.skip-link:focus{ top:1rem; }

/* ---------- 4. Tipografi ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-strong);
}
.on-dark .eyebrow{ color:var(--gold-300); }
.eyebrow::before{
  content:""; width:2.2em; height:2px; background:currentColor; opacity:.75; border-radius:2px;
}

h1,.h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  line-height:1.05; font-size:clamp(2.6rem,5.2vw + .6rem,5.4rem);
}
h2,.h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  line-height:1.1; font-size:clamp(2rem,2.6vw + 1rem,3.4rem);
}
h3,.h3{
  font-family:var(--font-display); font-weight:600; line-height:1.22;
  font-size:clamp(1.35rem,1vw + 1.05rem,1.85rem);
}
h4,.h4{
  font-family:var(--font-body); font-weight:700; line-height:1.35; font-size:1.15rem;
}
.lede{
  font-size:clamp(1.05rem,.4vw + 1rem,1.3rem); line-height:1.6; color:var(--text-muted);
  max-width:56ch;
}
.italic-serif{ font-family:var(--font-display); font-style:italic; font-weight:500; }
strong{ font-weight:700; }

/* ---------- 5. Layout yardımcıları ---------- */
.container{
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}
.container--narrow{ max-width:var(--container-narrow); }
.section{ padding-block:var(--sp-7); position:relative; }
.section--tight{ padding-block:var(--sp-6); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--sp-5); flex-wrap:wrap;
}
.section-head__text{ max-width:640px; }
.section-head h2{ margin-top:.7rem; }

.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; }
.grid{ display:grid; gap:var(--sp-4); }

.divider{ height:1px; background:var(--line-light); border:0; width:100%; }
.on-dark .divider{ background:var(--line-dark); }

/* ---------- 6. Butonlar ---------- */
.btn{
  --btn-bg: var(--navy-900);
  --btn-fg: #fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  padding:1.05em 1.9em; border-radius:var(--radius-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  white-space:nowrap; position:relative; isolation:isolate; overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  cursor:pointer; border:1.5px solid transparent;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; transition:transform var(--dur-2) var(--ease-out); }
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(-1px) scale(.985); }
.btn:hover svg{ transform:translateX(3px); }

.btn--gold{ --btn-bg: var(--accent); --btn-fg: var(--navy-950); }
.btn--gold:hover{ box-shadow:var(--shadow-gold); }
.btn--ghost{
  --btn-bg: transparent; --btn-fg: currentColor;
  border-color:currentColor;
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); }
.on-dark .btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; border-color:rgba(255,255,255,.4); }
.btn--sm{ padding:.75em 1.4em; font-size:.86rem; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

.text-link{
  display:inline-flex; align-items:center; gap:.5em; font-weight:700;
  color:var(--brand); position:relative;
}
.on-dark .text-link{ color:#fff; }
.text-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-2) var(--ease-out);
}
.text-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.text-link svg{ width:1.1em; height:1.1em; transition:transform var(--dur-2) var(--ease-out); }
.text-link:hover svg{ transform:translateX(4px); }

/* ---------- 7. Header / Navigasyon ---------- */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:900;
  height:var(--header-h); display:flex; align-items:center;
  transition:background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  background:transparent; border-bottom:1px solid transparent;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.site-header.is-scrolled{
  height:74px; background:rgba(253,252,250,.86); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line-light), 0 12px 30px rgba(6,12,35,.06);
}
.site-header.is-hidden{ transform:translateY(-100%); }

.brand{ display:flex; align-items:center; gap:.75rem; position:relative; z-index:2; }
.brand img{ height:40px; width:auto; transition:opacity var(--dur-2) ease; }
.brand .brand-white{ position:absolute; inset:0; opacity:1; }
.brand .brand-navy{ opacity:0; }
.site-header.is-scrolled .brand-white{ opacity:0; }
.site-header.is-scrolled .brand-navy{ opacity:1; }
body.page-light .brand-white{ opacity:0; }
body.page-light .brand-navy{ opacity:1; }
.brand-mark{ position:relative; height:40px; width:auto; }

.nav-desktop{ display:none; }
.nav-desktop ul{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-desktop a{
  font-weight:600; font-size:.94rem; color:#fff; position:relative; padding:.4rem 0;
  transition:color var(--dur-1) ease;
}
.site-header.is-scrolled .nav-desktop a, body.page-light .nav-desktop a{ color:var(--ink-800); }
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent);
  transition:right var(--dur-2) var(--ease-out);
}
.nav-desktop a:hover::after, .nav-desktop a.is-active::after{ right:0; }
.nav-desktop a.is-active{ color:var(--accent-strong); }
.site-header.is-scrolled .nav-desktop a.is-active, body.page-light .nav-desktop a.is-active{ color:var(--accent-strong); }

.header-cta{ display:none; }
.header-actions{ display:flex; align-items:center; gap:1rem; }

.burger{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; position:relative; z-index:2;
  transition:background var(--dur-2) ease;
}
.site-header.is-scrolled .burger, body.page-light .burger{ background:rgba(10,13,22,.06); color:var(--ink-900); }
.burger span{ display:block; width:20px; height:2px; background:currentColor; position:relative; transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; transition:transform var(--dur-2) var(--ease-out); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Tam ekran mobil menü */
.mobile-menu{
  position:fixed; inset:0; z-index:850; background:var(--navy-950);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 1rem) clamp(1.5rem,6vw,4rem) 3rem;
  transform:translateY(-100%); transition:transform .6s var(--ease-out);
  overflow-y:auto;
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu__links{ display:flex; flex-direction:column; gap:.35rem; }
.mobile-menu__links a{
  font-family:var(--font-display); font-size:clamp(2.1rem,7vw,3.4rem); font-weight:600;
  color:#fff; padding:.35rem 0; display:inline-flex; align-items:baseline; gap:.6rem;
  opacity:.94;
}
.mobile-menu__links a small{ font-family:var(--font-body); font-size:.9rem; color:var(--gold-300); font-weight:700; }
.mobile-menu__links a:hover{ color:var(--gold-300); }
.mobile-menu__foot{
  margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-4);
  justify-content:space-between; align-items:center; border-top:1px solid var(--line-dark); padding-top:var(--sp-4);
}
.mobile-menu__foot .social-row{ gap:.85rem; }

@media (min-width:1000px){
  .nav-desktop{ display:block; }
  .header-cta{ display:inline-flex; }
}

/* ---------- 8. Sosyal ikonlar / dock ---------- */
.social-row{ display:flex; align-items:center; gap:.6rem; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; transition:transform var(--dur-2) var(--ease-out), background var(--dur-1) ease;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ transform:translateY(-3px); background:var(--accent); color:var(--navy-950); }
.icon-btn--light{ background:rgba(10,13,22,.06); color:var(--ink-800); }
.icon-btn--light:hover{ background:var(--accent); color:var(--navy-950); }

.social-dock{
  position:fixed; left:1.4rem; top:50%; transform:translateY(-50%); z-index:400;
  display:none; flex-direction:column; align-items:center; gap:1rem;
}
.social-dock::before{
  content:""; width:1px; height:64px; background:linear-gradient(var(--ink-900),transparent);
  opacity:.25;
}
.social-dock a{
  color:var(--ink-700); transition:color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.social-dock a:hover{ color:var(--accent-strong); transform:translateX(4px); }
.social-dock svg{ width:19px; height:19px; }
@media (min-width:1180px){ .social-dock{ display:flex; } }

/* ---------- 9. WhatsApp Yüzen Buton ---------- */
.whatsapp-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:500;
  width:64px; height:64px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 30px rgba(37,211,102,.42);
  transition:transform var(--dur-2) var(--ease-out);
}
.whatsapp-fab svg{ width:30px; height:30px; }
.whatsapp-fab:hover{ transform:scale(1.08) rotate(-4deg); }
.whatsapp-fab::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid #25D366;
  opacity:.55; animation:pulse-ring 2.4s var(--ease-soft) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.9); opacity:.55; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ opacity:0; }
}
.whatsapp-fab__tip{
  position:absolute; right:calc(100% + .8rem); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--navy-950); color:#fff; padding:.55rem .9rem; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.whatsapp-fab:hover .whatsapp-fab__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:640px){ .whatsapp-fab{ width:56px; height:56px; right:1rem; bottom:1rem; } .whatsapp-fab svg{ width:26px; height:26px; } .whatsapp-fab__tip{ display:none; } }

/* Back to top */
.to-top{
  position:fixed; right:1.4rem; bottom:6.2rem; z-index:480; width:46px; height:46px; border-radius:50%;
  background:var(--navy-900); color:#fff; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top svg{ width:18px; height:18px; }
@media (max-width:640px){ .to-top{ right:1rem; bottom:5.4rem; width:42px; height:42px; } }

/* ---------- 10. Özel imleç (masaüstü) ---------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:999; border-radius:50%;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
}
.cursor-dot{ width:8px; height:8px; background:#fff; transition:opacity .2s ease; }
.cursor-ring{ width:38px; height:38px; border:1.5px solid #fff; opacity:.75; transition:width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s ease; }
.cursor-ring.is-active{ width:64px; height:64px; opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- 11. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:stretch;
  padding-top:var(--header-h); overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 100% at 80% 0%, #0b1c46 0%, var(--navy-950) 58%);
  color:#fff;
}
.hero__bg-grid{
  position:absolute; inset:0; z-index:0; opacity:.35; pointer-events:none;
  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;
  mask-image:radial-gradient(120% 100% at 60% 20%, #000 10%, transparent 78%);
}
.hero__canvas-wrap{
  position:absolute; inset:0; z-index:1;
}
#hero-3d-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0; transition:opacity .6s ease;
}
.hero.no-webgl .hero__poster,.hero.reduced-motion .hero__poster{ opacity:1; }
.hero.no-webgl #hero-3d-canvas,.hero.reduced-motion #hero-3d-canvas{ display:none; }

.hero__content{ position:relative; z-index:3; width:100%; flex:1; display:flex; align-items:center; }
.hero__content > .container{ width:100%; }
.hero__grid{
  display:grid; gap:var(--sp-5); align-items:end;
  padding-block:var(--sp-6);
}
.hero__kicker{ display:flex; align-items:center; gap:.9rem; margin-bottom:var(--sp-3); }
.hero__kicker .eyebrow{ color:var(--gold-300); }
.hero h1{ color:#fff; max-width:16ch; }
.hero h1 em{ font-style:italic; color:var(--gold-300); }
.hero__lede{ margin-top:var(--sp-3); color:rgba(255,255,255,.72); max-width:48ch; font-size:1.12rem; }
.hero__cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:var(--sp-5); }

.hero__stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);
  padding-top:var(--sp-5); border-top:1px solid var(--line-dark); margin-top:var(--sp-6);
}
.hero__stat b{ font-family:var(--font-display); font-size:clamp(1.9rem,2vw + 1rem,2.7rem); display:block; color:#fff; }
.hero__stat span{ font-size:.86rem; color:rgba(255,255,255,.62); }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.6);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.hero__scroll .line{ width:1px; height:34px; background:linear-gradient(#fff,transparent); overflow:hidden; position:relative; }
.hero__scroll .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold-400);
  animation:scroll-line 1.8s var(--ease-soft) infinite;
}
@keyframes scroll-line{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

.hero__marquee{
  position:relative; z-index:3; border-top:1px solid var(--line-dark);
  padding-block:1.1rem; overflow:hidden; background:rgba(3,8,26,.55); backdrop-filter:blur(6px);
}
.marquee-track{ display:flex; width:max-content; gap:2.5rem; animation:marquee 34s linear infinite; }
.hero__marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:2.5rem; white-space:nowrap;
}
.marquee-track span i{ width:6px; height:6px; border-radius:50%; background:var(--gold-400); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (min-width:900px){
  .hero__grid{ grid-template-columns:1.1fr .9fr; }
}

/* ---------- 12. Kart bileşenleri ---------- */
.card{
  background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  border:1px solid var(--line-light); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* Hizmet önizleme bento grid (anasayfa) */
.bento{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(1,1fr);
}
@media (min-width:720px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .bento{ grid-template-columns:repeat(4,1fr); } }
.bento-item{
  padding:var(--sp-4); border-radius:var(--radius-md); background:var(--surface);
  border:1px solid var(--line-light); position:relative; overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) ease;
  display:flex; flex-direction:column; gap:1rem; min-height:230px;
}
.bento-item:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.bento-item .ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--navy-900); color:var(--gold-300); flex:none;
  transition:transform var(--dur-2) var(--ease-out), background var(--dur-2) ease;
}
.bento-item:hover .ico{ transform:rotate(-8deg) scale(1.06); background:var(--accent); color:var(--navy-950); }
.bento-item .ico svg{ width:24px; height:24px; }
.bento-item h3{ font-size:1.18rem; }
.bento-item p{ color:var(--text-muted); font-size:.95rem; }
.bento-item .goto{
  margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.86rem;
  color:var(--brand);
}
.bento-item .goto svg{ width:16px; height:16px; transition:transform var(--dur-2) var(--ease-out); }
.bento-item:hover .goto svg{ transform:translateX(4px); }
.bento-item--wide{ grid-column: span 2; }
@media (max-width:719px){ .bento-item--wide{ grid-column:span 1; } }

/* ---------- 13. İstatistik şeridi ---------- */
.stat-band{
  background:var(--navy-950); color:#fff; padding-block:var(--sp-6);
  position:relative; overflow:hidden;
}
.stat-band::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(60% 90% at 15% 20%, rgba(201,162,39,.18), transparent 60%);
}
.stat-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr); position:relative; }
@media (min-width:820px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:left; border-left:2px solid var(--line-dark); padding-left:1.2rem; }
.stat b{ font-family:var(--font-display); font-size:clamp(2.1rem,2.6vw + 1rem,3.4rem); display:block; }
.stat span{ color:rgba(255,255,255,.6); font-size:.9rem; }

/* ---------- 14. Referanslar / kayan logo şeridi ---------- */
.ref-marquee{ overflow:hidden; position:relative; }
.ref-marquee::before,.ref-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:min(160px,14vw); z-index:2; pointer-events:none;
}
.ref-marquee::before{ left:0; background:linear-gradient(90deg,var(--bg),transparent); }
.ref-marquee::after{ right:0; background:linear-gradient(270deg,var(--bg),transparent); }
.ref-row{ display:flex; width:max-content; gap:1.1rem; }
.ref-row.reverse{ animation-direction:reverse; }
.ref-row{ animation:marquee 46s linear infinite; }
.ref-row.slow{ animation-duration:60s; }
.ref-marquee:hover .ref-row{ animation-play-state:paused; }
.ref-card{
  width:220px; height:130px; border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--line-light); display:grid; place-items:center; padding:1rem;
  filter:grayscale(1) opacity(.72); transition:filter var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
}
.ref-card:hover{ filter:grayscale(0) opacity(1); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ref-card img{ max-height:56px; width:auto; object-fit:contain; }

.ref-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:640px){ .ref-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .ref-grid{ grid-template-columns:repeat(4,1fr); } }
.ref-grid .ref-card{ width:100%; }

/* ---------- 15. Süreç adımları ---------- */
.process{ display:grid; gap:1.4rem; counter-reset:step; }
@media (min-width:900px){ .process{ grid-template-columns:repeat(4,1fr); } }
.process-item{ position:relative; padding-top:1.5rem; }
.process-item::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-display); font-size:3.2rem; color:var(--line-light);
  -webkit-text-stroke:1.5px var(--brand); color:transparent; display:block; margin-bottom:.6rem;
}
.process-item h4{ margin-bottom:.5rem; }
.process-item p{ color:var(--text-muted); font-size:.94rem; }
.process-item + .process-item::after{
  content:""; position:absolute; left:-.8rem; top:2.2rem; width:1px; height:60%; background:var(--line-light);
}
@media (max-width:899px){ .process-item + .process-item::after{ display:none; } }

/* ---------- 16. Çalışmalarımız / portföy ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--sp-4); }
.filter-chip{
  padding:.65em 1.3em; border-radius:var(--radius-pill); border:1.5px solid var(--line-light);
  font-weight:700; font-size:.88rem; color:var(--text-muted); transition:all var(--dur-2) var(--ease-out);
}
.filter-chip:hover{ border-color:var(--brand); color:var(--brand); }
.filter-chip.is-active{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }

.work-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:640px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .work-grid{ grid-template-columns:repeat(3,1fr); } }

.work-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5;
  background:var(--navy-900); display:block; isolation:isolate;
}
.work-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.work-card:hover img{ transform:scale(1.07); }
.work-card::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(3,8,26,0) 30%, rgba(3,8,26,.92) 100%);
}
.work-card__type{
  position:absolute; top:1rem; left:1rem; z-index:2; display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); color:#fff; padding:.4em .85em;
  border-radius:var(--radius-pill); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.work-card__type svg{ width:13px; height:13px; }
.work-card__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem; color:#fff; }
.work-card__body .tag{ font-size:.78rem; color:var(--gold-300); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.work-card__body h3{ margin-top:.35rem; font-size:1.28rem; line-height:1.25; }
.work-card__arrow{
  position:absolute; top:1rem; right:1rem; z-index:2; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff;
  transform:translateY(-6px) scale(.9); opacity:0; transition:all var(--dur-2) var(--ease-out);
}
.work-card:hover .work-card__arrow{ transform:translateY(0) scale(1); opacity:1; background:var(--accent); color:var(--navy-950); }
.work-card__arrow svg{ width:18px; height:18px; }
.work-card.is-hidden{ display:none; }

/* ---------- 17. Proje Detay ---------- */
.detail-hero{
  position:relative; min-height:62vh; display:flex; align-items:flex-end;
  background:var(--navy-950); overflow:hidden;
}
.detail-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.detail-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--navy-950) 6%, rgba(5,11,36,.35) 60%, rgba(5,11,36,.15)); }
.detail-hero__content{ position:relative; z-index:2; color:#fff; padding-block:var(--sp-6); width:100%; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line-dark); }
.detail-meta div{ display:flex; flex-direction:column; gap:.2rem; }
.detail-meta span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.55); font-weight:700; }
.detail-meta strong{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }

.breadcrumbs{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:rgba(255,255,255,.6); flex-wrap:wrap; }
.breadcrumbs a:hover{ color:#fff; }
.breadcrumbs svg{ width:12px; height:12px; opacity:.6; }

.detail-body{ display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
@media (min-width:960px){ .detail-body{ grid-template-columns:1.5fr .9fr; } }
.detail-body article p + p{ margin-top:1.1rem; }
.detail-body article{ font-size:1.05rem; color:var(--ink-700); }
.detail-side{ display:flex; flex-direction:column; gap:1.5rem; }
.side-card{ background:var(--bg-alt); border-radius:var(--radius-md); padding:var(--sp-4); }
.side-card h4{ margin-bottom:.9rem; }
.stat-pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.stat-pill{ background:var(--surface); border:1px solid var(--line-light); border-radius:var(--radius-sm); padding:.7rem 1rem; text-align:center; flex:1 1 100px; }
.stat-pill b{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--brand); }
.stat-pill span{ font-size:.72rem; color:var(--text-muted); }
.tag-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-pill{ padding:.4em 1em; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--line-light); font-size:.82rem; font-weight:600; }

/* Video facade */
.media-block{ border-radius:var(--radius-md); overflow:hidden; background:var(--navy-950); position:relative; }
.video-facade{ position:relative; aspect-ratio:16/9; cursor:pointer; }
.video-facade img{ width:100%; height:100%; object-fit:cover; }
.video-facade::after{ content:""; position:absolute; inset:0; background:rgba(3,8,26,.28); transition:background var(--dur-2) ease; }
.video-facade:hover::after{ background:rgba(3,8,26,.1); }
.video-facade .play-btn{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--navy-950);
  transition:transform var(--dur-2) var(--ease-out); z-index:2;
}
.video-facade:hover .play-btn{ transform:scale(1.1); background:var(--accent); }
.video-facade .play-btn svg{ width:28px; height:28px; margin-left:4px; }
.media-block iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* Sosyal medya galerisi */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
.gallery-item{ border-radius:var(--radius-sm); overflow:hidden; cursor:zoom-in; aspect-ratio:1/1; position:relative; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-2) var(--ease-out); }
.gallery-item:hover img{ transform:scale(1.08); }

/* PDF kartı */
.pdf-card{
  display:flex; align-items:center; gap:1.2rem; background:var(--surface); border:1px solid var(--line-light);
  border-radius:var(--radius-md); padding:1.4rem;
}
.pdf-card .pdf-icon{
  width:64px; height:78px; flex:none; border-radius:6px; background:var(--navy-900); color:#fff;
  display:grid; place-items:center; position:relative;
}
.pdf-card .pdf-icon::after{ content:"PDF"; position:absolute; bottom:6px; font-size:.62rem; font-weight:800; letter-spacing:.04em; color:var(--gold-300); }
.pdf-card .pdf-icon svg{ width:24px; height:24px; margin-top:-10px; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(3,6,18,.92); display:none;
  align-items:center; justify-content:center; padding:2rem;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:min(92vw,1100px); max-height:86vh; border-radius:10px; box-shadow:var(--shadow-lg); }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center;
}
.lightbox-close svg{ width:20px; height:20px; }

.prevnext{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line-light); padding-top:var(--sp-4); margin-top:var(--sp-6); }
.prevnext a{ display:flex; flex-direction:column; gap:.3rem; max-width:45%; }
.prevnext a:last-child{ text-align:right; align-items:flex-end; }
.prevnext span{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); font-weight:700; }
.prevnext strong{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; }

/* ---------- 18. Hizmetler sayfası ---------- */
.service-block{
  display:grid; gap:var(--sp-4); grid-template-columns:1fr; padding-block:var(--sp-6);
  border-top:1px solid var(--line-light); align-items:start;
}
.service-block:first-of-type{ border-top:0; }
@media (min-width:900px){ .service-block{ grid-template-columns:.45fr .55fr; gap:var(--sp-6); } }
.service-block__num{ font-family:var(--font-display); font-style:italic; color:var(--line-light); -webkit-text-stroke:1px var(--brand); color:transparent; font-size:3.6rem; line-height:1; }
.service-block__icon{
  width:60px; height:60px; border-radius:16px; background:var(--navy-900); color:var(--gold-300);
  display:grid; place-items:center; margin-bottom:1.2rem;
}
.service-block__icon svg{ width:26px; height:26px; }
.service-block ul.check-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.65rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.98rem; }
.check-list svg{ width:19px; height:19px; flex:none; color:var(--accent-strong); margin-top:.15rem; }

.standard-services{ display:grid; gap:1rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:640px){ .standard-services{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .standard-services{ grid-template-columns:repeat(5,1fr); } }
.mini-service{ background:var(--surface); border:1px solid var(--line-light); border-radius:var(--radius-sm); padding:1.3rem; text-align:left; transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.mini-service:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.mini-service svg{ width:26px; height:26px; color:var(--brand); margin-bottom:.8rem; }
.mini-service h4{ font-size:.98rem; margin-bottom:.3rem; }
.mini-service p{ font-size:.85rem; color:var(--text-muted); }

/* SSS akordeon */
.faq{ max-width:var(--container-narrow); }
.faq-item{ border-bottom:1px solid var(--line-light); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 0; text-align:left; font-family:var(--font-display); font-size:1.15rem; font-weight:600;
}
.faq-q .plus{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-light); display:grid; place-items:center; flex:none; position:relative; transition:transform var(--dur-2) var(--ease-out), background var(--dur-2) ease; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--brand); transition:transform var(--dur-2) var(--ease-out); }
.faq-q .plus::before{ width:11px; height:1.6px; }
.faq-q .plus::after{ width:1.6px; height:11px; }
.faq-item.is-open .plus{ background:var(--navy-900); transform:rotate(180deg); }
.faq-item.is-open .plus::before,.faq-item.is-open .plus::after{ background:#fff; }
.faq-item.is-open .plus::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out); }
.faq-a p{ padding-bottom:1.5rem; color:var(--text-muted); max-width:65ch; }

/* ---------- 19. Hakkımızda ---------- */
.value-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:720px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
.value-item{ display:flex; gap:1rem; padding:1.6rem; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--line-light); }
.value-item .ico{ width:48px; height:48px; border-radius:12px; background:var(--bg-alt); color:var(--brand); display:grid; place-items:center; flex:none; }
.value-item .ico svg{ width:22px; height:22px; }

.timeline{ display:flex; flex-direction:column; }
.timeline-item{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding-bottom:2.2rem; position:relative; }
.timeline-item::before{ content:""; position:absolute; left:5px; top:1.4rem; bottom:0; width:1px; background:var(--line-light); }
.timeline-item:last-child::before{ display:none; }
.timeline-dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); margin-top:.4rem; }
.timeline-item h4{ font-family:var(--font-display); }

/* ---------- 20. İletişim ---------- */
.contact-grid{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; }
@media (min-width:960px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.field label{ font-size:.85rem; font-weight:700; }
.field input,.field textarea,.field select{
  padding:.95rem 1.1rem; border-radius:var(--radius-sm); border:1.5px solid var(--line-light);
  background:var(--surface); transition:border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(10,28,77,.08); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }
.form-row{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; } }
.checkbox-row{ display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color:var(--text-muted); margin-bottom:1.4rem; }
.checkbox-row input{ margin-top:.25rem; }
.contact-info-list{ display:flex; flex-direction:column; gap:1.4rem; }
.contact-info-item{ display:flex; gap:1rem; }
.contact-info-item .ico{ width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; flex:none; color:var(--gold-300); }
.contact-info-item .ico svg{ width:20px; height:20px; }
.contact-info-item h4{ color:#fff; }
.contact-info-item p, .contact-info-item a{ color:rgba(255,255,255,.68); }
.map-frame{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line-dark); aspect-ratio:16/9; margin-top:1.4rem; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.05); }

.form-success{
  display:none; align-items:center; gap:1rem; background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.4);
  color:#0b3a1e; padding:1.1rem 1.3rem; border-radius:var(--radius-sm); font-weight:600; margin-bottom:1.2rem;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:22px; height:22px; flex:none; color:#1d9448; }

/* ---------- 21. CTA bandı ---------- */
.cta-band{
  border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff; padding:var(--sp-6) clamp(1.5rem,5vw,4rem); position:relative; overflow:hidden;
  text-align:center; isolation:isolate;
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(50% 70% at 85% 20%, rgba(201,162,39,.35), transparent 60%),
             radial-gradient(50% 70% at 10% 100%, rgba(53,104,196,.4), transparent 60%);
}
.cta-band h2{ color:#fff; max-width:22ch; margin-inline:auto; }
.cta-band p{ color:rgba(255,255,255,.72); max-width:52ch; margin:1.1rem auto 0; }
.cta-band .btn-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:var(--sp-4); }

/* ---------- 22. Footer ---------- */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.78); padding-top:var(--sp-7); }
.footer-top{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; padding-bottom:var(--sp-6); }
@media (min-width:820px){ .footer-top{ grid-template-columns:1.3fr repeat(3,.9fr); } }
.footer-brand img{ height:42px; margin-bottom:1.2rem; }
.footer-brand p{ max-width:34ch; color:rgba(255,255,255,.58); font-size:.95rem; }
.footer-col h5{ color:#fff; font-family:var(--font-body); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.2rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.94rem; color:rgba(255,255,255,.68); transition:color var(--dur-1) ease, padding-left var(--dur-2) var(--ease-out); }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-bottom{
  border-top:1px solid var(--line-dark); padding-block:1.6rem; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between; font-size:.84rem; color:rgba(255,255,255,.5);
}
.footer-bottom a{ color:rgba(255,255,255,.7); }
.footer-bottom a:hover{ color:var(--gold-300); }
.footer-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.credit{ color:rgba(255,255,255,.5); }
.credit a{ font-weight:700; color:var(--gold-300); }
.credit a:hover{ text-decoration:underline; }

/* ---------- 23. Scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].is-visible{ transform:scale(1); }
[data-reveal-group] [data-reveal]{ transition-delay:calc(var(--i,0) * 90ms); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

/* Sayaç animasyon desteği */
[data-count]{ font-variant-numeric:tabular-nums; }

/* ---------- 24. Sayfa üst başlığı (iç sayfalar) ---------- */
.page-hero{
  padding-top:calc(var(--header-h) + var(--sp-6)); padding-bottom:var(--sp-6);
  background:var(--navy-950); color:#fff; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(90% 90% at 30% 20%, #000 20%, transparent 78%);
}
.page-hero__inner{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; margin-top:.9rem; max-width:20ch; }
.page-hero .lede{ color:rgba(255,255,255,.68); margin-top:1.1rem; }

/* ---------- 25. Ekip / kişi kartı ---------- */
.people-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .people-grid{ grid-template-columns:repeat(4,1fr); } }
.person-card{ text-align:center; }
.person-card .avatar{ aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; margin-bottom:1rem; background:var(--navy-900); }
.person-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.person-card h4{ font-family:var(--font-display); font-size:1.1rem; }
.person-card span{ font-size:.85rem; color:var(--text-muted); }

/* ---------- 26. Yardımcı sınıflar ---------- */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-1{ margin-top:var(--sp-1);} .mt-2{ margin-top:var(--sp-2);} .mt-3{ margin-top:var(--sp-3);}
.mt-4{ margin-top:var(--sp-4);} .mt-5{ margin-top:var(--sp-5);} .mt-6{ margin-top:var(--sp-6);}
.gap-2{ gap:var(--sp-2);} .gap-3{ gap:var(--sp-3);} .gap-4{ gap:var(--sp-4);}
.max-w-narrow{ max-width:var(--container-narrow); margin-inline:auto; }
.pill-badge{
  display:inline-flex; align-items:center; gap:.5em; background:var(--bg-alt); color:var(--brand);
  padding:.5em 1.1em; border-radius:var(--radius-pill); font-size:.8rem; font-weight:700;
}
@media (max-width:640px){ br.hide-sm{ display:none; } }
.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; }

/* ---------- 27. Basit sayfalar (KVKK / Gizlilik / 404) ---------- */
.legal-content{ max-width:var(--container-narrow); }
.legal-content h2{ margin-top:var(--sp-5); font-size:1.5rem; }
.legal-content p,.legal-content li{ color:var(--text-muted); margin-top:.8rem; line-height:1.75; }
.legal-content ul{ padding-left:1.3rem; list-style:disc; }
.legal-content li{ margin-top:.4rem; }

.error-page{ min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--sp-6) 1.5rem; background:var(--navy-950); color:#fff; }
.error-page .code{ font-family:var(--font-display); font-style:italic; font-size:clamp(5rem,14vw,10rem); color:var(--gold-400); line-height:1; }

/* ---------- 28. Duyarlılık ince ayarları ---------- */
@media (max-width:480px){
  :root{ --sp-6:3rem; --sp-7:4rem; }
  .hero__cta-row{ flex-direction:column; align-items:stretch; }
  .hero__cta-row .btn{ width:100%; }
}