/* Varijanta D (15.10.2026): koncept pocetne The Racquet Cluba, preslikan,
   u Sushirritovom brendu (Stefan: „iskopiraj koncept skroz kao reket klub,
   samo fontovi i boje ostaju svaka za svoj brend").
   Pocetna = jedan ekran: jezik gore desno, logo, slogan, dugmad, Instagram,
   gradovi. Lokacije su zasebna strana sa strelicom nazad. Meni nije na sajtu,
   „Poruci" vodi na Wolt. */

body.d { background: var(--coral); color: var(--ink); }

/* Jezik gore desno, kao SR · EN · RU na Racquet Clubu */
.d-lang {
  position: absolute; top: 18px; right: var(--pad); z-index: 3;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
}
.d-lang button {
  font: inherit; letter-spacing: inherit; color: rgba(43, 43, 43, 0.6);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  border-bottom: 1.5px solid transparent;
}
.d-lang button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.d-lang span { color: rgba(43, 43, 43, 0.4); }

/* Strelica nazad gore levo, kao na rezervaciji Racquet Cluba */
.d-back {
  position: absolute; top: 12px; left: calc(var(--pad) - 8px); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--ink); border-radius: 999px;
}
.d-back:hover { text-decoration: none; background: rgba(43, 43, 43, 0.08); }

/* Pocetna */
.d-hero {
  position: relative; min-height: 100dvh; display: grid; place-items: center;
  text-align: center; padding: 72px var(--pad) 48px;
}
.d-hero .logo img { width: min(76vw, 400px); }
/* Slogan pisanim slovom, isti kao u varijanti C, ali sve reci iste velicine
   (Stefan, 15.10.2026: „we nek bude kao ostale, nemoj da je manje"). */
.d-slogan {
  margin-top: 18px; font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-weight: 400; font-size: clamp(22px, 6vw, 28px); line-height: 1.2;
}
.d-actions {
  margin-top: clamp(22px, 4vh, 36px); display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px;
}
.d-actions .btn { min-width: 200px; min-height: 50px; font-size: 15px; }
@media (max-width: 479px) {
  .d-actions { flex-direction: column; align-items: center; }
  .d-actions .btn { width: min(100%, 260px); }
}

/* Izbor lokala ispod „Poruci": otvara se na mestu, bez nove strane */
.d-order { margin-top: 14px; display: none; }
.d-order.open { display: block; }
.d-order p { font-size: 13px; color: rgba(43, 43, 43, 0.75); margin-bottom: 10px; }
.d-order .links { justify-content: center; }
.d-order .btn { background: var(--paper); border-color: var(--paper); }
.d-order .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.d-ig {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(18px, 3vh, 28px);
  font-size: 14px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(43, 43, 43, 0.45);
}
.d-ig:hover { text-decoration-color: var(--ink); }
.d-cities { margin-top: 14px; font-size: 13px; color: rgba(43, 43, 43, 0.75); }

/* Lokacije: raspored stare varijante B (Stefan, 15.10.2026) — bela strana,
   koral logo, po dva lokala u redu (tri na sirokom ekranu), kvadratni crtez,
   ime i adresa, ispod Poruci i Mapa. Mapa se otvara na mestu, preko celog
   reda, odmah ispod reda u kom je lokal. */
body.d.d-light { background: var(--paper); }
.d-light .d-lang button { color: var(--ink-faint); }
.d-light .d-lang button[aria-pressed="true"] { color: var(--ink); }
.d-light .d-lang span { color: var(--ink-faint); }
.d-page { position: relative; min-height: 100dvh; padding: 64px var(--pad) 96px; }
.d-page .logo { display: flex; justify-content: center; }
.d-page .logo img { width: min(64vw, 340px); }
.d-page .kicker { text-align: center; margin-top: 22px; }
/* Ispod logoa slogan istim pisanim slovom kao na pocetnoj (Stefan, 15.10.2026) */
.d-page .d-slogan { text-align: center; margin-top: 14px; }
/* Naslov grada: isto slovo kao red „Beograd · Novi Sad" na vrhu (.kicker) */
.d-page .city-head { text-align: left; margin: 40px 0 14px; font-weight: 400; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; } }
.tile .pic { aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--cream); }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; }
.tile .cap { margin-top: 10px; font-size: 14px; line-height: 1.35; }
.tile .cap b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: 0.02em; font-weight: 400; text-transform: uppercase; }
.tile .cap .dim { display: block; }
.tile .cap .phone { display: block; width: fit-content; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.tile .act { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.tile .act a, .tile .act button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-dim);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.tile .act .primary { color: var(--coral-deep); font-weight: 700; }
.tile .act button[aria-expanded="true"] { color: var(--ink); }
.d-map { grid-column: 1 / -1; }
.d-map iframe { width: 100%; height: 300px; border: 0; border-radius: var(--r); display: block; background: var(--cream); }
@media (min-width: 720px) { .d-map iframe { height: 380px; } }