@charset "UTF-8";
/* ============================================================================
   E-4 DİJİTAL — PUBLIC SITE DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Dosya      : assets/css/site.css
   Açıklama   : Kamuya açık web sitesinin tüm görsel dil katmanı.
                Saf CSS — preprocessor yok, @import yok, iç içe (nesting) yok,
                dışarıya bağımlılık (harici URL / font / görsel) yok.
   Mimari     : 1) Tasarım token'ları  2) Tema  3) Reset  4) Tipografi
                5) Yerleşim  6) Yardımcı sınıflar  7) Bileşenler  8) Hareket
                9) Duyarlı (responsive) katman  10) Baskı
   Renk notu  : Gövde metni daima --text (#E9EEF8) veya --text-dim (#9AA6BE)
                kullanır; her ikisi de koyu yüzeylerde 4.5:1 üzerindedir.
                --text-mute yalnızca dekoratif/ikincil etiketlerde kullanılır.
   Hedef      : 360 / 390 / 480 / 768 / 1024 / 1280 / 1440 / 1920 px
                Hiçbir genişlikte yatay kaydırma oluşmaz.
   ========================================================================= */


/* ===== Tasarım Token'ları (tek kaynak) ===== */
:root{
  /* --- Yüzey / mürekkep tonları (koyu tema varsayılan) --- */
  --ink-950:#03050A;
  --ink-900:#05070D;
  --ink-850:#080B14;
  --ink-800:#0B0F1A;
  --ink-700:#111726;
  --ink-600:#161E30;
  --ink-500:#1E2839;

  /* --- Çizgiler / kenarlıklar --- */
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);

  /* --- Metin --- */
  --text:#E9EEF8;
  --text-dim:#9AA6BE;
  --text-mute:#66738D;

  /* --- Marka mavisi --- */
  --brand-50:#EEF3FD;
  --brand-200:#B9CDF6;
  --brand-300:#8FB2F5;
  --brand-400:#5B8BE8;
  --brand-500:#2F6BD8;
  --brand-600:#1E4FA8;
  --brand-700:#153B80;

  /* --- Durum renkleri --- */
  --accent:#F5A524;
  --success:#22C55E;
  --danger:#EF4444;
  --warning:#F59E0B;
  --info:#38BDF8;

  /* --- Gradyanlar --- */
  --grad-logo:linear-gradient(180deg,#FFFFFF 0%,#C6D6EF 40%,#2F6BD8 100%);
  --grad-brand:linear-gradient(135deg,var(--brand-400),var(--brand-600));
  --grad-accent:linear-gradient(135deg,#FFC65C,#F5A524);
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));
  --grad-line:linear-gradient(90deg,transparent,var(--line-strong),transparent);

  /* --- Saydam marka katmanları (rgba token'ları) --- */
  --brand-a08:rgba(47,107,216,.08);
  --brand-a12:rgba(47,107,216,.12);
  --brand-a18:rgba(47,107,216,.18);
  --brand-a28:rgba(47,107,216,.28);
  --brand-a45:rgba(47,107,216,.45);
  --accent-a12:rgba(245,165,36,.12);
  --accent-a30:rgba(245,165,36,.30);
  --success-a12:rgba(34,197,94,.12);
  --success-a30:rgba(34,197,94,.30);
  --danger-a12:rgba(239,68,68,.12);
  --danger-a22:rgba(239,68,68,.22);
  --danger-a30:rgba(239,68,68,.30);
  --warning-a12:rgba(245,158,11,.12);
  --warning-a30:rgba(245,158,11,.30);
  --info-a12:rgba(56,189,248,.12);
  --info-a30:rgba(56,189,248,.30);
  --white-a04:rgba(255,255,255,.04);
  --white-a06:rgba(255,255,255,.06);
  --white-a10:rgba(255,255,255,.10);
  --white-a85:rgba(255,255,255,.85);
  --black-a40:rgba(0,0,0,.40);
  --black-a70:rgba(0,0,0,.70);
  --black-a92:rgba(3,5,10,.92);

  /* --- Yüzey kısayolları (tema ile değişir) --- */
  --surface:var(--ink-900);
  --surface-2:var(--ink-850);
  --surface-3:var(--ink-800);
  --surface-card:var(--ink-800);
  --surface-raised:var(--ink-700);
  --surface-input:var(--ink-850);
  --surface-glass:rgba(5,7,13,.72);

  /* --- Köşe yarıçapları --- */
  --r-xs:.25rem;
  --r-sm:.5rem;
  --r-md:.75rem;
  --r-lg:1rem;
  --r-xl:1.25rem;
  --r-2xl:1.5rem;
  --r-3xl:2rem;
  --r-pill:999px;

  /* --- Gölgeler --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.18);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg:0 28px 60px -20px rgba(0,0,0,.70), 0 8px 20px rgba(0,0,0,.35);
  --shadow-glow:0 0 0 1px var(--brand-a28), 0 14px 40px -12px rgba(47,107,216,.45);
  --shadow-glow-sm:0 8px 24px -10px rgba(47,107,216,.40);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.05);

  /* --- Boşluk ölçeği (4px tabanlı) --- */
  --s-0:0;
  --s-1:.25rem;
  --s-2:.5rem;
  --s-3:.75rem;
  --s-4:1rem;
  --s-5:1.25rem;
  --s-6:1.5rem;
  --s-7:1.75rem;
  --s-8:2rem;
  --s-10:2.5rem;
  --s-12:3rem;
  --s-14:3.5rem;
  --s-16:4rem;
  --s-20:5rem;
  --s-24:6rem;
  --s-32:8rem;

  /* --- Kapsayıcı genişlikleri --- */
  --container:1240px;
  --container-narrow:860px;
  --container-wide:1440px;
  --gutter:20px;

  /* --- Geçişler / yumuşatma --- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.28s;
  --t-slow:.5s;

  /* --- Z-index ölçeği --- */
  --z-base:1;
  --z-raised:10;
  --z-dropdown:100;
  --z-sticky:200;
  --z-header:300;
  --z-backdrop:400;
  --z-drawer:500;
  --z-float:600;
  --z-lightbox:700;
  --z-toast:800;

  /* --- Font aileleri --- */
  --font-display:'Plus Jakarta Sans','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --font-mono:ui-monospace,'Cascadia Code',Consolas,monospace;

  /* --- Font ağırlıkları --- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* --- Akışkan tipografi ölçeği --- */
  --fs-xs:clamp(.75rem,.735rem + .08vw,.8125rem);
  --fs-sm:clamp(.8125rem,.79rem + .12vw,.9375rem);
  --fs-base:clamp(.9375rem,.91rem + .15vw,1.0625rem);
  --fs-md:clamp(1rem,.965rem + .18vw,1.125rem);
  --fs-lg:clamp(1.0625rem,1.01rem + .28vw,1.25rem);
  --fs-xl:clamp(1.1875rem,1.11rem + .4vw,1.5rem);
  --fs-2xl:clamp(1.375rem,1.22rem + .78vw,1.875rem);
  --fs-3xl:clamp(1.625rem,1.37rem + 1.28vw,2.375rem);
  --fs-4xl:clamp(1.9rem,1.5rem + 1.95vw,3rem);
  --fs-5xl:clamp(2.4rem,6vw,4.5rem);

  /* --- Satır yükseklikleri / harf aralıkları --- */
  --lh-tight:1.1;
  --lh-snug:1.28;
  --lh-normal:1.5;
  --lh-body:1.65;
  --lh-loose:1.8;
  --ls-tighter:-.035em;
  --ls-tight:-.02em;
  --ls-normal:-.01em;
  --ls-wide:.04em;
  --ls-widest:.14em;

  /* --- Kod penceresi sözdizimi renkleri --- */
  --tok-key:#8FB2F5;
  --tok-str:#7DD3A0;
  --tok-fn:#F5A524;
  --tok-com:#66738D;

  /* --- Sabit yardımcı renkler (tema ile değişmez) --- */
  --on-brand:#FFFFFF;          /* marka/gradyan zemin üzerindeki metin */
  --mask-solid:#000000;        /* mask-image gradyanlarında opak durak */
  --whatsapp:#25D366;          /* WhatsApp marka rengi (dış marka) */

  /* --- Baskı renkleri --- */
  --print-bg:#FFFFFF;
  --print-ink:#000000;
  --print-ink-dim:#333333;
  --print-ink-mute:#555555;
  --print-line:#CCCCCC;

  /* --- Bileşen ölçüleri --- */
  --header-h:68px;
  --header-h-lg:80px;
  --focus-ring:0 0 0 4px var(--brand-a28);

  color-scheme:dark;
}

/* ===== Açık Tema (tek noktadan renk çevirme) =====
   Kullanım: <html data-theme="light">  — koyu tema varsayılan kalır. */
