/* ==========================================================================
   STAGE EVENT COMPLEX — Ortak Stil Dosyası
   Not (PHP dönüşümü için): Bu dosya statik demodaki tüm sayfalarda ortaktır.
   Değişmeyecektir; PHP'ye geçişte aynen kullanılabilir.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:            #0a0a0d;
  --bg-elev-1:     #131318;
  --bg-elev-2:     #1a1a21;
  --bg-elev-3:     #212129;
  --border:        #2a2a34;
  --border-soft:   #1f1f27;

  --text-hi:       #f4f2ec;
  --text-mid:      #b9b7c2;
  --text-low:      #7d7c88;

  --gold:          #dba43b;
  --gold-hi:       #eebb55;
  --gold-dim:      #8a6a2c;

  --green:         #4caf6d;
  --red:           #e0574f;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container: 1400px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-hi);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; margin:0; font-weight:600; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
@media(max-width:720px){ .container{ padding:0 20px; } }

/* ---------- Yardımcı sınıflar ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:12px; letter-spacing:.14em;
  color:var(--gold); text-transform:uppercase;
}
.eyebrow::before{ content:''; width:16px; height:2px; background:var(--gold); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 26px; border-radius:var(--radius-s); border:1px solid transparent;
  transition:all .18s ease; white-space:nowrap;
}
.btn-primary{ background:var(--gold); color:var(--on-gold); font-weight:600; }
.btn-primary:hover{ background:var(--gold-hi); transform:translateY(-1px); }
.btn-secondary{ background:var(--bg-elev-3); color:var(--text-hi); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--gold-dim); }
.btn-ghost{ background:transparent; color:var(--text-hi); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-sm{ padding:9px 16px; font-size:11px; }
.btn-block{ width:100%; }

.badge{
  display:inline-block; padding:5px 12px; border-radius:4px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.badge-gold{ background:rgba(219,164,59,.14); color:var(--gold); border:1px solid rgba(219,164,59,.3); }

/* ---------- Navigasyon ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,13,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.logo{ display:flex; flex-direction:column; line-height:1; }
.logo-main{ font-family:var(--font-display); font-size:22px; letter-spacing:.08em; color:var(--text-hi); }
.logo-sub{ font-size:9px; letter-spacing:.28em; color:var(--gold); margin-top:3px; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:13px; letter-spacing:.03em; color:var(--text-mid); font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s;
}
.nav-links a:hover,.nav-links a.active{ color:var(--gold); border-color:var(--gold); }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; width:38px; height:38px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--bg-elev-2); align-items:center; justify-content:center; }
.crumbs{ font-size:12px; color:var(--text-low); padding:14px 0; }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ margin:0 6px; }
.crumbs .now{ color:var(--text-mid); }

@media(max-width:900px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  margin:24px 0; min-height:480px; display:flex; align-items:flex-end;
  background:
    linear-gradient(0deg, rgba(6,6,8,.92) 10%, rgba(6,6,8,.35) 55%, rgba(6,6,8,.65) 100%),
    radial-gradient(120% 100% at 50% 0%, #232028 0%, #0c0c0f 60%);
}
.hero-stage-lines{ position:absolute; inset:0; opacity:.5; }
.hero-content{ position:relative; padding:56px; max-width:640px; }
.hero-content h1{ font-size:46px; color:var(--text-hi); line-height:1.08; margin-bottom:16px; }
.hero-content p{ color:var(--text-mid); font-size:15px; margin-bottom:28px; max-width:480px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-dots{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.hero-dots span{ width:7px; height:7px; border-radius:50%; background:var(--border); }
.hero-dots span.active{ background:var(--gold); width:22px; border-radius:4px; }
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(20,20,25,.7); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--text-hi);
}
.hero-arrow.prev{ left:20px; } .hero-arrow.next{ right:20px; }
@media(max-width:720px){
  .hero{ min-height:400px; }
  .hero-content{ padding:28px; }
  .hero-content h1{ font-size:30px; }
}

/* ---------- Bölüm başlığı ---------- */
.section{ padding:64px 0; }
.section-head{ text-align:center; margin-bottom:36px; }
.section-head h2{ font-size:28px; margin-top:10px; }
.section-head p{ color:var(--text-mid); margin-top:10px; max-width:520px; margin-inline:auto; }
.section-nav-arrows{ display:flex; gap:8px; justify-content:center; margin-top:18px; }

/* ---------- Sahne kartları ---------- */
.stage-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1100px){ .stage-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .stage-grid{ grid-template-columns:1fr; } }

