:root{
  --bg:#05060a;
  --panel:#111217;
  --gold:#d4af37;
}

body{
  margin:0;
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:#fff;
  direction:rtl;
}

/* =========================
   Header + Layout
   ========================= */
.header{
  padding:34px 18px;
  text-align:center;
  background:rgba(17,18,23,0.9);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header h1{ margin:0 0 10px 0; font-size:30px; }
.header p{ margin:0; opacity:0.85; line-height:1.8; }

.container{
  max-width:1000px;
  margin:auto;
  padding:28px 18px 70px;
}

/* =========================
   Search
   ========================= */
.search{
  display:flex;
  gap:12px;
  margin:18px 0 22px;
  flex-wrap:wrap;
}
.search input{
  flex:1;
  min-width:240px;
  padding:14px 14px;
  border-radius:12px;
  border:none;
  font-family:'Cairo',sans-serif;
}
.search select{
  padding:14px 12px;
  border-radius:12px;
  border:none;
  font-family:'Cairo',sans-serif;
  background:#fff;
  color:#111;
  min-width:150px;
}

/* =========================
   Area Map
   ========================= */
.area-map{
  margin:0 0 16px;
  background:rgba(17,18,23,0.95);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:16px;
}
.area-map h2{ margin:0 0 8px; font-size:24px; }
.area-map p{ margin:0 0 12px; opacity:.92; font-size:16px; line-height:1.9; }

.map-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.map-chip{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 12px;
}
.map-chip input{ accent-color:var(--gold); }

.map-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#1f4a69 0%,#173d5a 50%,#12324a 100%);
}

#istanbulMap{ width:100%; height:auto; display:block; }

