/* ============================================================
   Ömer Atlı Fizyoterapi ve Rehabilitasyon — Tasarım Sistemi
   Navy/ink (imza koyu katman) + marka kırmızısı (enerji/hareket/CTA)
   paleti, modern sans başlık + gövde. Site AÇIK TEMADIR: sayfa zemini
   daima beyaz/açık gridir; navy yalnızca header, footer, page-hero ve
   belirli vurgu bantlarında dar koyu şeritler olarak kullanılır.
   Stok "hasta/tedavi" görsellerinden kasıtlı olarak kaçınılmıştır;
   yerine soyut hareket/nabız temalı SVG motifler ve elle çizilmiş ikon
   seti kullanılır (bkz. scripts/build.py::hero_svg, ::service_icon).

   ERİŞİLEBİLİRLİK NOTU (bkz. DUZENLEME_TALEPLERI.md B4):
   Marka kırmızısı --red (#EA3324) beyaz üzerinde yalnızca 4.20:1 verir
   ve küçük METİN için WCAG AA (4.5:1) eşiğinin altında kalır. Bu yüzden
   kırmızının üç türevi ayrılmıştır:
     --red        : yalnızca METİN DIŞI kullanım (çizgi, dolgu, ikon)
     --red-ink    : açık zeminde kırmızı metin + dolu buton dolgusu (4.84:1)
     --red-on-dark: koyu (navy/ink) zeminde kırmızı metin (4.85:1 / 5.39:1)
   ============================================================ */

:root{
  /* --- Nötr / zemin --- */
  --ink: #0B0E14;
  --navy: #121A2B;
  --navy-raised: #17223A;
  --paper: #FFFFFF;
  --paper-secondary: #F3F5F8;

  /* --- Semantik vurgular (her renk bir içerik kategorisini kodlar) --- */
  --red: #EA3324;       /* ağrı / yaralanma / birincil enerji, ana CTA */
  --blue: #2E7DE0;      /* anatomi / yapı / biyomekanik */
  --green: #2EA84F;     /* kanıt / araştırma / kaynak */
  --orange: #F5821F;    /* egzersiz / yükleme / protokol */
  --yellow: #FFC02E;    /* vurgu / uyarı — beyaz üzerinde METİN OLARAK KULLANILMAZ */

  /* --- Kırmızının erişilebilir türevleri --- */
  --red-ink: #DD2415;
  --red-dark: #B31D10;
  --red-on-dark: #ED5144;
  --red-soft: #FDECEA;

  /* --- Metin --- */
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255,255,255,.64);
  --text-on-paper: #0B0E14;
  --text-on-paper-muted: rgba(11,14,20,.60);

  /* --- Çizgi / ayırıcı --- */
  --border-on-dark: rgba(255,255,255,.14);
  --border-on-paper: rgba(11,14,20,.12);

  /* --- Semantik takma adlar (bileşenlerde ham hex yerine bunlar kullanılır) --- */
  --surface-base: var(--paper);
  --surface-card: var(--paper);
  --surface-card-raised: var(--paper-secondary);
  --surface-paper: var(--paper);
  --surface-paper-secondary: var(--paper-secondary);
  --accent-pain: var(--red);
  --accent-anatomy: var(--blue);
  --accent-evidence: var(--green);
  --accent-exercise: var(--orange);
  --accent-warning: var(--yellow);
  --accent-primary: var(--red);

  --white: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  --max: 1180px;
  /* Gölge opaklıkları açık zemin için düşürülmüştür (palet dokümanı koyu
     zemine göre 0.35–0.55 veriyordu; açık zeminde sert görünürdü). */
  --shadow: 0 14px 34px rgba(11,14,20,.10);
  --shadow-sm: 0 6px 16px rgba(11,14,20,.07);
  --shadow-card: 0 8px 28px rgba(11,14,20,.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin: 0; font-family: var(--sans); color: var(--text-on-paper); background: var(--surface-base); line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5{ font-family: var(--sans); font-weight: 800; color: var(--navy); letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .6rem; }
p{ margin: 0 0 1rem; }
a{ color: var(--navy); text-decoration: underline; text-underline-offset: .15em; }
a:hover{ color: var(--red-ink); }
img,svg{ max-width: 100%; height: auto; display: block; }
ul{ margin: 0 0 1rem; padding-left: 1.25rem; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

/* Skip link (erisilebilirlik) */
.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--red-ink); color: var(--white); padding: .75rem 1.25rem; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus{ left: 0; top: 0; }

/* ---------------------------------------------------------- Header */
.site-header{ background: var(--navy); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 0 var(--red); }
.site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; padding-bottom: .8rem; flex-wrap: wrap; gap: .75rem; }
.brand{ display: flex; align-items: center; gap: .7rem; color: var(--text-on-dark); text-decoration: none; }
.brand:hover{ color: var(--text-on-dark); }
.brand-mark{ display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--red-dark)); font-weight: 800; color: var(--white); font-size: 1rem; letter-spacing: .01em; flex-shrink: 0; }
.brand-text{ font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.brand-text small{ display: block; font-family: var(--sans); font-size: .68rem; color: var(--text-on-dark-muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: .2rem; }
nav.main-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; flex-wrap: wrap; }
nav.main-nav a{ color: rgba(255,255,255,.78); text-decoration: none; font-size: .93rem; font-weight: 600; letter-spacing: .01em; }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--text-on-dark); }
nav.main-nav a.active{ position: relative; }
nav.main-nav a.active::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -.6rem; height: 2px; background: var(--red); }
.header-cta-row{ display: flex; align-items: center; gap: .6rem; }
.header-cta-row .header-cta{ white-space: nowrap; }
.lang-switch{ display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: var(--text-on-dark); text-decoration: none; font-size: .75rem; font-weight: 800; letter-spacing: .02em; opacity: .85; }
.lang-switch:hover{ opacity: 1; background: rgba(255,255,255,.14); border-color: var(--white); }
.menu-toggle{ display: none; }

