:root{
  --yellow:#ffd400;         /* Logo zemin sarı */
  --black:#111111;          /* Yazılar siyah */
  --white:#ffffff;          /* %2 vurguluk beyaz */
  --ink:#1a1a1a;
  --muted:#3d3d3d;
  --radius:20px;
  --maxw:1200px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--yellow)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin-inline:auto;padding:0 20px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,212,0,.9);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-title{font-size:18px;margin-left:8px;font-weight:800}
.logo{width:44px;height:44px;border-radius:12px;background:var(--yellow);border:2px solid var(--black);display:grid;place-items:center;box-shadow:var(--shadow)}
.logo span{font-weight:800;color:var(--black)}
.menu{display:flex;gap:18px;align-items:center}
.menu a{padding:10px 12px;border-radius:12px;font-weight:600}
.menu a:hover{background:rgba(255,255,255,.2)}
.cta{background:var(--black);color:var(--yellow);padding:10px 14px;border-radius:14px;font-weight:700;box-shadow:var(--shadow)}

/* MOBILE MENU BUTTON */
.mobile-menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px}

/* DESKTOP MENU VISIBILITY */
@media (min-width: 961px){
  .menu{display:flex !important;margin-right:8px}
  .mobile-menu-btn{display:none !important}
}
.mobile-menu-btn span{width:24px;height:3px;background:var(--black);border-radius:2px;transition:all 0.3s ease}
.mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(6px, 6px)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(6px, -6px)}

/* MOBILE SLIDER MENU */
.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:100;opacity:0;visibility:hidden;transition:all 0.3s ease}
.mobile-menu-overlay.active{opacity:1;visibility:visible}
.mobile-menu{position:absolute;top:0;right:0;width:280px;height:100%;background:var(--yellow);transform:translateX(100%);transition:transform 0.3s ease;display:flex;flex-direction:column}
.mobile-menu-overlay.active .mobile-menu{transform:translateX(0)}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:2px solid var(--black)}
.mobile-menu-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--black);padding:4px}
.mobile-menu-nav{display:flex;flex-direction:column;padding:20px 0}
.mobile-menu-nav a{padding:16px 20px;color:var(--black);font-weight:600;border-bottom:1px solid rgba(0,0,0,0.1);transition:background 0.2s ease}
.mobile-menu-nav a:hover{background:rgba(255,255,255,0.3)}

/* HERO */
.hero{padding:56px 0 24px;position:relative;overflow:hidden}

/* Fix for mobile initial view - ensure content is not hidden behind navbar */
@media (max-width: 960px) {
  .hero {
    padding-top: 80px; /* Account for sticky navbar height */
  }
}

/* HERO BUTTONS */
.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 0;
  margin-bottom: 20px;
}

.hero-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  padding: 20px 25px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
  text-align: left;
}

.btn-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.btn-subtitle {
  font-weight: 500;
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.1;
}

/* Call Button - Turquoise */
.call-btn {
  background: #17a2b8;
  color: var(--white);
  border: 2px solid #17a2b8;
}

.call-btn:hover {
  background: #138496;
  border-color: #138496;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(23, 162, 184, 0.3);
}

/* WhatsApp Button - WhatsApp Green */
.whatsapp-btn {
  background: #25d366;
  color: var(--white);
  border: 2px solid #25d366;
}

.whatsapp-btn:hover {
  background: #1da851;
  border-color: #1da851;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

/* Location Button - Yellow theme */
.location-btn {
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
}

.location-btn:hover {
  background: var(--black);
  color: var(--yellow);
  transform: translateY(-2px);
}

/* Responsive visibility */
.desktop-only {
  display: none;
}

/* Rating Input Styles */
.rating-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
  margin: 10px 0;
}

.rating-input input[type="radio"] {
  display: none;
}

