/* =====================================================================
   روضة ليتل هاندز — Global UI/UX & Responsive Enhancement Layer
   Bu dosya her sayfada EN SON yüklenir; mevcut stilleri bozmadan
   güvenli, evrensel iyileştirmeler ekler (responsive sağlamlaştırma,
   erişilebilirlik, tipografi, gölge/animasyon cilası).
   ===================================================================== */

/* ---------- 1) Responsive güvenlik ağı ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* sabit navbar için anchor ofseti */
}

body {
    overflow-x: hidden;            /* yatay taşmayı tamamen engelle */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Medya asla taşmasın */
img, svg, video, canvas, iframe {
    max-width: 100%;
}
img, video, canvas { height: auto; }

/* Uzun kelime/sayı/linkler taşmasın */
p, h1, h2, h3, h4, h5, h6, span, a, label, li, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 2) Erişilebilirlik: klavye odak halkası ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(33, 150, 243, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dokunmatik vurgu rengini kaldır */
a, button, [role="button"], input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* ---------- 3) Metin seçimi rengi (kurumsal) ---------- */
::selection {
    background: rgba(33, 150, 243, 0.22);
    color: inherit;
}

/* ---------- 4) Şık, ince kaydırma çubukları (genel) ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #b0bec5 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #90a4ae; background-clip: content-box; }

/* ---------- 5) Yumuşak geçişler (etkileşimli öğeler) ---------- */
a, button, .btn, .cta-button, .submit-button, .submit-btn,
.feature-card, .finnish-feature, .about-feature, .value-item,
.gallery-item, .stat-card, .summary-card {
    transition: transform .25s ease, box-shadow .25s ease,
                background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- 6) Görseller daha keskin/kurumsal ---------- */
.gallery-item img { image-rendering: auto; }

/* ---------- 7) Tablolar: mobilde kırılma yerine yatay kaydırma ---------- */
@media (max-width: 768px) {
    .table-container,
    .table-responsive,
    .students-table-container,
    .accounts-table-container,
    .invoices-table-container,
    .installments-table-container,
    .attendance-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 8) Dokunmatik cihazlarda rahat hedef boyutu ---------- */
@media (hover: none) and (pointer: coarse) {
    .nav-links a,
    .btn,
    .btn-primary,
    .btn-secondary,
    .cta-button,
    .submit-button,
    .submit-btn,
    .btn-login,
    .ann-btn,
    .nav-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* iOS'ta input odaklanınca otomatik zoom'u engelle */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---------- 9) Hareket azaltma tercihi (erişilebilirlik) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 10) Çok küçük ekran ince ayarları ---------- */
@media (max-width: 400px) {
    body { font-size: 15px; }
}

/* ---------- 11) Ana sayfa mobil header düzeni ---------- */
@media (max-width: 768px) {
    /* Logo ve hamburger aynı satırda, dikey yığılma yerine */
    .nav-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .burger { margin-inline-start: auto; }
}

/* ---------- 12) Kart ve buton mikro-cilası (genel) ---------- */
.stat-card,
.summary-card,
.feature-card,
.about-feature,
.finnish-feature,
.ann-card,
.announcement-item {
    will-change: transform;
}

/* Birincil butonlarda yumuşak gölge derinliği */
.btn-primary:hover,
.btn-login:hover,
.cta-button:hover,
.submit-button:hover,
.submit-btn:hover {
    box-shadow: 0 8px 22px rgba(33, 150, 243, 0.28);
}

/* ---------- 13) Yazdırma (print) görünümü ---------- */
@media print {
    .admin-sidebar,
    .mobile-menu-toggle,
    .sidebar-overlay,
    .header,
    .footer,
    .nav-links,
    .mobile-menu-btn {
        display: none !important;
    }
    .admin-main { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
}