/* ---------------------------------------------------------- Buttons */
.btn{ display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.7rem; border: 2px solid var(--red); background: transparent; color: var(--red-ink); text-decoration: none; font-size: .95rem; font-weight: 700; letter-spacing: .01em; border-radius: 999px; transition: all .2s ease; cursor: pointer; }
.btn-sm{ padding: .55rem 1.15rem; font-size: .82rem; }
.btn:hover{ background: var(--red-ink); color: var(--white); border-color: var(--red-ink); transform: translateY(-1px); }
.btn-solid{ background: var(--red-ink); color: var(--white); border-color: var(--red-ink); box-shadow: 0 8px 20px rgba(234,51,36,.28); }
.btn-solid:hover{ background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }
.btn-outline{ border-color: var(--navy); color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-outline-light{ border-color: rgba(255,255,255,.65); color: var(--white); }
.btn-outline-light:hover{ background: rgba(255,255,255,.14); color: var(--white); border-color: var(--white); }
.btn-row{ display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------- Hero (AÇIK ZEMİN) */
.hero{ position: relative; background: linear-gradient(170deg, var(--paper) 0%, var(--paper-secondary) 55%, var(--paper-secondary) 100%); color: var(--text-on-paper); padding: 5rem 1.5rem 6.5rem; text-align: center; overflow: hidden; }
.hero-bg{ position: absolute; inset: 0; opacity: .9; pointer-events: none; }
.hero-bg svg{ width: 100%; height: 100%; }
.hero .container{ position: relative; z-index: 1; }
.kicker{ display: inline-flex; align-items: center; gap: .45rem; text-align: center; font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: var(--red-ink); margin: 0 auto .9rem; font-weight: 800; background: var(--red-soft); padding: .4rem .9rem; border-radius: 999px; }
.hero .kicker{ background: var(--red-soft); color: var(--red-ink); }
.hero h1{ color: var(--navy); font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 1rem; font-weight: 800; }
.hero h1 em{ font-style: normal; color: var(--red-ink); background: linear-gradient(180deg, transparent 62%, rgba(234,51,36,.22) 62%); padding: 0 .1em; }
.hero p{ color: var(--text-on-paper-muted); font-size: 1.14rem; max-width: 640px; margin: 0 auto 2rem; line-height: 1.65; }
.hero-subnote{ color: var(--text-on-paper-muted); font-size: .85rem; margin: 1rem 0 0; }
.hero-subnote a{ color: var(--red-ink); font-weight: 700; text-decoration: none; }
.hero-subnote a:hover{ color: var(--navy); }
.hero-wave{ position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.hero-wave svg{ width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------- Trust strip */
.trust-strip{ background: var(--paper); padding: 2rem 1.5rem 1.5rem; margin-top: -3.2rem; position: relative; z-index: 2; }
.trust-grid{ max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: .5rem; }
.trust-item{ display: flex; align-items: center; gap: .85rem; text-align: left; padding: 1.1rem 1rem; }
.trust-item .icon{ flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; }
.trust-item .icon svg{ width: 1.35rem; height: 1.35rem; }
.trust-item strong{ display: block; color: var(--navy); font-size: .95rem; font-weight: 800; }
.trust-item span{ color: var(--text-on-paper-muted); font-size: .82rem; }

/* ---------------------------------------------------------- Sections */
.section{ padding: 4rem 1.5rem; max-width: var(--max); margin: 0 auto; }
.section-wrap-soft{ background: var(--surface-paper-secondary); }
.section-dark{ background: linear-gradient(160deg, var(--navy), var(--ink)); color: var(--text-on-dark); position: relative; overflow: hidden; }
.section-dark h2{ color: var(--text-on-dark); }
.section-dark p{ color: rgba(255,255,255,.78); }
.section h2{ text-align: center; font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin-bottom: .5rem; }
.lede{ text-align: center; color: var(--text-on-paper-muted); max-width: 640px; margin: 0 auto 2.2rem; line-height: 1.6; font-size: 1.03rem; }

/* ---------------------------------------------------------- Grid / kartlar */
.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; margin-top: .5rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); } }

/* Senaryo kartlari ("Durumunuza Uygun Alani Secin") tam 4 adettir; auto-fit
   3+1 yalniz karta dusurdugu icin kirilim noktalari acikca tanimlanir. */
.grid-scenarios{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-scenarios{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 782px){ .grid-scenarios{ grid-template-columns: 1fr; } }

.card{ background: var(--surface-card); border: 1px solid var(--border-on-paper); border-radius: var(--radius); padding: 1.7rem 1.5rem; text-decoration: none; color: var(--text-on-paper); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; display: flex; flex-direction: column; height: 100%; position: relative; }
.card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.card .icon-badge{ width: 3.1rem; height: 3.1rem; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: background .2s ease, color .2s ease; }
.card:hover .icon-badge{ background: var(--red-ink); color: var(--white); }
.card .icon-badge svg{ width: 1.6rem; height: 1.6rem; }
.card h3{ font-size: 1.12rem; margin: 0 0 .55rem; }
.card p{ color: var(--text-on-paper-muted); font-size: .92rem; margin: 0; flex-grow: 1; }
.card .more{ display: inline-flex; align-items: center; gap: .3rem; margin-top: 1.1rem; font-size: .82rem; letter-spacing: .02em; color: var(--red-ink); font-weight: 800; text-decoration: none; }
.card.card-featured{ border: 2px solid var(--red); }
.card .badge-featured{ position: absolute; top: -.7rem; right: 1.2rem; background: var(--red-ink); color: var(--white); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .7rem; border-radius: 999px; }

/* ---------------------------------------------------------- Process (Calisma Surecimiz) */
.process-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; position: relative; }
@media (min-width: 780px){
  .process-grid::before{ content: ""; position: absolute; top: 1.55rem; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--border-on-paper) 0 10px, transparent 10px 16px); z-index: 0; }
}
.process-step{ text-align: center; padding: 0 .5rem; position: relative; z-index: 1; }
.process-num{ display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; font-size: 1.15rem; color: var(--white); font-weight: 800; margin-bottom: .85rem; background: linear-gradient(135deg, var(--navy), var(--navy-raised)); box-shadow: 0 6px 16px rgba(11,14,20,.20); }
.process-step h3{ font-size: 1.02rem; margin-bottom: .4rem; }
.process-step p{ color: var(--text-on-paper-muted); font-size: .89rem; margin: 0; }