[data-theme="light"]{
  --ink-950:#FFFFFF;
  --ink-900:#FFFFFF;
  --ink-850:#F6F8FC;
  --ink-800:#FFFFFF;
  --ink-700:#F1F4FA;
  --ink-600:#E7EDF7;
  --ink-500:#D8E1F0;

  --line:rgba(10,20,40,.09);
  --line-strong:rgba(10,20,40,.18);

  --text:#0A1121;
  --text-dim:#465268;
  --text-mute:#6B7890;

  --grad-logo:linear-gradient(180deg,#6E9BF0 0%,#2F6BD8 45%,#153B80 100%);
  --grad-surface:linear-gradient(180deg,rgba(10,20,40,.025),rgba(10,20,40,0));
  --grad-line:linear-gradient(90deg,transparent,var(--line-strong),transparent);

  --white-a04:rgba(10,20,40,.03);
  --white-a06:rgba(10,20,40,.05);
  --white-a10:rgba(10,20,40,.08);
  --black-a92:rgba(15,20,32,.90);

  --surface:#FFFFFF;
  --surface-2:#F6F8FC;
  --surface-3:#EEF2F9;
  --surface-card:#FFFFFF;
  --surface-raised:#F6F8FC;
  --surface-input:#FFFFFF;
  --surface-glass:rgba(255,255,255,.80);

  --shadow-sm:0 1px 2px rgba(16,28,56,.07), 0 1px 1px rgba(16,28,56,.05);
  --shadow-md:0 10px 28px -12px rgba(16,28,56,.18), 0 2px 6px rgba(16,28,56,.07);
  --shadow-lg:0 30px 60px -24px rgba(16,28,56,.24), 0 8px 20px rgba(16,28,56,.10);
  --shadow-glow:0 0 0 1px var(--brand-a28), 0 16px 40px -14px rgba(47,107,216,.35);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.7);

  --tok-key:#1E4FA8;
  --tok-str:#0F7A4A;
  --tok-fn:#9A6100;
  --tok-com:#6B7890;

  color-scheme:light;
}


/* ===== Reset / Temel Katman ===== */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:auto;             /* yumuşak kaydırma JS tarafında yönetilir */
  scroll-padding-top:calc(var(--header-h) + 16px);
  overflow-x:hidden;
}

body{
  margin:0;
  min-height:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background-color:var(--ink-900);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}

/* Gövde arka planında çok hafif marka ışıması (görsel dosya kullanmadan) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--brand-a12), transparent 70%),
    radial-gradient(760px 480px at 92% 6%, rgba(47,107,216,.07), transparent 72%);
}

/* Gövde kaydırma kilidi (mobil menü / lightbox açıkken) */
body.is-locked{
  overflow:hidden;
  touch-action:none;
}

img,
svg,
video,
canvas,
picture,
iframe{
  display:block;
  max-width:100%;
}

img,
video{ height:auto; }

svg{ fill:currentColor; }

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }

ul[class],
ol[class]{ list-style:none; margin:0; padding:0; }

a{
  color:var(--brand-300);
  text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
a:hover{ color:var(--brand-200); }

button,
input,
select,
textarea{
  font:inherit;
  color:inherit;
  margin:0;
}

button{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

table{
  border-collapse:collapse;
  width:100%;
}

hr{
  border:0;
  height:1px;
  background:var(--line);
  margin:var(--s-8) 0;
}

::selection{
  background:var(--brand-a45);
  color:var(--on-brand);
}

/* Tüm etkileşimli öğeler için görünür odak halkası (WCAG 2.4.7) */
:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){ outline:none; }

/* İnce kaydırma çubuğu */
*{ scrollbar-width:thin; scrollbar-color:var(--ink-500) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink-950); }
::-webkit-scrollbar-thumb{
  background:var(--ink-500);
  border-radius:var(--r-pill);
  border:2px solid var(--ink-950);
}
::-webkit-scrollbar-thumb:hover{ background:var(--brand-600); }


/* ===== Tipografi ===== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  color:var(--text);
  /* Türkçe karakterler (ğ, ş, ı, İ, ç) kırpılmasın diye sabit yükseklik yok */
  overflow-wrap:break-word;
}

h1{ font-size:var(--fs-4xl); line-height:var(--lh-tight); letter-spacing:var(--ls-tighter); font-weight:var(--fw-extrabold); }
h2{ font-size:var(--fs-3xl); letter-spacing:var(--ls-tighter); font-weight:var(--fw-bold); }
h3{ font-size:var(--fs-2xl); }
h4{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); }
h5{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); }
h6{
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--text-dim);
}

p{ overflow-wrap:break-word; }

strong,b{ font-weight:var(--fw-semibold); color:var(--text); }
small{ font-size:var(--fs-xs); }

code,kbd,samp,pre{
  font-family:var(--font-mono);
  font-size:.925em;
  font-variant-ligatures:none;
}

abbr[title]{
  text-decoration:underline dotted;
  cursor:help;
}


/* ===== Yerleşim: Kapsayıcılar ===== */
.container,
.container--narrow,
.container--wide{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container{ max-width:calc(var(--container) + (var(--gutter) * 2)); }
.container--narrow{ max-width:calc(var(--container-narrow) + (var(--gutter) * 2)); }
.container--wide{ max-width:calc(var(--container-wide) + (var(--gutter) * 2)); }


/* ===== Yerleşim: Bölümler ===== */
.section{
  position:relative;
  z-index:var(--z-base);
  padding-block:clamp(3.25rem,7vw,6rem);
}
.section--tight{ padding-block:clamp(2rem,4.5vw,3.5rem); }
.section--alt{
  background:var(--surface-2);
  border-block:1px solid var(--line);
}
.section--alt + .section--alt{ border-top:0; }

.section-head{
  max-width:720px;
  margin-bottom:clamp(2rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.section-head--center{
  margin-inline:auto;
  text-align:center;
  align-items:center;
}

.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  align-self:flex-start;
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-widest);
  text-transform:uppercase;
  color:var(--brand-300);
}
.section-eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--brand-400);
  flex:0 0 auto;
}
.section-head--center .section-eyebrow{ align-self:center; }

.section-title{
  font-family:var(--font-display);
  font-size:var(--fs-3xl);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tighter);
  color:var(--text);
  text-wrap:balance;
}

.section-lead{
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--text-dim);
  max-width:62ch;
}
.section-head--center .section-lead{ margin-inline:auto; }


/* ===== Yerleşim: Izgara ===== */
.grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
}
.grid--2,
.grid--3,
.grid--4{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
}
.grid--auto{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}


/* ===== Yardımcı Sınıflar ===== */
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  top:-120px;
  left:var(--s-4);
  z-index:var(--z-toast);
  display:inline-block;
  padding:var(--s-3) var(--s-5);
  background:var(--brand-500);
  color:var(--on-brand);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{
  top:var(--s-4);
  color:var(--on-brand);
  outline:2px solid var(--text);
  outline-offset:2px;
}

/* Bal küpü alanı (spam tuzağı): display:none DEĞİL — botların görmesi,
   kullanıcının görmemesi ve ekran okuyucunun atlaması için ekran dışı. */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  visibility:visible;
  z-index:-1;
}

.text-gradient{
  background:var(--grad-logo);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  /* Tarayıcı background-clip:text desteklemezse metin okunur kalsın */
  display:inline-block;
  padding-bottom:.06em;
}

.divider{
  height:1px;
  width:100%;
  border:0;
  margin:var(--s-10) 0;
  background:var(--grad-line);
}

.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-3);
  text-align:center;
  padding:clamp(2.25rem,6vw,4rem) var(--s-5);
  background:var(--surface-card);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-2xl);
  color:var(--text-dim);
}
.empty-state h3,
.empty-state .empty-state-title{
  font-size:var(--fs-lg);
  color:var(--text);
  font-weight:var(--fw-semibold);
}
.empty-state p{
  max-width:46ch;
  font-size:var(--fs-sm);
  color:var(--text-dim);
}
.empty-state svg{
  width:44px;
  height:44px;
  color:var(--text-mute);
  margin-bottom:var(--s-1);
}


/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-header);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             backdrop-filter var(--t) var(--ease);
}
.site-header.is-scrolled{
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  min-height:var(--header-h);
  width:100%;
  max-width:calc(var(--container-wide) + (var(--gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- Marka / logo --- */
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  flex:0 0 auto;
  color:var(--text);
  text-decoration:none;
  border-radius:var(--r-md);
}
.brand:hover{ color:var(--text); }

.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:var(--r-md);
  background:var(--ink-950);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-inset);
  overflow:hidden;
}
.brand-mark img,
.brand-mark svg{
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-text{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);
  line-height:1.15;
  background:var(--grad-logo);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  white-space:nowrap;
  padding-bottom:.04em;
}

/* --- Masaüstü gezinme --- */
.nav{
  display:none;
  flex:1 1 auto;
  justify-content:center;
}
.nav-list{
  display:flex;
  align-items:center;
  gap:var(--s-1);
  list-style:none;
  margin:0;
  padding:0;
}
.nav-item{ position:relative; }

.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--text-dim);
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav-link:hover{
  color:var(--text);
  background:var(--white-a04);
}
.nav-link.is-active{
  color:var(--text);
  font-weight:var(--fw-semibold);
}
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:var(--s-3);
  right:var(--s-3);
  bottom:2px;
  height:2px;
  border-radius:var(--r-pill);
  background:var(--grad-brand);
}
.nav-link svg{
  width:14px;
  height:14px;
  opacity:.7;
  transition:transform var(--t-fast) var(--ease);
}

