/* Reset and Base Styles */
:root {


    --text-clr: #000000;
    --bckgrd-clr: #ffffff;
    --appbar-clr: #ff0000;
    --ikon-clr: #1e453e ;
    --ikon-clrsoft: #87c28c;
    --impt-clr: #d99000;
    --border-color: rgba(255, 255, 255, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    /* Montserrat fontunu varsayılan olarak belirle */
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}


body {
    background-color: var(--bckgrd-clr);
    color: #333;
    line-height: 1.6;
}

/* Header Styles - Web Görünümü (Varsayılan) */
#main-header {
    height: 140px; /* 110 yerine */
    position: fixed;
    top: 0;
    margin: 0;
    padding-bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 5%;
    /* Başlangıç padding değeri */
    z-index: 1000;
    /* Web'de başlangıçta siyah transparan gradient */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    transition: box-shadow 0.3s ease, padding 0.3s ease, background 0.3s ease;
}
/* Nav link tıklandığında aktif olunca */
#main-header.menu-open {
    box-shadow: none;
  background-color: white !important; /* Beyaz arkaplan */
}
.main-nav.menu-open {
    background-color: white;
}
/* Scroll yapıldığında appbar'ın görünümü */
#main-header.scrolled {
    background: #fff;
    /* Beyaz arka plan */
    padding: 10px 5%;
    /* Daha ince padding */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* İnce hafif gölge (app bar görünümü için) */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    flex: none;
    /* Logoyu sola yaslamak için esnekliği kaldırıyoruz */
    /* Kenarlıksız parlama efekti için radial-gradient kullanıldı */
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 55%);
    transition: background 0.3s ease;
}

.logo {
    width: 200px !important;
    height: 100px !important;
    object-fit: contain;
    display: block;
}

/* Scroll yapıldığında logonun küçülmesi ve parlama renginin değişmesi */
#main-header.scrolled .logo-container {
    background: none;
    /* Scroll anında parlama efektini kaldırıyoruz */
}

#main-header.scrolled .logo {
    width: calc(160px / 1.7);
    height: calc(80px / 1.7);
}

/* --- WEB MENÜSÜ GÜNCELLEMELERİ --- */
.main-nav {
    flex: 1;
    /* Menünün logodan sonra kalan alanı kaplamasını sağlıyoruz */
    display: flex;
    justify-content: flex-start;
    /* Menü öğelerini sola yaslıyoruz */
    align-items: center;
    margin-left: 20px;
    /* Logoyla menü arasında boşluk bırakıyoruz */
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 18px;
    /* Menü öğeleri arasındaki boşluğu azaltın */
}

.nav-item {
    position: relative;
    margin: 0;
}

/* En üstteyken menü yazıları beyaz */
.nav-link {
    position: relative;
    color: var(--bckgrd-clr);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
     white-space: nowrap;
}

/* Hover çizgisi */
.nav-link:hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: var(--ikon-clr);
    /* Çam yeşili */
}
/* Aktif çizgi */
.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: var(--ikon-clr);
}
.nav-item.dropdown .dropdown-menu-fullwidth {
  display: none;
}

.nav-item.dropdown.active .dropdown-menu-fullwidth {
  display: flex; /* veya block, nasıl istersen */
    gap: 30px;
    justify-content: flex-start;
    align-items: stretch; /* Yükseklikleri eşitle */
}

/* Menü alanı */
/* Header yüksekliği kadar boşluk vererek menüyü başlat */
/* Menü tam ekran genişliğinde olsun */
.dropdown-menu-fullwidth {
    position: fixed;       /* Sayfaya göre konumlanır */
    left: 0;
    width: 100%;
    margin: 0 !important;
    background: white;
    display: none;
    padding: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 999;
    flex-wrap: wrap; /* daraldıkça alta atabilsin */
}
header {
    position: relative;
    z-index: 1000;
}
/* Menü açıldığında */
.dropdown-menu-fullwidth.active {
    display: block;
}

.nav-item.dropdown.active .dropdown-menu-fullwidth {
  display: flex; /* veya block */
    gap: 0;
  justify-content: flex-start;
  align-items: stretch; /* her iki taraf eşit yükseklikte */
}


