:root {
     --bg-dark: #0f0f0f;
     --bg-card: #1a1a1a;
     --gold: #d89f5a;
     --gold-hover: #c48b47;
     --text-light: #f5f5f5;
     --text-light: #a0a0a0;
 }

 body {
     background-color: var(--bg-dark);
     color: var(--text-light);
     font-family: 'Montserrat', sans-serif;
 }

 /* Tipografi */
 .script-text {
     font-family: 'Dancing Script', cursive;
     color: var(--gold);
     font-size: 2.5rem;
     margin-bottom: 0;
 }

 .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 1.5rem;
 }

 /* Navbar */
 .navbar {
     background-color: rgba(15, 15, 15, 0.95) !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     padding: 15px 0;
 }

 .navbar-brand {
     border: 1px solid var(--gold);
     border-radius: 50%;
     padding: 15px;
     font-weight: bold;
     color: var(--text-light) !important;
     text-align: center;
    max-width: 100px;
    max-height: 100px;
 }

 .nav-link {
     color: var(--text-light) !important;
     font-weight: 500;
     margin: 0 10px;
     font-size: 0.9rem;
     text-transform: uppercase;
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--gold) !important;
 }

 .nav-item .active {
     border-bottom: 2px solid var(--gold);
 }

 /* Butonlar */
 .btn-gold {
     background-color: var(--gold);
     color: #fff;
     font-weight: 600;
     padding: 10px 25px;
     border-radius: 5px;
     border: none;
     transition: 0.3s;
 }

 .btn-gold:hover {
     background-color: var(--gold-hover);
     color: #fff;
 }

 .btn-outline-gold {
     background-color: transparent;
     color: var(--text-light);
     border: 1px solid var(--gold);
     padding: 10px 25px;
     border-radius: 5px;
     transition: 0.3s;
 }

 .btn-outline-gold:hover {
     background-color: var(--gold);
     color: #fff;
 }

 /* Hero Bölümü */
 /* Slider (Hero) Bölümü Güncellemesi */
 .hero-section {
     margin-top: 76px;
     /* Navbar boşluğu */
 }

 .carousel-item {
     height: 90vh;
     /* Yüksekliği her bir slayt için belirledik */
 }

 /* Görseldeki gibi yuvarlak alt slider noktaları */
 .carousel-indicators [data-bs-target] {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     margin: 0 6px;
     background-color: transparent;
     border: 2px solid #fff;
     opacity: 0.6;
     transition: 0.3s ease;
 }

 .carousel-indicators .active {
     background-color: var(--gold);
     border-color: var(--gold);
     opacity: 1;
 }

 /* Sağ Sol Okların boyutunu ayarlama */
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     width: 2.5rem;
     height: 2.5rem;
 }

 /* Özellikler (Features) */
 .features-section {
     padding: 60px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .feature-box {
     text-align: center;
     padding: 20px;
 }

 .feature-icon {
     font-size: 2.5rem;
     color: var(--gold);
     margin-bottom: 15px;
 }

 .text-gold {
     color: var(--gold);
 }


 .feature-title {
     font-size: 1rem;
     font-weight: 600;
     text-transform: uppercase;
 }

 .feature-desc {
     font-size: 0.85rem;
     color: var(--text-light);
 }

 /* Dikey Çizgiler */
 .border-right-custom {
     border-right: 1px solid rgba(255, 255, 255, 0.1);
 }

 @media (max-width: 768px) {
     .border-right-custom {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }
 }

 /* Hakkımızda */
 .about-section {
     padding: 100px 0;
 }

 .about-img-wrapper {
     position: relative;
     padding: 20px;
 }

 .about-img-wrapper::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 40px;
     left: 40px;
     background-image: radial-gradient(var(--gold) 2px, transparent 2px);
     background-size: 20px 20px;
     z-index: -1;
 }

 .about-img {
     width: 100%;
     border-radius: 10px;
 }

 /* Menü */
 .menu-section {
     padding: 80px 0;
     background-color: #141414;
 }

 .menu-card {
     background-color: var(--bg-card);
     border: none;
     border-radius: 10px;
     text-align: center;
     overflow: hidden;
     transition: 0.3s;
     height: 100%;
 }

 .menu-card:hover {
     transform: translateY(-5px);
 }

 .menu-card img {
     height: 200px;
     object-fit: cover;
 }

 .menu-title {
     font-weight: 600;
     font-size: 1.1rem;
     margin-top: 15px;
 }

 .menu-desc {
     font-size: 0.85rem;
     color: var(--text-light);
     padding: 0 15px;
 }

 .menu-price {
     color: var(--gold);
     font-size: 1.2rem;
     font-weight: 700;
     margin: 15px 0;
 }

 .section-separator {
     width: 50px;
     height: 2px;
     background-color: var(--gold);
     margin: 0 auto 40px auto;
     position: relative;
 }

 .section-separator::after {
     content: '';
     position: absolute;
     top: -4px;
     left: 20px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: var(--bg-dark);
     border: 2px solid var(--gold);
 }

 /* CTA Rezervasyon */
 .cta-section {
     padding: 80px 0;
     background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/assets/front/rotasahne/images/reservation.avif') center/cover;
     background-attachment: fixed;
 }

 /* Footer */
 footer {
     background-color: #0a0a0a;
     padding: 60px 0 20px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .footer-logo {
     border: 1px solid var(--gold);
     border-radius: 50%;
     width: 80px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     text-align: center;
     margin-bottom: 20px;
 }

 .footer-title {
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

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

 .footer-links li {
     margin-bottom: 10px;
 }

 .footer-links a {
     color: var(--text-light);
     text-decoration: none;
     transition: 0.3s;
 }

 .footer-links a:hover {
     color: var(--gold);
 }

 .social-icons a {
     color: var(--text-light);
     font-size: 1.2rem;
     margin-right: 15px;
     transition: 0.3s;
 }

 .social-icons a:hover {
     color: var(--gold);
 }

 .contact-info p {
     color: var(--text-light);
     margin-bottom: 10px;
     font-size: 0.9rem;
 }

 .contact-info i {
     width: 20px;
     color: var(--gold);
 }

 .scroll-top {
     background-color: #222;
     color: #fff;
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     position: absolute;
     right: 20px;
 }