:root {
  /* Blueprint palette — engineering blue + warm stone + amber data accent */
  /* --brand is the canonical accent; --blue/--danger/--accent are backward-compat aliases */
  --brand: #1F4E79;
  --brand-deep: #163A5C;
  --brand-soft: #E7EEF5;
  --blue: #1F4E79;
  --blue-soft: #E7EEF5;
  --blue-deep: #163A5C;
  --amber: #8A520F;        /* darkened for AA on tints */
  --amber-soft: #F6EBDD;
  --paper: #F6F4F1;
  --ink: #1C1B1A;

  /* Section tints — blue-tinted surfaces so sections alternate (blue theme) */
  --rose: #E7EEF5;        /* soft blue tint */
  --rose-soft: #F6F4F1;   /* very light blue */
  --sage: #E7EEF5;        /* soft blue tint */
  --sage-soft: #F6F4F1;   /* very light blue */
  --sand: #F6F4F1;        /* warm stone */

  --success: #16A34A;
  --warning: #D97706;
  /* --danger is the de-facto brand accent (blue) across the site; kept as-is */
  --danger: #1F4E79;
  --accent: #1F4E79;
  --surface: #FFFFFF;
  --text: #1C1B1A;
  --muted: #4A4640;        /* darkened for AA on tints */
  --border: #E5E1DB;
  /* Radius scale (one canonical scale) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius: 16px;          /* backward-compat alias = --radius-lg */

  /* Backward-compatible aliases for legacy inline styles (Blueprint values) */
  --white: #FFFFFF;
  --dark: #1C1B1A;
  --brown: #1C1B1A;
  --orange: #1F4E79;
  --red: #1F4E79;
  --cream: #F6F4F1;
  --tan: #6E6A64;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Archivo', sans-serif; background:var(--surface); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* ── HERO ── */
.hero {
  min-height:100dvh; background:var(--rose-soft);
  display:flex; flex-direction:column;
  justify-content:center; padding:120px 60px 96px;
  position:relative; overflow:hidden;
}
.hero-bg-text { position:absolute; right:-20px; bottom:-40px; font-family:'Archivo', sans-serif; font-size:320px; font-weight:700; color:rgba(17,24,39,0.04); line-height:1; pointer-events:none; letter-spacing:-10px; user-select:none; }
.hero-glow { position:absolute; top:20%; right:10%; width:500px; height:500px; background:radial-gradient(circle, rgba(31,78,121,0.12), transparent 60%); pointer-events:none; }
.hero-eyebrow { font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--danger); margin-bottom:24px; display:flex; align-items:center; gap:14px; }
.hero-eyebrow::before { content:''; width:40px; height:2px; background:var(--danger); }
.hero h1 { font-family:'Archivo', sans-serif; font-size:clamp(48px, 7vw, 88px); font-weight:600; text-transform:uppercase; color:var(--text); line-height:1.05; margin-bottom:32px; position:relative; z-index:1; max-width:900px; }
.hero h1 em { font-style:normal; color:var(--danger); }
.hero h1 .outline { -webkit-text-stroke:2px rgba(17,24,39,0.25); color:transparent; }
.hero-desc { font-size:18px; font-weight:400; color:var(--muted); max-width:580px; line-height:1.7; margin-bottom:48px; position:relative; z-index:1; }
.hero-actions { display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
.btn-primary { background:var(--blue); color:var(--surface); padding:16px 36px; font-family:'Archivo', sans-serif; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:2px; text-decoration:none; display:inline-block; border-radius:var(--radius-sm); transition:background 0.2s, transform 0.2s, box-shadow 0.2s; }
.btn-primary:hover { background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 10px 24px rgba(31,78,121,0.18); }
.btn-primary:active { transform:translateY(0) scale(0.98); }
.btn-ghost { color:var(--muted); font-size:14px; font-weight:500; text-decoration:none; display:flex; align-items:center; gap:8px; transition:color 0.2s; }
.btn-ghost:hover { color:var(--text); }
.btn-ghost::after { content:'→'; font-size:18px; }
.hero-stats { position:absolute; right:60px; bottom:80px; display:flex; flex-direction:column; gap:24px; z-index:1; }
.hero-stat { text-align:right; border-right:2px solid rgba(31,78,121,0.3); padding-right:20px; }
.hero-stat-val { font-family:'Archivo', sans-serif; font-size:36px; font-weight:600; color:var(--amber); line-height:1; }
.hero-stat-label { font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; }

/* ── KATEGORİLER ── */
.categories { background:var(--surface); padding:0 60px; border-bottom:1px solid var(--border); display:flex; align-items:center; overflow-x:auto; }
.cat-item { padding:18px 28px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; transition:all 0.2s; text-decoration:none; }
.cat-item:hover, .cat-item.active { color:var(--text); border-bottom-color:var(--brand); }

/* ── SECTION ── */
.section { padding:80px 60px; }
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:48px; }
.section-title { font-family:'Archivo', sans-serif; font-size:42px; font-weight:600; text-transform:uppercase; color:var(--text); line-height:1; }
.section-title span { color:var(--danger); }
.section-link { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--danger); text-decoration:none; display:flex; align-items:center; gap:6px; }
.section-link::after { content:'→'; }
.section-eyebrow { font-family:'Space Mono', monospace; font-size:13px; font-weight:700; color:var(--brand); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.section-eyebrow::before { content:''; width:30px; height:2px; background:var(--brand); }

/* ── PAGE HERO (shared across inner pages) ── */
.page-hero { background:var(--rose-soft); padding:120px 60px 48px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; right:-60px; top:-60px; width:400px; height:400px; background:radial-gradient(circle, rgba(31,78,121,0.12), transparent 65%); }
.page-eyebrow { font-family:'Space Mono', monospace; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--brand); margin-bottom:16px; display:flex; align-items:center; gap:12px; z-index:1; position:relative; }
.page-eyebrow::before { content:''; width:30px; height:2px; background:var(--brand); }
.page-title-big { font-family:'Archivo', sans-serif; font-size:clamp(40px,6vw,64px); font-weight:600; text-transform:uppercase; color:var(--text); line-height:1; position:relative; z-index:1; }
.page-title-big span { color:var(--brand); }
.page-sub { font-size:16px; color:var(--muted); margin-top:16px; max-width:600px; line-height:1.6; position:relative; z-index:1; }
.page-desc { font-size:16px; color:var(--muted); margin-top:12px; max-width:600px; line-height:1.6; }
@media(max-width:768px) { .page-hero { padding:90px 24px 40px; } .page-title-big { font-size:40px; } }

