/* yol.net tasarım sistemi
   Kaynak: marka kimliği (renk, Inter) + mockup referansları. Mobil öncelikli. */

/* ---------- Yazı tipi (kendi sunucumuzdan) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* ---------- Tasarım değişkenleri ---------- */
:root {
  /* Marka renkleri */
  --c-ink: #0F172A;
  --c-green: #22C55E;
  --c-green-strong: #16A34A;   /* büyük başlıkta yeşil (3:1 üzeri) */
  --c-green-text: #15803D;     /* küçük yeşil metin (AA) */
  --c-green-soft: #ECFDF3;     /* Yolunu Sor alanı, aktif zemin */
  --c-line: #E5E7EB;
  --c-surface: #FFFFFF;
  --c-surface-2: #F8FAFC;

  /* Metin tonları */
  --c-text: var(--c-ink);
  --c-muted: #475569;
  --c-subtle: #64748B;

  /* İçerik türü renkleri (rozetler) */
  --t-kisa-bg: #FEF3C7;   --t-kisa-fg: #92400E;
  --t-rehber-bg: #E0EAF5; --t-rehber-fg: #334E68;
  --t-harita-bg: #DCFCE7; --t-harita-fg: #166534;
  --t-ayrim-bg: #DCFCE7;  --t-ayrim-fg: #166534;
  --t-arac-bg: #E0F2FE;   --t-arac-fg: #075985;
  --t-sifir-bg: #EDE9FE;  --t-sifir-fg: #5B21B6;

  /* Tipografi */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h2: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-h1: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

  /* Ölçü */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
  --gutter: 1rem;
  --container: 1200px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-md: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.14);
  --shadow-lg: 0 2px 4px rgb(15 23 42 / 0.04), 0 18px 40px -16px rgb(15 23 42 / 0.22);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--c-green-strong);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
  --header-h: 64px;
}
@media (min-width: 768px) { :root { --gutter: 1.5rem; --header-h: 72px; } }
@media (min-width: 1200px) { :root { --gutter: 2rem; } }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
main:focus { outline: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: #BBF7D0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--c-ink); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--sp-3); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografi ---------- */
.display, .h1, .h2, .h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.display { font-size: var(--fs-display); letter-spacing: -0.045em; line-height: 1.02; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.25; font-weight: 700; }
.lead { font-size: var(--fs-lg); color: var(--c-muted); line-height: 1.5; max-width: 60ch; }
@media (min-width: 768px) { .lead { font-size: var(--fs-xl); } }
.small { font-size: var(--fs-sm); color: var(--c-subtle); line-height: 1.45; }
.text-green { color: var(--c-green-strong); }

/* ---------- Üst bilgi ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); }
.site-logo { display: inline-flex; flex-shrink: 0; }
.site-logo img { width: 104px; height: auto; }
@media (min-width: 768px) { .site-logo img { width: 120px; } }

.site-nav { display: flex; align-items: center; margin-left: var(--sp-3); }
.site-nav ul { display: flex; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.site-nav a {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; color: var(--c-muted);
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--c-ink); }
.site-nav a[aria-current="page"] { color: var(--c-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--c-green); border-radius: 0; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.site-header .site-header__menu { display: none; }
.site-nav .site-nav__cta { display: none; }
.site-nav a.btn--primary { color: #fff; font-size: var(--fs-md); padding: 0 var(--sp-5); }

@media (max-width: 1099px) {
  .site-header .site-header__menu { display: inline-flex; }
  .site-header .site-header__cta { display: none; }
  .site-nav .site-nav__cta { display: flex; margin-top: var(--sp-3); }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; margin: 0;
    background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-lg);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { font-size: var(--fs-lg); padding: var(--sp-3); }
}

/* ---------- Alt bilgi ---------- */
.site-footer { border-top: 1px solid var(--c-line); background: var(--c-surface-2); margin-top: var(--sp-8); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding-block: var(--sp-6); }
.site-footer__tagline { color: var(--c-muted); font-size: var(--fs-sm); }
.site-footer__copy { margin-left: auto; color: var(--c-subtle); font-size: var(--fs-sm); }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-ink); color: #fff; }
.btn--primary:hover { background: #1E293B; }
.btn--secondary { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.btn--secondary:hover { border-color: #CBD5E1; }
.btn--ghost { color: var(--c-muted); padding-inline: var(--sp-3); }
.btn--ghost:hover { color: var(--c-ink); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--c-ink);
}
.icon-btn:hover { background: var(--c-surface-2); }
.icon-btn--go { background: var(--c-green); color: #fff; box-shadow: 0 6px 16px -6px rgb(34 197 94 / 0.6); }
.icon-btn--go:hover { background: var(--c-green-strong); }

/* ---------- Filtre çipleri ---------- */
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: #CBD5E1; color: var(--c-ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--c-green); border-color: var(--c-green); color: #fff; font-weight: 600; }

/* ---------- İçerik türü rozetleri ---------- */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2);
  border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; line-height: 1;
}
.badge--kisa { background: var(--t-kisa-bg); color: var(--t-kisa-fg); }
.badge--rehber { background: var(--t-rehber-bg); color: var(--t-rehber-fg); }
.badge--harita { background: var(--t-harita-bg); color: var(--t-harita-fg); }
.badge--ayrim { background: var(--t-ayrim-bg); color: var(--t-ayrim-fg); }
.badge--arac { background: var(--t-arac-bg); color: var(--t-arac-fg); }
.badge--sifir { background: var(--t-sifir-bg); color: var(--t-sifir-fg); }

/* ---------- Hedef arama alanı ---------- */
.goal-search {
  position: relative; display: flex; align-items: center; gap: var(--sp-2);
  max-width: 640px; min-height: 60px; padding: 8px 8px 8px 52px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill); box-shadow: var(--shadow-lg);
}
.goal-search:focus-within { border-color: var(--c-green-strong); }
.goal-search__icon { position: absolute; left: 18px; color: var(--c-subtle); }
.goal-search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: var(--fs-md); padding-block: var(--sp-2);
}
.goal-search__input::placeholder { color: var(--c-subtle); }
.goal-search__input::-webkit-search-cancel-button { display: none; }

