/* =====================================================================
   HBA — "Kalem ve Kağıt" kimliği                         hba-student.css
   ---------------------------------------------------------------------
   Yalnızca öğrenci + veli + giriş-öncesi sayfalarda yüklenir (app/theme_v2.php).
   Yönetici (admin) sayfaları hba-theme.css ile eski görünümde kalır.
   Kapatmak için .env dosyasına HBA_UI_V2=0 yazın.

   FİKİR  Bir öğrencinin masası: kareli defter, mavi tükenmez kalem, öğretmenin kırmızı kalemi,
          fosforlu kalem. Renk anlam taşır:
            mavi   = öğrencinin kalemi (etkileşim, "yapılacak")
            kırmızı= öğretmen düzeltmesi (gecikme, risk, silme)
            sarı   = fosforlu kalem (XP, ödül, "bak buraya")
            yeşil  = doğru işareti (tamamlandı)
   TEK GÜÇLÜ HAMLE  "Adım" — basamak ilerleme göstergesi (.hba-stairs) ve menüde
          fosforlu kalemle işaretlenmiş geçerli sayfa. Gerisi sakin tutulur.
   YAZI   Başlık/sayı: Bricolage Grotesque · Metin: Figtree (ikisi de yerelden)
   ===================================================================== */

/* ===================== 1) DEĞİŞKENLER ===================== */
html.hba-v2 {
  /* kağıt */
  --hba-bg: #F2F5F9;
  --hba-surface: #FFFFFF;
  --hba-surface-2: #F7F9FC;
  --hba-line: #DCE2EB;
  --hba-line-2: #C8D0DC;
  /* grafit */
  --hba-text: #1D2430;
  --hba-text-2: #3E4A5E;
  --hba-muted: #586478;
  --hba-placeholder: #7B879C;
  /* tükenmez kalem */
  --hba-primary-50:  #EEF0FF;
  --hba-primary-100: #E0E4FF;
  --hba-primary-200: #C4CBFA;
  --hba-primary-300: #98A3F0;
  --hba-primary-500: #2A35C8;
  --hba-primary-600: #222CB0;
  --hba-primary-700: #1B2394;
  /* doğru işareti */
  --hba-mint-100: #E3F4EB; --hba-mint-300: #A9DDC1; --hba-mint-500: #1E8E5A; --hba-mint-700: #176E46;
  /* öğretmen kalemi */
  --hba-rose-100: #FDECEA; --hba-rose-300: #F4B4AE; --hba-rose-500: #D3352B; --hba-rose-700: #A8261D;
  /* fosforlu kalem (bekleyen + ödül tek ailede) */
  --hba-amber-100: #FFF8CE; --hba-amber-300: #F0DC3C; --hba-amber-500: #8A6200; --hba-amber-700: #6B4D00;
  --hba-lav-100:   #FBF3B0; --hba-lav-300:   #E8D84A; --hba-lav-500:   #7F6700; --hba-lav-700:   #5C4900;
  --hba-sky-100: #E1EEFB; --hba-sky-300: #A9D0EE; --hba-sky-700: #1F5A87;

  --hl: #F5EC5A;          /* fosforlu kalem */
  --hl-soft: #FBF6B8;
  --pen-deep: #151B27;    /* koyu mürekkep (odak modu, savaş modu) */

  /* şekil: defter kâğıdı gibi sakin köşeler */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --shadow-1: 0 1px 0 rgba(29,36,48,.05);
  --shadow-2: 0 10px 24px -12px rgba(29,36,48,.22);
  --ring: 0 0 0 3px rgba(42,53,200,.22);

  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-main: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --primary-glow: rgba(42,53,200,.16);
}

/* ===================== 2) TEMEL ===================== */
html.hba-v2 body { font-size: 15.5px; line-height: 1.55; font-weight: 450; }
html.hba-v2 h1, html.hba-v2 h2, html.hba-v2 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
}
html.hba-v2 h4, html.hba-v2 h5, html.hba-v2 h6 { font-family: var(--font-main); font-weight: 700; letter-spacing: -0.005em; }
html.hba-v2 h1 { font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.4rem); }
html.hba-v2 h2 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); }
html.hba-v2 h3 { font-size: 1.2rem; }
html.hba-v2 p { line-height: 1.6; }
html.hba-v2 a { color: var(--hba-primary-600); }
html.hba-v2 a:hover { color: var(--hba-primary-700); text-decoration-thickness: 2px; }
/* Düğme gibi çizilmiş bağlantılarda yazı beyaz kalsın (genel bağlantı rengi onu eziyordu) */
html.hba-v2 a.btn-login, html.hba-v2 a.btn-login:hover { color: #fff; text-decoration: none; }
html.hba-v2 ::selection { background: var(--hl); color: var(--hba-text); }
html.hba-v2 :focus-visible { outline: 3px solid var(--hba-primary-500); outline-offset: 2px; border-radius: 4px; }
html.hba-v2 ::-webkit-scrollbar-thumb { border-radius: 6px; }

/* Büyük harfli etiketler kaldırıldı: cümle düzeni daha okunaklı */
html.hba-v2 .stat-label, html.hba-v2 .hba-tile__label, html.hba-v2 .task-status, html.hba-v2 .stat-info p,
html.hba-v2 .mot-label, html.hba-v2 .war-badge, html.hba-v2 .summer-badge, html.hba-v2 .table th, html.hba-v2 table thead th {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ===================== 3) YERLEŞİM ===================== */
html.hba-v2 .main { padding: 34px clamp(16px, 3.4vw, 48px) 55px; }
html.hba-v2 .container { max-width: min(1180px, 100%); margin-top: 0; padding-left: 0; padding-right: 0; }

/* ===================== 4) YAN MENÜ: defter ===================== */
/* Sol kenarda defter bağı: dizi halinde delikler + ince dikey çizgi */
html.hba-v2 .sidebar, html.hba-v2 .app-sidebar {
  background-color: var(--hba-surface) !important;
  background-image:
    radial-gradient(circle at 11px 50%, var(--hba-bg) 0 4.5px, transparent 5.5px),
    linear-gradient(90deg, transparent 0 25px, var(--hba-line) 25px 26px, transparent 26px) !important;
  background-size: 26px 34px, 26px 100% !important;
  background-repeat: repeat-y, no-repeat !important;
  background-position: 0 6px, 0 0 !important;
  padding-left: 26px !important;
  border-right: 1px solid var(--hba-line) !important;
  box-shadow: none !important;
}
html.hba-v2 .layout .sidebar .sidebrand { padding: 26px 18px 12px 14px; }
html.hba-v2 .layout .sidebar .brand-text, html.hba-v2 .layout .sidebar .sidebrand span {
  font-family: var(--font-display) !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--hba-text) !important;
}
html.hba-v2 .layout .sidebar .brand-logo { border-radius: 8px; }