/* --- Açılır menü (masaüstü: hover, mobil: tıklama) --- */
.nav-item--dropdown > .nav-link::after{ bottom:2px; }

.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  z-index:var(--z-dropdown);
  min-width:300px;
  padding-top:var(--s-3);
  transform:translate(-50%,8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             visibility var(--t-fast) var(--ease);
}
/* Mobil/klavye: JS `.is-open` ekleyince açılır (masaüstünde hover kuralı
   1024px medya bloğunda tanımlıdır). */
.nav-item--dropdown.is-open > .dropdown,
.dropdown.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.dropdown-inner{
  display:grid;
  gap:var(--s-1);
  padding:var(--s-3);
  background:var(--surface-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}
.dropdown-link{
  /* ikon + başlık yan yana; block olunca ikon başlığın üstüne düşüyordu */
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3);
  border-radius:var(--r-md);
  color:var(--text);
  border:1px solid transparent;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dropdown-link:hover{
  background:var(--white-a04);
  border-color:var(--line);
  color:var(--text);
}
.dropdown-link-title{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--text);
  letter-spacing:var(--ls-tight);
}
.dropdown-link-text{
  display:block;
  margin-top:2px;
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--text-dim);
}

/* --- Sağ aksiyonlar --- */
.header-actions{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  flex:0 0 auto;
}
.header-actions .btn{ white-space:nowrap; }

/* --- Hamburger düğmesi --- */
.nav-toggle{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--white-a04);
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-toggle:hover{ background:var(--white-a06); border-color:var(--brand-a45); }
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:var(--r-pill);
  background:var(--text);
  transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- Mobil menü paneli --- */
.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:var(--z-backdrop);
  background:var(--black-a70);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.nav-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mobile-nav{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:var(--z-drawer);
  width:min(90vw,380px);
  max-width:100%;
  background:var(--ink-850);
  border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
  transform:translateX(102%);
  visibility:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  transition:transform var(--t) var(--ease), visibility var(--t) var(--ease);
}
.mobile-nav.is-open{
  transform:translateX(0);
  visibility:visible;
}
.mobile-nav-inner{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding:calc(var(--header-h) + var(--s-4)) var(--s-5) var(--s-8);
  min-height:100%;
}
.mobile-nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  width:100%;
  padding:var(--s-4) var(--s-3);
  border-radius:var(--r-md);
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
  text-align:left;
  background:none;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mobile-nav-link:hover{ background:var(--white-a04); color:var(--text); }
.mobile-nav-link.is-active{ color:var(--brand-300); }
.mobile-nav-link svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  opacity:.7;
  transition:transform var(--t-fast) var(--ease);
}
.mobile-nav-link[aria-expanded="true"] svg{ transform:rotate(180deg); }

.mobile-nav-sub{
  display:grid;
  gap:2px;
  max-height:0;
  overflow:hidden;
  padding-left:var(--s-3);
  transition:max-height var(--t) var(--ease);
}
.mobile-nav-sub.is-open{ max-height:640px; }
.mobile-nav-sub a{
  display:block;
  padding:var(--s-3);
  font-size:var(--fs-sm);
  color:var(--text-dim);
  border-radius:var(--r-sm);
  border-left:2px solid var(--line);
}
.mobile-nav-sub a:hover{
  color:var(--text);
  background:var(--white-a04);
  border-left-color:var(--brand-400);
}
.mobile-nav .btn{ margin-top:var(--s-4); }


/* ===== Butonlar ===== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:.75rem 1.35rem;
  min-height:44px;                        /* dokunma hedefi */
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:var(--white-a06);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-normal);
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.btn svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.btn:hover{ color:var(--text); }
.btn:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:2px;
}
.btn:active{ transform:translateY(0); }

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"],
.btn[data-loading="true"]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

/* Yükleniyor göstergesi (form guard JS'i data-loading ekler) */
.btn[data-loading="true"]::after{
  content:"";
  width:15px;
  height:15px;
  margin-left:var(--s-1);
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color:transparent;
  animation:e4-spin .7s linear infinite;
}

/* --- Birincil (marka gradyanı + ışıma) --- */
.btn--primary{
  background-image:var(--grad-brand);
  background-color:var(--brand-500);
  color:var(--on-brand);
  border-color:transparent;
  box-shadow:var(--shadow-glow-sm);
}
.btn--primary:hover{
  color:var(--on-brand);
  box-shadow:var(--shadow-glow);
  transform:translateY(-2px);
}
.btn--primary:active{ transform:translateY(0); box-shadow:var(--shadow-glow-sm); }

/* --- Vurgu (amber) --- */
.btn--accent{
  background-image:var(--grad-accent);
  background-color:var(--accent);
  color:var(--ink-950);
  border-color:transparent;
  box-shadow:0 8px 24px -12px var(--accent-a30);
}
.btn--accent:hover{
  color:var(--ink-950);
  transform:translateY(-2px);
  box-shadow:0 14px 32px -12px var(--accent-a30);
}

/* --- Hayalet --- */
.btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--text-dim);
}
.btn--ghost:hover{
  background:var(--white-a06);
  color:var(--text);
  transform:translateY(-2px);
}

/* --- Çerçeveli --- */
.btn--outline{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--text);
}
.btn--outline:hover{
  border-color:var(--brand-400);
  background:var(--brand-a08);
  color:var(--text);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* --- Açık zemin (koyu bölümler üzerinde ters kontrast) --- */
.btn--light{
  background:var(--text);
  color:var(--ink-950);
  border-color:transparent;
}
.btn--light:hover{
  color:var(--ink-950);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* --- Boyutlar --- */
.btn--sm{
  padding:.5rem .9rem;
  min-height:36px;
  font-size:var(--fs-xs);
  border-radius:var(--r-sm);
}
.btn--sm svg{ width:15px; height:15px; }

.btn--lg{
  padding:1rem 1.9rem;
  min-height:54px;
  font-size:var(--fs-md);
  border-radius:var(--r-lg);
}
.btn--lg svg{ width:20px; height:20px; }

.btn--block{
  display:flex;
  width:100%;
}

.btn--icon{
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:var(--r-md);
  flex:0 0 auto;
}
.btn--icon.btn--sm{ width:36px; height:36px; min-height:36px; }
.btn--icon.btn--lg{ width:54px; height:54px; min-height:54px; }


/* ===== Hero ===== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(3rem,9vw,7rem) clamp(3rem,8vw,6rem);
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,var(--ink-950) 0%,var(--ink-900) 55%,var(--ink-900) 100%);
}
.hero-glow{
  position:absolute;
  top:-28%;
  left:50%;
  z-index:-1;
  width:min(1200px,140vw);
  height:min(900px,110vw);
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(closest-side, var(--brand-a28), transparent 72%);
  filter:blur(18px);
  opacity:.85;
}
/* Görsel dosyası olmadan, saf CSS ızgara deseni */
.hero-grid{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 22%, var(--mask-solid) 12%, transparent 76%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 22%, var(--mask-solid) 12%, transparent 76%);
  opacity:.9;
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.25rem,5vw,3.5rem);
  align-items:center;
}

.hero-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-5);
  max-width:64ch;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:.4rem .85rem .4rem .55rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  background:var(--white-a04);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-normal);
  color:var(--text-dim);
}
.hero-badge strong{
  color:var(--brand-200);
  font-weight:var(--fw-semibold);
}
.hero-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px var(--success-a12);
  flex:0 0 auto;
  margin-left:.25rem;
}

.hero-title{
  font-family:var(--font-display);
  font-size:var(--fs-5xl);
  font-weight:var(--fw-extrabold);
  line-height:1.04;
  letter-spacing:var(--ls-tighter);
  color:var(--text);
  text-wrap:balance;
  margin:0;
}

.hero-lead{
  font-size:var(--fs-lg);
  line-height:var(--lh-body);
  color:var(--text-dim);
  max-width:58ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  width:100%;
}
.hero-actions .btn{ flex:1 1 auto; min-width:180px; }

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3) var(--s-6);
  padding-top:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--text-dim);
  border-top:1px solid var(--line);
  width:100%;
}
.hero-trust > *{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
}
.hero-trust svg{
  width:16px;
  height:16px;
  color:var(--brand-400);
  flex:0 0 auto;
}
.hero-trust strong{
  color:var(--text);
  font-weight:var(--fw-semibold);
}