/* ── GRID PAPER (shared blueprint/graph-paper background) ──
   Reusable two-layer grid (120px major + 24px minor) used inside
   positioned, overflow:hidden containers (e.g. .page-hero). Drop a
   <div class="grid-paper"></div> as the first child; content above it
   needs position:relative + z-index (page-eyebrow/title/sub already have it). */
.grid-paper {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(17,24,39,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,24,39,0.05) 1px,transparent 1px),
    linear-gradient(rgba(17,24,39,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,24,39,0.03) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}

/* ── MAKAle GRID ── */
.articles-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; }
.article-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit; transition:background 0.2s, box-shadow 0.2s; position:relative; overflow:hidden; }
.article-card:hover { background:var(--rose-soft); box-shadow:0 8px 24px rgba(17,24,39,0.06); }
.article-img { height:160px; background-size:cover; background-position:center; margin:-36px -36px 0; }
.article-cat { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--danger); display:flex; align-items:center; gap:8px; }
.article-cat::before { content:''; width:20px; height:2px; background:currentColor; }
.article-title { font-family:'Archivo', sans-serif; font-size:20px; font-weight:600; text-transform:uppercase; color:var(--text); line-height:1.1; transition:color 0.2s; }
.article-excerpt { font-size:14px; color:var(--muted); line-height:1.6; font-weight:400; }
.article-meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--border); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.article-tag { background:var(--sage-soft); padding:3px 10px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text); }
.empty-state { padding:60px; text-align:center; color:var(--muted); }
.empty-state a { color:var(--danger); }

