:root{
   --dark:#000000;
   --gold:#000000;        
   --gold-700:#111111;    
   --text:#ffffff;
   --ink:#ffffff;
   --muted:#9ca3af;
   --bg:#000000;
   --radius:26px;
   --container:1140px;
   --shadow:0 10px 30px rgba(0,0,0,.55);
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink);line-height:1.6}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
/* HEADER */
.site-header{background:var(--dark);color:var(--text);position:sticky;top:0;z-index:50;border-bottom:2px solid #000}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:34px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:#ffffff!important;text-decoration:none;font-weight:600}
.nav-links a:hover{color:#9ca3af!important}
.btn-primary{
  background:#000!important;
  color:#fff!important;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow:var(--shadow);
  border:2px solid #000!important;
}
.btn-primary:hover{
  background:#111!important;
}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;margin:5px 0;border-radius:2px}
/* FOOTER */
.site-footer{background:#000;color:#ffffff;margin-top:60px;border-top:3px solid #000}
.site-footer a{color:#9ca3af}
.site-footer a:hover{color:#ffffff}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:40px 0}
.footer-copy{text-align:center;padding:14px 0;border-top:1px solid #2b2b2b}


/* STEPPER */
.stepper{display:flex;gap:10px;margin:24px 0}

/* pasif step = gri */
.step{
  flex:1;
  background:#e5e7eb;
  padding:16px;
  border-radius:10px;
  position:relative;
  text-align:center;
  font-weight:700;
  color:#4b5563;
}

/* aktif step = siyah */
.step.active{
  background:#000!important;
  color:#fff!important;
}

.step:after{
  content:"";
  position:absolute;
  top:0;
  right:0;                 /* -10px yok */
  width:14px;
  height:100%;
  background:#d1d5db;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events:none;
}
.step.active:after{ background:#000; }
.step:last-child:after{ display:none; }

/* FORM CARD */
.card{border:2px solid #000!important;border-radius:12px;padding:18px;background:#0c0c0c;box-shadow:var(--shadow); overflow: visible;} 
.card h3{margin:0 0 16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px; position: relative;} 
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.label{font-weight:700;color:#ffffff;margin-bottom:6px}
.input, select{width:100%;padding:12px 14px;border:1px solid #383838;border-radius:10px;background:#0c0c0c;color:#fff}
.input:focus, select:focus{outline:none;border-color:#000}
.btn-next{display:inline-block;margin-top:16px;background:#000!important;color:#fff!important;padding:12px 22px;border:0;border-radius:999px;cursor:pointer;font-weight:800}
.btn-next:hover{background:#111!important}
.notice{font-weight:800;color:#ffffff;margin:4px 0 18px}
.subtle{color:#9ca3af;font-size:.95rem}

/* RESPONSIVE GENEL */
@media (max-width: 960px){
   .nav-toggle{display:block}
   .nav-links{position:absolute;right:20px;top:62px;background:#000;padding:14px 18px;border-radius:10px;display:none;flex-direction:column;gap:16px}
   .nav-links.is-open{display:flex}
   .footer-grid{grid-template-columns:1fr}
   .row, .row-3{grid-template-columns:1fr}
} 


/* HERO */
.hero{
  height: 45vh;
  background-image: url('/assets/img/hero-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.hero .container{
  position: relative;
  z-index: 2;
}
.hero h1{
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: 12px;
}
.hero p.lead{
  color: #fff;
  font-size: clamp(14px, 2vw, 18px);
  max-width: 700px;
  margin: 0 auto;
}


/* MOBİL */
@media(max-width: 768px){
    .container{ padding: 0 20px !important; }
    #buchung { padding: 20px 0 !important; }
    .booking-flow .card{ max-width: 100%; padding: 20px !important; box-shadow:none; border:none; }
    .booking-flow label{ font-size:15px !important; margin-bottom:5px !important; }
    .booking-flow .input,
    .booking-flow select{
        padding:10px 14px !important;
        font-size:16px !important;
        min-height:42px;
    }
    .btn-next{
        padding:12px 20px !important;
        font-size:16px !important;
        margin-top:15px !important;
    }
    .site-footer { margin-top:40px; }
    .footer-grid{ grid-template-columns:1fr !important; gap:10px !important; padding:20px 0 !important; text-align:center; }
    .site-footer h4{ font-size:16px; margin-bottom:2px; }
    .site-footer p,
    .site-footer a{
        font-size:14px;
        line-height:1.2;
        margin-bottom:3px;
    }
    .footer-copy{ padding:10px 0 !important; font-size:12px; }
    #service h2, #kontakt h2, #faq h2 { font-size:24px; margin-top:0; }
    #service h3, #faq h3 { font-size:18px !important; }
    #service p, #faq p, #faq li {
        font-size:14px;
        line-height:1.5;
    }
}


/* STARTADRESSE select */
#adresseInput{
    -webkit-text-security: none !important;
    text-security: none !important;
    height:46px;
    border-radius:10px;
    border:1px solid #383838;
    padding:12px 14px;
    font-size:16px;
    background:#000;
    color:#fff;
}
#adresseInput:invalid {
    box-shadow: none !important;
    outline: none !important;
}
#adresseInput:invalid::after,
#adresseInput:invalid::before {
    content: "" !important;
}


.autocompleteItem{
    padding:12px 14px;
    font-size:16px;
    border-bottom:1px solid #232323;
    cursor:pointer;
    background:#000;
    color:#fff;
}
.autocompleteItem:last-child{
    border-bottom:0;
}
.autocompleteItem:hover{
    background:#111;
}
gmpx-placeautocomplete{
  --gmpx-color-surface: #000;
  --gmpx-color-on-surface: #fff;
}

/* Startadresse alanını password-mask modundan tamamen kurtar */
#adresseInput {
    -webkit-text-security: none !important;
    text-security: none !important;
}
/* BAYRAK (ALMANYA) */

.lang-switch .flag {
 display: inline-block;
 width: 26px !important; 
 height: 18px !important; 
 box-shadow: 0 0 0.5px rgba(0,0,0,.6);
 border-radius: 2px;
 overflow: hidden;
 
 
 background: linear-gradient(
  
  #000000 0, #000000 33.33%, 
 
  #FF0000 33.33%, #FF0000 66.66%, 

  #FFCC00 66.66%, #FFCC00 100% 
 );
}
/* ✅ MOBILE CONSOLIDATED FIXES (keep at very bottom) */
@media (max-width: 768px){

  /* genel: yatay taşmayı engelle */
  html, body{ overflow-x:hidden; }

  .container{ padding: 0 20px !important; }
  #buchung { padding: 20px 0 !important; }

  .booking-flow .card{
    max-width: 100%;
    padding: 20px !important;
    box-shadow: none;
    border: none;
  }

  .booking-flow label{ font-size:15px !important; margin-bottom:5px !important; }

  .booking-flow .input,
  .booking-flow select{
    padding:10px 14px !important;
    font-size:16px !important;
    min-height:42px;
  }

  .btn-next{
    padding:12px 20px !important;
    font-size:16px !important;
    margin-top:15px !important;
  }

  .site-footer { margin-top:40px; }
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:20px 0 !important;
    text-align:center;
  }
  .site-footer h4{ font-size:16px; margin-bottom:2px; }
  .site-footer p,
  .site-footer a{
    font-size:14px;
    line-height:1.2;
    margin-bottom:3px;
  }
  .footer-copy{ padding:10px 0 !important; font-size:12px; }

  #service h2, #kontakt h2, #faq h2 { font-size:24px; margin-top:0; }
  #service h3, #faq h3 { font-size:18px !important; }
  #service p, #faq p, #faq li { font-size:14px; line-height:1.5; }

  /* ✅ STEPPER: taşmayı bitiren esas fix */
  .stepper{
    display:flex;
    gap:10px;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    padding-bottom:8px;
    margin:16px 0;
    scrollbar-width:none;
  }
  .stepper::-webkit-scrollbar{ display:none; }

  .step{
    flex:0 0 auto;
    min-width:140px;
    padding:12px 14px;
    border-radius:14px;
    white-space:nowrap;
    min-width:0; /* flex item taşmasını keser */
  }

  /* taşmanın ana sebebi: sağa taşan pseudo ok */
  .step:after{ display:none !important; }
}

@media (max-width: 420px){
  .step{ min-width:125px; font-size:13px; padding:10px 12px; }
}
@media (max-width: 768px){
  body{ overflow-x:hidden !important; }

  .stepper{
    overflow-x:auto !important;
    max-width:100% !important;
  }

  /* bazı tarayıcılar için ikisini birden kapat */
  .stepper .step::after,
  .stepper .step:after{
    display:none !important;
  }
}