/* Öğretmenim Takipte — özel stiller (Tailwind CDN üzerine)
   Tasarım dili: lacivert (#102332) zemin + altın (#d5a052) vurgu, DM Sans + Playfair Display. */

:root{
  --navy:#102332; --navy2:#172d3d; --navy3:#254052;
  --ink:#182638; --muted:#748294; --line:#e7ebf2; --bg:#f5f7fb;
  --gold:#d5a052; --gold2:#f0c47b; --gold-soft:#fff4e2;
  --green:#209e78; --blue:#4d93e8; --purple:#9062d8; --red:#ee6873; --orange:#efab4b;
  --shadow:0 10px 30px #20314a0b;
}

html { -webkit-text-size-adjust: 100%; }
body { font-size: 14px; color: var(--ink); }
h1 { letter-spacing: -.04em; }
h2 { letter-spacing: -.025em; }

/* Kartlar: prototipteki ince çizgi + yumuşak gölge */
.bg-white.rounded-2xl, .bg-white.rounded-xl.border { box-shadow: var(--shadow); }
.border-slate-100 { border-color: var(--line) !important; }

/* Altın düğmelerde metin lacivert (beyaz metin altında okunmuyor) */
.bg-brand-500.text-white, .bg-brand-600.text-white,
.hover\:bg-brand-600:hover.text-white { color: var(--navy); }
.bg-brand-500 { font-weight: 800; }
.hover\:bg-brand-600:hover { background-color: var(--gold2) !important; }

/* Kaydırma çubuğu */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d6dde7; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #8993a1; background-clip: content-box; }

/* ---------------- Marka ---------------- */
.ot-logo { display:flex; align-items:center; gap:9px; font-weight:800; line-height:1.05; font-size:13px; color:var(--navy); }
.ot-logo__mark { width:30px; height:30px; display:grid; place-items:center; color:var(--gold); font-size:24px; flex:none; }
.ot-logo small { display:block; font-size:8px; letter-spacing:.25em; color:var(--gold); margin-top:3px; font-weight:800; }
.ot-logo--light { color:#fff; }
.ot-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:800; color:var(--gold); }
.ot-script { font-family:'Playfair Display',Georgia,serif; font-style:italic; }

/* ---------------- Sidebar ---------------- */
#app-sidebar { background: var(--navy); color:#c1cad2; transition: transform .25s ease; }
.ot-nav a { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:6px; font-size:13px; font-weight:600; color:#c1cad2; transition: background-color .15s, color .15s; }
.ot-nav a i { font-size:16px; width:18px; text-align:center; color:#8fa2b3; }
.ot-nav a:hover { background: var(--navy3); color:#fff; text-decoration:none; }
.ot-nav a:hover i { color:#fff; }
.ot-nav a.is-active { background:#f0c783; color:#172c3c; }
.ot-nav a.is-active i { color:#172c3c; }
.ot-side-quote { font-family:'Playfair Display',Georgia,serif; font-style:italic; color:#dcc49b; font-size:13px; padding:40px 16px 22px; background:linear-gradient(0deg,#253849,transparent); border-radius:6px; }

@media (max-width: 1023px) {
  #app-sidebar { transform: translateX(-100%); }
  body.sidebar-open #app-sidebar { transform: translateX(0); }
  #sidebar-overlay { display: none; }
  body.sidebar-open #sidebar-overlay { display: block; }
}

/* ---------------- Sayfa başlığı & banner ---------------- */
.ot-page-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:var(--gold-soft); color:var(--gold); font-size:20px; flex:none; }
.ot-banner { position:relative; overflow:hidden; border-radius:12px; color:#fff;
  background:linear-gradient(110deg,#0d2030,#1f3d50 70%,#d09550); }
.ot-banner::after { content:'✦'; position:absolute; right:70px; top:-60px; font-size:170px; line-height:1; opacity:.12; pointer-events:none; }
.ot-banner__script { font-family:'Playfair Display',Georgia,serif; font-style:italic; color:#efc879; }

/* Sayı animasyonu */
.progress-bar { transition: width .6s cubic-bezier(.22,.61,.36,1); }

/* Tablo girişleri (günlük/deneme) */
.cell-input { width: 100%; text-align: center; border: 1px solid var(--line); background:#f7f9fc; border-radius: 6px; padding: 6px 4px; outline: none; }
.cell-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213,160,82,.18); background:#fff; }

/* Form odakları altın */
input:focus, select:focus, textarea:focus { --tw-ring-color: rgba(213,160,82,.25); }

/* Yazdırma (PDF/rapor) */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
}