/* ==========================================================================
   FUNDEDPORTAL — KURUMSAL (corporate temeli üstüne inşa)
   Vitrindeki stil numunelerinden BEĞENİLENLER kurumsal dile uyarlandı:
     · neo-brutalism + poster → kart/düzen politikası: 2px kenar + SERT ofset
       gölge, ama siyah yerine lacivert (kurumsal ciddiyet korunuyor)
     · neumorphism → düğme konsepti: çift yönlü yumuşak ışık, basınca çöker
     · memphis → doodle aksanları, cırtlak değil ÖLÇÜLÜ (lacivert/gök/kehribar)
     · cyberpunk → telemetri paneli, neon yerine koyu lacivert gece bandı
     · kinetic-typo → dev kelime düğmeleri, imleçle akan font ağırlığı
     · hand-drawn → "Before you press anything" kontrol listesi
   TEK TİPLİKTEN KAÇIŞ: sayfa tek gövde değil, ARDIŞIK BANTLAR. Her bant
   kendi zemin rengini ve kendi metin tokenlarını taşıyor (.bant--*).
   ========================================================================== */

/* ---------- 0. YAZI TİPLERİ — KENDİ SUNUCUMUZDAN ---------- */
/* 26.08.2026 — Google Fonts CDN'i kaldırıldı; woff2 dosyaları ./font/ altında.

   NEDEN: fonts.googleapis.com (stil) ve fonts.gstatic.com (dosya) çağrıları
   her ziyaretçinin IP adresini, User-Agent'ını ve hangi sayfayı açtığını
   Google'a taşıyordu. Oysa yayınlanan iki yasal metin bunun TERSİNİ söylüyor:
   cerezler.html "There is no third-party embedded content on the marketing
   pages", gizlilik.html "nothing on this site reports your visit to a third
   party" — ve gizlilik politikasının "işleyenler" tablosunda Google hiç yok.
   Yani sitenin davranışı beyanıyla çelişiyordu; satış argümanımız tam da
   "hiçbir üçüncü taraf yok" olduğu için bu bir tutarsızlıktan fazlasıydı.
   Google Fonts CDN'i ayrıca AB'de dava konusu (LG München I, 3 O 17493/20,
   20.01.2022 — IP'nin rıza olmadan aktarılması).

   AŞAĞIDAKİ KURALLAR GOOGLE'IN ÜRETTİĞİ CSS'İN BİREBİR KOPYASI: aynı aileler,
   aynı ağırlıklar, aynı unicode-range'ler, aynı font-stretch, aynı
   font-display: swap. Görünüm değişmesin diye tek harf oynatılmadı.

   DEĞİŞTİRİRSEN NE BOZULUR:
   · SIRA ÖNEMLİ. latin-ext ile latin aralıkları U+0304/0308/0329'da
     çakışıyor; çakışmada SON kural kazanır. Google latin'i en sona koyuyor,
     biz de öyle koyduk. Sırayı bozarsan birleşen aksan işaretleri yanlış
     dosyadan gelir.
   · 'symbols' bloğu göründüğünden önemli: nav'daki ☰, listelerdeki ✓ ve ✕,
     düğmelerdeki → oku Open Sans'ın symbols alt kümesinden geliyor (ölçüldü).
     Silersen dördü de sistem yazı tipiyle çizilir — yani görünüm değişir.
   · Manrope 600 ve 800 AYNI dosyayı gösteriyor; bu bir hata değil, Google da
     öyle veriyor (değişken font, tek dosya). İki ayrı kural olarak bırakıldı:
     tek kurala 'font-weight: 600 800' yazmak aradaki ağırlıkları da
     interpolasyona açardı, bugünkü davranış ise 600/800'e kenetlenmek.

   İNDİRİLMEYENLER: cyrillic, cyrillic-ext, greek, greek-ext, vietnamese,
   hebrew, math. Bu sayfalarda o aralıklardan tek karakter yok (tarandı),
   tarayıcı da onları hiç istemiyordu — yani kaybedilen bir şey yok. Kurumsal
   sayfalara Kiril/Yunan metin girerse ilgili woff2'yi indirip buraya kural
   eklemek gerekir; yoksa o metin sistem yazı tipine düşer.

   LİSANS: üçü de SIL Open Font License 1.1 → kendi sunucumuzdan yayınlamak
   serbest. Lisans metinleri font/LISANS-*.txt olarak yanında duruyor;
   silmeyin, OFL kopyayı lisansla birlikte dağıtmayı şart koşuyor.

   ÖNBELLEK: nginx /site/... altına 10 yıllık max-age veriyor ve yayinla.mjs
   ?v= damgasını yalnız HTML'deki css/js/svg bağlarına basıyor — buradaki font
   adreslerine basmıyor. Bir font dosyasını YENİLERSEN (Google sürüm atlatırsa)
   DOSYA ADINI DA DEĞİŞTİR, yoksa eski ziyaretçi eski dosyayı almaya devam
   eder. Bugün için sorun değil: dosyalar yeni.  */

/* --- Open Sans (gövde): değişken, ağırlık 300–800 --- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('./font/open-sans-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('./font/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('./font/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Manrope (başlıklar + footer damgası): 600 ve 800, tek değişken dosya --- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./font/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./font/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./font/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./font/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Libre Franklin 600: yalnız marka wordmark'ı (BRAND-SPEC §1.4) --- */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./font/libre-franklin-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./font/libre-franklin-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. tokenlar ---------- */
:root {
  --lacivert: #1B3A6B;
  --lacivert-koyu: #142C52;
  --gece: #0F1F3A;
  --murekkep: #21293A;
  --sonuk: #4A5568;
  --gok: #7FB2EE;
  --gok-acik: #C9D6EA;
  --kehribar: #E0A93B;
  --kehribar-koyu: #7A5D1B;   /* açık zeminde METİN için (kehribar okunmaz);
                                 kum bandında ölçülen: 5.4:1 */
  --damga: #A33B3B;
  --kagit: #FFFFFF;
  --serit: #F1F3F7;
  --kum: #F7F1E4;
  --cizgi: #D8DEE9;

  /* bant içi devralınan tokenlar — .bant--* bunları eziyor */
  --b-zemin: var(--kagit);
  --b-metin: var(--murekkep);
  --b-sonuk: var(--sonuk);
  --b-cizgi: var(--cizgi);
  --b-vurgu: var(--lacivert);

  /* yıldız silueti — yorum puanlarında maske olarak kullanılıyor */
  --yildiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6l3.1 6.9 7.5.8-5.6 5 1.6 7.4L12 17.9 5.4 21.7 7 14.3l-5.6-5 7.5-.8z'/%3E%3C/svg%3E");

  /* Mürekkep kelimesinin rengi BANDA GÖRE değişiyor: paket bölümü artık
     lacivert bantta ve lacivert dolgu orada görünmez kalıyordu.
     Kalem rengi de değişken: sarı beğenilmedi, mavi aileye çekildi. */
  --ch-murekkep: var(--lacivert);
  --ch-kalem: #6FA3D8;
  --ch-enGenis-not: 'oranlar konturlarla birlikte betikten geliyor';

  --kap: 68rem;
  --sert: 5px 5px 0 var(--lacivert);      /* neo-brutal ödünç, lacivert */
  --sert-kucuk: 3px 3px 0 var(--lacivert);
  --egri: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--kagit); color: var(--murekkep);
  font: 400 16.5px/1.7 'Open Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;   /* taşan doodle/damga sayfayı yana kaydırmasın */
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.18; margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--b-vurgu); outline-offset: 3px; border-radius: 2px;
}
.gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kap { width: min(var(--kap), 100% - 2.5rem); margin-inline: auto; }

/* ---------- 2. BANT SİSTEMİ — tek tipliğe karşı ---------- */
.bant { position: relative; background: var(--b-zemin); color: var(--b-metin);
  padding-block: clamp(3.2rem, 7vw, 5.6rem); }