/* ── HAKKIMDA TEASER ── */
.about-teaser { background:var(--sage-soft); display:grid; grid-template-columns:1fr 1fr; min-height:400px; border-radius:var(--radius-lg); overflow:hidden; }
.about-content { padding:80px 60px; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.about-label { font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--danger); }
.about-title { font-family:'Archivo', sans-serif; font-size:52px; font-weight:600; text-transform:uppercase; color:var(--text); line-height:1; }
.about-desc { font-size:16px; font-weight:400; color:var(--muted); line-height:1.7; max-width:480px; }
.about-stats { display:flex; gap:40px; margin-top:12px; }
.about-stat-val { font-family:'Archivo', sans-serif; font-size:40px; font-weight:600; color:var(--danger); line-height:1; }
.about-stat-label { font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; }
.about-visual { background:var(--rose); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.about-visual-text { font-family:'Archivo', sans-serif; font-size:200px; font-weight:700; color:rgba(17,24,39,0.05); line-height:1; letter-spacing:-5px; user-select:none; }
.about-visual-badge { position:absolute; background:var(--text); padding:20px 32px; font-family:'Archivo', sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--surface); border-radius:var(--radius-sm); transform:rotate(-3deg); box-shadow:0 20px 60px rgba(17,24,39,0.2); }

/* ── DANIŞMANLIK ── */
.consulting { background:var(--rose-soft); border-top:1px solid var(--border); }
.consulting-inner { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:16px; align-items:stretch; }
.consulting-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px 36px; display:flex; flex-direction:column; gap:14px; transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.consulting-card:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(31,78,121,0.08); border-color:var(--blue); }
.consulting-card.dark { background:var(--blue); border-color:var(--blue); }
.consulting-card.dark:hover { box-shadow:0 20px 40px rgba(31,78,121,0.25); }
.consulting-card.dark .consulting-title { color:var(--surface); }
.consulting-card.dark .consulting-desc { color:rgba(255,255,255,0.78); }
.consulting-card.dark .consulting-link::after { color:var(--surface); }
.consulting-no { font-family:'Archivo', sans-serif; font-size:48px; font-weight:700; color:var(--border); line-height:1; }
.consulting-card.dark .consulting-no { color:rgba(255,255,255,0.25); }
.consulting-icon { font-size:28px; }
.consulting-title { font-family:'Archivo', sans-serif; font-size:24px; font-weight:600; text-transform:uppercase; color:var(--text); line-height:1; }
.consulting-desc { font-size:14px; color:var(--muted); line-height:1.6; font-weight:400; }
.consulting-card.dark .consulting-desc { color:rgba(255,255,255,0.78); }
.consulting-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.consulting-list li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.consulting-list li::before { content:'✓'; color:var(--danger); font-weight:700; flex-shrink:0; }
.consulting-card.dark .consulting-list li { color:rgba(255,255,255,0.78); }
.consulting-card.dark .consulting-list li::before { color:#fff; }
.consulting-link { margin-top:auto; display:block; text-align:center; padding:12px 24px; font-family:'Archivo', sans-serif; font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; text-decoration:none; border-radius:var(--radius-sm); background:var(--brand); color:var(--surface) !important; transition:background 0.2s; }
.consulting-link:hover { background:var(--brand-deep); }
.consulting-card.dark .consulting-link { background:var(--surface); color:var(--blue) !important; }
.consulting-card.dark .consulting-link:hover { background:var(--rose-soft); }

/* ── MOBİL ── */
@media (max-width: 768px) {
  .hero { padding:100px 24px 60px; min-height:100svh; }
  .hero h1 { font-size:48px; }
  .hero-desc { font-size:15px; }
  .hero-stats { position:static; flex-direction:row; gap:24px; margin-top:48px; border-top:1px solid rgba(17,24,39,0.1); padding-top:24px; }
  .hero-stat { text-align:left; border-right:none; border-left:2px solid rgba(31,78,121,0.3); padding-right:0; padding-left:14px; }
  .hero-stat-val { font-size:26px; }
  .categories { padding:0 20px; }
  .section { padding:48px 20px; }
  .section-title { font-size:30px; }
  .articles-grid { grid-template-columns:1fr; gap:12px; }
  .article-card { padding:24px; }
  .about-teaser { grid-template-columns:1fr; }
  .about-visual { display:none; }
  .about-content { padding:48px 24px; }
  .about-title { font-size:40px; }
  .consulting { padding:48px 20px; }
  .consulting-inner { grid-template-columns:1fr; gap:12px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size:40px; }
  .hero-stats { flex-direction:column; gap:16px; }
}

/* ── POPÜLER KONULAR ── */
.populer-section { background:var(--surface); }
.populer-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.populer-kart {
  background:var(--surface); text-decoration:none;
  color:inherit; display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--radius);
  transition:background 0.2s, box-shadow 0.2s; overflow:hidden;
}
.populer-kart:hover { background:var(--rose-soft); box-shadow:0 8px 24px rgba(17,24,39,0.06); }
.populer-kart-img {
  width:100%; aspect-ratio:16/9;
  background:var(--rose-soft); background-size:cover;
  background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.populer-kart-img--bos {
  background:var(--rose-soft);
}
.populer-kart-img--bos span {
  font-family:'Archivo',sans-serif;
  font-size:48px; font-weight:600;
  color:rgba(17,24,39,0.08);
  text-transform:uppercase;
}
.populer-kart-body { padding:16px 20px; flex:1; display:flex; flex-direction:column; gap:6px; }
.populer-kart-kat {
  font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--danger);
}
.populer-kart-baslik {
  font-family:'Archivo',sans-serif;
  font-size:18px; font-weight:600;
  text-transform:uppercase; color:var(--text);
  line-height:1.15;
}
.populer-kart:hover .populer-kart-baslik { color:var(--danger); }
.populer-kart-meta { font-size:13px; color:var(--muted); margin-top:auto; padding-top:8px; }

