/*
  PsikologVan — Site Genel Stili
  --------------------------------------------------
  Kullanım:
  <link rel="stylesheet" href="/assets/css/psikologvan.css">
  - Bootstrap 5'le birlikte çalışır; değişkenleri override eder.
  - Canlı ama sade bir tasarım için token tabanlı.
*/

/*--------------------------------------------------
  1) Tasarım Token'ları (renk, tipografi, radius, gölge)
--------------------------------------------------*/
:root {
  color-scheme: light;

  /* Font ailesi */
  --pv-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

  /* Renk paleti (marka: teal + mercan) */
  --pv-primary: #0f766e;   /* teal */
  --pv-primary-600: #0b5f59;
  --pv-primary-100: #e6f5f4;

  --pv-secondary: #f97360; /* coral */
  --pv-secondary-600: #e15d49;
  --pv-secondary-100: #ffefeC;

  --pv-surface: #ffffff;
  --pv-bg: #fafafa;
  --pv-muted: #64748b;     /* slate-500 */
  --pv-text: #0f172a;      /* slate-900 */
  --pv-border: #e5e7eb;    /* gray-200 */

  --pv-success: #22c55e;
  --pv-warning: #f59e0b;
  --pv-danger:  #ef4444;
  --pv-info:    #0ea5e9;

  /* Radius & shadow */
  --pv-radius: 1.25rem;         /* 20px */
  --pv-radius-sm: .75rem;
  --pv-shadow: 0 10px 25px rgba(2, 6, 23, .08), 0 2px 8px rgba(2, 6, 23, .04);
  --pv-shadow-hover: 0 18px 40px rgba(2, 6, 23, .12), 0 6px 16px rgba(2, 6, 23, .08);

  /* İçerik genişlikleri */
  /* --pv-max-w: 980px;
  --pv-prose-w: 72ch; */

  /* Bootstrap değişken eşlemeleri */
  --bs-body-font-family: var(--pv-font-sans);
  --bs-body-bg: var(--pv-bg);
  --bs-body-color: var(--pv-text);
  --bs-link-color: var(--pv-primary);
  --bs-link-hover-color: var(--pv-primary-600);
  --bs-primary: var(--pv-primary);
  --bs-secondary: var(--pv-secondary);
  --bs-success: var(--pv-success);
  --bs-warning: var(--pv-warning);
  --bs-danger: var(--pv-danger);
  --bs-info: var(--pv-info);
  --bs-border-color: var(--pv-border);
  --bs-border-radius: 1rem;
  --bs-border-radius-lg: var(--pv-radius);
  --bs-border-radius-xl: 1.75rem;
}

/*--------------------------------------------------
  2) Genel tipografi ve temel elementler
--------------------------------------------------*/
html { scroll-behavior: smooth; }
body { font-family: var(--pv-font-sans); background: var(--pv-bg); color: var(--pv-text); }

.container-narrow { max-width: var(--pv-max-w); margin-inline: auto; padding-inline: 16px; }
.prose { max-width: var(--pv-prose-w); }

h1, h2, h3, h4 { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; margin-top: 1.25rem; }
.lead { color: var(--pv-muted); font-size: 1.1rem; }

img.rounded-2xl { border-radius: var(--pv-radius); }
.figure { display: block; margin: 1rem 0; }
.small { font-size: .875rem; color: var(--pv-muted); }