/* --- Hero görseli: kod penceresi --- */
.hero-visual{
  position:relative;
  width:100%;
  min-width:0;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-14% -6% -18%;
  z-index:-1;
  background:radial-gradient(closest-side,var(--brand-a18),transparent 70%);
  pointer-events:none;
}

.code-window{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  border-radius:var(--r-xl);
  border:1px solid var(--line-strong);
  background:var(--ink-850);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.code-bar{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  background:var(--ink-800);
  border-bottom:1px solid var(--line);
}
.code-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--ink-500);
  flex:0 0 auto;
}
.code-dot:nth-child(1){ background:var(--danger); opacity:.75; }
.code-dot:nth-child(2){ background:var(--warning); opacity:.75; }
.code-dot:nth-child(3){ background:var(--success); opacity:.75; }
.code-bar span:last-child{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--text-mute);
}
.code-body{
  padding:var(--s-5) var(--s-4);
  font-family:var(--font-mono);
  font-size:clamp(.72rem,.66rem + .35vw,.85rem);
  line-height:1.85;
  color:var(--text-dim);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.code-line{
  display:block;
  white-space:pre;
  min-height:1.85em;
}
.code-line .tok-key{ color:var(--tok-key); }
.code-line .tok-str{ color:var(--tok-str); }
.code-line .tok-fn{ color:var(--tok-fn); }
.code-line .tok-com{ color:var(--tok-com); font-style:italic; }


/* ===== Kartlar: Temel ===== */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-6);
  background-color:var(--surface-card);
  background-image:var(--grad-surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  color:var(--text);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
/* Kart üzerine gelince yumuşak marka ışıması (nötr, neon değil) */
.card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:50%;
  width:130%;
  height:120%;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:0;
  background:radial-gradient(closest-side,var(--brand-a12),transparent 70%);
  transition:opacity var(--t) var(--ease);
}
.card > *{ position:relative; z-index:var(--z-base); }

.card--hover:hover,
.card--hover:focus-within{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.card--hover:hover::after,
.card--hover:focus-within::after{ opacity:1; }

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:0 0 auto;
  border-radius:var(--r-md);
  background:var(--brand-a12);
  border:1px solid var(--brand-a28);
  color:var(--brand-300);
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.card-icon svg{ width:22px; height:22px; }
.card--hover:hover .card-icon{
  background:var(--brand-a18);
  color:var(--brand-200);
}

.card-title{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-snug);
  color:var(--text);
}
.card-text{
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--text-dim);
}
.card-link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  margin-top:auto;
  padding-top:var(--s-2);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--brand-300);
}
.card-link svg{
  width:16px;
  height:16px;
  transition:transform var(--t-fast) var(--ease);
}
.card-link:hover{ color:var(--brand-200); }
.card-link:hover svg,
.card--hover:hover .card-link svg{ transform:translateX(4px); }


/* ===== Kart: Hizmet ===== */
.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  height:100%;
  padding:var(--s-6);
  background-color:var(--surface-card);
  background-image:var(--grad-surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.service-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--grad-line);
  opacity:0;
  transition:opacity var(--t) var(--ease);
}
.service-card::after{
  content:"";
  position:absolute;
  bottom:-55%;
  right:-25%;
  width:80%;
  height:110%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(closest-side,var(--brand-a12),transparent 72%);
  transition:opacity var(--t) var(--ease);
}
.service-card:hover,
.service-card:focus-within{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.service-card:hover::before,
.service-card:hover::after,
.service-card:focus-within::before,
.service-card:focus-within::after{ opacity:1; }
.service-card > *{ position:relative; z-index:var(--z-base); }
.service-card .card-text{ flex:1 1 auto; }


/* ===== Kart: Proje / Referans ===== */
.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background-color:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.project-card:hover,
.project-card:focus-within{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.project-card-media{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--ink-700);
  border-bottom:1px solid var(--line);
}
.project-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(3,5,10,.55));
  opacity:.85;
  pointer-events:none;
}
.project-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.project-card:hover .project-card-img{ transform:scale(1.05); }

.project-card-body{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  flex:1 1 auto;
  padding:var(--s-5);
}
.project-card-body .card-title{ font-size:var(--fs-md); }
.project-card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2) var(--s-4);
  font-size:var(--fs-xs);
  color:var(--text-mute);
}
.project-card-meta > *{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
}
.project-card-tech{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:auto;
  padding-top:var(--s-2);
}


/* ===== Kart: Blog Yazısı ===== */
.post-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background-color:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.post-card:hover,
.post-card:focus-within{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.post-card-media{
  position:relative;
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--ink-700);
  border-bottom:1px solid var(--line);
}
.post-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.post-card:hover .post-card-media img{ transform:scale(1.05); }
.post-card-body{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  flex:1 1 auto;
  padding:var(--s-5);
}
.post-card-body .card-title{ font-size:var(--fs-md); }
.post-card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2) var(--s-4);
  font-size:var(--fs-xs);
  color:var(--text-mute);
}
.post-card-meta > *{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
}
.post-card-meta svg{ width:14px; height:14px; }
.post-card .card-link{ padding-bottom:var(--s-1); }


/* ===== Kart: Fiyatlandırma ===== */
.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  height:100%;
  padding:var(--s-6);
  background-color:var(--surface-card);
  background-image:var(--grad-surface);
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.pricing-card:hover{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.pricing-card.is-featured{
  border-color:var(--brand-a45);
  box-shadow:var(--shadow-glow);
  background-image:
    radial-gradient(120% 70% at 50% -10%, var(--brand-a12), transparent 62%),
    var(--grad-surface);
}
.pricing-card.is-featured:hover{ transform:translateY(-6px); }

.pricing-ribbon{
  position:absolute;
  top:var(--s-4);
  right:var(--s-4);
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  padding:.3rem .7rem;
  border-radius:var(--r-pill);
  background-image:var(--grad-brand);
  color:var(--on-brand);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  box-shadow:var(--shadow-glow-sm);
  white-space:nowrap;
}

.pricing-name{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
  padding-right:6.5rem;                    /* kurdele ile çakışmasın */
}
.pricing-card:not(.is-featured) .pricing-name{ padding-right:0; }

.pricing-tagline{
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--text-dim);
  margin-top:calc(var(--s-2) * -1);
}

.pricing-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--s-1);
  font-family:var(--font-display);
  font-size:clamp(2rem,1.6rem + 1.8vw,2.75rem);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tighter);
  line-height:1.1;
  color:var(--text);
  padding-block:var(--s-2);
  border-bottom:1px solid var(--line);
}
.pricing-currency{
  font-size:.5em;
  font-weight:var(--fw-semibold);
  color:var(--text-dim);
  letter-spacing:0;
}
.pricing-period{
  font-family:var(--font-body);
  font-size:.34em;
  font-weight:var(--fw-medium);
  color:var(--text-dim);
  letter-spacing:0;
}
.pricing-old{
  font-family:var(--font-body);
  font-size:.34em;
  font-weight:var(--fw-medium);
  color:var(--text-mute);
  text-decoration:line-through;
  letter-spacing:0;
}

.pricing-features{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  list-style:none;
  margin:0;
  padding:0;
  flex:1 1 auto;
}
.pricing-feature{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--text);
}
.pricing-feature::before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:.15em;
  border-radius:50%;
  background:var(--success-a12);
  border:1px solid var(--success-a30);
  /* onay işareti: iki çizgili konik gradyan yerine basit nokta */
  box-shadow:inset 0 0 0 3px var(--surface-card), inset 0 0 0 9px var(--success);
}
.pricing-feature.is-excluded{
  color:var(--text-mute);
  text-decoration:line-through;
  text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px;
}
.pricing-feature.is-excluded::before{
  background:var(--white-a04);
  border-color:var(--line-strong);
  box-shadow:inset 0 0 0 3px var(--surface-card), inset 0 0 0 9px var(--ink-500);
}
.pricing-card .btn{ margin-top:var(--s-2); }


/* ===== Kart: Referans / Yorum ===== */
.testimonial-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  height:100%;
  padding:var(--s-6);
  background-color:var(--surface-card);
  background-image:var(--grad-surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.testimonial-card::before{
  content:"\201C";
  position:absolute;
  top:.35rem;
  right:1.25rem;
  font-family:var(--font-display);
  font-size:5rem;
  line-height:1;
  color:var(--brand-a18);
  pointer-events:none;
}
.testimonial-card:hover{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.testimonial-quote{
  position:relative;
  flex:1 1 auto;
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--text);
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding-top:var(--s-4);
  border-top:1px solid var(--line);
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
}
.testimonial-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:50%;
  object-fit:cover;
  background-image:var(--grad-brand);
  border:1px solid var(--line-strong);
  color:var(--on-brand);
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  overflow:hidden;
}
.testimonial-role{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:var(--fw-regular);
  color:var(--text-dim);
  letter-spacing:0;
  margin-top:1px;
}