/* Makale kartı kapak görseli */
.article-cover {
  height:180px;
  background-size:cover; background-position:center;
  margin:-36px -36px 0;
}

/* Sitemap linki */
@media(max-width:768px) {
  .populer-grid { grid-template-columns:1fr; }
}

/* ── MOZAİK POPÜLER KONULAR ── */
.populer-section { background:var(--surface); padding:80px 60px; }

.mozaik {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
  height:480px;
}

.mozaik-item {
  position:relative; overflow:hidden;
  background:var(--rose-soft);
  border-radius:var(--radius);
  text-decoration:none; color:inherit;
  cursor:pointer;
}
.mozaik-item.ana { grid-row:span 2; }

/* Arka plan görseli */
.mozaik-item-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 0.4s ease;
}
.mozaik-item:hover .mozaik-item-bg { transform:scale(1.04); }

/* Overlay */
.mozaik-item::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(31,78,121,0.1) 0%, rgba(31,78,121,0.9) 100%);
  transition:opacity 0.3s;
}
.mozaik-item:hover::after { opacity:0.85; }

/* Placeholder — görsel yokken */
.mozaik-placeholder {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo', sans-serif;
  font-size:72px; font-weight:600;
  color:rgba(17,24,39,0.05);
  text-transform:uppercase; letter-spacing:-3px;
  z-index:0;
}

/* İçerik */
.mozaik-content {
  position:absolute; bottom:0; left:0; right:0;
  padding:20px 24px; z-index:2;
}
.mozaik-item.ana .mozaik-content { padding:28px 32px; }

.mozaik-kat {
  font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--danger); margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.mozaik-kat::before { content:''; width:16px; height:2px; background:var(--danger); }

.mozaik-baslik {
  font-family:'Archivo', sans-serif;
  font-weight:600; text-transform:uppercase;
  color:var(--text); line-height:1.1;
}
.mozaik-item.ana .mozaik-baslik { font-size:28px; }
.mozaik-item:not(.ana) .mozaik-baslik { font-size:16px; }