/* Kullanıcı kartı: kağıt etiket */
html.hba-v2 .layout .sidebar .sideuser {
  background: var(--hba-surface-2) !important;
  border: 1px solid var(--hba-line) !important;
  border-radius: var(--r-md) !important;
  margin: 6px 14px 12px 12px !important;
  padding: 9px 10px !important;
}
html.hba-v2 .layout .sidebar .sideuser span { color: var(--hba-text) !important; }
html.hba-v2 .layout .sidebar .sideuser span[style*="D9963A"], html.hba-v2 .layout .sidebar .sideuser span[style*="F0DC3C"],
html.hba-v2 .layout .sidebar .sideuser span[style*="E8B24E"] { color: var(--hba-amber-700) !important; }

html.hba-v2 .layout .sidebar .sidenav { padding: 4px 12px 21px 10px !important; gap: 1px; }
html.hba-v2 .layout .sidebar .sidenav a {
  padding: 8px 12px;
  gap: 11px;
  border-radius: 3px 10px 5px 10px;
  font-size: .94rem !important;
  font-weight: 550 !important;
  color: var(--hba-text-2) !important;
}
html.hba-v2 .layout .sidebar .sidenav a:hover { background: var(--hba-primary-50) !important; color: var(--hba-primary-700) !important; }
/* Geçerli sayfa = fosforlu kalemle çizilmiş satır */
html.hba-v2 .layout .sidebar .sidenav a.active {
  background: var(--hl) !important;
  color: var(--hba-text) !important;
  font-weight: 700 !important;
  box-shadow: none;
}
html.hba-v2 .layout .sidebar .sidenav .ico { color: var(--hba-primary-500); }
html.hba-v2 .layout .sidebar .sidenav a.active .ico { color: var(--hba-text); }
html.hba-v2 .layout .sidebar .sidenav a.logout { background: transparent !important; color: var(--hba-rose-700) !important; margin-top: 8px; border-top: 1px dashed var(--hba-line-2) !important; border-radius: 0 !important; padding-top: 12px; }
html.hba-v2 .layout .sidebar .sidenav a.logout:hover { background: var(--hba-rose-100) !important; border-radius: 3px 10px 5px 10px !important; }
html.hba-v2 .sidegroup { margin: 10px 0 3px; }
html.hba-v2 .sidegroup-head {
  padding: 8px 12px !important;
  font-family: var(--font-display);
  font-size: .98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
html.hba-v2 .sidegroup-head b { font-weight: 700; }
html.hba-v2 .sidegroup-head:hover { background: transparent !important; }
html.hba-v2 .sidegroup-head i { color: var(--hba-primary-500) !important; }
html.hba-v2 .sidegroup-body a { padding-left: 34px !important; }
html.hba-v2 .notif-badge { background: var(--hba-rose-500) !important; }

/* Bildirim açılır kutusu */
html.hba-v2 .notif-dropdown { border-radius: var(--r-md) !important; }

/* Karşılama turu */
html.hba-v2 .ob-overlay { background: rgba(21,27,39,.82); backdrop-filter: blur(4px); }
html.hba-v2 .ob-box { border-radius: 14px; max-width: 440px; text-align: left; border: 1px solid var(--hba-line); }
html.hba-v2 .ob-icon { font-size: 44px; margin-bottom: 8px; }
html.hba-v2 .ob-title { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.12; }
html.hba-v2 .ob-text { font-size: 1rem; color: var(--hba-text-2); }
html.hba-v2 .ob-btn { border-radius: var(--r-md); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
html.hba-v2 .ob-btn:hover { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
html.hba-v2 .ob-dots { justify-content: flex-start; }
html.hba-v2 .ob-dot { border-radius: 2px; height: 6px; width: 14px; }
html.hba-v2 .ob-dot.active { width: 28px; border-radius: 2px; }

/* Erişilebilirlik düğmesi ve paneli */
html.hba-v2 #a11y-widget-btn { background: var(--hba-text); border: 2px solid var(--hl); }
html.hba-v2 #a11y-widget-btn:hover { background: var(--pen-deep); }
html.hba-v2 #a11y-panel { border-radius: 14px; font-family: var(--font-main); }
html.hba-v2 .a11y-title { font-family: var(--font-display); }
html.hba-v2 .a11y-btn { border-radius: var(--r-md); border-width: 1.5px; }
html.hba-v2 .a11y-btn.active { border-color: var(--hba-primary-500); background: var(--hba-primary-50); color: var(--hba-primary-700); box-shadow: none; }
html.hba-v2 .a11y-btn.active .a11y-checkbox { background-color: var(--hba-primary-500); border-color: var(--hba-primary-500); }
html.hba-v2 .a11y-reset { background: var(--hba-text); border-radius: var(--r-md); }
html.hba-v2 .a11y-reset:hover { background: var(--pen-deep); }

/* Masaüstünde menü sayfa kayarken yerinde kalır */
@media (min-width: 769px) {
  html.hba-v2 .layout .sidebar { position: sticky !important; top: 0; align-self: flex-start; }
}

/* Telefon menü düğmesi */
html.hba-v2 #mobile-menu-toggle { background: var(--hl) !important; color: var(--hba-text) !important; border: 1.5px solid var(--hba-text) !important; border-radius: var(--r-md) !important; box-shadow: 0 2px 0 var(--hba-text) !important; }

/* ===================== 5) YÜZEYLER: kağıt parçaları ===================== */
html.hba-v2 .card, html.hba-v2 .panel, html.hba-v2 .box, html.hba-v2 .login-card, html.hba-v2 .stat-card, html.hba-v2 .stat,
html.hba-v2 .widget, html.hba-v2 .section-card, html.hba-v2 .hba-tile, html.hba-v2 .hba-row-card,
html.hba-v2 .daily-task-card, html.hba-v2 .task-card, html.hba-v2 .item-rank, html.hba-v2 .focus-widget {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: none !important;
}
html.hba-v2 .stat-card:hover, html.hba-v2 .stat:hover, html.hba-v2 .hba-tile:hover { box-shadow: var(--shadow-2) !important; border-color: var(--hba-line-2) !important; }

/* ===================== 6) DÜĞMELER ===================== */
html.hba-v2 .btn, html.hba-v2 button.btn, html.hba-v2 a.btn, html.hba-v2 input[type="submit"].btn, html.hba-v2 .hba-cta {
  border-radius: var(--r-md);
  font-weight: 650;
  box-shadow: 0 2px 0 var(--hba-primary-700);
}
html.hba-v2 .btn:hover, html.hba-v2 .hba-cta:hover { box-shadow: 0 1px 0 var(--hba-primary-700); transform: translateY(1px); }
html.hba-v2 .btn:active, html.hba-v2 .hba-cta:active { box-shadow: none; transform: translateY(2px); }
html.hba-v2 .btn.secondary, html.hba-v2 .btn.ghost, html.hba-v2 .btn.light, html.hba-v2 .btn-secondary, html.hba-v2 .btn-ghost,
html.hba-v2 .hba-cta.is-ghost { box-shadow: none; background: var(--hba-surface); border: 1.5px solid var(--hba-line-2); color: var(--hba-text) !important; }
html.hba-v2 .btn.secondary:hover, html.hba-v2 .btn.ghost:hover, html.hba-v2 .hba-cta.is-ghost:hover { background: var(--hba-surface-2); border-color: var(--hba-text); transform: none; }
html.hba-v2 .btn.danger, html.hba-v2 .btn-danger, html.hba-v2 .btn-del { box-shadow: none; }
html.hba-v2 .btn.success, html.hba-v2 .btn-success, html.hba-v2 .btn.ok, html.hba-v2 .btn-edit { box-shadow: none; }
html.hba-v2 .hba-cta.is-danger { box-shadow: 0 2px 0 var(--hba-rose-700); }

/* Form alanları: alt çizgili defter satırı yerine net kenarlık */
html.hba-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.hba-v2 select, html.hba-v2 textarea, html.hba-v2 .input, html.hba-v2 .f-input, html.hba-v2 .form-control {
  border-radius: var(--r-md) !important;
  border-width: 1.5px !important;
  font-family: var(--font-main);
}
html.hba-v2 label, html.hba-v2 .f-label { font-weight: 650; color: var(--hba-text-2); }

/* Etiketler, uyarılar */
html.hba-v2 .badge, html.hba-v2 .tag, html.hba-v2 .chip { border-radius: var(--r-sm); letter-spacing: 0; font-weight: 700; }
html.hba-v2 .alert, html.hba-v2 .alert-box, html.hba-v2 .notice { border-radius: var(--r-md); border-width: 1.5px; }
html.hba-v2 .table th, html.hba-v2 table thead th { font-size: .82rem; }
html.hba-v2 .table-responsive { border-radius: var(--r-lg); }

/* Açılır pencereler (SweetAlert) */
html.hba-v2 .swal2-popup { border-radius: 14px !important; border: 1px solid var(--hba-line); }
html.hba-v2 .swal2-title { font-family: var(--font-display) !important; letter-spacing: -0.02em; }
html.hba-v2 .swal2-styled.swal2-confirm { border-radius: var(--r-md) !important; box-shadow: 0 2px 0 var(--hba-primary-700) !important; }
html.hba-v2 .swal2-styled.swal2-cancel { border-radius: var(--r-md) !important; }
html.hba-v2 .hba-modal__dialog { border-radius: 14px !important; }

/* ===================== 7) ORTAK BİLEŞENLER ===================== */
html.hba-v2 .hba-page-head__title, html.hba-v2 .page-title, html.hba-v2 .page-header h1, html.hba-v2 .page-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem);
}
html.hba-v2 .hba-page-head__icon { border-radius: var(--r-md); }
html.hba-v2 .hba-page-head__sub { font-size: 1rem; }

html.hba-v2 .hba-tile__value, html.hba-v2 .stat-num, html.hba-v2 .kpi .num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
html.hba-v2 .hba-tile__icon, html.hba-v2 .stat-icon { border-radius: var(--r-md); }
html.hba-v2 .hba-bar { height: 10px; border-radius: 2px; }
html.hba-v2 .hba-bar > span { border-radius: 2px; }
html.hba-v2 .hba-chip { border-radius: var(--r-sm); font-weight: 700; padding: 3px 10px; }
html.hba-v2 .hba-chip.is-active { background: var(--hba-text); border-color: var(--hba-text); color: #fff; }
html.hba-v2 .hba-status { border-radius: var(--r-lg); border-width: 1.5px; }
html.hba-v2 .hba-status__title { font-family: var(--font-display); letter-spacing: -0.02em; }
html.hba-v2 .hba-avatar { border-radius: var(--r-md); }

/* Halka (diğer sayfalarda kalır): ince ve düz */
html.hba-v2 .hba-ring::before { inset: 10px; }
html.hba-v2 .hba-ring__num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }

/* Hero kartı */
html.hba-v2 .hba-hero {
  background:
    linear-gradient(var(--hba-surface), var(--hba-surface)) padding-box;
  border: 1.5px solid var(--hba-text);
  border-radius: var(--r-lg);
  box-shadow: 5px 5px 0 var(--hl) !important;
  position: relative;
}

/* ===== BASAMAK GÖSTERGESİ: "Hedefe Bir Adım" ===== */
html.hba-v2 .hba-stairs { display: flex; align-items: flex-end; gap: 4px; width: 148px; height: 84px; flex-shrink: 0; position: relative; border-bottom: 0; }
html.hba-v2 .hba-stairs > i {
  flex: 1 1 0; min-width: 5px;
  height: var(--h, 40%);
  border: 1.5px dashed var(--hba-line-2);
  border-bottom-width: 0;
  border-radius: 3px 3px 0 0;
  background: transparent;
  font-style: normal;
}
html.hba-v2 .hba-stairs > i.is-done { background: var(--hba-primary-500); border: 1.5px solid var(--hba-primary-500); border-bottom-width: 0; }
html.hba-v2 .hba-stairs > i.is-next { background: var(--hl); border: 1.5px solid var(--hba-text); border-bottom-width: 0; }
html.hba-v2 .hba-stairs::after { /* zemin çizgisi */
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px; height: 2px; background: var(--hba-text); border-radius: 1px;
}
html.hba-v2 .hba-stairs > i:last-child::before { /* hedef bayrağı */
  content: ""; position: absolute; top: -20px; right: 3px; width: 2px; height: 20px; background: var(--hba-text);
}
html.hba-v2 .hba-stairs > i:last-child::after {
  content: ""; position: absolute; top: -20px; right: -11px; border-style: solid; border-width: 6px 12px 6px 0; border-color: transparent var(--hba-rose-500) transparent transparent;
}
html.hba-v2 .hba-stairs > i:last-child { position: relative; }
html.hba-v2 .hp-today { flex-direction: column; align-items: flex-start; gap: 10px; }
html.hba-v2 .hba-stairs.is-mini { width: 112px; height: 58px; gap: 3px; margin-top: 18px; }
html.hba-v2 .hba-stairs.is-mini > i:last-child::before { top: -15px; height: 15px; }
html.hba-v2 .hba-stairs.is-mini > i:last-child::after { top: -15px; right: -9px; border-width: 5px 9px 5px 0; }
html.hba-v2 .hba-stairs-wrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 18px; flex-shrink: 0; }
html.hba-v2 .hba-stairs__num { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1; }
html.hba-v2 .hba-stairs__num small { font-family: var(--font-main); font-weight: 600; font-size: .85rem; color: var(--hba-muted); letter-spacing: 0; margin-left: 4px; }

