/* =============================================================================
 * OlurKreş — AAA Görsel Sistem v2.0 · Site geneli tema katmanı
 * Bu dosya style.css'ten SONRA yüklenir ve sadece üzerine yazma yapar.
 * Kaldırmak için: bu dosyayı yükleyen <link> satırını silin — her şey eskiye
 * döner. style.css dosyasına dokunulmaz.
 * Yüklenme tarihi: 28 Nisan 2026
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ─── 1. Renk değişkenleri ────────────────────────────────────────────────── */
:root{
  /* Yeni marka renkleri */
  --c-primary:#f4722b;          /* Bal Sarısı */
  --c-primary-d:#e84a17;
  --c-primary-l:#fef1ea;
  --c-secondary:#194c66;        /* Gece Lacisi */

  /* Pastel altyapı — sıcak tonlara kaydırıldı */
  --c-pastel-blue:#fef1ea;      /* artık birincil tint */
  --c-pastel-pink:#fceef1;      /* veli (mercan) tonuna uyumlu */
  --c-pastel-yellow:#fff3dc;
  --c-pastel-green:#eef9f3;     /* öğretmen yeşili tonu */
  --c-pastel-purple:#f3eefa;    /* yönetici moruna uyumlu */

  /* Status & utility */
  --c-success:#29a366;
  --c-warn:#e89c1d;
  --c-danger:#d6364c;
  --c-info:#2a7fb8;
  --c-text:#1f2a33;
  --c-muted:#6e6655;
  --c-border:#ece4d4;
  --c-card:#ffffff;

  /* OlurKreş rol renkleri (yeni token) */
  --kn-admin:#6b39a8;
  --kn-teacher:#29a366;
  --kn-parent:#e54d73;
}

/* ─── 2. Genel arka plan ve tipografi ─────────────────────────────────────── */
html, body{
  font-family:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:#faf8f5;
  color:var(--c-text);
}
.auth-head h1,
.sidebar-head .b-name,
.topbar .page-title,
.section-title,
.card-soft h5,
.feat-card h5{
  font-family:'Outfit','Plus Jakarta Sans',sans-serif;
  letter-spacing:-0.01em;
}