.rating-input label {
  font-size: 24px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.rating-input label:hover,
.rating-input label:hover ~ label {
  color: #ffd400;
}

.rating-input input[type="radio"]:checked ~ label {
  color: #ffd400;
}

.rating-input input[type="radio"]:checked + label {
  color: #ffd400;
}

/* Review Cards */
#bewertungen .card {
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#bewertungen .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

@media (min-width: 961px) {
  .desktop-only {
    display: flex;
  }
  
  .hero-btn {
    min-width: 300px;
  }
}

/* HERO MAP */
.hero-map {
  margin-top: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-map .map {
  height: 300px;
  width: 100%;
}

@media (min-width: 961px) {
  .hero-map .map {
    height: 400px;
  }
}

.hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0.1;z-index:1}
.hero-content{position:relative;z-index:3}
.hero-content .container{display:flex;flex-direction:column;gap:30px}

/* Hero Image Section */
.hero-image-section{width:100%;margin-bottom:20px}
.hero-image{width:100%;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}

/* Hero Main Content - Mobile: Single Column, Desktop: Two Columns */
.hero-main-content{display:grid;grid-template-columns:1fr;gap:28px;align-items:flex-start}

/* Desktop: Two columns side by side (left: image+buttons+text, right: map) */
@media (min-width: 961px) {
  .hero-main-content{grid-template-columns:1.1fr .9fr}
  .hero-image-section{margin-bottom:25px}
}
.hero-main{display:flex;flex-direction:column;justify-content:flex-start}
.hero-map{display:flex;flex-direction:column;justify-content:flex-start}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 12px;color:var(--black)}
.hero p{font-size:clamp(16px,2vw,18px);color:var(--muted);margin:30px 0 0;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 26px}
.chip{background:var(--black);color:var(--yellow);border-radius:999px;padding:8px 12px;font-weight:700;font-size:14px}
.hero-card{background:var(--white);opacity:.98;border:2px solid var(--black);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.hero-card h3{margin:0 0 6px}
.hero-card ul{padding:0 0 0 18px;margin:8px 0 0}


/* HERO IMAGE VARIANTS */
.hero.with-image{background:linear-gradient(135deg, rgba(255,212,0,0.95) 0%, rgba(255,212,0,0.85) 100%)}
.hero.with-image .hero-bg{opacity:0.25}

/* HERO TEXT OVERLAYS */
.hero-overlays{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none}
.text-overlay{position:absolute;display:flex;align-items:center;gap:12px;opacity:0;animation:fadeInOverlay 1s ease forwards}
.text-overlay.overlay-1{top:20%;left:10%;animation-delay:0.5s}
.text-overlay.overlay-2{top:45%;right:15%;animation-delay:1s}
.text-overlay.overlay-3{bottom:25%;left:15%;animation-delay:1.5s}

.overlay-line{width:40px;height:2px;background:var(--black);position:relative}
.overlay-line::after{content:'';position:absolute;right:-8px;top:-3px;width:8px;height:8px;background:var(--black);border-radius:50%}

.overlay-text{background:rgba(255,212,0,0.95);color:var(--black);padding:8px 12px;border-radius:8px;font-weight:700;font-size:14px;border:2px solid var(--black);box-shadow:var(--shadow)}

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

/* SECTIONS */
section{padding:72px 0}
.section-title{font-size:clamp(22px,3vw,30px);margin:0 0 14px;color:var(--black)}
.section-sub{color:var(--muted);margin:0 0 28px}
.grid{display:grid;gap:18px}
.grid-responsive-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-responsive-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* CARDS */
.card{background:var(--white);border:2px solid var(--black);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);word-wrap:break-word;overflow-wrap:break-word}
.card h4{margin:0 0 10px}
.icon{width:36px;height:36px;border:2px solid var(--black);border-radius:10px;display:grid;place-items:center;margin-bottom:10px}

/* STEPS */
.steps{counter-reset:step}
.step{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.9);border:2px solid var(--black);border-radius:16px;padding:16px}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;min-width:36px;height:36px;border-radius:10px;background:var(--black);color:var(--yellow);font-weight:800}

