/* =========================================================================
   Buklet Etiket - Ana stil dosyası
   Harici bağımlılık yok; sistem font yığını ile hızlı ilk boyama.
   ========================================================================= */

:root{
  --brand-50:#eff5ff;  --brand-100:#dce8ff; --brand-200:#bcd3ff;
  --brand-300:#8fb4ff; --brand-400:#5c8df5; --brand-500:#2f6ae0;
  --brand-600:#1c51c4; --brand-700:#153f9c; --brand-800:#12347d;
  --brand-900:#0d2559;

  --accent:#f59e0b; --accent-soft:#fff7e6;

  --ink-900:#0f172a; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-400:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f7;
  --bg:#ffffff; --bg-soft:#f7f9fc;

  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow:0 4px 14px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:0 18px 45px rgba(13,37,89,.13);

  --wrap:1200px;
  --font:"Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink-700);
  font-family:var(--font); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-600); text-decoration:none}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4{color:var(--ink-900); line-height:1.25; margin:0 0 .6em; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.05rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em; padding-left:1.15em}
li{margin-bottom:.35em}
strong{color:var(--ink-900)}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.icon{width:22px; height:22px; flex:none}
.icon-sm{width:17px; height:17px}
.icon-xs{width:14px; height:14px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--brand-700); color:#fff; padding:10px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0; color:#fff}
:focus-visible{outline:3px solid var(--brand-400); outline-offset:2px; border-radius:4px}

/* ---------------------------------------------------------------- Topbar */
.topbar{background:var(--brand-900); color:#c9d9f7; font-size:.83rem}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; flex-wrap:wrap}
.topbar a{color:#dce8ff; display:inline-flex; align-items:center; gap:6px}
.topbar a:hover{color:#fff}
.topbar-slogan{display:inline-flex; align-items:center; gap:7px}
.topbar-links{display:flex; gap:20px; flex-wrap:wrap; align-items:center}

/* Dil değiştirici */
.lang-switch{display:inline-flex; align-items:center; gap:2px; padding-left:4px}
.lang-switch a{
  padding:3px 9px; border-radius:6px; font-size:.78rem; font-weight:700;
  letter-spacing:.04em; color:#93a7c9; line-height:1.6;
}
.lang-switch a:hover{background:rgba(255,255,255,.12); color:#fff}
.lang-switch a.is-active{background:var(--brand-600); color:#fff}

/* ---------------------------------------------------------------- Header */
.site-header{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.6) blur(8px); border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px}

.logo{display:flex; align-items:center; gap:12px; color:var(--ink-900)}
.logo-mark{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-800)); color:#fff;
  box-shadow:0 6px 16px rgba(21,63,156,.28);
}
.logo-text strong{display:block; font-size:1.24rem; letter-spacing:-.03em; line-height:1.1; color:var(--ink-900)}
.logo-text strong span{color:var(--brand-600)}
.logo-text small{display:block; font-size:.72rem; color:var(--ink-500); letter-spacing:.02em}

.nav-list{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-list > li{position:relative}
.nav-list > li > a{
  display:block; padding:10px 13px; border-radius:9px; font-size:.94rem; font-weight:600;
  color:var(--ink-700); white-space:nowrap;
}
.nav-list > li > a:hover{background:var(--brand-50); color:var(--brand-700)}
.nav-list > li > a[aria-current]{color:var(--brand-700); background:var(--brand-50)}
.nav-cta{margin-left:8px}
/* Menüdeki buton, nav link rengini değil kendi rengini kullanmalı */
.nav-list > li.nav-cta > a.btn-primary,
.nav-list > li.nav-cta > a.btn-primary:hover{background:var(--brand-600); color:#fff}
.nav-list > li.nav-cta > a.btn-primary:hover{background:var(--brand-700)}

/* Mega menü */
.submenu{
  position:absolute; left:50%; top:calc(100% + 12px); transform:translateX(-50%) translateY(-8px);
  width:min(94vw,1060px); background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:.18s ease; padding:22px 8px;
}
.submenu-narrow{width:min(94vw,620px)}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.submenu-in{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-inline:16px; max-width:100%}
.submenu-narrow .submenu-in{grid-template-columns:1fr}
.submenu-head{
  display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink-900);
  padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--line-soft); font-size:.95rem;
}
.submenu-head .icon{color:var(--brand-600)}
.submenu ul{list-style:none; margin:0; padding:0}
.submenu ul li{margin:0}
.submenu ul a{display:block; padding:6px 8px; border-radius:8px; color:var(--ink-600); font-size:.89rem}
.submenu ul a:hover{background:var(--brand-50); color:var(--brand-700)}
.submenu-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.submenu-grid a{display:flex; align-items:center; gap:9px; padding:10px; border-radius:10px; color:var(--ink-700); font-size:.9rem; font-weight:500}
.submenu-grid a:hover{background:var(--brand-50); color:var(--brand-700)}
.submenu-grid .icon{color:var(--brand-500)}

.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; padding:0}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink-900); margin:4px auto; border-radius:2px; transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------ Breadcrumb */
.breadcrumb{background:var(--bg-soft); border-bottom:1px solid var(--line-soft); font-size:.85rem}
.breadcrumb ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:11px 0}
.breadcrumb li{margin:0; display:flex; align-items:center; gap:8px; color:var(--ink-500)}
.breadcrumb li+li::before{content:"›"; color:var(--ink-400)}
.breadcrumb a{color:var(--ink-600)}
.breadcrumb a:hover{color:var(--brand-600)}

