@import "tailwindcss";

@theme {
    /* Container breakpoints */
    --breakpoint-sm: 700px;
    --breakpoint-md: 860px;
    --breakpoint-lg: 1100px;
    --breakpoint-xl: 1110px;
    --breakpoint-xxl: 1120px;

    /* Colors - Milk palette */
    --color-milk-50: #FCFCFC;
    --color-milk-100: #FAFAFA;
    --color-milk-200: #F2F2F2;
    --color-milk-300: #EDEDED;
    --color-milk-400: #E6E6E6;
    --color-milk-500: #E0E0E0;
    --color-milk-600: #D9D9D9;
    --color-milk-700: #D4D4D4;
    --color-milk-800: #CCCCCC;
    --color-milk-900: #666666;
    --color-milk-950: #2b2b2b;

    /* Colors - Dark palette */
    --color-dark-50: #8b8b8b;
    --color-dark-100: #717171;
    --color-dark-200: #575757;
    --color-dark-300: #3f3f3f;
    --color-dark-400: #282828;
    --color-dark-500: #121212;

    /* Colors - Velvet palette */
    --color-velvet-50: #FCE9E8;
    --color-velvet-100: #F9D2D2;
    --color-velvet-200: #F3A1A0;
    --color-velvet-300: #ED7573;
    --color-velvet-400: #E74846;
    --color-velvet-500: #D91F1C;
    --color-velvet-600: #AC1916;
    --color-velvet-700: #831311;
    --color-velvet-800: #560C0B;
    --color-velvet-900: #2D0606;
    --color-velvet-950: #170303;
}

:root {
    --background: #ffffff;
    --foreground: #171717;
    --media-brand: 245 245 245;
    --media-focus: 78 156 246;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ffffff;
    }
}

* {
    @apply select-none;
}

body {
    @apply text-black dark:text-white;
    background-color: #f2f2f2;
    font-family: 'Visby CF', sans-serif;
}

.dark body {
    background-color: #0a0a0a;
}

.base-font {
    font-family: 'Visby CF', sans-serif;
    font-weight: 500;
}

.base-title {
    font-family: 'Visby CF', sans-serif;
    font-weight: 700;
}

/* fonts.body / fonts.title 1:1 karşılıkları (React fonts/index.ts) */
.title-font {
    font-family: 'Visby CF', sans-serif;
    font-weight: 700;
}

.flicking-viewport {
    @apply relative z-0;
}


video {
    height: 100%;
}

/* Toast slide-in animation */
@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}

/* Ana slider arka plan animasyonu (main-slider-client inline) */
@keyframes gradient-animation-2 {
    0% { background-position: 0 0; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0 0; }
}

/* Resize vertical for textareas */
.resize-vertical {
    resize: vertical;
}

/* Container utility */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 700px) {
    .container {
        max-width: 700px;
    }
}

@media (min-width: 860px) {
    .container {
        max-width: 860px;
    }
}