::selection { background: color-mix(in srgb, var(--pv-secondary) 35%, white); color: #111; }

/* Link animasyonu */
a { text-decoration: none; transition: color .2s ease, text-underline-offset .2s; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }

/*--------------------------------------------------
  3) Bileşenler
--------------------------------------------------*/
/* Hero */
.hero { display: grid; gap: 16px; align-items: center; grid-template-columns: 1.2fr 1fr; }
@media (max-width: 992px) { .hero { grid-template-columns: 1fr; }}

/* CTA alanı */
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.cta .btn, .cta a.btn { padding:.75rem 1rem; border-radius: var(--pv-radius-sm); }

/* Soft düğmeler (alpha arka plan) */
.btn-soft-primary { background: rgba(15,118,110,.12); color: var(--pv-primary); border: 1px solid rgba(15,118,110,.18); }
.btn-soft-primary:hover { background: rgba(15,118,110,.18); }
.btn-soft-secondary { background: rgba(249,115,96,.12); color: var(--pv-secondary); border: 1px solid rgba(249,115,96,.18); }
.btn-soft-secondary:hover { background: rgba(249,115,96,.18); }

/* Yükselen kartlar */
.card-lift, .hover-raise { border-radius: var(--pv-radius); box-shadow: var(--pv-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover, .hover-raise:hover { transform: translateY(-2px); box-shadow: var(--pv-shadow-hover); }

/* İçindekiler kutusu */
.toc { background:#fff; border:1px solid var(--pv-border); border-radius: var(--pv-radius-sm); padding: 12px; }
.toc ol { margin:0; padding-left: 1.1rem; }
.toc a { color: var(--pv-primary); }

/* İpucu/Uyarı bilgi kutuları */
.callout { border-radius: 14px; padding: 12px 14px; border:1px solid var(--pv-border); background:#fff; }
.callout.tip { border-left:4px solid #86c769; background: #f6fff3; }
.callout.warn { border-left:4px solid #ff8a8a; background: #fff6f6; }
.callout.info { border-left:4px solid var(--pv-info); background: color-mix(in srgb, var(--pv-info) 10%, #fff); }

/* Liste: check işaretli */
ul.check { list-style: none; padding-left:0; }
ul.check li { padding-left: .5rem; }
ul.check li::marker { content: ""; }
ul.check li::before { content: "✅ "; }

/* Etiket/Badej */
.badge-pill { display:inline-block; padding:.35rem .6rem; border-radius:999px; background: var(--pv-primary-100); color: var(--pv-primary-600); font-weight:600; }

/* Detay/SSS */
details { border: 1px solid var(--pv-border); border-radius: 12px; padding:.5rem .75rem; background:#fff; }
details + details { margin-top:.5rem; }
details[open] { box-shadow: var(--pv-shadow); }
summary { cursor: pointer; font-weight: 600; }

/* Breadcrumbs minimal */
.breadcrumb-min { display:flex; gap:.5rem; align-items:center; color: var(--pv-muted); }
.breadcrumb-min a { color: inherit; }
.breadcrumb-min .sep { opacity:.5; }

/* Navbar */
.navbar-brand img { height: 28px; }
.navbar { border-bottom: 1px solid var(--pv-border); backdrop-filter: saturate(140%) blur(6px); }
.navbar .nav-link { font-weight:600; }
.navbar .nav-link.active { color: var(--pv-primary); }

/* Footer */
.site-footer { border-top:1px solid var(--pv-border); background:#fff; }
.site-footer .social a { opacity:.8; }
.site-footer .social a:hover { opacity:1; }

/* Formlar */
.form-control, .form-select { border-radius: 12px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(15,118,110,.18); border-color: var(--pv-primary);
}

/* Tablo */
.table-rounded { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px; }
.table-rounded th { background: #f8fafc; }

/* Görsel oran yardımcıları */
.ratio-16x9 { position:relative; width:100%; padding-top:56.25%; }
.ratio-1x1 { position:relative; width:100%; padding-top:100%; }
.ratio > img, .ratio > iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: inherit; }

/* Micro helpers */
.shadow-soft { box-shadow: var(--pv-shadow); }
.rounded-3xl { border-radius: 1.75rem; }
.section { margin-top: 28px; }

/* Prose (blog yazıları için) */
.prose article, article.prose { line-height: 1.7; }
.prose p { margin: .6rem 0 1rem; }
.prose h2, .prose h3 { margin-top: 1.6rem; }
.prose blockquote { border-left: 4px solid var(--pv-primary); padding-left: 1rem; color: var(--pv-muted); }
.prose code { background: #f1f5f9; border-radius: 6px; padding: .1rem .35rem; font-size: .95em; }

/* WhatsApp butonu (örnek) */
.btn-whatsapp { background:#25D366; color:#fff; }
.btn-whatsapp:hover { filter: brightness(0.95); color:#fff; }

/* Kart grid (hizmetler/blog listesi) */
.grid { display:grid; gap:18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:992px){ .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width:576px){ .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

/*--------------------------------------------------
  4) Dark Mode (otomatik + manuel [data-theme="dark"]) 
--------------------------------------------------*/
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --pv-surface:#0b1220;
    --pv-bg:#0b1220;
    --pv-text:#e5e7eb;
    --pv-border:#1f2937;
  }
  body { background: var(--pv-bg); color: var(--pv-text); }
  .toc, .callout, details, .site-footer, .navbar, .card, .list-group, .modal-content { background:#111827; border-color: var(--pv-border); }
}

[data-theme="dark"] {
  color-scheme: dark;
  --pv-surface:#0b1220; --pv-bg:#0b1220; --pv-text:#e5e7eb; --pv-border:#1f2937;
}

/*--------------------------------------------------
  5) Örnek görsel başlığı komponenti
--------------------------------------------------*/
.hero-banner { position:relative; border-radius: var(--pv-radius); overflow:hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--pv-primary) 24%, white), color-mix(in srgb, var(--pv-secondary) 20%, white)); }
.hero-banner .content { position:relative; padding: 28px; z-index:2; }
.hero-banner .wave { position:absolute; inset:0; opacity:.06; background: radial-gradient(1200px 400px at -10% -10%, #fff, transparent), radial-gradient(800px 300px at 120% 10%, #000, transparent); mix-blend-mode: overlay; }

/*--------------------------------------------------
  6) Sayfa üstü duyuru şeridi (opsiyonel)
--------------------------------------------------*/
.announcement { border:1px dashed var(--pv-border); border-radius: 12px; background: #fff; padding: .5rem .75rem; }
.announcement strong { color: var(--pv-primary); }

/*--------------------------------------------------
  7) Scrollbar (Chromium)
--------------------------------------------------*/
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pv-primary) 40%, #8e9ab0); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }
/* FIX-1: Otomatik dark kapat (sadece manuel [data-theme="dark"] çalışsın) */
@media (prefers-color-scheme: dark){
  :root { color-scheme: light; }
  body { background:#fff; color:#0f172a; }
  .navbar, .toc, .callout, details, .card, .site-footer, .modal-content {
    background:#fff; border-color: var(--pv-border);
  }
}

/* FIX-2: Hero genişliği ve görsel */
:root{ --pv-max-w:1180px; }                 /* 980 → 1180 */
.container-narrow{ max-width:var(--pv-max-w); }
.hero{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.hero img{ width:100%; max-width:640px; height:auto; border-radius:16px; box-shadow:none !important; }
@media (max-width:992px){
  .hero{ grid-template-columns:1fr; }
  .hero img{ max-width:100%; }
}

/* FIX-3: Soft buton kontrastı (manuel dark için) */
[data-theme="dark"] .btn-soft-primary{
  background: rgba(15,118,110,.25); color:#eafffb; border-color: rgba(15,118,110,.35);
}
[data-theme="dark"] .btn-soft-secondary{
  background: rgba(249,115,96,.25); color:#fff2ef; border-color: rgba(249,115,96,.35);
}
.map-lite{ position:relative; background:#f6f7fb; aspect-ratio:16/9; cursor:pointer; overflow:hidden; }
.map-placeholder{ position:absolute; inset:0; display:flex; gap:10px; align-items:center; justify-content:center; font-weight:700; color:#0f172a; }
.map-placeholder i{ font-size:24px; }
.map-lite:focus-visible{ outline:3px solid var(--pv-primary, #0ea5a5); outline-offset:2px; }