/* --------------------------------------------------------------- Butonlar */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--radius-sm); font-weight:650; font-size:.97rem;
  border:1px solid transparent; cursor:pointer; transition:.18s ease; text-align:center;
}
.btn-sm{padding:9px 17px; font-size:.9rem}
.btn-primary{background:var(--brand-600); color:#fff; box-shadow:0 6px 18px rgba(28,81,196,.26)}
.btn-primary:hover{background:var(--brand-700); color:#fff; transform:translateY(-1px)}
.btn-outline{border-color:var(--line); background:#fff; color:var(--ink-900)}
.btn-outline:hover{border-color:var(--brand-400); color:var(--brand-700); background:var(--brand-50)}
.btn-ghost{border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.18); color:#fff}

/* ------------------------------------------------------------- Bölümler */
.section{padding:76px 0}
.section-soft{background:var(--bg-soft)}
.section-tight{padding:52px 0}
.section-head{max-width:760px; margin-bottom:42px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head p{color:var(--ink-600); font-size:1.05rem; margin-bottom:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600);
  background:var(--brand-50); border:1px solid var(--brand-100);
  padding:6px 13px; border-radius:999px; margin-bottom:16px;
}

/* ------------------------------------------------------------------ Hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 88% -8%, var(--brand-100), transparent 62%),
    linear-gradient(180deg,var(--brand-50), #fff 78%);
  border-bottom:1px solid var(--line-soft);
  padding:78px 0 84px;
}
.hero-in{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.hero h1{margin-bottom:.5em}
.hero h1 em{font-style:normal; color:var(--brand-600)}
.hero-lead{font-size:1.13rem; color:var(--ink-600); max-width:56ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 26px}
.hero-actions .btn-ghost{border-color:var(--line); color:var(--ink-900); background:#fff}
.hero-actions .btn-ghost:hover{background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-200)}
.hero-points{display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:0; font-size:.92rem}
.hero-points li{display:flex; align-items:center; gap:8px; color:var(--ink-600); margin:0}
.hero-points .icon{color:#16a34a}

.hero-art{position:relative; display:grid; gap:22px}
.hero-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:24px 26px 26px; position:relative;
}
.hero-card h3{font-size:1rem; margin-bottom:16px; display:flex; align-items:center; gap:9px}
.hero-card h3 .icon{color:var(--brand-600)}
.pages-stack{display:grid; gap:9px}
.page-row{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1px solid var(--line-soft); border-radius:10px; background:var(--bg-soft); font-size:.88rem;
}
.page-row b{color:var(--ink-900); font-weight:650}
.page-row span{margin-left:auto; color:var(--ink-500); font-size:.8rem}
.page-row.is-cover{background:linear-gradient(135deg,var(--brand-600),var(--brand-800)); border-color:transparent; color:#fff}
.page-row.is-cover b,.page-row.is-cover span{color:#fff}
.hero-badge{
  position:absolute; right:-14px; bottom:-18px; background:var(--accent); color:#3b2500;
  font-weight:750; font-size:.82rem; padding:11px 18px; border-radius:12px;
  box-shadow:0 10px 26px rgba(245,158,11,.35); line-height:1.3; text-align:center;
}

/* ------------------------------------------------------------ İstatistik */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:var(--shadow-sm)}
.stat b{display:block; font-size:2rem; color:var(--brand-700); letter-spacing:-.03em; line-height:1.1}
.stat span{font-size:.88rem; color:var(--ink-500)}

/* -------------------------------------------------------------- Görseller */
.illus{display:block; width:100%; height:auto}

.figure{margin:0 0 2.2em}
.figure .illus{
  border:1px solid var(--brand-100); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); background:#fff;
}
.figure figcaption{margin-top:11px; font-size:.85rem; color:var(--ink-500); line-height:1.5}

/* Kart üstü görsel */
.card-media{
  display:block; margin:-26px -26px 18px; overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0; border-bottom:1px solid var(--line-soft);
}
.card-media .illus{border-radius:0}

/* Kategori / liste sayfası giriş bloğu: metin + görsel */
.page-lead{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:48px; align-items:center; margin-bottom:46px}
.page-lead-art{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--brand-100); box-shadow:var(--shadow)}
.page-lead-art .illus{border-radius:0}

