:root{
  --container: 1260px;
  --gutter: 16px;
  --accent: #f5c400;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #ffffff;
  --soft: #f9fafb;
}
body{margin:0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif; background: var(--bg); color:#111827;}
a{color:inherit}
.container{max-width: var(--container); margin:0 auto; padding:0 var(--gutter);}
.topbar{border-bottom:1px solid var(--border); background:#fff;}
.topbar__row{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0; font-size:13px; color:var(--muted);}
.ticker{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.brandbar{border-bottom:1px solid var(--border); background:#fff;}
.brandbar__row{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{font-weight:900; letter-spacing:.6px; font-size:22px; text-decoration:none;}
.menu{list-style:none; display:flex; gap:18px; margin:0; padding:0; font-size:14px;}
.menu a{text-decoration:none; opacity:.9}
.menu a:hover{opacity:1}
.breaking{background: linear-gradient(90deg, var(--accent), #ffe58a); border-bottom:1px solid #f2d35c;}
.breaking__row{display:flex; gap:12px; align-items:center; padding:10px 0; font-size:14px;}
.breaking__label{background:#111827; color:#fff; font-weight:800; padding:6px 10px; border-radius:0;}
.breaking__item{position:relative; flex:1; overflow:hidden; white-space:nowrap;}
.breaking__link{display:block; text-decoration:none; color:#111827; font-weight:700;}
.fade{opacity:0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease;}
.fade.is-visible{opacity:1; transform: translateY(0);}

.layout{display:grid; grid-template-columns: 1fr 320px; gap:18px; padding:16px 0 26px;}
@media (max-width: 980px){ .layout{grid-template-columns:1fr;} .sidebar{order:2} }

.card{border:1px solid var(--border); border-radius:0; background:#fff; overflow:hidden;}
.card__img{aspect-ratio: 16/9; background: #eef2ff;}
.card__img img{width:100%; height:100%; object-fit:cover; display:block;}
.card__body{padding:12px 12px 14px;}
.meta{font-size:12px; color:var(--muted); display:flex; gap:10px; align-items:center;}
.title{margin:8px 0 0; font-size:16px; line-height:1.25;}
.title a{text-decoration:none;}
.title a:hover{text-decoration:underline;}

/* Hero */
.hero{display:grid; grid-template-columns: 1fr 320px; gap:18px;}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;} }
.hero-main{position:relative; border-radius:0; overflow:hidden; border:1px solid var(--border);}
.hero-main img{width:100%; height:520px; object-fit:cover; display:block;}
@media (max-width: 980px){ .hero-main img{height:360px;} }
.hero-overlay{position:absolute; left:0; right:0; bottom:0; padding:16px 16px 18px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));}
.hero-title{margin:0; font-size:26px; line-height:1.15; color:#fff; font-weight:900;}
.hero-title a{color:#fff; text-decoration:none;}
.hero-title a:hover{text-decoration:underline;}
.hero-main:hover img{transform: scale(1.02);}
.hero-main img{transition: transform .35s ease;}

.hero-nav{display:flex; gap:8px; flex-wrap:wrap; padding:12px 0 0;}
.hero-dot{width:30px; height:30px; border-radius:0; border:1px solid var(--border); background:#fff; font-weight:800; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.hero-dot.is-active{background: var(--accent); border-color: #eab308;}
.hero-dot:hover{transform: translateY(-1px);}

.hero-side{display:grid; gap:12px;}
.mini .title{font-size:14px}
.mini .card__body{padding:10px 10px 12px}
.mini .card__img{aspect-ratio: 16/10}
.mini:hover{box-shadow: 0 10px 18px rgba(0,0,0,.06); transform: translateY(-1px);}
.mini{transition: transform .2s ease, box-shadow .2s ease;}

/* Blocks */
.block{margin-top:16px;}
.block h2{margin:0 0 10px; font-size:18px;}
.block-a{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px;}
@media (max-width: 980px){ .block-a{grid-template-columns:1fr;} }
.stack{display:grid; gap:12px;}
.grid6{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
@media (max-width: 980px){ .grid6{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid6{grid-template-columns: 1fr;} }

.strip{display:grid; grid-template-columns: 1fr; gap:12px;}
.strip-main .card__img{aspect-ratio: 21/9}
.strip4{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;}
@media (max-width: 980px){ .strip4{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .strip4{grid-template-columns: 1fr;} }

/* Sidebar */
.sidebar{display:grid; gap:12px;}
.ad{height:250px; display:flex; align-items:center; justify-content:center; background: var(--soft); color:var(--muted); font-weight:800; border:1px dashed var(--border); border-radius:0;}
.widget{padding:12px; border:1px solid var(--border); border-radius:0; background:#fff;}
.widget h3{margin:0 0 10px; font-size:14px;}
.list{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
.list a{text-decoration:none;}
.list a:hover{text-decoration:underline;}

footer{border-top:1px solid var(--border); padding:20px 0; color:var(--muted); font-size:13px;}

/* === Gazette Font === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&display=swap');
.hero-title, .hero-title a {
  font-family: 'Playfair Display', serif;
  letter-spacing: .2px;
}

/* === Mobile Hero Single Column + Slider Bar === */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;}
  .hero-side{order:2}
  .hero-nav{
    position:relative;
    display:flex;
    overflow-x:auto;
    gap:6px;
    padding:10px 0;
  }
  .hero-dot{
    flex:0 0 auto;
    width:28px;
    height:28px;
    font-size:11px;
  }
}

/* === Desktop: hero full row before sidebar === */
.hero-wrap{grid-column:1 / -1;}


/* === Hero title: drop shadow + text-stroke (gazete) === */
.hero-title{
  text-shadow: 0 10px 22px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  -webkit-text-stroke: 0.6px rgba(0,0,0,.35);
  text-stroke: 0.6px rgba(0,0,0,.35);
}

/* === Hero category ribbon (red strip) === */
.hero-cat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#dc2626;
  color:#fff;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  padding:8px 12px;
  text-decoration:none;
  margin-bottom:10px;
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}
.hero-cat:hover{filter:brightness(1.05);}



/* === Hero should live above blocks+sidebar === */
.hero-full{padding:16px 0 10px;}
.blocks-below{padding-top:0;}


/* === Brandbar / Nav refinements (site unity) === */
.brandbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(6px);}
.brandbar{background:rgba(255,255,255,.92);}

.nav{display:flex; align-items:center; gap:12px;}
.menu{align-items:center;}
.menu > li{position:relative;}
.menu a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 2px;
  font-weight:800;
  letter-spacing:.25px;
  text-transform:uppercase;
  font-size:12px;
  color:#111827;
  opacity:1;
}
.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  height:2px;
  width:0;
  background: #dc2626;
  transition: width .22s ease;
}
.menu li{position:relative;}
.menu li > a{position:relative;}
.menu li:hover > a::after{width:100%;}

.menu .current-menu-item > a::after,
.menu .current-menu-ancestor > a::after{width:100%;}

.menu .sub-menu{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:220px;
  padding:8px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: 0 18px 34px rgba(0,0,0,.10);
}
.menu li:hover > .sub-menu{display:block;}
.menu .sub-menu li a{
  font-weight:800;
  text-transform:none;
  font-size:13px;
  padding:10px 10px;
  width:100%;
}
.menu .sub-menu li a::after{display:none;}
.menu .sub-menu li a:hover{background:var(--soft);}

/* Search pill */
.nav-search{display:flex; align-items:center; gap:8px; margin-left:10px;}
.nav-search input{
  width:180px;
  border:1px solid var(--border);
  padding:9px 10px;
  background:#fff;
  outline:none;
  font-size:13px;
}
.nav-search button{
  border:1px solid var(--border);
  background:#fff;
  padding:9px 10px;
  font-weight:900;
  cursor:pointer;
}
.nav-search input:focus{border-color:#111827;}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
}
.nav-toggle span{
  width:18px;
  height:2px;
  background:#111827;
  display:block;
}

/* Drawer */
.nav-drawer{display:none;}
.nav-drawer.is-open{display:block;}
.nav-drawer__backdrop{
  position:fixed; inset:0; background: rgba(0,0,0,.35); z-index:80;
}
.nav-drawer__inner{
  position:fixed; top:0; right:0; height:100vh; width:min(360px, 86vw);
  background:#fff; z-index:90; border-left:1px solid var(--border);
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: -18px 0 40px rgba(0,0,0,.18);
}
.nav-drawer__top{display:flex; align-items:center; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid var(--border);}
.nav-drawer__close{border:1px solid var(--border); background:#fff; width:38px; height:38px; cursor:pointer;}
.menu-mobile{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.menu-mobile a{
  display:block;
  padding:12px 10px;
  border:1px solid var(--border);
  font-weight:900;
  text-decoration:none;
}
.menu-mobile .sub-menu{margin:8px 0 0 10px; padding:0; border:none; box-shadow:none;}
.nav-search--mobile{margin-top:auto;}
.nav-search--mobile input{width:100%;}
.nav-search--mobile button{width:54px;}

/* Responsive behavior */
@media (max-width: 980px){
  .nav-desktop{display:none;}
  .nav-search{display:none;}
  .nav-toggle{display:flex;}
}

/* Make brandbar row denser */
.brandbar__row{gap:14px;}


/* === Desktop search icon -> flyout === */
.nav-search-pop{position:relative; display:flex; align-items:center;}
.nav-search-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.nav-search-ico{
  font-weight:900;
  font-size:18px;
  color: var(--accent);
}
.nav-search-fly{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  display:none;
  gap:8px;
  padding:10px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
  z-index:60;
}
.nav-search-fly.is-open{display:flex;}
.nav-search-fly input{
  width:220px;
  border:1px solid var(--border);
  padding:9px 10px;
  background:#fff;
  outline:none;
  font-size:13px;
}
.nav-search-fly button{
  border:1px solid var(--border);
  background: var(--accent);
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}
.nav-search-fly input:focus{border-color:#111827;}

@media (max-width: 980px){
  .nav-search-pop{display:none;}
}


/* === SVG search icon === */
.nav-search-svg{color: var(--accent);}

/* === Glass blur flyout + scale/fade animation === */
.nav-search-fly{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transform-origin: top right;
  transform: scale(.96);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-search-fly.is-open{
  opacity: 1;
  transform: scale(1);
}


/* === Mobile header icons (search + menu) === */
.nav-mobile-icons{
  display:none;
  align-items:center;
  gap:8px;
}

.nav-search-btn--mobile{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
}

/* Mobile behavior */
@media (max-width: 980px){
  .nav-mobile-icons{display:flex;}
  .nav-search-pop{display:none;} /* hide desktop flyout */
}


/* === Search badge (Trend/Popüler) === */
.nav-search-btn, .nav-search-btn--mobile{position:relative;}
.nav-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  background: var(--accent);
  color:#111827;
  font-weight:900;
  font-size:10px;
  padding:3px 6px;
  border:1px solid rgba(17,24,39,.15);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}

/* === Mobile sticky shrink (brandbar) === */
.brandbar{
  transition: padding .18s ease, box-shadow .18s ease, background .18s ease;
}
.brandbar__row{
  transition: padding .18s ease;
}
.brandbar.is-shrink{
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.brandbar.is-shrink .brandbar__row{
  padding:10px 0;
}
.brandbar.is-shrink .logo{
  font-size:20px;
}
.brandbar.is-shrink .nav-toggle,
.brandbar.is-shrink .nav-search-btn--mobile,
.brandbar.is-shrink .nav-search-btn{
  width:38px;
  height:38px;
}

/* Only apply shrinking feel on mobile */
@media (min-width: 981px){
  .brandbar.is-shrink .brandbar__row{padding:14px 0;}
  .brandbar.is-shrink .logo{font-size:22px;}
}

/* === Mobile breaking text smaller === */
@media (max-width: 980px){
  .breaking__row{font-size:13px;}
  .breaking__label{font-size:11px; padding:5px 8px;}
}


/* === Badge as dot (no text) === */
.nav-badge{
  width:10px;
  height:10px;
  padding:0;
  border-radius:999px;
  display:inline-block;
  font-size:0;
  line-height:0;
}


/* === Hero mobile arrows instead of numbers === */
.hero-arrows{display:none;}
@media (max-width: 980px){
  .hero-nav{display:none;}
  .hero-arrows{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
  }
  .hero-arrow{
    width:44px;
    height:44px;
    border:1px solid var(--border);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
    user-select:none;
  }
}


/* === Desktop hero numbers aligned to image width === */
@media (min-width: 981px){
  .hero > div:first-child{
    max-width: 100%;
  }
  .hero-nav{
    max-width: 100%;
    width: 100%;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }
  .hero-main{
    width:100%;
  }
}


/* === Mobile hero: progress dot bar === */
.hero-progress{display:none;}
@media (max-width: 980px){
  .hero-arrows{display:none !important;}
  .hero-progress{
    display:block;
    width:100%;
    height:3px;
    background: rgba(255,255,255,.35);
    margin-top:10px;
    position:relative;
    overflow:hidden;
  }
  .hero-progress span{
    display:block;
    height:100%;
    width:0%;
    background: var(--accent);
    transition: width linear;
  }
}


/* === Mobile hero: dot → dot → dot indicator === */
.hero-dots{display:none;}
@media (max-width: 980px){
  .hero-dots{
    display:flex;
    gap:6px;
    align-items:center;
    justify-content:center;
    margin-top:10px;
    height:10px;
  }
  .hero-dots span{
    width:6px;
    height:6px;
    background: rgba(255,255,255,.45);
    display:block;
    border-radius:999px;
    animation: heroDotPulse 1.2s infinite ease-in-out;
  }
  .hero-dots span:nth-child(2){animation-delay:.2s;}
  .hero-dots span:nth-child(3){animation-delay:.4s;}

  @keyframes heroDotPulse{
    0%, 80%, 100%{ transform: scale(1); opacity:.35; }
    40%{ transform: scale(1.6); opacity:1; background: var(--accent); }
  }

  /* hide progress bar if still present from older CSS */
  .hero-progress{display:none !important;}
}


/* === Mobile hero: hide numbers, show dot indicator === */
@media (max-width: 980px){
  .hero-nav{display:none !important;}
  .hero-dots{display:flex !important;}
}


/* === Mobile hero: use dotbar instead of numbers === */
.hero-dotbar{display:none;}
.hero-dotpill{
  border:0;
  background: rgba(255,255,255,.40);
  height:6px;
  width:10px;
  cursor:pointer;
  padding:0;
  border-radius:999px;
}
.hero-dotpill.is-active{
  background: var(--accent);
  width:18px;
}
@media (max-width: 980px){
  .hero-nav{display:none !important;}
  .hero-dots{display:none !important;} /* legacy */
  .hero-dotbar{
    display:flex;
    gap:6px;
    justify-content:center;
    align-items:center;
    margin-top:10px;
  }
}


/* === Mobile dotbar colors === */
@media (max-width: 980px){
  .hero-dotpill{
    background: #111827; /* black for inactive */
    opacity: .6;
  }
  .hero-dotpill.is-active{
    background: var(--accent); /* yellow */
    opacity: 1;
  }
}


/* === Mobile search overlay (does not open menu) === */
.nav-search-mobile{display:none;}
.nav-search-mobile.is-open{display:block;}
.nav-search-mobile__backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.28);
  z-index:85;
}
.nav-search-mobile__inner{
  position:fixed;
  left:0; right:0;
  top:0;
  z-index:90;
  padding:12px 12px 10px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-bottom:1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.nav-search-mobile__form{display:flex; gap:8px; align-items:center;}
.nav-search-mobile__form input{
  flex:1;
  border:1px solid var(--border);
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.nav-search-mobile__form button{
  border:1px solid var(--border);
  background: var(--accent);
  padding:12px 12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
@media (min-width: 981px){
  .nav-search-mobile{display:none !important;}
}


/* === Category page === */
.category-head{
  margin: 10px 0 20px;
}
.category-title{
  font-size: 26px;
  font-weight: 900;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
  padding-bottom: 6px;
}

.category-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}

@media (max-width: 1200px){
  .category-grid{grid-template-columns: repeat(3,1fr);}
}
@media (max-width: 900px){
  .category-grid{grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 560px){
  .category-grid{grid-template-columns: 1fr;}
}

.cat-card{
  position:relative;
}
.cat-card__img{
  position:relative;
  overflow:hidden;
}
.cat-card__img img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}
.cat-card__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:14px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15) 60%, transparent);
}
.cat-card__title{
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.cat-ad{
  grid-column:1 / -1;
  padding:16px;
  border:1px dashed var(--border);
  text-align:center;
  margin:10px 0;
}

/* Pagination */
.category-pagination{
  margin:30px 0;
  display:flex;
  justify-content:center;
}
.category-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  margin:0 4px;
  border:1px solid var(--border);
  font-weight:900;
  text-decoration:none;
  color:#111827;
}
.category-pagination .page-numbers.current{
  background: var(--accent);
  color:#111827;
}
.category-pagination .page-numbers:hover{
  background:#111827;
  color:#fff;
}


/* === Category accent color === */
.category-head{ --cat-accent: var(--accent); }
.category-title{ border-bottom-color: var(--cat-accent); }
.category-desc{ margin-top:10px; max-width:820px; color:#374151; }

.category-pagination .page-numbers.current{
  background: var(--cat-accent);
}

/* === Mobile native ad spacing === */
@media (max-width: 560px){
  .cat-ad{ margin:16px 0; }
}


/* === Category Hero === */
.cat-hero{margin-bottom:24px;}
.cat-hero-track{display:flex; gap:16px; overflow-x:auto;}
.cat-hero-slide{min-width:320px; position:relative;}
.cat-hero-slide img{width:100%; height:320px; object-fit:cover;}
.cat-hero-overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:16px;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent 60%);
}
.cat-hero-overlay h2{color:#fff; font-size:22px;}

/* === Sticky Sidebar === */
.cat-sidebar{
  position:sticky;
  top:90px;
  margin:30px 0;
  padding:16px;
  border:1px solid var(--border);
}
.cat-sidebar h3{margin-bottom:10px;}

/* === Card Badge === */
.card-badge{
  position:absolute;
  top:12px; left:12px;
  background:#dc2626;
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:4px 8px;
  z-index:2;
}


/* === Category Hero Controls === */
.cat-hero-controls{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:10px;
}
.cat-hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#111827;
  opacity:.4;
  border:0;
}
.cat-hero-dot.is-active{
  background:var(--accent);
  opacity:1;
}
@media(min-width:981px){
  .cat-hero-dot{
    width:28px;
    height:28px;
    border-radius:0;
    font-weight:900;
  }
}
/* === Today box === */
.cat-today{
  margin:20px 0;
  padding:14px;
  border-left:4px solid var(--accent);
  background:#f9fafb;
}
.cat-today h3{margin-bottom:8px;}
.cat-today li{margin-bottom:6px;}


/* === Category layout fix (prevents overflow / dağılma) === */
.category-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:20px;
  align-items:start;
}
.category-main{min-width:0;}
.category-side{min-width:0;}
@media (max-width: 1100px){
  .category-layout{grid-template-columns: 1fr;}
  .category-side{order:2;}
}

/* Grid cards keep inside container */
.category-grid{width:100%;}
.cat-card__img img{max-width:100%;}

/* Range toggle */
.cat-range{
  display:flex;
  gap:10px;
  margin: 12px 0 18px;
  flex-wrap:wrap;
}
.cat-range__btn{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 10px;
  font-weight:900;
  text-decoration:none;
  color:#111827;
}
.cat-range__btn.is-active{
  background: var(--cat-accent, var(--accent));
}

/* Category hero slider: simple hide/show by active */
.cat-hero-track{display:block; overflow:hidden;}
.cat-hero-slide{display:none;}
.cat-hero-slide.is-active{display:block;}
.cat-hero-slide img{width:100%; height:360px; object-fit:cover; display:block;}
@media (max-width: 560px){
  .cat-hero-slide img{height:260px;}
}

/* Controls: numbers on desktop, dots on mobile */
.cat-hero-controls{display:flex; justify-content:center; gap:6px; margin-top:10px;}
.cat-hero-dot{
  width:10px; height:10px; border-radius:999px;
  background:#111827; opacity:.45; border:0; cursor:pointer;
}
.cat-hero-dot.is-active{background: var(--accent); opacity:1;}
@media (min-width: 981px){
  .cat-hero-dot{
    width:34px; height:34px; border-radius:0;
    position:relative;
  }
  .cat-hero-dot::after{
    content: attr(data-i);
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:900;
  }
  .cat-hero-dot::after{content:"";} /* keep dots as dots; we will rely on CSS only? */
}

/* Sidebar ads */
.cat-ad--side{border-style:solid; margin-top:16px;}


/* === Simplified Category Layout === */
.category-layout--single{
  display:block;
}
.category-layout--single .category-main{
  width:100%;
}


/* === Home Sidebar Category Block === */
.sb-catblock{ margin-bottom:16px; }
.sb-catblock__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.sb-catblock__title{
  display:inline-block;
  font-weight:900;
  text-decoration:none;
  border-bottom:3px solid var(--accent);
  padding-bottom:6px;
  color:#111827;
}
.sb-catblock__list{ display:flex; flex-direction:column; gap:12px; }

.sb-catitem__img{ position:relative; overflow:hidden; }
.sb-catitem__img img{ width:100%; height:110px; object-fit:cover; display:block; }
.sb-catitem__overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:10px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.12) 60%, transparent);
}
.sb-catitem__title{
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}


/* === Sidebar category images height increased === */
.sb-catitem__img img{
  height: 220px; /* was ~110px */
}


/* === Sidebar category images: match block height === */
.sb-catitem__img{
  aspect-ratio: 16 / 9;
}
.sb-catitem__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* === Sidebar category images fixed height (140px) === */
.sb-catitem__img{
  height: 140px;
}
.sb-catitem__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === Sidebar category images: height 141px, width unchanged === */
.sb-catitem__img{
  height: 141px;
}
.sb-catitem__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === Sidebar category images: full sidebar width, height 143px === */
.sb-catitem{
  width: 100%;
}
.sb-catitem__img{
  width: 100%;
  height: 143px;
}
.sb-catitem__img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === Sidebar category images: full width, height 144px === */
.sb-catitem__img{
  height: 144px;
}


/* === Sidebar category images: mobile height override === */
@media (max-width: 768px){
  .sb-catitem__img{
    height: 150px;
  }
}


/* === Sidebar category images: desktop 145px, mobile 150px === */
.sb-catitem__img{
  height: 145px;
}
@media (max-width: 768px){
  .sb-catitem__img{
    height: 150px;
  }
}


/* === Home Block A: 2 big + 2 small === */
.block-a-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.block-a-item--big{
  grid-column: span 2;
  height: 320px;
}
.block-a-item--small{
  grid-column: span 2;
  height: 180px;
}
.block-a-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.block-a-item .overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:16px;
  background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2) 60%, transparent);
}
@media(max-width:768px){
  .block-a-grid{
    grid-template-columns: 1fr;
  }
  .block-a-item--big,
  .block-a-item--small{
    grid-column: span 1;
    height:220px;
  }
}


/* === FIX: Home Block A overlay should not cover whole page === */
.home-block-a .block-a-item{ 
  position: relative;
  overflow: hidden;
}
.home-block-a .block-a-item > a{
  display:block;
  position:relative;
  width:100%;
  height:100%;
}
.home-block-a .block-a-item img{
  display:block;
}
.home-block-a .block-a-item .overlay{
  pointer-events:none; /* click goes to link */
}


/* === FIX: Home Block A titles should be white === */
.home-block-a .block-a-item .overlay h3,
.home-block-a .block-a-item .overlay h4,
.home-block-a .block-a-item .overlay a{
  color:#ffffff;
}

.home-block-a .block-a-item .overlay h3 a,
.home-block-a .block-a-item .overlay h4 a{
  color:#ffffff;
}

.home-block-a .block-a-item .overlay h3:hover,
.home-block-a .block-a-item .overlay h4:hover{
  color:#ffffff;
}


/* ============================
   Utility Pages (Eczane / Namaz / Hava)
   ============================ */
.hs-page-hero{
  position: relative;
  padding: 64px 0 28px;
  color:#fff;
  overflow:hidden;
}
.hs-page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.hs-page-hero__inner{ position:relative; z-index:2; }
.hs-page-title{
  margin:0 0 6px;
  font-family: 'Playfair Display', 'Merriweather', Georgia, serif;
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.hs-page-sub{ margin:0; opacity:.92; max-width: 720px; }

.hs-page-content{ padding: 22px 0 36px; }
.hs-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding:18px;
  margin: 0 0 16px;
}
.hs-card--glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  color:#fff;
}
.hs-card--glass h2,
.hs-card--glass h3,
.hs-card--glass p,
.hs-card--glass label span{ color:#fff; }

.hs-card__head h2{ margin:0 0 4px; }
.hs-card__head p{ margin:0; opacity:.92; }

.hs-form--grid{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  margin-top: 14px;
}
.hs-form label span{ display:block; font-size:12px; opacity:.9; margin-bottom:6px; }
.hs-form input{
  width:100%;
  border-radius: 10px;
  padding: 12px 12px;
  border: 1px solid rgba(17,24,39,.12);
  outline:none;
}
.hs-card--glass input{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color:#fff;
}
.hs-btn{
  border:0;
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--accent);
  color:#111;
  font-weight: 900;
  cursor:pointer;
}
.hs-divider{ height:1px; background: rgba(255,255,255,.22); margin:16px 0; }
.hs-card:not(.hs-card--glass) .hs-divider{ background: rgba(17,24,39,.10); }

.hs-note{ margin:12px 0 0; font-size:12px; opacity:.92; }

.hs-list{ display:flex; flex-direction:column; gap:12px; }
.hs-list__item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 12px;
}
.hs-card:not(.hs-card--glass) .hs-list__item{
  background:#fff;
  border-color: rgba(17,24,39,.10);
}
.hs-list__title{ font-weight: 900; margin-top: 6px; }
.hs-list__meta{ font-size:12px; opacity:.85; margin-top: 4px; }

