/**
 * Content Plugin Styles
 * Modern ve temiz bir arayüz için özel stiller
 */

/* Content Editor Wrapper - Overflow ve Layout Düzeltmeleri */
.content-editor-wrapper {
    @apply min-h-screen bg-gray-50;
    overflow-x: hidden;
}

.content-editor-main {
    @apply min-h-0;
    overflow-x: hidden;
}

/* Editor wrapper özelleştirmeleri */
#post_content_ifr,
#service_content_ifr {
    min-height: 400px;
    max-width: 100%;
}

/* Modern WordPress Blog Editor Styles */

.modern-editor-wrapper {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm;
}

.modern-editor-wrapper .editor-toolbar {
    @apply bg-white border-b border-gray-100;
}

.modern-editor-wrapper .editor-content-wrapper {
    @apply bg-white;
}

.modern-editor-content {
    min-height: 400px;
    line-height: 1.7;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.modern-editor-content:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Drag and Drop Styles */
.drag-over {
    @apply border-blue-500 bg-blue-50;
    border-style: dashed !important;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.gallery-placeholder.drag-over {
    @apply border-blue-500 bg-blue-50;
    border-style: dashed !important;
}

.thumbnail-placeholder.drag-over {
    @apply border-blue-500 bg-blue-50;
    border-style: dashed !important;
}

/* Drag and drop visual feedback */
.gallery-placeholder:hover,
.thumbnail-placeholder:hover {
    @apply border-gray-400;
    transition: all 0.2s ease;
}

/* Enhanced editor button styles */
.custom-editor-wrapper .editor-btn {
    @apply transition-all duration-200;
}

.custom-editor-wrapper .editor-btn:hover {
    @apply bg-gray-200;
}

.custom-editor-wrapper .editor-btn.active {
    @apply bg-blue-600 text-white;
}

.custom-editor-wrapper .editor-btn.active:hover {
    @apply bg-blue-700;
}

/* Blog Blocks Editor Styling */
.blog-editor-wrapper {
    @apply space-y-0; /* Remove default spacing, control with individual elements */
}

#blog-blocks-container {
    @apply space-y-6; /* Add spacing between blocks */
    margin: 0;
    padding: 0;
}

.blog-block {
    @apply transition-all duration-200;
    border: none;
    margin-bottom: 24px; /* Add margin between blog blocks */
}

/* Remove margin from last blog block */
.blog-block:last-of-type {
    margin-bottom: 0;
}

.blog-block:hover {
    @apply shadow-md;
}

.blog-block.active-block {
    @apply shadow-lg;
}

.block-content-wrapper {
    transition: all 0.2s ease;
}

.block-toolbar {
    @apply transition-all duration-200;
}

.block-toolbar.hidden {
    @apply hidden;
}

.block-content {
    @apply transition-all duration-200;
    margin: 0; /* Remove default margins */
}

.block-content:focus {
    @apply outline-none;
}

.block-content {
    @apply cursor-text;
}

/* Active block styling */
.active-block .block-content {
    @apply bg-blue-50;
}

/* Placeholder text styling */
.placeholder-text {
    @apply pointer-events-none text-gray-400 italic select-none;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.block-content:focus .placeholder-text {
    @apply hidden;
}

/* Content Plugin - Blog Post Headings with !important */
/* Sadece content plugin'den gelen içeriklerde başlık stilleri */
.content-plugin-content h1,
.content-plugin-content h2,
.content-plugin-content h3,
.content-plugin-content h4,
.content-plugin-content h5,
.content-plugin-content h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.content-plugin-content h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 2rem 0 1.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 1.25rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h5 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* Global heading styles for all WordPress posts */
body.single-post .content-plugin-content h1,
body.single-post .content-plugin-content h2,
body.single-post .content-plugin-content h3,
body.single-post .content-plugin-content h4,
body.single-post .content-plugin-content h5,
body.single-post .content-plugin-content h6,
body.single .content-plugin-content h1,
body.single .content-plugin-content h2,
body.single .content-plugin-content h3,
body.single .content-plugin-content h4,
body.single .content-plugin-content h5,
body.single .content-plugin-content h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body.single-post .content-plugin-content h1,
body.single .content-plugin-content h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 2rem 0 1.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

body.single-post .content-plugin-content h2,
body.single .content-plugin-content h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 1.25rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

body.single-post .content-plugin-content h3,
body.single .content-plugin-content h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

body.single-post .content-plugin-content h4,
body.single .content-plugin-content h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

body.single-post .content-plugin-content h5,
body.single .content-plugin-content h5 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

body.single-post .content-plugin-content h6,
body.single .content-plugin-content h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.block-content p {
    @apply mb-6 text-gray-900 leading-relaxed;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.block-content ul {
    @apply mb-6 text-gray-900 leading-relaxed;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    list-style-type: disc;
    padding-left: 1.5rem;
}

.block-content ol {
    @apply mb-6 text-gray-900 leading-relaxed;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    list-style-type: decimal;
    padding-left: 1.5rem;
}

.block-content li {
    @apply mb-2 text-gray-900 leading-relaxed;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


.block-content ul li {
    @apply list-disc text-gray-900 mb-2 leading-relaxed;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.block-content ol li {
    @apply list-decimal text-gray-900 mb-2 leading-relaxed;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.block-content a {
    @apply text-blue-600 hover:text-blue-800 underline decoration-1 underline-offset-2;
    transition: color 0.2s ease;
}

.block-content a:hover {
    @apply text-blue-800;
}

.block-content blockquote {
    @apply border-l-4 border-blue-500 pl-6 italic text-gray-700 my-6 bg-blue-50 py-4 rounded-r-lg;
    font-style: italic;
}

.block-content strong {
    @apply font-bold text-gray-900;
}

.block-content em {
    @apply italic text-gray-800;
}

.block-content u {
    @apply underline decoration-1 underline-offset-2;
}

/* Block format buttons */
.block-format-btn.active {
    @apply bg-blue-100 text-blue-700;
}

.block-format-btn:hover {
    @apply bg-gray-200;
}

/* Add block buttons */
.add-block-btn {
    @apply transition-all duration-200;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    flex-shrink: 0;
}

.add-block-btn:hover {
    @apply transform scale-110;
}

.add-block-btn.hidden {
    @apply hidden;
}

.add-block-container {
    @apply transition-all duration-200;
    height: 24px; /* Fixed height to prevent layout shift */
    min-height: 24px;
    max-height: 24px;
    overflow: hidden;
    margin-bottom: 12px; /* Add margin below add block button */
    padding: 0; /* Remove any default padding */
}

.add-block-container:hover .add-block-btn {
    @apply block;
}

/* Prevent layout shift when add block button appears */
.add-block-button-container {
    @apply transition-all duration-200;
    height: 24px; /* Fixed height */
    min-height: 24px;
    max-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
}

.add-block-line {
    @apply transition-all duration-200;
}

.add-block-button-container {
    @apply transition-all duration-200;
}

.add-block-button-container:hover {
    @apply bg-gray-50;
}


/* Block move buttons */
.block-move-btn {
    @apply transition-all duration-200;
}

.block-move-btn:hover {
    @apply transform scale-110;
}

/* Block delete button */
.block-delete-btn {
    @apply transition-all duration-200;
}

.block-delete-btn:hover {
    @apply transform scale-110;
}

/* Format selector styling */
.format-selector {
    @apply text-sm font-medium;
    min-width: 120px;
}

.format-selector:focus {
    @apply ring-2 ring-blue-500 border-blue-500;
}

/* Sub format selector styling */
.sub-format-selector {
    @apply text-sm font-medium;
}

.sub-format-selector:focus {
    @apply ring-2 ring-blue-500 border-blue-500;
}

.sub-format-selector.hidden {
    display: none;
}

/* Editor button active states */
.modern-editor-wrapper .editor-btn.active {
    @apply bg-blue-100 text-blue-700;
}

.modern-editor-wrapper .editor-btn:hover {
    @apply bg-gray-100;
}

/* Word count styling */
#word-count {
    @apply font-medium text-gray-600;
}

/* Content Sidebar Navigation - Global Sidebar Style */
.content-sidebar-nav .nav-link {
    transition: all 0.2s ease;
    transform-origin: center;
    background-color: transparent !important;
    color: #d1d5db; /* gray-300 - default text color */
}

.content-sidebar-nav .nav-link:hover {
    background-color: transparent !important;
    color: white !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.content-sidebar-nav .nav-link:hover .sidebar-icon {
    color: white !important;
}

.content-sidebar-nav .nav-link:hover .sidebar-text {
    color: white !important;
}

.content-sidebar-nav .sidebar-icon {
    color: #9ca3af; /* gray-400 */
    transition: color 0.2s ease;
}

.content-sidebar-nav .sidebar-text {
    color: #d1d5db; /* gray-300 */
    transition: color 0.2s ease;
}

/* Active navigation link styles */
.content-sidebar-nav .nav-link.text-white {
    color: white !important;
    font-weight: 600;
    transform: scale(1.02);
}

.content-sidebar-nav .nav-link.text-white .sidebar-icon {
    color: white !important;
}

.content-sidebar-nav .nav-link.text-white .sidebar-text {
    color: white !important;
    font-weight: 600;
}

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

#portfolio-list {
    width: 100%;
    box-sizing: border-box;
}

.portfolio-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Portfolio responsive grid */
@media (max-width: 768px) {
    #portfolio-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) {
    #portfolio-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.portfolio-item:hover .portfolio-checkbox {
    @apply opacity-100;
}

.portfolio-checkbox {
    @apply opacity-0 transition-opacity;
}

.portfolio-item:hover .portfolio-checkbox,
.portfolio-checkbox:checked {
    @apply opacity-100;
}

/* Portfolio selection styling without overflow */
.portfolio-item.selected .rounded-lg {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

/* Modern editor responsive design */
@media (max-width: 768px) {
    .modern-editor-wrapper .editor-toolbar {
        @apply px-3 py-2;
    }
    
    .modern-editor-wrapper .editor-toolbar .flex {
        @apply flex-wrap gap-2;
    }
    
    .format-selector {
        @apply text-xs;
        min-width: 100px;
    }
    
    .sub-format-selector {
        @apply text-xs;
    }
    
    .modern-editor-content {
        @apply p-4;
        min-height: 300px;
    }
    
    .modern-editor-content h2 {
        @apply text-xl;
    }
    
    .modern-editor-content h3 {
        @apply text-lg;
    }
    
    .modern-editor-content h4 {
        @apply text-base;
    }
}

/* WordPress editor sınıflarını Tailwind ile uyumlu hale getir */
.wp-editor-container {
    @apply border border-gray-300 rounded-md;
}

.wp-editor-tabs {
    @apply border-b border-gray-200 bg-gray-50;
}

.wp-editor-tabs button {
    @apply px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent;
}

.wp-editor-tabs button.active {
    @apply text-blue-600 border-blue-600;
}

/* Thumbnail özelleştirmeleri */
#thumbnail-preview img {
    @apply transition-transform duration-300;
}

#thumbnail-preview:hover img {
    @apply transform scale-105;
}

/* Gallery items */
.gallery-item {
    @apply transition-all duration-300;
}

.gallery-item:hover {
    @apply transform scale-105;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Form validation */
.field-error {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500;
}

.error-message {
    @apply text-red-600 text-sm mt-1;
}

/* Success message */
.success-message {
    @apply text-green-600 text-sm mt-1;
}

/* Sticky header blur effect */
header {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Custom scrollbar */
.max-h-64::-webkit-scrollbar {
    width: 8px;
}

.max-h-64::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
}

.max-h-64::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded;
}

.max-h-64::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Animasyonlar */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Status indicator */
.status-saving {
    @apply text-blue-600;
}

.status-saved {
    @apply text-green-600;
}

.status-error {
    @apply text-red-600;
}

/* Media modal özelleştirmeleri */
.media-modal {
    z-index: 999999;
}

/* ========================================
   CLEAN TAILWIND LAYOUT
   ======================================== */

/* Layout Variables */
:root {
    --header-height: 80px;
    --global-sidebar-collapsed: 5rem;  /* 80px */
    --global-sidebar-expanded: 14rem;   /* 224px */
}

/* Content Editor Wrapper */
.content-editor-wrapper {
    @apply min-h-screen bg-gray-50;
}

.content-editor-main {
    @apply min-h-screen;
}

/* ========================================
   GLOBAL SIDEBAR INTEGRATION
   ======================================== */

/* Global sidebar collapsed state */
body.has-global-sidebar .content-editor-main aside.fixed.left-0 {
    left: var(--global-sidebar-collapsed);
    height: calc(100vh - var(--header-height));
}


/* Global sidebar expanded state */
body.has-global-sidebar.sidebar-expanded .content-editor-main aside.fixed.left-0 {
    left: var(--global-sidebar-expanded);
    height: calc(100vh - var(--header-height));
}


/* ========================================
   CATEGORIES TOGGLE FUNCTIONALITY
   ======================================== */

/* Categories toggle button */
.categories-toggle {
    @apply cursor-pointer;
}

.categories-toggle:hover {
    @apply text-blue-600;
}

/* Categories content animation */
.categories-content {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.categories-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.categories-content.expanded {
    max-height: 300px;
    opacity: 1;
    margin-top: 1rem;
}

/* Category tree */
.cat-item .cat-children.hidden {
    display: none;
}

.cat-item .cat-children {
    margin-top: 0.25rem;
}

/* Parent rows clickable */
.cat-toggle {
    user-select: none;
}
.cat-toggle:hover .text-gray-900 {
    color: #1d4ed8; /* blue-700 */
}

/* Arrow rotation animation */
.categories-arrow {
    transition: transform 0.2s ease-in-out;
}

.categories-arrow.rotated {
    transform: rotate(180deg);
}

/* ========================================
   MOBILE RESPONSIVE LAYOUT
   ======================================== */

/* Mobile sidebar handling */
@media (max-width: 767px) {
    .content-editor-main aside {
        display: block !important;
    }
    
    /* Hide only the left sidebar on mobile */
    .content-editor-main aside.left-0 {
        display: none !important;
    }
    
    /* Stack order: content first, right sidebar last */
    .content-editor-main {
        display: block;
    }
    
    .content-editor-main .editor-main-content {
        order: 1;
    }
    
    .content-editor-main aside.right-0 {
        order: 2;
    }
    
    .content-editor-main .bg-gray-50 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* Tablet and desktop */
@media (min-width: 768px) {
    .content-editor-main aside.fixed.left-0 {
        display: block;
    }
}

@media (min-width: 1024px) {
    .content-editor-main aside.fixed.right-0 {
        display: block;
    }
}

/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */

@media (max-width: 1024px) {
    /* Mobile: Reset fixed positioning */
    .content-editor-main aside {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile: Reset margins */
    .content-editor-main .ml-64 {
        margin-left: 0 !important;
    }
    
    .content-editor-main .mr-80 {
        margin-right: 0 !important;
    }
    
    /* Mobile: Ignore global sidebar positioning */
    body.has-global-sidebar .content-editor-main aside.fixed.left-0,
    body.has-global-sidebar.sidebar-expanded .content-editor-main aside.fixed.left-0 {
        left: 0 !important;
    }
    
    body.has-global-sidebar .content-editor-main .ml-64 {
        margin-left: 0 !important;
    }
}

/* Ekstra küçük ekranlar için */
@media (max-width: 640px) {
    .content-editor-main {
        @apply py-4;
    }
    
    .edit-page-header {
        @apply px-2;
    }
    
    .edit-page-header .flex {
        @apply flex-col space-y-2;
    }
    
    .edit-page-header .flex.items-center.space-x-3 {
        @apply flex-wrap gap-2;
    }
}

/* Print styles */
@media print {
    header,
    aside,
    .no-print {
        display: none !important;
    }
    
    main {
        @apply max-w-full px-0;
    }
}

/* Dark mode desteği (isteğe bağlı) */
@media (prefers-color-scheme: dark) {
    /* Gelecekte dark mode desteği için hazır */
}

/* Focus visible için accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    @apply outline-none ring-2 ring-offset-2 ring-blue-500;
}

/* Disabled states */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Transitions */
* {
    @apply transition-colors duration-200;
}

/* Status toggle animasyonu */
#status-arrow {
    @apply transition-transform duration-200;
}

#status-arrow.rotate-180 {
    @apply transform rotate-180;
}

/* Loading animation for gallery placeholders */
.loading-placeholder {
    @apply transition-all duration-300;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Custom checkbox ve radio */
input[type="checkbox"],
input[type="radio"] {
    @apply cursor-pointer;
}

/* Gallery sortable placeholder */
.gallery-sortable-placeholder {
    @apply bg-blue-100 border-2 border-dashed border-blue-400 rounded-lg;
}

/* Tooltip */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg pointer-events-none opacity-0 transition-opacity;
}

.tooltip.show {
    @apply opacity-100;
}

/* Badge */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-draft {
    @apply bg-gray-100 text-gray-800;
}

.badge-publish {
    @apply bg-green-100 text-green-800;
}

.badge-pending {
    @apply bg-yellow-100 text-yellow-800;
}

/* Content Plugin - Blog Post Headings with !important */
/* Sadece content plugin'den gelen içeriklerde başlık stilleri */
.content-plugin-content h1,
.content-plugin-content h2,
.content-plugin-content h3,
.content-plugin-content h4,
.content-plugin-content h5,
.content-plugin-content h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.content-plugin-content h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 2rem 0 1.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 1.25rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h5 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.content-plugin-content h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* WordPress Blog Yapısına Uygun Ek Selector'lar */
/* Entry content ve single blog content için */
.entry-content .content-plugin-content h1,
.entry-content .content-plugin-content h2,
.entry-content .content-plugin-content h3,
.entry-content .content-plugin-content h4,
.entry-content .content-plugin-content h5,
.entry-content .content-plugin-content h6,
.single-blog-content .content-plugin-content h1,
.single-blog-content .content-plugin-content h2,
.single-blog-content .content-plugin-content h3,
.single-blog-content .content-plugin-content h4,
.single-blog-content .content-plugin-content h5,
.single-blog-content .content-plugin-content h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.entry-content .content-plugin-content h1,
.single-blog-content .content-plugin-content h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 2rem 0 1.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.entry-content .content-plugin-content h2,
.single-blog-content .content-plugin-content h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 1.25rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.entry-content .content-plugin-content h3,
.single-blog-content .content-plugin-content h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.entry-content .content-plugin-content h4,
.single-blog-content .content-plugin-content h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.entry-content .content-plugin-content h5,
.single-blog-content .content-plugin-content h5 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.entry-content .content-plugin-content h6,
.single-blog-content .content-plugin-content h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* Dark theme için renk ayarları */
.bg-gray-900 .content-plugin-content h1,
.bg-gray-900 .content-plugin-content h2,
.bg-gray-900 .content-plugin-content h3,
.bg-gray-900 .content-plugin-content h4,
.bg-gray-900 .content-plugin-content h5,
.bg-gray-900 .content-plugin-content h6 {
    color: #ffffff !important;
}

/* Prose sınıfı override */
.prose .content-plugin-content h1,
.prose .content-plugin-content h2,
.prose .content-plugin-content h3,
.prose .content-plugin-content h4,
.prose .content-plugin-content h5,
.prose .content-plugin-content h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.prose .content-plugin-content h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 2rem 0 1.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.prose .content-plugin-content h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 1.25rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.prose .content-plugin-content h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.prose .content-plugin-content h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.prose .content-plugin-content h5 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

.prose .content-plugin-content h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* WordPress Gutenberg Blok Yapısına Uygun Selector'lar */
/* wp-block-heading sınıfı için */
.entry-content .wp-block-heading,
.single-blog-content .wp-block-heading,
.prose .wp-block-heading,
.content-plugin-content .wp-block-heading {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.entry-content .wp-block-heading,
.single-blog-content .wp-block-heading,
.prose .wp-block-heading,
.content-plugin-content .wp-block-heading {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* H2 için özel boyut */
.entry-content h2.wp-block-heading,
.single-blog-content h2.wp-block-heading,
.prose h2.wp-block-heading,
.content-plugin-content h2.wp-block-heading {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1.75rem 0 1.25rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* H3 için özel boyut */
.entry-content h3.wp-block-heading,
.single-blog-content h3.wp-block-heading,
.prose h3.wp-block-heading,
.content-plugin-content h3.wp-block-heading {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 1rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* H4 için özel boyut */
.entry-content h4.wp-block-heading,
.single-blog-content h4.wp-block-heading,
.prose h4.wp-block-heading,
.content-plugin-content h4.wp-block-heading {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* H5 için özel boyut */
.entry-content h5.wp-block-heading,
.single-blog-content h5.wp-block-heading,
.prose h5.wp-block-heading,
.content-plugin-content h5.wp-block-heading {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* H6 için özel boyut */
.entry-content h6.wp-block-heading,
.single-blog-content h6.wp-block-heading,
.prose h6.wp-block-heading,
.content-plugin-content h6.wp-block-heading {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 1rem 0 0.5rem 0 !important;
    color: #1f2937 !important;
    display: block !important;
}

/* Dark theme için wp-block-heading */
.bg-gray-900 .wp-block-heading,
.bg-gray-900 .entry-content .wp-block-heading,
.bg-gray-900 .single-blog-content .wp-block-heading,
.bg-gray-900 .prose .wp-block-heading,
.bg-gray-900 .content-plugin-content .wp-block-heading {
    color: #ffffff !important;
}

/* Notification toast */
.notification {
    @apply fixed top-4 right-4 max-w-sm bg-white rounded-lg shadow-lg border border-gray-200 p-4 fade-in;
    z-index: 9999 !important;
}

.notification-success {
    @apply border-l-4 border-green-500;
}

.notification-error {
    @apply border-l-4 border-red-500;
}

.notification-info {
    @apply border-l-4 border-blue-500;
}

.notification-warning {
    @apply border-l-4 border-yellow-500;
}

/* Featured image styling - remove border */
.service-gallery-image.featured-image {
    border: none !important;
}

.product-gallery-image.featured-image {
    border: none !important;
}

/* Gallery image aspect ratio and sizing */
.service-gallery-image,
.product-gallery-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
}

.service-gallery-image img,
.product-gallery-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

/* Gallery placeholder aspect ratio */
.gallery-placeholder {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-placeholder:hover {
    border-color: #9ca3af; /* gray-400 */
    background-color: #f9fafb; /* gray-50 */
}

.gallery-placeholder > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}