/* The bar on top of both sites, the same on each: the foundation's logo and the site's name, the page's own
   links, and a menu button. Kept here; the foundation's site uses this very file (sites/vakif links to it). */
.asr-bar {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-top: 1px solid #e8e1de; border-bottom: 1px solid #e8e1de;
}
.asr-bar-inner {
  position: relative; display: flex; align-items: center; gap: 24px; height: 58px;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; box-sizing: border-box;
}
@media (min-width: 768px) { .asr-bar-inner { padding: 0 28px; } }
.asr-logo { flex-shrink: 0; margin-right: -4px; }
.asr-logo img { display: block; width: 38px; height: 38px; border-radius: 50%; }
.asr-brand {
  min-width: 0; font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 21px;
  line-height: 1.15; letter-spacing: .02em; color: #1e1810; text-decoration: none;
}
.asr-brand:hover { color: #1e1810; }
.asr-brand b { color: #862c20; font-weight: 700; }
.asr-brand-line { display: block; }
@media (min-width: 901px) { .asr-brand { flex-shrink: 0; margin-right: 20px; } }

.asr-menu-btn {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 10px;
  border: 0; border-radius: 4px; background: #4f1b17; color: #fff; cursor: pointer;
}
.asr-menu-btn svg { width: 20px; height: 20px; }
/* The same colour after a tap too: the foundation's theme recolours any focused or hovered button. */
.asr-bar .asr-menu-btn:hover, .asr-bar .asr-menu-btn:focus, .asr-bar .asr-menu-btn:active { background: #4f1b17; color: #fff; border: 0; outline: 0; }
.asr-bar .asr-menu-btn:focus-visible { outline: 2px solid #862c20; outline-offset: 2px; }
.asr-menu-btn .i-close, .asr-menu-btn[aria-expanded="true"] .i-open { display: none; }
.asr-menu-btn[aria-expanded="true"] .i-close { display: block; }
.asr-menu {
  position: absolute; top: calc(100% + 6px); right: 16px; z-index: 20; min-width: 240px; padding: 8px 0;
  background: #fff; border: 1px solid #e8e1de; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.asr-menu[hidden] { display: none; }
.asr-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-family: "Poppins", system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #1e1810; text-decoration: none; }
.asr-menu a:hover { background: #f2edeb; color: #1e1810; }
.asr-menu i { display: grid; flex-shrink: 0; width: 20px; height: 20px; color: #8b827e; }
.asr-menu i svg { width: 20px; height: 20px; fill: currentColor; }
.asr-menu a[aria-current="page"] i { color: #862c20; }
.asr-menu a[aria-current="page"] { color: #862c20; }
.asr-menu hr { margin: 4px 0; border: 0; border-top: 1px solid #e8e1de; }
@media (min-width: 768px) { .asr-menu { right: 28px; } }
/* A menu marked wide (the foundation's) sits in the bar itself on a wide screen, as links like the TV's tabs. */
@media (min-width: 901px) {
  .asr-bar-inner:has(.asr-menu-wide) .asr-menu-btn { display: none; }
  .asr-menu.asr-menu-wide, .asr-menu.asr-menu-wide[hidden] {
    position: static; display: flex; align-self: stretch; gap: clamp(16px, 2.6vw, 28px); margin-left: auto; min-width: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .asr-menu-wide a { position: relative; padding: 0; font-weight: 500; color: #575250; white-space: nowrap; }
  .asr-menu-wide a:hover { background: none; color: #862c20; }
  .asr-menu-wide a[aria-current="page"] { color: #862c20; }
  .asr-menu-wide a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #862c20; }
  .asr-menu-wide i, .asr-menu-wide hr { display: none; }
  /* The way to the other site stands apart: the only one with its icon. */
  .asr-menu-wide a:has(i[data-icon="live_tv"]) { gap: 6px; }
  .asr-menu-wide i[data-icon="live_tv"] { display: grid; color: #862c20; }
}

@media (max-width: 900px) {
  .asr-bar-inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; gap: 6px 16px; }
  .asr-menu-btn { order: 2; }
  /* A long name breaks onto a second line beside the button rather than pushing it down. */
  .asr-brand { flex: 1 1 0; }
}