/* Sol kısım - resim alanı */
.dropdown-left {
    flex: 0 0 40%; /* Menü toplam genişliğinin %40'ı */
    max-width: 40%;
    display: flex; /* resim de kapsayıcıya otursun */
    padding-right: 20px; /* sağdan boşluk */
    padding-bottom: 20px; /* alttan boşluk */
    padding-top: 50px; /* üstten boşluk */
}
.image-overlay {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay-text {
    position: absolute;
    bottom: 80px; /* alttan mesafe */
    left: 20px;   /* soldan mesafe */
    color: white;
    font-family: Arial, sans-serif;
}

.overlay-text h2 {
    font-size: 24px;
    margin: 0 0 5px 0;
    font-weight: bold;
}

.overlay-text p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

.green-line {
    width: 100px;
    height: 2px;
    background-color: #2e8b57;
    margin-top: 5px;
}

.dropdown-left img {
    width: 100%;      /* kapsayıcıya tam otursun */
    height: auto;     /* orantılı küçülsün */
    display: block;   /* alt boşluk olmasın */
    object-fit: cover; /* taşarsa kırpsın */
     border-radius: 4px; /* istersek hafif köşe yumuşatma */
}
.dropdown-right {
    flex: 1;
    display: flex;
    flex-direction: column; /* içerikler dikey */
    justify-content: flex-start;
}

/* Sağ taraf container */
.dropdown-right ul {
    list-style: none;
    padding: 0;
    margin: 50px 0 0 0; /* üstten boşluk */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* iki sütun */
    gap: 10px 20px; /* satır ve sütun arası boşluk */
    max-width: 600px;
}

.dropdown-right ul li {
    margin-top: 5px; /* üstten boşluk ekler */
  padding: 10px 0;
  transition: opacity 0.3s ease; /* solma efekti */
}

.dropdown-right ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  position: relative; /* alt çizgi için gerekli */
}
.dropdown-right ul li a::after {
  content: "";
  position: absolute;
  bottom: -1px; /* yazının altına yerleşir */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ddd; /* varsayılan gri çizgi */
  transition: background-color 0.3s ease;
}
.dropdown-right ul:hover li {
  opacity: 0.5; /* tüm başlıklar soluklaşır */
}
.dropdown-right ul li:hover {
  opacity: 1; /* sadece üzerine gelinen başlık normal parlaklıkta */
}
.dropdown-right ul li:hover a::after {
  background-color: #2e8b57; /* hover çizgi yeşil */
}
/* Küçük sağ ok */
/* Varsayılan gri */
.dropdown-right ul li a .small-arrow {
  stroke: #555;
  transition: stroke 0.3s ease;
}

/* Hover olunca yeşil */
.dropdown-right ul li:hover a .small-arrow {
  stroke: #2e8b57;
}



/* Scroll yapıldığında menü yazıları siyah */
#main-header.scrolled .nav-link {
    color: var(--text-clr) !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--text-clr);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 4px;
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s;
}

.dropdown-content a:hover {
    background-color: var(--bckgrd-clr);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.search-container {
    display: none;
}

.language-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.language-icon {
    background: none;
    user-select: none;
    padding: 4px 8px;
    color: var(--ikon-clr);
    border-radius: 10px;
    min-width: 35px;
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.language-selector select {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.search-btn {
    color: var(--ikon-clr);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.search-btn svg {
    transition: transform 0.2s ease;
}

.search-btn:hover svg {
    transform: scale(1.1);
    /* Hafif büyüme efekti */
}


/* Sol ve alttan karartma efekti için pseudo-element */


/* iç kapsayıcı: sol - noktalar - sağ */
.controls-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: flex-start;
    /* Ortalamayı kaldır, sola hizala */
    padding-left: 0px;
    /* İstersen biraz boşluk bırak */
}
.prev-btn i, .next-btn i {
  font-size: 30px !important;
  color: black !important;
  opacity: 1 !important;
  display: inline-block !important;
}


.downmenubar-menu {
  background: var(--bckgrd-clr);
  margin: 20px 0;
  padding: 0;
  position: relative;
  font-family: 'Times New Roman', Times, serif;
}

.menu-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 10px 0;
}

.menu-list li a {
  text-decoration: none;
  color: var(--text-clr);
  padding: 10px 15px;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
  font-weight: 500;
}

.menu-list li a.active,
.menu-list li a:hover {
  color: #2E8B57; /* yeşil */
  border-bottom: 2px solid #2E8B57; /* alt çizgi */
}

/* içerik gizle/göster */
.dynamic-content {
  display: none;
  padding: 30px 10%;
}

.dynamic-content.active {
  display: block;
}
.menu-toggle {
  display: none; /* Masaüstünde gizle */
}



/* Content Sections */
.image-slogan {
    margin-top: 45px;
    text-align: center;
}

.image-slogan h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2rem;
    color: var(--text-clr);
    margin-bottom: 10px;
    font-weight: 700;
}

.image-slogan p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-clr);
    margin: 20px;
}