/* ---------------------------------------------------------- Manifesto/otorite bandı */
.manifesto-band{ background: linear-gradient(160deg, var(--navy), var(--ink)); color: var(--text-on-dark); text-align: center; padding: 4rem 1.5rem; }
.manifesto-band .kicker{ background: rgba(255,255,255,.10); color: var(--red-on-dark); }
.manifesto-band h2{ color: var(--text-on-dark); max-width: 780px; margin: 0 auto .9rem; }
.manifesto-lede{ color: rgba(255,255,255,.78); max-width: 640px; margin: 0 auto 2.5rem; font-size: 1.04rem; line-height: 1.65; }
.manifesto-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: var(--max); margin: 0 auto; }
.manifesto-item{ background: rgba(255,255,255,.06); border: 1px solid var(--border-on-dark); border-radius: var(--radius); padding: 1.5rem 1.3rem; text-align: left; }
.manifesto-item strong{ display: block; color: var(--red-on-dark); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; }
.manifesto-item span{ color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.5; }

/* ---------------------------------------------------------- Sporcu fizyoterapisi vurgu bandi */
.focus-band{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px){ .focus-band{ grid-template-columns: 1fr; } }
.focus-band-visual{ position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, var(--navy), var(--navy-raised)); }
.focus-band-visual svg{ width: 100%; height: 100%; }
.focus-list{ list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.focus-list li{ display: flex; align-items: flex-start; gap: .75rem; font-size: .96rem; color: var(--text-on-paper); }
.focus-list .check{ flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; margin-top: .1rem; }
.focus-list .check svg{ width: .85rem; height: .85rem; }

/* ---------------------------------------------------------- Icerik sayfalari */
.page-hero{ background: linear-gradient(160deg, var(--navy), var(--ink)); color: var(--text-on-dark); padding: 3.2rem 1.5rem; text-align: center; }
.page-hero h1{ color: var(--text-on-dark); margin: 0; font-size: clamp(1.75rem, 4vw, 2.4rem); }
.page-hero .kicker{ background: rgba(255,255,255,.10); color: var(--red-on-dark); }
.breadcrumb{ font-size: .84rem; color: rgba(255,255,255,.70); margin-bottom: 1rem; }
.breadcrumb a{ color: rgba(255,255,255,.70); }
.breadcrumb a:hover{ color: var(--text-on-dark); }
.content-page{ max-width: 760px; margin: 0 auto; padding: 3.2rem 1.5rem; }
.content-page--wide{ max-width: 820px; }
.content-page h2{ text-align: left; font-size: 1.4rem; margin-top: 2.3rem; }
.content-page ul{ color: var(--text-on-paper-muted); }
.content-page .disclaimer{ color: var(--text-on-paper-muted); font-size: .89rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--border-on-paper); }
.post-meta{ color: var(--text-on-paper-muted); font-size: .87rem; margin-bottom: 1.75rem; }

