:root{
  --green:#0e4934;
  --green-2:#0a3a2a;
  --clay:#c24d2c;
  --line:#f1e5d0;
  --ball:#c7f36b;
  --ink:#0d1f18;
  --paper:#ffffff;
  --header-height: 80px; /* header yüksekliğini burada ayarla */
}
*{box-sizing:border-box}
html,body{position:relative;background:transparent;margin:0;padding:0  
}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:#133a2f;
  
  
}
.container{width:min(1160px,100%); margin-inline:auto}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; gap:.8rem; align-items:center}
.brand img{width:76px;height:76px;border-radius:.0;box-shadow:none;background:transparent}
.brand strong{display:block; color:#376a59; letter-spacing:.3px; font-weight:900}
.brand small{display:block; font-weight:600; font-size:.8rem}

#nav-toggle{display:none}
.nav{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.nav a{color:#376a59; padding:.55rem .9rem; border-radius:999px; font-weight:600; text-decoration:none}
.nav a:hover{background:rgb(197, 241, 107);}
.btn{background:var(--ball); color:#0f2a22; padding:.7rem 1rem; border-radius:.9rem; font-weight:800; text-decoration:none; border:none}
.btn:hover{filter:brightness(1.05)}
@media (max-width:860px){
  .nav{position:fixed; right:1rem; top:64px; background:#ffffff; padding:1rem; display:none; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.15)}
  #nav-toggle:checked + label + .nav{display:grid}
  .nav a{display:block}
  .menu-toggle{display:inline-block}
}
@media (min-width:861px){.menu-toggle{display:none} }

.hero{position:relative; min-height:76vh; overflow:hidden; isolation:isolate}
.hero .slides{position:absolute; inset:0; display:flex; animation:slide 28s infinite}
.hero .slide{flex:1 0 100%; background-size:cover; background-position:center background-size: contain; background-repeat: no-repeat; background-position: center;  background-size: contain; background-repeat:no-repeat; background-position:center; }

.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(14,73,52,.7), rgba(194,77,44,.5));
  mix-blend-mode:multiply; z-index:0;
}
.hero .watermark{position:absolute; inset:auto 0 -8% 50%; transform:translateX(-50%); opacity:.10; pointer-events:none; z-index:0}
.hero .watermark img{width:min(56vmin,520px); mix-blend-mode:multiply; filter:drop-shadow(0 6px 24px rgba(0,0,0,.25))}
.hero .content{position:relative; z-index:1; padding:18vh 0 10vh; color:#fff}
.hero h1{font-size:clamp(2rem, 4vw + 1rem, 4rem); margin:.2rem 0 .6rem; font-weight:900; text-shadow:0 3px 20px rgba(0,0,0,.35)}
.hero p{color:#eff8f4; max-width:60ch; margin:0 0 1.2rem}
.cta{display:flex; gap:.8rem; flex-wrap:wrap}
.btn.ghost{background:transparent; border:2px solid rgba(255,255,255,.75); color:#fff}

.section{padding:2rem 0; scroll-margin-top: calc(var(--header-height) + 8px); /* istediğin kadar azalt/artır */}
.section.alt{background:transparent}
.section h2{margin:0 0 .5rem; font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); color:#0e2d24}
.section p.lead{color:#376a59; margin:0 0 1.2rem}

.section-selected{background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06); border-color:var(--ball); box-shadow:0 0 0 4px rgba(199,243,107,.25)}

.cards{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.card{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:1rem;padding:1.2rem;box-shadow:0 6px 24px rgba(0,0,0,.06); background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06); border-color:var(--ball); box-shadow:0 0 0 4px rgba(199,243,107,.25)}
.card h3{margin:.2rem 0 .4rem}
.card ul{margin:.6rem 0 0 1.1rem; color:#23483f}

.pricing{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.price-card{background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06)}
.price-card.featured{border-color:var(--ball); box-shadow:0 0 0 4px rgba(199,243,107,.25)}
.price{font-size:2rem; font-weight:900; color:#0f3a2f}
.note{color:#325f52}

.grid.two{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06); border-color:var(--ball); box-shadow:0 0 0 4px rgba(199,243,107,.25)}
.check{list-style:none; padding:0; margin:.5rem 0 0}
.check li{padding-left:1.4rem; position:relative; margin:.35rem 0; color:#203e35}
.check li::before{content:'✓'; position:absolute; left:0; color:var(--ball); font-weight:900}

.news{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.news-card{background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; overflow:hidden; display:grid; grid-template-rows:auto 1fr; box-shadow:0 6px 24px rgba(0,0,0,.06); background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06); border-color:var(--ball); box-shadow:0 0 0 4px rgba(199,243,107,.25)}
.news-card img{width:100%; height:200px; object-fit:cover}
.news-card h3{margin:.8rem 1rem .4rem}
.news-card p{margin:0 1rem 1rem; color:#30584b}

.about{display:grid; gap:1rem; grid-template-columns: 1.1fr 1fr; align-items:center; border:1px solid rgba(0,0,0,.06);}
.about img{width:100%; border-radius:1rem}
@media (max-width:900px){ .about{grid-template-columns:1fr} }

.contact{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.contact-item{background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06); background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(0,0,0,.06); border-color:var(--ball); box-shadow:0 0 0 4px rgba(199,243,107,.25)}

.badge{display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.75); padding:.35rem .6rem; border-radius:.6rem; color:#154538; font-weight:800}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--ball)}

.site-footer{background:rgba(255,255,255,.85);border-top:1px solid rgba(0,0,0,.06);padding:1rem 0;backdrop-filter:blur(6px)}
.footer-inner{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-links{display:flex; gap:1rem}


  16%{transform:translateX(0%)}
  20%{transform:translateX(-100%)}
  36%{transform:translateX(-100%)}
  40%{transform:translateX(-200%)}
  56%{transform:translateX(-200%)}
  60%{transform:translateX(-300%)}
  76%{transform:translateX(-300%)}
  80%{transform:translateX(-400%)}
  96%{transform:translateX(-400%)}
  100%{transform:translateX(-500%)}
}


/* ===== Theme & Transitions Additions (V5.1) ===== */
:root, body, .card, .price-card, .news-card, .contact-item, .site-header, .site-footer, .section.alt, .nav a, .btn, .badge, .brand .name, .pricing, .cards, .news, .contact {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}
html[data-theme="dark"] .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
html[data-theme="dark"] .nav a{ color:#ffffff; }
html[data-theme="dark"] .nav a:hover{ background:rgba(255,255,255,.06); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .grid.two,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .contact-item{
  border-color:rgba(255,255,255,.06); box-shadow:0 8px 28px rgba(0,0,0,.35);
}
html[data-theme="dark"] .price{ color:#cfeadd; }
.theme-btn{display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:1px solid rgba(0,0,0,.15); padding:.5rem .7rem; border-radius:.8rem; cursor:pointer}
.theme-btn svg{width:18px;height:18px}
.theme-btn #sun{display:none}
html[data-theme="dark"] .theme-btn{border-color:rgba(255,255,255,.25); color:#e9f6f0}
html[data-theme="dark"] .theme-btn #sun{display:block}
html[data-theme="dark"] .theme-btn #moon{display:none}
/* softer overlay shift between themes */
.hero::before{ opacity:.9; transition:opacity .35s ease; }
html[data-theme="dark"] .hero::before{ opacity:1; }

/* V5.2 transitions */
html, body, .site-header, .site-footer, .section, .card, .price-card, .news-card, .contact-item, .nav a, .btn, .badge, .brand .name, .pricing, .cards, .news, .contact {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, filter .45s ease;
}

html[data-theme="dark"] .site-header{background:rgba(20,30,27,.8);border-bottom:1px solid rgba(255,255,255,.08)}

html[data-theme="dark"] .site-footer{background:rgba(16,24,21,.85);border-top:1px solid rgba(255,255,255,.08)}

html[data-theme="dark"] .section.alt{background:transparent}

.hero .slide img{width:100%;height:100%;object-fit:contain}

/* V5.3: fixed background image with theme overlays */
body::before, body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-2; transition:opacity .45s ease, background-color .45s ease;
}
body::before{
  background:
    url('assets/bg_court_clean.jpg') center/cover no-repeat fixed;
  opacity:1;
}
body::after{
  z-index:-1; background-color: rgba(255,255,255,.34); /* light overlay */
}
html[data-theme="dark"] body::after{ background-color: rgba(0,0,0,.50); } /* dark overlay */




/* V5.4 Slider: full-bleed fixed rectangle + swipe */
.hero{
  position: relative;
  width: 100vw;                 /* full-bleed */
  margin-left: calc(50% - 50vw);
  / * aspect-ratio: 16 / 9; */
  max-height: 80vh;             /* cap height */
  min-height: 56vh;
  overflow: hidden;
  isolation: isolate;
}
.slides{
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-y;          /* allow vertical page scroll */
  overscroll-behavior-x: contain;
}
.slide{ flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: start; background: transparent; }
.slide img{ width: 100%; height: 100%; object-fit: contain; }
.slides::-webkit-scrollbar{ display: none; }

/* Dots */
.dots{ position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%); display:flex; gap:.5rem; z-index:2 }
.dots a{ width:10px; height:10px; border-radius:999px; display:inline-block; background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.15) }
html[data-theme="dark"] .dots a{ background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.25) }
.dots a:focus{ outline:2px solid var(--ball) }


/* V5.4 Solid cards for all sections */
.card, .contact-item, .news-card, .price-card{
  background: var(--card) !important;
  backdrop-filter: none;
}


/* V5.5 section panels */
.section > .container{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding:1.2rem;
}
html[data-theme="dark"] .section > .container{
  background:transparent;
  border:1px solid rgba(30,120,90,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}


/* V5.5 hero text force white on dark overlay */
html[data-theme="dark"] .hero .content,
html[data-theme="dark"] .hero .content h1,
html[data-theme="dark"] .hero .content p,
html[data-theme="dark"] .hero .content .btn,
html[data-theme="dark"] .hero .content .badge{ color:#ffffff !important; border-color:rgba(255,255,255,.85) }
html[data-theme="dark"] .btn.ghost{ border-color:rgba(255,255,255,.85); color:#ffffff }
html[data-theme="dark"] .nav a:hover{background:rgb(197, 241, 107);}

@media (max-width: 860px) {
  html[data-theme="dark"] .nav { background:#376a59; }
   }

/* V5.5 link styles for contact & footer */
.contact-item a{ color:#0e4934; text-decoration:underline; }
.site-footer a{ color:#0e4934; text-decoration:underline; }
html[data-theme="dark"] .contact-item a, html[data-theme="dark"] .site-footer a{ color:#ffffff; text-decoration:underline; }

.dots a{box-shadow:0 1px 4px rgba(0,0,0,.15)}