.slogan-bar {
    width: 2px;
    height: 2cm;
    background-color: var(--impt-clr);
    margin: 50px auto 0;
    border-radius: 2px;
}

.main-content {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.content-section.vertical-layout {
    flex-direction: column;
    align-items: center;
    flex: 0 0 33.33%;
    min-width: 250px;
    background-color: var(--bckgrd-clr);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 60px;
}

.content-section.vertical-layout .section-image,
.content-section.vertical-layout .section-text {
    width: 100%;
}

.content-section.vertical-layout .section-text {
    padding: 15px 0 0 0;
    text-align: center;
}

.content-section .section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content-section .section-text h2 {
    font-size: 1rem;
    margin-bottom: 20px;
    color: var(--text-clr);
}


/* Partner Message */
.partner-message {
    background-color: var(--text-clr);
    color: var(--bckgrd-clr);
    padding: 100px 20px;
    text-align: center;
    margin-top: 10px;
}

.partner-message h2 {
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--impt-clr);
}

.partner-message p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1.2rem;
    color: var(--bckgrd-clr);
    max-width: 800px;
    margin: 0 auto;
}

.guncel-wrapper {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 30px auto;
    gap: 40px;
    padding: 20px;
}

.guncel-content {
    position: relative;
    padding-left: 60px;
    background-color: var(--bckgrd-clr);
    box-sizing: border-box;
}

.guncel-content img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.guncel-content h3 {
    font-size: 2rem;
    color: var(--text-clr);
}

.guncel-content h2 {
    font-size: 1.5rem;
    color: var(--impt-clr);
}

.guncel-content p {
    font-size: 0.9rem;
    color: var(--text-clr);
}

/* Investor Relations */
.investor-relations {
    padding: 60px 20px;
    text-align: center;
}

.ir-text {
    margin-bottom: 20px;
}

.ir-text h2 {
    font-size: 2rem;
    font-weight: bold;
    color: var(--impt-clr);
    font-family: 'Times New Roman', Times, serif;
}

.ir-text h1 {
    font-size: 1.5rem;
    color: var(--text-clr);
    font-family: 'Times New Roman', Times, serif;
    margin-top: 10px;
}

.ir-text p {
    font-size: 1rem;
    color: var(--text-clr);
    font-family: 'Times New Roman', Times, serif;
    max-width: 800px;
    margin: 10px auto 0;
}

/* Announcements */
.why-kingroyal-announcements {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 100px 60px;
    gap: 40px;
}

.why-kingroyal {
    max-width: 70%;
    text-align: left;
    margin-left: 40px;
}

.why-kingroyal h2,
.why-kingroyal p {
    margin: 0 0 15px 0;
}

.announcements {
    background-color: var(--text-clr);
    color: var(--impt-clr);
    padding: 20px 30px;
    border-radius: 6px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.announcement-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.announcement {
    background-color: #222;
    padding: 15px;
    border-radius: 6px;
    flex: 1 1 100%;
    color: var(--bckgrd-clr);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.announcement-title {
    color: var(--impt-clr) !important;
    font-weight: bold;
    font-size: 1.3rem !important;
}

.announcement-date {
    font-size: 0.8rem;
    opacity: 0.7;
}

.announcement-news {
    white-space: normal;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Media Center */
.media-center {
    padding: 60px 20px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.media-center h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--impt-clr);
}

.media-center p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-clr);
}

.media-images {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    flex-wrap: nowrap;
}