.mozaik-tarih {
  font-size:13px; color:var(--muted);
  margin-top:6px; font-weight:500;
}

/* Hover ok */
.mozaik-arrow {
  position:absolute; top:20px; right:20px;
  width:36px; height:36px;
  background:var(--text);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--surface);
  opacity:0; transform:translateY(-4px);
  transition:all 0.2s; z-index:2;
}
.mozaik-item:hover .mozaik-arrow { opacity:1; transform:translateY(0); }

/* Makale kartı cover */
.article-cover {
  height:180px;
  background-size:cover; background-position:center;
  margin:-36px -36px 0;
}

/* ── MAKALE SONU CTA ── */
.makale-cta-kutu {
  background:var(--rose); padding:32px 36px;
  margin:40px 0; display:flex;
  align-items:center; gap:28px;
  border-radius:var(--radius);
  border-left:4px solid var(--danger);
}
.makale-cta-ikon { font-size:36px; flex-shrink:0; }
.makale-cta-metin { flex:1; }
.makale-cta-metin h4 {
  font-family:'Archivo', sans-serif;
  font-size:22px; font-weight:600;
  text-transform:uppercase; color:var(--text);
  margin-bottom:6px;
}
.makale-cta-metin p { font-size:14px; color:var(--muted); line-height:1.5; }
.makale-cta-btn {
  background:var(--brand); color:var(--surface) !important;
  padding:12px 24px; font-family:'Archivo', sans-serif;
  font-size:14px; font-weight:600; text-transform:uppercase;
  letter-spacing:2px; text-decoration:none; white-space:nowrap;
  border-radius:var(--radius-sm);
  flex-shrink:0; transition:background 0.2s;
}
.makale-cta-btn:hover { background:var(--brand-deep); }

/* Sosyal takip kutusu */
.makale-sosyal {
  display:flex; gap:10px; margin:24px 0;
}
.makale-sosyal a {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; color:var(--muted);
  text-decoration:none; transition:all 0.2s;
}
.makale-sosyal a:hover { background:var(--text); color:var(--surface); border-color:var(--text); }

@media(max-width:768px) {
  .populer-section { padding:48px 20px; }
  .mozaik { grid-template-columns:1fr; grid-template-rows:auto; height:auto; }
  .mozaik-item { height:200px; }
  .mozaik-item.ana { height:280px; grid-row:span 1; }
  .makale-cta-kutu { flex-direction:column; text-align:center; padding:24px; }
  .makale-sosyal { flex-direction:column; }
}