/* Hero görseli */
.hero-illus{
  border-radius:var(--radius-lg); overflow:hidden; background:#fff;
  border:1px solid var(--brand-100); box-shadow:var(--shadow-lg);
}
.hero-illus .illus{border-radius:0}

/* Katlama tipi diyagramları */
.fold-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 2em; padding:0; list-style:none}
.fold-grid li{margin:0}
.fold-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 16px; box-shadow:var(--shadow-sm); height:100%;
}
.fold-card .fold-svg{display:block; width:100%; height:auto; background:var(--bg-soft); border-radius:var(--radius-sm); margin-bottom:12px}
.fold-card b{display:block; color:var(--ink-900); font-size:.95rem; margin-bottom:3px}
.fold-card span{font-size:.85rem; color:var(--ink-600); line-height:1.5}

/* ---------------------------------------------------------------- Kartlar */
.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-sm); transition:.2s ease; display:flex; flex-direction:column;
}
a.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand-200)}
.card-icon{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(140deg,var(--brand-50),var(--brand-100)); color:var(--brand-700);
  border:1px solid var(--brand-100);
}
.card h3{font-size:1.06rem; margin-bottom:.45em; color:var(--ink-900)}
.card p{font-size:.93rem; color:var(--ink-600); margin-bottom:0}
.card .card-link{margin-top:16px; font-size:.88rem; font-weight:650; color:var(--brand-600); display:inline-flex; align-items:center; gap:6px}
a.card:hover .card-link{gap:10px}

.card-cat{font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-500); margin-bottom:8px}

/* Süreç adımları */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 24px; box-shadow:var(--shadow-sm)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; font-size:1.5rem; font-weight:800; color:var(--brand-200); letter-spacing:-.03em; margin-bottom:8px;
}
.step h3{font-size:1.02rem; margin-bottom:.4em}
.step p{font-size:.9rem; color:var(--ink-600); margin:0}

/* Özellik listesi (ikonlu) */
.feature-list{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.feature-list li{display:flex; gap:14px; margin:0}
.feature-list .icon{color:#16a34a; margin-top:4px}
.feature-list b{display:block; color:var(--ink-900)}
.feature-list span{font-size:.93rem; color:var(--ink-600)}

/* Etiket rozetleri */
.chips{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0}
.chips li{margin:0}
.chips li, .chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-800);
  font-size:.87rem; font-weight:550;
}

/* Teknik tablo */
.spec-table{width:100%; border-collapse:collapse; font-size:.93rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.spec-table th,.spec-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:34%; color:var(--ink-900); font-weight:650; background:var(--bg-soft)}
.table-scroll{overflow-x:auto}

/* Bilgi kutusu */
.note{
  border-left:4px solid var(--brand-500); background:var(--brand-50);
  padding:18px 22px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:26px 0;
}
.note p:last-child{margin-bottom:0}
.note.note-accent{border-left-color:var(--accent); background:var(--accent-soft)}

/* ------------------------------------------------------------ İçerik metni */
.prose{max-width:78ch}
.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em}
.prose ul li::marker{color:var(--brand-400)}