.media-images img {
    width: 25%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* --- ALT BİLGİ (FOOTER) İÇİN GÖRSEL ŞÖLEN DÜZENLEMESİ --- */
/* Siyah üst bölüm */
.footer-top-black {
    background-color: var(--text-clr);
    color: var(--impt-clr);
    text-align: center;
    padding: 50px 20px 40px 20px;
    position: relative;
    z-index: 10;
    font-family: "Times New Roman", Times, serif;
}
.footer-top-black h2 {
    font-weight: 500; /* ince */
    font-size: 2rem;
    margin-bottom: 30px;
}

/* Butonlar */
.footer-top-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-btn {
    background-color: #fff;
    color: #000;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 400;
    font-family: "Times New Roman", Times, serif;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.footer-btn .arrow {
    display: inline-block;
    font-size: 1rem;
    transition: transform 0.3s ease;
    color: var(--impt-clr);
}
/* Hover animasyonu */
.footer-btn:hover .arrow {
    transform: translateY(-5px);
}
.footer-white-area {
    position: relative;
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    min-height: 300px; /* Beyaz alan yüksekliği */
    margin-bottom: 0;   /* alt boşluğu kaldır */
}

.footer-bg-image {
    position: absolute;
    top: 0;
    left: 0;              /* Sol tarafa yapışık */
    height: 100%;          /* Beyaz alanın yüksekliği kadar */
    width: auto;
    opacity: 0.6;          /* Transparanlık */
    z-index: 0;            /* İçeriğin altında */
}

.footer-white-wrapper {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 40px 10%;
    gap: 40px;
}
/* Beyaz alanın içeriği */
.footer-column {
    flex: 1;
    position: relative;
    z-index: 1;             /* Arka planın üstünde */
    text-align:justify;     /* Ortadan başlatmak için */
    max-width: 800px;
    margin: 0 auto;
}

.footer-column h2 {
    margin: 5px 0;
    font-size: 2rem;
    color: var(--impt-clr);
    margin-bottom: 10px;
}

.footer-column p{
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-clr);
    margin-bottom: 30px;
}
.footer-column h1 {
    font-size: 1.5rem;
    color: var(--text-clr);
    margin-bottom: 10px;
    font-weight: 100;
    font-family: "Times New Roman", Times, serif;
}

.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}
/* Sosyal medya ikonları */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.social-icons a {
    margin-right: 10px;
}

.social-icons a img {
    width: 50px;   /* İcon boyutu */
    height: 30px;
    transition: transform 0.3s ease;
}

.social-icons a:hover img {
    transform: scale(1.1); /* Hover animasyonu */
}


/* Var olan footer stilleri */
.main-footer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 5%;
    color: #000;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-section {
    flex: 1 1 250px;
}

.footer-section h3 {
    font-size: 1.5rem;
    color: #2e8b57;
    margin-bottom: 20px;
    position: relative;
}

.footer-section h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #2e8b57;
    margin-top: 10px;
}

.footer-section p,
.footer-section li {
    font-size: 1rem;
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #2e8b57;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 20px;
    margin-top: 40px;
}

/* Siyah alt şerit */
.footer-bottom-black {
    background-color: #000;
    height: 0.3cm;
    margin: 0; 
}

/* --- MOBİL MENÜ ve RESPONSIVE STİLLERİ --- */

/* Mobil menü butonu ve overlay (varsayılan olarak gizli) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--ikon-clr);
    cursor: pointer;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-clr);
    font-size: 20px;
    cursor: pointer;
}

/* Sağdan açılan menü penceresi */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1000;
    transition: right 0.5s ease-in-out;
    display: flex;
    justify-content: flex-end;
}

#mobile-menu-overlay.active {
    right: 0;
}

.mobile-menu-content {
    width: 75%;
    height: 100%;
    background-color: var(--bckgrd-clr);
    padding-top: 80px;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}

.mobile-nav-list {
    list-style: none;
    padding: 0 20px;
}

.mobile-nav-item {
    margin: 0;
    border-bottom: color(var(--text-clr));
}

.mobile-nav-link {
    color: var(--text-clr);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    transition: background-color 0.3s ease;
}

.mobile-nav-link i {
    display: inline-block;
    color: var(--text-clr);
    transition: transform 0.3s ease;
}

.mobile-nav-link.active i {
    transform: rotate(180deg);
}

.mobile-submenu {
    list-style: none;
    padding: 10px 0 10px 20px;
    display: none;
    background-color: var(--bckgrd-clr);
}

.mobile-submenu.active {
    display: block;
}

.mobile-submenu li a {
    color: var(--text-clr);
    font-size: 0.8rem;
    padding: 8px 0;
    display: block;
    text-decoration: none;
    transition: color 0.3s;
}


/* Masaüstünde menüdeki okları ve arama ikonunu gizle */
.nav-item .nav-link i,
.search-container {
    display: none;
}