/* ─── 3. Marka logo ─────────────────────────────────────────────────────── */
.brand-logo{
  background:linear-gradient(135deg,#f4722b 0%,#e84a17 100%) !important;
  box-shadow:0 4px 10px rgba(244,114,43,0.30);
}

/* Topbar kullanıcı avatar */
.user-avatar{
  background:linear-gradient(135deg,#f4722b 0%,#194c66 100%) !important;
}

/* ─── 4. Auth ekranları ──────────────────────────────────────────────────── */
.auth-bg{
  background:
    radial-gradient(800px 500px at 10% -10%, #fef1ea 0%, transparent 60%),
    radial-gradient(700px 400px at 100% 0%, #fff3dc 0%, transparent 60%),
    linear-gradient(135deg,#faf8f5 0%, #f3eee5 100%) !important;
}
.auth-card{
  border:1px solid #ece4d4;
  box-shadow:0 16px 40px rgba(31,42,51,0.10), 0 2px 6px rgba(31,42,51,0.04) !important;
}
.auth-head h1{ color:#194c66; font-weight:800; letter-spacing:-0.02em; }
/* Auth ekranındaki yuvarlak ikon kutusu (login.php'de inline tanımlı) */
.auth-head > div[style*="linear-gradient(135deg,#2563EB,#16A34A)"]{
  background:linear-gradient(135deg,#f4722b 0%,#e84a17 100%) !important;
  box-shadow:0 8px 20px rgba(244,114,43,0.30) !important;
}

/* ─── 5. Sidebar (panel) ────────────────────────────────────────────────── */
.sidebar-nav a:hover{ background:#fef1ea; color:#194c66; }
.sidebar-nav a.active{
  background:linear-gradient(135deg,#f4722b 0%,#e84a17 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(244,114,43,0.25);
}
.sidebar-nav a.active i{ color:#fff; }

/* ─── 6. Butonlar — gradient yenilemesi ─────────────────────────────────── */
.btn-primary{
  --btn-shadow:#a14010 !important;
  background:linear-gradient(180deg,#f78a4d 0%,#f4722b 100%) !important;
  color:#fff !important;
}
.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(180deg,#f4722b 0%,#e84a17 100%) !important;
  color:#fff !important;
}
.btn-success{
  --btn-shadow:#145133 !important;
  background:linear-gradient(180deg,#3dbf7c 0%,#29a366 100%) !important;
  color:#fff !important;
}
.btn-success:hover,.btn-success:focus{
  background:linear-gradient(180deg,#29a366 0%,#1e8550 100%) !important;
  color:#fff !important;
}
.btn-danger{
  --btn-shadow:#7a2030 !important;
  background:linear-gradient(180deg,#e7677c 0%,#d6364c 100%) !important;
  color:#fff !important;
}
.btn-danger:hover,.btn-danger:focus{
  background:linear-gradient(180deg,#d6364c 0%,#a82838 100%) !important;
  color:#fff !important;
}
.btn-warning{
  --btn-shadow:#8a5b10 !important;
  background:linear-gradient(180deg,#f4b84d 0%,#e89c1d 100%) !important;
  color:#fff !important;
}
.btn-warning:hover,.btn-warning:focus{
  background:linear-gradient(180deg,#e89c1d 0%,#b87a14 100%) !important;
  color:#fff !important;
}
.btn-info{
  --btn-shadow:#0c4a6e !important;
  background:linear-gradient(180deg,#4ea3d6 0%,#2a7fb8 100%) !important;
  color:#fff !important;
}
.btn-info:hover,.btn-info:focus{
  background:linear-gradient(180deg,#2a7fb8 0%,#1e608f 100%) !important;
  color:#fff !important;
}
.btn-secondary{
  --btn-shadow:#0c2633 !important;
  background:linear-gradient(180deg,#3b6e8a 0%,#194c66 100%) !important;
  color:#fff !important;
}
.btn-secondary:hover,.btn-secondary:focus{
  background:linear-gradient(180deg,#194c66 0%,#0c2633 100%) !important;
  color:#fff !important;
}
.btn-dark{
  --btn-shadow:#0c2633 !important;
  background:linear-gradient(180deg,#194c66 0%,#0c2633 100%) !important;
  color:#fff !important;
}
.btn-light{
  background:#faf8f5 !important;
  color:#194c66 !important;
  --btn-shadow:#d8cdb6 !important;
}

/* Outline butonlar */
.btn-outline-primary{ border-color:#f4722b !important; color:#f4722b !important; }
.btn-outline-primary:hover,.btn-outline-primary:focus{
  background:#f4722b !important; border-color:#f4722b !important; color:#fff !important;
}
.btn-outline-secondary{ border-color:#194c66 !important; color:#194c66 !important; }
.btn-outline-secondary:hover,.btn-outline-secondary:focus{
  background:#194c66 !important; border-color:#194c66 !important; color:#fff !important;
}

/* Soft butonlar */
.btn-soft-primary{ background:#fef1ea !important; color:#a14010 !important; }
.btn-soft-primary:hover,.btn-soft-primary:focus{ background:#fde2d4 !important; color:#7a3915 !important; }

/* Link button */
.btn-link{ color:#f4722b !important; }
.btn-link:hover{ background:#fef1ea !important; color:#a14010 !important; }

/* Focus ring rengi */
.btn:focus,.btn:focus-visible{
  box-shadow:0 4px 0 var(--btn-shadow), 0 0 0 4px rgba(244,114,43,0.25) !important;
}

/* ─── 7. Form alanları ──────────────────────────────────────────────────── */
.form-control:focus,.form-select:focus{
  border-color:#f4722b !important;
  box-shadow:0 0 0 3px rgba(244,114,43,0.18) !important;
}

/* ─── 8. Stat / Badge / Card uyumu ──────────────────────────────────────── */
.stat-card .ico{ background:#fef1ea; color:#f4722b; }
.stat-card.success .ico{ background:#eef9f3; color:#29a366; }
.stat-card.warn .ico{ background:#fff3dc; color:#e89c1d; }
.stat-card.danger .ico{ background:#fbe4e7; color:#d6364c; }
.stat-card.purple .ico{ background:#f3eefa; color:#6b39a8; }

.badge-soft.primary{ background:#fef1ea; color:#a14010; }
.badge-soft.success{ background:#eef9f3; color:#1e8550; }
.badge-soft.warn{ background:#fff3dc; color:#8a5b10; }
.badge-soft.danger{ background:#fbe4e7; color:#a82838; }
.badge-soft.purple{ background:#f3eefa; color:#6b39a8; }

/* Rol bazlı yumuşak rozetler (yeni) */
.badge-soft.admin{ background:#f3eefa; color:#6b39a8; }
.badge-soft.teacher{ background:#eef9f3; color:#29a366; }
.badge-soft.parent{ background:#fceef1; color:#e54d73; }

/* ─── 9. Chat & mesaj ─────────────────────────────────────────────────── */
.msg.out{ background:linear-gradient(135deg,#f4722b 0%,#e84a17 100%); color:#fff; }
.chat-list .item:hover,.chat-list .item.active{ background:#fef1ea; }

/* ─── 10. Mood / photo / child-chip ────────────────────────────────────── */
.mood-pick input:checked + label{ border-color:#f4722b; background:#fef1ea; }
.child-chip .av{ background:#fef1ea; color:#f4722b; }

/* ─── 11. Bootstrap text-* renk uyumu ──────────────────────────────────── */
.text-primary{ color:#f4722b !important; }
a{ color:#194c66; }
a:hover{ color:#f4722b; }

/* ─── 12. Erişim & motion ──────────────────────────────────────────────── */
::selection{ background:rgba(244,114,43,0.20); color:#7a3915; }

/* ─── 13. Landing (index.php) marka uyumu ─────────────────────────────────
 * Ana sayfada eski pastel pembe/mint paletini AAA marka renklerine
 * (Bal Sarısı + Gece Lacisi + rol renkleri) hizalar. Eğlenceli illüstrasyonlar
 * ve düzen olduğu gibi korunur — sadece logo, butonlar ve vurgu pulları yenilenir.
 * ====================================================================== */

/* Üst nav: marka logosu turuncu gradient + lacivert metin */
.landing-fun .brand-pill{ color:#194c66 !important; }
.landing-fun .brand-pill .logo-bubble{
  background:linear-gradient(135deg,#f4722b 0%,#e84a17 60%,#194c66 100%) !important;
  box-shadow:0 6px 14px rgba(244,114,43,0.45) !important;
  color:#fff !important;
}
/* Üst sağdaki "Giriş Yap" — kompakt: marka turuncu */
.landing-fun .nav-fun .btn-fun.btn-pink{
  background:#f4722b !important; color:#fff !important;
}
.landing-fun .nav-fun .btn-fun.btn-pink:hover{
  background:#e84a17 !important; color:#fff !important;
}

/* Hero üstündeki etiket pulu */
.landing-fun .hero-fun .eyebrow{
  background:#fef1ea !important;
  color:#a14010 !important;
  border-color:#f4bf9d !important;
}

/* Hero başlık vurguları — markaya uygun şeftali ve mercan */
.landing-fun .hero-fun h1 .word-pop{
  background:linear-gradient(180deg,transparent 60%, #ffd9b5 60%) !important;
}
.landing-fun .hero-fun h1 .word-pop.pink{
  background:linear-gradient(180deg,transparent 60%, #fbd0d9 60%) !important;
}

/* Hero CTA — Veli Girişi (mercan / parent rol rengi)
   NOT: index.php'deki inline .btn-pink kuralını ezmek için tek-class'lı
   selektörü de !important ile yeniden tanımlıyoruz; .landing-fun scope'u
   sayesinde diğer sayfaları etkilemez. */
.landing-fun .btn-fun.btn-pink.btn-lg,
.landing-fun a.btn-pink.btn-lg{
  background:#e54d73 !important; color:#fff !important;
  border-color:#e54d73 !important;
}
.landing-fun .btn-fun.btn-pink.btn-lg:hover,
.landing-fun a.btn-pink.btn-lg:hover{
  background:#c83a5d !important; color:#fff !important;
}

/* Hero CTA — Personel Girişi (öğretmen yeşili, biraz daha doygun) */
.landing-fun .btn-fun.btn-mint,
.landing-fun a.btn-mint{
  background:#29a366 !important; color:#fff !important;
  border-color:#29a366 !important;
}
.landing-fun .btn-fun.btn-mint:hover,
.landing-fun a.btn-mint:hover{
  background:#1e8550 !important; color:#fff !important;
}

/* Banttaki "Hemen Giriş Yapın" — marka turuncu */
.landing-fun .btn-fun.btn-sky,
.landing-fun a.btn-sky{
  background:#f4722b !important; color:#fff !important;
  border-color:#f4722b !important;
}
.landing-fun .btn-fun.btn-sky:hover,
.landing-fun a.btn-sky:hover{
  background:#e84a17 !important; color:#fff !important;
}

/* Pembe kesikli çizgileri (nav alt, footer üst) yumuşak şeftaliye çek */
.landing-fun .nav-fun{ border-bottom-color:#f4bf9d !important; }
.landing-fun .footer-fun{ border-top-color:#f4bf9d !important; }

/* Büyük renkli bant — pembe/sun/mint yerine sıcak şeftali tonları */
.landing-fun .band-fun{
  background:linear-gradient(135deg,#fcd0bb 0%, #ffe0a8 50%, #c4dfd3 100%) !important;
  color:#194c66 !important;
}
.landing-fun .band-fun h2,
.landing-fun .band-fun p{ color:#194c66 !important; }

/* Landing sayfasındaki feat-card text-primary vb. utility şiftleri zaten
   ana :root override'larıyla hallediliyor. */

/* End of theme-v2.css */