/*
Theme Name: Eka Yurtları v2 (Custom)
Theme URI: https://ekayurtlari.com
Author: Eka Yurtları
Description: Modern, hızlı ve mobil uyumlu tema. Çok sayfa + tek sayfa hissi.
Version: 2.2.0
Text Domain: ekayurtlari
*/

/* === Değişkenler === */
:root{
  --navy:#0D0E3F;
  --blue:#1F39A8;
  --red:#E63946;
  --light:#F6F7FB;
  --white:#fff;

  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  /* Olanaklar ölçüleri (5x2) */
  --amenity-icon: 88px;     /* daire çapı */
  --amenity-stripe: 16px;   /* kırmızı şerit kalınlığı */
  --amenity-pad-y: 8px;     /* kart üst/alt iç boşluğu */
}

/* === Reset & Base === */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color:var(--text);
  background:var(--light);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--blue);text-decoration:none}
a:focus{outline:2px solid rgba(31,57,168,.4);outline-offset:2px}
img{max-width:100%;height:auto}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;background:#fff;padding:8px 10px;border-radius:8px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* === Layout === */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.btn{display:inline-block;padding:.85rem 1.2rem;border-radius:12px;font-weight:700;letter-spacing:.01em}
.btn-red{background:var(--red);color:#fff}
.btn-ghost{border:1px solid rgba(0,0,0,.1);color:#111;background:#fff}
.section{padding:4rem 0}
.section-white{background:#fff}
.h1{font-size:clamp(30px,5vw,48px);font-weight:900;margin:.5rem 0 0;letter-spacing:-.01em}
.h2{font-size:clamp(22px,3.2vw,32px);font-weight:800;margin:0}
.h3{font-size:clamp(18px,2.4vw,22px);font-weight:800;margin:0}
.p{opacity:.95;line-height:1.65}
.muted{color:var(--muted)}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 20px rgba(10,10,20,.04);overflow:hidden}
.card-body{padding:1.25rem}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}

/* === Header & Menü === */
.header-top{background:var(--navy);color:#fff}
.header-top a{color:#fff;opacity:.9}
.header{position:sticky;top:0;z-index:20;background:#0D0E3F;border-bottom:none}
.header .container{height:84px;display:flex;align-items:center;justify-content:space-between}
.nav{display:flex;gap:.25rem;align-items:center}
.menu,.nav .menu{list-style:none;margin:0;padding:0;background:transparent;border-bottom:none}
.menu>li{display:inline-block;margin:0 10px}
.menu>li>a{border-bottom:none!important;border-radius:10px;padding:.6rem .8rem;color:#fff!important;font-weight:700}
.menu>li>a:hover,.menu>.current-menu-item>a,.menu>.current_page_item>a{background:rgba(255,255,255,.12)!important;color:#fff!important}
.custom-logo{height:auto!important;width:auto!important;max-height:56px;max-width:100%;image-rendering:auto;display:block}

/* Mobil menü paneli */
#mobile-menu{position:fixed;inset:0;z-index:50;background:rgba(13,14,63,.96);color:#fff;display:none}
#mobile-menu .mobile-menu-list{list-style:none;margin:0;padding:10px 0;display:grid;gap:6px}
#mobile-menu a{color:#fff;padding:12px 10px;border-radius:10px;display:block}
#mobile-menu a:focus,#mobile-menu a:hover{background:rgba(255,255,255,.12)}

/* === Hero === */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1000px 400px at 70% -10%, var(--red), transparent);opacity:.22}
.hero-inner{position:relative;padding:5rem 0}
.hero-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:center}
.hero-slider{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.hero-slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity .5s ease, transform .5s ease}
.hero-slider .slide.is-active{opacity:1;transform:scale(1)}
.hero-slider .slide-prev,.hero-slider .slide-next,.hero-slider .slide-toggle{
  position:absolute;top:50%;transform:translateY(-50%);
  border:0;background:rgba(0,0,0,.35);color:#fff;width:38px;height:38px;border-radius:999px;cursor:pointer;font-size:20px;line-height:1
}
.hero-slider .slide-prev{left:10px}
.hero-slider .slide-next{right:10px}
.hero-slider .slide-toggle{top:auto;bottom:10px;left:10px;width:auto;height:auto;padding:8px 10px;border-radius:12px;font-size:12px}

/* === Tablo & Galeri === */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:.7rem;border-top:1px solid #eee;text-align:left}
.table thead th{background:var(--light)}
.gallery-grid{display:grid;gap:.75rem;margin-top:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-item{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#eef2ff;border:1px solid #e5e7eb}

/* === Footer & WhatsApp === */
.footer{background:var(--navy);color:#fff}
.footer .address{font-feature-settings:"tnum" 1,"lnum" 1}
.float-btn{position:fixed;bottom:20px;right:20px;border-radius:999px;padding:12px 14px;background:#25D366;color:#fff;box-shadow:0 10px 30px rgba(37,211,102,.35);z-index:999}

/* === Anchor offset (sticky header payı) === */
section[id]{scroll-margin-top:96px}
@media (max-width:768px){section[id]{scroll-margin-top:72px}}

/* === OLANAK ROZETLERİ — 5x2, dar kart, şerit TAM ortalı === */
.amenities{
  list-style:none;padding:0;margin:1rem 0 0;
  display:grid;gap:14px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
}
.amenity{
  position:relative;text-align:center;background:#fff;border:1px solid #eee;border-radius:16px;
  padding: var(--amenity-pad-y) 10px 8px;
  box-shadow:0 6px 20px rgba(10,10,20,.04);
}
.amenity::before{
  content:"";position:absolute;left:12px;right:12px;
  height:var(--amenity-stripe);border-radius:8px;background:var(--red);
  top: calc(var(--amenity-pad-y) + (var(--amenity-icon)/2) + 6px - (var(--amenity-stripe)/2));
}
.amenity-icon{
  position:relative;z-index:1;margin:0 auto;
  width:var(--amenity-icon);height:var(--amenity-icon);
  border-radius:999px;background:var(--navy);display:grid;place-items:center;
  border:6px solid #fff;box-shadow:0 6px 18px rgba(13,14,63,.22)
}
.amenity-icon img{
  width:52px;height:52px;object-fit:contain;
  filter:brightness(0) invert(1);
}
.amenity-label{display:block;font-weight:800;margin-top:6px;font-size:14px}

/* === Hakkımızda (yeni görsel + metin bölümü) === */
.about{
  display:grid;gap:1.25rem;grid-template-columns:1fr;
}
.about-media{
  border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#eef2ff;aspect-ratio:4/3
}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1rem}
.stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.stat strong{font-size:22px;display:block}

/* === Responsive === */
@media (min-width:992px){
  .hero-grid{grid-template-columns:1.15fr 1fr}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:1.1fr .9fr}
}
@media (max-width:1200px){ .amenities{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:992px){ .amenities{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:768px){
  .header-top .container{flex-wrap:wrap;gap:.25rem!important;padding:.4rem .8rem!important;font-size:13px}
  .header-top .container>div:last-child{display:none}
  .header .container{height:64px!important;padding:0 12px!important}
  .custom-logo{max-height:40px!important}
  .menu,.nav .menu{display:flex!important;gap:12px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:none;padding:8px 0}
  .menu::-webkit-scrollbar{display:none}
  .menu>li{display:inline-block!important;margin:0}
  .menu>li>a{padding:10px 4px!important}
  #primary-nav{display:none!important}
  #hamburger{display:inline-block!important}
  .float-btn{right:16px;bottom:16px}
  .hero-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .amenities{grid-template-columns:repeat(2,minmax(0,1fr))}
}