/* ===== Kart: Neden Biz ===== */
.why-card{
  position:relative;
  display:flex;
  gap:var(--s-4);
  height:100%;
  padding:var(--s-5);
  background-color:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color var(--t) var(--ease),
             transform var(--t) var(--ease),
             background-color var(--t) var(--ease);
}
.why-card:hover{
  border-color:var(--line-strong);
  transform:translateY(-3px);
  background-color:var(--surface-raised);
}
.why-card .card-icon{
  width:42px;
  height:42px;
  border-radius:var(--r-sm);
}
.why-card .card-icon svg{ width:20px; height:20px; }
.why-card > div{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  min-width:0;
}


/* ===== Süreç Adımları ===== */
.process-step{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-6) var(--s-5);
  background-color:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  height:100%;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.process-step:hover{
  border-color:var(--line-strong);
  transform:translateY(-3px);
}
.process-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  flex:0 0 auto;
  border-radius:var(--r-md);
  background:var(--ink-700);
  border:1px solid var(--line-strong);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);
  background-image:var(--grad-logo);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
/* Bağlantı çizgisi yalnızca masaüstünde görünür */
.process-connector{
  display:none;
  position:absolute;
  top:calc(var(--s-6) + 23px);
  left:100%;
  width:var(--s-5);
  height:1px;
  background:var(--grad-line);
  pointer-events:none;
  z-index:var(--z-base);
}


/* ===== İstatistik Kartı ===== */
.stat-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-1);
  padding:var(--s-5);
  background-color:var(--surface-card);
  background-image:var(--grad-surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.stat-card:hover{
  border-color:var(--line-strong);
  transform:translateY(-3px);
}
.stat-value{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,1.5rem + 1.6vw,2.6rem);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tighter);
  line-height:1.05;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.stat-label{
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--text-dim);
}

/* 1-3 istatistikte ortalanmış yerleşim (4'te .grid--4 kullanılır) */
.stats-grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
  margin-inline:auto;
}
.stats-grid .stat-card{
  align-items:center;
  text-align:center;
}
.stats-grid--1{ max-width:340px; }
@media (min-width: 640px){
  .stats-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:700px; }
  .stats-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1000px; }
}


/* ===== Rozetler / Etiketler / Çipler ===== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  padding:.28rem .65rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  background:var(--white-a06);
  color:var(--text-dim);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-normal);
  line-height:1.4;
  white-space:nowrap;
}
.badge svg{ width:13px; height:13px; }
.badge--primary{ background:var(--brand-a12); border-color:var(--brand-a28); color:var(--brand-200); }
.badge--accent{ background:var(--accent-a12); border-color:var(--accent-a30); color:var(--accent); }
.badge--success{ background:var(--success-a12); border-color:var(--success-a30); color:var(--success); }
.badge--danger{ background:var(--danger-a12); border-color:var(--danger-a30); color:var(--danger); }
.badge--warning{ background:var(--warning-a12); border-color:var(--warning-a30); color:var(--warning); }
.badge--info{ background:var(--info-a12); border-color:var(--info-a30); color:var(--info); }
.badge--neutral{ background:var(--white-a06); border-color:var(--line-strong); color:var(--text-dim); }

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-bottom:var(--s-6);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:.5rem 1rem;
  min-height:38px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  background:var(--white-a04);
  color:var(--text-dim);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.chip:hover{
  color:var(--text);
  border-color:var(--brand-a45);
  background:var(--brand-a08);
  transform:translateY(-1px);
}
.chip.is-active{
  background-image:var(--grad-brand);
  border-color:transparent;
  color:var(--on-brand);
  box-shadow:var(--shadow-glow-sm);
}
.chip.is-active:hover{ color:var(--on-brand); }

.tag{
  display:inline-flex;
  align-items:center;
  padding:.2rem .55rem;
  border-radius:var(--r-xs);
  background:var(--white-a06);
  border:1px solid var(--line);
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  line-height:1.5;
  letter-spacing:0;
  white-space:nowrap;
}


/* ===== Yıldız Değerlendirme ===== */
.stars{
  display:inline-flex;
  align-items:center;
  gap:2px;
  line-height:1;
}
.star{
  display:inline-block;
  width:16px;
  height:16px;
  flex:0 0 auto;
  color:var(--ink-500);
}
.star svg{ width:100%; height:100%; }
.star.is-filled{ color:var(--accent); }


/* ===== Akordiyon (SSS) ===== */
.accordion{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.accordion-item{
  background-color:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.accordion-item:hover{ border-color:var(--line-strong); }
.accordion-item.is-open{
  border-color:var(--brand-a45);
  background-color:var(--surface-raised);
}
.accordion-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  width:100%;
  padding:var(--s-5);
  text-align:left;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-snug);
  color:var(--text);
  cursor:pointer;
  transition:color var(--t-fast) var(--ease);
}
.accordion-trigger:hover{ color:var(--brand-200); }
.accordion-trigger:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:-2px;
  border-radius:var(--r-lg);
}
.accordion-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--white-a04);
  transition:transform var(--t) var(--ease),
             background-color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.accordion-icon::before,
.accordion-icon::after{
  content:"";
  position:absolute;
  background:currentColor;
  border-radius:var(--r-pill);
  transition:opacity var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.accordion-icon::before{ width:11px; height:1.5px; }
.accordion-icon::after{ width:1.5px; height:11px; }
.accordion-item.is-open .accordion-icon{
  background:var(--brand-a18);
  border-color:var(--brand-a45);
  color:var(--brand-200);
  transform:rotate(180deg);
}
.accordion-item.is-open .accordion-icon::after{ opacity:0; transform:scaleY(.2); }

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--t) var(--ease);
}
.accordion-item.is-open .accordion-panel{ max-height:1600px; }
.accordion-panel > *{
  padding:0 var(--s-5) var(--s-5);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--text-dim);
}
.accordion-panel .prose{ padding-top:0; }


/* ===== Breadcrumb ===== */
.breadcrumb{
  padding-block:var(--s-4);
  font-size:var(--fs-xs);
}
.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-1) var(--s-2);
  list-style:none;
  margin:0;
  padding:0;
}
.breadcrumb-item{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--text-dim);
  min-width:0;
}
.breadcrumb-item + .breadcrumb-item::before{
  content:"/";
  color:var(--text-mute);
  font-size:.95em;
}
.breadcrumb-item a{ color:var(--text-dim); }
.breadcrumb-item a:hover{ color:var(--brand-200); }
.breadcrumb-item[aria-current="page"],
.breadcrumb-item:last-child{
  color:var(--text);
  font-weight:var(--fw-medium);
}


/* ===== Sayfa Başlığı (iç sayfalar) ===== */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(2.5rem,6vw,4.5rem);
  background:
    radial-gradient(900px 380px at 50% -40%, var(--brand-a18), transparent 70%),
    linear-gradient(180deg,var(--ink-950),var(--ink-900));
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, var(--mask-solid), transparent 72%);
  mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, var(--mask-solid), transparent 72%);
}
.page-hero-title{
  font-family:var(--font-display);
  font-size:var(--fs-4xl);
  font-weight:var(--fw-extrabold);
  line-height:1.08;
  letter-spacing:var(--ls-tighter);
  color:var(--text);
  text-wrap:balance;
  margin-top:var(--s-2);
}
.page-hero-lead{
  margin-top:var(--s-4);
  max-width:62ch;
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--text-dim);
}


/* ===== Zengin Metin (.prose) — yönetici panelinden gelen HTML ===== */
.prose{
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--text-dim);
  max-width:74ch;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.prose > * + *{ margin-top:var(--s-5); }

.prose h2{
  margin-top:var(--s-12);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose h3{
  margin-top:var(--s-10);
  font-size:var(--fs-xl);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose h4{
  margin-top:var(--s-8);
  font-size:var(--fs-lg);
  font-weight:var(--fw-semibold);
  color:var(--text);
}
.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child{ margin-top:0; }

.prose p{ color:var(--text-dim); }
.prose a{
  color:var(--brand-300);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--brand-a45);
  transition:color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.prose a:hover{ color:var(--brand-200); text-decoration-color:var(--brand-300); }

.prose strong{ color:var(--text); font-weight:var(--fw-semibold); }
.prose em{ font-style:italic; }

.prose ul,
.prose ol{
  padding-left:var(--s-6);
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
}
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ padding-left:var(--s-1); }
.prose li::marker{ color:var(--brand-400); }
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul{ margin-top:var(--s-2); }

.prose blockquote{
  margin-left:0;
  margin-right:0;
  padding:var(--s-4) var(--s-5);
  border-left:3px solid var(--brand-500);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--white-a04);
  color:var(--text);
  font-size:var(--fs-lg);
  font-style:italic;
  line-height:var(--lh-normal);
}
.prose blockquote p{ color:var(--text); }
.prose blockquote cite{
  display:block;
  margin-top:var(--s-3);
  font-size:var(--fs-sm);
  font-style:normal;
  color:var(--text-dim);
}