.land-mass{ fill:#f2f4f6; stroke:#cad1d8; stroke-width:2; pointer-events:none; }
.coast-line{ stroke:#5f7890; stroke-width:2; fill:none; opacity:.7; pointer-events:none; }

.bosphorus-fill{ fill:#72c2e8; pointer-events:none; }
.marmara-fill{ fill:#67b9de; pointer-events:none; }
.golden-horn-fill{ fill:#79c7ea; pointer-events:none; }

.metro-line{ stroke:#e9558f; stroke-width:5; fill:none; pointer-events:none; }
.tram-line{ stroke:#2dcf96; stroke-width:5; fill:none; pointer-events:none; }

.zone-bubble{
  fill:rgba(212,175,55,.14);
  stroke:rgba(212,175,55,.45);
  stroke-width:2;
  pointer-events:none;
}

/* POI */
.poi-group{ cursor:pointer; }
.poi-core{ fill:#ffcf5a; stroke:#0f1720; stroke-width:2; transition:.2s; }
.poi-ring{ fill:none; stroke:rgba(255,208,99,.45); stroke-width:2; }
.poi-label-bg{ fill:rgba(8,11,17,.82); stroke:rgba(255,255,255,.26); stroke-width:1; rx:8; pointer-events:none; }
.poi-label{ fill:#fff; font-size:15px; font-family:'Cairo',sans-serif; pointer-events:none; font-weight:700; }
.poi-group.is-active .poi-core{ fill:#fff2b7; transform:scale(1.1); transform-origin:center; }
.poi-group.is-active .poi-ring{ stroke:rgba(255,208,99,.95); }
.poi-hit{ fill:transparent; r:18; }

.water-label{ fill:rgba(255,255,255,.92); font-size:24px; font-family:'Cairo',sans-serif; font-weight:700; }
.water-sub{ fill:rgba(255,255,255,.85); font-size:16px; font-family:'Cairo',sans-serif; }

.map-legend{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  opacity:.92;
  margin-top:12px;
}
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-line{ width:22px; height:4px; border-radius:4px; }
.metro-swatch{ background:#e9558f; }
.tram-swatch{ background:#2dcf96; }
.legend-dot{ width:10px; height:10px; border-radius:50%; background:#ffcf5a; display:inline-block; }

.info-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  max-width:420px;
  background:rgba(8,11,17,.92);
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.9;
}
.info-badge b{ color:#ffe08f; }

@media (max-width:900px){
  .poi-label{ font-size:13px; }
}
@media (max-width:768px){
  .area-map{ padding:14px; }
  .area-map p{ font-size:15px; }
  .map-chip{ font-size:12px; }
  .info-badge{ position:static; margin-top:10px; max-width:100%; font-size:13px; }
  .poi-label{ font-size:12px; }
}

/* =========================
   Buttons
   ========================= */
.btn{
  background:var(--gold);
  color:#000;
  padding:14px 18px;
  border-radius:999px;
  font-weight:bold;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.secondary{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
}

/* =========================
   Hotels Grid
   ========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}

.hotel{
  background:rgba(17,18,23,0.92);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:12px;
  line-height:1.8;
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.hotel-thumb{
  width:100%;
  height:170px;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  display:block;
  cursor:zoom-in;
  border:1px solid rgba(255,255,255,0.12);
  transition:transform .35s ease, opacity .3s ease;
  background:#0b0c10;
}

.hotel-meta{ padding:8px 4px 4px; }

.hotel-headline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.hotel b{ display:block; font-size:16px; margin-bottom:2px; line-height:1.5; }
.hotel-ar{ font-size:14px; color:rgba(255,255,255,0.92); }

.hotel-rating{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.2;
  flex:0 0 auto;
}

.rating-label{ font-size:11px; opacity:0.78; }
.rating-stars{
  color:#f5c84b;
  letter-spacing:1px;
  font-size:14px;
  text-shadow:0 1px 6px rgba(212,175,55,.35);
}
.muted{ opacity:0.8; font-size:13px; }

.gallery-btn{
  margin-top:8px;
  width:100%;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:10px;
  padding:10px;
  cursor:pointer;
}

.hotel:hover{
  transform:translateY(-4px);
  border-color:rgba(212,175,55,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.hotel:hover .hotel-thumb{ transform:scale(1.03); }

/* =========================
   Footer Note + Actions
   ========================= */
.footer-note{
  margin-top:22px;
  background:rgba(17,18,23,0.92);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:16px;
  line-height:1.9;
  animation:fadeInUp .5s ease both;
}
.footer-note a{ color:#fff; }

.top-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* =========================
   Lightbox
   ========================= */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(5,6,10,0.9);
  z-index:1200;
  padding:14px;
}
.lightbox.open{ display:flex; }

.lightbox-box{
  width:min(1000px, 100%);
  max-height:92vh;
  background:rgba(14,15,20,0.95);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:16px;
  padding:10px;
}

.lightbox-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:4px 4px 10px;
}

.lightbox-title{ font-size:14px; opacity:0.88; }

.lightbox-close,
.lightbox-nav{
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
  font-size:22px;
}

.lightbox-main{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
}

.lightbox-image{
  width:100%;
  max-height:66vh;
  object-fit:contain;
  display:block;
  background:#0b0c10;
}

.lightbox-prev,
.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.lightbox-prev{ left:8px; }
.lightbox-next{ right:8px; }

.lightbox-strip{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
}

.lightbox-thumb{
  width:62px;
  height:62px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid transparent;
  opacity:.8;
  cursor:pointer;
  flex:0 0 auto;
}

.lightbox-thumb.active{
  border-color:var(--gold);
  opacity:1;
}

/* =========================
   Brand marquee (FIXED - no gaps)
   ========================= */
.brand-marquee{
  margin:0 0 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(17,18,23,.9);
  animation:fadeInUp .5s ease both;

  /* مهم: نخليه LTR حتى ما يخرب على iOS مع RTL */
  direction:ltr;
}

.brand-track{
  display:flex;
  gap:10px;
  width:max-content;
  padding:10px;

  /* ممنوع يلف سطر */
  flex-wrap:nowrap;

  /* الحركة بتاخد مسافة محسوبة من JS */
  animation:brandScroll 34s linear infinite;
  will-change:transform;
}

.brand-marquee:hover .brand-track{
  animation-play-state:paused;
}

.brand-logo-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(165deg, rgba(17,18,23,.92), rgba(11,12,16,.9));
  color:#f1d37d;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;

  /* مهم: كل عنصر ثابت وما ينضغط */
  flex:0 0 auto;
}

.brand-logo-pill img{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.22);
  background:#fff;
  flex:0 0 auto;
}

.brand-logo-pill b{
  font-size:12.5px;
  letter-spacing:.2px;
}

/* JS رح يحط المتغير --marquee-distance */
@keyframes brandScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-1 * var(--marquee-distance, 600px))); }
}
/* =========================
   Subtle motion
   ========================= */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

.area-map,
.hotel{
  animation:fadeInUp .5s ease both;
}