.hs-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight: 900;
  background:#111827;
  color:#fff;
}
.hs-badge--green{ background:#16a34a; }

.hs-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.hs-time{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 12px;
}
.hs-time__k{ opacity:.9; }
.hs-time__v{ font-weight: 900; }

.hs-weather-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 14px;
}
.hs-weather-hero__city{ font-weight: 900; font-size: 16px; }
.hs-weather-hero__desc{ opacity:.9; margin-top: 6px; }
.hs-weather-hero__temp{ font-size: 48px; font-weight: 900; line-height:1; }

.hs-weather-row{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom: 6px;
  margin-top: 12px;
}
.hs-pill{
  white-space:nowrap;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 900;
}

.hs-week{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
}
.hs-week__item{
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  padding: 10px;
  text-align:center;
}
.hs-week__item span{ display:block; font-size:12px; opacity:.7; }
.hs-week__item strong{ display:block; font-size:18px; margin-top: 6px; }
.hs-week__item em{ display:block; font-style:normal; font-size:12px; opacity:.7; margin-top: 2px; }

/* Backgrounds per page template */
.hs-page--hava .hs-page-hero{ background: url('../img/backgrounds/bg-weather.jpg') center/cover no-repeat; }
.hs-page--namaz .hs-page-hero{ background: url('../img/backgrounds/bg-prayer.jpg') center/cover no-repeat; }
.hs-page--eczane .hs-page-hero{ background: url('../img/backgrounds/bg-pharmacy.jpg') center/cover no-repeat; }

