/**
 * Çakmak Law — Gece Safiri / Midnight Sapphire Skin
 *
 * Derin lacivert-indigo arkaplan, buz mavisi (sky-400) vurgular,
 * glassmorphism (cam efekti) kartlar, parlayan kenarlar ve
 * ince gradient vurgularla modern, teknolojik bir hukuk bürosu estetiği.
 */

/* ================================================================ */
/*  CSS Variables — Midnight Navy-Indigo Palette                      */
/* ================================================================ */

body.skin-midnight-sapphire {
    /* Slate palette — cool navy-indigo tones (RGB components) */
    --ck-50:  224 234 255;    /* headings — icy blue-white */
    --ck-100: 199 215 248;    /* body text — soft blue */
    --ck-200: 158 182 230;    /* labels — muted sky */
    --ck-300: 120 148 200;    /* paragraphs — mid indigo */
    --ck-400: 88 112 168;     /* meta text — steel blue */
    --ck-500: 62 84 136;      /* small text — deep steel */
    --ck-600: 38 58 104;      /* decorative — dark indigo */
    --ck-700: 22 38 72;       /* input borders — navy */
    --ck-800: 14 26 52;       /* hover backgrounds — deep navy */
    --ck-900: 10 22 40;       /* section alt bg — midnight */
    --ck-950: 5 10 24;        /* main background — deepest navy */

    /* Accent — Sky / Ice Blue */
    --ck-accent:      56 189 248;
    --ck-accent-soft: 186 230 253;

    /* UI Colors */
    --ck-accent-hex:       #38bdf8;
    --ck-accent-hex-hover: #7dd3fc;
    --ck-scrollbar-track:  #0a1628;
    --ck-scrollbar-thumb:  #1e3a5f;
    --ck-scrollbar-thumb-hover: #2c5282;

    /* Hero gradient — blue + purple glow */
    --ck-hero-gradient: radial-gradient(
        ellipse at 30% 20%, rgba(56,189,248,0.12), transparent 50%
    ), radial-gradient(
        ellipse at 70% 80%, rgba(99,102,241,0.10), transparent 50%
    );
}

/* ================================================================ */
/*  Border Overrides — Subtle blue-tinted borders                     */
/* ================================================================ */

body.skin-midnight-sapphire .border-white\/10 {
    border-color: rgba(56, 189, 248, 0.08) !important;
}
body.skin-midnight-sapphire .border-white\/5 {
    border-color: rgba(56, 189, 248, 0.04) !important;
}
body.skin-midnight-sapphire .border-white\/20 {
    border-color: rgba(56, 189, 248, 0.12) !important;
}

/* ================================================================ */
/*  Glassmorphism Cards — Frosted glass effect                        */
/* ================================================================ */