/* ---------------------------------------------------------- FAQ (native <details>/<summary>) */
.faq{ max-width: 760px; margin: 1.5rem auto 0; display: flex; flex-direction: column; gap: .7rem; }
.faq details{ border: 1px solid var(--border-on-paper); border-radius: var(--radius-sm); padding: 1rem 1.15rem; background: var(--surface-card); }
.faq details[open]{ border-color: var(--red); }
.faq summary{ font-weight: 700; color: var(--navy); cursor: pointer; font-size: 1rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--red-soft); color: var(--red-ink); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.faq details[open] summary::after{ transform: rotate(45deg); background: var(--red-ink); color: var(--white); }
.faq p{ color: var(--text-on-paper-muted); margin: .85rem 0 0; }
.section-wrap-soft .faq{ max-width: 820px; }

/* ---------------------------------------------------------- İnfografikler */
.infografik{ margin: 2.2rem 0; padding: 0; }
.infografik figcaption{ text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); font-weight: 800; margin-top: 1rem; }

.ig-steps{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; background: var(--surface-paper-secondary); border: 1px solid var(--border-on-paper); border-radius: var(--radius); overflow: hidden; }
.ig-steps li{ display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border-on-paper); }
.ig-steps li:last-child{ border-bottom: none; }
.ig-num{ flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-raised)); color: var(--white); font-weight: 800; font-size: .85rem; }
.ig-step-body strong{ display: block; color: var(--navy); font-size: .98rem; margin-bottom: .2rem; }
.ig-step-body p{ margin: 0; color: var(--text-on-paper-muted); font-size: .9rem; }