@media (max-width: 768px){
  .hs-page-hero{ padding: 52px 0 22px; }
  .hs-form--grid{ grid-template-columns: 1fr; }
  .hs-grid-2{ grid-template-columns: 1fr; }
  .hs-week{ grid-template-columns: repeat(3, 1fr); }
}


/* ============================
   Utility Pages UX/SEO/Discover/PageSpeed tweaks
   ============================ */

/* Ensure readable default text color on utility pages */
.hs-page{
  color:#111827;
  background: #f6f7fb;
}
.hs-page a{ color: inherit; }
.hs-page a:hover{ opacity:.92; }

/* Hero overlay already darkens image; keep text white there */
.hs-page-hero:before{ background: rgba(0,0,0,.52); }
.hs-page-hero .hs-page-title,
.hs-page-hero .hs-page-sub{ color:#fff; }

/* Cards: modern, readable, fast */
.hs-page .hs-card{
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
}
/* Glass card: switch to light-glass so text is readable (was white-on-white) */
.hs-page .hs-card--glass{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(14px);
  color:#111827;
}
.hs-page .hs-card--glass h1,
.hs-page .hs-card--glass h2,
.hs-page .hs-card--glass h3,
.hs-page .hs-card--glass p,
.hs-page .hs-card--glass label span{
  color:#111827;
}
.hs-page .hs-card--glass input{
  background: rgba(255,255,255,.9);
  border-color: rgba(17,24,39,.12);
  color:#111827;
}

/* Buttons */
.hs-page .hs-btn{
  background: var(--accent);
  color:#111827;
  border: 1px solid rgba(17,24,39,.10);
  transition: transform .15s ease, filter .15s ease;
}
.hs-page .hs-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
@media (prefers-reduced-motion: reduce){
  .hs-page .hs-btn{ transition:none; }
  .hs-page .hs-btn:hover{ transform:none; }
}

/* Form layout spacing */
.hs-page .hs-form--grid{ gap: 10px; }
.hs-page .hs-form input{ border-radius: 12px; }

/* Lists */
.hs-page .hs-list__item{
  border-radius: 14px;
  border-color: rgba(17,24,39,.10);
}
.hs-page .hs-list__title{ color:#111827; }
.hs-page .hs-list__meta{ color: rgba(17,24,39,.78); }

/* Badge */
.hs-page .hs-badge{ box-shadow: 0 8px 20px rgba(0,0,0,.10); }

/* Icon chips */
.hs-ic{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.hs-ic__icon{
  width:40px;
  height:40px;
  border-radius: 12px;
  background: rgba(255,255,255,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
}
.hs-page .hs-card--glass .hs-ic__icon{
  background: rgba(17,24,39,.04);
  border-color: rgba(17,24,39,.10);
}
.hs-ic__icon svg{
  width:22px;
  height:22px;
  display:block;
}
.hs-ic__meta strong{
  display:block;
  font-weight: 900;
  letter-spacing: .2px;
}
.hs-ic__meta span{
  display:block;
  font-size:12px;
  opacity:.75;
}

/* Weather pills readability */
.hs-page .hs-pill{
  background: rgba(17,24,39,.04);
  border-color: rgba(17,24,39,.10);
  color:#111827;
}
.hs-page .hs-week__item{
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* Mobile spacing */
@media (max-width:768px){
  .hs-page-content{ padding: 16px 0 28px; }
  .hs-page .hs-card{ padding: 16px; }
}


/* ============================
   Utility Pages: flat (no rounded) + richer weather colors
   ============================ */
.hs-page .hs-card,
.hs-page .hs-form input,
.hs-page .hs-btn,
.hs-page .hs-list__item,
.hs-page .hs-badge,
.hs-page .hs-pill,
.hs-page .hs-week__item,
.hs-ic__icon{
  border-radius: 0 !important;
}

/* Weather: colorful but readable */
.hs-weather-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 14px;
}
.hs-stat{
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
  padding:12px;
}
.hs-stat__k{
  font-size:12px;
  opacity:.7;
  margin-bottom: 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.hs-stat__v{
  font-weight: 900;
  font-size: 18px;
  letter-spacing:.2px;
}
.hs-stat--accent{ border-left: 6px solid var(--accent); }
.hs-stat--red{ border-left: 6px solid #ef4444; }
.hs-stat--blue{ border-left: 6px solid #3b82f6; }
.hs-stat--green{ border-left: 6px solid #22c55e; }
.hs-stat--amber{ border-left: 6px solid #f59e0b; }
.hs-stat--violet{ border-left: 6px solid #8b5cf6; }

.hs-section-title{
  margin: 0 0 10px;
  font-family: 'Playfair Display', 'Merriweather', Georgia, serif;
  font-weight: 900;
  letter-spacing: .2px;
}

.hs-weather-row .hs-pill{
  background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(59,130,246,.10));
  border-color: rgba(17,24,39,.10);
}

/* District selector */
.hs-select{
  width:100%;
  padding: 12px 12px;
  border:1px solid rgba(17,24,39,.12);
  outline:none;
  background:#fff;
  border-radius:0;
}
.hs-inline-form{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  margin-top: 10px;
}
@media (max-width:768px){
  .hs-weather-grid{ grid-template-columns: 1fr; }
  .hs-inline-form{ grid-template-columns: 1fr; }
}


/* ============================
   Weather Page (Blue UI like provided mock) - overrides
   ============================ */
.hs-page--weatherblue{
  background: linear-gradient(180deg, #bfe1ff 0%, #8fc3ff 55%, #cfe8ff 100%);
  min-height: 100vh;
}
.hs-page--weatherblue .hs-wrap{ max-width: 980px; }

.hs-wx-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 18px 18px;
}

.hs-wx-top{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items:center;
}
.hs-wx-icon{
  width: 92px; height: 92px;
  display:flex; align-items:center; justify-content:center;
  margin-left: 10px;
}
.hs-wx-icon svg{ width: 92px; height: 92px; display:block; }
.hs-wx-main h1{
  margin:0;
  font-family: 'Playfair Display','Merriweather',Georgia,serif;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 54px;
  line-height: 1;
  color: #1a1a9a;
}
.hs-wx-main .hs-wx-desc{
  margin: 6px 0 0;
  font-weight: 900;
  font-size: 20px;
  color: #e11d48;
}
.hs-wx-main .hs-wx-meta{
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(17,24,39,.85);
}
.hs-wx-main .hs-wx-meta b{ font-weight: 900; }

/* Section titles */
.hs-wx-section-title{
  display:flex; align-items:center; gap:10px;
  margin: 18px 0 10px;
  font-weight: 900;
  color: rgba(15,23,42,.90);
}
.hs-wx-section-title .chev{
  width:18px; height:18px; display:inline-flex;
  opacity:.8;
}

/* Hourly cards row */
.hs-wx-hourly{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hs-wx-hour{
  background: rgba(0,85,190,.55);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 12px 12px;
  color: #fff;
  position: relative;
  overflow:hidden;
}
.hs-wx-hour .t{ font-weight: 900; font-size: 12px; opacity: .95; }
.hs-wx-hour .deg{ font-weight: 900; font-size: 30px; margin-top: 8px; }
.hs-wx-hour .ic{
  position:absolute; right: 10px; top: 10px;
  width: 36px; height: 36px;
  opacity:.95;
}
.hs-wx-hour .ic svg{ width:36px; height:36px; display:block; }

/* Daily list */
.hs-wx-daily{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px 0;
}
.hs-wx-day{
  display:grid;
  grid-template-columns: 130px 40px 1fr;
  align-items:center;
  padding: 10px 16px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.hs-wx-day:first-child{ border-top: 0; }
.hs-wx-day .name{ font-weight: 900; color: rgba(15,23,42,.88); }
.hs-wx-day .ic svg{ width:24px; height:24px; }
.hs-wx-day .range{
  font-weight: 900;
  color: rgba(15,23,42,.88);
}

/* District buttons */
.hs-wx-districts{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.hs-wx-districts a{
  flex: 0 0 auto;
  min-width: 108px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  color: rgba(15,23,42,.90);
  font-weight: 900;
  text-decoration:none;
  text-align:center;
}
.hs-wx-districts a:hover{ filter: brightness(1.02); }
.hs-wx-districts a.is-active{
  background: rgba(0,85,190,.70);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

@media (max-width: 860px){
  .hs-wx-top{ grid-template-columns: 88px 1fr; }
  .hs-wx-main h1{ font-size: 44px; }
  .hs-wx-hourly{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .hs-wx-card{ padding: 14px; }
  .hs-wx-main h1{ font-size: 40px; }
  .hs-wx-day{ grid-template-columns: 110px 34px 1fr; }
  .hs-wx-districts a{ min-width: 92px; padding: 9px 10px; border-radius: 10px; }
}


/* ============================
   Weather Page UI (square, site-accent)
   ============================ */
.hs-page--wx{
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(17,24,39,.02) 55%, rgba(255,255,255,.92) 100%),
              radial-gradient(1200px 420px at 20% -10%, rgba(255,0,0,.10), transparent 70%),
              radial-gradient(900px 380px at 80% 0%, rgba(250,204,21,.14), transparent 70%);
  min-height: 100vh;
}
.hs-wx-wrap{ padding-top: 26px; }

.hs-wx-card{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  border-radius: 0;
  padding: 18px;
}
.hs-wx-top{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items:center;
}
.hs-wx-icon{ width:92px;height:92px; display:flex; align-items:center; justify-content:center; margin-left: 10px; }
.hs-wx-icon svg{ width:92px;height:92px; display:block; }

.hs-wx-main h1{
  margin:0;
  font-family: 'Playfair Display','Merriweather',Georgia,serif;
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 54px;
  line-height:1;
  color: var(--accent, #111827);
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.hs-wx-desc{
  margin: 6px 0 0;
  font-weight: 900;
  font-size: 20px;
  color: rgba(15,23,42,.88);
}
.hs-wx-meta{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(15,23,42,.82);
}
.hs-wx-meta b{ font-weight: 900; }

.hs-wx-section-title{
  display:flex; align-items:center; gap:10px;
  margin: 18px 0 10px;
  font-weight: 900;
  color: rgba(15,23,42,.90);
}
.hs-wx-section-title .chev{ opacity:.8; }

.hs-wx-hourly{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hs-wx-hour{
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.72));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  border-radius: 0;
  padding: 12px;
  color:#fff;
  position: relative;
  overflow:hidden;
}
.hs-wx-hour:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(239,68,68,.18), rgba(250,204,21,.14));
  mix-blend-mode: screen;
  pointer-events:none;
}
.hs-wx-hour .t{ font-weight: 900; font-size: 12px; opacity:.95; position:relative; }
.hs-wx-hour .deg{ font-weight: 900; font-size: 30px; margin-top: 8px; position:relative; }
.hs-wx-hour .ic{ position:absolute; right: 10px; top: 10px; width: 36px; height:36px; opacity:.95; z-index:1; }
.hs-wx-hour .ic svg{ width:36px; height:36px; display:block; }

.hs-wx-daily{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  border-radius: 0;
  padding: 12px 0;
}
.hs-wx-day{
  display:grid;
  grid-template-columns: 130px 40px 1fr;
  align-items:center;
  padding: 10px 16px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.hs-wx-day:first-child{ border-top:0; }
.hs-wx-day .name{ font-weight: 900; color: rgba(15,23,42,.88); }
.hs-wx-day .ic svg{ width:24px; height:24px; }
.hs-wx-day .range{ font-weight: 900; color: rgba(15,23,42,.88); }

.hs-wx-districts{
  display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.hs-wx-districts a{
  min-width: 108px;
  padding: 10px 12px;
  border-radius: 0;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  color: rgba(15,23,42,.90);
  font-weight: 900;
  text-decoration:none;
  text-align:center;
}
.hs-wx-districts a:hover{ filter: brightness(1.02); }
.hs-wx-districts a.is-active{
  background: rgba(15,23,42,.84);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}

.hs-wx-alert{
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: rgba(15,23,42,.92);
}

@media (max-width: 860px){
  .hs-wx-top{ grid-template-columns: 88px 1fr; }
  .hs-wx-main h1{ font-size: 44px; }
  .hs-wx-hourly{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .hs-wx-card{ padding: 14px; }
  .hs-wx-main h1{ font-size: 40px; }
  .hs-wx-day{ grid-template-columns: 110px 34px 1fr; }
  .hs-wx-districts a{ min-width: 92px; padding: 9px 10px; }
}


/* ============================
   Weather UX improvements
   ============================ */
.hs-wx-icon svg{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.hs-wx-hour .ic svg{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }

/* Make district selector sticky-ish within page (but not global sticky) */
.hs-wx-districts-wrap{
  margin-top: 18px;
}
.hs-wx-districts-wrap .hs-wx-card{
  padding: 14px 14px;
}
.hs-wx-districts-title{
  margin:0 0 10px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.hs-wx-districts{
  margin-top: 0;
}
.hs-wx-districts a{
  min-width: 120px;
}
@media (max-width:520px){
  .hs-wx-districts a{ min-width: 96px; }
}

/* Details grid */
.hs-wx-details{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.hs-wx-detail{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 12px 12px;
}
.hs-wx-detail .k{ font-size:12px; opacity:.75; font-weight: 800; }
.hs-wx-detail .v{ font-size:18px; font-weight: 900; margin-top: 6px; }
@media (max-width:860px){
  .hs-wx-details{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:520px){
  .hs-wx-details{ grid-template-columns: 1fr; }
}


}


/* Minimal district picker (no results grid) */
.hs-wx-district-picker *{ border-radius: 0 !important; }
.hs-ilce-search--minimal{
  display:flex;
  gap: 10px;
  align-items:center;
}
.hs-ilce-search--minimal input{
  flex: 1 1 auto;
  height: 44px;
  padding: 0 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.20);
  font-weight: 900;
  outline: none;
}
.hs-ilce-search--minimal input:focus{
  border-color: rgba(15,23,42,.38);
  box-shadow: 0 0 0 3px rgba(15,23,42,.10);
}
#hs-ilce-go{
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(15,23,42,.20);
  background: rgba(0,85,190,.70);
  color:#fff;
  font-weight: 1000;
  cursor:pointer;
}
#hs-ilce-go:hover{ filter: brightness(1.03); }


/* Hourly cards: show 12 upcoming hours */
.hs-wx-hourly{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px){
  .hs-wx-hourly{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px){
  .hs-wx-hourly{ grid-template-columns: repeat(2, 1fr); }
}


/* Micro details row inside main weather card */
.hs-wx-micro{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.hs-wx-micro span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.hs-wx-micro b{ font-weight: 1000; }


/* force micro visible (anti-cache/override) */
.hs-wx-micro{ display:flex !important; visibility: visible !important; opacity: 1 !important; }
.hs-wx-micro span{ display:inline-flex !important; }
.hs-wx-card{ overflow: visible !important; }


/* Topbar mini weather */
.topbar-wx{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
.topbar-wx .wx-ico{
  width: 14px;
  height: 14px;
  color: #1f2937;
  vertical-align: middle;
}
.topbar-wx__temp{
  font-weight: 900;
}


/* Topbar FX widgets */
.fx{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap;
}
.fx__k{
  font-weight: 1000;
}
.fx__v{
  font-weight: 900;
}
.fx__chg{
  font-weight: 900;
  opacity: .85;
}
.rate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rate svg{
  width: 12px;
  height: 12px;
}
.rate--up{ color: #16a34a; }    /* green */
.rate--down{ color: #dc2626; }  /* red */
.rate--flat{ color: #6b7280; }  /* gray */


/* Topbar layout: Weather | FX | Date */
.ticker--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.ticker__left{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-width: 210px;
}
.ticker__left .dot{ opacity:.7; font-weight:900; }
.ticker__center{
  flex: 1 1 auto;
  display:flex;
  justify-content:center; /* desktop center */
}
/* FX rotator base */
.fx-rotator{
  display:flex;
  align-items:center;
  gap: 14px;
}
.fx--item{ display:inline-flex; }

/* Mobile: keep weather static, rotate FX items with vertical fade */
@media (max-width: 520px){
  .ticker__left{ min-width:auto; }
  .ticker__center{ justify-content:flex-start; }
  .fx-rotator{
    position: relative;
    width: 140px; /* enough for values */
    height: 20px;
    overflow:hidden;
    margin-left: 8px;
  }
  .fx--item{
    position:absolute;
    left:0;
    top: 0;
    opacity:0;
    transform: translateY(8px);
    animation: hsFxFade 9s infinite;
    white-space: nowrap;
  }
  .fx--item:nth-child(1){ animation-delay: 0s; }
  .fx--item:nth-child(2){ animation-delay: 3s; }
  .fx--item:nth-child(3){ animation-delay: 6s; }
  @keyframes hsFxFade{
    0%   { opacity:0; transform: translateY(8px); }
    8%   { opacity:1; transform: translateY(0); }
    30%  { opacity:1; transform: translateY(0); }
    38%  { opacity:0; transform: translateY(-8px); }
    100% { opacity:0; transform: translateY(-8px); }
  }
}

/* Make sure arrows align nicely */
.fx .rate{ margin-left: 2px; }


/* Desktop exact alignment: Weather left | FX center | Date right */
@media (min-width: 521px){
  .ticker--split{
    justify-content:space-between;
  }
  .ticker__left{
    justify-content:flex-start;
    margin-right:auto;
  }
  .ticker__center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
  }
  }




/* Topbar without right date */
@media (min-width: 521px){
  .ticker--split{
    justify-content:flex-start;
  }
  .ticker__center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
}


/* Modern topbar */
.hs-topbar{
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.12);
}
.hs-topbar .ticker{
  min-height: 38px;
  font-size: 13px;
  letter-spacing: .25px;
  color: rgba(15,23,42,.92);
}
.hs-topbar .ticker strong{
  font-weight: 1000;
}
.hs-topbar .ticker span,
.hs-topbar .ticker a{
  font-weight: 900;
}
/* tighten dot */
.hs-topbar .ticker__left .dot{ opacity:.6; }

/* Center FX: modern bar (square, no pills) */
.fx-rotator{
  padding: 4px 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
/* FX typography */
.fx__k{ font-weight: 1000; }
.fx__v{ font-weight: 1000; }
.fx__chg{ font-weight: 1000; }

/* Make arrows minimal */
.rate svg{ width: 11px; height: 11px; }

/* Mobile: keep bar but smaller */
@media (max-width: 520px){
  .fx-rotator{
    padding: 3px 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }
}


/* Local internal links block (SEO/Discover) */
.hs-local-links{
  margin: 18px 0 0;
  padding: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.hs-local-links__title{
  font-weight: 1000;
  margin-bottom: 10px;
  color: rgba(15,23,42,.92);
}
.hs-local-links__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.hs-local-links__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.92);
  font-weight: 1000;
  text-decoration:none;
}
.hs-local-links__item:hover{
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.hs-local-links__arrow{
  color: rgba(220,38,38,.95);
  font-weight: 1200;
}
@media (max-width: 980px){
  .hs-local-links__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Utility: Pharmacy (Mersin) */
.hs-util--eczane .hs-util-title{ font-family: inherit; }
.hs-eczane-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}
.hs-eczane-side{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 12px;
}
.hs-eczane-side__title{
  font-weight: 1000;
  margin-bottom: 10px;
}
.hs-eczane-search{ margin-bottom: 10px; }
.hs-input{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  outline: none;
}
.hs-input:focus{ border-color: rgba(220,38,38,.35); box-shadow: 0 0 0 3px rgba(220,38,38,.08); }
.hs-eczane-districts{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 520px;
  overflow:auto;
  padding-right: 4px;
}
.hs-eczane-district{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.65);
  font-weight: 1000;
  color: rgba(15,23,42,.92);
  text-decoration:none;
}
.hs-eczane-district:hover{ border-color: rgba(220,38,38,.35); box-shadow: 0 10px 22px rgba(0,0,0,.08); }
.hs-eczane-district.is-active{
  border-color: rgba(220,38,38,.55);
  background: rgba(220,38,38,.07);
}
.hs-eczane-main{ min-width: 0; }
.hs-eczane-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.hs-eczane-card{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 14px;
}
.hs-eczane-name{
  font-size: 18px;
  font-weight: 1000;
  margin: 0 0 8px;
}
.hs-eczane-addr{
  font-weight: 900;
  opacity: .9;
  margin-bottom: 8px;
}
.hs-eczane-phone{
  display:inline-block;
  font-weight: 1000;
  color: rgba(220,38,38,.95);
  text-decoration:none;
  margin-bottom: 8px;
}
.hs-eczane-raw{
  font-weight: 900;
  opacity: .78;
  margin-top: 8px;
  border-top: 1px solid rgba(15,23,42,.10);
  padding-top: 8px;
}
.hs-empty{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 14px;
  font-weight: 900;
}
@media (max-width: 980px){
  .hs-eczane-layout{ grid-template-columns: 1fr; }
  .hs-eczane-districts{ max-height: 260px; }
  .hs-eczane-grid{ grid-template-columns: 1fr; }
}