/* ---------- Kartlar ---------- */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}
.card:hover { box-shadow: var(--shadow-md); border-color: #D9DEE5; }
.card__media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #E2E8F0, #F1F5F9); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.card__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* tüm kart tıklanabilir */

.list-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.list-item:hover { border-color: #CBD5E1; }
.list-item__icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-ink); }
.list-item__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.list-item__text strong { font-size: var(--fs-md); font-weight: 600; }
.list-item__chev { color: var(--c-subtle); flex-shrink: 0; }

/* ---------- Adım göstergesi (yol haritası) ---------- */
.steps { display: flex; align-items: center; list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.steps li { display: flex; align-items: center; flex: 1; }
.steps li:last-child { flex: 0; }
.steps li::after { content: ""; flex: 1; height: 1px; background: var(--c-line); margin-inline: 4px; }
.steps li:last-child::after { display: none; }
.steps span {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  font-size: 11px; font-weight: 600; color: var(--c-muted); background: var(--c-surface); border: 1px solid var(--c-line);
}
.steps .is-current span { background: var(--c-green); border-color: var(--c-green); color: #fff; box-shadow: 0 0 0 3px var(--t-harita-bg); }
.steps .is-done span { background: var(--t-harita-bg); border-color: var(--t-harita-bg); color: var(--t-harita-fg); }

/* ---------- Geçici açılış sayfası ---------- */
.launch { padding-block: var(--sp-8) var(--sp-9); }
.launch__inner { display: flex; flex-direction: column; gap: var(--sp-5); }
.launch .display { max-width: 12ch; }
.launch__note { font-size: var(--fs-sm); font-weight: 500; color: var(--c-green-text); display: inline-flex; align-items: center; gap: var(--sp-2); }
.launch__note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); }
@media (min-width: 768px) { .launch { padding-block: var(--sp-9); } }

/* ---------- Hata sayfası ---------- */
.error-page { padding-block: var(--sp-8); }
.error-page__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.error-page__code { font-size: var(--fs-sm); font-weight: 700; color: var(--c-green-text); }

/* ---------- Stil rehberi ---------- */
.sg { padding-block: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-7); }
.sg__intro { display: flex; flex-direction: column; gap: var(--sp-3); }
.sg__section { display: flex; flex-direction: column; gap: var(--sp-4); }
.sg__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sg__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 0; }
.sg__grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.sg__tile { display: grid; place-items: center; min-height: 140px; padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-2); }
.sg__tile--dark { background: var(--c-ink); border-color: var(--c-ink); }
.sg__icons { display: flex; gap: var(--sp-3); justify-content: center; }
.sg__icons img { box-shadow: 0 0 0 1px var(--c-line); border-radius: 14px; }
.sg__swatches li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.sg__swatch { height: 72px; border-radius: var(--r-md); border: 1px solid var(--c-line); margin-bottom: var(--sp-2); }
.sg__swatches code { color: var(--c-muted); }