/* ===================== 8) ÖĞRENCİ ANA SAYFASI ===================== */
html.hba-v2 #page-main-title { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.1; }
html.hba-v2 .header-subtitle { font-size: 1.02rem; font-weight: 450; max-width: 62ch; }
html.hba-v2 .dashboard-grid { gap: 21px; }

html.hba-v2 .hero-title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
html.hba-v2 .hero-sub { font-size: 1rem; max-width: 58ch; }
html.hba-v2 .hero-main { gap: 28px; align-items: flex-end; }
html.hba-v2 .hero-text .hba-chip { background: var(--hl); border-color: var(--hba-text); color: var(--hba-text); }

html.hba-v2 .pt-reminder { border-radius: var(--r-lg); background: var(--hba-primary-50); border: 1.5px solid var(--hba-primary-200); }
html.hba-v2 .pt-rem-ico { border-radius: var(--r-md); background: var(--hba-primary-500); }
html.hba-v2 .pt-rem-bar { height: 8px; border-radius: 2px; }
html.hba-v2 .pt-rem-bar > span { border-radius: 2px; }
html.hba-v2 .pt-rem-cta { color: var(--hba-primary-700); }

/* İstatistik şeridi: dört dikey kart; sayılar Bricolage, XP fosforla işaretli */
html.hba-v2 .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.hba-v2 .stat-card { padding: 14px 15px; flex-direction: column; align-items: flex-start; gap: 12px; }
html.hba-v2 .stat-icon { width: 32px; height: 32px; font-size: 18px; border-radius: var(--r-md); }
html.hba-v2 .stat-info { gap: 5px; }
@media (max-width: 560px) { html.hba-v2 .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.hba-v2 .stat-info h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
html.hba-v2 .stat-info p { font-size: .88rem; font-weight: 600; line-height: 1.25; }
html.hba-v2 .stat-card.tone-lav .stat-info h3 {
  align-self: flex-start;
  padding: 0 5px; margin-left: -5px;
  background: linear-gradient(transparent 48%, var(--hl) 48% 94%, transparent 94%);
}

/* Günlük görevler */
html.hba-v2 .daily-task-card { padding: 22px 24px; background: var(--hba-surface); border: 1px solid var(--hba-line); }
html.hba-v2 .daily-task-card h3 { font-family: var(--font-display); font-size: 1.3rem !important; letter-spacing: -0.02em !important; }
html.hba-v2 .task-row { border-radius: var(--r-md); border-bottom: 1px dashed var(--hba-line-2); }
html.hba-v2 .task-row:hover { background: var(--hba-surface-2); }
html.hba-v2 .dt-title { font-weight: 700; }

/* Tüm görevler */
html.hba-v2 #tasks-main-title { font-family: var(--font-display); font-size: 1.65rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; margin-bottom: 14px; }
html.hba-v2 .task-filters .hba-chip { padding: 5px 12px; font-size: .86rem; }
html.hba-v2 .task-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
html.hba-v2 .task-card {
  background: var(--hba-surface);
  border: 1px solid var(--hba-line);
  box-shadow: 3px 3px 0 var(--hba-primary-200, #C4CBFA);
  padding: 20px 22px;
}
html.hba-v2 .task-card:hover { transform: none; box-shadow: 4px 4px 0 var(--hba-primary-300, #98A3F0) !important; border-color: var(--hba-line-2); }
html.hba-v2 .task-card[data-group="late"]     { border-left-color: var(--hba-rose-500); }
html.hba-v2 .task-card[data-group="today"]    { border-left-color: var(--hba-text); background: linear-gradient(var(--hba-surface), var(--hba-surface)); }
html.hba-v2 .task-card[data-group="done"]     { border-left-color: var(--hba-mint-500); }
html.hba-v2 .task-card:hover[data-group="late"] { border-left-color: var(--hba-rose-500); }
html.hba-v2 .task-card:hover[data-group="done"] { border-left-color: var(--hba-mint-500); }
html.hba-v2 .task-subject { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; }
html.hba-v2 .task-status { border-radius: var(--r-sm); font-size: .8rem; padding: 4px 9px; font-weight: 700; }
html.hba-v2 .status-open { background: var(--hl-soft); color: var(--hba-text); border: 1px solid var(--hl); }
html.hba-v2 .task-desc { font-size: .96rem; line-height: 1.55; }
html.hba-v2 .coach-note-box { border-radius: var(--r-md); background: var(--hl-soft); border: 1px solid var(--hl); color: var(--hba-text); }
html.hba-v2 .coach-note-box i { color: var(--hba-text); }
html.hba-v2 .coach-note-box div, html.hba-v2 .coach-note-box strong { color: var(--hba-text); }
html.hba-v2 .xp-badge { background: var(--hl); color: var(--hba-text); border: 0; border-radius: 3px 8px 4px 8px; padding: 3px 10px; font-weight: 800; }
html.hba-v2 .xp-badge i { color: var(--hba-text); }
html.hba-v2 .task-actions button { border-radius: var(--r-md); font-weight: 700; padding: 10px 6px; }
html.hba-v2 .task-actions button:hover { transform: none; }
html.hba-v2 .btn-ai-advice { background: var(--hba-surface); color: var(--hba-primary-700); border: 1.5px solid var(--hba-primary-200); box-shadow: none; }
html.hba-v2 .btn-ai-advice:hover { background: var(--hba-primary-50); }
html.hba-v2 .btn-complete { background: var(--hba-primary-500); color: #fff; border: 0; box-shadow: 0 2px 0 var(--hba-primary-700); }
html.hba-v2 .btn-complete:hover { background: var(--hba-primary-600); box-shadow: 0 1px 0 var(--hba-primary-700); transform: translateY(1px); }
html.hba-v2 .btn-time-bender { background: var(--hba-surface); color: var(--hba-primary-700); border: 1.5px solid var(--hba-primary-200); box-shadow: none; }
html.hba-v2 .btn-completed-static { background: var(--hba-mint-100); color: var(--hba-mint-700); border: 1px solid var(--hba-mint-300); }
html.hba-v2 .task-card.is-completed { opacity: .82; }

/* Boss kartı kırmızı kalem gecesi olarak kalır; yalnız köşe ve yazı */
html.hba-v2 .boss-card { border-radius: var(--r-lg) !important; border: 1.5px solid var(--hba-rose-500) !important; animation: none; }
html.hba-v2 .boss-card .task-subject { text-shadow: none !important; font-family: var(--font-display); text-transform: none !important; letter-spacing: -0.02em; }

/* Odak kartı */
html.hba-v2 .focus-widget { background: var(--hba-surface); border: 1.5px solid var(--hba-text); padding: 28px 26px; text-align: left; }
html.hba-v2 .focus-widget.active-mode { background: var(--pen-deep) !important; border-color: var(--pen-deep) !important; transform: none; box-shadow: 5px 5px 0 var(--hl) !important; }
html.hba-v2 .fw-icon { color: var(--hba-primary-500); font-size: 36px; }
html.hba-v2 .active-mode .fw-icon { color: var(--hl); animation: none; }
html.hba-v2 .fw-title { font-family: var(--font-display); justify-content: flex-start; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
html.hba-v2 .fw-title i { color: var(--hba-primary-500); }
html.hba-v2 .fw-desc { font-size: .98rem; }
html.hba-v2 .fw-input { border-radius: var(--r-md); border-width: 1.5px; }
html.hba-v2 .fw-btn-time { border-radius: var(--r-md); border-width: 1.5px; font-family: var(--font-display); font-size: 1rem; }
html.hba-v2 .fw-btn-time.selected { background: var(--hl); border-color: var(--hba-text); color: var(--hba-text); box-shadow: none; }
html.hba-v2 .fw-btn-main { background: var(--hba-primary-500); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--hba-primary-700); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
html.hba-v2 .fw-btn-main:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--hba-primary-700); }
html.hba-v2 .fw-info-box { border-radius: var(--r-md); background: var(--hba-surface-2); }
html.hba-v2 .fw-info-box i { color: var(--hba-primary-500); }
html.hba-v2 .fw-timer { font-family: var(--font-display); color: var(--hl); text-shadow: none; font-size: clamp(3.6rem, 3rem + 3vw, 5.4rem); font-weight: 700; letter-spacing: -0.05em; text-align: center; }
html.hba-v2 .active-mode .fw-title { color: #fff !important; }
html.hba-v2 .fw-btn-danger, html.hba-v2 .fw-btn-success { border-radius: var(--r-md); }
html.hba-v2 .fw-stars i.active { color: var(--hba-text); filter: none; text-shadow: 0 0 0 var(--hl); }

/* Rütbe + günün sözü */
html.hba-v2 .item-rank { background: var(--hba-surface); border: 1px solid var(--hba-line); padding: 20px 22px; }
html.hba-v2 .item-rank:hover { transform: none; box-shadow: var(--shadow-2) !important; }
html.hba-v2 .rank-progress-bg { height: 10px; border-radius: 2px; }
html.hba-v2 .rank-progress-fill { border-radius: 2px; }
html.hba-v2 .item-rank > div:last-child { min-width: 0; }
html.hba-v2 .item-rank div[style*="uppercase"] { text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem !important; }
html.hba-v2 .item-rank div[style*="font-size: 10px"] { font-size: .78rem !important; }
html.hba-v2 .motivation-card { background: var(--hba-surface); border: 1px solid var(--hba-line); box-shadow: 4px 4px 0 var(--hl); color: var(--hba-text); border-radius: var(--r-lg); }
html.hba-v2 .mot-icon { background: var(--hl); border-radius: var(--r-md); color: var(--hba-text); }
html.hba-v2 .mot-label { color: var(--hba-text); font-size: .82rem; font-weight: 700; }
html.hba-v2 .mot-text { font-family: var(--font-display); font-style: normal; font-size: 1.08rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
html.hba-v2 .squad-card { border-radius: var(--r-lg) !important; background: var(--hba-primary-50); border: 1.5px solid var(--hba-primary-200); }
html.hba-v2 .squad-card:hover { transform: none; }

/* Savaş modu: kırmızı kalem gecesi */
html.hba-v2 body.war-mode { background: #0F141D !important; }
html.hba-v2 body.war-mode .hba-hero { border-color: var(--hba-rose-500) !important; box-shadow: 5px 5px 0 var(--hba-rose-500) !important; }
html.hba-v2 body.war-mode .hba-stairs > i { border-color: #46526A; }
html.hba-v2 body.war-mode .hba-stairs > i.is-done { background: var(--hba-rose-500); border-color: var(--hba-rose-500); }
html.hba-v2 body.war-mode .hba-stairs > i.is-next { background: var(--hl); border-color: #fff; }
html.hba-v2 body.war-mode .hba-stairs::after { background: #fff; }
html.hba-v2 body.war-mode .hba-stairs > i:last-child::before { background: #fff; }
html.hba-v2 body.war-mode .hba-stairs__num, html.hba-v2 body.war-mode .hba-stairs__num small { color: #F6F8FB; }
html.hba-v2 body.war-mode .hba-sidebar-war { display: none; }
html.hba-v2 .war-badge { border-radius: var(--r-sm); font-weight: 700; }
/* Koyu zeminde metin giriş alanı da koyu kalsın (ortak tema !important ile beyaza boyuyordu) */
html.hba-v2 body.war-mode .focus-widget:not(.active-mode) .fw-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
  background: #323C4E !important; color: #F6F8FB !important; border-color: #46526A !important;
}
html.hba-v2 body.war-mode .focus-widget:not(.active-mode) .fw-input::placeholder { color: #AEB8CA !important; }

/* Üniversite Hedefim: koyu karşılama kartı yerine kâğıt kart (diğer sayfalarla aynı dil) */
html.hba-v2 .goal-hero {
  background: var(--hba-surface); color: var(--hba-text);
  border: 1.5px solid var(--hba-text); border-radius: var(--r-lg);
  box-shadow: 5px 5px 0 var(--hl);
}
html.hba-v2 .goal-hero::before { display: none; }
html.hba-v2 .goal-hero .uni-title { font-family: var(--font-display); letter-spacing: -0.03em; }
html.hba-v2 .goal-hero .dept-title { color: var(--hba-muted); }
html.hba-v2 .goal-hero .motto-badge { background: var(--hl-soft); border: 1px solid var(--hl); color: var(--hba-text); border-radius: var(--r-sm); }
html.hba-v2 .goal-hero .btn-edit-goal { background: var(--hba-surface); border: 1.5px solid var(--hba-line-2); color: var(--hba-text); backdrop-filter: none; border-radius: var(--r-md); }
html.hba-v2 .goal-hero .btn-edit-goal:hover { background: var(--hba-surface-2); border-color: var(--hba-text); transform: none; }
html.hba-v2 .btn-ai-magic { border-radius: var(--r-md); background: var(--hba-primary-500); box-shadow: 0 2px 0 var(--hba-primary-700); }
html.hba-v2 .btn-ai-magic:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--hba-primary-700); }

/* Telefonda uzun metinli tablo hücreleri (koç notu vb.): etiket üstte, metin altta */
@media (max-width: 768px) {
  html.hba-v2 .table td[data-label="Not"], html.hba-v2 .table td[data-label="Koç Notu"] {
    flex-direction: column; align-items: flex-start; gap: 6px; max-width: none !important; text-align: left;
  }
}

/* Durum etiketleri (Kaynaklar vb.): eski koyu temadan kalma soluk renkler okunur hale */
html.hba-v2 .status-badge { border-radius: var(--r-sm); font-weight: 700; }
html.hba-v2 .status-badge.active { background: var(--hl-soft); color: var(--hba-text); border: 1px solid var(--hl); }
html.hba-v2 .status-badge.completed { background: var(--hba-mint-100); color: var(--hba-mint-700); border: 1px solid var(--hba-mint-300); }

/* Takvim (FullCalendar): bugün fosforlu, başlık düğmelerle sıkışmasın */
html.hba-v2 .fc {
  --fc-border-color: var(--hba-line);
  --fc-today-bg-color: var(--hl-soft);
  --fc-button-bg-color: var(--hba-primary-500);
  --fc-button-border-color: var(--hba-primary-500);
  --fc-button-hover-bg-color: var(--hba-primary-600);
  --fc-button-hover-border-color: var(--hba-primary-600);
  --fc-button-active-bg-color: var(--hba-primary-700);
  --fc-button-active-border-color: var(--hba-primary-700);
  font-family: var(--font-main);
}
html.hba-v2 .fc .fc-header-toolbar { flex-wrap: wrap; gap: 10px; }
html.hba-v2 .fc .fc-toolbar-title { font-family: var(--font-display); font-size: 1.3rem !important; font-weight: 700; letter-spacing: -0.02em; }
html.hba-v2 .fc .fc-day-today { background: var(--hl-soft) !important; }
html.hba-v2 .fc .fc-button { border-radius: var(--r-md); font-weight: 650; }

/* Tailwind büyük harf / geniş harf aralığı sınıfları */
html.hba-v2 .uppercase { text-transform: none; }
html.hba-v2 .tracking-wide, html.hba-v2 .tracking-wider, html.hba-v2 .tracking-widest { letter-spacing: 0; }

/* Tailwind köşe sınıfları da aynı sakin ölçeğe */
html.hba-v2 .rounded-xl { border-radius: 10px; }
html.hba-v2 .rounded-2xl { border-radius: 12px; }
html.hba-v2 .rounded-3xl { border-radius: 14px; }

/* ===================== 9b) TAILWIND (CDN) RENK SINIFLARI → kimlik paleti =====================
   Bazı sayfalar Tailwind CDN kullanır; bu sınıflar hex olmadığından palet çeviricisine takılmaz. */
html.hba-v2 .text-indigo-100, html.hba-v2 .text-indigo-200 { color: #C4CBFA; }
html.hba-v2 .text-indigo-400, html.hba-v2 .text-indigo-500, html.hba-v2 .text-purple-500, html.hba-v2 .text-blue-500, html.hba-v2 .text-sky-500 { color: #3A45D4; }
html.hba-v2 .text-indigo-600, html.hba-v2 .text-purple-600, html.hba-v2 .text-blue-600, html.hba-v2 .group:hover .group-hover\:text-indigo-600, html.hba-v2 .hover\:text-indigo-600:hover { color: #2A35C8; }
html.hba-v2 .text-indigo-700, html.hba-v2 .text-blue-700 { color: #222CB0; }
html.hba-v2 .text-indigo-800, html.hba-v2 .text-indigo-900, html.hba-v2 .text-blue-800 { color: #1B2394; }
html.hba-v2 .text-rose-500, html.hba-v2 .text-rose-600, html.hba-v2 .hover\:text-rose-500:hover { color: #D3352B; }
html.hba-v2 .text-emerald-500, html.hba-v2 .text-emerald-600 { color: #1E8E5A; }
html.hba-v2 .text-emerald-700 { color: #176E46; }
html.hba-v2 .text-orange-500, html.hba-v2 .text-amber-500, html.hba-v2 .text-amber-600 { color: #8A6200; }
html.hba-v2 .bg-indigo-50, html.hba-v2 .bg-blue-50 { background-color: #EEF0FF; }
html.hba-v2 .bg-indigo-50\/50 { background-color: rgba(238,240,255,.5); }
html.hba-v2 .bg-indigo-100, html.hba-v2 .bg-blue-100, html.hba-v2 .bg-purple-100, html.hba-v2 .hover\:bg-indigo-100:hover { background-color: #E0E4FF; }
html.hba-v2 .hover\:bg-indigo-50:hover { background-color: #EEF0FF; }
html.hba-v2 .bg-indigo-500\/20 { background-color: rgba(42,53,200,.2); }
html.hba-v2 .bg-indigo-500, html.hba-v2 .bg-blue-500, html.hba-v2 .bg-purple-500 { background-color: #3A45D4; }
html.hba-v2 .bg-indigo-600 { background-color: #2A35C8; }
html.hba-v2 .bg-indigo-700, html.hba-v2 .hover\:bg-indigo-700:hover { background-color: #222CB0; }
html.hba-v2 .bg-rose-50, html.hba-v2 .hover\:bg-rose-50:hover { background-color: #FDECEA; }
html.hba-v2 .bg-rose-50\/50 { background-color: rgba(253,236,234,.5); }
html.hba-v2 .bg-rose-100 { background-color: #FBD9D5; }
html.hba-v2 .bg-rose-500, html.hba-v2 .hover\:bg-rose-600:hover { background-color: #D3352B; }
html.hba-v2 .bg-emerald-50 { background-color: #E7F6EE; }
html.hba-v2 .bg-emerald-100 { background-color: #DDF3E7; }
html.hba-v2 .bg-emerald-500, html.hba-v2 .bg-emerald-600, html.hba-v2 .hover\:bg-emerald-700:hover { background-color: #1E8E5A; }
html.hba-v2 .bg-amber-50 { background-color: #FFF8CE; }
html.hba-v2 .border-indigo-100, html.hba-v2 .border-blue-100 { border-color: #E0E4FF; }
html.hba-v2 .border-indigo-200, html.hba-v2 .border-blue-200 { border-color: #C4CBFA; }
html.hba-v2 .border-indigo-300, html.hba-v2 .hover\:border-indigo-300:hover, html.hba-v2 .border-indigo-400 { border-color: #98A3F0; }
html.hba-v2 .border-indigo-500, html.hba-v2 .focus\:border-indigo-500:focus { border-color: #2A35C8; }
html.hba-v2 .border-indigo-500\/30 { border-color: rgba(42,53,200,.3); }
html.hba-v2 .border-rose-200 { border-color: #F6C6C1; }
html.hba-v2 .border-rose-400 { border-color: #EE7D74; }
html.hba-v2 .border-emerald-200 { border-color: #A9DDC1; }
html.hba-v2 .border-amber-100 { border-color: #F3E46E; }
html.hba-v2 .accent-indigo-600 { accent-color: #2A35C8; }
html.hba-v2 .ring-orange-500 { --tw-ring-color: #8A6200; }
html.hba-v2 .shadow-indigo-200 { --tw-shadow-color: #C4CBFA; }
/* degrade düğmeler (mor → mavi) */
html.hba-v2 .from-indigo-600 { --tw-gradient-from: #2A35C8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(42 53 200 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.hba-v2 .hover\:from-indigo-700:hover { --tw-gradient-from: #222CB0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 44 176 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.hba-v2 .to-purple-600, html.hba-v2 .to-blue-600 { --tw-gradient-to: #1B2394 var(--tw-gradient-to-position); }
html.hba-v2 .hover\:to-purple-700:hover { --tw-gradient-to: #151B6E var(--tw-gradient-to-position); }

/* ===================== 10) GİRİŞ SAYFASI ===================== */
html.hba-v2 { --grid-line: #D6E0EB; }
html.hba-v2 body.page-login {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
  align-items: stretch; justify-content: stretch;
  min-height: 100vh; overflow: auto;
  background: var(--hba-surface) !important;
}
html.hba-v2 .page-login .bg-shape { display: none; }
html.hba-v2 .page-login .login-art {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(22px, 4vw, 56px);
  background-color: #E9EFF6;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  border-right: 1.5px solid var(--hba-text);
}
html.hba-v2 .la-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--hba-text); }
html.hba-v2 .la-brand img { border-radius: 10px; }
html.hba-v2 .login-art .hba-art { width: 100%; max-width: 560px; height: auto; align-self: center; flex: 1 1 auto; min-height: 0; }
html.hba-v2 .la-line { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; color: var(--hba-text); }

html.hba-v2 .page-login .login-card {
  align-self: center; justify-self: center;
  background: transparent !important; backdrop-filter: none;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 40px clamp(24px, 4vw, 56px);
  max-width: 480px; width: 100%;
}
html.hba-v2 .page-login .login-header { text-align: left; margin-bottom: 28px; }
html.hba-v2 .page-login .login-header .logo { display: none; }
html.hba-v2 .page-login h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; color: var(--hba-text); line-height: 1.05; margin: 0 0 10px; }
html.hba-v2 .page-login .sub-text { font-size: 1.02rem; color: var(--hba-muted); font-weight: 450; }
html.hba-v2 .page-login label { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 650; color: var(--hba-text-2); }
html.hba-v2 .page-login .input {
  background: var(--hba-surface); border: 1.5px solid var(--hba-line-2); border-radius: var(--r-md);
  padding: 13px 16px 13px 46px; font-weight: 500; font-size: 1rem; min-height: 50px;
}
html.hba-v2 .page-login .input:focus { border-color: var(--hba-primary-500); box-shadow: var(--ring); background: #fff; }
html.hba-v2 .page-login .input-wrapper i.left-icon { color: var(--hba-muted); }
html.hba-v2 .page-login .input:focus ~ i.left-icon { color: var(--hba-primary-500); }
html.hba-v2 .page-login .btn-login {
  background: var(--hba-primary-500); border-radius: var(--r-md); padding: 15px; font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 3px 0 var(--hba-primary-700);
}
html.hba-v2 .page-login .btn-login:hover { background: var(--hba-primary-600); transform: translateY(1px); box-shadow: 0 2px 0 var(--hba-primary-700); }
html.hba-v2 .page-login .btn-login:active { transform: translateY(3px); box-shadow: none; }
html.hba-v2 .page-login #btnLoginBio { border: 1.5px solid var(--hba-text) !important; border-radius: var(--r-md) !important; color: var(--hba-text) !important; background: var(--hba-surface) !important; }
html.hba-v2 .page-login #btnLoginBio:hover { background: var(--hl) !important; }
html.hba-v2 .page-login .alert-error, html.hba-v2 .page-login .alert-warning { border-radius: var(--r-md); border-width: 1.5px; text-align: left; justify-content: flex-start; box-shadow: none; }
html.hba-v2 .page-login .remember-container input { accent-color: var(--hba-primary-500); }
html.hba-v2 .page-login .remember-text { color: var(--hba-text-2); }

@media (max-width: 900px) {
  html.hba-v2 body.page-login { grid-template-columns: 1fr; }
  html.hba-v2 .page-login .login-art { padding: 16px 20px; border-right: 0; border-bottom: 1.5px solid var(--hba-text); flex-direction: row; align-items: center; }
  html.hba-v2 .page-login .login-art .hba-art, html.hba-v2 .page-login .la-line { display: none; }
  html.hba-v2 .page-login .login-card { padding-top: 28px; }
}

/* ===================== 9) DUYARLI ===================== */
@media (max-width: 768px) {
  html.hba-v2 .sidebar, html.hba-v2 .app-sidebar { box-shadow: none !important; }
  html.hba-v2 .sidebar.is-open, html.hba-v2 .app-sidebar.is-open { box-shadow: 8px 0 30px rgba(21,27,39,.35) !important; }
  html.hba-v2 #page-main-title > i { display: none; }
  html.hba-v2 .main { padding: 70px 16px 40px !important; }
  html.hba-v2 .hero-main { flex-direction: column; align-items: flex-start; gap: 18px; }
  html.hba-v2 .hba-stairs { width: 132px; height: 72px; }
  html.hba-v2 .hba-hero { box-shadow: 4px 4px 0 var(--hl) !important; padding: 21px !important; }
  html.hba-v2 .task-card { padding: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.hba-v2 *, html.hba-v2 *::before, html.hba-v2 *::after { animation: none !important; transition-duration: .01ms !important; }
}


/* ===================== 12) ERİŞİLEBİLİRLİK VE OKUNURLUK (denetim düzeltmeleri) ===================== */
/* Eski açık gri yazı sınıfları AA kontrastının altındaydı (≈3,3:1): ikincil yazı artık --hba-muted (≈6:1) */
html.hba-v2 .text-slate-400, html.hba-v2 .text-slate-500 { color: var(--hba-muted); }
/* 12 px tabanı: Tailwind'in 9–11 px "mikro" yazı sınıfları ve "devamı" bağlantıları */
html.hba-v2 .text-\[9px\], html.hba-v2 .text-\[10px\], html.hba-v2 .text-\[11px\], html.hba-v2 .text-\[11\.5px\] { font-size: .75rem; line-height: 1.35; }
html.hba-v2 .read-more-link { font-size: .78rem !important; }
/* Klavye odağı: her etkileşimli öğede görünür halka */
html.hba-v2 a:focus-visible, html.hba-v2 button:focus-visible, html.hba-v2 input:focus-visible,
html.hba-v2 select:focus-visible, html.hba-v2 textarea:focus-visible, html.hba-v2 summary:focus-visible,
html.hba-v2 [tabindex]:focus-visible, html.hba-v2 [role="button"]:focus-visible { outline: 3px solid var(--hba-primary-500); outline-offset: 2px; }
/* Dokunma hedefleri ≥44 px (telefon ve tablet) */
@media (max-width: 900px) {
  html.hba-v2 .layout .sidebar .sidenav a { min-height: 44px; }
  html.hba-v2 .task-card button, html.hba-v2 .task-card a.btn { min-height: 44px; }
  html.hba-v2 button.w-8, html.hba-v2 a.w-8, html.hba-v2 .w-8.h-8 { min-width: 44px; min-height: 44px; }
  html.hba-v2 .hba-touch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -11px; padding: 11px; cursor: pointer; }
}