/**
 * Çakmak Law — Theme Styles + Skin Variable System
 *
 * CSS custom properties ile skin desteği.
 * Tailwind CDN config bu değişkenleri referans alır.
 * Skin CSS dosyaları bu değişkenleri override eder.
 */

/* ================================================================ */
/*  Skin Variables — Default (Classic Dark)                           */
/* ================================================================ */

:root {
    /* Slate palette (RGB components for Tailwind alpha support) */
    --ck-50:  248 250 252;
    --ck-100: 241 245 249;
    --ck-200: 226 232 240;
    --ck-300: 203 213 225;
    --ck-400: 148 163 184;
    --ck-500: 100 116 139;
    --ck-600: 71 85 105;
    --ck-700: 51 65 85;
    --ck-800: 30 41 59;
    --ck-900: 15 23 42;
    --ck-950: 2 6 23;

    /* Accent (RGB components) */
    --ck-accent:      196 164 110;
    --ck-accent-soft: 245 237 224;

    /* Hex variants (non-Tailwind usage — scrollbar, selection, etc.) */
    --ck-accent-hex:       #c4a46e;
    --ck-accent-hex-hover: #d4b87e;
    --ck-scrollbar-track:  #0f172a;
    --ck-scrollbar-thumb:  #334155;
    --ck-scrollbar-thumb-hover: #475569;

    /* Hero gradient */
    --ck-hero-gradient: radial-gradient(
        circle at top, rgba(196,164,110,0.18), transparent 55%
    ), radial-gradient(
        circle at bottom, rgba(15,118,110,0.20), transparent 55%
    );
}

/* ================================================================ */
/*  Typography                                                        */
/* ================================================================ */

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================================ */
/*  Scrollbar                                                         */
/* ================================================================ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ck-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--ck-scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ck-scrollbar-thumb-hover);
}

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

::selection {
    background-color: var(--ck-accent-hex);
    color: rgb(var(--ck-950));
}

/* ================================================================ */
/*  Smooth scroll                                                      */
/* ================================================================ */

html {
    scroll-behavior: smooth;
}

/* ================================================================ */
/*  Focus ring                                                         */
/* ================================================================ */

:focus-visible {
    outline: 2px solid var(--ck-accent-hex);
    outline-offset: 2px;
}

/* ================================================================ */
/*  Sticky header — scroll shadow                                      */
/* ================================================================ */

header.sticky {
    transition: box-shadow 0.2s ease;
}

header.sticky.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* ================================================================ */
/*  WordPress admin bar fix                                            */
/* ================================================================ */

body.admin-bar header.sticky {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar header.sticky {
        top: 46px;
    }
}

/* ================================================================ */
/*  Blog card hover                                                    */
/* ================================================================ */

.blog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* ================================================================ */
/*  Loading animation (iletişim formu vb.)                             */
/* ================================================================ */

@keyframes cakmak-spin {
    to {
        transform: rotate(360deg);
    }
}

.cakmak-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ck-scrollbar-thumb);
    border-top-color: var(--ck-accent-hex);
    border-radius: 50%;
    animation: cakmak-spin 0.6s linear infinite;
    display: inline-block;
}

/* ================================================================ */
/*  WordPress block editor uyumluluğu                                  */
/* ================================================================ */

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.entry-content > * + * {
    margin-top: 1.5em;
}

.entry-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(var(--ck-200));
    margin-top: 2em;
}

.entry-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgb(var(--ck-200));
    margin-top: 1.5em;
}

.entry-content p {
    line-height: 1.75;
    color: rgb(var(--ck-400));
}

.entry-content a {
    color: var(--ck-accent-hex);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entry-content a:hover {
    color: var(--ck-accent-hex-hover);
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
    color: rgb(var(--ck-400));
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

.entry-content li + li {
    margin-top: 0.5em;
}

.entry-content blockquote {
    border-left: 3px solid var(--ck-accent-hex);
    padding-left: 1em;
    color: rgb(var(--ck-300));
    font-style: italic;
}