/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 960px) {
  body {
    font-size: 10px; /* Yazı boyutunu küçült */
  }

  header, .slider-container, .partner-message, .investor-relations, footer {
    padding: 8px; /* İç boşlukları küçült */
  }

  img {
    max-width: 100%; /* Görsellerin ekranı aşmaması için */
    height: auto;
  }

  /* Genel olarak kutu boyutlarını küçültmek istersen */
  .container, .content-section, .main-content {
    max-width: 90%; /* Genişliği daralt */
    margin: 0 auto;
  }

  /* Menü ve başlıklar gibi büyük yazıların boyutunu küçültebilirsin */
  h1, h2, h3 {
    font-size: smaller;
  }

  /* Slider ve diğer büyük elemanları küçült */
  .slide-content {
    padding: 10px;
  }
}
@media (max-width: 992px) {
  .header-content {
    gap: 10px; /* Daha az boşluk */
  }
  .header-right {
    gap: 5px; /* Arama ve dil seçici arasındaki boşluk küçülür */
  }
}


@media (max-width: 992px) {
    .header-content {
        padding: 0 20px;
    }
}


@media (max-width: 960px) {

    /* Genel Header ve Menü Düzenlemeleri */
    #main-header {
        padding: 10px 5%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), transparent);
    }

    #main-header.scrolled {
        background-color: var(--bckgrd-clr);
    }

    .main-nav {
        display: none;
    }

    .header-content {
        justify-content: space-between;
    }

    .logo-container {
        order: 1;
        flex-grow: 1;
    }

    .logo {
        width: 160px;
        height: 160px;
    }

    .header-right {
        order: 2;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .language-selector {
        display: inline-flex !important;
        margin-right: 10px;
    }

    .language-icon {
        font-size: 0.9rem;
        min-width: 25px;
        padding: 2px 5px;
    }

    .mobile-menu-toggle {
        display: block !important;
        margin: 0;
        font-size: 20px;
        color: var(--ikon-clr);
    }

    /* Mobil menüdeki linkler için renk ayarı */
    .nav-link {
        color: var(--altin-turuncu) !important;
    }

    /* Slider ve İçerik Düzenlemeleri */
    .slider-container {
        height: 100vh;
    }

    .slide-content {
        bottom: 5%;
        left: 5%;
        right: 5%;
        padding: 15px;
    }

    .slide-title {
        font-size: 1.2rem;
    }

    .slide-text {
        font-size: 0.8rem;
    }

    /* Slider oklarının mobilde küçülmesi */
    .slider-btn {
        padding: 10px;
        font-size: 1.2rem;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    /* Alt bölümlerin responsive hale getirilmesi */
    .main-content {
        flex-direction: column;
        padding: 40px 5%;
    }

    .content-section.vertical-layout {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }

    .partner-message {
        padding: 60px 5%;
    }

    .partner-message h2 {
        font-size: 1.5rem;
    }

    /* Kutuların İkişerli Yerleşmesi için Yeni Düzenleme */
    .guncel-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .guncel-content {
        flex: 1 1 calc(50% - 20px);
        min-width: 150px;
        padding-left: 10px;
    }

    /* Duyurular bölümü için responsive düzenleme */
    .why-kingroyal-announcements {
        flex-direction: column;
        padding: 60px 5%;
    }

    .why-kingroyal,
    .announcements {
        max-width: 100%;
        margin-left: 0;
    }

    .announcement-items {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }

    .announcement {
        flex: 1 1 100%;
    }

    .media-images {
        flex-direction: column;
        gap: 10px;
    }

    .media-images img {
        width: 100%;
    }

    /* Footer düzenlemeleri */
@media (max-width: 992px) {
    .footer-top-black h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .footer-top-buttons {
        flex-wrap: wrap; /* Butonlar alt alta geçebilir */
        justify-content: center;
        gap: 20px;
    }
    .footer-btn {
        flex: 1 1 calc(45% - 20px); /* 2 sütun, arada boşluk */
        max-width: 200px; /* opsiyonel, büyük ekranlarda da taşmaması için */
        padding: 12px 20px;
        text-align: center;
    }

    .footer-white-area {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        padding: 0 5%;
    }

    .footer-section h3 {
        font-size: 1.2rem;
    }

    .footer-section p,
    .footer-section li {
        font-size: 0.9rem;
    }
        .footer-btn {
        flex: 1 1 calc(45% - 15px); /* Mobilde iki sütun korunur */
        max-width: 150px;
        font-size: 0.85rem;
    }
}



@media (max-width: 576px) {
    .logo {
        width: 40px;
        height: 40px;
    }

    .language-icon {
        font-size: 1rem;
        min-width: 25px;
    }

    .mobile-menu-toggle {
        font-size: 20px;
    }

    .slide-title {
        font-size: 1.2rem;
    }

    .slide-text {
        font-size: 0.8rem;
    }
}
/* --- Mobil Menü Butonu ve Overlay Stilleri --- */
.downmenubar-menu {
  background: var(--bckgrd-clr);
  margin-left: 0;
  margin-right: 0;
  padding: 30px 20px; /* kenar boşluklarını padding ile sağla */
  position: relative;
  font-family: 'Times New Roman', Times, serif !important;
}
/* Menünün kendisine çerçeve ekle */
.downmenubar-menu .menu-toggle {
  border: 1px solid #ccc; /* Başlangıçta açık gri çerçeve */
  transition: border-color 0.3s ease;
  padding: 5px 10px;
  background: none;
  cursor: pointer;
  border-radius: 4px; /* istersen hafif yuvarla */
  font-family: 'Times New Roman', Times, serif; /* Yazı tipi */
  font-weight: 400; /* Yazı kalınlığı */
  font-size: 19px; /* Yazı boyutu */
  color: var(--text-clr); /* Yazı rengi */
}

.downmenubar-menu .menu-toggle:hover {
  border-color: #6bb7e6; /* Hoverda açık mavi */
}


.downmenubar-menu .menu-list li a {
  font-family: 'Times New Roman', Times, serif;  /* Yazı tipi */
  font-weight: 400;                       /* Yazı kalınlığı */
  font-size: 19px;                       /* Yazı boyutu */
  color:var(--text-clr);                          /* Yazı rengi */
  text-decoration: none;
  padding: 8px 12px;
  display: block;                      /* Tüm genişliği kapsaması için */
  transition: color 0.3s ease, background-color 0.3s ease;
  border-bottom: 2px solid transparent; /* başlangıçta görünmez çizgi */
}


.downmenubar-menu .menu-list li a:hover {
  border-bottom-color: var(--ikon-clr); /* Yeşil aktif çizgi */
}

/* Seçili olan menü */
.downmenubar-menu .menu-list li a.active {
border-bottom: 2px solid #2E8B57; /* aktifken yeşil çizgi */

  color: var(--ikon-clr);
}



.menu-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.menu-list {
    flex-direction: column;
  list-style: none;
  width: 100%; /* 100vw yerine 100% yap */
  justify-content: center; /* Yatayda ortalar */
  left: 0;
  top: 50%;
  position: absolute;

  padding: 10px 0;
  z-index: 9999;
  display: none; /* başlangıçta kapalı */
}
.menu-list.active {
    display: block;
}
.menu-list a.active {
  font-weight: bold;
  color: #2E8B57; /* Örnek aktif renk */
}
.menu-list.show {
  display: flex; /* açıldığında göster */
}

.menu-list li {
  position: relative;
}

/* Menü linkleri kutusuz, sadece renk değişsin */
.menu-list li a {          /* Kutuyu kaldır */
  padding: 10px 15px;
  color: var(--text-clr);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}


.menu-list li a.active {
 border-bottom-color: #2E8B57;
  font-weight: 700;
}
  .downmenubar-menu {
    position: relative;
    padding: 0;
  }

  .menu-toggle {
    display: block;
    min-height: 70px; /* yüksekliği zorunlu artır */
    background: var(--bckgrd-clr);
    border: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    margin: 30px 60px 0 60px; /* yukarı 30px, sağ-sol 60px boşluk */
    padding: 24px 28px; /* daha yüksek ve geniş buton */
    width: calc(100% - 120px); /* sağ-sol toplam boşluğu düşürdük */
    box-sizing: border-box;
    
    
    font-size: 20px; /* yazı daha büyük */
    color: var(--text-clr);
    text-align: left;
  }

  .menu-toggle i {
    float: right;
    margin-left: 10px;
    font-size: 22px; /* ikon boyutu büyüdü */
  }
  .menu-toggle,
.menu-list li a {
  font-family: 'Times New Roman', Times, serif ;
  font-weight: 600 !important;
}

  .menu-list {
    flex-direction: column;
    display: none;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    background: var(--bckgrd-clr);

    position: absolute;
    top: calc(100% + 0px);
    left: 60px;
    width: calc(100% - 120px);
    z-index: 999;
  }

  .menu-list.show {
    display: flex;
  }

  .menu-list li a {
    border-bottom: 1px solid #eee;
    padding: 20px 28px;
    font-size: 18px;
  }

.menu-list li a.active {
  
  border-bottom: none; /* alttaki çizgiyi kaldır */
  background-color: var(--ikon-clr); /* yeşil arka plan */
  color: var(--bckgrd-clr) !important; /* beyaz yazı */
}
.menu-list li a:hover {
     border-bottom: none; 
  background-color: var(--ikon-clrsoft); /* mavi arka plan */
  color: var(--bckgrd-clr) !important ; /* beyaz yazı */
}
}


.coming-soon {
  text-align: center;
  padding: 50px;
  font-family: Arial, sans-serif;
  color: #555;
}
.coming-soon h2 {
  font-size: 28px;
  margin-bottom: 10px;
}
.coming-soon p {
  font-size: 18px;
  opacity: 0.8;
}
.dynamic-content {
  display: none;
}
.dynamic-content.active {
  display: block;
}

/* --- Toolbar / Breadcrumb --- */
/* --- Toolbar / Breadcrumb --- */
.top-menu-section {
  background-color: #1e453e !important;
  padding: 10px 0;
  margin-top: 40px; /* Bu değerle header'ın altından aşağıya doğru boşluk bırakıyoruz */
  position: static; /* sticky'yi kaldırıyoruz. Aksi halde sayfa kaydırıldığında header'a yapışır */
  top: initial; /* sticky'yi kaldırdığımız için top değerini sıfırlıyoruz */
  z-index: 999;
  width: 100%;
    /* ortak görünüm olsun diye border-bottom ve box-shadow'u aynı tut */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Toolbar içindeki düzen */
.top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%; /* Genişliği %90'a çıkararak içeriği genişletiyoruz */
  max-width: none;
  padding: 0 15px;
  margin: 0 auto; /* Otomatik margin ile ortalıyoruz */
}

/* Breadcrumb stilleri */
.breadcrumb {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  margin: 0 5px;
  color: var(--bckgrd-clr);
}

/* Breadcrumb linkleri */
.breadcrumb-item a {
  color: var(--bckgrd-clr);
  text-decoration: none;
  font-weight: 400;
  transition: all 0.2s;
  font-family: 'Times New Roman', Times, serif;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--bckgrd-clr);
  font-weight: bold;
}