.prose code{
  padding:.15em .4em;
  border-radius:var(--r-xs);
  background:var(--ink-700);
  border:1px solid var(--line);
  color:var(--brand-200);
  font-size:.875em;
}
.prose pre{
  padding:var(--s-5);
  border-radius:var(--r-lg);
  background:var(--ink-950);
  border:1px solid var(--line-strong);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  font-size:var(--fs-sm);
  line-height:1.75;
  color:var(--text-dim);
}
.prose pre code{
  padding:0;
  background:none;
  border:0;
  color:inherit;
  font-size:inherit;
}

.prose img,
.prose figure img{
  width:100%;
  height:auto;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--ink-800);
}
.prose figure figcaption{
  margin-top:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--text-mute);
  text-align:center;
}

.prose hr{
  margin-block:var(--s-10);
  background:var(--grad-line);
}

.prose table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  font-size:var(--fs-sm);
  white-space:nowrap;
}
.prose thead{ background:var(--ink-700); }
.prose th{
  padding:var(--s-3) var(--s-4);
  text-align:left;
  font-weight:var(--fw-semibold);
  color:var(--text);
  border-bottom:1px solid var(--line-strong);
}
.prose td{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
  color:var(--text-dim);
  vertical-align:top;
}
.prose tbody tr:last-child td{ border-bottom:0; }
.prose tbody tr:hover{ background:var(--white-a04); }

.prose iframe,
.prose video{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--ink-950);
}


/* ===== CTA Bandı ===== */
.cta-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-5);
  padding:clamp(2rem,5vw,3.5rem);
  border:1px solid var(--brand-a28);
  border-radius:var(--r-2xl);
  background-color:var(--ink-850);
  background-image:
    radial-gradient(90% 140% at 12% 0%, var(--brand-a18), transparent 62%),
    radial-gradient(70% 120% at 100% 100%, var(--accent-a12), transparent 60%);
  box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(115deg,var(--mask-solid),transparent 70%);
  mask-image:linear-gradient(115deg,var(--mask-solid),transparent 70%);
  opacity:.7;
}
.cta-band h2,
.cta-band .section-title{
  font-size:var(--fs-3xl);
  letter-spacing:var(--ls-tighter);
  text-wrap:balance;
}
.cta-band p{
  max-width:56ch;
  font-size:var(--fs-md);
  color:var(--text-dim);
}
.cta-band .hero-actions,
.cta-band .cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
}


/* ===== Galeri + Lightbox ===== */
.gallery{
  display:grid;
  gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
}
.gallery-item{
  position:relative;
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--ink-800);
  cursor:zoom-in;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.gallery-item:hover{
  border-color:var(--brand-a45);
  transform:translateY(-2px);
}
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:3px;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-lightbox);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:var(--black-a92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.lightbox-img{
  max-width:min(100%,1200px);
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--r-lg);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
  background:var(--ink-900);
}
.lightbox-close{
  position:absolute;
  top:clamp(.75rem,2vw,1.5rem);
  right:clamp(.75rem,2vw,1.5rem);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--white-a06);
  color:var(--text);
  transition:background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lightbox-close:hover{ background:var(--white-a10); transform:scale(1.06); }
.lightbox-close svg{ width:20px; height:20px; }

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--white-a06);
  color:var(--text);
  transition:background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lightbox-nav:hover{ background:var(--white-a10); }
.lightbox-nav svg{ width:20px; height:20px; }
.lightbox-nav[data-lightbox-prev]{ left:clamp(.5rem,2vw,1.5rem); }
.lightbox-nav[data-lightbox-next]{ right:clamp(.5rem,2vw,1.5rem); }
.lightbox-nav[data-lightbox-prev]:hover{ transform:translateY(-50%) translateX(-2px); }
.lightbox-nav[data-lightbox-next]:hover{ transform:translateY(-50%) translateX(2px); }


/* ===== Marquee (logo şeridi) ===== */
.marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--mask-solid) 12%,var(--mask-solid) 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,var(--mask-solid) 12%,var(--mask-solid) 88%,transparent);
}
.marquee-track{
  display:flex;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  width:max-content;
  will-change:transform;
}
.marquee-track > *{
  flex:0 0 auto;
  opacity:.6;
  filter:grayscale(1);
  transition:opacity var(--t) var(--ease), filter var(--t) var(--ease);
}
.marquee-track > *:hover{ opacity:1; filter:grayscale(0); }
.marquee-track img{
  height:clamp(22px,4vw,32px);
  width:auto;
  object-fit:contain;
}


/* ===== Formlar ===== */
.form{
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
  width:100%;
}
.form-grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
}
.form-grid--2{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:1fr;
}

.field{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-width:0;
}
.field--full{ grid-column:1 / -1; }

.label{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--text);
  line-height:1.4;
}
.label .req{
  color:var(--danger);
  font-weight:var(--fw-bold);
  line-height:1;
}

.input,
.textarea,
.select{
  display:block;
  width:100%;
  max-width:100%;
  padding:14px 16px;
  background-color:var(--surface-input);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;                 /* mobilde iOS yakınlaştırmasını engellemek için ≥16px */
  font-weight:var(--fw-regular);
  line-height:1.5;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder{
  color:var(--text-mute);
  opacity:1;
}
.input:hover,
.textarea:hover,
.select:hover{ border-color:var(--brand-a45); }

.input:focus,
.textarea:focus,
.select:focus{
  outline:none;
  border-color:var(--brand-400);
  box-shadow:var(--focus-ring);
  background-color:var(--ink-800);
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible{
  outline:none;
  border-color:var(--brand-400);
  box-shadow:var(--focus-ring);
}

.input:disabled,
.textarea:disabled,
.select:disabled{
  opacity:.55;
  cursor:not-allowed;
  background-color:var(--ink-900);
}

.textarea{
  min-height:150px;
  resize:vertical;
  line-height:var(--lh-body);
}

.select{
  padding-right:2.75rem;
  cursor:pointer;
  /* Ok işareti: harici görsel yerine saf CSS üçgen (conic/linear gradyan) */
  background-image:
    linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),
    linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.select option{
  background:var(--ink-800);
  color:var(--text);
}

/* --- Onay kutusu --- */
.checkbox{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  cursor:pointer;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--text-dim);
  user-select:none;
  -webkit-user-select:none;
}
.checkbox input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:.15em 0 0;
  border-radius:var(--r-xs);
  border:1px solid var(--line-strong);
  background:var(--surface-input);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.checkbox input:hover{ border-color:var(--brand-400); }
.checkbox input:checked{
  background-image:var(--grad-brand);
  background-color:var(--brand-500);
  border-color:transparent;
}
.checkbox input:checked::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid var(--on-brand);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.checkbox input:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:2px;
}
.checkbox-text{
  min-width:0;
  overflow-wrap:break-word;
}
.checkbox-text a{ color:var(--brand-300); text-decoration:underline; text-underline-offset:2px; }

/* --- Radyo kartı --- */
.radio-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  padding:var(--s-4);
  background-color:var(--surface-card);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.radio-card:hover{
  border-color:var(--brand-a45);
  transform:translateY(-2px);
}
.radio-card input[type="radio"],
.radio-card input[type="checkbox"]{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:.1em 0 0;
  accent-color:var(--brand-500);
  cursor:pointer;
}
.radio-card input:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:2px;
}
.radio-card.is-selected{
  border-color:var(--brand-400);
  background-color:var(--ink-700);
  box-shadow:var(--shadow-glow-sm);
}
.radio-card > div,
.radio-card > span{ min-width:0; }
.radio-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--text);
}
.radio-card small{
  display:block;
  margin-top:2px;
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--text-dim);
}

/* --- Yardım / hata metni --- */
.field-hint{
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--text-dim);
}
.field-error{
  display:flex;
  align-items:flex-start;
  gap:var(--s-1);
  font-size:var(--fs-xs);
  line-height:1.5;
  font-weight:var(--fw-medium);
  color:var(--danger);
}
.field-error svg{ width:14px; height:14px; margin-top:.15em; flex:0 0 auto; }

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select{
  border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-a12);
}
.field.has-error .input:focus,
.field.has-error .textarea:focus,
.field.has-error .select:focus{
  border-color:var(--danger);
  box-shadow:0 0 0 4px var(--danger-a22);
}
.field.has-error .label{ color:var(--text); }