.ig-compare{ border: 1px solid var(--border-on-paper); border-radius: var(--radius); overflow: hidden; }
.ig-compare-head{ display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); color: var(--text-on-dark); font-weight: 800; text-align: center; }
.ig-compare-head div{ padding: .85rem .75rem; }
.ig-compare-head div:first-child{ border-right: 1px solid var(--border-on-dark); }
.ig-row{ display: grid; grid-template-columns: 1fr 1fr; }
.ig-row:nth-child(odd){ background: var(--surface-paper-secondary); }
.ig-row div{ padding: .75rem 1rem; font-size: .9rem; color: var(--text-on-paper); border-top: 1px solid var(--border-on-paper); }
.ig-row div:first-child{ border-right: 1px solid var(--border-on-paper); }
@media (max-width: 560px){ .ig-compare-head div, .ig-row div{ font-size: .82rem; padding: .6rem .6rem; } }

.ig-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--border-on-paper); border: 1px solid var(--border-on-paper); border-radius: var(--radius); overflow: hidden; }
.ig-stat{ background: var(--navy); color: var(--text-on-dark); text-align: center; padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.ig-stat strong{ font-size: 1.5rem; color: var(--red-on-dark); }
.ig-stat span{ font-size: .78rem; color: rgba(255,255,255,.78); line-height: 1.35; }

/* ---------------------------------------------------------- Notice / uyari kutulari */
.notice{ background: var(--red-soft); border-left: 4px solid var(--red); padding: 1rem 1.25rem; font-size: .9rem; color: var(--text-on-paper-muted); border-radius: var(--radius-sm); margin: 1.5rem 0; }
.notice.draft{ background: #FFF4E5; border-left-color: var(--orange); color: #7A4A00; }
.notice p:last-child{ margin-bottom: 0; }

/* ---------------------------------------------------------- CTA blok */
.cta-block{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--surface-card); border: 1px solid var(--border-on-paper); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin: 2.2rem 0; box-shadow: var(--shadow-sm); }
.section-dark .cta-block{ background: rgba(255,255,255,.06); border-color: var(--border-on-dark); backdrop-filter: blur(2px); }
.cta-block-text strong{ display: block; font-size: 1.05rem; color: var(--navy); margin-bottom: .3rem; }
.section-dark .cta-block-text strong{ color: var(--text-on-dark); }
.cta-block-text p{ margin: 0; color: var(--text-on-paper-muted); font-size: .9rem; }
.section-dark .cta-block-text p{ color: rgba(255,255,255,.78); }
.cta-block-actions{ display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------------------------------------------------------- Iletisim sayfasi */
.contact-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info-list{ list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.contact-info-list li{ display: flex; flex-direction: column; gap: .2rem; border-bottom: 1px solid var(--border-on-paper); padding-bottom: .8rem; }
.contact-info-list strong{ font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.contact-info-list span, .contact-info-list a{ color: var(--text-on-paper); font-size: .98rem; }

.form-box{ background: var(--surface-card); border: 1px solid var(--border-on-paper); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.form-row{ margin-bottom: 1.1rem; }
.form-row label{ display: block; font-size: .87rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.form-row input, .form-row textarea, .form-row select{ width: 100%; padding: .75rem .9rem; border: 1px solid var(--border-on-paper); border-radius: var(--radius-sm); font-family: var(--sans); font-size: .95rem; color: var(--text-on-paper); background: var(--surface-paper-secondary); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline: 2px solid var(--red); border-color: var(--red); background: var(--paper); }
.form-consent{ display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: var(--text-on-paper-muted); }
.form-consent input{ margin-top: .2rem; width: auto; }
.form-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg{ font-size: .85rem; padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; display: none; }
.form-msg.ok{ background: #E3F6EC; color: #147A45; }
.form-msg.err{ background: #FDEAEA; color: #B3261E; }
.form-footnote{ font-size: .78rem; color: var(--text-on-paper-muted); margin: 1rem 0 0; }

/* ---------------------------------------------------------- Blog kartlari */
.post-card{ background: var(--surface-card); border: 1px solid var(--border-on-paper); border-radius: var(--radius); padding: 1.6rem 1.5rem; text-decoration: none; color: var(--text-on-paper); display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease; }
.post-card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); }
.post-card .date{ font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--red-ink); font-weight: 800; }
.post-card h3{ margin: .55rem 0 .6rem; font-size: 1.08rem; color: var(--navy); }
.post-card p{ color: var(--text-on-paper-muted); font-size: .91rem; margin: 0 0 .75rem; flex-grow: 1; }
.post-card .more{ font-size: .8rem; letter-spacing: .02em; color: var(--red-ink); font-weight: 800; }

/* Etiketler */
.tag-list{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; }
.tag{ background: var(--red-soft); color: var(--navy); font-size: .78rem; font-weight: 600; padding: .35rem .8rem; border-radius: 999px; }

/* Makale gezinme (onceki/sonraki) */
.post-pager{ display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-on-paper); flex-wrap: wrap; }
.pager-link{ color: var(--navy); text-decoration: none; font-size: .92rem; font-weight: 700; max-width: 45%; }
.pager-link:hover{ color: var(--red-ink); }
.pager-next{ text-align: right; margin-left: auto; }
.related-list{ color: var(--text-on-paper-muted); }
.related-list a{ color: var(--navy); font-weight: 600; }

/* ---------------------------------------------------------- Cerez bandı */
#cookie-bar{ position: fixed; left: 0; right: 0; bottom: 0; background: var(--ink); color: rgba(255,255,255,.78); padding: 1rem 1.5rem; z-index: 500; display: none; box-shadow: 0 -4px 20px rgba(0,0,0,.35); }
#cookie-bar.show{ display: block; }
.cookie-inner{ max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cookie-inner p{ margin: 0; font-size: .87rem; max-width: 640px; }
.cookie-inner a{ color: var(--red-on-dark); }
.cookie-actions{ display: flex; gap: .75rem; flex-shrink: 0; }
.cookie-actions button{ font-family: var(--sans); font-size: .82rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: var(--text-on-dark); cursor: pointer; }
.cookie-actions button.accept{ background: var(--red-ink); color: var(--white); border-color: var(--red-ink); }

/* ---------------------------------------------------------- Footer */
footer.site-footer{ background: var(--ink); color: rgba(255,255,255,.72); padding: 3.2rem 1.5rem 6.5rem; margin-top: 3rem; }
footer.site-footer .container{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px){ footer.site-footer .container{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } footer.site-footer{ padding-bottom: 6.5rem; } }
footer.site-footer .brand-text{ font-size: 1.05rem; }
.footer-tagline{ color: rgba(255,255,255,.58); font-size: .85rem; margin-top: .85rem; line-height: 1.55; }
footer.site-footer h4{ color: var(--text-on-dark); font-size: .93rem; margin-bottom: .85rem; }
footer.site-footer a{ color: rgba(255,255,255,.72); text-decoration: none; font-size: .9rem; }
footer.site-footer a:hover{ color: var(--red-on-dark); }
footer.site-footer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-contact li{ color: rgba(255,255,255,.72); font-size: .88rem; }
.copyright{ text-align: center; color: rgba(255,255,255,.58); font-size: .81rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.10); }

/* ---------------------------------------------------------- Sabit mobil CTA bandı */
.mobile-cta-bar{ display: none; }
@media (max-width: 782px){
  .mobile-cta-bar{ display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; background: var(--paper); box-shadow: 0 -6px 20px rgba(11,14,20,.16); padding: .6rem .8rem; gap: .6rem; }
  .mobile-cta-bar .btn{ flex: 1; justify-content: center; padding: .8rem 1rem; font-size: .88rem; }
}

/* ---------------------------------------------------------- Sabit masaüstü CTA (sağ alt) */
.desktop-cta-fab{ display: none; }
@media (min-width: 783px){
  .desktop-cta-fab{ display: flex; position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 400; gap: .6rem; background: var(--paper); padding: .6rem; border-radius: 999px; box-shadow: var(--shadow); }
}

/* ---------------------------------------------------------- Mobil menu */
@media (max-width: 782px){
  .header-cta-row{ display: none; }
  .menu-toggle{ display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); color: var(--white); padding: .5rem .9rem; border-radius: 999px; font-size: .9rem; font-weight: 700; cursor: pointer; }
  nav.main-nav{ display: none; width: 100%; order: 3; }
  nav.main-nav.open{ display: block; }
  nav.main-nav ul{ flex-direction: column; gap: .25rem; padding: .5rem 0 0; }
  nav.main-nav a{ display: block; padding: .65rem 0; border-top: 1px solid rgba(255,255,255,.10); }
  nav.main-nav a.active::after{ display: none; }
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .hero{ padding: 3.5rem 1.25rem 5rem; }
  .section{ padding: 3rem 1.25rem; }
  .brand-text{ font-size: 1.02rem; }
  .focus-band{ gap: 1.5rem; }
}

/* ---------------------------------------------------------- Scroll-reveal (JS ile .is-visible eklenir; JS calismazsa icerik zaten gorunur) */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------- Araçlar (hesaplayıcılar/zamanlayıcılar)
   Tamamen istemci tarafında (JS) çalışır; hiçbir değer sunucuya/üçüncü
   tarafa gönderilmez, saklanmaz (bkz. scripts/assets/tools.js üstündeki not).
   Bu yüzden KVKK açısından bir veri işleme oluşturmaz. */
.tool-kicker-row{ display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.tool-badge{ display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); background: var(--red-soft); padding: .25rem .6rem; border-radius: 999px; }

.calc-box{ background: var(--surface-card); border: 1px solid var(--border-on-paper); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); margin: 2rem 0; }
.calc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; }
.calc-field label{ display: block; font-size: .84rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.calc-field input, .calc-field select{ width: 100%; padding: .7rem .85rem; border: 1px solid var(--border-on-paper); border-radius: var(--radius-sm); font-family: var(--sans); font-size: .95rem; color: var(--text-on-paper); background: var(--surface-paper-secondary); }
.calc-field input:focus, .calc-field select:focus{ outline: 2px solid var(--red); border-color: var(--red); background: var(--paper); }
.calc-field .hint{ display: block; font-size: .74rem; color: var(--text-on-paper-muted); margin-top: .3rem; }

.calc-toggle{ display: inline-flex; border: 1px solid var(--border-on-paper); border-radius: 999px; padding: .2rem; background: var(--surface-paper-secondary); }
.calc-toggle button{ font-family: var(--sans); font-size: .85rem; font-weight: 700; padding: .5rem 1.1rem; border: none; background: transparent; color: var(--text-on-paper-muted); border-radius: 999px; cursor: pointer; transition: all .15s ease; }
.calc-toggle button.active{ background: var(--navy); color: var(--white); }

.calc-actions{ margin-top: 1.4rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.calc-actions .btn{ border: none; }

.calc-result{ display: none; margin-top: 1.6rem; padding: 1.4rem 1.6rem; background: linear-gradient(135deg, var(--navy), var(--navy-raised)); color: var(--text-on-dark); border-radius: var(--radius); }
.calc-result.show{ display: block; }
.calc-result-value{ font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.calc-result-value span{ font-size: 1rem; font-weight: 600; opacity: .85; }
.calc-result-label{ font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.78); margin-top: .3rem; }
.calc-result-detail{ margin-top: .9rem; font-size: .92rem; color: rgba(255,255,255,.78); line-height: 1.55; }
.calc-result-detail strong{ color: var(--text-on-dark); }
.calc-note{ font-size: .82rem; color: var(--text-on-paper-muted); margin-top: 1rem; }

/* Sonuç kutusu içindeki "moment of value" CTA — sonucun hemen altında,
   kullanıcı en ilgili olduğu anda görünür. */
.calc-result-cta{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.20); }
.calc-result-cta a{ color: var(--text-on-dark); font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.calc-result-cta a:hover{ color: var(--red-on-dark); }

.calc-zones{ margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.calc-zone-row{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(255,255,255,.10); border-radius: var(--radius-sm); padding: .65rem .9rem; font-size: .88rem; }
.calc-zone-row strong{ color: var(--text-on-dark); }

/* Zamanlayıcı araçları (interval/germe) */
.timer-box{ text-align: center; }
.timer-phase{ display: inline-block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .35rem .9rem; border-radius: 999px; background: var(--red-ink); color: var(--white); margin-bottom: 1rem; transition: background .2s ease, color .2s ease; }
.timer-phase.rest{ background: var(--navy); color: var(--white); }
.timer-display{ font-size: clamp(3.2rem, 12vw, 5rem); font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.timer-meta{ margin-top: .6rem; color: var(--text-on-paper-muted); font-size: .92rem; }
.timer-controls{ margin-top: 1.6rem; display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }

/* Postür öz-değerlendirme kontrol listesi */
.quiz-list{ list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.quiz-list li{ display: flex; align-items: flex-start; gap: .8rem; background: var(--surface-paper-secondary); border: 1px solid var(--border-on-paper); border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .94rem; cursor: pointer; }
.quiz-list input{ margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--red); flex-shrink: 0; }

/* Araç kartları (grid ile aynı .card bileşenini kullanır; ek rozet) */
.tool-grid-cta{ margin-top: 2.2rem; text-align: center; }

@media (max-width: 560px){
  .calc-box{ padding: 1.3rem 1.1rem; }
  .calc-result-value{ font-size: 1.7rem; }
}

/* ---------------------------------------------------------- Yazdirma */
@media print{
  .site-header, .menu-toggle, #cookie-bar, .site-footer, .btn-row, .mobile-cta-bar{ display: none !important; }
}

/* ---------------------------------------------------------- Hızlı iletişim bandı
   Hizmet sayfalarında başlığın hemen altında; reklam trafiği doğrudan bu
   sayfalara indiği ve dönüşüm telefonla geldiği için ilk ekranda görünür. */
.quick-contact{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  margin: 0 0 1.6rem; padding: .85rem 1rem; border-radius: 12px;
  background: var(--surface-base); border: 1px solid var(--border-on-paper); }
.quick-contact-label{ font-weight: 700; font-size: .92rem; }
.quick-contact-call{ font-weight: 800; font-size: 1.12rem; letter-spacing: .01em; text-decoration: none; }
.quick-contact-alt{ font-size: .92rem; text-decoration: none; }
@media (max-width: 782px){
  .quick-contact{ margin-bottom: 1.2rem; padding: .95rem 1rem; }
  .quick-contact-label{ width: 100%; margin-bottom: .1rem; }
  .quick-contact-call{ font-size: 1.28rem; }
}

/* Spam bal küpü alanı — gerçek kullanıcıdan ve ekran okuyucudan gizlenir.
   display:none yerine konumlandırma kullanılır; bazı botlar display:none
   alanları atlar. */
.hp-wrap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hızlı iletişim bandındaki adres satırı — yalnızca address_line doluysa üretilir. */
.quick-contact-adres{ width: 100%; margin-top: .35rem; font-size: .93rem; line-height: 1.5; }
.quick-contact-adres .quick-contact-alt{ margin-left: .5rem; }