.bant--sik { padding-block: clamp(2rem, 4vw, 3rem); }
.bant--kagit  { --b-zemin: var(--kagit); }
.bant--serit  { --b-zemin: var(--serit); }
.bant--kum    { --b-zemin: var(--kum); --b-cizgi: #E3D9C4; }
.bant--gok    { --b-zemin: #EAF1FA; --b-cizgi: #CFDDF0; }
.bant--lacivert {
  --b-zemin: var(--lacivert); --b-metin: #fff; --b-sonuk: var(--gok-acik);
  --b-cizgi: rgba(255,255,255,.22); --b-vurgu: #fff;
  --ch-murekkep: #fff;      /* mürekkep kelimesi koyu bantta beyaz akıyor */
  --ch-kalem: #9EC5F0;      /* kalem: koyu bantta açık mavi */
}
.bant--gece {
  --b-zemin: var(--gece); --b-metin: #EAF1FA; --b-sonuk: #8FB4E0;
  --b-cizgi: #23446F; --b-vurgu: var(--kehribar);
}
/* Kehribar bant denendi ve beğenilmedi; renk haritası eski hâline döndü.
   Kural olarak duruyor ama kullanılmıyor — ileride gerekirse hazır. */
.bant--kehribar {
  /* soluk ton ölçülerek seçildi: #6B5214 kehribarda 3.49:1 kalıyordu,
     #4F3B0D 5.05:1 veriyor */
  --b-zemin: var(--kehribar); --b-metin: var(--murekkep); --b-sonuk: #4F3B0D;
  --b-cizgi: rgba(33, 41, 58, .28); --b-vurgu: var(--lacivert);
}
/* bantlar arası geçiş: düz A4 dikişi yerine eğik/kavisli ayraç */
.ayrac { display: block; width: 100%; height: clamp(28px, 4vw, 54px); }
.ayrac path { fill: var(--ayrac-renk, var(--kagit)); }

/* bant üstü ince kural çizgisi — kurumsal düzen sinyali */
.bant__cizgi { height: 3px; background: var(--b-vurgu); width: 46px; margin-bottom: 1.2rem; }

/* ---------- 3. bölüm başlıkları ---------- */
.bolum-bas { display: grid; gap: .8rem; margin-bottom: 2.4rem; max-width: 46rem; }
.etiket { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-sonuk); display: flex; align-items: center; gap: .6rem; }
.etiket b { color: var(--b-vurgu); }
h2 { font-size: clamp(24px, 3.6vw, 36px); }
.bolum-bas p { color: var(--b-sonuk); font-size: 17px; }

/* Ne olduğu şeridi: uydurma iş ortağı logolarının yerini alan olgu satırı.
   Tek satırda akan, kalın anahtar + açıklama çiftleri. */
.olcut { display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; margin-top: .9rem;
  font-size: 13.5px; color: var(--sonuk); }
.olcut span { display: inline-flex; align-items: baseline; gap: .4rem; }
.olcut b { color: var(--lacivert); font-size: 13.5px; letter-spacing: .01em; }

/* ---------- 4. NAV ---------- */
.ust-serit { background: var(--serit); font-size: 12.5px; border-bottom: 1px solid var(--cizgi); }
.ust-serit .ic { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .45rem 0; color: var(--sonuk); flex-wrap: wrap; }
.ust-serit a { color: var(--sonuk); text-decoration: none; }
.ust-serit a:hover { color: var(--murekkep); text-decoration: underline; }
.ust-serit .canli { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.ust-serit .canli i { width: 7px; height: 7px; border-radius: 50%; background: #2F8F62; }

.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi); }
.nav .ic { display: flex; align-items: center; gap: 1.4rem; min-height: 66px; }
/* MARKA İŞARETİ — terminaldeki BrandMark.vue ile aynı (BRAND-SPEC):
   kemer + altın kilit taşı, mono mantık (açık zeminde mürekkep, koyu zeminde
   fildişi; rengi currentColor taşıyor), wordmark Libre Franklin 600, .14em,
   iki tonlu: PORTAL altın. */
.logo { display: flex; align-items: center; gap: .5rem; text-decoration: none;
  color: #0C1220; margin-right: auto; }
.logo svg { width: 30px; height: 30px; flex: none; }
.marka-ad { font-family: 'Libre Franklin', 'Open Sans', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; }
.marka-ad span + span { color: #C9A96E; }
.nav-linkler { display: flex; gap: 1.4rem; }
.nav-linkler a { color: var(--sonuk); text-decoration: none; font-size: 14.5px; font-weight: 600;
  padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav-linkler a:hover, .nav-linkler a[aria-current="page"] { color: var(--lacivert); border-bottom-color: var(--kehribar); }
.nav-ac { display: none; background: none; border: 1px solid var(--cizgi); border-radius: 4px;
  width: 42px; height: 42px; cursor: pointer; font-size: 18px; color: var(--lacivert); }
@media (max-width: 860px) {
  .nav-linkler { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: #fff; border-bottom: 1px solid var(--cizgi); padding: .8rem 1.25rem 1.2rem; gap: .2rem; }
  .nav-linkler.acik { display: flex; }
  .nav-linkler a { padding: .7rem 0; border-bottom: 1px solid var(--serit); }
  .nav-ac { display: block; }
  .nav .dugme--nav { display: none; }
}

/* ---------- 5. DÜĞMELER — neumorphism uyarlaması ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.6rem; border: 0; border-radius: 10px;
  font: 700 14.5px 'Open Sans', sans-serif; letter-spacing: .01em; text-decoration: none;
  cursor: pointer; position: relative;
  transition: transform .16s var(--egri), box-shadow .16s var(--egri), background .16s var(--egri);
}
/* açık zeminde: yumuşak kabartma (soft UI) */
.dugme--yumusak {
  background: var(--lacivert); color: #fff;
  box-shadow: 6px 6px 14px rgba(20,44,82,.28), -5px -5px 12px rgba(255,255,255,.9);
}
.dugme--yumusak:hover { background: var(--lacivert-koyu); transform: translateY(-1px); }
.dugme--yumusak:active {
  transform: translateY(1px);
  box-shadow: inset 5px 5px 11px rgba(11,26,50,.55), inset -4px -4px 10px rgba(90,130,190,.35);
}
/* nötr yumuşak: zeminle aynı renk, formu ışık veriyor */
.dugme--hafif {
  background: var(--serit); color: var(--lacivert);
  box-shadow: 5px 5px 12px rgba(27,58,107,.14), -4px -4px 10px rgba(255,255,255,.95);
}
.dugme--hafif:hover { background: #E8ECF3; }
.dugme--hafif:active { box-shadow: inset 4px 4px 9px rgba(27,58,107,.18), inset -3px -3px 8px #fff; }
/* koyu bantta ters ışık */
.bant--lacivert .dugme--hafif, .bant--gece .dugme--hafif {
  background: rgba(255,255,255,.1); color: #fff;
  box-shadow: 5px 5px 12px rgba(0,0,0,.35), -4px -4px 10px rgba(255,255,255,.09);
}
.dugme--beyaz { background: #fff; color: var(--lacivert);
  box-shadow: 6px 6px 14px rgba(0,0,0,.28), -4px -4px 10px rgba(255,255,255,.14); }
.dugme--beyaz:hover { background: var(--gok-acik); }
.dugme--beyaz:active { transform: translateY(1px);
  box-shadow: inset 4px 4px 10px rgba(27,58,107,.3), inset -3px -3px 8px rgba(255,255,255,.7); }
.dugme--cerceve { background: transparent; color: var(--b-metin);
  box-shadow: inset 0 0 0 1.5px var(--b-cizgi); }
.dugme--cerceve:hover { box-shadow: inset 0 0 0 1.5px var(--b-metin); }
.dugme--nav { min-height: 42px; padding: .5rem 1.15rem; font-size: 13.5px; }

/* ---------- 6. KART POLİTİKASI — neo-brutal/poster uyarlaması ---------- */
.kart {
  background: #fff; border: 2px solid var(--lacivert); border-radius: 10px;
  box-shadow: var(--sert); padding: 1.5rem;
  transition: transform .18s var(--egri), box-shadow .18s var(--egri);
}
.kart:where(a, button) { display: block; text-decoration: none; }
.kart--tik:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--lacivert); }
.kart--tik:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--lacivert); }
.bant--lacivert .kart, .bant--gece .kart {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.4);
  box-shadow: 5px 5px 0 rgba(255,255,255,.18); color: #fff;
}
.kart__ust { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sonuk); border-bottom: 1.5px solid var(--cizgi); padding-bottom: .7rem; margin-bottom: .9rem; }
.bant--lacivert .kart__ust, .bant--gece .kart__ust { color: var(--gok-acik); border-color: rgba(255,255,255,.25); }
.kart h3 { font-size: 17.5px; margin-bottom: .35rem; }
.kart p { color: var(--sonuk); font-size: 14.5px; }
.bant--lacivert .kart p, .bant--gece .kart p { color: var(--gok-acik); }
.izgara { display: grid; gap: 1.2rem; }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .izgara--3 { grid-template-columns: 1fr; } .izgara--2 { grid-template-columns: 1fr; } }