@media (min-width: 1100px) {
    .container {
        max-width: 1100px;
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1110px) {
    .container {
        max-width: 1110px;
    }
}

@media (min-width: 1120px) {
    .container {
        max-width: 1120px;
    }
}

/* Dark mode variant */
@variant dark (&:where(.dark, .dark *));

/* Text foreground */
.text-foreground {
    color: var(--foreground);
}

/* Border colors */
.border-gray-200 {
    border-color: #e5e7eb;
}

.dark .border-gray-200 {
    border-color: #374151;
}

.border-gray-700 {
    border-color: #374151;
}

/* Background colors */
.bg-gray-200 {
    background-color: #e5e7eb;
}

.bg-gray-400 {
    background-color: #9ca3af;
}

.dark .bg-gray-400 {
    background-color: #4b5563;
}

.dark .bg-dark-400 {
    background-color: #282828;
}

/* Text colors */
.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.dark .text-gray-400 {
    color: #9ca3af;
}

.dark .text-gray-500 {
    color: #6b7280;
}

/* Hover utilities */
.hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hover\:bg-velvet-600:hover {
    background-color: #AC1916;
}

.hover\:drop-shadow-lg:hover {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:text-white:hover {
    color: #ffffff;
}

/* Backdrop utilities */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.hover\:backdrop-blur-sm:hover {
    backdrop-filter: blur(4px);
}

/* Active utilities */
.active\:scale-95:active {
    transform: scale(0.95);
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Object fit */
.object-contain {
    object-fit: contain;
}

.object-bottom {
    object-position: bottom;
}

.object-left {
    object-position: left;
}

/* Transition */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Duration */
.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.duration-700 {
    transition-duration: 700ms;
}

/* Ease */
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Group hover */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}

/* Mix blend */
.mix-blend-soft-light {
    mix-blend-mode: soft-light;
}

/* Isolate */
.isolate {
    isolation: isolate;
}

/* Z-index */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* Aspect ratio */
.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Fill current */
.fill-current {
    fill: currentColor;
}

/* Whitespace */
.whitespace-nowrap {
    white-space: nowrap;
}

/* Dark mode variant */
@variant dark (&:where(.dark, .dark *));

/* Selection */
.select-none {
    user-select: none;
}

/* ------------------------------------------------------------------ */
/* Header (components/mediastation/site/header/style.css birebir)      */
/* ------------------------------------------------------------------ */
.header-wrapper {
    @apply flex flex-col justify-between bg-milk-50 dark:bg-dark-500;
    z-index: 1453;
    position: fixed;
    left: 0;
    right: 0;
}

.header-container {
    @apply bg-milk-50 dark:bg-dark-500 h-[60px] lg:h-[80px] shadow-xl;
}

/* NOT: display (flex) burada verilmez — element `hidden lg:flex` ile responsive kontrol edilir.
   Tarayıcı-CDN cascade'inde katmansız `.subheader-container{display:flex}` `.hidden` utility'sini
   ezip mobilde gizlemeyi engelliyordu; display'i utility'ye bıraktık (React `hidden lg:block` niyeti). */
.subheader-container {
    @apply bg-dark-500 dark:bg-dark-400/20 h-[40px] shadow-xl items-center;
}

/* ------------------------------------------------------------------ */
/* Prose tipografisi — @tailwindcss/browser'da @plugin typography ÇALIŞMAZ */
/* (TEMPLATE_DEV.md §5/§12). Kurumsal içerik (ABOUT_US_CONTENT, KUNYE_CONTENT, */
/* PRIVACY_POLICY_CONTENT, TERMS_OF_USE_CONTENT, PUBLISHING_PRINCIPLES_CONTENT) */
/* HTML'i .prose ile bu stillerle biçimlenir. Koyu tema `.dark .prose` ile.     */
/* ------------------------------------------------------------------ */
.prose {
    color: #374151; /* gray-700 */
    line-height: 1.75;
    font-size: 1rem;
}
.dark .prose {
    color: rgba(255, 255, 255, 0.75);
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #111827; /* gray-900 */
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}
.dark .prose h1, .dark .prose h2, .dark .prose h3,
.dark .prose h4, .dark .prose h5, .dark .prose h6 {
    color: #ffffff;
}
.prose h1 { font-size: 2em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.1em; }

.prose strong { color: #111827; font-weight: 700; }
.dark .prose strong { color: #ffffff; }

.prose a {
    color: var(--color-velvet-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.prose a:hover { color: var(--color-velvet-600); }
.dark .prose a { color: var(--color-velvet-400); }

.prose ul, .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.6em;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-top: 0.4em; margin-bottom: 0.4em; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: 0.4em; margin-bottom: 0.4em; }

.prose blockquote {
    border-left: 4px solid var(--color-velvet-500);
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: #4b5563;
}
.dark .prose blockquote { color: rgba(255, 255, 255, 0.6); }

.prose img { max-width: 100%; height: auto; margin: 1.5em 0; }
.prose hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 2em 0;
}
.dark .prose hr { border-top-color: var(--color-dark-300); }

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
}
.prose th, .prose td {
    border: 1px solid #e5e7eb;
    padding: 0.5em 0.75em;
    text-align: left;
}
.dark .prose th, .dark .prose td { border-color: var(--color-dark-300); }
.prose th { background: #f9fafb; font-weight: 600; }
.dark .prose th { background: var(--color-dark-400); }