/* FAQ */
details{background:rgba(255,255,255,.95);border:2px solid var(--black);border-radius:14px;padding:14px;transition:all 0.3s ease;overflow:hidden}
details[open]{background:rgba(255,255,255,1)}
summary{cursor:pointer;font-weight:700;padding:8px 0;position:relative;list-style:none;outline:none;user-select:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'▼';position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(0deg);transition:transform 0.3s ease;font-size:12px;color:var(--black)}
details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
details p{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(0,0,0,.1);animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* CONTACT / MAP */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{background:rgba(255,255,255,.95);border:2px solid var(--black);border-radius:var(--radius);padding:18px}
.contact-card .cta{display:inline-block;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;text-align:center;font-size:14px;padding:8px 12px;margin-top:4px}
.map{border:2px solid var(--black);border-radius:var(--radius);overflow:hidden;height:360px;min-height:250px}

/* FOOTER */
footer{padding:26px 0;border-top:1px dashed rgba(0,0,0,.2);font-size:14px;color:#2c2c2c}



/* RESPONSIVE */
@media (max-width: 960px){
  .hero-content .container{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .menu{display:none}
  .mobile-menu-btn{display:flex;margin-right:8px}
  .brand-title{font-size:18px;margin-left:8px;font-weight:800}
  .grid[style*="repeat(3,1fr)"]{grid-template-columns:1fr !important}
}

@media (max-width: 768px){
  .container{padding:0 16px}
  .hero{padding:40px 0 20px}
  section{padding:48px 0}
  .grid[style*="1fr 1fr"]{grid-template-columns:1fr !important}
  .chips{justify-content:center}
  .nav-inner{padding:8px 0}
  .brand-title{font-size:18px;margin-left:8px;font-weight:800}

  .map{height:280px}
}

@media (max-width: 480px){
  .hero h1{text-align:center}
  .hero p{text-align:center}
  .section-title{text-align:center}
  .section-sub{text-align:center}
  .contact-wrap{gap:12px}
  .contact-card{padding:16px}
  .contact-card .cta{font-size:12px;padding:6px 10px;max-width:calc(100% - 20px)}
  .card{padding:18px}
  .step{flex-direction:column;text-align:center}
  .step::before{align-self:center}
  .brand-title{font-size:18px;margin-left:8px;font-weight:800}
  
  /* Mobile Text Overlays */
  .text-overlay{display:none} /* Hide overlays on very small screens for better readability */
  .hero.with-image .hero-bg{opacity:0.15} /* Reduce image opacity on mobile for better text contrast */
}

/* GALLERY SLIDER STYLES */
.gallery-slider {
  position: relative;
  max-width: 1100px;
  margin: 30px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.gallery-track {
  display: flex;
  transition: transform 0.5s ease;
}

.gallery-slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 16/9;
}

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

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,212,0,0.9);
  color: var(--black);
  border: 2px solid var(--white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-prev {
  left: 15px;
}

.gallery-next {
  right: 15px;
}

.gallery-nav:hover {
  background: var(--yellow);
  transform: translateY(-50%) scale(1.1);
}

.gallery-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  background: rgba(255,212,0,0.1);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
}

.gallery-counter #gallery-current {
  color: var(--black);
  font-weight: 700;
  background: var(--yellow);
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid var(--black);
  margin-right: 8px;
}

.gallery-counter #gallery-total {
  color: var(--muted);
  margin-left: 8px;
}

.gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 768px) {
  .gallery-slider {
    margin: 20px auto 0;
    border-radius: 12px;
  }
  
  .gallery-slide {
    aspect-ratio: 4/3;
  }
  
  .gallery-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .gallery-prev {
    left: 10px;
  }
  
  .gallery-next {
    right: 10px;
  }
  
  .gallery-counter {
    padding: 12px 15px;
    font-size: 14px;
  }
  
  .gallery-counter #gallery-current {
    padding: 3px 6px;
    font-size: 14px;
  }
}