/* OlurKreş — last bump: 2026-04-28 18:55 */
/* OlurKreş — Tasarım Sistemi */
:root{
  --c-bg:#FFFFFF; --c-text:#0F172A; --c-muted:#64748B;
  --c-primary:#2563EB; --c-primary-d:#1E40AF; --c-primary-l:#DBEAFE;
  --c-success:#16A34A; --c-warn:#D97706; --c-danger:#DC2626; --c-info:#0EA5E9;
  --c-pastel-pink:#FCE7F3; --c-pastel-yellow:#FEF3C7; --c-pastel-green:#DCFCE7; --c-pastel-blue:#DBEAFE; --c-pastel-purple:#EDE9FE;
  --c-border:#E2E8F0; --c-card:#FFFFFF;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 12px rgba(0,0,0,.06); --shadow-lg:0 12px 32px rgba(0,0,0,.08);
  --t-fast:.15s ease; --t:.2s ease;
}
*{box-sizing:border-box}
html,body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:#F8FAFC;color:var(--c-text);margin:0}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-primary-d)}

.brand-logo{display:inline-flex;width:32px;height:32px;background:linear-gradient(135deg,#2563EB,#16A34A);color:#fff;border-radius:8px;align-items:center;justify-content:center;font-size:16px;margin-right:6px;vertical-align:-7px}

/* ─── Landing ─── */
.landing .hero{padding:80px 0 60px;background:linear-gradient(135deg,#DBEAFE 0%, #FEF3C7 100%);overflow:hidden}
.hero-art{font-size:140px;color:#2563EB;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.hero-art i:nth-child(2){color:#DC2626}.hero-art i:nth-child(3){color:#16A34A}.hero-art i:nth-child(4){color:#D97706}
.feature-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px;transition:transform var(--t),box-shadow var(--t);height:100%}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-icon{display:inline-flex;width:52px;height:52px;background:var(--c-primary-l);color:var(--c-primary);border-radius:14px;align-items:center;justify-content:center;font-size:22px}
.footer-light{background:#fff;border-top:1px solid var(--c-border)}

/* ─── Auth ─── */
.auth-bg{min-height:100vh;background:linear-gradient(135deg,#DBEAFE 0%, #FCE7F3 50%, #FEF3C7 100%);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.08);width:100%;max-width:440px;overflow:hidden}
.auth-head{padding:30px 30px 20px;text-align:center}
.auth-head h1{font-weight:700;font-size:24px;margin:0}
.auth-body{padding:0 30px 30px}

/* ─── Layout (panel) ─── */
.app-layout{display:flex;min-height:100vh}
.sidebar{width:260px;background:#fff;border-right:1px solid var(--c-border);position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:200;transition:transform var(--t)}
.sidebar-head{padding:20px 24px;border-bottom:1px solid var(--c-border)}
.sidebar-head .b-name{font-weight:700;font-size:18px;margin:0}
.sidebar-head .b-sub{color:var(--c-muted);font-size:12px}
.nav-section{padding:16px 12px 6px;text-transform:uppercase;font-size:11px;letter-spacing:1px;color:var(--c-muted);font-weight:600}
.sidebar-nav{padding:8px 12px;flex:1;overflow-y:auto}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--c-text);font-size:14px;font-weight:500;margin-bottom:2px;transition:background var(--t-fast)}
.sidebar-nav a i{font-size:18px;width:22px;text-align:center;color:var(--c-muted)}
.sidebar-nav a:hover{background:var(--c-pastel-blue)}
.sidebar-nav a.active{background:var(--c-primary);color:#fff}
.sidebar-nav a.active i{color:#fff}
.sidebar-foot{padding:16px;border-top:1px solid var(--c-border);font-size:12px;color:var(--c-muted)}

.main{margin-left:260px;flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--c-border);padding:14px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100}
.topbar .page-title{font-weight:700;font-size:18px;margin:0}
.topbar .user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#F1F5F9;border-radius:30px;font-size:14px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#16A34A);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.content{padding:24px;flex:1}

/* Mobil */
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--c-text)}
@media(max-width:991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle{display:inline-flex}
}

/* ─── Cards & Stats ─── */
.stat-card{background:#fff;border-radius:var(--r-lg);padding:20px;border:1px solid var(--c-border);transition:box-shadow var(--t)}
.stat-card:hover{box-shadow:var(--shadow-md)}
.stat-card .lbl{color:var(--c-muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.stat-card .val{font-size:28px;font-weight:800;margin:6px 0 0;color:var(--c-text)}
.stat-card .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--c-pastel-blue);color:var(--c-primary)}
.stat-card.success .ico{background:var(--c-pastel-green);color:var(--c-success)}
.stat-card.warn .ico{background:var(--c-pastel-yellow);color:var(--c-warn)}
.stat-card.danger .ico{background:#FEE2E2;color:var(--c-danger)}
.stat-card.purple .ico{background:var(--c-pastel-purple);color:#7C3AED}

.card-soft{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:20px;margin-bottom:18px}
.card-soft h5{font-weight:700;margin:0 0 14px}

/* Tables */
.table-wrap{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.table-wrap table{margin:0}
.table thead th{background:#F8FAFC;font-weight:600;font-size:13px;color:var(--c-text);border-bottom:1px solid var(--c-border)}
.table td{vertical-align:middle;font-size:14px}

/* Badges */
.badge-soft{padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;display:inline-block}
.badge-soft.primary{background:var(--c-pastel-blue);color:var(--c-primary)}
.badge-soft.success{background:var(--c-pastel-green);color:var(--c-success)}
.badge-soft.warn{background:var(--c-pastel-yellow);color:var(--c-warn)}
.badge-soft.danger{background:#FEE2E2;color:var(--c-danger)}
.badge-soft.purple{background:var(--c-pastel-purple);color:#7C3AED}
.badge-soft.muted{background:#E2E8F0;color:#475569}

/* Forms */
.form-control,.form-select{border-radius:10px;border:1px solid var(--c-border);padding:10px 14px;font-size:14px;transition:border var(--t-fast),box-shadow var(--t-fast)}
.form-control:focus,.form-select:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form-label{font-weight:600;font-size:13px;color:#334155;margin-bottom:6px}
/* ─── Butonlar — OlurKreş candy/pop stili ─── */
.btn{
  --btn-shadow:#0f172a26;
  border-radius:999px;font-weight:600;padding:10px 20px;font-size:14px;
  letter-spacing:.1px;border:0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex-shrink:0;
  box-shadow:0 4px 0 var(--btn-shadow);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease, opacity .12s ease;
  white-space:nowrap;line-height:1.2;
  position:relative;
}
.btn>i{flex-shrink:0}
.btn:focus,.btn:focus-visible{outline:0;box-shadow:0 4px 0 var(--btn-shadow), 0 0 0 4px rgba(37,99,235,.20)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--btn-shadow);filter:brightness(1.04)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--btn-shadow);filter:brightness(.98)}
.btn:disabled,.btn.disabled{opacity:.55;transform:none;box-shadow:0 4px 0 var(--btn-shadow);cursor:not-allowed;filter:grayscale(.3)}
.btn i{font-size:1em;line-height:1}
.btn-sm{padding:6px 14px;font-size:13px;box-shadow:0 3px 0 var(--btn-shadow)}
.btn-sm:hover{box-shadow:0 5px 0 var(--btn-shadow)}
.btn-lg{padding:14px 26px;font-size:16px;box-shadow:0 6px 0 var(--btn-shadow)}
.btn-lg:hover{box-shadow:0 8px 0 var(--btn-shadow)}

/* Filled — gradient + uyumlu renk gölge */
.btn-primary{--btn-shadow:#1E3A8A;background:linear-gradient(180deg,#3B82F6 0%,var(--c-primary) 100%);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(180deg,var(--c-primary) 0%,var(--c-primary-d) 100%);color:#fff}
.btn-success{--btn-shadow:#14532D;background:linear-gradient(180deg,#22C55E 0%,var(--c-success) 100%);color:#fff}
.btn-success:hover,.btn-success:focus{background:linear-gradient(180deg,var(--c-success) 0%,#15803D 100%);color:#fff}
.btn-danger{--btn-shadow:#7F1D1D;background:linear-gradient(180deg,#EF4444 0%,var(--c-danger) 100%);color:#fff}
.btn-danger:hover,.btn-danger:focus{background:linear-gradient(180deg,var(--c-danger) 0%,#B91C1C 100%);color:#fff}
.btn-warning{--btn-shadow:#92400E;background:linear-gradient(180deg,#F59E0B 0%,var(--c-warn) 100%);color:#fff}
.btn-warning:hover,.btn-warning:focus{background:linear-gradient(180deg,var(--c-warn) 0%,#B45309 100%);color:#fff}
.btn-info{--btn-shadow:#0C4A6E;background:linear-gradient(180deg,#38BDF8 0%,var(--c-info) 100%);color:#fff}
.btn-info:hover,.btn-info:focus{background:linear-gradient(180deg,var(--c-info) 0%,#0369A1 100%);color:#fff}
.btn-secondary{--btn-shadow:#334155;background:linear-gradient(180deg,#94A3B8 0%,#64748B 100%);color:#fff}
.btn-secondary:hover,.btn-secondary:focus{background:linear-gradient(180deg,#64748B 0%,#475569 100%);color:#fff}
.btn-light{--btn-shadow:#CBD5E1;background:#F8FAFC;color:#334155}
.btn-light:hover,.btn-light:focus{background:#F1F5F9;color:#0F172A}
.btn-dark{--btn-shadow:#000000;background:linear-gradient(180deg,#1E293B 0%,#0F172A 100%);color:#fff}
.btn-dark:hover,.btn-dark:focus{background:linear-gradient(180deg,#0F172A 0%,#020617 100%);color:#fff}

/* Outline — yumuşak çerçeveli */
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-danger,.btn-outline-warning,.btn-outline-info,.btn-outline-dark{
  background:#fff;border:2px solid;box-shadow:0 3px 0 rgba(15,23,42,.06);
}
.btn-outline-primary{border-color:var(--c-primary);color:var(--c-primary)}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.btn-outline-secondary{border-color:#CBD5E1;color:#475569}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{background:#475569;border-color:#475569;color:#fff}
.btn-outline-success{border-color:var(--c-success);color:var(--c-success)}
.btn-outline-success:hover,.btn-outline-success:focus{background:var(--c-success);border-color:var(--c-success);color:#fff}
.btn-outline-danger{border-color:var(--c-danger);color:var(--c-danger)}
.btn-outline-danger:hover,.btn-outline-danger:focus{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
.btn-outline-warning{border-color:var(--c-warn);color:var(--c-warn)}
.btn-outline-warning:hover,.btn-outline-warning:focus{background:var(--c-warn);border-color:var(--c-warn);color:#fff}
.btn-outline-info{border-color:var(--c-info);color:var(--c-info)}
.btn-outline-info:hover,.btn-outline-info:focus{background:var(--c-info);border-color:var(--c-info);color:#fff}
.btn-outline-dark{border-color:#0F172A;color:#0F172A}
.btn-outline-dark:hover,.btn-outline-dark:focus{background:#0F172A;border-color:#0F172A;color:#fff}

/* Yumuşak ton (badge-soft mantığı) — opsiyonel pastel butonlar */
.btn-soft-primary{background:var(--c-pastel-blue);color:var(--c-primary-d)}
.btn-soft-primary:hover,.btn-soft-primary:focus{background:#BFDBFE;color:var(--c-primary-d)}
.btn-soft-success{background:var(--c-pastel-green);color:#15803D}
.btn-soft-success:hover,.btn-soft-success:focus{background:#BBF7D0;color:#14532D}
.btn-soft-danger{background:#FEE2E2;color:#B91C1C}
.btn-soft-danger:hover,.btn-soft-danger:focus{background:#FECACA;color:#7F1D1D}
.btn-soft-warning{background:var(--c-pastel-yellow);color:#B45309}
.btn-soft-warning:hover,.btn-soft-warning:focus{background:#FDE68A;color:#92400E}

/* Link button — gölgesiz */
.btn-link{background:none;color:var(--c-primary);text-decoration:none;box-shadow:none;padding:8px 10px;border-radius:8px}
.btn-link:hover{background:var(--c-pastel-blue);color:var(--c-primary-d);box-shadow:none;transform:none;text-decoration:none}
.btn-link:active{transform:none;box-shadow:none}

/* Tam genişlik butonlar (login vb.) — daha ferah */
.btn.w-100,.btn.btn-block{padding-top:14px;padding-bottom:14px;font-size:15px;border-radius:16px}

/* Buton grupları — gölge çakışmasını engelle */
.btn-group .btn,.btn-group-sm .btn{box-shadow:none;border-radius:10px}
.btn-group .btn:hover{transform:none;box-shadow:none}

/* Erişilebilirlik */
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}

/* Avatars / chips */
.child-chip{display:inline-flex;align-items:center;gap:8px;background:#F1F5F9;padding:4px 10px 4px 4px;border-radius:30px;font-size:13px}
.child-chip .av{width:28px;height:28px;border-radius:50%;background:var(--c-primary-l);color:var(--c-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}

/* Mood / report */
.mood-pick{display:flex;gap:10px;flex-wrap:wrap}
.mood-pick label{flex:1;min-width:80px;text-align:center;padding:14px 8px;border:2px solid var(--c-border);border-radius:14px;cursor:pointer;transition:all var(--t-fast);background:#fff}
.mood-pick label .ico{font-size:32px;display:block}
.mood-pick label .lbl{font-size:12px;font-weight:600;margin-top:4px}
.mood-pick input{display:none}
.mood-pick input:checked + label{border-color:var(--c-primary);background:var(--c-pastel-blue)}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.photo-grid .ph{aspect-ratio:1/1;background:#E2E8F0;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;transition:transform var(--t-fast)}
.photo-grid .ph:hover{transform:scale(1.02)}
.photo-grid .ph img,.photo-grid .ph video{width:100%;height:100%;object-fit:cover;display:block}

/* Chat */
.chat-wrap{display:flex;height:calc(100vh - 140px);background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.chat-list{width:300px;border-right:1px solid var(--c-border);overflow-y:auto}
.chat-list .item{padding:14px 16px;border-bottom:1px solid var(--c-border);cursor:pointer;transition:background var(--t-fast)}
.chat-list .item:hover,.chat-list .item.active{background:var(--c-pastel-blue)}
.chat-main{flex:1;display:flex;flex-direction:column}
.chat-msgs{flex:1;overflow-y:auto;padding:18px;background:#F8FAFC}
.msg{max-width:70%;padding:10px 14px;border-radius:14px;margin-bottom:8px;font-size:14px;line-height:1.4}
.msg.in{background:#fff;border:1px solid var(--c-border)}
.msg.out{background:var(--c-primary);color:#fff;margin-left:auto}
.chat-input{padding:14px;border-top:1px solid var(--c-border);background:#fff;display:flex;gap:8px}

/* Empty state */
.empty{text-align:center;padding:48px 24px;color:var(--c-muted)}
.empty i{font-size:54px;margin-bottom:12px;opacity:.4}

/* Print */
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin-left:0}.content{padding:0}}

/* ─── Bildirim zili (topbar) ──────────────────────────────────────────── */
.notif-bell{position:relative;margin-right:6px}
.notif-btn{position:relative;background:#F1F5F9;border:0;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#334155;cursor:pointer;font-size:18px;transition:background .15s}
.notif-btn:hover{background:#E2E8F0}
.notif-badge{position:absolute;top:-2px;right:-2px;background:#dc3545;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
.notif-panel{position:absolute;top:46px;right:0;width:360px;max-width:calc(100vw - 24px);max-height:70vh;background:#fff;border:1px solid var(--c-border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden;z-index:1000}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--c-border);background:#FAFAFA}
.notif-head strong{font-size:14px}
.notif-mark-all{background:transparent;border:0;color:#f4722b;font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px}
.notif-mark-all:hover{background:#FFF3EB}
.notif-list{overflow-y:auto;flex:1;min-height:80px}
.notif-empty{padding:30px 16px;text-align:center;color:#94A3B8;font-size:13px}
.notif-empty i{font-size:32px;display:block;margin-bottom:6px;opacity:.6}
.notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #F1F5F9;text-decoration:none;color:inherit;cursor:pointer;transition:background .12s}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:#FAFAFA}
.notif-item.notif-unread{background:#FFF7F0}
.notif-item.notif-unread:hover{background:#FFEFE0}
.notif-item.notif-urgent .notif-icon{color:#dc3545}
.notif-icon{font-size:20px;color:#f4722b;flex:0 0 auto;line-height:1.2;margin-top:2px}
.notif-main{flex:1;min-width:0}
.notif-title{font-weight:600;font-size:13px;color:#0F172A;line-height:1.3;margin-bottom:2px}
.notif-item.notif-unread .notif-title{font-weight:700}
.notif-body{font-size:12px;color:#64748B;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-when{font-size:11px;color:#94A3B8;margin-top:3px}
.notif-foot{padding:10px 14px;text-align:center;border-top:1px solid var(--c-border);background:#FAFAFA}
.notif-foot a{color:#f4722b;font-size:13px;font-weight:600;text-decoration:none}
.notif-foot a:hover{text-decoration:underline}
@media (max-width:640px){
  .notif-panel{position:fixed;top:60px;right:8px;left:8px;width:auto;max-width:none}
}

/* ════════════════════════════════════════════════════════════
   Bugün Çocuğum — UI Bileşenleri
   ════════════════════════════════════════════════════════════ */

/* Aktivite preset butonları (öğretmen now.php) */
.preset-btn { transition: transform .15s ease, box-shadow .15s ease; }
.preset-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.preset-btn:active { transform: scale(.97); }

/* Karne kartları */
.card-soft { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.04); }

.badge-soft { display:inline-block; padding:6px 12px; border-radius:999px; background:#f1f5f9; color:#334155; font-size:13px; font-weight:500; }
.badge-soft.success { background:#dcfce7; color:#166534; }
.badge-soft.danger  { background:#fee2e2; color:#991b1b; }
.badge-soft.warn    { background:#fef3c7; color:#92400e; }
.badge-soft.muted   { background:#f1f5f9; color:#64748b; }
.badge-soft.primary { background:#dbeafe; color:#1d4ed8; }

/* Acil bildirim banner blink (üst sıra) */
@keyframes em-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow:0 0 0 8px rgba(220,38,38,0); } }
.em-pulse { animation: em-pulse 1.6s infinite; }

/* Empty state */
.empty { text-align:center; padding:32px 16px; color:#94a3b8; }
.empty i { font-size:42px; display:block; margin-bottom:8px; }

/* Video klip kartları — mobil dostu */
@media (max-width: 576px) {
  .preset-btn { font-size:12px !important; padding:10px 4px !important; }
}

/* Sınıf rutini scroll list */
.routine-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; }
.routine-scroll button { flex:0 0 auto; }

/* Karne mini istatistik */
.stat-pill { background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px 8px; text-align:center; }
.stat-pill strong { display:block; font-size:18px; color:#0f172a; }

/* Reaksiyon butonları */
.react-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.react-bar .btn { border-radius:999px; }