:root{
  --bg:#0b1220;
  --card:#0f1a2e;          /* ✅ opak panel rengi */
  --text:#e7eefc;
  --muted:#9fb2d6;
  --accent:#39d98a;
  --danger:#ff5b5b;
  --border:rgba(255,255,255,.08);
}

/* ===== TEMEL ===== */
*{box-sizing:border-box}

html, body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
}

/* ===== ARKAPLAN (RESİM + NOTE: GRADIENT ARTIK BODY'Yİ EZMEZ) ===== */
body{
  position: relative;

  /* ✅ tek arkaplan tanımı: resim burada */
  background-image: url("/assets/img/arkaplan.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  background-color: var(--bg);
}



/* ===== LINK / CONTAINER ===== */
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:18px}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(11,18,32,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .row{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:14px 18px;max-width:1100px;margin:0 auto
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px}
.brand .title{font-weight:800;letter-spacing:.2px}
.brand .subtitle{font-size:12px;color:var(--muted);margin-top:2px}

/* ===== BUTON ===== */
.hstack{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  text-decoration:none;
}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn.primary{background:rgba(57,217,138,.14);border-color:rgba(57,217,138,.35)}
.btn.danger{background:rgba(255,91,91,.12);border-color:rgba(255,91,91,.35)}

/* ===== GRID ===== */
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:1.2fr .8fr}
@media(max-width:940px){.grid.two{grid-template-columns:1fr}}

/* ===== CARD (✅ OPAK YAPILDI) ===== */
.card{
  background: var(--card);          /* ✅ artık transparan değil */
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.card h2{margin:0 0 10px 0;font-size:18px}
.card h3{margin:0 0 8px 0;font-size:16px}
.muted{color:var(--muted)}

/* ===== FORM ===== */
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  padding:2px 6px;border-radius:8px;font-size:12px
}
input,select,textarea{
  width:100%;
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none
}
textarea{min-height:140px}
label{font-size:13px;color:var(--muted);display:block;margin:10px 0 6px}

/* ===== TABLE ===== */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
th{color:var(--muted);font-weight:600}

/* ===== GALLERY ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
.figure{overflow:hidden;border-radius:16px;border:1px solid var(--border);background:rgba(0,0,0,.12)}
.figure img{width:100%;height:210px;object-fit:cover;display:block}
.figure .cap{padding:10px 12px;font-size:13px;color:var(--muted)}

/* ===== MAP ===== */
.map-wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  overflow:hidden;
  background: #0b1426; /* ✅ opak map alanı */
}
.map-note{margin-top:10px;color:var(--muted);font-size:13px}

svg{width:100%;height:auto;display:block}
svg [data-slug]{transition:opacity .15s ease, transform .15s ease;transform-origin:center}
svg [data-slug]:hover{opacity:.88;transform:scale(1.01)}

/* ===== UI ===== */
hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.small{font-size:12px;color:var(--muted)}
.notice{padding:12px 14px;border-radius:14px;border:1px solid rgba(57,217,138,.35);background:rgba(57,217,138,.10)}
.error{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,91,91,.35);background:rgba(255,91,91,.12)}

/* ===== SVG TIKLAMA ZORLA AKTİF ===== */
#svg-turkiye-haritasi,
#svg-turkiye-haritasi *{
  pointer-events: all !important;
}
#svg-turkiye-haritasi path{
  pointer-events: all !important;
  cursor: pointer !important;
}
#svg-turkiye-haritasi{
  width:100%;
  max-height:520px;
}
/* Mobilde background-attachment: fixed bazı cihazlarda sıkıntı çıkarır */
@media (max-width: 900px){
  body{ background-attachment: scroll; }
}

/* Linkler daha okunaklı olsun (istersen kaldır) */
a{ color: #93c5fd; }
a:hover{ text-decoration: underline; }
/* =========================
   YEŞİL TONLU PANEL DÜZELTMESİ
   (style.css EN ALTINA yapıştır)
   ========================= */

:root{
  /* Card ve panel tonlarını yeşile çek */
  --card:#0b2a24;                    /* koyu su yeşili (opak) */
  --border:rgba(167,243,208,.22);    /* mint border */
  --accent:#34d399;                  /* mint vurgu */
  --muted:#b5e6d6;                   /* daha yeşilimsi açıklama yazısı */
}

/* Card’ları yeşil degrade yap (harita ve il listesi dahil) */
.card{
  background: linear-gradient(180deg, #0f3a31, #0b2a24) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
}

/* Harita iç kutusu da yeşil olsun */
.map-wrap{
  background: rgba(11,42,36,.92) !important; /* opak su yeşili */
  border: 1px solid rgba(167,243,208,.22) !important;
}

/* Butonlar (il listesi) yeşile uyum */
.btn{
  background: rgba(15,58,49,.70) !important;
  border: 1px solid rgba(167,243,208,.20) !important;
}
.btn:hover{
  border-color: rgba(52,211,153,.55) !important;
}

/* Başlıklara ince yeşil şerit */
.card h2, .card h3{
  position: relative;
  padding-left: 12px;
}
.card h2::before, .card h3::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:70%;
  border-radius:999px;
  background: linear-gradient(180deg, #34d399, #2dd4bf);
  box-shadow: 0 0 14px rgba(52,211,153,.25);
}
.brand img{
  height:90px;
  width:auto;
}
.intro-overlay{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  padding: 18px;
}
.intro-overlay.show{ display: grid; }

.intro-box{
  width: min(980px, 96vw);
  background: rgba(10,20,18,.92);
  border: 1px solid rgba(167,243,208,.25);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  position: relative;
}
.intro-box video{
  width: 100%;
  height: auto;
  display: block;
}
.intro-skip{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
/* ===== Harita altı görsel baloncuk slider ===== */
.map-slider{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.map-slider-main{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-slider-main img{
  width: 100%;
  height: 320px;          /* istersen 280/360 yap */
  object-fit: contain;     /* ✅ kırpma yok */
  object-position: center; /* ✅ ortala */
  display: block;
}


.map-slider-bubbles{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.map-slider-bubbles::-webkit-scrollbar{ height: 8px; }
.map-slider-bubbles::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}

.bubble{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

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

.bubble:hover{
  transform: translateY(-1px);
  border-color: rgba(57,217,138,.45);
  box-shadow: 0 0 0 3px rgba(57,217,138,.12);
}

.bubble.active{
  border-color: rgba(57,217,138,.65);
  box-shadow: 0 0 0 4px rgba(57,217,138,.18);
}
.bubble:focus{ outline: none; }
.brand .title{
  line-height: 1.1;
}

.brand > div{
  display:flex;
  flex-direction:column;
  gap:0;          /* 👈 aradaki boşluğu sıfırlar */
}

.brand .subtitle{
  margin-top: 0;
}