/* ---------- Hareket tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   ANA SAYFA (mockup: desktop.jpeg + mokap mobil.jpeg)
   ========================================================= */

/* Ton paleti: konu ve araç ikon zeminleri */
.tone-teal   { --tone: #0F9F8F; --tone-bg: #E6F7F4; }
.tone-indigo { --tone: #4F46E5; --tone-bg: #EEF0FF; }
.tone-blue   { --tone: #2563EB; --tone-bg: #EAF1FF; }
.tone-orange { --tone: #EA6A12; --tone-bg: #FFF1E6; }
.tone-green  { --tone: #16A34A; --tone-bg: #E8F8EE; }
.tone-red    { --tone: #E8541E; --tone-bg: #FFEFE8; }
.tone-rose   { --tone: #E11D48; --tone-bg: #FFEBEF; }
.tone-amber  { --tone: #D97706; --tone-bg: #FFF5E0; }
.tone-violet { --tone: #7C3AED; --tone-bg: #F3EDFF; }
.tone-slate  { --tone: #475569; --tone-bg: #F1F5F9; }

/* ---------- Hero ---------- */
.page-home .site-header { background: rgb(255 255 255 / 0.72); }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h);
  background: linear-gradient(180deg, #F3F6F9 0%, #FFFFFF 100%);
}
.hero__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%;
}
/* Metin tarafını aydınlatan katman: fotoğraf sağda, okunurluk solda */
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.82) 34%, rgb(255 255 255 / 0.15) 62%, rgb(255 255 255 / 0) 78%),
    linear-gradient(0deg, #FFFFFF 0%, rgb(255 255 255 / 0) 22%);
}
.hero__inner { position: relative; padding-block: var(--sp-7) calc(var(--sp-8) + 8px); }
.hero__copy { max-width: 640px; }
.hero__title {
  font-size: clamp(2.75rem, 1.9rem + 4.4vw, 5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
}
.hero__accent { color: var(--c-green-strong); }
.hero__var { position: relative; display: inline-block; }
.hero__var::after {
  content: ""; position: absolute; left: -4%; right: 2%; bottom: -0.1em; height: 0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11c40-6 98-9 194-5' fill='none' stroke='%230F172A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero__lead { margin-top: var(--sp-5); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.45; color: #1E293B; font-weight: 450; }
.hero__search { margin-top: var(--sp-6); max-width: 640px; }
.hero__suggest { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.chip--solid { background: rgb(255 255 255 / 0.92); border-color: transparent; color: var(--c-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.chip--solid:hover { background: #fff; border-color: var(--c-line); }
.hero__note { display: none; position: absolute; right: 30%; top: 22%; width: 150px; color: var(--c-ink); opacity: 0.88; }
@media (min-width: 1100px) {
  .hero__note { display: block; }
  .hero__inner { padding-block: var(--sp-8) calc(var(--sp-9) + 8px); }
}

/* Mobil hero: ortalı başlık (mokap mobil) */
@media (max-width: 767px) {
  .hero--photo .hero__photo { object-position: 70% 50%; }
  .hero--photo::before {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.78) 38%, rgb(255 255 255 / 0.2) 64%, rgb(255 255 255 / 0.1) 84%, #FFFFFF 100%);
  }
  .hero__inner { padding-block: var(--sp-6) var(--sp-8); text-align: center; }
  .hero__copy { margin-inline: auto; }
  .hero__suggest { justify-content: center; }
  .hero__search { padding-left: 46px; min-height: 56px; }
  .hero__search .goal-search__icon { left: 16px; }
  .hero__search .goal-search__input { font-size: var(--fs-sm); }
  .hero__search .icon-btn { width: 40px; height: 40px; }
}

/* ---------- Konu şeridi ---------- */
.topics { position: relative; z-index: 2; margin-top: calc(-1 * var(--sp-7)); }
.topics__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.topic {
  display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%;
  padding: var(--sp-4) var(--sp-2) var(--sp-3); text-align: center; text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.topic:hover { border-color: #D3DAE3; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.topic__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-2); border-radius: 50%; color: var(--tone); background: var(--tone-bg); }
.topic__icon svg { stroke-width: 2.2; }
.topic__name { font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.topic__short { display: none; font-size: var(--fs-xs); color: var(--c-subtle); line-height: 1.3; }
@media (min-width: 640px) { .topics__list { grid-template-columns: repeat(4, 1fr); } .topic__short { display: block; } }
@media (min-width: 1100px) {
  .topics__list { grid-template-columns: repeat(8, 1fr); gap: var(--sp-3); }
  .topics__more { display: none; }
  .topic { padding: var(--sp-5) var(--sp-2) var(--sp-4); }
  .topic__icon { width: 56px; height: 56px; }
}

/* ---------- Bölüm başlıkları ---------- */
.section { padding-top: var(--sp-7); }
.section--tight { padding-top: var(--sp-6); }
@media (min-width: 1100px) { .section { padding-top: var(--sp-8); } .section--tight { padding-top: var(--sp-7); } }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.section-head__title { display: flex; align-items: center; gap: var(--sp-3); }
.section-head__icon { display: grid; place-items: center; color: var(--c-green-strong); }
.section-head__icon svg { width: 32px; height: 32px; stroke-width: 2.2; }
.section-head__sub { font-size: var(--fs-sm); color: var(--c-subtle); margin-top: 2px; }
.more-link {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); text-decoration: none; white-space: nowrap;
}
.more-link:hover { color: var(--c-ink); }
.more-link svg { transition: transform var(--dur) var(--ease); }
.more-link:hover svg { transform: translateX(3px); }

/* ---------- Kart rayları ---------- */
.rail { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rail--4 { grid-template-columns: repeat(4, 1fr); } .rail--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .rail--5 { grid-template-columns: repeat(5, 1fr); } }
.rail > li { display: flex; }
.rail .card { flex: 1; }
.card__media { position: relative; }
.card__media--short { aspect-ratio: 2 / 1; }
.card__desc { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.meta-time { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--c-subtle); font-variant-numeric: tabular-nums; }
.card--roadmap .card__body { gap: var(--sp-3); }
.card--roadmap .steps { margin-top: 0; }
.card--decision .card__body { padding-right: var(--sp-7); }
.card__arrow { position: absolute; right: var(--sp-4); bottom: var(--sp-4); color: var(--c-subtle); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.card:hover .card__arrow { color: var(--c-ink); transform: translateX(3px); }
.vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--c-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 4px 14px -4px rgb(15 23 42 / 0.35);
}
.vs-text { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center; font-weight: 700; font-size: var(--fs-md); }
/* Mobilde kart rayları yatay kaydırılabilir şerit */
@media (max-width: 639px) {
  .rail--5, .rail--4 {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--sp-3);
    scrollbar-width: none;
  }
  .rail--5::-webkit-scrollbar, .rail--4::-webkit-scrollbar { display: none; }
  .rail--5 > li, .rail--4 > li { scroll-snap-align: start; }
}

/* ---------- Üçlü panel: Yolunu Sor / Kısa Yol / Araçlar ---------- */
.trio { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(2, 1fr); } .panel--ask { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .trio { grid-template-columns: 1fr 1.2fr 1fr; align-items: stretch; } .panel--ask { grid-column: auto; } }
.panel {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.panel__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); }
.panel__heading { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.panel__icon { display: grid; place-items: center; }
.panel__icon--zap svg { fill: var(--c-green); stroke: var(--c-green-strong); width: 30px; height: 30px; }
.panel__icon--tools { width: 40px; height: 40px; border-radius: 10px; background: #14B8A6; color: #fff; }
.panel--ask { background: var(--c-green-soft); border-color: #CDEFD9; gap: var(--sp-3); }
.panel__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--c-green-text); font-size: var(--fs-lg); }
.panel__brand svg { color: var(--c-green-strong); }
.badge--new { background: #FDE68A; color: #78350F; }
.panel__title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.panel__text { font-size: var(--fs-sm); color: #335145; }
.ask-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: auto; }
.ask-form textarea {
  width: 100%; resize: vertical; min-height: 96px; padding: var(--sp-4);
  border: 1px solid #D6EEDD; border-radius: var(--r-md); background: #fff; font-size: var(--fs-sm); line-height: 1.5;
}
.ask-form textarea:focus { outline: none; border-color: var(--c-green-strong); box-shadow: 0 0 0 3px rgb(34 197 94 / 0.2); }
.ask-form textarea::placeholder { color: var(--c-subtle); }
.btn--block { width: 100%; min-height: 48px; }

.qa-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.qa {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.qa:hover { border-color: #CBD5E1; background: var(--c-surface-2); }
.qa__icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: var(--c-surface-2); border: 1px solid var(--c-line); }
.qa__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.qa__text strong { font-size: var(--fs-sm); font-weight: 600; }
.qa__text span { font-size: var(--fs-xs); color: var(--c-subtle); }
.qa__chev { color: var(--c-subtle); flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.qa:hover .qa__chev { transform: translateX(2px); color: var(--c-ink); }

.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
@media (min-width: 768px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } .tool-grid li:nth-child(n+7) { display: none; } }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); height: 100%;
  padding: var(--sp-3) var(--sp-1); text-align: center; text-decoration: none;
  border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tool:hover { border-color: #CBD5E1; background: var(--c-surface-2); }
.tool__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--tone); background: var(--tone-bg); }
@media (max-width: 639px) { .panel__head .more-link { font-size: var(--fs-xs); } .panel { padding: var(--sp-4); } }

/* ---------- Mobil alt sekme çubuğu ---------- */
.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.96); border-top: 1px solid var(--c-line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0;
    font-size: 11px; font-weight: 500; color: var(--c-subtle); text-decoration: none;
  }
  .tabbar a[aria-current="page"] { color: var(--c-green-text); font-weight: 700; }
  .tabbar a[aria-current="page"] svg { color: var(--c-green-strong); }
  body:has(.tabbar) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   İÇERİK SAYFALARI, LİSTELER, ARAMA
   ========================================================= */

/* ---------- Konum çubuğu ---------- */
.crumbs { padding-top: var(--sp-5); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: var(--fs-sm); color: var(--c-subtle); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.crumbs svg { color: #94A3B8; }

/* ---------- Makale ---------- */
.article__head { padding-block: var(--sp-5) var(--sp-4); max-width: 760px; display: flex; flex-direction: column; gap: var(--sp-3); }
.article__kicker { display: flex; align-items: center; gap: var(--sp-3); }
.article__topic { font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); text-decoration: none; }
.article__topic:hover { color: var(--c-ink); text-decoration: underline; }
.article__title { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.article__goal { font-size: var(--fs-lg); color: var(--c-muted); line-height: 1.5; max-width: 62ch; }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); color: var(--c-subtle); }
.article__meta span { display: inline-flex; align-items: center; gap: 6px; }

.article__layout { display: grid; gap: var(--sp-6); }
@media (min-width: 1100px) { .article__layout { grid-template-columns: minmax(0, 760px) 1fr; gap: var(--sp-8); } }
.article__main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.article__aside { display: none; }
@media (min-width: 1100px) {
  .article__aside { display: block; }
  .article__aside .toc { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
  .toc--inline { display: none; }
}

.demo-banner {
  display: flex; align-items: flex-start; gap: var(--sp-2); max-width: 760px; margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; font-size: var(--fs-sm);
}
.demo-banner svg { flex-shrink: 0; margin-top: 2px; }

/* Kısa cevap: sayfanın ilk işi (roadmap 2.2) */
.answer { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-green-soft); border: 1px solid #CDEFD9; }
.answer__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-green-text); margin-bottom: var(--sp-2); }
.answer__text { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; color: var(--c-ink); font-weight: 500; }

.article__cover { margin: 0; }
.article__cover img { width: 100%; height: auto; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.article__cover figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-subtle); }

.facts { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.fact { padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2); font-size: var(--fs-sm); line-height: 1.55; }
.fact__label { font-weight: 700; color: var(--c-ink); margin-bottom: 4px; }

/* ---------- Metin gövdesi ---------- */
.prose { font-size: 1.0625rem; line-height: 1.7; color: #1E293B; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--c-ink); margin-top: var(--sp-7); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.prose h2 + * { margin-top: var(--sp-3); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--c-green-strong); }
.prose a { color: var(--c-green-text); font-weight: 500; }
.prose strong { color: var(--c-ink); }

.howto { display: flex; flex-direction: column; gap: var(--sp-3); }
.howto__step { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.howto__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.howto__title { font-weight: 700; color: var(--c-ink); line-height: 1.4; padding-top: 4px; }
.howto__text { margin-top: 4px; font-size: var(--fs-md); color: var(--c-muted); line-height: 1.6; }
.howto__fig { margin: var(--sp-3) 0 0; }
.howto__fig img { width: 100%; height: auto; border-radius: var(--r-md); aspect-ratio: 16 / 9; object-fit: cover; }
.howto__fig figcaption { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-subtle); }

.checklist { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 !important; }
.checklist li { position: relative; padding-left: 30px; margin: 0 !important; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--t-harita-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 14px;
}

.note { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); font-size: var(--fs-md); line-height: 1.6; }
.note__title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--c-ink); margin-bottom: 4px; }
.note--kosul, .note--uyari { background: #FFFBEB; border-color: #FDE68A; }
.note--kosul .note__title svg, .note--uyari .note__title svg { color: #B45309; }
.note--hata { background: #FEF2F2; border-color: #FECACA; }
.note--hata .note__title svg { color: #B91C1C; }
.note--ipucu .note__title svg { color: var(--c-green-strong); }
.note--done { background: var(--c-green-soft); border-color: #CDEFD9; }
.note--done .note__title svg { color: var(--c-green-strong); }

.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
.table-wrap caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 700; color: var(--c-ink); }
.table-wrap th, .table-wrap td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-top: 1px solid var(--c-line); }
.table-wrap thead th { background: var(--c-surface-2); font-weight: 700; color: var(--c-ink); border-top: 0; }
.table-wrap tbody th { font-weight: 600; color: var(--c-ink); }

/* Yol Ayrımı */
.options { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .options { grid-template-columns: repeat(2, 1fr); } }
.option { padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.option__name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.option__summary { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--c-muted); }
.option__label { margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.option__list { margin-top: var(--sp-2); padding-left: 1.1rem; font-size: var(--fs-sm); line-height: 1.55; }
.option__list li + li { margin-top: 4px; }
.option__list--watch li::marker { color: #B45309; }
.conditions { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.condition { display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-line); }
@media (min-width: 640px) { .condition { grid-template-columns: 1fr 1.4fr; gap: var(--sp-4); } }
.condition dt { font-weight: 700; color: var(--c-ink); }
.condition dd { margin: 0; color: var(--c-muted); }

/* Yol haritası */
.roadmap { display: flex; flex-direction: column; gap: var(--sp-3); }
.roadmap__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.roadmap__head h2 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; }
.roadmap__progress { font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.roadmap__bar { height: 6px; border-radius: 999px; background: var(--c-line); overflow: hidden; }
.roadmap__bar span { display: block; height: 100%; background: var(--c-green); transform-origin: left; transform: scaleX(0); transition: transform 320ms var(--ease); }
.roadmap__note { font-size: var(--fs-xs); color: var(--c-subtle); }
.stages { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-2); }
.stage__head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.stage__num { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--c-green); color: #fff; font-weight: 800; font-size: var(--fs-sm); }
.stage__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; padding-top: 4px; }
.stage__desc { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.stage__steps { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0 0 15px; padding-left: calc(var(--sp-3) + 16px); border-left: 2px solid var(--c-line); }
.step { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.step.is-done { background: var(--c-green-soft); border-color: #CDEFD9; }
.step summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.step summary::-webkit-details-marker { display: none; }
.step__title { flex: 1; font-weight: 600; line-height: 1.35; }
.step.is-done .step__title { text-decoration: line-through; text-decoration-color: rgb(15 23 42 / 0.35); }
.step__opt { font-size: var(--fs-xs); font-weight: 500; color: var(--c-subtle); }
.step__effort { font-size: var(--fs-xs); color: var(--c-subtle); white-space: nowrap; }
.step__chev { color: var(--c-subtle); transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.step details[open] .step__chev { transform: rotate(90deg); }
.step__body { margin: 0; padding: 0 var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.55; }
.step__body dt { font-weight: 700; color: var(--c-ink); }
.step__body dd { margin: 2px 0 0; color: var(--c-muted); }
.step__body a { color: var(--c-green-text); font-weight: 600; }
.step__done { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-3); font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); cursor: pointer; }
.step__done input { width: 18px; height: 18px; accent-color: var(--c-green-strong); }

/* İçindekiler */
.toc { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-sm); }
.toc__title { font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-2); }
.toc ol { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; }
.toc a { color: var(--c-muted); text-decoration: none; }
.toc a:hover { color: var(--c-ink); text-decoration: underline; }

.next { display: flex; flex-direction: column; gap: var(--sp-2); }
.next h2, .sources h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.next__link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; font-weight: 600; }
.next__link span:not(.badge) { flex: 1; }
.next__link:hover { border-color: #CBD5E1; background: var(--c-surface-2); }

.sources { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.sources ul { padding-left: 1.1rem; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 6px; }
.sources a { color: var(--c-green-text); }

.feedback { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface-2); border: 1px solid var(--c-line); display: flex; flex-direction: column; gap: var(--sp-3); }
.feedback__title { font-size: var(--fs-lg); font-weight: 700; }
.feedback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.feedback__form { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.feedback__form textarea { width: 100%; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; font-size: var(--fs-sm); resize: vertical; }
.feedback__form textarea:focus { outline: none; border-color: var(--c-green-strong); box-shadow: 0 0 0 3px rgb(34 197 94 / 0.2); }
.feedback__form .btn { align-self: flex-start; }
.feedback__status { font-size: var(--fs-sm); color: var(--c-green-text); font-weight: 500; }
.feedback__status:empty { display: none; }

/* ---------- Listeler ---------- */
.listing { padding-bottom: var(--sp-6); }
.listing__head { display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-5); }
.listing__head .h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.listing__icon { display: grid; place-items: center; color: var(--c-green-strong); }
.listing__icon svg { width: 40px; height: 40px; stroke-width: 2.2; }
.listing__icon--kisa svg { fill: var(--c-green); stroke: var(--c-green-strong); }
.listing__head--search { display: block; padding-block: var(--sp-6) var(--sp-4); }
.listing__head--search .goal-search { box-shadow: var(--shadow-md); }
.topic__icon--lg { width: 64px; height: 64px; margin: 0; }
.topic-intro { margin-bottom: var(--sp-5); }

.chips-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px 0 var(--sp-4); margin-bottom: var(--sp-2); scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.chips-row li { flex-shrink: 0; }
.chips-row .chip { flex-shrink: 0; }

.rail--grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .rail--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rail--grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) { .rail--grid { grid-auto-flow: row; overflow: visible; margin: 0; padding: 0; } }
.qa-list--page { max-width: 760px; }
.topic-group + .topic-group { margin-top: var(--sp-7); }

.topic-list { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 760px; }
.topic-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; background: var(--c-surface); }
a.topic-row:hover { border-color: #CBD5E1; background: var(--c-surface-2); }
.topic-row .topic__icon { margin: 0; width: 44px; height: 44px; flex-shrink: 0; }
.topic-row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.topic-row__text span { font-size: var(--fs-sm); color: var(--c-subtle); }
.topic-row__count { font-size: var(--fs-xs); color: var(--c-subtle); white-space: nowrap; }
.topic-row.is-soon { opacity: 0.7; }

/* ---------- Arama ---------- */
.search__count { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-4); }
.search-results { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 760px; }
.result { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; }
.result:hover { border-color: #CBD5E1; background: var(--c-surface-2); }
.result__meta { display: flex; align-items: center; gap: var(--sp-2); }
.result__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.result__text { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.search__topics { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.search__topics .chips-row { flex-wrap: wrap; overflow: visible; }

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-6); border: 1px dashed #CBD5E1; border-radius: var(--r-lg); max-width: 760px; }
.related { padding-bottom: var(--sp-4); }

/* Yönetim önizleme şeridi */
.preview-bar { position: sticky; top: 0; z-index: 90; background: var(--c-ink); color: #fff; font-size: var(--fs-sm); padding: 8px var(--gutter); text-align: center; }
.preview-bar a { color: #fff; }

/* ---------- Yol Ayrımı karar motoru ---------- */
.decide { padding: var(--sp-5); border: 1px solid #CDEFD9; border-radius: var(--r-lg); background: var(--c-green-soft); display: flex; flex-direction: column; gap: var(--sp-4); }
.prose .decide h2 { margin: 0; font-size: var(--fs-h3); }
.decide__intro { font-size: var(--fs-sm); color: #335145; }
.decide__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.decide__q { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.decide__q legend { width: 100%; font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.decide__must { font-size: var(--fs-xs); font-weight: 600; color: #92400E; background: #FEF3C7; border-radius: 6px; padding: 2px 6px; margin-left: 4px; }
.decide__a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #D6EEDD; cursor: pointer; font-size: var(--fs-sm); }
.decide__a:has(input:checked) { border-color: var(--c-green-strong); box-shadow: 0 0 0 2px rgb(34 197 94 / 0.25); font-weight: 600; }
.decide__a input { accent-color: var(--c-green-strong); }
.decide__result:empty { display: none; }
.decide__result { background: #fff; border-radius: var(--r-md); padding: var(--sp-4); border: 1px solid var(--c-line); }
.decide__verdict { font-weight: 700; font-size: var(--fs-lg); color: var(--c-ink); }
.prose .decide__list { list-style: none; padding: 0; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.decide__list > li { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-surface-2); }
.decide__list > li.is-out { opacity: 0.7; }
.decide__list > li > span { color: #991B1B; font-weight: 600; }
.decide__list ul { padding-left: 1.1rem; margin-top: 4px; }

/* ---------- Araçlar ve 0’dan Yol ---------- */
.tool-box { padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--sp-4); }
.tool-form { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .tool-form { grid-template-columns: repeat(2, 1fr); } .tool-form .btn { grid-column: 1 / -1; justify-self: start; } }
.tf { display: flex; flex-direction: column; gap: 6px; }
.tf[hidden] { display: none; }
.tf label { font-size: var(--fs-sm); font-weight: 600; }
.tf__in { display: flex; align-items: stretch; border: 1px solid #CBD5E1; border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.tf__in:focus-within { border-color: var(--c-green-strong); box-shadow: 0 0 0 3px rgb(34 197 94 / 0.18); }
.tf__in input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font-size: var(--fs-md); outline: none; font-variant-numeric: tabular-nums; }
.tf__in span { display: grid; place-items: center; padding: 0 12px; background: var(--c-surface-2); color: var(--c-subtle); font-size: var(--fs-sm); }
.tf select { min-height: 44px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: var(--r-sm); background: #fff; }
.tool-result { padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-green-soft); border: 1px solid #CDEFD9; }
.tool-result.is-error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; font-weight: 500; }
.tool-dl { margin: 0; display: grid; gap: var(--sp-2); }
.tool-dl div { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px dashed #CDEFD9; padding-bottom: 6px; }
.tool-dl dt { color: var(--c-muted); }
.tool-dl dd { margin: 0; font-weight: 800; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.tool-privacy { color: var(--c-subtle); }
.tool-grid--page { max-width: 860px; }
@media (min-width: 768px) { .tool-grid--page { grid-template-columns: repeat(4, 1fr); } .tool-grid--page li:nth-child(n+7) { display: block; } }
.module-pos { font-size: var(--fs-sm); font-weight: 600; color: var(--c-green-text); }
.modules h2 { font-size: var(--fs-h3); font-weight: 800; margin-bottom: var(--sp-3); }
.modules__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.module-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; }
.module-row:hover { border-color: #CBD5E1; background: var(--c-surface-2); }
.module-row__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--t-sifir-bg); color: var(--t-sifir-fg); font-weight: 800; flex-shrink: 0; }
.module-row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.module-row__text span { font-size: var(--fs-sm); color: var(--c-subtle); }
.module-nav { display: grid; gap: var(--sp-2); }
@media (min-width: 640px) { .module-nav { grid-template-columns: 1fr 1fr; } }

/* ---------- Yolunu Sor ---------- */
.ask { max-width: 820px; padding-block: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.ask__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.ask__form { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-green-soft); border: 1px solid #CDEFD9; }
.ask__form .btn { align-self: flex-start; }
.ask__result { display: flex; flex-direction: column; gap: var(--sp-4); }
.ask__block { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.ask__block--main { border-color: #CDEFD9; box-shadow: var(--shadow-md); }
.ask__label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-green-text); }
.ask__goal { font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); }
.ask__intents { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.flash-inline { color: #991B1B; font-weight: 500; }

/* ---------- Kaydet ve alt bilgi menüsü ---------- */
.save-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--fs-sm); color: var(--c-muted); }
.save-btn[hidden] { display: none; }
.save-btn:hover { border-color: #CBD5E1; color: var(--c-ink); }
.save-btn[aria-pressed="true"] { background: var(--c-green-soft); border-color: #CDEFD9; color: var(--c-green-text); font-weight: 600; }
.save-btn[aria-pressed="true"] svg { fill: currentColor; }
.saved-list li { display: flex; align-items: center; gap: var(--sp-2); }
.saved-list .result { flex: 1; }
.site-footer__nav { flex-basis: 100%; order: 3; }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
.site-footer__nav a { color: var(--c-muted); text-decoration: none; }
.site-footer__nav a:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer__copy { order: 4; }

.src-pending { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--r-sm); padding: 6px 10px; }

/* Hazırlanış ve inceleme (E-E-A-T şeffaflık kutusu) */
.prep { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-soft, #F8FAFC); }
.prep h2 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.prep__list { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.prep__list div { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: var(--sp-2); }
.prep__list dt { font-weight: 700; color: var(--c-ink); }
.prep__list dd { margin: 0; color: var(--c-muted); }
.prep a { color: var(--c-green-text); }
@media (max-width: 520px) { .prep__list div { grid-template-columns: 1fr; gap: 2px; } }