/* core_app/static/css/base_core.css
 * Critical shell/layout styles extracted from base.html inline CSS.
 * Keeping these rules in a static file avoids CSP-inline style breakage in production.
 *
 * 2026 CROSS-BROWSER STABILITY HARDENING + MODERN CSS
 * Supports: Chrome 90+, Firefox 90+, Safari 15+, Edge 90+, Samsung Internet 15+
 * Mobile: iOS Safari 15+, Chrome Android 90+
 *
 * Modern CSS Features (2026):
 * - Container Queries (@container)
 * - :has() Selector
 * - OKLCH Colors
 * - View Transitions
 * - Scroll-driven Animations
 * - CSS Nesting
 */

/* ==================================================================
 * 0. MODERN CSS FEATURE DETECTION & FALLBACKS
 * ================================================================== */

/* HTMX normally injects these rules through an inline <style> element.
 * Keep the identical baseline in a CSP-safe static stylesheet instead. */
.htmx-indicator {
    opacity: 0;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* OKLCH Color System - Modern color with better gamut */
:root {
    /* Primary Colors - OKLCH */
    --color-primary: oklch(65% 0.15 260);
    --color-primary-hover: oklch(55% 0.18 260);
    --color-primary-subtle: oklch(92% 0.06 260);
    
    /* Surface Colors - OKLCH */
    --color-surface: oklch(98% 0.02 240);
    --color-surface-elevated: oklch(100% 0 0);
    --color-surface-overlay: oklch(20% 0.02 240);
    
    /* Text Colors - OKLCH */
    --color-text: oklch(20% 0.02 240);
    --color-text-muted: oklch(50% 0.02 240);
    --color-text-inverse: oklch(98% 0.02 240);
    
    /* Status Colors - OKLCH */
    --color-success: oklch(70% 0.18 150);
    --color-warning: oklch(75% 0.18 80);
    --color-danger: oklch(60% 0.18 25);
    --color-info: oklch(70% 0.15 220);
    
    /* Interactive Colors - OKLCH */
    --color-interactive: oklch(55% 0.20 270);
    --color-interactive-hover: oklch(45% 0.25 270);

    /* Container Query Units */
    --cq-min: 400px;
    --cq-med: 600px;
    --cq-max: 800px;

    /* Viewport runtime variables - base_runtime.js keeps these in sync */
    --visual-viewport-height: 100dvh;
    --visual-viewport-width: 100vw;
    --visual-viewport-offset-top: 0px;
    --visual-viewport-offset-left: 0px;
    --keyboard-inset-height: 0px;

    /* 2026 Design Tokens (Pastel & Glassmorphism) */
    --radius-2026: 20px;
    --radius-2026-btn: 14px;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-bg-deep: rgba(15, 23, 42, 0.85);
    --glass-blur: blur(16px);
    --shadow-soft: 0 12px 36px rgba(15, 23, 42, 0.03);
    --shadow-hover: 0 16px 42px rgba(15, 23, 42, 0.08);
    --transition-2026: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fallback colors for browsers without OKLCH support */
@supports not (color: oklch(65% 0.15 260)) {
    :root {
        --color-primary: #8ecae6;
        --color-primary-hover: #285d77;
        --color-primary-subtle: #dbeafe;
        
        --color-surface: #f8fafc;
        --color-surface-elevated: #ffffff;
        --color-surface-overlay: #1e293b;
        
        --color-text: #23313b;
        --color-text-muted: #64748b;
        --color-text-inverse: #f1f5f9;
        
        --color-success: #22c55e;
        --color-warning: #f59e0b;
        --color-danger: #ef4444;
        --color-info: #0ea5e9;
        
        --color-interactive: #6366f1;
        --color-interactive-hover: #4f46e5;
    }
}

/* Container Query Setup - Component-based Responsive */
.feed-card-container,
.card-container,
.modal-content,
.sidebar-container {
    container-type: inline-size;
    container-name: card;
}

/* :has() Selector - Parent-based styling */
/* Card states based on children */
.card:has(.badge-success) {
    border-left-color: var(--color-success);
}

.card:has(.badge-danger) {
    border-left-color: var(--color-danger);
}

.card:has(.badge-warning) {
    border-left-color: var(--color-warning);
}

/* Form validation states */
.form-group:has(.is-invalid) label {
    color: var(--color-danger);
}

.form-group:has(input:focus) label {
    color: var(--color-primary);
}

/* Button group states */
.btn-group:has(.active) {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* View Transitions - Page navigation animations */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

/* Scroll-driven Animations - Progressive enhancement */
@supports (animation-timeline: view()) {
    .feed-card {
        animation: fade-in linear;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }
    
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Reduced motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================================================================
 * 1. GLOBAL RESETS & FONT RENDERING
 * ================================================================== */

/* Universal box-sizing: prevents padding/border from breaking widths */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background-color: #f8fcff !important;
    overflow-x: hidden;
    font-size: 16px;
    /* Smooth scrolling - prefers-reduced-motion ile override edilir */
    scroll-behavior: smooth;
}

/* ==================================================================
 * 1.1 DESKTOP COMPACT SCALE
 * Browser'da 2 kademe zoom-out'a yakın daha kompakt görünüm.
 * Mobil okunabilirliği korumak için sadece desktop kırılımında uygulanır.
 * ================================================================== */

@media (min-width: 1200px) and (pointer: fine),
(min-width: 1367px) {

    html,
    body {
        font-size: 13px;
    }
}

html {
    /* Safari iOS: landscape/portrait geçişinde font büyümesini engelle */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Scrollbar renkleri (Firefox & Chrome 121+) */
    scrollbar-color: #b9d9ec #f8fcff;
    scrollbar-width: thin;
    /* Prevent scroll chaining to parent */
    overscroll-behavior: none;
}

body {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative;
    width: 100%;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Font rendering: tüm OS'lerde tutarlı anti-aliasing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Tab highlights (Android Chrome) */
    -webkit-tap-highlight-color: transparent;
}

/* Webkit scrollbar styling (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fcff;
}

::-webkit-scrollbar-thumb {
    background: #b9d9ec;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8fbfd8;
}

/* Light-theme scrollbar for main content area */
main ::-webkit-scrollbar-track {
    background: var(--bg-primary, #F8FAFC);
}

main ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

main ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==================================================================
 * 2. BOOTSTRAP CONTAINER SAFETY NET
 * If external Bootstrap CSS fails to load in production,
 * keep sane paddings/widths.
 * ================================================================== */

:root {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1320px;
    }
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1700px;
    }
}

/* ==================================================================
 * 2.1 PAGE WRAPPER SAFETY NET
 * Eğer custom-layout.css cache/servis nedeniyle geç yüklenirse bile
 * ana içerik tam genişliğe yayılmasın. Ölçü app_tokens.css'ten gelir;
 * o da yüklenemezse var() fallback'i devreye girer.
 * ================================================================== */

.page-wrapper {
    max-width: var(--app-shell-max, 1400px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--app-shell-pad, 24px);
    padding-right: var(--app-shell-pad, 24px);
}

@media (max-width: 1199.98px) {
    .page-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (min-width: 1200px) and (max-width: 1366px) and (pointer: coarse) {
    .page-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767.98px) {
    .page-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* NOTE: .row, .row > *, .col kuralları KALDIRILDI.
 * Bu kurallar Bootstrap'tan SONRA yüklendiği için
 * .col-4, .col-lg-4 gibi grid sütunlarını eziyordu.
 * Bootstrap CDN yüklü olduğu sürece bu kurallara gerek yok.
 */

/* ==================================================================
 * 3. SAFE AREA & NOTCHED DEVICES (iPhone X+, Android cutouts)
 * viewport-fit=cover ile birlikte çalışır
 * ================================================================== */

.safe-docking-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-docking-top {
    padding-top: env(safe-area-inset-top);
}

/* Footer ve navbar notch-safe */
footer.site-footer,
.site-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.navbar.fixed-top,
.navbar.sticky-top {
    padding-top: env(safe-area-inset-top, 0px);
}

/* ==================================================================
 * 4. TOAST & OVERLAY Z-INDEX
 * ================================================================== */

.toast-container {
    pointer-events: none !important;
    z-index: 10100 !important;
    /* Dropdown (10050) ve Lila (10002) üstünde kalmalı */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast {
    pointer-events: auto !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dp-z-9999 {
    z-index: 9999 !important;
}

.dp-toast-bg-soft {
    background: rgba(15, 23, 42, 0.92) !important;
}

.dp-toast-text {
    color: #ffffff !important;
}

.restriction-alert-copy {
    color: inherit;
    opacity: 0.85;
}

.lila-feedback-hidden {
    display: none;
}

.dp-offscreen-fixed {
    position: fixed !important;
    left: -9999px !important;
}

.dp-font-065 {
    font-size: 0.65rem !important;
}

.dp-square-40 {
    width: 40px;
    height: 40px;
}

.dp-ai-suggestions-box {
    z-index: 1000;
    max-height: 200px;
}

/* ==================================================================
 * 5. NAVBAR LAYOUT
 * ================================================================== */

.navbar.fixed-top,
.navbar.sticky-top {
    z-index: 1040 !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0;
    right: 0;
}

.navbar-custom {
    background: var(--navbar-bg, #0F172A) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
    min-height: 64px !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Navbar content aligned with footer (page-wrapper: --app-shell-max).
   Kimlik akışı navbarı (giriş, magic link, onboarding, yasal) da bu
   kurala katılır; ölçü merdiveni tek yerde kalsın diye seçici genişletildi. */
.navbar-custom .container-fluid,
.identity-navbar .container-fluid {
    max-width: var(--app-shell-max, 1400px);
    margin: 0 auto;
    padding-left: var(--app-shell-pad, 24px);
    padding-right: var(--app-shell-pad, 24px);
}

.sticky-top {
    position: -webkit-sticky;
    /* Safari 12-14 compat */
    position: sticky !important;
    top: 0 !important;
}

/* ==================================================================
 * 6. MAIN CONTENT AREA
 * ================================================================== */

main {
    flex: 1 0 auto;
    background-color: #f8fafc;
    width: 100%;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    padding-left: 0;
    padding-right: 0;
}

/* ------------------------------------------------------------------
 * 6.1 MAIN CONTENT - GLOBAL WIDTH STANDARDIZATION
 * Tüm sayfa içerikleri Today Section (.page-wrapper) ile aynı
 * genişlikte olmalı: --app-shell-max + --app-shell-pad (app_tokens.css).
 * Harita sayfası (.px-0) hariç tutulur → tam genişlik kalır.
 *
 * Bu kural, Bootstrap .container (~1140px) ve .container-xl (~1320px)
 * gibi sınıfları override ederek navbar/footer/today section ile
 * tutarlı hizalama sağlar.
 * ------------------------------------------------------------------ */
main>.container,
main>.container-sm,
main>.container-md,
main>.container-lg,
main>.container-xl,
main>.container-xxl,
main>.container-fluid:not(.px-0),
main>.page-shell>.container,
main>.page-shell>.container-fluid:not(.px-0),
main>.page-shell>.container-xl,
main>.page-shell>.container-lg,
main>.lh-shell>.container,
main>.lh-shell>.container-fluid:not(.px-0),
main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid):not(.container-sm):not(.container-md):not(.container-lg):not(.container-xl):not(.container-xxl)>.container,
main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-xl,
main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-fluid:not(.px-0) {
    max-width: var(--app-shell-max, 1400px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--app-shell-pad, 24px) !important;
    padding-right: var(--app-shell-pad, 24px) !important;
}

/* ------------------------------------------------------------------
 * 6.1.1 PAGE-WRAPPER İÇ CONTAINER NEUTRALIZE (mobile only)
 * page-wrapper zaten genişliği (--app-shell-max) ve yatay boşluğu
 * (--app-shell-pad) yönetir. İç container'ların kendi max-width ve
 * padding kuralları çift kısıtlama yaratarak sayfayı gereksiz
 * daraltır. Bu kurallar iç container'ları neutralize eder.
 * Mobil dışında (>=768px) container kısıtlamaları korunur.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .page-wrapper > .container,
    .page-wrapper > .container-sm,
    .page-wrapper > .container-md,
    .page-wrapper > .container-lg,
    .page-wrapper > .container-xl,
    .page-wrapper > .container-xxl,
    .page-wrapper > .container-fluid,
    .page-wrapper-narrow > .container,
    .page-wrapper-narrow > .container-fluid,
    .page-wrapper-narrow > .container-xl,
    .page-wrapper-slim > .container,
    .page-wrapper-slim > .container-fluid {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1366px) and (pointer: coarse) {

    main>.container,
    main>.container-sm,
    main>.container-md,
    main>.container-lg,
    main>.container-xl,
    main>.container-xxl,
    main>.container-fluid:not(.px-0),
    main>.page-shell>.container,
    main>.page-shell>.container-fluid:not(.px-0),
    main>.page-shell>.container-xl,
    main>.page-shell>.container-lg,
    main>.lh-shell>.container,
    main>.lh-shell>.container-fluid:not(.px-0),
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid):not(.container-sm):not(.container-md):not(.container-lg):not(.container-xl):not(.container-xxl)>.container,
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-xl,
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-fluid:not(.px-0) {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Tablet - 1200px altı: yatay padding azalt */
@media (max-width: 1199.98px) {

    main>.container,
    main>.container-sm,
    main>.container-md,
    main>.container-lg,
    main>.container-xl,
    main>.container-xxl,
    main>.container-fluid:not(.px-0),
    main>.page-shell>.container,
    main>.page-shell>.container-fluid:not(.px-0),
    main>.page-shell>.container-xl,
    main>.page-shell>.container-lg,
    main>.lh-shell>.container,
    main>.lh-shell>.container-fluid:not(.px-0),
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid):not(.container-sm):not(.container-md):not(.container-lg):not(.container-xl):not(.container-xxl)>.container,
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-xl,
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-fluid:not(.px-0) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Mobil - 768px altı: daha kompakt padding */
@media (max-width: 767.98px) {

    main>.container,
    main>.container-sm,
    main>.container-md,
    main>.container-lg,
    main>.container-xl,
    main>.container-xxl,
    main>.container-fluid:not(.px-0),
    main>.page-shell>.container,
    main>.page-shell>.container-fluid:not(.px-0),
    main>.page-shell>.container-xl,
    main>.page-shell>.container-lg,
    main>.lh-shell>.container,
    main>.lh-shell>.container-fluid:not(.px-0),
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid):not(.container-sm):not(.container-md):not(.container-lg):not(.container-xl):not(.container-xxl)>.container,
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-xl,
    main>[class]:not(.page-wrapper):not(.page-wrapper-narrow):not(.page-wrapper-slim):not(.container):not(.container-fluid)>.container-fluid:not(.px-0) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Navbar container - mobil responsive sync */
@media (max-width: 1199.98px) {
    .navbar-custom .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (min-width: 1200px) and (max-width: 1366px) and (pointer: coarse) {
    .navbar-custom .container-fluid {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767.98px) {
    .navbar-custom .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.today-section {
    flex: 0 0 auto;
    background-color: #f8fafc;
}

/* ==================================================================
 * 7. FOOTER
 * ================================================================== */

footer.site-footer,
.site-footer {
    flex-shrink: 0;
    width: 100% !important;
    z-index: 10;
    margin-top: auto !important;
}

/* ==================================================================
 * 8. MODAL Z-INDEX
 * ================================================================== */

.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

/* ==================================================================
 * 9. RESPONSIVE IMAGE & MEDIA SAFEGUARDS
 * ================================================================== */

img,
video,
svg,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Broken image placeholder - NOTA: img replaced element olduğu için ::after desteklenmez.
   Kırık görsel placeholder için wrapper div + ::after veya JS onerror kullanın. */

/* ==================================================================
 * 10. MOBILE TOUCH TARGET MINIMUM (WCAG 2.2 - 44x44px) & NATIVE FEEL
 * ================================================================== */

@media (pointer: coarse) {

    /* Touch cihazlarda minimum dokunma alanı */
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    .btn,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        min-height: max(44px, env(safe-area-inset-bottom, 0px)); /* Safe Area koruması */
        min-width: 44px;
    }

    /* Touch: tüm interaktif öğelerde 300ms gecikme (Double-Tap) engelle */
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    .btn,
    .nav-link,
    .dropdown-item,
    .form-check-input {
        touch-action: manipulation;
    }

    /* Native App Hissi: Uzun basışta çıkan pop-up menüyü ve seçimi engelle */
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    .btn,
    .nav-link,
    .dropdown-item,
    .sidebar-menu-item {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Dropdown item'lar mobilde daha rahat tıklanabilir */
    .dropdown-item {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

/* ==================================================================
 * 11. ACCESSIBILITY: REDUCED MOTION
 * Kullanıcı animasyon istemiyorsa tüm geçişleri kapat
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================================================================
 * 12. FOCUS VISIBLE (Keyboard Navigation)
 * Mouse kullanıcılarında outline yok, klavye kullanıcılarında belirgin
 * ================================================================== */

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid #8ecae6;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==================================================================
 * 13. PRINT STYLES
 * Basit print reset - gereksiz elementleri gizle
 * ================================================================== */

@media print {

    .navbar,
    .site-footer,
    .toast-container,
    .modal,
    .modal-backdrop,
    #chatWidget,
    .lila-orb,
    .cookie-banner {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    main {
        background: #fff !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ==================================================================
 * 14. SAFARI / WEBKIT SPECIFIC FIXES
 * ================================================================== */

/* Safari 100vh fix: iOS Safari adres çubuğu yüksekliğini hesaba katar */
@supports (-webkit-touch-callout: none) {

    html,
    body {
        /* svh = small viewport height (adres çubuğu görünürken) */
        min-height: -webkit-fill-available;
    }

    body {
        min-height: 100svh;
    }
}

/* Safari'de backdrop-filter desteği */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .navbar-custom {
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
}

/* ==================================================================
 * 15. HIGH DPI / RETINA SHARPNESS
 * ================================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Retina ekranlarda ince kenarlıklar */
    .navbar-custom {
        border-bottom-width: 0.5px;
    }

    .site-footer {
        border-top-width: 0.5px;
    }
}

/* ==================================================================
 * 16. COLOR SCHEME — LIGHT ONLY
 * Site tamamen light theme'de tasarlandı. Mac/iOS sistem dark mode'da
 * tarayıcı form/scrollbar/text default'larını invert ediyor ve projedeki
 * 40+ yarım dark CSS bloğu kısmen aktive olup okunmaz karma görünüm
 * yaratıyordu. "only light" → browser UI'yı light'a sabitler.
 * (Ayrıca tüm @media (prefers-color-scheme: dark) and (min-width: 99999px) blokları min-width:
 * 99999px ile deaktive edildi; manuel toggle eklenirse geri açılabilir.)
 * ================================================================== */

html {
    color-scheme: only light;
}

/* ==================================================================
 * 17. TYPOGRAPHY: text-wrap balance & pretty (2025+ browsers)
 * Başlıklarda dengeli satır kırılımı, paragraflarda akıllı satır sonu
 * Chrome 114+, Safari 17.4+, Firefox 121+
 * ================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.page-title,
.section-title,
.today-section-title,
.footer-heading,
.site-footer-heading {
    text-wrap: balance;
}

p,
.footer-tagline,
.today-card-text,
.cookie-banner-text {
    text-wrap: pretty;
}

/* ==================================================================
 * 18. FONT OPTICAL SIZING (Inter destekler)
 * Küçük boyutta daha okunabilir, büyük boyutta daha zarif
 * ================================================================== */

body {
    font-optical-sizing: auto;
}

/* Tabular numbers: sayılar hizalı görünsün (fiyat, tarih, istatistik) */
.price,
.stat-number,
.badge,
.notification-count,
time,
[data-numeric] {
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
 * 19. ACCENT COLOR (Form elementleri marka rengiyle)
 * Checkbox, radio, range, progress → turuncu marka rengi
 * ================================================================== */

:root {
    accent-color: #8b5cf6;
    /* Brand purple */
}

/* ==================================================================
 * 20. SELECTION STYLING (Metin seçim rengi)
 * Marka rengine uygun seçim rengi
 * ================================================================== */

::selection {
    background-color: rgba(139, 92, 246, 0.25);
    /* Brand purple %25 */
    color: #23313b;
}

::-moz-selection {
    background-color: rgba(139, 92, 246, 0.25);
    color: #23313b;
}

/* ==================================================================
 * 21. SCROLLBAR-GUTTER (Layout shift engelleme)
 * Scrollbar göründüğünde/kaybolduğunda sayfa kaymaz
 * Chrome 94+, Firefox 97+
 * ================================================================== */

html {
    scrollbar-gutter: stable;
}

/* ==================================================================
 * 22. CONTENT-VISIBILITY (Lazy rendering - performans)
 * Ekranın altındaki ağır bölümleri render etme, görünene kadar bekle
 * Chrome 85+, Edge 85+, Firefox 125+
 * ================================================================== */

.today-section,
.site-footer,
footer.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
    /* Tahmini yükseklik (CLS engeller) */
    contain: layout style paint;
    /* Tam containment: sibling elementler ölçüm yapmaz */
}

/* ==================================================================
 * 23. LINK UNDERLINE ESTHETICS
 * Daha modern link alt çizgi görünümü
 * ================================================================== */

a {
    text-underline-offset: 0.15em;
    text-decoration-thickness: from-font;
}

/* ==================================================================
 * 24. PREFERS-CONTRAST (Yüksek kontrast modu)
 * Windows/macOS yüksek kontrast tercih eden kullanıcılar
 * ================================================================== */

@media (prefers-contrast: more) {
    .navbar-custom {
        border-bottom-width: 2px !important;
        border-bottom-color: rgba(255, 255, 255, 0.4) !important;
    }

    .site-footer {
        border-top-width: 2px !important;
        border-top-color: rgba(255, 255, 255, 0.4) !important;
    }

    .btn,
    .nav-link,
    a {
        text-decoration-thickness: 2px;
    }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {

    .navbar-custom,
    .site-footer {
        border: 1px solid ButtonText;
    }

    .btn {
        border: 1px solid ButtonText;
    }
}

/* ==================================================================
 * 25. ASPECT-RATIO SAFEGUARDS (Medya oranları)
 * Resim/video yüklenirken alan ayır → CLS (layout shift) engelle
 * ================================================================== */

/* width/height attribute'lu img'lerde tarayıcı oranı kendisi türetir;
   aspect-ratio: attr(...) burada geçersizdir ve modern Chrome'da
   class'lardan gelen aspect-ratio'yu da ezerek avatarları ovalleştiriyordu. */

video {
    aspect-ratio: 16 / 9;
}

/* ==================================================================
 * 26. GPU-ACCELERATED TRANSFORMS
 * Animasyonlu elementler GPU'da render edilsin (jank-free)
 * ================================================================== */

.hover-scale,
.today-card,
.footer-knowledge-card,
.social-btn,
.role-badge,
.nav-glass-btn,
.role-switch-btn {
    will-change: transform;
    transform: translateZ(0);
    /* GPU layer oluştur */
}

/* ==================================================================
 * 27. SMOOTH TRANSITIONS FOR INTERACTIVE ELEMENTS
 * Tüm interaktif elementlerde tutarlı geçiş süresi
 * ================================================================== */

a,
button,
.btn,
input,
select,
textarea {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 0.18s;
    transition-timing-function: ease;
}

/* ==================================================================
 * 28. IMAGE & VIDEO RENDERING QUALITY
 * Tüm tarayıcılarda tutarlı görsel kalite
 * ================================================================== */

/* Fotoğraflar: yüksek kalite interpolasyon */
img {
    image-rendering: auto;
    /* Tarayıcı en iyi algoritmayı seçsin */
    -ms-interpolation-mode: bicubic;
    /* IE/Edge legacy */
}

/* Logolar, ikonlar, pixel-art: keskin kenarlar */
img[src*="icon"],
img[src*="logo"],
img[src*="favicon"],
.navbar-brand img,
.site-footer-logo img {
    image-rendering: -webkit-optimize-contrast;
    /* Safari: keskin */
    image-rendering: crisp-edges;
    /* Firefox/Chrome: piksel keskinliği */
}

/* Ortak marka kilidi: ikon + gerçek metin */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    line-height: 1;
    min-width: 0;
}

.brand-lockup__mark {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    background-color: transparent !important;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-lockup__text {
    display: block;
    min-width: 0;
    white-space: nowrap;
    font-family: "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: 0.02em;
    text-rendering: geometricPrecision;
}

.brand-lockup--dark .brand-lockup__text {
    color: #f8fafc;
    font-weight: 500;
}

.brand-lockup--light .brand-lockup__text {
    color: #6b7280;
    font-weight: 400;
}

.brand-wordmark-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Video: siyah ekran engelle, varsayılan arka plan */
video {
    background-color: #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Video poster görünene kadar placeholder */
video:not([poster]) {
    background: linear-gradient(135deg, #1e293b 0%, #23313b 100%);
}

/* iOS Safari: video tam ekran zorunluluğunu kaldır */
video {
    -webkit-playsinline: true;
}

/* Retina ekranlarda daha keskin görseller */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Wide-gamut (P3) ekranlar: daha geniş renk aralığı */
@media (color-gamut: p3) {
    :root {
        --img-color-profile: display-p3;
    }

    img,
    video {
        color-interpolation: sRGB;
    }
}

/* HDR ekranlar: dinamik aralık ipucu */
@media (dynamic-range: high) {
    video {
        color-interpolation: auto;
    }
}

/* ==================================================================
 * 29. GLOBAL DECODING & LOADING HINTS
 * Tüm görsellerde varsayılan performans ipuçları
 * ================================================================== */

/* Lazy image fade-in: tüm görsellerde tutarlı geçiş */
img {
    transition: opacity 0.3s ease-in-out;
}

/* Kırık görsel durumu iyileştirme */
img::after {
    box-sizing: border-box;
}

/* Video yükleme durumu */
video:not([src]):not([data-src]) {
    visibility: hidden;
    /* Kaynaksız videoyu gizle */
}

/* ==================================================================
 * 30. BASE TEMPLATE INLINE-STYLE REPLACEMENTS
 * ================================================================== */

.app-message-stack {
    position: relative;
    z-index: 20;
    pointer-events: none;
}

.app-message-alert {
    pointer-events: auto;
}

.csrf-token-sentinel {
    display: none;
}

.report-reason-title {
    font-size: 0.9rem;
}

.report-reason-hint {
    font-size: 0.75rem;
}

.exclusive-guard-bg {
    background: linear-gradient(135deg, #ffffff 0%, #fffbf2 100%);
    z-index: 0;
}

.exclusive-guard-gem-icon {
    font-size: 5rem;
}

.exclusive-guard-content {
    position: relative;
    z-index: 1;
}

.exclusive-guard-lock-badge {
    width: 60px;
    height: 60px;
}

.exclusive-guard-placeholder {
    max-width: 400px;
}

.exclusive-guard-note {
    font-size: 0.75rem;
}

.sms-timer-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(111, 66, 193, 0.15);
    border-radius: 16px;
    padding: 12px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(111, 66, 193, 0.05);
    transition: all 0.3s ease;
}

html[data-theme="dark"] .sms-timer-container {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(111, 66, 193, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sms-timer-hidden {
    display: none;
}

.progress-ring__circle {
    transition: stroke-dashoffset 1s linear;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.sms-timer-text {
    font-variant-numeric: tabular-nums;
    font-family: "SF Mono", "Roboto Mono", monospace;
    letter-spacing: 0;
}

.sms-timer-text-accent {
    color: var(--bs-indigo, #6610f2);
}

.sms-timer-text-danger {
    color: #dc3545 !important;
}

.sms-timer-stroke-danger {
    stroke: #dc3545 !important;
}

.sms-timer-hint {
    font-size: 0.9rem;
}

.sms-timer-expired {
    border-color: rgba(220, 53, 69, 0.3);
    background: rgba(255, 240, 240, 0.9);
}

html[data-theme="dark"] .sms-timer-expired {
    background: rgba(69, 10, 10, 0.6);
    border-color: rgba(220, 53, 69, 0.5);
}

.sms-timer-expired .sms-timer-text {
    color: #dc3545 !important;
}

.sms-timer-expired .progress-ring__circle--value {
    stroke: #dc3545 !important;
}

.contact-sync-drop-zone {
    border: 2px dashed #dee2e6;
    transition: all 0.2s ease;
}

.contact-native-picker-hidden {
    display: none;
}

.contact-sync-results {
    max-height: 250px;
    overflow-y: auto;
}

.file-field-card {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

.file-field-existing-wrap {
    border-color: var(--border-color);
}

.file-field-preview-image {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 50px;
    max-width: 100px;
    object-fit: cover;
}

.file-field-thumb-32 {
    height: 32px;
    object-fit: cover;
    width: 32px;
}

.file-field-status-icon {
    width: 16px;
}

.file-field-uploaded-at {
    font-size: 10px;
}

.ump-loader-overlay {
    opacity: 0.9;
    z-index: 10;
}

.ump-map-container {
    background: #eee;
    height: 500px;
    width: 100%;
}

@media (max-width: 575.98px) {
    .ump-map-container {
        height: 300px;
    }
}

.ump-map-status-note {
    font-size: 0.8rem;
    max-width: 300px;
    z-index: 5;
}

.agreement-list-card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.project-detail-label-cell {
    width: 140px;
}

.tos-modal-scroll-box {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.website-preview-card {
    max-width: 350px;
}

.website-preview-image {
    display: none;
    height: 180px;
    object-fit: cover;
}

.website-preview-image--visible {
    display: block;
}

.website-preview-description {
    max-height: 40px;
}

.expert-card-radius-12 {
    border-radius: 12px;
}

.expert-card-avatar-cover {
    object-fit: cover;
}

.project-follow-hint-xs {
    font-size: 0.7rem;
}

.project-follow-meta-xs {
    font-size: 0.75rem;
}

.role-switcher-dialog {
    max-width: 520px;
}

.util-square-50 {
    width: 50px;
    height: 50px;
}

.util-square-36 {
    width: 36px;
    height: 36px;
}

.util-square-32 {
    width: 32px;
    height: 32px;
}

.util-square-24 {
    width: 24px;
    height: 24px;
}

.util-square-40 {
    width: 40px;
    height: 40px;
}

.util-square-100 {
    width: 100px;
    height: 100px;
}

.util-square-3rem {
    width: 3rem;
    height: 3rem;
}

.util-square-48 {
    width: 48px;
    height: 48px;
}

.util-fs-085 {
    font-size: 0.85rem;
}

.util-fs-07 {
    font-size: 0.7rem;
}

.util-fs-11em {
    font-size: 1.1em;
}

.util-fs-3rem {
    font-size: 3rem;
}

.util-fs-10 {
    font-size: 10px;
}

.util-fs-40 {
    font-size: 40px;
}

.util-maxw-480 {
    max-width: 480px;
}

.util-maxw-100 {
    max-width: 100px;
}

.util-maxw-80 {
    max-width: 80px;
}

.util-h-7 {
    height: 7px;
}

.util-h-4 {
    height: 4px;
}

.util-h-10 {
    height: 10px;
}

.util-h-25 {
    height: 25px;
}

.util-w-180 {
    width: 180px;
}

.util-w-150 {
    width: 150px;
}

.util-h-200 {
    height: 200px;
}

.util-maxh-60 {
    max-height: 60px;
}

.util-w-0 {
    width: 0;
}

.util-maxw-600 {
    max-width: 600px;
}

.util-maxw-250 {
    max-width: 250px;
}

.util-top-neg-2 {
    top: -2px;
}

.util-object-fit-contain {
    object-fit: contain;
}

.util-logo-badge {
    display: block;
    object-fit: contain !important;
    object-position: center;
    box-sizing: border-box;
    background: #ffffff;
    padding: 4px;
    border-radius: inherit;
}

.util-whitespace-pre-wrap {
    white-space: pre-wrap;
}

.util-radius-lg {
    border-radius: var(--radius-lg, 16px);
}

/* ==================================================================
 * GLOBAL TRANSITION UTILITY (2026 minimal)
 * ================================================================== */
.transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================================================
 * 31. MODAL RESPONSIVE WIDTH STANDARDIZATION
 * Tüm Bootstrap modal'ları için tutarlı responsive genişlik kuralları.
 * Mobil: tam genişlik, Tablet: orta, Desktop: Bootstrap varsayılanı.
 * ================================================================== */

/* Mobil: modal tam genişlik, kenarlardan 0.5rem boşluk */
@media (max-width: 575.98px) {
    .modal-dialog {
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    /* modal-lg ve modal-xl mobilde tam genişlik */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 1rem) !important;
    }

    /* Centered modal: iOS safe-area padding */
    .modal-dialog-centered {
        min-height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Tablet: modal-lg max 700px */
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-dialog.modal-lg {
        max-width: 700px;
    }

    .modal-dialog.modal-xl {
        max-width: 700px;
    }
}

/* Modal content: cross-browser border-radius ve gölge */
.modal-content {
    -webkit-border-radius: var(--radius-2026, 24px) !important;
    border-radius: var(--radius-2026, 24px) !important;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05) !important;
    background: var(--glass-bg, rgba(255, 255, 255, 0.90)) !important;
    backdrop-filter: var(--glass-blur, blur(24px)) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1) !important;
}

.modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.modal-footer {
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Modal backdrop: cross-browser blur */
.modal-backdrop.show {
    background-color: rgba(15, 23, 42, 0.4) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

/* ==================================================================
 * 32. iOS SAFE-AREA-INSET (Notch / Home Bar / Dynamic Island)
 * iPhone X+ cihazlarda navbar, footer ve fixed elementler
 * notch/home bar alanını hesaba katar.
 * ================================================================== */

@supports (padding-top: env(safe-area-inset-top)) {

    /* Navbar: üst notch koruması */
    .navbar-custom {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Footer: alt home bar koruması */
    .site-footer,
    footer.site-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Fixed bottom elementler */
    .fixed-bottom,
    [class*="fixed-bottom"] {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Tam ekran modal: safe-area koruması */
    .modal-fullscreen .modal-content {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Body: landscape modda yatay safe-area */
    @media (orientation: landscape) {
        body {
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
    }
}

/* ==================================================================
 * 33. CROSS-BROWSER SCROLLBAR STYLING
 * WebKit (Chrome/Safari/Edge) + Firefox uyumlu scrollbar stilleri.
 * Marka renkleriyle tutarlı, zarif görünüm.
 * ================================================================== */

/* Firefox: ince scrollbar + marka rengi */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

/* WebKit (Chrome, Safari, Edge): detaylı scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.7);
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    * {
        scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(100, 116, 139, 0.5);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(100, 116, 139, 0.8);
    }
}

/* ==================================================================
 * 34. TOUCH DEVICE OPTIMIZATIONS
 * Dokunmatik cihazlarda daha iyi kullanıcı deneyimi.
 * Tap highlight rengi, double-tap zoom engelleme,
 * hover-only stillerin dokunmatik cihazlarda uygulanmaması.
 * ================================================================== */

/* Tap highlight rengini kaldır (mavi/gri flash engelle) */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Buton ve linklerde double-tap zoom engelle */
a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select {
    touch-action: manipulation;
}

/* Hover efektleri sadece hover destekleyen cihazlarda */
@media (hover: none) {

    /* Dokunmatik cihazlarda hover state'lerini devre dışı bırak */
    .hover-scale:hover {
        transform: none !important;
    }

    /* Tooltip'ler dokunmatik cihazlarda tetiklenmemeli */
    [data-bs-toggle="tooltip"] {
        cursor: default;
    }
}

/* Coarse pointer (parmak): daha büyük dokunma alanı */
@media (pointer: coarse) {

    /* Minimum dokunma hedefi: 44x44px (WCAG 2.5.5) */
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    /* Dropdown item'ları: daha yüksek satır */
    .dropdown-item {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    /* Nav link: daha geniş dokunma alanı */
    .nav-link {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

/* ==================================================================
 * 35. PREFERS-REDUCED-MOTION (Erişilebilirlik)
 * Animasyon hassasiyeti olan kullanıcılar için tüm animasyonları
 * ve geçişleri devre dışı bırak, smooth scroll'u kapat.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    /* GPU acceleration gereksiz */
    .hover-scale,
    .today-card,
    .footer-knowledge-card,
    .social-btn,
    .role-badge,
    .nav-glass-btn,
    .role-switch-btn {
        will-change: auto;
        transform: none;
    }

    /* content-visibility auto kapatılsın (CLS riski) */
    .today-section,
    .site-footer,
    footer.site-footer {
        content-visibility: visible;
        contain: none;
    }
}

/* ==================================================================
 * 36. OVERSCROLL & SCROLL BEHAVIOR
 * iOS rubber-band / Android glow efektini kontrol et.
 * Pull-to-refresh engelle (SPA modunda), scroll chain engelle.
 * ================================================================== */

/* Ana sayfa: overscroll bounce/glow engelle */
html,
body {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

/* Modal açıkken arka planda scroll engelle */
body.modal-open {
    overflow: hidden !important;
    /* iOS Safari: position fixed scroll fix */
    -webkit-overflow-scrolling: auto;
}

/* Modal içi scroll: momentum scrolling (iOS Safari) */
.modal-body,
.offcanvas-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ==================================================================
 * 37. SAMSUNG INTERNET / ANDROID WEBVIEW / TEXT-SIZE-ADJUST
 * Mobil tarayıcılarda otomatik font büyütmeyi engelle.
 * Tutarlı font rendering sağla.
 * ================================================================== */

html {
    /* Otomatik text büyütmeyi kapat (Samsung, UC Browser, vb.) */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Android Chrome / Samsung Internet: font smoothing */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Samsung Internet: input zoom engelle */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
        /* 16px altında iOS/Samsung otomatik zoom yapar */
    }
}

/* === Honeypot Trap (login/signup botscreen) — CSP-safe gizleme === */
.hp-trap {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.hp-trap[hidden] { display: none !important; }


/* Fullscreen modal exception to !important border-radius */
.modal-fullscreen .modal-content {
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
}
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content {
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }
}
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down .modal-content {
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }
}
@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down .modal-content {
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   2026 PREMIUM NORMALIZATION (GLOBAL POLISH)
   ========================================================================== */

/* 1. Global Scrollbar & Text Selection */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.3);
}
::selection {
    background: rgba(139, 92, 246, 0.2) !important; /* Pastel primary */
    color: inherit;
}
::-moz-selection {
    background: rgba(139, 92, 246, 0.2) !important;
    color: inherit;
}

/* 2. Soft Inputs & Focus Rings */
.form-control, .form-select, .input-group-text {
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: var(--radius-2026-btn, 14px) !important;
    background-color: #f8fafc !important;
    color: #23313b !important;
    transition: var(--transition-2026, all 0.3s ease) !important;
}
.form-control:focus, .form-select:focus {
    background-color: #ffffff !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15) !important;
    outline: none !important;
}

/* 3. Modern Data Grids (Tables) */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
.table th, .table td {
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    border-top: none !important;
    padding: 1rem !important;
    vertical-align: middle !important;
}
.table tbody tr {
    transition: background-color 0.2s ease !important;
}
.table tbody tr:hover {
    background-color: #f8fafc !important;
}
/* Sticky Glass Header */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--glass-bg, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: var(--glass-blur, blur(16px)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(16px)) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

/* 4. Soft Badges */
.badge {
    padding: 0.4em 0.8em !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: none !important;
}
/* Bootstrap semantic color overrides to soft versions */
.badge.bg-primary, .badge-primary { background-color: rgba(13, 110, 253, 0.1) !important; color: #0d6efd !important; }
.badge.bg-secondary, .badge-secondary { background-color: rgba(108, 117, 125, 0.1) !important; color: #6c757d !important; }
.badge.bg-success, .badge-success { background-color: rgba(25, 135, 84, 0.1) !important; color: #198754 !important; }
.badge.bg-danger, .badge-danger { background-color: rgba(220, 53, 69, 0.1) !important; color: #dc3545 !important; }
.badge.bg-warning, .badge-warning { background-color: rgba(255, 193, 7, 0.15) !important; color: #b08100 !important; }
.badge.bg-info, .badge-info { background-color: rgba(13, 202, 240, 0.1) !important; color: #087990 !important; }
.badge.bg-soft-dark, .badge-soft-dark { background-color: rgba(33, 37, 41, 0.1) !important; color: #212529 !important; }
/* Generic status badges sometimes used */
.status-badge { border-radius: 8px !important; }

/* 5. Alerts & Toasts (Soft Corners & Glassmorphism) */
.alert {
    border-radius: var(--radius-2026-btn, 14px) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}
.alert-success { background-color: rgba(25, 135, 84, 0.05) !important; border-left: 4px solid #198754 !important; color: #146c43 !important; }
.alert-danger { background-color: rgba(220, 53, 69, 0.05) !important; border-left: 4px solid #dc3545 !important; color: #b02a37 !important; }
.alert-warning { background-color: rgba(255, 193, 7, 0.05) !important; border-left: 4px solid #ffc107 !important; color: #997404 !important; }
.alert-info { background-color: rgba(13, 202, 240, 0.05) !important; border-left: 4px solid #0dcaf0 !important; color: #055160 !important; }

.toast, .swal2-popup {
    border-radius: var(--radius-2026, 20px) !important;
    background: var(--glass-bg, rgba(255, 255, 255, 0.90)) !important;
    backdrop-filter: var(--glass-blur, blur(16px)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(16px)) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* Base Buttons Fallback normalization (just in case they were missed by python scripts) */
.btn:not(.btn-link):not(.btn-close) {
    border-radius: var(--radius-2026-btn, 14px) !important;
}

/* ==========================================================================
   2026 DEEP INTEGRATION (THIRD-PARTY & SWITCHES)
   ========================================================================== */

/* 1. TomSelect & Select2 Normalization */
.ts-control, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: var(--radius-2026-btn, 14px) !important;
    background-color: #f8fafc !important;
    color: #23313b !important;
    box-shadow: none !important;
    min-height: 42px !important;
    transition: var(--transition-2026, all 0.3s ease) !important;
    padding: 0.5rem 0.75rem !important;
}
.ts-control.focus, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single {
    background-color: #ffffff !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15) !important;
}
/* Dropdown Glassmorphism for TomSelect & Select2 */
.ts-dropdown, .select2-dropdown {
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: var(--radius-2026-btn, 14px) !important;
    background: var(--glass-bg, rgba(255, 255, 255, 0.90)) !important;
    backdrop-filter: var(--glass-blur, blur(16px)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(16px)) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1) !important;
    overflow: hidden !important;
}
.ts-dropdown .option:hover, .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(139, 92, 246, 0.1) !important;
    color: #7b6fb0 !important;
}

/* 2. Modern Checkboxes & Radios */
.form-check-input {
    width: 1.25em !important;
    height: 1.25em !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    background-color: #fff !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
}
.form-check-input[type=checkbox] {
    border-radius: 6px !important;
}
.form-check-input:checked {
    background-color: var(--dp-primary, #8b5cf6) !important;
    border-color: var(--dp-primary, #8b5cf6) !important;
}
.form-check-input:focus {
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15) !important;
}

/* 3. iOS/macOS Style Switches */
.form-switch .form-check-input {
    width: 2.5em !important;
    height: 1.25em !important;
    border-radius: 2em !important;
    background-color: #cbd5e1 !important; /* Soft gray when off */
    border: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out !important;
}
.form-switch .form-check-input:checked {
    background-color: #10b981 !important; /* Premium Emerald when on */
}
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important; /* Emerald focus */
}

/* 4. DataTables Overrides */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: var(--radius-2026-btn, 14px) !important;
    padding: 0.375rem 0.75rem !important;
    background-color: #f8fafc !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    background-color: #ffffff !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15) !important;
    outline: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    padding: 0.3em 0.8em !important;
    margin-left: 2px !important;
    border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #7b6fb0 !important;
}

/* ─── PM-TOAST FALLBACK (auth/focused sayfalarda profile_manage.css yüklenmez) ── */
.pm-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  background: #23313b;
  color: #fff;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.2);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
}
.pm-toast.show {
  transform: translateY(0);
  opacity: 1;
}
.pm-toast.success {
  background: linear-gradient(135deg, #16a34a, #15803d);
}
.pm-toast.error,
.pm-toast.danger,
.pm-toast.warning {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}
@media (prefers-reduced-motion: reduce) {
  .pm-toast {
    transition: none;
    transform: none;
  }
}