/* Habiterra Takip - uygulamaya özel küçük eklemeler (tema SCSS'ine dokunmadan) */
.ht-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ct-primary); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .5px;
}
.ht-avatar-lg { width: 46px; height: 46px; font-size: 16px; display: flex; }
.ht-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.side-nav .ht-soon .side-nav-link { opacity: .55; cursor: default; }
.side-nav .ht-soon .side-nav-link:hover { background: transparent; color: var(--ct-menu-item-color); }
.side-nav .ht-soon .badge { margin-left: auto; font-weight: 500; }
.ht-dl dt { font-weight: 500; color: var(--ct-secondary-color); margin-bottom: .5rem; }
.ht-dl dd { margin-bottom: .5rem; }
.ht-credential { border-width: 2px !important; }
.bg-orange-subtle { background-color: rgba(255, 86, 0, .12) !important; }
.text-orange { color: #ff5600 !important; }
/* Giriş ekranı: stok fotoğraf yerine marka renkleriyle sade zemin */
.ht-auth-bg {
    background-image:
        radial-gradient(circle at 8% 12%, rgba(254, 209, 65, .28) 0, transparent 32%),
        radial-gradient(circle at 92% 18%, rgba(42, 210, 201, .25) 0, transparent 30%),
        radial-gradient(circle at 85% 88%, rgba(72, 92, 199, .20) 0, transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(255, 86, 0, .14) 0, transparent 30%) !important;
    background-color: var(--ct-body-bg) !important;
}
.ht-auth-bg .card { box-shadow: 0 10px 40px rgba(17, 17, 17, .08); }
.ht-avatar-xl { width: 72px; height: 72px; font-size: 24px; display: flex; }
.ht-sms-body { word-break: break-all; max-width: 520px; }
/* Veli portalı */
.ht-parent { background: var(--ct-body-bg); }
.ht-parent-top { background: var(--ct-secondary-bg, #fff); border-bottom: 1px solid var(--ct-border-color); position: sticky; top: 0; z-index: 10; }
.ht-parent-top .ht-parent-wrap { padding-top: .6rem; padding-bottom: .6rem; }
.ht-parent-wrap { max-width: 560px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.ht-child-card { transition: transform .1s; } .ht-child-card:active { transform: scale(.98); }
.ht-soon-card { opacity: .7; }
.ht-class-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; flex-shrink: 0; object-fit: cover; font-family: Outfit, "Public Sans", sans-serif; }
.ht-color-pick { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.ht-color-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ht-color-pick label { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
/* Seçili renk: beyaz onay işareti + kendi renginde halka + hafif büyüme; seçili olmayanlar biraz soluk */
.ht-color-pick { align-items: flex-start; gap: .65rem; }
.ht-color-pick label { position: relative; width: 42px; height: 42px; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; opacity: .72; }
.ht-color-pick label:hover { opacity: 1; transform: translateY(-2px); }
.ht-color-pick input:checked + label { opacity: 1; transform: scale(1.1); border-color: #fff; box-shadow: 0 0 0 3px var(--c), 0 6px 14px -4px var(--c); }
.ht-color-pick input:checked + label::after { content: ''; position: absolute; inset: 0; background: center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
.ht-color-pick-name { font-size: 13px; color: var(--ct-secondary-color); margin: .35rem 0 .75rem; }
.ht-color-pick-name b { color: var(--ct-body-color); }
.ht-color-pick input:focus-visible + label { outline: 2px solid var(--ct-primary); outline-offset: 2px; }
.ht-perm td, .ht-perm th { white-space: nowrap; }
.ht-perm select { min-width: 110px; }
.ht-role-pill { font-size: 12px; font-weight: 500; padding: .2rem .55rem; border-radius: 999px; background: var(--ct-light); color: var(--ct-body-color); }

/* ===== Öğretmen uygulaması (mobil öncelikli) ===== */
.ht-app { background: var(--ct-body-bg); padding-bottom: 84px; }
.ht-app-wrap { max-width: 760px; margin: 0 auto; padding-left: 14px; padding-right: 14px; }
.ht-app-head { position: sticky; top: 0; z-index: 20; padding: 10px 0 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.ht-head-sub { font-size: 12px; opacity: .85; }
.ht-head-title { font-size: 19px; font-weight: 600; margin: 0; color: inherit; font-family: Outfit, "Public Sans", sans-serif; }
.ht-head-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); border: 0; font-size: 22px; flex-shrink: 0; }
.ht-avatar-head { width: 32px; height: 32px; background: rgba(255,255,255,.95); color: #485cc7; }
.ht-app-main { padding-top: 14px; }
.ht-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--ct-secondary-bg, #fff); border-top: 1px solid var(--ct-border-color); padding-bottom: env(safe-area-inset-bottom); }
.ht-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; color: var(--ct-secondary-color); font-size: 12px; min-height: 56px; }
.ht-tab i { font-size: 22px; } .ht-tab.active { color: var(--ct-primary); font-weight: 600; }
.ht-card { background: var(--ct-secondary-bg, #fff); border: 1px solid var(--ct-border-color); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.ht-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ht-stat { text-align: center; border-radius: 12px; padding: 10px 6px; background: var(--ct-tertiary-bg, #f6f7fb); }
.ht-stat b { display: block; font-size: 20px; font-family: Outfit, sans-serif; } .ht-stat > span { font-size: 12px; color: var(--ct-secondary-color); }
.ht-stat b span { font: inherit; color: inherit; }

.ht-f-blue { background: #e3e7f8; color: #2f3f8f; } .ht-f-yellow { background: #fff3cc; color: #6b5000; }
.ht-f-teal { background: #d4f6f4; color: #0b5f5a; } .ht-f-orange { background: #ffe4d6; color: #9a3500; }
.ht-kid { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--ct-border-color); }
.ht-kid:last-child { border-bottom: 0; }
.ht-kid-name { font-weight: 600; font-size: 15px; } .ht-kid-meta { font-size: 12px; color: var(--ct-secondary-color); display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ht-kid-meta i { font-size: 14px; vertical-align: -2px; }
.ht-kid.absent { opacity: .55; }
.ht-allergy { display: inline-flex; align-items: center; gap: 3px; background: #fde4e7; color: #a3162a; border-radius: 8px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }
/* Segmentli seçim: radyo düğmeleri büyük dokunma alanlı butonlar */
.ht-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ht-seg label { min-height: 40px; min-width: 44px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--ct-border-color); background: var(--ct-secondary-bg, #fff); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.ht-seg label i { font-size: 18px; }
.ht-seg input:checked + label { background: #485cc7; border-color: #485cc7; color: #fff; }
.ht-seg input:focus-visible + label { outline: 2px solid #485cc7; outline-offset: 2px; }
.ht-seg input.s-absent:checked + label { background: #e5354b; border-color: #e5354b; }
.ht-seg input.s-late:checked + label { background: #fed141; border-color: #fed141; color: #1a1a1a; }
.ht-seg input.s-soft:checked + label { background: #1fa8a0; border-color: #1fa8a0; }
.ht-bulk { background: var(--ct-tertiary-bg, #f6f7fb); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ht-savebar { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 19; padding: 8px 0; background: linear-gradient(to top, var(--ct-body-bg) 70%, transparent); }
.ht-savebar .btn { min-height: 50px; border-radius: 14px; font-size: 16px; font-weight: 600; width: 100%; }
.ht-pad-save { height: 70px; }
.ht-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ct-tertiary-bg, #f6f7fb); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.ht-chip form { display: inline; } .ht-chip button { border: 0; background: none; padding: 0 0 0 2px; color: var(--ct-secondary-color); }
.ht-empty { text-align: center; padding: 28px 12px; color: var(--ct-secondary-color); }
.ht-empty i { font-size: 40px; display: block; margin-bottom: 6px; }

/* ===== v0.6 ===== */
/* Bildirimler: köşede, kendiliğinden kaybolur (uyarı/hata kalır) */
.ht-toasts { position: fixed; top: 76px; right: 18px; z-index: 1090; width: min(420px, calc(100vw - 28px)); display: grid; gap: 8px; }
.ht-app .ht-toasts, .ht-parent .ht-toasts { top: 72px; left: 50%; right: auto; transform: translateX(-50%); }
.ht-toasts .alert { margin: 0 !important; box-shadow: 0 8px 28px rgba(17,17,17,.14); border: 0; animation: ht-in .25s ease-out; }
.ht-toast-out { opacity: 0; transform: translateY(-6px); transition: all .35s ease; }
@keyframes ht-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Kaydet butonu: yükleniyor */
.btn.ht-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.ht-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6); border-top-color: #fff; animation: ht-spin .7s linear infinite; }
.btn-light.ht-loading::after, .btn-warning.ht-loading::after, .btn-secondary.ht-loading::after { border-color: rgba(0,0,0,.2); border-top-color: #1a1a1a; }
@keyframes ht-spin { to { transform: rotate(360deg); } }
/* Akıllı arama paleti */
.ht-search-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 260px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--ct-border-color);
    background: var(--ct-tertiary-bg, #f6f7fb); color: var(--ct-secondary-color); font-size: 14px; cursor: pointer; }
.ht-search-btn kbd { margin-left: auto; font-size: 11px; background: var(--ct-secondary-bg, #fff); color: var(--ct-secondary-color); border: 1px solid var(--ct-border-color); padding: 1px 6px; border-radius: 6px; }
@media (max-width: 991px) { .ht-search-btn { min-width: 0; } .ht-search-btn span, .ht-search-btn kbd { display: none; } }
#ht-palette { position: fixed; inset: 0; z-index: 1100; background: rgba(17,17,30,.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 14px 14px; }
#ht-palette[hidden] { display: none; }
.ht-pal-box { width: min(620px, 100%); background: var(--ct-secondary-bg, #fff); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden; animation: ht-in .18s ease-out; }
.ht-pal-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ct-border-color); }
.ht-pal-head i { font-size: 20px; color: var(--ct-primary); }
.ht-pal-head input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; color: var(--ct-body-color); }
.ht-pal-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.ht-pal-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ct-secondary-color); padding: 8px 10px 4px; }
.ht-pal-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ct-body-color); }
.ht-pal-item i { font-size: 20px; color: var(--ct-secondary-color); width: 24px; text-align: center; }
.ht-pal-item small { display: block; color: var(--ct-secondary-color); font-size: 12px; }
.ht-pal-item.active, .ht-pal-item:hover { background: rgba(72,92,199,.10); color: var(--ct-body-color); }
.ht-pal-item.active i { color: var(--ct-primary); }
.ht-pal-empty { padding: 26px; text-align: center; color: var(--ct-secondary-color); }
.ht-pal-foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--ct-border-color); font-size: 12px; color: var(--ct-secondary-color); }
body.ht-pal-open { overflow: hidden; }
/* Operasyon panosu */
.ht-greet { font-family: Outfit, sans-serif; font-size: 24px; font-weight: 600; margin: 0; }
.ht-op { height: 100%; }
.ht-op .ht-op-num { font-size: 30px; font-weight: 700; font-family: Outfit, sans-serif; line-height: 1; }
.ht-op .ht-op-ok { color: #10c469; }
.ht-op ul { list-style: none; padding: 0; margin: 10px 0 0; }
.ht-op li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--ct-border-color); font-size: 13.5px; }
/* Boş ekran çizimi (logodaki yaprak geometrisi) */
.ht-empty-art { width: 96px; height: 96px; margin: 0 auto 10px; display: block; }
/* Öğrenci 360° sekmeler */
.ht-tabs .nav-link { font-weight: 500; }
.ht-day-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ct-border-color); }
.ht-day-date { min-width: 92px; font-weight: 600; font-size: 13px; }
.ht-onway { display: inline-flex; align-items: center; gap: 4px; background: #fff3cc; color: #6b5000; border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
/* ===== v0.8 iletişim ===== */
/* ===== Sohbet (öğretmen–veli): gün ayırıcı, gruplanmış balonlar, avatar, gönderildi/okundu işareti, yapışkan yazı alanı ===== */
.ht-chat { display: flex; flex-direction: column; }
.ht-day { align-self: center; margin: 14px 0 6px; }
.ht-day span { display: inline-block; padding: 3px 12px; border-radius: 12px; background: #e9ecf3; color: #5b6477; font-size: 12px; font-weight: 600; }
[data-bs-theme="dark"] .ht-day span { background: #2a3040; color: #aab2c5; }
.ht-msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; max-width: 100%; }
.ht-msg.first { margin-top: 10px; }
.ht-msg.mine { justify-content: flex-end; }
.ht-msg-av { flex: none; width: 34px; min-height: 1px; }
.ht-msg-av .ht-av { width: 34px; height: 34px; margin: 0; border: 0; font-size: 12px; }
.ht-mcol { display: flex; flex-direction: column; max-width: 80%; min-width: 0; }
.ht-msg.mine .ht-mcol { align-items: flex-end; }
.ht-mname { font-size: 12px; font-weight: 600; color: #485cc7; margin: 0 4px 3px; }
[data-bs-theme="dark"] .ht-mname { color: #9fb0ff; }
.ht-bubble { padding: 8px 12px 6px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.ht-bubble.me { background: #485cc7; color: #fff; }
.ht-bubble.them { background: #fff; color: #20263a; box-shadow: 0 1px 2px rgba(23, 30, 64, .12); }
[data-bs-theme="dark"] .ht-bubble.them { background: #2a3040; color: #e6e9f0; box-shadow: none; }
.ht-msg.mine .ht-bubble { border-bottom-right-radius: 5px; } .ht-msg.mine:not(.first) .ht-bubble { border-top-right-radius: 5px; } .ht-msg.mine:not(.last) .ht-bubble { border-bottom-right-radius: 5px; }
.ht-msg.them .ht-bubble { border-bottom-left-radius: 5px; } .ht-msg.them:not(.first) .ht-bubble { border-top-left-radius: 5px; } .ht-msg.them:not(.last) .ht-bubble { border-bottom-left-radius: 5px; }
.ht-mmeta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.ht-bubble.me .ht-mmeta { color: #f1f3ff; } .ht-bubble.them .ht-mmeta { color: #5b6477; }
[data-bs-theme="dark"] .ht-bubble.them .ht-mmeta { color: #aab2c5; }
.ht-tick { display: inline-flex; font-size: 15px; }
.ht-tick-sent { color: #e8ebff; } .ht-tick-read { color: #fed141; }
.ht-compose { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; z-index: 5; padding: 10px 0 6px; background: var(--ct-body-bg, #f1f3f8); }
.ht-app .ht-compose { bottom: var(--ht-tabbar-px, 0px); }   /* alt sekme çubuğu varsa betik yüksekliğini ölçüp yazar */
.ht-compose textarea { resize: none; border-radius: 18px; padding: 9px 14px; max-height: 140px; }
.ht-compose .btn { border-radius: 50%; width: 42px; height: 42px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.ht-compose .btn:disabled { opacity: .45; }
.ht-count { font-size: 12px; color: #b91c1c; text-align: right; min-height: 0; }
.ht-conv { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--ct-border-color); color: var(--ct-body-color); }
.ht-conv:last-child { border-bottom: 0; }
.ht-conv .ht-conv-last { font-size: 13px; color: var(--ct-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-dot { min-width: 22px; height: 22px; border-radius: 11px; background: #ff5600; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.ht-ann { border-left: 4px solid #ff5600; }
.ht-ann.unread { background: #fff7ef; }
[data-bs-theme=dark] .ht-ann.unread { background: rgba(255,86,0,.08); }
/* ===== v0.9 galeri, anket ===== */
.ht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.ht-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ct-tertiary-bg, #eef0f6); display: block; }
.ht-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-tile .ht-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ht-tile .ht-tile-del { position: absolute; top: 4px; right: 4px; }
.ht-consent { font-size: 11px; padding: 0 6px; border-radius: 6px; margin-left: 4px; }
.ht-consent.none { background: #fde4e7; color: #a3162a; } .ht-consent.internal { background: #fff3cc; color: #6b5000; }
.ht-bar { height: 10px; border-radius: 6px; background: var(--ct-tertiary-bg, #eef0f6); overflow: hidden; }
.ht-bar > span { display: block; height: 100%; background: #485cc7; }

/* Akademik takvim (FullCalendar) */
#ht-cal { --fc-border-color: var(--bs-border-color, #e3e6ef); --fc-today-bg-color: rgba(72, 92, 199, .07); --fc-page-bg-color: transparent; font-size: 13px; }
#ht-cal .fc-toolbar-title { font-size: 18px; font-family: Outfit, sans-serif; text-transform: capitalize; }
#ht-cal .fc-button { background: var(--bs-light, #f3f4f8); color: var(--bs-body-color); border: 1px solid var(--bs-border-color, #e3e6ef); box-shadow: none; text-transform: capitalize; }
#ht-cal .fc-button:hover, #ht-cal .fc-button-active { background: #485cc7 !important; color: #fff !important; border-color: #485cc7 !important; }
#ht-cal .fc-event { border-radius: 5px; padding: 1px 3px; cursor: pointer; }
#ht-cal .ht-ev-draft { border-style: dashed !important; border-width: 1.5px !important; }
#ht-cal .fc-daygrid-day:hover { background: rgba(72, 92, 199, .04); cursor: copy; }
#ht-cal .fc-multimonth-title { font-size: 14px; text-transform: capitalize; }
[data-bs-theme="dark"] #ht-cal { --fc-border-color: #2c3140; --fc-neutral-bg-color: #232835; }
/* Veli: küçük ay şeridi */
.ht-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 13px; }
.ht-mini-h { font-size: 11px; color: var(--bs-secondary-color, #8b95a5); padding-bottom: 2px; }
.ht-mini-d { display: flex; flex-direction: column; align-items: center; padding: 5px 0 3px; border-radius: 8px; color: inherit; text-decoration: none; min-height: 38px; }
a.ht-mini-d { font-weight: 600; background: rgba(72, 92, 199, .07); }
.ht-mini-today { outline: 2px solid #485cc7; outline-offset: -2px; }
.ht-mini-dots { display: flex; gap: 2px; margin-top: 2px; }
.ht-mini-dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
#ht-cal .fc-event-title { font-weight: 500 !important; }
#ht-cal .ht-ev-time { font-weight: 600; margin-right: 4px; }
/* Öğretmen ekranında yönetici için "Panele dön" */
.ht-panel-return { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; opacity: .92; text-decoration: none; padding: 1px 8px; border-radius: 20px; background: rgba(255,255,255,.18); margin-bottom: 2px; }
.ht-panel-return:hover { opacity: 1; background: rgba(255,255,255,.28); }
/* Takvim: sol panel tür kartları (Adminto takvim sayfası örneği) */
.ht-ext { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 6px 0; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: grab; user-select: none; }
.ht-ext:active { cursor: grabbing; }
.ht-ext-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ht-ext-draft { display: inline-block; width: 12px; height: 12px; border: 1.5px dashed #8b95a5; border-radius: 3px; vertical-align: -2px; }
#ht-cal .fc-header-toolbar { flex-wrap: wrap; gap: 8px; }
#ht-cal .fc-button-group > .fc-button { border-radius: 0; }
#ht-cal .fc-button-group > .fc-button:first-child { border-radius: 6px 0 0 6px; }
#ht-cal .fc-button-group > .fc-button:last-child { border-radius: 0 6px 6px 0; }
#ht-cal .fc-today-button { border-radius: 6px !important; margin-left: 6px !important; }
/* Tablo işlem düğmeleri (yuvarlak, yumuşak renkli) */
/* Hepsi aynı boyut ve hizada: bağlantı ve form içindeki düğme aynı kutu kuralına uyar */
.ht-ibtn { width: 32px; height: 32px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 16px; line-height: 1; vertical-align: middle; margin: 0 !important; flex: none; }
.ht-ibtn i { line-height: 1; }
.ht-iform { display: inline-flex !important; vertical-align: middle; margin: 0; }
.ht-ibtns { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; vertical-align: middle; }

/* Sınıf panosu: beyaz kutucuklar, kurumsal renkli 3 boyutlu ikonlar (iOS uygulama ikonu gibi), canlı durum satırı ve anlamlı hareket */
.ht-tiles-title { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8b95a5; margin: 16px 2px 9px; }
.ht-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
@media (min-width: 640px) { .ht-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* İkon + isim kutucuğun TAM ortasında (durum satırından bağımsız, böylece satırdaki tüm ikonlar aynı hizada); durum satırı alttaki boşlukta */
.ht-tiles .ht-action { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 124px; padding: 6px 4px; min-width: 0;
  background: #fff; border: 0; border-radius: 20px; color: #20263a; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 30, 64, .06), 0 6px 18px rgba(23, 30, 64, .07);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease;
  animation: htPop .5s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--i, 0) * 32ms); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .ht-tiles .ht-action:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(23, 30, 64, .06), 0 14px 28px rgba(23, 30, 64, .12); } }
.ht-tiles .ht-action:active { transform: scale(.95); box-shadow: 0 1px 2px rgba(23, 30, 64, .08); transition-duration: .08s; }
.ht-tiles .ht-tl { overflow-wrap: anywhere; }
.ht-ts { position: absolute; left: 4px; right: 4px; bottom: 9px; display: block; font-size: 11px; font-weight: 500; color: #7a8396; line-height: 13px; height: 13px; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-ts.warn { color: #d92d3a; font-weight: 700; } .ht-ts.ok { color: #0f8f88; }
.ht-ico { position: relative; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 27px; flex: none; color: #fff;
  background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 7px 14px -5px var(--cs); }
.ht-ico::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 52%); pointer-events: none; }
.ht-ico i, .ht-ico svg { position: relative; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.ht-ico svg { width: 28px; height: 28px; }
.ht-urgent .ht-ico svg { width: 24px; height: 24px; }
.ht-ico-blue { --c1: #7385e6; --c2: #485cc7; --cs: rgba(72, 92, 199, .6); --cr: #485cc7; }
.ht-ico-orange { --c1: #ff8d50; --c2: #ff5600; --cs: rgba(255, 86, 0, .55); --cr: #ff5600; }
.ht-ico-teal { --c1: #5ee6de; --c2: #16b5ac; --cs: rgba(22, 181, 172, .6); --cr: #16b5ac; }
.ht-ico-yellow { --c1: #ffe385; --c2: #f7be12; --cs: rgba(247, 190, 18, .65); --cr: #f7be12; color: #5b4200; }
.ht-ico-yellow i, .ht-ico-yellow svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
/* Genişletilmiş palet: kurumsal renklerle uyumlu tonlar (aynı satırda tekrar etmeyecek şekilde dağıtılır) */
.ht-ico-violet { --c1: #9d86ff; --c2: #6c4fe6; --cs: rgba(108, 79, 230, .55); --cr: #6c4fe6; }
.ht-ico-sky    { --c1: #5cc4ff; --c2: #1590e0; --cs: rgba(21, 144, 224, .55); --cr: #1590e0; }
.ht-ico-green  { --c1: #4fd88f; --c2: #16a660; --cs: rgba(22, 166, 96, .55); --cr: #16a660; }
.ht-ico-pink   { --c1: #ff7eb3; --c2: #e43f86; --cs: rgba(228, 63, 134, .55); --cr: #e43f86; }
.ht-ico-amber  { --c1: #ffb655; --c2: #f28a00; --cs: rgba(242, 138, 0, .55); --cr: #f28a00; }
.ht-ico-coral  { --c1: #ff9a8a; --c2: #f0584a; --cs: rgba(240, 88, 74, .55); --cr: #f0584a; }
.ht-ico-purple { --c1: #d07cf0; --c2: #a33fd0; --cs: rgba(163, 63, 208, .55); --cr: #a33fd0; }
.ht-ico-navy   { --c1: #5a76c9; --c2: #26408f; --cs: rgba(38, 64, 143, .55); --cr: #26408f; }
.ht-ico-brown  { --c1: #d99a62; --c2: #a8622b; --cs: rgba(168, 98, 43, .55); --cr: #a8622b; }
.ht-ico-lime   { --c1: #9ad84a; --c2: #5f9e0c; --cs: rgba(95, 158, 12, .55); --cr: #5f9e0c; }
.ht-ico-slate  { --c1: #8a96ae; --c2: #4f5c78; --cs: rgba(79, 92, 120, .5); --cr: #4f5c78; }
.ht-ico-cyan   { --c1: #4fd6ee; --c2: #0399b5; --cs: rgba(3, 153, 181, .55); --cr: #0399b5; }
.ht-ico-gold   { --c1: #e6c35a; --c2: #b8860b; --cs: rgba(184, 134, 11, .55); --cr: #b8860b; }
.ht-ico-plum   { --c1: #c46a9f; --c2: #85325f; --cs: rgba(133, 50, 95, .55); --cr: #85325f; }
.ht-tiles .ht-action .badge { position: absolute; top: 6px; right: 7px; z-index: 2; min-width: 21px; height: 21px; line-height: 17px; padding: 0 6px; border-radius: 11px; background: #e5354b !important; color: #fff; border: 2px solid #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 6px rgba(229, 53, 75, .4); }
/* Anlamlı hareket: yalnızca yapılacak iş varken */
.is-pulse .ht-ico::after { content: ''; position: absolute; inset: -5px; border-radius: 20px; border: 2.5px solid var(--cr); animation: htRing 1.9s ease-out infinite; pointer-events: none; }
.is-wiggle .ht-ico i, .is-wiggle .ht-ico svg { animation: htWiggle 2.4s ease-in-out infinite; transform-origin: 50% 70%; }
.is-wiggle .badge { animation: htBounce 2.4s ease-in-out infinite; }
.is-float .ht-ico i, .is-float .ht-ico svg { animation: htFloat 2.6s ease-in-out infinite; }
@keyframes htPop { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 65% { opacity: 1; transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes htRing { 0% { opacity: .75; transform: scale(.9); } 80%, 100% { opacity: 0; transform: scale(1.22); } }
@keyframes htWiggle { 0%, 62%, 100% { transform: rotate(0); } 68% { transform: rotate(-14deg); } 76% { transform: rotate(12deg); } 84% { transform: rotate(-7deg); } 90% { transform: rotate(3deg); } }
@keyframes htBounce { 0%, 62%, 100% { transform: translateY(0); } 70% { transform: translateY(-4px); } 80% { transform: translateY(0); } }
@keyframes htFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ht-tiles .ht-action, .is-pulse .ht-ico::after, .is-wiggle .ht-ico i, .is-wiggle .ht-ico svg, .is-wiggle .badge, .is-float .ht-ico i, .is-float .ht-ico svg { animation: none !important; } }
.ht-urgent { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 4px; background: #fff; border: 0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(23, 30, 64, .06), 0 6px 18px rgba(229, 53, 75, .12); color: #b3202f; font-weight: 600; text-decoration: none; }
.ht-urgent:hover { color: #b3202f; } .ht-urgent:active { transform: scale(.98); }
.ht-urgent .ht-ico { --c1: #ff6b7d; --c2: #e5354b; --cs: rgba(229, 53, 75, .55); width: 44px; height: 44px; border-radius: 14px; font-size: 23px; }
.ht-urgent small { display: block; font-weight: 400; color: #8b95a5; font-size: 12px; }
[data-bs-theme="dark"] .ht-tiles .ht-action, [data-bs-theme="dark"] .ht-urgent { background: #1f2430; color: #e6e9f0; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .ht-tiles .ht-action .badge { border-color: #1f2430; }

/* ===== Hareket ve geri bildirim (bütün paneller) ===== */
/* Sayfa geçişi (View Transitions): sayfalar arasında yumuşak geçiş; üst bar ve menü yerinde kalır */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    /* Kısa tutulur: geçiş sürerken tarayıcı fare/dokunma olaylarını sayfaya iletmez */
    ::view-transition-old(root) { animation: htVtOut .09s ease-in both; }
    ::view-transition-new(root) { animation: htVtIn .18s cubic-bezier(.2, .8, .2, 1) both; }
    .app-topbar, .side-nav, .sidenav-menu, .ht-app-head, .ht-tabbar { view-transition-name: none; }
    ::view-transition-group(ht-hero) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}
@keyframes htVtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes htVtIn { from { opacity: 0; transform: translateY(10px); } }
/* Dokunma dalgası */
.ht-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .14; transform: scale(0); animation: htRipple .6s cubic-bezier(.2, .8, .2, 1) forwards; pointer-events: none; z-index: 0; }
.btn-primary .ht-ripple, .btn-success .ht-ripple, .btn-danger .ht-ripple, .btn-warning .ht-ripple { background: #fff; opacity: .28; }
@keyframes htRipple { to { transform: scale(1); opacity: 0; } }
/* Düğmeler: basılınca içeri */
.btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:not(:disabled):active { transform: scale(.97); }
/* Kartlar: açılışta sırayla belirir; yönetici kartları üzerine gelince hafifçe yükselir */
.page-content .card, .ht-card { animation: htRise .42s cubic-bezier(.2, .8, .2, 1) both; }
.page-content .row > [class*="col"]:nth-child(2) > .card, .ht-card:nth-of-type(2) { animation-delay: .04s; }
.page-content .row > [class*="col"]:nth-child(3) > .card, .ht-card:nth-of-type(3) { animation-delay: .08s; }
.page-content .row > [class*="col"]:nth-child(4) > .card, .ht-card:nth-of-type(4) { animation-delay: .12s; }
.page-content .row > [class*="col"]:nth-child(n+5) > .card, .ht-card:nth-of-type(n+5) { animation-delay: .16s; }
@keyframes htRise { from { opacity: 0; transform: translateY(12px); } }
@media (hover: hover) { .ht-lift { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease; } .ht-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23, 30, 64, .1); } }
/* Bildirimler: kayarak gelir */
.ht-toast-in { animation: htToast .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes htToast { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
/* Başarı kutlaması: onay halkası çizilir */
.ht-cel-icon { width: 30px; height: 30px; flex: none; }
.ht-cel-icon circle { stroke-dasharray: 76; stroke-dashoffset: 76; }
.ht-cel-icon path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.ht-cel-icon.on circle { animation: htDraw .5s .1s ease-out forwards; }
.ht-cel-icon.on path { animation: htDraw .35s .5s ease-out forwards; }
@keyframes htDraw { to { stroke-dashoffset: 0; } }
.ht-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.ht-confetti span { position: fixed; width: 8px; height: 8px; border-radius: 2px; margin: -4px 0 0 -4px; }
@media (prefers-reduced-motion: reduce) {
    .ht-ripple, .page-content .card, .ht-card, .ht-toast-in { animation: none !important; }
    .ht-cel-icon circle, .ht-cel-icon path { stroke-dashoffset: 0 !important; animation: none !important; }
    .btn:active { transform: none !important; }
}

/* ===== Habiterra Avantaj ===== */
.ht-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ht-chips::-webkit-scrollbar { display: none; }
.ht-chip { flex: none; padding: 6px 12px; border-radius: 18px; background: #fff; color: #20263a; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(23, 30, 64, .08); }
.ht-chip.on { background: #485cc7; color: #fff; }
.ht-offer { padding: 12px 14px; border-radius: 18px; }
.ht-offer .ht-ico, .ht-perk-card .ht-ico { border-radius: 15px; font-size: 25px; }
.ht-offer-disc { flex: none; font-family: Outfit, system-ui, sans-serif; font-weight: 800; font-size: 17px; color: #e43f86; background: #fdeaf3; padding: 6px 10px; border-radius: 12px; white-space: nowrap; }
.ht-offer-big { font-family: Outfit, system-ui, sans-serif; font-weight: 800; font-size: 40px; line-height: 1.05; color: #e43f86; }
.ht-qr { width: 210px; height: 210px; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(23, 30, 64, .08); }
.ht-qr svg { width: 100%; height: 100%; display: block; }
.ht-code { font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em; color: #20263a; }
.ht-code-card { animation: htPop .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.ht-verdict { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 12px; border-radius: 20px; font-family: Outfit, system-ui, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: .04em; animation: htPop .45s cubic-bezier(.2, .9, .3, 1.25) both; }
.ht-verdict i { font-size: 64px; }

/* Vazgeç düğmeleri kırmızı çerçeveli: Kaydet'ten net ayrılır */
.btn-cancel, .btn.btn-outline-danger.ht-cancel { border-width: 1.5px; font-weight: 600; }
/* Sayfa başlığındaki Geri düğmesi */
.ht-back { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 600; }

/* ===== Rozet merkezi: durum rozetleri (Adminto "contextual" biçimi: dolu renk). Renkler WCAG AA (≥4.5:1) kontrastlıdır.
   ok: tamam/yayında/ödendi · wait: bekliyor · bad: gecikti/reddedildi/ciddi · info: planlandı/taslak/yakında · new: yeni · done: mezun/tamamlandı · off: pasif/iptal ===== */
.badge[class*="ht-b-"] { font-weight: 600; letter-spacing: .01em; padding: .36em .72em; border-radius: 6px; font-size: .75rem; line-height: 1.15; vertical-align: middle; border: 0; }
.badge.ht-b-ok   { background: #0d7f4d; color: #fff; }
.badge.ht-b-wait { background: #f5b312; color: #3a2800; }
.badge.ht-b-bad  { background: #d92d3a; color: #fff; }
.badge.ht-b-info { background: #1273c4; color: #fff; }
.badge.ht-b-new  { background: #485cc7; color: #fff; }
.badge.ht-b-done { background: #6c4fe6; color: #fff; }
.badge.ht-b-off  { background: #e9ecf3; color: #4a5368; }
[data-bs-theme="dark"] .badge.ht-b-off { background: #2a3040; color: #c4cad8; }

/* ===== Bugün şeridi (yönetici / müdür özeti): gradyanlı kart, avatar grupları, eylem kartları ===== */
.ht-today { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; justify-content: space-between; padding: 20px 22px; border-radius: 18px; color: #fff; margin-bottom: 12px;
  background: linear-gradient(135deg, #3f52b8, #5064cf); box-shadow: 0 10px 26px -12px rgba(63, 82, 184, .6); }
.ht-today-main { min-width: 220px; flex: 1 1 260px; }
.ht-today-date { font-size: 13px; opacity: .92; }
.ht-today-big { font-family: Outfit, system-ui, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; margin: 4px 0 10px; }
.ht-today-big small { font-size: 16px; font-weight: 500; opacity: .92; }
.ht-today-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .28); max-width: 360px; overflow: hidden; }
.ht-today-bar span { display: block; height: 100%; border-radius: 4px; background: #fed141; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.ht-today-groups { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.ht-today-cap { font-size: 12px; margin-top: 6px; opacity: .95; }
.ht-ag { display: flex; }
.ht-av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--av, #6b7385); color: #fff; font-size: 13px; font-weight: 600; border: 2px solid #4658c0; margin-left: -10px; cursor: default; flex: none; }
.ht-ag > .ht-av:first-child { margin-left: 0; }
.ht-av-more { background: rgba(255, 255, 255, .26); color: #fff; }
.ht-kpis { display: grid; gap: 10px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ht-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; color: #fff; text-decoration: none; font-size: 14px; line-height: 1.25; }
.ht-kpi:hover { color: #fff; }
.ht-kpi > i:first-child { font-size: 26px; flex: none; }
.ht-kpi b { display: block; font-family: Outfit, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.05; }
.ht-kpi span { flex: 1; }
.ht-kpi-go { font-size: 18px; opacity: .8; }
.ht-kpi-orange { background: #c2410c; } .ht-kpi-teal { background: #0f766e; } .ht-kpi-red { background: #b91c1c; }
.ht-kpi-ok { background: #e3f4ea; color: #14532d; } .ht-kpi-ok:hover { color: #14532d; } .ht-kpi-ok > i:first-child { color: #0d7f4d; }
[data-bs-theme="dark"] .ht-kpi-ok { background: #17352a; color: #bfe8d0; } [data-bs-theme="dark"] .ht-kpi-ok:hover { color: #bfe8d0; }
@media (max-width: 575px) { .ht-today-big { font-size: 34px; } .ht-av { width: 34px; height: 34px; font-size: 12px; } }

/* ===== Fırsat vitrini (veli ana ekranı): crossfade, gradyanlı kartlar ===== */
.ht-vitrin { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px -10px rgba(23, 30, 64, .35); background: #fff; }
.ht-vslide { display: flex; align-items: center; gap: 14px; min-height: 124px; padding: 18px 20px 30px; color: #fff; text-decoration: none; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.ht-vslide:hover { color: #fff; }
.ht-vico { flex: none; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; }
.ht-vtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ht-vdisc { font-family: Outfit, system-ui, sans-serif; font-size: 28px; font-weight: 800; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-vname { font-weight: 600; font-size: 15px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-vsub { font-size: 13px; opacity: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-vgo { font-size: 22px; opacity: .85; flex: none; }
.ht-vitrin .carousel-indicators { bottom: 44px; margin: 0; z-index: 3; }   /* "Tüm fırsatlar" şeridinin (≈36 px) üstünde, renkli alanın içinde kalır */
.ht-vitrin .carousel-indicators [data-bs-target] { width: 18px; height: 4px; border-radius: 2px; border: 0; background-color: #fff; opacity: .5; margin: 0 3px; }
.ht-vitrin .carousel-indicators .active { opacity: 1; }
.ht-vpause { position: absolute; top: 8px; right: 8px; z-index: 4; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.ht-vpause:hover { background: rgba(0, 0, 0, .45); }
.ht-vall { display: block; padding: 8px 16px; font-size: 13px; font-weight: 600; text-align: right; background: #fff; color: #485cc7; text-decoration: none; }
[data-bs-theme="dark"] .ht-vall { background: #1f2430; color: #9fb0ff; }
@media (max-width: 575px) { .ht-vdisc { font-size: 24px; } .ht-vico { width: 46px; height: 46px; font-size: 24px; } }

/* ===== Renkli kaydırma çubuğu: yalnızca iç kaydırma alanları (tablo, pencere, açılır menü, uzun liste, yazı alanı). Sayfanın kendi çubuğu sisteme bırakılır. ===== */
:root { --ht-sb-thumb: #485cc7; --ht-sb-thumb-hover: #3748a8; }
[data-bs-theme="dark"] { --ht-sb-thumb: #8c9bff; --ht-sb-thumb-hover: #aab5ff; }
.ht-scroll, .table-responsive, .modal-body, .dropdown-menu, textarea, .ht-chips,
[style*="overflow:auto"], [style*="overflow: auto"], [style*="overflow-y:auto"], [style*="overflow-y: auto"], [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
    scrollbar-width: thin; scrollbar-color: var(--ht-sb-thumb) transparent; }
@supports not (scrollbar-color: auto) {
    .ht-scroll::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar, textarea::-webkit-scrollbar { width: 8px; height: 8px; }
    .ht-scroll::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .dropdown-menu::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb { background: var(--ht-sb-thumb); border-radius: 4px; }
    .ht-scroll::-webkit-scrollbar-thumb:hover, .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--ht-sb-thumb-hover); }
}
.simplebar-scrollbar:before { background: var(--ht-sb-thumb) !important; }

/* Afişli vitrin slaydı: görsel her zaman %60 koyu katmanla örtülür; bu sayede en açık (beyaz) görselde bile beyaz yazı ≥ 4,5:1 kalır */
.ht-vslide-img { background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), var(--img) center / cover no-repeat, linear-gradient(120deg, var(--c1), var(--c2)); }
.ht-offer-banner { display: block; width: calc(100% + 2px); max-height: 150px; object-fit: cover; margin: -1px -1px 12px; border-radius: 18px 18px 8px 8px; }

/* ===== Fotoğraflı avatarlar (çocuk ve personel profil fotoğrafı) ===== */
.ht-avatar-photo { padding: 0; overflow: hidden; background: none !important; }
.ht-avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ht-av-photo { padding: 0; overflow: hidden; background: #cbd5e1; }
.ht-av-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.ht-profile-photo { width: 120px; height: 120px; font-size: 40px; }

.ht-avatar-sm { width: 28px; height: 28px; font-size: 11px; flex: none; }
.ht-ico-olive { --c1: #b7c24a; --c2: #7d8a14; --cs: rgba(125, 138, 20, .55); --cr: #7d8a14; }

/* Veli: "Şu an" kartı (v0.40) */
.ht-live-ico { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ht-live-tl li { padding: 5px 0; border-top: 1px solid var(--ct-border-color); }
.ht-live-tl li:first-child { border-top: 0; }
.ht-live-t { width: 2.6rem; flex: none; font-variant-numeric: tabular-nums; }

/* Belge şablonu editörü (v0.42) */
.le-wrap { overflow: auto; }
.le-stage { position: relative; width: 100%; max-width: 980px; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.18); user-select: none; touch-action: none; margin: 0 auto; }
.le-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.le-box { position: absolute; outline: 1px dashed rgba(72,92,199,.6); cursor: move; overflow: hidden; display: flex; box-sizing: border-box; }
.le-box.sel { outline: 2px solid #485cc7; background: rgba(72,92,199,.1); z-index: 2; }
.le-h { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; background: #485cc7; cursor: nwse-resize; opacity: 0; }
.le-box.sel .le-h { opacity: 1; }
.le-txt { width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.le-ph { width: 100%; display: flex; align-items: center; justify-content: center; background: #e6e9f2; color: #6b7280; font: 12px sans-serif; pointer-events: none; }
.le-tbl { width: 100%; pointer-events: none; }
.le-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-cells { display: flex; width: 100%; pointer-events: none; }
.le-cell { flex: 1; text-align: center; border-left: 1px dotted rgba(72,92,199,.4); }
/* Hatıra defteri: fotoğraf ızgarası ve sayfa sekmeleri (belge şablonu editörü) */
.le-photogrid { align-items: stretch; }
.le-grid { display: grid; width: 100%; height: 100%; pointer-events: none; }
.le-gc { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.le-gp { flex: 1; background: rgba(72,92,199,.14); border: 1px dashed rgba(72,92,199,.5); border-radius: 2px; }
.le-gn { text-align: center; line-height: 1.4; white-space: nowrap; overflow: hidden; }
.le-tabs .nav-link { font-size: 13px; }

/* Bildirim merkezi (v0.51) */
.ht-bell { position: relative; }
.ht-bell-badge { position: absolute; top: 6px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.ht-bell-badge[hidden] { display: none; }
.ht-notif-menu { width: 390px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.ht-notif-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem 1rem; border-bottom: 1px solid var(--ct-border-color); }
.ht-notif-list { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; }
.ht-notif-foot { display: block; padding: .6rem 1rem; text-align: center; border-top: 1px solid var(--ct-border-color); font-weight: 600; font-size: 13px; }
.ht-notif { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--ct-border-color); }
.ht-notif:last-child { border-bottom: 0; }
.ht-notif:hover, .ht-notif:focus-visible { background: var(--ct-tertiary-bg); color: inherit; }
.ht-notif.is-unread { background: rgba(72, 92, 199, .07); }
.ht-notif-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 18px; }
.ht-notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-notif-title { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; line-height: 1.3; }
.ht-notif-body { font-size: 12.5px; color: var(--ct-secondary-color); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ht-notif-meta { font-size: 11.5px; color: var(--ct-secondary-color); }
.ht-notif-dot { width: 9px; height: 9px; border-radius: 50%; background: #485cc7; flex: none; margin-top: 7px; }
.ht-notif-empty { padding: 2rem 1rem; text-align: center; color: var(--ct-secondary-color); font-size: 13px; }
.ht-notif-page .ht-notif { border: 0; border-bottom: 1px solid var(--ct-border-color); }
.ht-parent-bell { position: relative; }
.ht-parent-bell .ht-bell-badge { top: -6px; right: -6px; }
@media (max-width: 575.98px) {
    .ht-notif-menu { position: fixed !important; top: 62px !important; left: 12px !important; right: 12px !important; width: auto; transform: none !important; }
}

/* ===== v0.58: gri "btn-light" düğmeler renkli (yumuşak mavi) — yazı gibi değil, düğme gibi görünsün ===== */
.btn.btn-light {
    --ct-btn-color: #3748a8; --ct-btn-bg: #e6eafc; --ct-btn-border-color: #c9d1f5;
    --ct-btn-hover-color: #fff; --ct-btn-hover-bg: #485cc7; --ct-btn-hover-border-color: #485cc7;
    --ct-btn-active-color: #fff; --ct-btn-active-bg: #3748a8; --ct-btn-active-border-color: #3748a8;
    --ct-btn-disabled-color: #7482cf; --ct-btn-disabled-bg: #eef0fb; --ct-btn-disabled-border-color: #dde2f8;
    --ct-btn-focus-shadow-rgb: 72, 92, 199;
    font-weight: 500;
}
.btn.btn-light.text-danger { --ct-btn-color: #c42a3f; --ct-btn-bg: #fdeaed; --ct-btn-border-color: #f6c5cc; --ct-btn-hover-color: #fff; --ct-btn-hover-bg: #e5354b; --ct-btn-hover-border-color: #e5354b; --ct-btn-active-bg: #c42a3f; --ct-btn-active-border-color: #c42a3f; }
.btn.btn-light.text-danger:hover, .btn.btn-light.text-danger:focus-visible { color: #fff !important; }
[data-bs-theme="dark"] .btn.btn-light {
    --ct-btn-color: #c3caff; --ct-btn-bg: rgba(140, 155, 255, .16); --ct-btn-border-color: rgba(140, 155, 255, .34);
    --ct-btn-hover-color: #11142e; --ct-btn-hover-bg: #aab5ff; --ct-btn-hover-border-color: #aab5ff;
    --ct-btn-active-color: #11142e; --ct-btn-active-bg: #8c9bff; --ct-btn-active-border-color: #8c9bff;
    --ct-btn-disabled-color: #7f8bd6; --ct-btn-disabled-bg: rgba(140, 155, 255, .08); --ct-btn-disabled-border-color: rgba(140, 155, 255, .18);
}
[data-bs-theme="dark"] .btn.btn-light.text-danger { --ct-btn-color: #ff9aa6; --ct-btn-bg: rgba(229, 53, 75, .16); --ct-btn-border-color: rgba(229, 53, 75, .4); --ct-btn-hover-bg: #ff7787; --ct-btn-hover-border-color: #ff7787; }
/* Toplu seçim kutusu ve sekme düğmeleri: gri zemin yerine belirgin çerçeve */
.ht-bulk { border: 1px solid var(--ct-border-color); }
.ht-seg label { border-color: #c9d1f5; color: var(--ct-body-color); }
[data-bs-theme="dark"] .ht-seg label { border-color: rgba(140, 155, 255, .34); }