/* ===== Uyarı Kutuları ===== */
.alert{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  padding-right:var(--s-10);
  border:1px solid var(--line-strong);
  border-left-width:3px;
  border-radius:var(--r-md);
  background:var(--white-a04);
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
}
.alert p{ margin:0; }
.alert strong{ display:block; margin-bottom:2px; font-weight:var(--fw-semibold); }
.alert a{ text-decoration:underline; text-underline-offset:2px; }

.alert-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex:0 0 auto;
  margin-top:.1em;
}
.alert-icon svg{ width:100%; height:100%; }

.alert-close{
  position:absolute;
  top:50%;
  right:var(--s-3);
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--r-sm);
  color:var(--text-dim);
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.alert-close:hover{ background:var(--white-a06); color:var(--text); }
.alert-close svg{ width:15px; height:15px; }
.alert-close::before{
  content:"\00D7";
  font-size:1.25rem;
  line-height:1;
}
.alert-close:has(svg)::before{ content:none; }

.alert--success{ background:var(--success-a12); border-color:var(--success-a30); border-left-color:var(--success); }
.alert--success .alert-icon{ color:var(--success); }
.alert--error{ background:var(--danger-a12); border-color:var(--danger-a30); border-left-color:var(--danger); }
.alert--error .alert-icon{ color:var(--danger); }
.alert--warning{ background:var(--warning-a12); border-color:var(--warning-a30); border-left-color:var(--warning); }
.alert--warning .alert-icon{ color:var(--warning); }
.alert--info{ background:var(--info-a12); border-color:var(--info-a30); border-left-color:var(--info); }
.alert--info .alert-icon{ color:var(--info); }

/* Otomatik kapanan uyarılar için kaybolma durumu (JS ekler) */
.alert.is-dismissing{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}


/* ===== Sayfalama ===== */
.pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  margin-top:clamp(2rem,5vw,3rem);
  list-style:none;
  padding:0;
}
.page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-1);
  min-width:42px;
  height:42px;
  padding-inline:var(--s-3);
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--white-a04);
  color:var(--text-dim);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  font-variant-numeric:tabular-nums;
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.page-link:hover{
  color:var(--text);
  border-color:var(--brand-a45);
  background:var(--brand-a08);
  transform:translateY(-2px);
}
.page-link svg{ width:15px; height:15px; }
.page-link.is-active{
  background-image:var(--grad-brand);
  border-color:transparent;
  color:var(--on-brand);
  font-weight:var(--fw-semibold);
  box-shadow:var(--shadow-glow-sm);
  pointer-events:none;
}
.page-link.is-disabled{
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}


/* ===== Teklif Hesaplayıcı ===== */
.calculator{
  display:block;
  width:100%;
}
.calc-grid{
  display:grid;
  gap:var(--s-6);
  grid-template-columns:1fr;
  align-items:start;
}
.calc-step{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-5);
  background-color:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.calc-step + .calc-step{ margin-top:var(--s-5); }
.calc-step-title{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
}
.calc-step-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--brand-a12);
  border:1px solid var(--brand-a28);
  color:var(--brand-200);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
}

.calc-options{
  display:grid;
  gap:var(--s-3);
  grid-template-columns:1fr;
}
.calc-option{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  padding:var(--s-4);
  background-color:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.calc-option:hover{
  border-color:var(--brand-a45);
  transform:translateY(-2px);
}
.calc-option input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:.1em 0 0;
  accent-color:var(--brand-500);
  cursor:pointer;
}
.calc-option input:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:2px;
}
.calc-option.is-selected{
  border-color:var(--brand-400);
  background-color:var(--ink-700);
  box-shadow:var(--shadow-glow-sm);
}
.calc-option > span,
.calc-option > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
.calc-option strong{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--text);
}
.calc-option small{
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--text-dim);
}
.calc-option-price{
  margin-left:auto;
  flex:0 0 auto;
  align-self:center;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--brand-200);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.calc-summary{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-5);
  background-color:var(--ink-850);
  background-image:var(--grad-surface);
  border:1px solid var(--brand-a28);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}
.calc-summary h3,
.calc-summary .calc-summary-title{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight);
  color:var(--text);
}
.calc-summary-list{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  list-style:none;
  margin:0;
  padding:0;
  min-height:2rem;
}
.calc-summary-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  padding-block:var(--s-2);
  border-bottom:1px dashed var(--line);
  font-size:var(--fs-sm);
  color:var(--text-dim);
}
.calc-summary-row:last-child{ border-bottom:0; }
.calc-summary-row span:first-child{ min-width:0; overflow-wrap:break-word; }
.calc-summary-row span:last-child{
  flex:0 0 auto;
  color:var(--text);
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.calc-summary-row.is-empty{
  border-bottom:0;
  color:var(--text-mute);
  font-style:italic;
}

.calc-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--line-strong);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  color:var(--text);
}
.calc-total-value{
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tighter);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  background:var(--grad-logo);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.calc-note{
  font-size:var(--fs-xs);
  line-height:1.6;
  color:var(--text-dim);
  padding-top:var(--s-1);
}


/* ===== Footer ===== */
.site-footer{
  position:relative;
  z-index:var(--z-base);
  margin-top:clamp(3rem,7vw,6rem);
  background:var(--ink-950);
  border-top:1px solid var(--line);
  color:var(--text-dim);
}
.footer-top{
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
.footer-grid{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  align-items:flex-start;
}
.footer-brand .brand{ margin-bottom:var(--s-1); }
.footer-about{
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--text-dim);
  max-width:42ch;
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  min-width:0;
}
.footer-title{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--text);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  list-style:none;
  margin:0;
  padding:0;
}
.footer-link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--text-dim);
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-link:hover{
  color:var(--text);
  transform:translateX(3px);
}

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  list-style:none;
  margin:0;
  padding:0;
}
.footer-contact-item{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--text-dim);
  overflow-wrap:break-word;
  min-width:0;
}
.footer-contact-item svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  margin-top:.2em;
  color:var(--brand-400);
}
.footer-contact-item a{ color:var(--text-dim); }
.footer-contact-item a:hover{ color:var(--text); }

.social-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  list-style:none;
  margin:0;
  padding:0;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--white-a04);
  color:var(--text-dim);
  transition:color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.social-link svg{ width:18px; height:18px; }
.social-link:hover{
  color:var(--text);
  background:var(--brand-a12);
  border-color:var(--brand-a45);
  transform:translateY(-2px);
}

.footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
  padding-block:var(--s-5);
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);
  color:var(--text-mute);
  text-align:center;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--s-2) var(--s-4);
  list-style:none;
  margin:0;
  padding:0;
}
.footer-legal a{
  color:var(--text-mute);
  font-size:var(--fs-xs);
}
.footer-legal a:hover{ color:var(--text-dim); }


/* ===== Yüzen Öğeler: WhatsApp + Yukarı Çık ===== */
.whatsapp-float{
  position:fixed;
  right:clamp(1rem,3vw,1.5rem);
  bottom:calc(clamp(1rem,3vw,1.5rem) + 58px);   /* yukarı çık butonunun üstünde */
  z-index:var(--z-float);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--whatsapp);                            /* WhatsApp marka rengi — istisna */
  color:var(--on-brand);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 30px -12px rgba(37,211,102,.7), var(--shadow-md);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.whatsapp-float svg{ width:27px; height:27px; }
.whatsapp-float:hover{
  color:var(--on-brand);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 18px 38px -12px rgba(37,211,102,.85), var(--shadow-lg);
}
.whatsapp-float:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
}
/* Nabız halkası */
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--whatsapp);
  pointer-events:none;
  opacity:0;
}

.back-to-top{
  position:fixed;
  right:clamp(1rem,3vw,1.5rem);
  bottom:clamp(1rem,3vw,1.5rem);
  z-index:var(--z-float);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--surface-glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--text);
  box-shadow:var(--shadow-md);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.92);
  transition:opacity var(--t) var(--ease),
             visibility var(--t) var(--ease),
             transform var(--t) var(--ease),
             border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.back-to-top svg{ width:18px; height:18px; }
.back-to-top::before{
  content:"";
  width:9px;
  height:9px;
  border:solid currentColor;
  border-width:2px 2px 0 0;
  transform:rotate(-45deg) translate(-2px,2px);
}
.back-to-top:has(svg)::before{ content:none; }
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.back-to-top:hover{
  border-color:var(--brand-a45);
  background:var(--brand-a18);
  color:var(--text);
}


/* ===== Kopyalama Geri Bildirimi ===== */
[data-copy]{ position:relative; }
[data-copy].is-copied{
  color:var(--success);
  border-color:var(--success-a30);
}