/* ---------- 7. MÜREKKEP DAMGASI ---------- */
.damga {
  --d-renk: var(--damga);
  position: relative; display: inline-grid; place-items: center; gap: .1rem;
  padding: .7rem 1.1rem; rotate: -7deg;
  color: var(--d-renk); border: 3px double var(--d-renk); border-radius: 6px;
  font: 800 13px/1.15 'Open Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; mix-blend-mode: multiply; opacity: .95;
  /* Mürekkebin kâğıda düzensiz oturması: maske YALNIZ dokuyu veriyor, gövdeyi
     yemiyor. ÖLÇÜLEN HATA: alfa katsayısı -1.6 iken maske ortalama %25
     opaklık bırakıyor ve damga hayalet gibi görünüyordu. -0.55/1.18 ile
     çoğunluk opak kalıyor, kırılma yalnız kenarlarda beliriyor. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.55 1.18'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.55 1.18'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size: 140px; mask-size: 140px;
}
.damga b { font-size: 19px; letter-spacing: .06em; }
.damga small { font-size: 9.5px; letter-spacing: .16em; opacity: .9; }
.bant--lacivert .damga, .bant--gece .damga { --d-renk: #FFB3B3; mix-blend-mode: screen; opacity: 1; }
/* hero'da serbest yerleşim */
.damga--serbest { position: absolute; right: clamp(.5rem, 3vw, 2.5rem); bottom: -1.4rem; z-index: 3; }

/* ---------- 8. DOODLE'LAR — memphis uyarlaması, ölçülü ---------- */
.doodle { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
.doodle svg { width: 100%; height: auto; }
/* İçerik kabı en çok 68rem (~1088px). Pencere bundan dar olduğunda kenarda
   boş kenar payı kalmıyor ve doodle metnin altına giriyordu (ölçülen kusur).
   Süs, ancak yeri varsa görünür. */
@media (max-width: 1280px) { .doodle { display: none; } }
/* Çok hafif süzülme: hareketi hissediyorsun, fark etmiyorsun. Üçü farklı
   süre ve gecikmeyle gidiyor, yoksa birlikte nefes alıp "animasyon" oluyor. */
@media (prefers-reduced-motion: no-preference) {
  .hero .doodle { animation: suzul 17s ease-in-out infinite alternate; }
  .hero .doodle:nth-of-type(2) { animation-duration: 23s; animation-delay: -6s; }
  .hero .doodle:nth-of-type(3) { animation-duration: 29s; animation-delay: -13s; }
}
@keyframes suzul { to { transform: translate3d(6px, -9px, 0) rotate(1.4deg); } }
.bant > .kap { position: relative; z-index: 1; }

/* ---------- 9. YATAY KAYAN ŞERİT (full body) ---------- */
.serit-bant { background: var(--lacivert); color: #fff; overflow: hidden;
  border-block: 3px solid var(--lacivert-koyu); padding: .8rem 0; }
.serit-bant--kehribar { background: var(--kehribar); color: var(--murekkep); border-color: #C79130; }
.serit-ic { display: inline-flex; white-space: nowrap; will-change: transform; }
.serit-ic > span { display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem;
  font: 700 15px 'Open Sans', sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.serit-ic .nokta { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .serit-ic { animation: kaydir var(--sure, 38s) linear infinite; }
  /* hover'da DURMUYOR — yorum şeridiyle aynı davranış (kullanıcı isteği) */
}
@keyframes kaydir { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 10. HERO (rework) ---------- */
.hero { position: relative; overflow: hidden; }
/* Yavaş ışık süpürmesi: lacivert zeminin üstünden çok düşük opaklıkta geniş
   bir aydınlık geçiyor. Amaç dikkat çekmek değil, yüzeyin "ölü" durmaması. */
@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 55%;
    left: -60%; pointer-events: none; z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.055) 45%, transparent);
    animation: isikSupur 19s ease-in-out infinite;
  }
}
@keyframes isikSupur {
  0%   { left: -60%; }
  55%  { left: 105%; }
  100% { left: 105%; }
}
/* göz kırpan canlılık işareti: göz kaşındaki nokta */
@media (prefers-reduced-motion: no-preference) {
  .gozkasi i { animation: nokta-nabiz 2.6s ease-out infinite; }
}
@keyframes nokta-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(224,169,59,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(224,169,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,169,59,0); }
}
.hero .kap { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center; padding-block: clamp(2.6rem, 6vw, 4.4rem); }
@media (max-width: 960px) { .hero .kap { grid-template-columns: 1fr; } }
.hero-metin { display: grid; gap: 1.2rem; justify-items: start; }
.hero h1 { font-size: clamp(30px, 4.6vw, 50px); }
.hero h1 .vurgu { color: var(--kehribar); }
.hero .oncu { color: var(--gok-acik); font-size: 17.5px; max-width: 34rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-olcu { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: .4rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.2); width: 100%; }
.hero-olcu div { display: grid; }
.hero-olcu b { font-size: 21px; font-variant-numeric: tabular-nums; }
.hero-olcu small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gok-acik); }
.hero-gorsel { position: relative; }
.hero-gorsel img { width: 100%; height: auto; border-radius: 12px; }

/* ---------- 11. TELEMETRİ — cyberpunk uyarlaması (gece bandı) ---------- */
/* İki panel EŞİT YÜKSEKLİK: align-items:start ile ölçülen fark 293/315 px'ti
   ve iki kutu birbirine göre kırpılmış gibi duruyordu. stretch + flex kolon:
   boyu içerik değil ızgara belirliyor, boşluk kayıt alanına veriliyor. */
.telemetri { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; align-items: stretch; }
@media (max-width: 900px) { .telemetri { grid-template-columns: 1fr; } }
.tel-panel { border: 1.5px solid var(--b-cizgi); border-radius: 10px; padding: 1.3rem 1.4rem;
  background: rgba(255,255,255,.03); position: relative;
  display: flex; flex-direction: column; }
/* HUD köşe krokileri */
.tel-panel::before, .tel-panel::after { content: ''; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--kehribar); }
.tel-panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.tel-panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.tel-bas { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font: 700 11px 'Open Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase;
  color: var(--b-sonuk); margin-bottom: 1rem; }