/* İki sütunlu içerik + yan sütun */
.layout-side{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:52px; align-items:start}
.sidebar{position:sticky; top:100px; display:grid; gap:20px}
.side-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm)}
.side-box h3{font-size:.98rem; margin-bottom:14px}
.side-box ul{list-style:none; padding:0; margin:0}
.side-box li{margin:0}
.side-box li a{display:block; padding:8px 10px; border-radius:8px; font-size:.9rem; color:var(--ink-600)}
.side-box li a:hover{background:var(--brand-50); color:var(--brand-700)}
.side-box li a[aria-current]{background:var(--brand-50); color:var(--brand-700); font-weight:650}
.side-cta{background:linear-gradient(150deg,var(--brand-700),var(--brand-900)); border:0; color:#dce8ff}
.side-cta h3{color:#fff}
.side-cta p{font-size:.9rem; margin-bottom:16px}
.side-cta .btn{width:100%}

/* ------------------------------------------------------------------- SSS */
.faq-list{display:grid; gap:12px; max-width:900px}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.faq-item summary{
  cursor:pointer; padding:19px 54px 19px 22px; font-weight:650; color:var(--ink-900);
  list-style:none; position:relative; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--brand-500); border-bottom:2px solid var(--brand-500);
  transform:translateY(-70%) rotate(45deg); transition:.2s;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item[open] summary{background:var(--brand-50)}
.faq-answer{padding:4px 22px 20px; color:var(--ink-600); font-size:.96rem}
.faq-answer p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- Formlar */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem; font-weight:650; color:var(--ink-900)}
.field label .req{color:#dc2626}
.field input,.field select,.field textarea{
  font:inherit; font-size:.96rem; padding:13px 15px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; color:var(--ink-900); width:100%;
  transition:.15s ease;
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); outline:none;
}
.field .hint{font-size:.8rem; color:var(--ink-500)}
.field-check{display:flex; gap:11px; align-items:flex-start; font-size:.87rem; color:var(--ink-600)}
.field-check input{width:auto; margin-top:4px; flex:none}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}