/* ── WHATSAPP BUTONU ── */
.whatsapp-btn {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:60px; height:60px; background:#25d366;
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4);
  text-decoration:none; transition:transform 0.2s, box-shadow 0.2s;
  animation:wa-pulse 2s infinite;
}
.whatsapp-btn:hover {
  transform:scale(1.1);
  box-shadow:0 6px 28px rgba(37,211,102,0.6);
}
.whatsapp-btn svg { width:32px; height:32px; fill:#fff; }
.whatsapp-tooltip {
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  background:var(--text); color:var(--surface); padding:8px 14px; white-space:nowrap;
  font-family:'Archivo',sans-serif; font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
  border-radius:var(--radius-sm);
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.whatsapp-tooltip::after {
  content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:var(--text);
}
.whatsapp-btn:hover .whatsapp-tooltip { opacity:1; }

@keyframes wa-pulse {
  0% { box-shadow:0 4px 20px rgba(37,211,102,0.4); }
  50% { box-shadow:0 4px 28px rgba(37,211,102,0.7); }
  100% { box-shadow:0 4px 20px rgba(37,211,102,0.4); }
}

/* ── MOBİL KENAR BOŞLUKLARI ── */
@media(max-width:768px) {
  .makale-layout { padding:28px 16px 60px !important; }
  .makale-icerik { font-size:15px; }
  .makale-icerik h2 { font-size:22px; }
  .makale-icerik h3 { font-size:18px; }
  .makale-icerik table { font-size:12px; }
  .makale-icerik table th, .makale-icerik table td { padding:8px 10px; }
  .whatsapp-btn { bottom:20px; right:20px; width:54px; height:54px; }
}

/* Mobil performans optimizasyonu */
@media(max-width:768px) {
  .whatsapp-btn { animation:none !important; }
  .hero-bg-text { display:none; }
  .hero-glow { display:none; }
}

/* ── SCROLL REVEAL (JS-gated, reduced-motion safe) ── */
/* Elements start hidden only when JS adds .js-reveal to <html>.
   Without JS, or under prefers-reduced-motion, content stays visible. */
html.js-reveal .reveal {
  opacity:0; transform:translateY(18px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change:opacity, transform;
}
html.js-reveal .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity:1; transform:none; transition:none; }
  .whatsapp-btn { animation:none; }
}

/* ── BLUEPRINT EDITORIAL: PULL-QUOTE + FOCUS UTILITIES ── */
/* Pull-quote / blockquote (MASTER §6) */
.pull-quote {
  background:var(--rose);
  border-left:4px solid var(--danger);
  border-radius:var(--radius);
  padding:24px 28px;
  font-style:italic;
}
.pull-quote strong { color:var(--danger); }

/* Visible focus state for interactive elements (MASTER §0.6) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* cursor:pointer on all clickable elements */
a, button, [role="button"], .cat-item, .mozaik-item, .hamburger { cursor:pointer; }

/* ── FORM CONTROLS (shared recipe, MASTER §6) ──
   Shared classes for all site forms: .form-field (wrapper),
   .form-label, .form-input, .form-check. Enforces the Blueprint
   form recipe: labels ≥13px Space Mono, 1px var(--border) border,
   var(--radius-sm) radius, var(--brand) focus ring, consistent padding. */
.form-field { margin-bottom:16px; }
.form-label {
  display:block; margin-bottom:6px;
  font-family:'Space Mono', monospace;
  font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted);
}
.form-input {
  width:100%; padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'Archivo', sans-serif;
  font-size:14px; color:var(--text);
  outline:none; transition:border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(31,78,121,0.15);
}
.form-input::placeholder { color:var(--muted); }
textarea.form-input { min-height:120px; resize:vertical; }
select.form-input { color:var(--text); }
select.form-input option { background:var(--surface); color:var(--text); }
/* Checkbox row */
.form-check { display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; }
.form-check input[type=checkbox] { width:17px; height:17px; margin-top:3px; accent-color:var(--brand); flex-shrink:0; cursor:pointer; }
.form-check label { font-size:13px; color:var(--muted); line-height:1.5; cursor:pointer; }
.form-check a { color:var(--brand); }

/* ── MODAL (shared recipe, MASTER §6) ──
   Shared classes for all site modals: .modal-overlay (fixed full-screen
   scrim), .modal (surface panel), .modal-close (consistent corner pill).
   Open/close state stays per-file (.aktif / .acik) so JS/onclick are
   untouched. Files that do NOT load style.css carry an inline copy of
   this recipe (using var(--danger) where --brand is undefined). */
.modal-overlay {
  position:fixed; inset:0; background:rgba(17,24,39,0.6);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal {
  background:var(--surface); border-radius:var(--radius);
  position:relative; width:100%;
}
.modal-close {
  position:absolute; top:14px; right:16px; z-index:10;
  background:var(--text); color:var(--surface);
  border:none; cursor:pointer; padding:8px 16px;
  font-family:'Archivo', sans-serif;
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; border-radius:var(--radius-sm);
  transition:background 0.2s;
}
.modal-close:hover { background:var(--brand-deep); }
.modal-close:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ── ICON (MASTER §0.6: no emojis as icons) ──
   Font Awesome 6 (loaded in includes/head.php). Icons inherit the
   container font-size; align with text baseline. */
.icon { font-size:1em; vertical-align:-0.125em; }