.tel-canli { display: inline-flex; align-items: center; gap: .45rem; color: #6FDBA6; }
.tel-canli i { width: 8px; height: 8px; border-radius: 50%; background: #6FDBA6; }
@media (prefers-reduced-motion: no-preference) { .tel-canli i { animation: nabiz 2s ease-out infinite; } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(111,219,166,.55); } 100% { box-shadow: 0 0 0 10px rgba(111,219,166,0); } }
.tel-deger { font: 700 clamp(28px, 4vw, 40px)/1.1 'Open Sans', sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tel-alt { font-size: 12.5px; color: var(--b-sonuk); margin-top: .2rem; }
.tel-satir { margin-top: 1.1rem; }
.tel-satir__ust { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 12.5px; color: var(--b-sonuk); margin-bottom: .4rem; }
.tel-satir__ust b { font-size: 16px; color: var(--b-metin); font-variant-numeric: tabular-nums; }
.olcek { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.olcek i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gok);
  transition: width 1.1s var(--egri); }
.olcek--uyari i { background: var(--kehribar); }
/* Kayıt akışı ALTTAN YUKARI: en yeni satır en altta. Bu yüzden alan büyüyor
   (flex:1) ve satırlar alta yapışıyor (align-content:end) — terminal tail'i
   gibi: yeni satır altta doğuyor, eskiler yukarı süzülüyor. */
.tel-kayit { font: 400 12.5px/1.9 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color: var(--b-sonuk); display: grid; gap: 0;
  flex: 1 1 auto; align-content: end; }
.tel-kayit span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tel-kayit b { color: var(--kehribar); font-weight: 600; }
/* margin-top:auto → sol panelin dip satırı sağ panelin dibiyle hizalanıyor */
.tel-mini { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: auto; padding-top: 1rem;
  font: 600 11.5px 'Open Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--b-sonuk); }

/* ---------- 11b. ENSTRÜMAN TAPE (03'ün içinde, TAM SAYFA) ---------- */
/* Terminal tape'i: kenardan kenara akan fiyat satırı, panellerin üstünde.
   Etiket kaldırıldı (kullanıcı isteği); "örnek değer" bilgisini bölüm
   girişindeki cümle ve aria-label taşıyor. Akış tam sayfa şeritlerle aynı
   motoru kullanıyor (.serit-ic + kaydir), ikizleme JS'te otomatik.
   Kabın DIŞINDA duruyor (bkz. HTML): 100vw hilesi yatay taşma üretiyordu. */
.tape { margin: 0 0 1.6rem; border-block: 1px solid var(--b-cizgi);
  background: rgba(255,255,255,.04); overflow: hidden; }
.tape__pencere { overflow: hidden; display: flex; align-items: center; min-width: 0;
  padding-block: .5rem; }
.tape .serit-ic > span {
  font: 400 12.5px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: 0; text-transform: none; gap: 1.5rem; padding-right: 1.5rem;
  color: var(--b-sonuk); }
.tape__oge { display: inline-flex; align-items: baseline; gap: .45rem; }
.tape__oge b { font: 700 11.5px 'Open Sans', sans-serif; letter-spacing: .06em;
  color: #EAF1FA; }
.tape__oge span { font-variant-numeric: tabular-nums; color: #C9D6EA; }
.tape__oge i { font-style: normal; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.tape__oge i.arti { color: #6FDBA6; }
.tape__oge i.eksi { color: #E8836F; }   /* ölçüldü: gece zemininde 5.6:1 */

/* ---------- 12. CHOOSE YOUR ___ (canlı siteden taşınan mürekkep animasyonu) ---------- */
/* h2 BLOK kalmalı: flex yapılınca .ch-yuva bir flex öğesi olur ve
   vertical-align etkisini yitirir — kelime taban çizgisinden yukarı kayıyordu
   (ölçülen hata). Satır içi akış korunuyor.
   NOT: eski .sec-bas kancası 02 geri alınırken sayfadan kalkmıştı ve buradaki
   kurallar sessizce ölmüştü; artık başlığın kendi sınıfı var.
   Tamamen KALIN: SVG kelime konturları Manrope 600'den üretilmişti, yanındaki
   "Choose your" ise Open Sans 700 — ağırlık farkı gözü rahatsız ediyordu. */
/* FONT UYUMU: SVG kelime konturları Manrope 600'den üretilmiş; "Choose your"
   Open Sans olduğu için iki ayrı yazı tipi yan yana duruyordu. Başlık da
   Manrope'a alındı — artık aynı harf iskeleti. */
.ch-baslik { position: relative; font-family: Manrope, 'Open Sans', sans-serif;
  font-size: clamp(26px, 5vw, 46px); font-weight: 800; letter-spacing: -.02em; }

/* IŞIK KATMANI YOK — bilinçli. Üç deneme (kutu süpürmesi, gradyan hüzme,
   harf harf neon çerçeve) beğenilmedi; ışıksız çizim daha şık bulundu.
   Kaldırılanlar: .ch-arka (arka parıltı), .parla sınıfı, @keyframes chGlow,
   .ch-isik (klon katman). Tekrar denenecekse JS'teki nota bakın. */
/* Ölçüler canlı sitedeki değerlerle aynı: SVG'nin içinde zaten
   <g transform="scale(0.5)"> var, bu yüzden CSS'te İKİNCİ bir yarılama
   yapılmamalı — kelimeler o yüzden küçük kalıyordu. */
.ch-yuva { position: relative; display: inline-block;
  height: .99em; width: calc(.99em * var(--enGenis, 4.73));
  vertical-align: -.255em;          /* üç kelimede ortak taban çizgisi */
  margin-left: .26em; }             /* "Choose your" ile arasında nefes payı */
.ch-cizim { position: absolute; left: 0; top: 0; height: 100%;
  width: calc(.99em * var(--oran, 4.73)); overflow: visible; }
/* Konturlar artık GERÇEK Manrope 800'den üretiliyor (fontTools ile, değişken
   fontun 800 örneği). Kalınlığı kontur ekleyerek taklit etmek bırakıldı:
   kontur harfin içine de bastığı için kapalı gözlü harfler (g, e, a) şişiyor,
   düz gövdeler (l, i, r) ince kalıyordu — kullanıcının gördüğü dengesizlik
   buydu. Kontur şimdi yalnız çizim fazının kalemi: ince bir tel. */
.ch-cizim path {
  fill: var(--ch-murekkep); stroke: var(--ch-murekkep);
  stroke-width: 26;                 /* path'in kendi 2000/em uzayında ≈ hairline */
  stroke-linejoin: round;
}
/* JS yoksa/hareket kapalıysa: yalnız ilk kelime, dolu hâlde durur */
.ch-cizim + .ch-cizim { opacity: 0; }
.ch-cizim path { stroke-opacity: 1; fill-opacity: 1; }

/* ---------- 12b. SÜREÇ ADIMLARI (02) ---------- */
.adimlar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; padding-top: 2.4rem; }
/* adımlar arası bağlantı çizgisi — kartların üstünden geçiyor */
.adimlar__hat { position: absolute; top: .9rem; left: 8%; width: 84%; height: 12px; }
.adimlar__hat #surecHatDolu { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.adimlar__hat.cizildi #surecHatDolu { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1); }
@media (max-width: 900px) {
  .adimlar { grid-template-columns: 1fr; padding-top: 0; }
  .adimlar__hat { display: none; }
}
.adim { position: relative; background: #fff; border: 2px solid var(--lacivert);
  border-radius: 10px; box-shadow: var(--sert); padding: 1.5rem 1.4rem 1.4rem;
  display: grid; gap: .55rem; align-content: start; color: var(--lacivert); }
.adim__no { position: absolute; top: -1.1rem; left: 1.3rem;
  background: var(--lacivert); color: #fff; border-radius: 6px; padding: .25rem .6rem;
  font: 700 12.5px ui-monospace, monospace; letter-spacing: .08em; }
.adim__ikon { width: 40px; height: 40px; margin-bottom: .2rem; }
.adim h3 { font-size: 18px; color: var(--murekkep); }
.adim p { color: var(--sonuk); font-size: 14.5px; }
.adim__not { border-top: 1px dashed var(--cizgi); padding-top: .55rem; margin-top: .2rem;
  font-size: 13.5px; }
.surec__alt { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- 12c. DURUŞ BLOĞU (04 · what this is / isn't) ---------- */
.durus__liste { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.durus__liste li { display: flex; align-items: flex-start; gap: .65rem; font-size: 14.5px;
  color: var(--sonuk); line-height: 1.55; }
.durus__liste li strong { color: var(--murekkep); }
.durus__liste li b { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  margin-top: .1rem; }
.durus__liste--var li b { background: #1E6B47; }   /* beyaz üstünde ölçüldü */
.durus__liste--yok li b { background: var(--damga); }
.durus__kapanis { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 1.8rem; }
.durus__kapanis p { color: var(--sonuk); font-size: 15px; max-width: 44rem; }

/* ---------- 13. ROTA KARTLARI ---------- */
.rota-fiyat { font-size: 27px; font-weight: 700; color: var(--lacivert); font-variant-numeric: tabular-nums; }
.rota-liste { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: 14px; }
.rota-liste li { display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px dashed var(--cizgi); padding-bottom: .45rem; }
.rota-liste b { font-variant-numeric: tabular-nums; }
.rota-etiket { display: inline-block; font: 700 10.5px 'Open Sans', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; background: var(--kehribar); color: var(--murekkep);
  padding: .25rem .6rem; border-radius: 3px; }

/* ---------- 14. KONTROL LİSTESİ — hand-drawn uyarlaması ---------- */
.kontrol { display: grid; gap: .8rem; }
.kontrol__oge {
  display: flex; align-items: flex-start; gap: .9rem; text-align: left; width: 100%;
  background: #fff; border: 2px solid var(--lacivert); border-radius: 8px;
  box-shadow: var(--sert-kucuk); padding: .95rem 1.1rem; cursor: pointer;
  font: inherit; color: inherit;
  transition: transform .16s var(--egri), box-shadow .16s var(--egri), background .16s var(--egri);
}
.kontrol__oge:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--lacivert); }
.kontrol__kutu { flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid var(--lacivert);
  border-radius: 4px; display: grid; place-items: center; background: #fff; }
.kontrol__kutu svg { width: 20px; height: 20px; stroke: var(--kehribar-koyu); fill: none;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; }
.kontrol__oge[aria-pressed="true"] { background: var(--kum); }
.kontrol__oge[aria-pressed="true"] .kontrol__kutu svg { stroke-dashoffset: 0;
  transition: stroke-dashoffset .35s var(--egri); }
.kontrol__metin b { display: block; font-size: 15.5px; }
.kontrol__metin span { color: var(--sonuk); font-size: 14px; }
.kontrol__sonuc { margin-top: 1.1rem; font-size: 14.5px; font-weight: 600; color: var(--lacivert);
  display: flex; align-items: center; gap: .6rem; }
.kontrol__sonuc .say { font-variant-numeric: tabular-nums; }
/* Küçük ekranda 05'in görseli GİZLİ (kullanıcı kararı). Sebep: ızgara tek
   kolona düştüğünde bu görsel listenin altına yetim bir blok olarak iniyordu
   (ölçüldü: 768px'te 460 px) ve hero'daki görselin AYNISI olduğu için
   tekrardan başka bir şey eklemiyordu. Kırılma noktası .izgara--2 ile aynı,
   yoksa gizlendiği an ile tek kolona düştüğü an ayrışır. */
@media (max-width: 900px) { .kontrol-gorsel { display: none; } }

/* ---------- 15. KİNETİK KELİME DÜĞMELERİ ---------- */
.kelimeler { display: grid; gap: .2rem; }
/* ÖLÇÜLEN UYUMSUZLUK: ağırlık font-variation-settings ile sürülüyordu ve
   custom property @property ile kayıtlı olmadığı için bazı Chromium
   dağıtımlarında (Opera) hiç uygulanmıyordu. Artık doğrudan font-weight —
   değişken fontta her yerde çalışıyor ve interpolasyonu tarayıcı yapıyor. */
.kelime {
  display: inline-block; text-decoration: none; width: fit-content;
  font-family: 'Open Sans', sans-serif; font-size: clamp(38px, 9vw, 104px);
  line-height: .98; letter-spacing: -.02em; color: var(--b-metin);
  font-weight: 400;
}
/* GEÇİŞ YOK — bilerek: ağırlığı rAF her karede yeniden yazıyor, üstüne
   transition koymak hem gereksiz hem de bazı tarayıcılarda değerin geride
   kalmasına yol açıyordu (ölçüldü: geçiş varken hesaplanan değer başlangıçta
   takılı kalıyor). Yumuşaklığı kare akışı sağlıyor. */
.kelime .harf { display: inline-block; font-weight: 400; }
.kelime .ok { font-size: .3em; vertical-align: .5em; margin-left: .2em; color: var(--kehribar); }
.kelime:hover { color: var(--b-vurgu); }
.kelimeler__not { color: var(--b-sonuk); font-size: 14.5px; margin-top: 1rem; max-width: 30rem; }

/* ---------- 16. PAKET KARTI (standart veri) ---------- */
.paket { max-width: 30rem; background: #fff; border: 2px solid var(--lacivert);
  border-radius: 10px; box-shadow: var(--sert); overflow: hidden; }
.paket__bas { background: var(--serit); border-bottom: 2px solid var(--lacivert); padding: 1.1rem 1.4rem; }
.paket__bas h3 { font-size: 18px; color: var(--lacivert); }
.paket__bas small { color: var(--sonuk); font-size: 12.5px; }
.paket ul { list-style: none; margin: 0; padding: .4rem 1.4rem; font-size: 14.5px; }
.paket li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
  border-bottom: 1px solid var(--serit); }
.paket li:last-child { border-bottom: 0; }
.paket li b { font-variant-numeric: tabular-nums; }
.paket__alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .9rem 1.4rem 1.3rem; border-top: 2px solid var(--lacivert); }
.paket__fiyat { font-size: 31px; font-weight: 700; color: var(--lacivert); font-variant-numeric: tabular-nums; }
.paket__fiyat small { display: block; font-size: 11.5px; font-weight: 400; color: var(--sonuk); }

/* ---------- 16b. DETAYLI PAKET SEÇİCİ (ortak/paketler.js iskeleti) ----------
   Canlı sitedeki "Detailed" görünümün kurumsal derisi: rota/profil/büyüklük
   sekmeleri + faz kolonlu kural tablosu + altta büyüklük·fiyat·başlat.
   Markup ortak dosyadan geliyor; burada YALNIZ giydiriliyor — konsept
   sapmasın diye kart politikası (2px kenar + sert ofset gölge) korunuyor. */
.pk-kumanda { display: grid; gap: .8rem; margin-bottom: 1.4rem; }
/* Üç sekme sırası da ORTALI: rota, profil ve hesap büyüklüğü — tablo geniş
   olduğu için ortalanmış kumanda başlık kolonlarıyla hizalı duruyor. */
.pk-grup { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pk-sekme {
  cursor: pointer; text-align: left; font: 700 13.5px/1.2 'Open Sans', sans-serif;
  background: #fff; color: var(--lacivert); border: 2px solid var(--lacivert);
  border-radius: 8px; box-shadow: var(--sert-kucuk); padding: .55rem .95rem;
  min-height: 46px; display: grid; gap: 1px;
  transition: transform .16s var(--egri), box-shadow .16s var(--egri),
    background .16s var(--egri), color .16s var(--egri);
}
.pk-sekme small { font-weight: 400; font-size: 11.5px; color: var(--sonuk); }
.pk-sekme:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--lacivert); }
.pk-sekme:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lacivert); }
.pk-sekme[aria-selected="true"] { background: var(--lacivert); color: #fff; }
.pk-sekme[aria-selected="true"] small { color: var(--gok-acik); }
.pk-grup--boyut .pk-sekme { font-size: 15px; font-variant-numeric: tabular-nums; }

/* ÖLÇÜLEN HATA: panel BEYAZ bir kart ama koyu bantta metin rengini banttan
   devralıyordu (--b-metin: #fff) — tablodaki bütün sayılar beyaz üstünde
   beyaz kalıyordu, 21 öğe 1:1 kontrastta. Kart kendi mürekkebini dayatıyor. */
.pk-panel { border: 2px solid var(--lacivert); border-radius: 10px; box-shadow: var(--sert);
  background: #fff; overflow: hidden; color: var(--murekkep); }
.pk-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pk-tablo th, .pk-tablo td { padding: .7rem .9rem; text-align: center;
  border-bottom: 1px solid var(--cizgi); }
.pk-tablo thead th { background: var(--serit); color: var(--lacivert);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid var(--lacivert); }
.pk-tablo th[scope="row"], .pk-tablo .pk-tablo__ad { text-align: left; color: var(--sonuk);
  font-weight: 600; }
.pk-tablo td { font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-tablo tbody tr:last-child th, .pk-tablo tbody tr:last-child td { border-bottom: 0; }
/* MASTER kolonu: değerlendirme fazlarıyla karışmasın — sol kenarda kalın
   ayraç, ayrı zemin tonu ve başlıkta alt etiket. */
.pk-tablo .pk-master { border-left: 3px solid var(--lacivert); background: #EAF1FA; }
.pk-tablo thead .pk-master { background: var(--lacivert); color: #fff; }
.pk-tablo thead .pk-master small { display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; color: var(--gok-acik); text-transform: none; margin-top: 2px; }
.pk-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 1rem 1.1rem 1.1rem; border-top: 2px solid var(--lacivert);
  background: var(--serit); }
.pk-alt__bilgi { display: flex; gap: 2rem; }
.pk-alt__cift { display: grid; }
.pk-alt__cift small { font: 700 10.5px 'Open Sans', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sonuk); }
.pk-alt__cift b { font-size: 26px; color: var(--lacivert); font-variant-numeric: tabular-nums; }
/* ÖDÜL ANAHTARI — fiyatın sağında, açık = iki haftalık (%80, varsayılan),
   kapalı = haftalık (%70). Fiyata dokunmuyor: burada seçilen şey ödül talep
   döngüsü, satın alınan şey değil. Etkin oran koyulaşıyor ki hangi tarafta
   olduğun tek bakışta belli olsun. */
/* Fiyattan AYRI dursun: alt satırda fiyatın altına binince $69 ile %70
   birbirine karışıyordu. Grup sağa kaydırıldı, masaüstünde tablonun PHASE 1
   kolonunun altına denk geliyor. */
/* PHASE 1 hizası için 12vw denendi ve aradaki boşluk "hata gibi" duruyordu
   (kullanıcı); pay yarıya indi: fiyattan ayrı ama kopuk değil.
   DİKEY RİTİM ACCOUNT SIZE / PRICE İKİLİSİYLE BİREBİR: etiket satırı + değer
   satırı, arada boşluk YOK. Önce .2rem vardı ve blok $69'dan aşağı kayıyordu. */
.pk-odul { display: grid; gap: 0; margin-left: clamp(0rem, 5vw, 4.5rem); }
.pk-odul > small { font: 700 10.5px 'Open Sans', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sonuk); }
.pk-odul__ic { display: flex; align-items: center; gap: .5rem; }
/* Yüzdeler FİYATLA AYNI PUNTO: 17px iken orantısız kalıyordu (kullanıcı).
   Satır yüksekliği de .pk-alt__cift b ile aynı olmalı, yoksa taban çizgileri
   kayıyor — ölçüldü. */
.pk-odul__ic b { font: 700 25px/1.768 'Open Sans', sans-serif; color: var(--sonuk);
  /* 25px: fiyatla AYNI puntoda (26) bile büyük görünüyordu — '%' işareti
     Open Sans'ta '$' ve rakamlardan daha yüksek oturuyor, göz onu daha iri
     okuyor (kullanıcı fark etti). Bir punto kısıldı.
     1.768 = 44.2 / 25: satır kutusu fiyatın kutusuyla AYNI kalıyor
     (26 × 1.7 = 44.2), yoksa punto düşerken taban çizgisi 1px kayıyordu. */
  font-variant-numeric: tabular-nums; transition: color .18s; }
.pk-odul__ic b.etkin { color: var(--lacivert); }
/* döngü yazısı yüzdelerin sağında; sayılarla karışmasın diye ince ve küçük */
.pk-odul__dongu { margin-left: .45rem; font: 400 11.5px 'Open Sans', sans-serif;
  letter-spacing: 0; text-transform: none; color: var(--sonuk); white-space: nowrap; }
/* anahtar küçüldü: yüzdeler büyüyünce 46×26 iri duruyordu, sayıların yanında
   yardımcı bir kumanda olarak kalmalı */
.pk-anahtar { width: 38px; height: 21px; flex: none; cursor: pointer; padding: 0;
  border: 2px solid var(--lacivert); border-radius: 999px; background: #fff;
  position: relative; transition: background .18s; }
.pk-anahtar i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--lacivert); transition: transform .18s var(--egri); }
.pk-anahtar.acik { background: var(--lacivert); }
.pk-anahtar.acik i { background: #fff; transform: translateX(17px); }
@media (max-width: 620px) { .pk-alt__bilgi { gap: 1.2rem; flex-wrap: wrap; } }

.pk-dugme {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  background: var(--lacivert); color: #fff; border-radius: 10px; padding: .75rem 1.5rem;
  text-decoration: none; font: 700 14.5px 'Open Sans', sans-serif;
  box-shadow: 6px 6px 14px rgba(20,44,82,.28), -4px -4px 10px rgba(255,255,255,.85);
  transition: transform .16s var(--egri), box-shadow .16s var(--egri), background .16s var(--egri);
}
.pk-dugme:hover { background: var(--lacivert-koyu); transform: translateY(-1px); }
.pk-dugme:active { transform: translateY(1px);
  box-shadow: inset 5px 5px 11px rgba(11,26,50,.55), inset -4px -4px 10px rgba(90,130,190,.3); }
.pk-not { color: var(--sonuk); font-size: 13px; margin-top: 1rem; max-width: 48rem; }
/* Paket bölümü lacivert banda taşındı: ödeme öncesi not orada okunur kalmalı
   (regülasyon tarafı bu metnin görünürlüğünü şart koşuyor). */
.bant--lacivert .pk-not { color: #EAF1FA; }
/* Kumanda ve panel beyaz kaldığı için sert gölge lacivert zeminde kayboluyordu;
   koyu bantta gölge beyaza dönüyor. */
.bant--lacivert .pk-sekme { box-shadow: 3px 3px 0 rgba(255,255,255,.35); }
.bant--lacivert .pk-sekme:hover { box-shadow: 5px 5px 0 rgba(255,255,255,.45); }
.bant--lacivert .pk-sekme:active { box-shadow: 1px 1px 0 rgba(255,255,255,.35); }
/* SEÇİLİ SEKME — sarı çerçeve kaldırıldı (kullanıcı rahatsız oldu).
   Yerine mavi ailenin içinde kalan iki sinyal: gök mavisi ofset gölge +
   içeride lacivert halka. Seçili olan tek bakışta belli oluyor ama bant
   kehribardan arınmış kalıyor. */
.bant--lacivert .pk-sekme[aria-selected="true"] {
  background: #fff; color: var(--lacivert); border-color: #fff;
  box-shadow: 3px 3px 0 var(--gok), inset 0 0 0 2px var(--lacivert);
}
.bant--lacivert .pk-sekme[aria-selected="true"] small { color: var(--sonuk); }
.bant--lacivert .pk-panel { box-shadow: 5px 5px 0 rgba(255,255,255,.35); border-color: #fff; }
@media (max-width: 620px) {
  .pk-tablo { font-size: 13.5px; }
  .pk-tablo th, .pk-tablo td { padding: .6rem .5rem; }
  .pk-alt__bilgi { gap: 1.2rem; }
}

/* ---------- 16c. YORUM ŞERİDİ (tam genişlik, görselli, yatay akan) ---------- */
/* Yorum şeridi artık BEYAZ slotta (renk haritası korunuyor, içerik kaydı):
   zemin ve kenardaki erime rengi de ona göre. */
.yorumlar { background: var(--kagit); border-block: 1px solid var(--cizgi);
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem); overflow: hidden; }
.yorumlar .kap { margin-bottom: 1.2rem; }
/* ÖLÇÜLEN HATA: kartlar alta hizalı olduğu için kartın dibi şeridin dibiyle
   çakışıyordu (pay 0 px) ve 3 px'lik sert gölge overflow:hidden ile kesiliyor,
   kart "kırpılmış" duruyordu. Alt/sağ payı gölge kalınlığından fazla. */
.yorum-serit { overflow: hidden; position: relative; padding-bottom: 6px; }
/* Giriş ve çıkışta hafif blur + zemine erime: kartlar kenarda kesilmiş gibi
   durmasın. Blur'un kendisi de maskeyle soluyor, yoksa kenarda keskin bir
   buzlu şerit çizgisi oluşuyor. backdrop-filter desteklenmezse gradyan
   tek başına erimeyi veriyor. */
.yorum-serit::before, .yorum-serit::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: clamp(44px, 8vw, 120px);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.yorum-serit::before {
  left: 0;
  background: linear-gradient(90deg, var(--kagit) 12%, transparent);
  -webkit-mask: linear-gradient(90deg, #000 35%, transparent);
  mask: linear-gradient(90deg, #000 35%, transparent);
}
.yorum-serit::after {
  right: 0;
  background: linear-gradient(270deg, var(--kagit) 12%, transparent);
  -webkit-mask: linear-gradient(270deg, #000 35%, transparent);
  mask: linear-gradient(270deg, #000 35%, transparent);
}
.yorum-ic { display: inline-flex; white-space: nowrap; will-change: transform; }
/* flex-end: kartlar ALTA sabit, yukarı doğru uzuyor — genişlik hepsinde aynı,
   değişen tek şey boy. */
.yorum-ic > span { display: inline-flex; align-items: flex-end; gap: 1rem; padding-right: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .yorum-ic { animation: kaydir var(--sure, 54s) linear infinite; }
  /* hover'da DURMUYOR (kullanıcı isteği) — akış kesintisiz */
}
.yorum {
  white-space: normal; width: var(--w, 21rem); flex: 0 0 auto;
  background: #fff; border: 2px solid var(--lacivert); border-radius: 10px;
  box-shadow: var(--sert-kucuk); padding: 1.05rem 1.15rem;
  display: grid; gap: .6rem; align-content: start; margin: 0;
}
/* Genişlik artık hepsinde AYNI (--w: 21rem, A. Kaya kartının ölçüsü);
   kısa/uzun sınıfları yalnız metin uzunluğunu işaretliyor, boyu onlar
   belirliyor. Genişlik farkı kullanıcı isteğiyle kaldırıldı. */
.yorum__ust { display: flex; align-items: center; gap: .7rem; }
.yorum__resim { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; }
.yorum__kim { display: grid; min-width: 0; }
.yorum__kim b { font-size: 14.5px; }
.yorum__kim small { color: var(--sonuk); font-size: 11.5px; }
/* ölçüldü: #2F8F62 beyazda 4.02:1 — 11.5px metin için yetersizdi */
.yorum__kim small i { color: #1E6B47; font-style: normal; font-weight: 700; }
/* kaynak işareti: Trustpilot / Google — yalnız TASARIM İNCELEMESİ için.
   Yayına giderken iki koşul zorunlu: (1) gösterilen yorumlar gerçekten o
   platformdan toplanmış olacak, (2) marka kullanımı platformun kendi
   kılavuzuna uyacak. Uydurma yorumun üstünde bu işaretler kalamaz. */
.yorum__kaynak { margin-left: auto; display: flex; align-items: center; gap: .3rem;
  font: 700 11px 'Open Sans', sans-serif; color: var(--murekkep); white-space: nowrap; }
.yorum__kaynak svg { width: 16px; height: 16px; flex: 0 0 auto; }
.yorum__satir { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.yorum__yildiz { display: inline-flex; gap: 2px; }
.yorum__yildiz i { display: block; width: 17px; height: 17px; }
/* Trustpilot: beyaz yıldızlı yeşil kutu · Google: altın yıldız */
.yorum__yildiz--tp i { background: #00B67A; }
.yorum__yildiz--tp i.bos { background: #DCDCE6; }
.yorum__yildiz--tp i, .yorum__yildiz--tp i.bos {
  -webkit-mask: var(--yildiz) center/13px 13px no-repeat; mask: var(--yildiz) center/13px 13px no-repeat;
  background-clip: padding-box;
}
.yorum__yildiz--tp i { border-radius: 2px; }
.yorum__yildiz--g i { background: #F5B400; -webkit-mask: var(--yildiz) center/16px 16px no-repeat;
  mask: var(--yildiz) center/16px 16px no-repeat; }
.yorum__yildiz--g i.bos { background: #D6D9DE; }
.yorum__puan { font: 700 12px 'Open Sans', sans-serif; color: var(--sonuk); }
.yorum__cip { font: 700 9.5px 'Open Sans', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; background: var(--kehribar); color: var(--murekkep);
  padding: .22rem .5rem; border-radius: 3px; }
.yorum p { font-size: 13.8px; color: var(--sonuk); line-height: 1.6; }
.yorum__alt { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border-top: 1px solid var(--serit); padding-top: .55rem; font-size: 11.5px; color: var(--dim, #5E7085); }

/* ---------- 12c. KAPANIŞ KARTI (02'nin dördüncü adımı) ----------
   Yol dört adım ama üçlü rayı dörde çıkarmak kartları daraltıyordu; dördüncü
   adım tam genişlikte duruyor. GÖRSEL DİL ÜÇ KARTIN AYNISI: beyaz zemin,
   2px lacivert kenar, sert ofset gölge, üstte numara rozeti. Lacivert zeminli
   ilk deneme bölümden kopuk bir "reklam bandı" gibi duruyordu.
   Dikeyde de kartlarla aynı hacimde olsun diye üstten aynı pay (numara rozeti
   dışarı taşıyor) ve aynı iç boşluk kullanılıyor. */
.kapanis { position: relative; margin-top: 2.9rem;
  background: #fff; border: 2px solid var(--lacivert); border-radius: 10px;
  box-shadow: var(--sert); padding: 1.5rem 1.4rem 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  align-items: center; justify-content: space-between; color: var(--lacivert); }
.kapanis__no { position: absolute; top: -1.1rem; left: 1.3rem;
  background: var(--lacivert); color: #fff; border-radius: 6px; padding: .25rem .6rem;
  font: 700 12.5px ui-monospace, monospace; letter-spacing: .08em; }
.kapanis__ic { display: grid; gap: .55rem; min-width: 0; max-width: 46rem;
  align-content: start; }
/* dikeyde de kart gibi dursun: üç kartın iç ritmiyle aynı nefes payı */
.kapanis { min-height: 12.5rem; align-items: center; }
.kapanis h3 { font-size: 18px; color: var(--murekkep); }
.kapanis p { color: var(--sonuk); font-size: 14.5px; }
.kapanis p b { color: var(--murekkep); }

/* ---------- 16b. UZUN METİN (yasal sayfalar) ----------
   Şartlar/gizlilik/risk sayfalarının gövdesi tanıtım kaynağından BİREBİR
   geliyor (metni yeniden yazmak hukuki metinde aktarma hatası riski demek).
   O yüzden burada sınıfsız semantik etiketler biçimlendiriliyor. */
.metin { max-width: 46rem; display: grid; gap: 1rem; }
.metin h2 { font-size: clamp(19px, 2.4vw, 23px); margin-top: 1.2rem; }
.metin h3 { font-size: 16.5px; margin-top: .6rem; }
.metin p, .metin li { color: var(--b-sonuk); font-size: 15px; line-height: 1.75; }
.metin ul, .metin ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.metin a { color: var(--lacivert); text-decoration: underline; text-underline-offset: 2px; }
.metin strong { color: var(--b-metin); }
.metin table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.metin th, .metin td { border: 1px solid var(--b-cizgi); padding: .6rem .7rem; text-align: left; }
/* Sayfa içi bölüm zinciri: uzun yasal metinde nerede olduğunu göstersin */
.metin__cetele { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: 13px;
  padding-bottom: .4rem; border-bottom: 1px solid var(--b-cizgi); }

/* TASLAK uyarısı: canlı yasal sayfalarda da var, bilinçli — metin
   kesinleşmeden bağlayıcı sanılmasın. Kaldırmak içerik kararı, tasarım
   kararı değil. */
.taslak { border: 2px solid var(--damga); border-left-width: 6px; border-radius: 8px;
  background: #FCF3F3; color: var(--murekkep); padding: 1rem 1.2rem; font-size: 14.5px;
  display: grid; gap: .3rem; margin-bottom: 1.6rem; max-width: 46rem; }
.taslak b { color: var(--damga); }

/* ---------- 17. SSS ---------- */
.sss { display: grid; gap: .7rem; max-width: 48rem; }
.sss details { background: #fff; border: 1.5px solid var(--cizgi); border-radius: 8px; padding: 0 1.2rem; }
.sss details[open] { border-color: var(--lacivert); box-shadow: var(--sert-kucuk); }
.sss summary { list-style: none; cursor: pointer; padding: 1rem 0; font-weight: 700; font-size: 15.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sss summary::after { content: '+'; color: var(--lacivert); font-size: 20px; }
.sss details[open] summary::after { content: '–'; }
.sss p { color: var(--sonuk); font-size: 14.5px; padding-bottom: 1.1rem; }

/* ---------- 18. FOOTER ---------- */
.alt { background: var(--gece); color: #EAF1FA; padding-top: clamp(2.6rem, 5vw, 4rem); }
.alt-ana { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 1.8rem; padding-bottom: 2rem; }
@media (max-width: 860px) { .alt-ana { grid-template-columns: 1fr 1fr; } }
.alt h4 { font: 700 11.5px 'Open Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase;
  color: #8FB4E0; margin: 0 0 .9rem; }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alt a { color: #D6E3F2; text-decoration: none; font-size: 14px; }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt-marka p { color: #8FB4E0; font-size: 13.5px; max-width: 26rem; margin-top: .7rem; }
/* DEV MARKA ADI: kenardan kenara tam oturan kelime damgası.
   Neden SVG + textLength: HTML metninde harf aralığını el yordamıyla tutturmak
   her genişlikte kayıyor; textLength="1200" kelimeyi viewBox genişliğine BİREBİR
   oturtuyor, lengthAdjust="spacing" harf şeklini bozmadan yalnız aralığı
   dağıtıyor — yani font hâlâ Manrope 800, sitenin başlık ailesi. */
.alt-dev { border-top: 1px solid #23446F; padding-top: clamp(1.1rem, 3vw, 1.9rem);
  margin-top: .4rem; }
.alt-dev svg { display: block; width: 100%; height: auto; overflow: visible; }
.alt-dev text { font-family: Manrope, 'Open Sans', sans-serif; font-weight: 800;
  font-size: 132px; fill: #fff; fill-opacity: .95; }
/* Sosyal satır + başa dön: dev markanın altında tek şerit. Adresler gerçek
   (canlı siteden), bu yüzden hover'da altı çizilen normal bağ gibi davranıyor. */
.alt-sos { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.4rem; flex-wrap: wrap; padding: .9rem 0 .2rem; }
.alt-sos__baglar { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.alt-sos a { font: 700 11px 'Open Sans', sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: #8FB4E0; }
.alt-sos a:hover { color: #fff; }
.alt-sos__ust { white-space: nowrap; }
.alt-yasal { border-top: 1px solid #23446F; padding: 1.2rem 0 2rem; color: #8FB4E0; font-size: 12.5px;
  display: grid; gap: .5rem; }
/* Şirket künyesi: yasal zorunluluk olduğu için okunur kalmalı — rengi
   .alt-yasal'dan devralıyor, yalnız vurgulu kısımları (unvan, sicil no)
   fildişine çekiyoruz ki koyu zeminde seçilebilsin. */
.alt-kunye strong { color: #F4F1EA; font-weight: 600; }

/* ---------- 19. SCROLL ANİMASYON TEMELİ ----------
   Gizleme YALNIZ .js sınıfı varken (inline betik ekler) ve hareket tercihi
   izin veriyorsa uygulanır — JS çökse bile içerik görünür kalır. */
.js [data-ac] { opacity: 0; transform: translateY(26px); }
.js [data-ac].gorundu { opacity: 1; transform: none;
  transition: opacity .6s var(--egri), transform .7s var(--egri); }
.js [data-ac="perde"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js [data-ac="perde"].gorundu { clip-path: inset(0 0 0 0); transition: clip-path .8s var(--egri); }
.js [data-ac="sol"] { transform: translateX(-24px); }
.js [data-ac="sag"] { transform: translateX(24px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-ac] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
/* paralaks: görselin bandına göre hafif kayması */
.paralaks { will-change: transform; }

/* ---------- 20. ALT SAYFA ORTAKLARI ---------- */
.sayfa-bas { background: var(--lacivert); color: #fff; padding-block: clamp(2.6rem, 6vw, 4rem); position: relative; overflow: hidden; }
.sayfa-bas .kap { display: grid; gap: .9rem; position: relative; z-index: 1; }
.sayfa-bas h1 { font-size: clamp(28px, 4.4vw, 44px); }
.sayfa-bas p { color: var(--gok-acik); max-width: 40rem; }
.kirinti { display: flex; gap: .5rem; font-size: 12.5px; color: var(--gok-acik); }
.kirinti a { color: var(--gok-acik); text-decoration: none; }
.kirinti a:hover { color: #fff; text-decoration: underline; }
.yazi { max-width: 46rem; display: grid; gap: 1rem; }
.yazi h2 { margin-top: 1.4rem; }
.yazi h3 { font-size: 17.5px; margin-top: .8rem; }
.yazi p, .yazi li { color: var(--b-sonuk); }
.yazi ul, .yazi ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.tablo-kap { overflow-x: auto; border: 2px solid var(--lacivert); border-radius: 10px; box-shadow: var(--sert); background: #fff; }
table.kural { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 34rem; }
table.kural th, table.kural td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--cizgi); }
table.kural thead th { background: var(--serit); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lacivert); border-bottom: 2px solid var(--lacivert); }
table.kural tbody tr:last-child td { border-bottom: 0; }
table.kural td b { font-variant-numeric: tabular-nums; }
.uyari { border-left: 4px solid var(--kehribar); background: var(--kum); padding: 1rem 1.2rem;
  border-radius: 0 8px 8px 0; font-size: 14.5px; }
.uyari b { display: block; margin-bottom: .2rem; }

/* hidden özniteliği HER ZAMAN kazanmalı. ÖLÇÜLDÜ: giriş sayfasındaki doğrulama
   kodu alanı `hidden` olmasına rağmen ekranda duruyordu — yazar kuralı olan
   `.alan { display: grid }`, tarayıcının `[hidden] { display: none }` kuralını
   eziyor (yazar stili UA stilini yener, özgüllükten bağımsız). display veren
   her sınıfta aynı tuzak var; bu yüzden kural tek tek sınıflara değil
   özniteliğin kendisine bağlandı. */
[hidden] { display: none !important; }

/* form (iletişim) */
.form { display: grid; gap: 1rem; max-width: 34rem; }
.alan { display: grid; gap: .35rem; }
.alan label { font-size: 13.5px; font-weight: 700; }
.alan input, .alan textarea, .alan select {
  font: inherit; font-size: 15px; padding: .7rem .85rem; border: 2px solid var(--cizgi);
  border-radius: 8px; background: #fff; color: var(--murekkep); }
.alan input:focus, .alan textarea:focus, .alan select:focus { border-color: var(--lacivert); outline-offset: 1px; }
.alan small { color: var(--sonuk); font-size: 12.5px; }