body.skin-midnight-sapphire article[class*="rounded-xl"],
body.skin-midnight-sapphire div[class*="rounded-2xl"][class*="border"],
body.skin-midnight-sapphire div[class*="rounded-xl"][class*="border"] {
    background: rgba(10, 22, 40, 0.55) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-color: rgba(56, 189, 248, 0.10) !important;
    box-shadow: 
        0 0 1px rgba(56, 189, 248, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ================================================================ */
/*  Glow Hover — Cards get a subtle blue glow on hover                */
/* ================================================================ */

body.skin-midnight-sapphire article[class*="rounded-xl"]:hover,
body.skin-midnight-sapphire div[class*="rounded-2xl"][class*="border"]:hover {
    border-color: rgba(56, 189, 248, 0.22) !important;
    box-shadow: 
        0 0 20px rgba(56, 189, 248, 0.08),
        0 8px 32px rgba(5, 10, 24, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ================================================================ */
/*  Blog Cards — Glass + glow                                         */
/* ================================================================ */

body.skin-midnight-sapphire .blog-card {
    background: rgba(10, 22, 40, 0.55) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-color: rgba(56, 189, 248, 0.08) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.skin-midnight-sapphire .blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.20) !important;
    box-shadow: 
        0 0 24px rgba(56, 189, 248, 0.06),
        0 12px 40px rgba(5, 10, 24, 0.6) !important;
}

/* ================================================================ */
/*  Emerald Indicator → Sky Blue                                      */
/* ================================================================ */

body.skin-midnight-sapphire .text-emerald-300 {
    color: #38bdf8 !important;
}
body.skin-midnight-sapphire .bg-emerald-400 {
    background-color: #38bdf8 !important;
}

/* ================================================================ */
/*  Hero Section — Subtle animated gradient overlay                   */
/* ================================================================ */

body.skin-midnight-sapphire section > .pointer-events-none.absolute.inset-0 {
    background: var(--ck-hero-gradient) !important;
}

/* ================================================================ */
/*  Header — Glass navbar                                              */
/* ================================================================ */

body.skin-midnight-sapphire header.sticky {
    background: rgba(5, 10, 24, 0.70) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-bottom-color: rgba(56, 189, 248, 0.06) !important;
}

body.skin-midnight-sapphire header.sticky.scrolled {
    box-shadow: 
        0 1px 0 rgba(56, 189, 248, 0.06),
        0 4px 24px rgba(5, 10, 24, 0.6) !important;
}

/* ================================================================ */
/*  Top Bar — Slightly lighter glass                                   */
/* ================================================================ */

body.skin-midnight-sapphire .bg-slate-900\/80 {
    background: rgba(10, 22, 40, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ================================================================ */
/*  Accent Buttons — Glow effect                                       */
/* ================================================================ */

body.skin-midnight-sapphire .bg-accent {
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

body.skin-midnight-sapphire .bg-accent:hover {
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
}

/* ================================================================ */
/*  Form Inputs — Glowing focus ring                                   */
/* ================================================================ */

body.skin-midnight-sapphire input:focus,
body.skin-midnight-sapphire textarea:focus {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.12) !important;
}

/* ================================================================ */
/*  Shadows — Cool blue-tinted                                         */
/* ================================================================ */

body.skin-midnight-sapphire .shadow-2xl {
    box-shadow:
        0 0 1px rgba(56, 189, 248, 0.10),
        0 25px 50px -12px rgba(5, 10, 24, 0.7) !important;
}

body.skin-midnight-sapphire .shadow-sm {
    box-shadow:
        0 0 1px rgba(56, 189, 248, 0.08),
        0 1px 3px rgba(5, 10, 24, 0.4) !important;
}

/* ================================================================ */
/*  Selection Color                                                    */
/* ================================================================ */

body.skin-midnight-sapphire ::selection {
    background-color: #38bdf8;
    color: #050a18;
}

/* ================================================================ */
/*  Focus Ring                                                         */
/* ================================================================ */

body.skin-midnight-sapphire :focus-visible {
    outline-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

/* ================================================================ */
/*  Section Alternation — Deeper navy vs slightly lighter             */
/* ================================================================ */

body.skin-midnight-sapphire .bg-slate-900 {
    background-color: rgb(10, 22, 40) !important;
}

body.skin-midnight-sapphire .bg-slate-950 {
    background-color: rgb(5, 10, 24) !important;
}

/* ================================================================ */
/*  Pagination — Blue accent styling                                   */
/* ================================================================ */

body.skin-midnight-sapphire .page-numbers.current {
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

/* ================================================================ */
/*  Alternate Layout — Centered Hero min-height                       */
/* ================================================================ */

body.skin-midnight-sapphire #hero {
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ── Gradient text shimmer for brand name ── */
body.skin-midnight-sapphire .bg-gradient-to-r.from-accent.to-sky-300 {
    background-image: linear-gradient(135deg, #38bdf8, #7dd3fc, #a5f3fc);
}

/* ── Bento featured card — left accent stripe ── */
body.skin-midnight-sapphire .lg\\:row-span-2.rounded-2xl {
    border-left: 3px solid rgba(56, 189, 248, 0.25) !important;
}

/* ── Contact info cards — icon glow on hover ── */
body.skin-midnight-sapphire .rounded-xl.bg-slate-900\/40:hover .bg-accent\/10 {
    background: rgba(56, 189, 248, 0.15);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

/* ── Values horizontal scroll snap ── */
body.skin-midnight-sapphire .snap-x {
    scrollbar-width: thin;
    scrollbar-color: #1e3a5f #0a1628;
}
body.skin-midnight-sapphire .snap-x::-webkit-scrollbar {
    height: 4px;
}
body.skin-midnight-sapphire .snap-x::-webkit-scrollbar-track {
    background: #0a1628;
}
body.skin-midnight-sapphire .snap-x::-webkit-scrollbar-thumb {
    background: #1e3a5f;
    border-radius: 2px;
}

/* ── Floating stat bar — glass effect ── */
body.skin-midnight-sapphire #hero > .absolute.bottom-0 {
    background: rgba(5, 10, 24, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Badge pill — glow ── */
body.skin-midnight-sapphire .border-accent\/20.bg-accent\/5 {
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.08);
}

/* ── Pulsing dot animation ── */
@keyframes midnight-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
body.skin-midnight-sapphire .animate-pulse {
    animation: midnight-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Full-width submit button glow ── */
body.skin-midnight-sapphire button[type="submit"].w-full {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}
body.skin-midnight-sapphire button[type="submit"].w-full:hover {
    box-shadow: 0 0 32px rgba(56, 189, 248, 0.35);
}