/* ===== Animasyon Kareleri ===== */
@keyframes e4-spin{
  to{ transform:rotate(360deg); }
}
@keyframes e4-pulse-ring{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}
@keyframes e4-marquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@keyframes e4-fade-up{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes e4-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes e4-caret{
  0%,100%{ opacity:1; }
  50%{ opacity:0; }
}


/* ===== Hareket / Scroll Reveal =====
   Varsayılan: içerik GÖRÜNÜR. Hareket yalnızca kullanıcı hareket kısıtlaması
   istemediğinde devreye girer — böylece içerik hiçbir koşulda gizli kalmaz. */
[data-reveal]{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
    will-change:opacity, transform;
  }
  [data-reveal].is-revealed{
    opacity:1;
    transform:translateY(0);
    will-change:auto;
  }

  /* Marquee yalnızca hareket serbestken akar */
  .marquee-track{ animation:e4-marquee 34s linear infinite; }
  .marquee:hover .marquee-track{ animation-play-state:paused; }

  /* WhatsApp nabız halkası */
  .whatsapp-float::before{ animation:e4-pulse-ring 2.4s var(--ease-out) infinite; }

  /* Hero kod penceresi hafif süzülür */
  .hero-visual .code-window{ animation:e4-float 7s ease-in-out infinite; }

  html{ scroll-behavior:smooth; }
}

/* Hareket kısıtlaması istendiğinde tüm süslü hareketleri kapat */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],
  [data-reveal].is-revealed{
    opacity:1 !important;
    transform:none !important;
  }
  .marquee-track{ animation:none !important; }
}


/* ============================================================================
   DUYARLI KATMAN — mobile-first; aşağıdaki her blok yukarıyı genişletir
   ========================================================================= */

/* ===== ≥ 420px: dar telefonlar üstü ===== */
@media (min-width: 420px){
  .hero-actions .btn{ flex:0 1 auto; }
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr)); }
}

/* ===== ≥ 480px ===== */
@media (min-width: 480px){
  .grid--2,
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calc-options{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
  .footer-legal{ justify-content:flex-end; }
}

/* ===== ≥ 640px ===== */
@media (min-width: 640px){
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta-band{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-8);
  }
  .cta-band .hero-actions,
  .cta-band .cta-actions{ flex:0 0 auto; }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); }
}

/* ===== ≥ 768px: tablet — yatay dolgu 32px ===== */
@media (min-width: 768px){
  :root{
    --gutter:32px;
    --header-h:76px;
  }

  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--auto{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }

  .section-head{ margin-bottom:clamp(2.25rem,4vw,3.25rem); }

  .hero-inner{ gap:clamp(2.5rem,5vw,4rem); }
  .hero-actions .btn{ min-width:0; }

  .card,
  .service-card,
  .pricing-card,
  .testimonial-card{ padding:var(--s-7); }

  .footer-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-brand{ grid-column:span 3; }

  .calc-summary{
    position:sticky;
    top:calc(var(--header-h) + 20px);
  }

  /* 768px üstünde input yazı boyutu normalleşebilir (iOS zoom riski yok) */
  .input,
  .textarea,
  .select{
    font-size:var(--fs-sm);
    padding:14px 16px;
  }
}

/* ===== ≥ 900px ===== */
@media (min-width: 900px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .calc-grid{ grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr); }
  .calc-options{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== ≥ 1024px: masaüstü gezinme açılır ===== */
@media (min-width: 1024px){
  :root{ --header-h:var(--header-h-lg); }

  /* Masaüstü menüsü görünür, mobil kontroller gizlenir */
  .nav{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none; }
  .nav-backdrop{ display:none; }

  .header-inner{ min-height:var(--header-h-lg); }

  /* Açılır menü masaüstünde hover ile açılır */
  .nav-item--dropdown:hover > .dropdown,
  .nav-item--dropdown:focus-within > .dropdown,
  .nav-item--dropdown.is-open > .dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
  }
  .nav-item--dropdown:hover > .nav-link svg,
  .nav-item--dropdown:focus-within > .nav-link svg{ transform:rotate(180deg); }

  /* Hero iki sütun */
  .hero-inner{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
  .hero{ padding-block:clamp(4rem,8vw,7.5rem) clamp(3.5rem,7vw,6rem); }
  .code-window{ max-width:none; }

  /* Süreç bağlayıcı çizgisi yalnızca masaüstünde */
  .process-connector{ display:block; }

  .footer-grid{ grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); }
  .footer-brand{ grid-column:auto; }

  .gallery{ grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); }

  .page-hero{ padding-block:clamp(3.5rem,6vw,5.5rem); }
}

/* ===== ≥ 1280px ===== */
@media (min-width: 1280px){
  .grid{ gap:var(--s-6); }
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--auto{ gap:var(--s-6); }
  .nav-list{ gap:var(--s-2); }
  .nav-link{ font-size:var(--fs-base); }
  .card,
  .service-card,
  .pricing-card,
  .testimonial-card{ padding:var(--s-8); }
  .calc-options{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== ≥ 1440px ===== */
@media (min-width: 1440px){
  .hero-inner{ gap:5rem; }
  .section{ padding-block:clamp(4.5rem,6vw,7rem); }
  .grid--auto{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
}

/* ===== ≥ 1680px: çok geniş ekranlarda ölçek sabitlenir ===== */
@media (min-width: 1680px){
  .hero-grid{ background-size:78px 78px; }
  .cta-band{ padding:4rem; }
}

/* ===== Yatay telefon: kısa ekranlarda dikey boşluk azalır ===== */
@media (max-height: 520px) and (orientation: landscape){
  .hero{ padding-block:2.5rem; }
  .mobile-nav-inner{ padding-top:calc(var(--header-h) + var(--s-2)); }
}

/* ===== Yüksek kontrast tercihi ===== */
@media (prefers-contrast: more){
  :root{
    --line:rgba(255,255,255,.18);
    --line-strong:rgba(255,255,255,.34);
    --text-dim:#C3CDE0;
    --text-mute:#9AA6BE;
  }
}

/* ===== Dokunmatik cihazlar: hover efektlerini yumuşat ===== */
@media (hover: none){
  .card--hover:hover,
  .service-card:hover,
  .project-card:hover,
  .post-card:hover,
  .pricing-card:hover,
  .testimonial-card:hover,
  .why-card:hover,
  .process-step:hover,
  .stat-card:hover,
  .btn:hover{
    transform:none;
  }
  .project-card:hover .project-card-img,
  .post-card:hover .post-card-media img,
  .gallery-item:hover img{ transform:none; }
}


/* ===== Çerez onay bandı ===== */
.cookie-consent{
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:70;
  background:var(--black-a92);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:0 18px 50px var(--black-a70);
  backdrop-filter:blur(14px);
  padding:1.15rem 1.35rem;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .28s ease, transform .28s ease;
}
.cookie-consent.is-visible{ opacity:1; transform:translateY(0); }
.cookie-consent[hidden]{ display:none; }

.cookie-consent-inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  max-width:var(--container);
  margin-inline:auto;
}
.cookie-consent-text{ flex:1 1 auto; min-width:0; }
.cookie-consent-text p{
  margin:0;
  font-size:.875rem;
  line-height:1.6;
  color:var(--text-dim);
}
.cookie-consent-title{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.3rem !important;
  font-weight:600;
  color:var(--text) !important;
}
.cookie-consent-title svg{ color:var(--brand-300); flex:none; }
.cookie-consent-text a{ color:var(--brand-300); text-decoration:underline; }
.cookie-consent-text a:hover{ color:var(--brand-200); }

.cookie-consent-actions{
  display:flex;
  gap:.6rem;
  flex:none;
}

@media (max-width:860px){
  .cookie-consent-inner{ flex-direction:column; align-items:stretch; gap:1rem; }
  .cookie-consent-actions{ justify-content:stretch; }
  .cookie-consent-actions .btn{ flex:1 1 0; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .cookie-consent{ transition:none; transform:none; }
}


/* ===== Baskı ===== */
@media print{
  :root{
    --text:var(--print-ink);
    --text-dim:var(--print-ink-dim);
    --text-mute:var(--print-ink-mute);
    --line:var(--print-line);
    --line-strong:var(--print-line);
  }
  body{
    background:var(--print-bg);
    color:var(--print-ink);
  }
  body::before{ display:none; }
  .site-header,
  .mobile-nav,
  .nav-backdrop,
  .back-to-top,
  .whatsapp-float,
  .lightbox,
  .cta-band,
  .marquee,
  .pagination,
  .cookie-consent,
  .skip-link{
    display:none !important;
  }
  .section{ padding-block:1.25rem; }
  .card,
  .service-card,
  .pricing-card,
  .post-card,
  .project-card{
    border:1px solid var(--print-line);
    box-shadow:none;
    break-inside:avoid;
  }
  a{ color:var(--print-ink); text-decoration:underline; }
  .prose{ max-width:none; }
}