/* Menü ikonları */
.menu-items {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Times New Roman', Times, serif;
}

.menu-items a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bckgrd-clr);
  text-decoration: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.2s;
}

/* Büyük/orta/küçük A ikon boyutları */
.menu-items a.font-size[data-size="large"] {
  font-size: 18px;
}

.menu-items a.font-size[data-size="medium"] {
  font-size: 14px;
}

.menu-items a.font-size[data-size="small"] {
  font-size: 12px;
}

.menu-items i {
  font-size: 14px;
  pointer-events: none;
}

/* Mobilde gizle */
@media (max-width: 768px) {
  .menu-items {
    display: none;
  }
}




/* --- Banner ve içerik arasındaki boşluk --- */
body[data-page="other"] {
  padding-top: 60px; /* toolbar yüksekliği kadar boşluk bırak */
}

/* Sayfa içeriği */
#content {
  padding: 20px;
  font-size: 16px;
  color: var(--text-clr);
}
/* Banner */
.sub-page-banner {
  position: relative;
  width: 100%;
  height: 300px; /* Yüksekliği artırdım, isteğe göre değiştir */
  overflow: hidden;
  margin-top: 0;
  padding: 0;
}

.sub-page-banner .container {
  padding: 0;        /* container padding varsa sıfırla */
  max-width: 100%;   /* genişlik sınırını kaldır */
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.has-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.3);
  z-index: 1;
}

.banner-title, .sub-title {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--bckgrd-clr);
  margin-top: 50px; /* banner yüksekliğine göre ayarla */
}

.banner-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.sub-title {
  font-size: 1rem;
  margin-bottom: 5px;
}
#content > * {
  padding: 0; /* içerik için */
}
#content {
  padding: 0; /* main’in kendisinde padding yok */
}
.top-menu .menu-items {
  display: flex;
  align-items: center;
  gap: 10px; /* ikonlar arası boşluk */
}
/* Menü ikonlarını mobilde gizle */
@media (max-width: 768px) {
  .top-menu .menu-items {
    display: none;
  }
}