/* ========================================
   CMS Project - Public Site Styles
   ======================================== */

/* Base Styles */
html {
  font-size: 14px;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Inria Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Header Styles
   ======================================== */
#main-header {
  transition: all 0.3s ease-in-out;
}

#main-header.is-sticky {
  position: fixed;
  background-color: rgba(15, 76, 134, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

#main-header.is-sticky nav {
  background-color: transparent;
}

#main-header.is-sticky .logo-container {
  background-color: white;
}

/* Language Selector */
.lang-active {
  color: #82BC41 !important;
  font-weight: bold;
}

/* ========================================
   Dropdown Menu Styles
   ======================================== */
.group:hover > ul {
  display: block;
  animation: dropdownFadeIn 0.2s ease-in-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Swiper Customizations
   ======================================== */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #82BC41;
}

.swiper-button-next,
.swiper-button-prev {
  color: #0F4C86;
}

/* ========================================
   Footer Styles
   ======================================== */
footer a:hover {
  color: #82BC41;
}

/* ========================================
   Layout Outer / Footer Öncesi - Tam genişlik
   ======================================== */
.layout-outer-section,
.layout-partials-before-footer {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.layout-outer-section .layout-outer-component,
.layout-partials-before-footer .layout-outer-component {
  width: 100%;
  max-width: none;
}

/* ========================================
   Component Styles
   ======================================== */
.component-section,
.component-wrapper {
  position: relative;
}

.component-section[data-container="full-width"] {
  width: 100%;
  max-width: none;
}

.component-section[data-container="container"] {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.component-section[data-container="narrow"] {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ========================================
   Animation Utilities
   ======================================== */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Bootstrap Compatibility (Admin Panel)
   ======================================== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ========================================
   İçerik Alanı - Varsayılan yazı boyutu ve rengi
   ======================================== */
.content-area,
.prose.content-area {
  font-size: 1.125rem;
}

/* Component içerik yazı rengi - tüm açıklama/paragraf metinleri */
.content-area,
.content-area p,
.content-area-itb,
.content-area-itb p,
.content-area-twoimg,
.content-area-twoimg p,
.prose.content-area,
.prose.content-area p,
.component-section .text-secondary,
.component-section .text-gray-600,
.component-section .text-gray-500,
.component-section .text-gray-700,
.component-wrapper .text-secondary,
.component-wrapper .text-gray-600,
.description-text-animated,
.products-description-animated,
.about-description-animated {
  color: rgb(124 128 131 / var(--tw-text-opacity, 1)) !important;
}

/* ========================================
   CKEditor Resim Bloğu (wrapper/gradient ile eklenen görseller)
   ======================================== */
/* Sarmalayıcı içindeki p margin/padding kaldır - beyaz boşluk düzeltmesi */
.content-area div.overflow-hidden.relative p,
.prose div.overflow-hidden.relative p {
  margin: 0 !important;
  padding: 0 !important;
}
.content-area div.overflow-hidden.relative,
.prose div.overflow-hidden.relative {
  line-height: 0;
}
.content-area div.overflow-hidden.relative img,
.prose div.overflow-hidden.relative img {
  margin: 0 !important;
  display: block;
}
/* Ortala - wrapper veya img */
.content-area div.mx-auto,
.prose div.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.content-area div.overflow-hidden.relative img[style*="margin-left:auto"],
.prose div.overflow-hidden.relative img[style*="margin-left:auto"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========================================
   Metin Akışı (Word benzeri - resim etrafında metin)
   Desktop: yatay akış | Mobil: dikey (float yok sayılır)
   ======================================== */
@media (min-width: 768px) {
  .content-area .float-left,
  .content-area [class*="float-left"],
  .prose .float-left,
  .prose [class*="float-left"],
  .content-area .img-text-wrap,
  .prose .img-text-wrap {
    float: left !important;
    margin-right: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .content-area .float-right,
  .content-area [class*="float-right"],
  .prose .float-right,
  .prose [class*="float-right"] {
    float: right !important;
    margin-left: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .content-area img[style*="float:left"],
  .content-area img[style*="float: left"],
  .prose img[style*="float:left"],
  .prose img[style*="float: left"] {
    margin-right: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  .content-area img[style*="float:right"],
  .content-area img[style*="float: right"],
  .prose img[style*="float:right"],
  .prose img[style*="float: right"] {
    margin-left: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
}
@media (max-width: 767px) {
  .content-area .float-left,
  .content-area [class*="float-left"],
  .content-area .float-right,
  .content-area [class*="float-right"],
  .content-area .img-text-wrap,
  .content-area div[style*="float:left"],
  .content-area div[style*="float: left"],
  .content-area div[style*="float:right"],
  .content-area div[style*="float: right"],
  .prose .float-left,
  .prose [class*="float-left"],
  .prose .float-right,
  .prose [class*="float-right"],
  .prose .img-text-wrap,
  .prose div[style*="float:left"],
  .prose div[style*="float: left"],
  .prose div[style*="float:right"],
  .prose div[style*="float: right"] {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
    margin-bottom: 1rem;
  }
  .content-area img[style*="float:left"],
  .content-area img[style*="float: left"],
  .content-area img[style*="float:right"],
  .content-area img[style*="float: right"],
  .prose img[style*="float:left"],
  .prose img[style*="float: left"],
  .prose img[style*="float:right"],
  .prose img[style*="float: right"] {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}
.content-area::after,
.prose::after,
.content-area .clearfix::after,
.prose .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ========================================
   Scroll Indicator
   ======================================== */
.scroll-indicator {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}