.stage-card{
  background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:var(--radius-m);
  overflow:hidden; transition:transform .18s ease, border-color .18s ease;
}
.stage-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); }
.stage-thumb{
  height:170px; position:relative; background:linear-gradient(155deg,#26232a,#0f0e12);
  display:flex; align-items:center; justify-content:center;
}
.stage-thumb svg{ opacity:.9; }
.stage-thumb .badge{ position:absolute; top:12px; left:12px; }
.stage-body{ padding:16px 18px 18px; }
.stage-body h3{ font-size:16px; margin-bottom:3px; }
.stage-tag{ font-size:11px; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
.stage-meta{ display:flex; gap:16px; margin:12px 0 14px; font-size:12.5px; color:var(--text-mid); }
.stage-meta span{ display:inline-flex; align-items:center; gap:6px; }
.stage-link{ font-family:var(--font-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:6px; }
.stage-link:hover{ color:var(--gold-hi); }

/* ---------- İstatistikler ---------- */
.stats-bar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius-m); overflow:hidden;
}
.stat{ background:var(--bg-elev-1); padding:26px 20px; display:flex; align-items:center; gap:14px; }
.stat-icon{ width:44px; height:44px; border-radius:50%; background:var(--bg-elev-3); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; }
.stat-num{ font-family:var(--font-display); font-size:22px; color:var(--text-hi); }
.stat-label{ font-size:12px; color:var(--text-mid); text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:800px){ .stats-bar{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Split / tanıtım bölümü ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.split-img{ height:320px; border-radius:var(--radius-l); background:linear-gradient(160deg,#242028,#0c0b0e); border:1px solid var(--border-soft); }
.split h2{ font-size:30px; margin-bottom:16px; }
.split p{ color:var(--text-mid); margin-bottom:24px; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; } .split-img{ order:-1; } }

/* ---------- Footer ---------- */
footer.site-footer{ border-top:1px solid var(--border-soft); padding:48px 0 100px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-grid h4{ font-size:13px; color:var(--text-hi); margin-bottom:14px; }
.footer-grid p, .footer-grid li{ color:var(--text-mid); font-size:13px; margin-bottom:8px; }
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{ text-align:center; color:var(--text-low); font-size:12px; margin-top:36px; padding-top:20px; border-top:1px solid var(--border-soft); }
@media(max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Mobil alt navigasyon (footer nav) ---------- */
.mobile-tabbar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--bg-elev-1); border-top:1px solid var(--border-soft);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.mobile-tabbar ul{ display:flex; justify-content:space-around; }
.mobile-tabbar a{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; color:var(--text-low); }
.mobile-tabbar a.active{ color:var(--gold); }
@media(max-width:720px){ .mobile-tabbar{ display:block; } body{ padding-bottom:66px; } }

/* ---------- Yan panel + liste düzeni (Sahneler sayfası) ---------- */
.layout-2col{ display:grid; grid-template-columns:2.1fr 1fr; gap:28px; align-items:start; }
@media(max-width:960px){ .layout-2col{ grid-template-columns:1fr; } }

.side-card{ background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:20px; }
.side-card h3{ font-size:15px; margin-bottom:16px; }

.mini-stage-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.mini-stage-item:last-child{ border-bottom:0; }
.mini-thumb{ width:64px; height:52px; border-radius:6px; flex-shrink:0; background:linear-gradient(160deg,#26232a,#0f0e12); }
.mini-stage-item h4{ font-size:13px; margin-bottom:2px; }
.mini-stage-item .stage-tag{ font-size:10px; }
.mini-meta{ font-size:11px; color:var(--text-mid); margin-top:4px; display:flex; gap:10px; }

.event-row{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.event-row:last-child{ border-bottom:0; }
.event-date-chip{ width:48px; height:48px; border-radius:8px; background:var(--bg-elev-3); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.event-date-chip .d{ font-family:var(--font-display); font-size:16px; color:var(--gold); line-height:1; }
.event-date-chip .m{ font-size:9px; color:var(--text-mid); text-transform:uppercase; }
.event-row h4{ font-size:13px; margin-bottom:3px; }
.event-row .meta{ font-size:11px; color:var(--text-mid); }

/* ---------- Sekmeler (Tabs) ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border-soft); overflow-x:auto; margin-bottom:28px; }
.tab-btn{
  background:none; border:none; padding:14px 18px; font-family:var(--font-display); font-size:12.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-mid); border-bottom:2px solid transparent; white-space:nowrap;
}
.tab-btn.active{ color:var(--gold); border-color:var(--gold); }
.tab-panel{ display:none; } .tab-panel.active{ display:block; }

.info-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; }
@media(max-width:800px){ .info-grid{ grid-template-columns:1fr; } }
.check-list li{ display:flex; gap:10px; margin-bottom:12px; font-size:14px; color:var(--text-mid); }
.check-list li::before{ content:'✓'; color:var(--gold); font-weight:700; }
.spec-table{ background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:var(--radius-m); overflow:hidden; }
.spec-row{ display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.spec-row:last-child{ border-bottom:0; }
.spec-row span:first-child{ color:var(--text-mid); }
.spec-row span:last-child{ color:var(--text-hi); font-weight:500; }

/* ---------- Takvim ---------- */
.calendar{ background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:20px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-head h4{ font-size:14px; }
.cal-nav{ display:flex; gap:6px; }
.cal-nav button{ width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:var(--bg-elev-2); color:var(--text-mid); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal-grid .dow{ font-size:10px; color:var(--text-low); padding-bottom:6px; text-transform:uppercase; }
.cal-grid .day{ height:34px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:12.5px; color:var(--text-mid); position:relative; cursor:pointer; }
.cal-grid .day.muted{ color:var(--border); cursor:default; }
.cal-grid .day.has-event::after{ content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.cal-grid .day.busy{ background:rgba(224,87,79,.14); color:var(--red); }
.cal-grid .day.selected{ background:var(--gold); color:var(--on-gold); font-weight:700; }
.cal-legend{ display:flex; gap:16px; margin-top:14px; font-size:11px; color:var(--text-mid); flex-wrap:wrap; }
.cal-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.available{ background:var(--border); } .dot.event{ background:var(--gold); } .dot.busy{ background:var(--red); }

/* ---------- Etkinlik kartı ---------- */
.event-card{ display:flex; gap:14px; background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:14px; margin-bottom:14px; }
.event-card-thumb{ width:76px; height:76px; border-radius:8px; flex-shrink:0; background:linear-gradient(160deg,#2b2130,#0f0d12); }
.event-card-body{ flex:1; min-width:0; }
.event-card-body h4{ font-size:14px; margin-bottom:4px; }
.event-card-body .meta{ font-size:11.5px; color:var(--text-mid); margin-bottom:8px; }
.event-card-foot{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; color:var(--text-low); }
.price strong{ color:var(--gold); font-family:var(--font-display); }

/* ---------- Kiralama sihirbazı ---------- */
.wizard-steps{ display:flex; align-items:center; margin-bottom:32px; overflow-x:auto; }
.wizard-step{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wizard-step .num{ width:30px; height:30px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:13px; color:var(--text-mid); }
.wizard-step.active .num{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.wizard-step.done .num{ background:var(--green); border-color:var(--green); color:var(--on-gold); }
.wizard-step span.label{ font-size:12px; color:var(--text-mid); }
.wizard-step.active span.label{ color:var(--text-hi); }
.wizard-line{ width:36px; height:1px; background:var(--border); margin:0 8px; flex-shrink:0; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .form-grid{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:12px; color:var(--text-mid); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.field input,.field select,.field textarea{
  width:100%; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:11px 14px; color:var(--text-hi); font-size:14px;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); }

/* ---------- Galeri ---------- */
.gallery-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.gallery-tabs button{ background:var(--bg-elev-2); border:1px solid var(--border); color:var(--text-mid); padding:7px 14px; border-radius:20px; font-size:12px; }
.gallery-tabs button.active{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gallery-grid .g-item{ aspect-ratio:4/3; border-radius:8px; background:linear-gradient(160deg,#242028,#0c0b0e); }
@media(max-width:600px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Genel kart / panel ---------- */
.panel{ background:var(--bg-elev-1); border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:24px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.panel-head h3{ font-size:15px; }

/* Scrollbar ince */
::-webkit-scrollbar{ height:6px; width:6px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }

/* =====================================================================
   AÇIK TEMA (LIGHT MODE)
   Koyu tema varsayılandır; <html data-tema="light"> ile açık temaya geçilir.
   ===================================================================== */
:root{ --on-gold:#151109; --nav-bg:rgba(10,10,13,.92); --hero-perde:rgba(6,6,8,.92); }

html[data-tema="light"]{
  --bg:            #f4f3f0;
  --bg-elev-1:     #ffffff;
  --bg-elev-2:     #f2f0ec;
  --bg-elev-3:     #e8e5df;
  --border:        #d6d2c9;
  --border-soft:   #e6e3dc;

  --text-hi:       #1b1b20;
  --text-mid:      #5a5865;
  --text-low:      #8b8895;

  --gold:          #a5761a;
  --gold-hi:       #8d6414;
  --gold-dim:      #cbb073;

  --green:         #2e8b52;
  --red:           #c8433b;

  --on-gold:       #ffffff;
  --nav-bg:        rgba(255,255,255,.92);
}

.nav{ background:var(--nav-bg); }

html[data-tema="light"] body{ background:var(--bg); }
html[data-tema="light"] .nav{ border-bottom-color:var(--border); }
html[data-tema="light"] .stage-card,
html[data-tema="light"] .panel,
html[data-tema="light"] .side-card,
html[data-tema="light"] .calendar,
html[data-tema="light"] .event-card,
html[data-tema="light"] .spec-table{ box-shadow:0 1px 3px rgba(0,0,0,.06); }
html[data-tema="light"] .stage-thumb,
html[data-tema="light"] .split-img,
html[data-tema="light"] .g-item,
html[data-tema="light"] .mini-thumb,
html[data-tema="light"] .event-card-thumb{ background:linear-gradient(160deg,#ded9d0,#c5bfb4); }
html[data-tema="light"] .logo-main{ color:var(--text-hi); }

/* Hero her iki temada da koyu kalır (görsel üzerine metin okunabilirliği için) */
html[data-tema="light"] .hero{ border:1px solid var(--border); }
html[data-tema="light"] .hero-content h1{ color:#f4f2ec; }
html[data-tema="light"] .hero-content p{ color:#cfcdd6; }

/* Tema düğmesi */
.tema-dugmesi{
  width:38px; height:38px; border-radius:var(--radius-s);
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); font-size:15px; transition:all .18s ease;
}
.tema-dugmesi:hover{ border-color:var(--gold); transform:translateY(-1px); }
.tema-ikon-gunes{ display:none; }
html[data-tema="light"] .tema-ikon-ay{ display:none; }
html[data-tema="light"] .tema-ikon-gunes{ display:inline; }


/* =====================================================================
   HAREKET / ANİMASYONLAR (site)
   ===================================================================== */

/* Sayfa açılışı
   NOT: Burada transform KULLANILMAZ. Transform'lu bir eleman, içindeki
   position:fixed öğeler için yeni bir konumlandırma ve yığılma bağlamı
   oluşturur. Sözleşme açılır penceresi <main> içinde olduğundan,
   transform'lu animasyon pencereyi menünün altında bırakıyordu. */
main{ animation:sayfaAcOpak .35s ease both; }
@keyframes sayfaAcOpak{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sayfaAc{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* NOT: Belirme animasyonları artık tamamen CSS ile yapılıyor (aşağıdaki
   "KAYDIRMA İLE BELİRME" bölümü). Bu sınıflar geriye dönük uyumluluk için
   duruyor ama içeriği gizlemiyor — JS yüklenmese bile her şey görünür. */
.beliren{ opacity:1; transform:none; }
.beliren.gorunur{ opacity:1; transform:none; }

/* Kart ızgaralarında sıralı gecikme */
.stage-grid > *:nth-child(1){ transition-delay:.00s; }
.stage-grid > *:nth-child(2){ transition-delay:.08s; }
.stage-grid > *:nth-child(3){ transition-delay:.16s; }
.stage-grid > *:nth-child(4){ transition-delay:.24s; }
.gallery-grid > *:nth-child(n){ transition-delay:.03s; }

/* Butonlar — kalkma + tıklama tepkisi + parlama */
.btn{ position:relative; overflow:hidden; transition:all .2s cubic-bezier(.22,1,.36,1); }
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:scale(.97); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(219,164,59,.3); }
.btn-secondary:hover, .btn-ghost:hover{ transform:translateY(-2px); }

/* Kartlar */
.stage-card{ transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease; }
.stage-card:hover{ transform:translateY(-6px); box-shadow:0 14px 34px rgba(0,0,0,.34); }
html[data-tema="light"] .stage-card:hover{ box-shadow:0 14px 30px rgba(0,0,0,.12); }
.stage-card .stage-thumb svg{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
.stage-card:hover .stage-thumb svg{ transform:scale(1.12); }
.stage-link{ transition:gap .2s ease, color .2s ease; }
.stage-card:hover .stage-link{ gap:11px; }

.event-card{ transition:transform .2s ease, border-color .2s ease; }
.event-card:hover{ transform:translateX(3px); border-color:var(--gold-dim); }

.g-item{ transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.g-item:hover{ transform:scale(1.03); box-shadow:0 10px 26px rgba(0,0,0,.3); }

.stat{ transition:background .2s ease; }
.stat:hover{ background:var(--bg-elev-2); }
.stat-icon{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.stat:hover .stat-icon{ transform:scale(1.1) rotate(-6deg); }

/* Menü bağlantıları — alttan çizgi büyümesi */
.nav-links a{ position:relative; border-bottom:2px solid transparent; }
.nav-links a::before{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:center;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::before, .nav-links a.active::before{ transform:scaleX(1); }
.nav-links a:hover, .nav-links a.active{ border-color:transparent; }

/* Hero slayt geçişi */
.hero-content[data-slide]{ animation:slaytAc .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes slaytAc{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero{ transition:background-image .5s ease; }
.hero-dots span{ transition:width .3s cubic-bezier(.22,1,.36,1), background .3s ease; }
.hero-arrow{ transition:all .2s ease; }
.hero-arrow:hover{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); transform:translateY(-50%) scale(1.08); }

/* Takvim günleri */
.cal-grid .day{ transition:background .18s ease, transform .18s ease, color .18s ease; }
.cal-grid .day:not(.muted):hover{ background:var(--bg-elev-3); transform:scale(1.08); }
.cal-grid .day.etkinlikli{ cursor:pointer; font-weight:600; color:var(--gold); }
.cal-grid .day.etkinlikli:hover{ background:var(--gold); color:var(--on-gold); }

/* Form alanları */
.field input, .field select, .field textarea{ transition:border-color .2s ease, box-shadow .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ box-shadow:0 0 0 3px rgba(219,164,59,.14); }

/* Sekmeler */
.tab-btn{ transition:color .2s ease, border-color .2s ease; }
.tab-panel.active{ animation:sayfaAc .35s cubic-bezier(.22,1,.36,1) both; }

/* Sihirbaz adımları */
.wizard-step .num{ transition:all .3s cubic-bezier(.22,1,.36,1); }
.wizard-panel{ animation:sayfaAc .35s cubic-bezier(.22,1,.36,1) both; }

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .beliren{ opacity:1; transform:none; }
}

/* Takvimden gelindiğinde etkinlik kartını vurgula */
.event-card.vurgulu{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(219,164,59,.28);
  animation:vurgula 1.2s ease;
}
@keyframes vurgula{
  0%,100%{ box-shadow:0 0 0 3px rgba(219,164,59,.28); }
  50%{ box-shadow:0 0 0 8px rgba(219,164,59,.1); }
}

/* =====================================================================
   TEMA DÜĞMESİ (sadeleştirilmiş — tek ikon, JS ile değişir)
   ===================================================================== */
.nav-actions .tema-dugmesi{
  width:38px; height:38px; padding:0; border-radius:var(--radius-s);
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-mid); font-size:16px; line-height:1; cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.nav-actions .tema-dugmesi:hover{ border-color:var(--gold); transform:translateY(-1px); }
.nav-actions .tema-dugmesi .tema-etiket{ display:none; }
.tema-mobil{ display:none; }

/* Mobilde tema seçeneği hamburger menüsünün içinde görünür */
@media(max-width:900px){
  .nav-actions .tema-dugmesi:not(.tema-mobil){ display:none; }
  .tema-mobil{
    display:flex !important; align-items:center; gap:10px;
    width:100%; padding:10px 0; background:none; border:none;
    color:var(--text-mid); font-size:13px; font-weight:500; cursor:pointer;
    border-top:1px solid var(--border-soft); margin-top:6px;
  }
  .tema-mobil .tema-ikon{ font-size:16px; }
  .tema-mobil .tema-etiket{ display:inline !important; letter-spacing:.03em; }
  .tema-mobil:hover{ color:var(--gold); }
}


/* =====================================================================
   HERO SLIDER — çapraz geçiş (crossfade)
   Slaytlar aynı ızgara hücresinde üst üste durur; sadece opaklık değişir.
   ===================================================================== */
.hero{ display:grid; align-items:end; }

/* Slaytlar aynı ızgara hücresinde üst üste durur.
   ÖNEMLİ: Varsayılan olarak GÖRÜNÜRDÜRLER. JavaScript yüklenmese veya
   eski sürümde olsa bile hero metni asla kaybolmaz. */
.hero-content[data-slide]{
  grid-area:1 / 1;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1);
}

/* NOT: Slayt gizleme tamamen "display" ile yapılır (JS bunu yapar).
   CSS hiçbir slaytı kendi başına gizlemez — böylece JS eski sürümde olsa
   bile hero metni asla kaybolmaz. Yumuşak geçiş, display:none → block
   olduğunda animasyonun yeniden çalışmasıyla sağlanır. */
/* Slayt içindeki öğeler sırayla gelsin */
.hero-content[data-slide].aktif h1{ animation:slaytOge .7s cubic-bezier(.22,1,.36,1) .05s both; }
.hero-content[data-slide].aktif p{ animation:slaytOge .7s cubic-bezier(.22,1,.36,1) .16s both; }
.hero-content[data-slide].aktif .hero-cta{ animation:slaytOge .7s cubic-bezier(.22,1,.36,1) .27s both; }
@keyframes slaytOge{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* Arka plan görseli geçişi */
.hero{ transition:background-image .7s ease, background-color .7s ease; }


/* =====================================================================
   FORM HATA GÖSTERİMİ
   ===================================================================== */
.field.hatali input,
.field.hatali select,
.field.hatali textarea{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(224,87,79,.14) !important;
}
.alan-hata{
  display:block; font-size:11.5px; color:var(--red); margin-top:5px;
  animation:hataAc .25s ease both;
}
@keyframes hataAc{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.form-uyari{
  padding:13px 16px; border-radius:8px; font-size:13px; margin-bottom:18px;
  background:rgba(224,87,79,.12); border:1px solid rgba(224,87,79,.35); color:var(--red);
  animation:hataAc .3s ease both;
}
.sarsil{ animation:sarsil .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes sarsil{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}


/* =====================================================================
   ==  SOFİSTİKE HAREKET SİSTEMİ — %100 CSS, JavaScript GEREKTİRMEZ  ==
   =====================================================================
   Bu bölüm sitenin tüm animasyonlarını yönetir. JS yüklenmese bile
   çalışır; JS kapalıysa da içerik asla gizli kalmaz.
   ===================================================================== */

/* Yumuşatma eğrileri */
:root{
  --egri:      cubic-bezier(.22, 1, .36, 1);     /* yumuşak çıkış */
  --egri-yay:  cubic-bezier(.34, 1.56, .64, 1);  /* hafif yaylanma */
  --sure:      .55s;
}

/* ---------------------------------------------------------------------
   1) SAYFA AÇILIŞI — üstten aşağı sıralı giriş
   --------------------------------------------------------------------- */
@keyframes acil{ from{ opacity:0; } to{ opacity:1; } }
@keyframes yukselAc{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes yukselAzAc{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes soldanAc{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:none; } }
@keyframes buyuAc{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }

body{ animation:acil .35s ease both; }

.nav{ animation:yukselAzAc .5s var(--egri) both; }
.crumbs{ animation:soldanAc .5s var(--egri) .05s both; }
/* Üst seviye kapsayıcılarda transform KULLANILMAZ — içlerindeki
   position:fixed açılır pencereleri hapsetmemesi için yalnızca opaklık. */
main > .container,
main > section:first-child{ animation:acil .5s ease .05s both; }

/* Bölüm başlıkları — etiket, başlık, açıklama sırayla */
.section-head .eyebrow{ animation:soldanAc .55s var(--egri) both; }
.section-head h2{ animation:yukselAc .6s var(--egri) .08s both; }
.section-head p{ animation:yukselAc .6s var(--egri) .16s both; }

/* ---------------------------------------------------------------------
   2) KAYDIRMA İLE BELİRME
   Modern tarayıcılarda (Chrome/Edge 115+) kaydırma bağlantılı animasyon
   kullanılır. Desteklemeyen tarayıcılarda öğeler sıralı gecikmeyle
   sayfa açılışında belirir — her iki durumda da içerik görünür kalır.
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  .stage-card,
  .stats-bar,
  .split > *,
  .panel,
  .side-card,
  .calendar,
  .event-card,
  .gallery-grid .g-item,
  .spec-table,
  .tabs-wrap,
  .stage-grid > *{
    animation:yukselAc .8s var(--egri) both;
    animation-timeline:view();
    animation-range:entry 0% entry 42%;
  }
  /* Hero içindekiler kendi animasyonunu kullanır */
  .hero .stage-card{ animation-timeline:auto; }
}

@supports not (animation-timeline: view()){
  .stage-card,
  .stats-bar,
  .split > *,
  .panel,
  .side-card,
  .calendar,
  .event-card,
  .spec-table{
    animation:yukselAc .65s var(--egri) both;
  }
  .stage-grid > *:nth-child(1){ animation-delay:.10s; }
  .stage-grid > *:nth-child(2){ animation-delay:.18s; }
  .stage-grid > *:nth-child(3){ animation-delay:.26s; }
  .stage-grid > *:nth-child(4){ animation-delay:.34s; }
  .event-card:nth-child(1){ animation-delay:.10s; }
  .event-card:nth-child(2){ animation-delay:.18s; }
  .event-card:nth-child(3){ animation-delay:.26s; }
  .stats-bar{ animation-delay:.14s; }
}

/* Kart ızgaralarında sıralı gecikme (her iki durumda da) */
.stage-grid > *:nth-child(1){ --sira:0; }
.stage-grid > *:nth-child(2){ --sira:1; }
.stage-grid > *:nth-child(3){ --sira:2; }
.stage-grid > *:nth-child(4){ --sira:3; }

/* İstatistik kutuları tek tek */
.stats-bar .stat{ animation:yukselAzAc .55s var(--egri) both; }
.stats-bar .stat:nth-child(1){ animation-delay:.18s; }
.stats-bar .stat:nth-child(2){ animation-delay:.26s; }
.stats-bar .stat:nth-child(3){ animation-delay:.34s; }
.stats-bar .stat:nth-child(4){ animation-delay:.42s; }

/* Galeri kareleri dalga halinde */
.gallery-grid .g-item{ animation:buyuAc .5s var(--egri) both; }
.gallery-grid .g-item:nth-child(1){ animation-delay:.05s; }
.gallery-grid .g-item:nth-child(2){ animation-delay:.10s; }
.gallery-grid .g-item:nth-child(3){ animation-delay:.15s; }
.gallery-grid .g-item:nth-child(4){ animation-delay:.20s; }
.gallery-grid .g-item:nth-child(5){ animation-delay:.25s; }
.gallery-grid .g-item:nth-child(6){ animation-delay:.30s; }
.gallery-grid .g-item:nth-child(7){ animation-delay:.35s; }
.gallery-grid .g-item:nth-child(8){ animation-delay:.40s; }
.gallery-grid .g-item:nth-child(9){ animation-delay:.45s; }

/* ---------------------------------------------------------------------
   3) HERO SLIDER — JS display değiştirse bile yumuşak geçiş
   Bir öğe display:none → block olduğunda CSS animasyonu yeniden çalışır.
   Bu sayede eski JS ile bile slaytlar yumuşak açılır.
   --------------------------------------------------------------------- */
.hero-content[data-slide]{ animation:slaytGir .85s var(--egri) backwards; }
@keyframes slaytGir{
  from{ opacity:0; transform:translateY(20px) scale(.995); }
  to{ opacity:1; transform:none; }
}

/* Slayt içeriği kademeli gelir */
.hero-content[data-slide] h1        { animation:yukselAc .8s var(--egri) .10s backwards; }
.hero-content[data-slide] p         { animation:yukselAc .8s var(--egri) .22s backwards; }
.hero-content[data-slide] .hero-cta { animation:yukselAc .8s var(--egri) .34s backwards; }

/* Başlık satırlarına ince bir vurgu */
.hero-content h1{ letter-spacing:.02em; }

/* Hero üzerinde yavaşça hareket eden ışık hüzmesi */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 45% at 50% 0%, rgba(219,164,59,.10), transparent 70%);
  animation:isikHuzmesi 9s ease-in-out infinite alternate;
}
/* Slayt içeriği ışık katmanının üstünde kalsın */
.hero-content[data-slide]{ position:relative; z-index:1; }
.hero-arrow, .hero-dots{ z-index:2; }
@keyframes isikHuzmesi{
  from{ opacity:.5; transform:translateX(-4%); }
  to{ opacity:1; transform:translateX(4%); }
}

/* Slider okları ve noktaları */
.hero-arrow{ opacity:0; animation:acil .6s ease .7s forwards; }
.hero:hover .hero-arrow{ opacity:1; }
.hero-dots{ animation:acil .6s ease .8s both; }
.hero-dots span{ transition:width .4s var(--egri-yay), background .3s ease; }

/* ---------------------------------------------------------------------
   4) BUTONLAR — kalkma, parlama, tıklama tepkisi
   --------------------------------------------------------------------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .22s var(--egri-yay), box-shadow .22s var(--egri),
             background .2s ease, border-color .2s ease, color .2s ease;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.28) 48%, transparent 72%);
  transform:translateX(-130%);
  transition:transform .75s var(--egri);
}
.btn:hover::after{ transform:translateX(130%); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.975); transition-duration:.08s; }
.btn-primary:hover{ box-shadow:0 8px 22px -6px rgba(219,164,59,.55); }
.btn-secondary:hover, .btn-ghost:hover{ box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
html[data-tema="light"] .btn-secondary:hover,
html[data-tema="light"] .btn-ghost:hover{ box-shadow:0 8px 18px -8px rgba(0,0,0,.18); }

/* Ok içeren bağlantılar */
.stage-link{ transition:gap .25s var(--egri-yay), color .2s ease; }
.stage-card:hover .stage-link{ gap:12px; color:var(--gold-hi); }

/* ---------------------------------------------------------------------
   5) KARTLAR — kalkma, iç görsel yakınlaşma, kenar parlaması
   --------------------------------------------------------------------- */
.stage-card{
  transition:transform .35s var(--egri), border-color .3s ease, box-shadow .35s var(--egri);
  will-change:transform;
}
.stage-card:hover{
  transform:translateY(-7px);
  border-color:var(--gold-dim);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
}
html[data-tema="light"] .stage-card:hover{ box-shadow:0 18px 36px -16px rgba(0,0,0,.22); }

.stage-thumb{ overflow:hidden; }
.stage-thumb svg,
.stage-card .stage-thumb{ transition:transform .55s var(--egri); }
.stage-card:hover .stage-thumb svg{ transform:scale(1.14) rotate(-2deg); }

/* Rozet hafifçe kayar */
.stage-card .badge{ transition:transform .35s var(--egri), background .3s ease; }
.stage-card:hover .badge{ transform:translateY(-2px); }

.event-card{ transition:transform .28s var(--egri), border-color .25s ease, box-shadow .28s ease; }
.event-card:hover{ transform:translateX(4px); border-color:var(--gold-dim); box-shadow:-3px 0 0 0 var(--gold); }

.panel, .side-card{ transition:border-color .3s ease; }

.g-item{ transition:transform .45s var(--egri), box-shadow .35s ease, filter .35s ease; }
.g-item:hover{ transform:scale(1.04); box-shadow:0 14px 32px -10px rgba(0,0,0,.55); filter:brightness(1.06); }

/* İstatistik ikonları */
.stat{ transition:background .25s ease; }
.stat:hover{ background:var(--bg-elev-2); }
.stat-icon{ transition:transform .45s var(--egri-yay), background .3s ease; }
.stat:hover .stat-icon{ transform:scale(1.12) rotate(-8deg); background:rgba(219,164,59,.16); }
.stat-num{ transition:color .25s ease; }
.stat:hover .stat-num{ color:var(--gold); }

/* ---------------------------------------------------------------------
   6) MENÜ — ortadan büyüyen alt çizgi
   --------------------------------------------------------------------- */
.nav-links a{ position:relative; border-bottom:2px solid transparent !important; }
.nav-links a::before{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--egri);
}
.nav-links a:hover::before,
.nav-links a.active::before{ transform:scaleX(1); }
.nav-links a{ transition:color .25s ease; }

.logo{ transition:transform .3s var(--egri); }
.logo:hover{ transform:translateY(-1px); }

/* Footer bağlantıları */
.footer-grid a{ transition:color .22s ease, padding-left .22s var(--egri); display:inline-block; }
.footer-grid a:hover{ color:var(--gold); padding-left:4px; }

/* ---------------------------------------------------------------------
   7) FORMLAR — odaklanma halkası ve etiket vurgusu
   --------------------------------------------------------------------- */
.field input, .field select, .field textarea{
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(219,164,59,.16);
  background:var(--bg-elev-3);
}
.field label{ transition:color .25s ease; }
.field:focus-within label{ color:var(--gold); }

/* Sihirbaz adımları */
.wizard-step .num{ transition:all .4s var(--egri-yay); }
.wizard-step.active .num{ transform:scale(1.12); box-shadow:0 0 0 4px rgba(219,164,59,.18); }
.wizard-panel{ animation:yukselAc .5s var(--egri) both; }

/* Sekmeler */
.tab-btn{ transition:color .25s ease, border-color .25s ease; }
.tab-panel.active{ animation:yukselAzAc .45s var(--egri) both; }

/* Takvim */
.cal-grid .day{ transition:background .2s ease, transform .2s var(--egri-yay), color .2s ease; }
.cal-grid .day:not(.muted):hover{ background:var(--bg-elev-3); transform:scale(1.12); }
.cal-grid .day.etkinlikli{ cursor:pointer; font-weight:600; color:var(--gold); }
.cal-grid .day.etkinlikli:hover{ background:var(--gold); color:var(--on-gold); transform:scale(1.15); }
.cal-grid .day.selected{ animation:secildi .35s var(--egri-yay) both; }
@keyframes secildi{ from{ transform:scale(.85); } to{ transform:scale(1); } }

/* ---------------------------------------------------------------------
   8) İNCE DOKUNUŞLAR
   --------------------------------------------------------------------- */
/* Bölüm başlığı etiketi çizgisi genişler */
.eyebrow::before{ transition:width .4s var(--egri); }
.section-head:hover .eyebrow::before{ width:28px; }

/* Rozet ve durum etiketleri */
.badge{ transition:transform .25s var(--egri-yay); }

/* Bağlantılara yumuşak odak halkası (klavye erişilebilirliği) */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:3px;
}

/* Yumuşak kaydırma */
html{ scroll-behavior:smooth; }

/* Seçim rengi */
::selection{ background:rgba(219,164,59,.28); color:var(--text-hi); }

/* ---------------------------------------------------------------------
   9) ERİŞİLEBİLİRLİK — "hareketi azalt" tercihi
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero::after{ animation:none; }
  .hero-arrow{ opacity:1; }
}


/* ---------------------------------------------------------------------
   YAZDIRMA — animasyonlar yüzünden hiçbir içerik gizli kalmasın
   --------------------------------------------------------------------- */
@media print{
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .nav, .mobile-tabbar, .hero-arrow, .hero-dots{ display:none !important; }
}


/* ---------------------------------------------------------------------
   HERO GÜVENLİK AĞI
   Slayt gizleme yalnızca "display" ile yapılır. Aşağıdaki kural, herhangi
   bir nedenle (eski JS, farklı klasör, önbellek) animasyon çalışmazsa
   metinlerin görünür kalmasını garanti eder.
   --------------------------------------------------------------------- */
.hero-content[data-slide] h1,
.hero-content[data-slide] p,
.hero-content[data-slide] .hero-cta{
  animation-fill-mode:backwards;
}

/* =====================================================================
   SEÇİM KUTULARI (kiralama sihirbazı — ekipman ve ek hizmetler)
   ===================================================================== */
.secim-listesi{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px;
}
.secim-kutu{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border:1px solid var(--border); border-radius:var(--radius-m);
  background:var(--bg-elev-2); cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .18s var(--egri-yay);
}
.secim-kutu:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
.secim-kutu.secili{
  border-color:var(--gold); background:rgba(219,164,59,.08);
  box-shadow:inset 0 0 0 1px rgba(219,164,59,.25);
}
.secim-kutu input[type=checkbox]{
  width:18px; height:18px; flex-shrink:0; margin:0; cursor:pointer;
  accent-color:var(--gold);
}
.secim-govde{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.secim-ad{ font-size:13.5px; font-weight:600; color:var(--text-hi); line-height:1.35; }
.secim-alt{
  font-size:11.5px; color:var(--text-low); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.secim-fiyat{
  flex-shrink:0; text-align:right; font-size:13px; font-weight:600;
  color:var(--gold); font-family:var(--font-display); letter-spacing:.02em;
}
.secim-kutu.secili .secim-fiyat{ color:var(--gold-hi); }

@media(max-width:600px){
  .secim-listesi{ grid-template-columns:1fr; }
}

/* =====================================================================
   SLAYT GÖRSELLERİ
   Görsel doğrudan slaytın kendi arka planına yazılır (JavaScript gerekmez).
   Slayt, ızgara hücresini tamamen kaplar ve metni alta yaslar.
   ===================================================================== */
.hero-content[data-slide]{
  align-self:stretch;              /* hücreyi dikeyde tamamen kapla */
  justify-self:stretch;            /* yatayda da tamamen kapla */
  width:100%;
  max-width:none;                  /* görsel tüm genişliği kaplasın */
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--radius-l);
}

/* Metinler yine dar bir sütunda kalsın (okunabilirlik) */
.hero-content[data-slide] > h1,
.hero-content[data-slide] > p{ max-width:640px; }

/* Görseli olan slaytta metin okunabilirliği için ek koyu perde */
.hero-content.gorselli{ background-color:#0c0b0e; }

/* Görselli slaytta yazılar her temada açık renk kalsın */
.hero-content.gorselli h1{ color:#f6f4ee; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.hero-content.gorselli p{ color:#d8d5dd; text-shadow:0 1px 12px rgba(0,0,0,.5); }
html[data-tema="light"] .hero-content.gorselli h1{ color:#f6f4ee; }
html[data-tema="light"] .hero-content.gorselli p{ color:#d8d5dd; }

/* Görsel yavaşça yaklaşsın — sinematik his */
.hero-content.gorselli{ animation:slaytGir .85s var(--egri) backwards, gorselYaklas 14s ease-out both; }
@keyframes gorselYaklas{
  from{ background-size:104% auto; }
  to{ background-size:118% auto; }
}

/* Mobilde görsel dikey kesileceği için merkezi koru */
@media(max-width:720px){
  .hero-content[data-slide]{ background-position:center center; }
  .hero-content.gorselli{ animation:slaytGir .85s var(--egri) backwards; }
}

@media (prefers-reduced-motion: reduce){
  .hero-content.gorselli{ animation:none; background-size:cover; }
}

/* =====================================================================
   SLAYT İÇERİK HİZASI — GÜVENCE
   İçeriğin slaytın ALT kısmında durmasını garanti eder.
   Yalnızca justify-content'e güvenmez: ilk öğeye "margin-top:auto"
   verilerek içerik aşağı itilir. Böylece CSS'in bir kısmı uygulanmasa
   veya tarayıcı eski olsa bile yazılar aşağıda kalır.
   ===================================================================== */
/* Slayt yerleşimi: her zaman flex sütun, içerik altta.
   Gizleme "display" ile DEĞİL, ".aktif" sınıfıyla yapılır — böylece
   display:flex bozulmaz ve yazılar hep altta kalır. */
.hero .hero-content[data-slide]{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero .hero-content[data-slide] > *:first-child{
  margin-top:auto;   /* üstteki boşluğu doldurur, içeriği aşağı yaslar */
}

/* Aktif olmayan slaytlar gizlenir */
.hero .hero-content[data-slide]:not(.aktif){ display:none; }

/* Güvenlik ağı: hiçbir slaytta .aktif yoksa (JS çalışmadıysa) ilk slayt görünür */
.hero:not(:has(.hero-content.aktif)) .hero-content[data-slide]:first-of-type{ display:flex; }

/* Nokta göstergeleri metinle çakışmasın */
.hero{ padding-bottom:6px; }
.hero-dots{ bottom:16px; }

/* =====================================================================
   HARİTA (iletişim sayfası)
   ===================================================================== */
.harita-kutu{
  margin-top:16px; border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--border-soft); background:var(--bg-elev-2);
  line-height:0;
}
.harita-kutu iframe{
  width:100%; height:260px; border:0; display:block;
  filter:grayscale(.25) contrast(1.05);
  transition:filter .35s ease;
}
.harita-kutu:hover iframe{ filter:none; }
html[data-tema="light"] .harita-kutu iframe{ filter:none; }
@media(max-width:600px){ .harita-kutu iframe{ height:220px; } }

/* Footer sosyal medya bağlantıları */
.footer-sosyal{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.footer-sosyal a{
  width:36px; height:36px; border-radius:9px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:all .2s var(--egri-yay);
}
.footer-sosyal a:hover{
  border-color:var(--gold); background:rgba(219,164,59,.12);
  transform:translateY(-2px);
}

/* =====================================================================
   SÖZLEŞME METNİ (kiralama 4. adım ve /sozlesme sayfası)
   ===================================================================== */
.sozlesme-kutu{
  max-height:320px; overflow-y:auto;
  background:var(--bg-elev-2); border:1px solid var(--border);
  border-radius:var(--radius-m); padding:20px 22px;
  -webkit-overflow-scrolling:touch;
}
.sozlesme-baslik{
  font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  color:var(--gold); text-align:center; padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--border-soft);
}
.sozlesme-madde{ margin-bottom:16px; }
.sozlesme-madde:last-child{ margin-bottom:0; }
.sozlesme-no{
  display:inline-block; font-family:var(--font-display); font-size:11.5px;
  letter-spacing:.07em; color:var(--gold); margin-bottom:5px;
}
.sozlesme-madde p{
  font-size:13.5px; line-height:1.85; color:var(--text-mid); margin:0;
  text-align:justify;
}
.panel > .sozlesme-madde p{ font-size:14px; }

/* Onay satırı — dikkat çekici ve tıklaması kolay */
.sozlesme-onay-satiri{
  display:flex !important; align-items:flex-start; gap:11px;
  text-transform:none !important; cursor:pointer;
  padding:14px 16px; border-radius:var(--radius-m);
  background:rgba(219,164,59,.07); border:1px solid rgba(219,164,59,.28);
  font-size:13.5px; color:var(--text-hi); line-height:1.6;
  transition:border-color .2s ease, background .2s ease;
}
.sozlesme-onay-satiri:hover{ border-color:var(--gold); background:rgba(219,164,59,.12); }
.sozlesme-onay-satiri input[type=checkbox]{
  width:19px !important; height:19px; margin:1px 0 0; flex-shrink:0;
  accent-color:var(--gold); cursor:pointer;
}
.field.hatali .sozlesme-onay-satiri{ border-color:var(--red); background:rgba(224,87,79,.08); }

@media(max-width:600px){
  .sozlesme-kutu{ max-height:260px; padding:16px; }
  .sozlesme-madde p{ font-size:13px; text-align:left; }
}

/* =====================================================================
   SİTE AÇILIR PENCERESİ (sözleşme vb.)
   ===================================================================== */
.site-modal-overlay{
  display:none; position:fixed; inset:0; z-index:1200;
  background:rgba(6,6,8,.76); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:24px 20px;
}
.site-modal-overlay.acik{ display:flex; animation:acil .2s ease both; }
.site-modal{
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:var(--radius-l); width:100%; max-width:720px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:yukselAc .3s var(--egri) both;
}
.site-modal-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 24px; border-bottom:1px solid var(--border-soft);
}
.site-modal-head h3{ font-size:14px; letter-spacing:.04em; color:var(--gold); line-height:1.5; }
.site-modal-kapat{
  width:34px; height:34px; flex-shrink:0; border-radius:9px;
  background:var(--bg-elev-2); border:1px solid var(--border); color:var(--text-mid); font-size:14px;
}
.site-modal-kapat:hover{ color:var(--text-hi); border-color:var(--gold-dim); }
.site-modal-govde{
  flex:1 1 auto;
  min-height:0;   /* ZORUNLU: flex öğesinin varsayılan min-height:auto değeri
                     içeriğin kutuyu şişirmesine ve max-height'in çalışmamasına
                     yol açar. 0 verilmezse uzun metinde modal ekranı taşar. */
  overflow-y:auto; padding:24px; -webkit-overflow-scrolling:touch;
}
.site-modal-alt{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 24px; border-top:1px solid var(--border-soft); flex-wrap:wrap;
}

/* Onay satırındaki sözleşme bağlantısı */
.sozlesme-link{
  color:var(--gold); text-decoration:underline; text-underline-offset:3px;
  font-weight:600; transition:color .2s ease;
}
.sozlesme-link:hover{ color:var(--gold-hi); }

@media(max-width:600px){
  .site-modal{ max-height:calc(100vh - 24px); }
  .site-modal-govde{ padding:18px; }
  .site-modal-alt{ padding:14px 18px; }
  .site-modal-alt .btn{ flex:1 1 auto; justify-content:center; }
}