.alert{padding:16px 20px; border-radius:var(--radius-sm); margin-bottom:26px; font-size:.95rem}
.alert-ok{background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46}
.alert-err{background:#fef2f2; border:1px solid #fecaca; color:#991b1b}
.alert ul{margin:.5em 0 0; padding-left:1.2em}

/* -------------------------------------------------------------- CTA bandı */
.cta-band{background:linear-gradient(135deg,var(--brand-700),var(--brand-900)); color:#dce8ff; padding:56px 0}
.cta-band-in{display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap}
.cta-band h2{color:#fff; margin-bottom:.35em}
.cta-band p{margin:0; max-width:62ch; color:#c9d9f7}
.cta-band-actions{display:flex; gap:13px; flex-wrap:wrap}
.cta-band .btn-primary{background:#fff; color:var(--brand-800); box-shadow:0 8px 22px rgba(0,0,0,.2)}
.cta-band .btn-primary:hover{background:var(--brand-50); color:var(--brand-900)}

/* ----------------------------------------------------------------- Footer */
.site-footer{background:#0b1a35; color:#93a7c9; font-size:.92rem}
/* Footer, içerik genişliğinden daha geniş bir alan kullanır */
.site-footer .wrap{max-width:1560px; padding-inline:40px}
.footer-grid{display:grid; grid-template-columns:3fr 1.7fr 1fr 1fr; gap:46px; padding:52px 40px 38px; align-items:start}
/* Uzun listeler dikeyde uzamasın, iki sütuna yayılsın */
.footer-col ul.two-col{column-count:2; column-gap:28px}
.footer-col ul.two-col li{break-inside:avoid}
.footer-col h3{color:#fff; font-size:.95rem; margin-bottom:16px; letter-spacing:.02em}
.footer-col h3 a{color:#fff}
.footer-col h3 a:hover{color:var(--brand-300)}
.footer-col li a{font-size:.89rem; line-height:1.5; display:inline-block}
.footer-social{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.footer-social a{
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:6px 14px; font-size:.82rem; color:#c9d9f7;
}
.footer-social a:hover{border-color:var(--brand-300); color:#fff}

.footer-tags{border-top:1px solid rgba(255,255,255,.09); padding-top:26px; padding-bottom:30px}
.footer-tags h3{color:#7f93b5; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.footer-tags ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.footer-tags li{margin:0}
.footer-tags a{
  display:inline-block; padding:6px 13px; border-radius:999px; font-size:.82rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#93a7c9;
}
.footer-tags a:hover{background:rgba(47,106,224,.22); border-color:var(--brand-500); color:#fff}
.footer-bottom-links{display:flex; gap:20px; flex-wrap:wrap}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin-bottom:9px}
.footer-col a{color:#93a7c9}
.footer-col a:hover{color:#fff}
.footer-brand p{font-size:.9rem; line-height:1.65; margin:16px 0 20px; max-width:60ch}
.footer-brand{padding-right:24px}
.logo-footer .logo-text strong{color:#fff}
.logo-footer .logo-text strong span{color:var(--brand-300)}
.footer-contact{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.footer-contact li{display:flex; gap:11px; align-items:flex-start; font-size:.9rem; margin:0}
.footer-contact .icon{color:var(--brand-300); margin-top:3px}
.footer-col a.more{color:var(--brand-300); font-weight:650; display:inline-flex; align-items:center; gap:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09)}
.footer-bottom-in{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 20px; font-size:.85rem}
.footer-bottom p{margin:0}

/* ----------------------------------------------------------- Yukarı çık */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:48px; height:48px; border-radius:50%; cursor:pointer; padding:0;
  background:var(--brand-600); color:#fff; border:1px solid var(--brand-700);
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(21,63,156,.34);
  opacity:0; transform:translateY(10px); transition:opacity .22s ease, transform .22s ease, background .18s ease;
}
.to-top[hidden]{display:none}
.to-top.is-visible{opacity:1; transform:translateY(0)}
.to-top:hover{background:var(--brand-700)}
.to-top svg{width:21px; height:21px}
/* WhatsApp butonu açıksa yukarı ok onun üstünde dursun */
body:has(.wa-float) .to-top{bottom:88px}

/* ------------------------------------------------------------- WhatsApp */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(37,211,102,.42); transition:.2s;
}
.wa-float svg{width:30px; height:30px}
.wa-float:hover{transform:scale(1.07); color:#fff}

/* ------------------------------------------------------------------- 404 */
.err-page{text-align:center; padding:100px 0}
.err-code{font-size:5rem; font-weight:800; color:var(--brand-200); line-height:1; letter-spacing:-.04em}

/* ------------------------------------------------------------- Responsive */
@media (max-width:1180px){
  .footer-grid{grid-template-columns:1.8fr 1.4fr 1fr; gap:34px}
}
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .layout-side{grid-template-columns:1fr; gap:40px}
  .sidebar{position:static; grid-template-columns:repeat(2,1fr); display:grid}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr; gap:44px}
  .hero{padding:56px 0 64px}
  .page-lead{grid-template-columns:1fr; gap:32px}
  .grid-3,.fold-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px}

  .nav-toggle{display:block}
  .nav{
    position:absolute; left:0; right:0; top:100%; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .nav.open{max-height:82vh; overflow-y:auto}
  .nav-list{flex-direction:column; align-items:stretch; gap:0; padding:10px 20px 22px}
  .nav-list > li > a{padding:14px 4px; border-bottom:1px solid var(--line-soft); border-radius:0}
  .submenu{
    position:static; transform:none; width:auto; opacity:1; visibility:visible;
    box-shadow:none; border:0; border-radius:0; padding:4px 0 12px;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .has-sub.open .submenu{max-height:1400px}
  .has-sub:hover .submenu{transform:none}
  .submenu-in{grid-template-columns:1fr; gap:18px; padding-inline:8px}
  .submenu-grid{grid-template-columns:1fr}
  .nav-cta{margin:16px 0 0}
  .nav-cta .btn{width:100%; padding:14px}
  .topbar-slogan{display:none}
  .topbar-in{justify-content:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:52px 0}
  .grid-2,.grid-3,.grid-4,.steps,.stats,.fold-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; padding:44px 20px 34px}
  .sidebar{grid-template-columns:1fr}
  .hero-badge{position:static; display:inline-block; margin-top:16px}
  .cta-band-in{flex-direction:column; align-items:flex-start}
  .spec-table th{width:42%}
}

@media print{
  .topbar,.site-header,.cta-band,.wa-float,.to-top,.breadcrumb,.site-footer{display:none}
  body{font-size:12pt}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}