@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&display=swap");

:root{
  --bg:#f7f7f7;
  --panel:#ffffff;
  --panel-2:#fcfcfc;
  --panel-3:#f3f3f3;

  --text:#111111;
  --muted:#6b6b6b;
  --border:#e6e6e6;

  --red:#ff6a00;
  --red2:#ff7a1a;

  --shadow:none;
  --radius:12px;
  --radius2:10px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --map-base:#d7d7d7;
  --map-hover:#ff6a00;
  --map-active:#e55c00;
  --map-stroke: rgba(255,255,255,.95);
  --map-stroke-hover: rgba(0,0,0,.16);
  --labelHot:#ff6a00;

  --hl:#fff1e7;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  max-width:1700px;
  margin:0 auto;
  padding:12px 16px 24px;
}

.muted{
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.row{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:60;

  display:flex;
  align-items:center;
  gap:12px;

  border:1px solid var(--border);
  background:#ffffff;
  backdrop-filter:none;
  border-radius:var(--radius);
  box-shadow:none;
  padding:10px 12px;
  margin-bottom:12px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px);
}

.brandLink{
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:4px;
}

.brand .dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background:var(--red);
  box-shadow:none;
}

.brand h1{
  margin:0;
  margin-left:-2px;
  font-size:18px;
  font-weight:1000;
  color:var(--red);
  letter-spacing:-0.02em;
  line-height:1;
}

/* Search dropdown wrapper */
.searchWrap{
  position:relative;
  flex:1;
  min-width:240px;
}

.searchBox{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:999px;
  padding:8px 10px;
}

.searchIcon{
  color:var(--muted);
  font-weight:1000;
}

.searchBox input{
  flex:1;
  border:0;
  outline:none;
  font-weight:900;
  font-size:13px;
  background:transparent;
  color:var(--text);
}

.searchBox input::placeholder{
  color:var(--muted);
}

.iconBtn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  padding:7px 10px;
  border-radius:8px;
  font-weight:1000;
}

.iconBtn:hover{
  border-color:#d8d8d8;
  background:#fafafa;
}

.topActions{
  display:flex;
  align-items:center;
  gap:10px;
}

.pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#ffffff;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  white-space:nowrap;
}

.statusDot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--red);
  display:inline-block;
}

.btnSolid{
  cursor:pointer;
  border:1px solid #ff6a00;
  background:#ff6a00;
  color:#ffffff;
  padding:10px 12px;
  border-radius:8px;
  font-weight:1000;
  text-decoration:none;
}

.btnSolid:hover{
  background:#e55c00;
  border-color:#e55c00;
}

.btn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#ffffff;
  padding:7px 12px;
  border-radius:8px;
  font-weight:1000;
  text-decoration:none;
  color:var(--text);
}

.btn:hover{
  background:#fafafa;
  border-color:#d8d8d8;
}

.linkBtn{
  cursor:pointer;
  border:0;
  background:transparent;
  padding:0;
  color:var(--muted);
  font-weight:1000;
}

.linkBtn:hover{
  color:var(--red);
  text-decoration:underline;
}

/* HERO */
.heroSection{
  margin-bottom:16px;
}

.heroCard{
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:var(--radius);
  box-shadow:none;
  padding:20px 22px;
}

.heroContent{
  max-width:720px;
}

.heroTitle{
  margin:0 0 6px;
  font-size:28px;
  line-height:1.15;
  font-weight:1000;
  color:var(--text);
  letter-spacing:-.02em;
}

.heroText{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  font-weight:900;
}

.heroGlow,
.heroEyebrow,
.heroActionsRow,
.heroStats{
  display:none;
}
/* SEARCH PANEL */
.searchPanel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:none;
  overflow:hidden;
}

.searchPanelHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:#fafafa;
}

.searchTabs{
  display:flex;
  gap:6px;
  align-items:center;
}

.searchTabBtn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#ffffff;
  padding:6px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size:12px;
  color:var(--text);
}

.searchTabBtn.active{
  border-color:#ff6a00;
  background:#fff3eb;
  color:#ff6a00;
}

.searchTabBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.searchPanelList{
  max-height:460px;
  overflow:auto;
}

.searchSection{
  padding:10px 12px 6px;
  font-weight:1000;
  font-size:12px;
  color:var(--muted);
}

.searchRow{
  width:100%;
  text-align:left;
  border:0;
  background:var(--panel);
  color:var(--text);
  padding:10px 12px;
  cursor:pointer;
  border-top:1px solid #f0f0f0;
}

.searchRow:hover{
  background:#fff8f3;
}

.searchRow:focus{
  outline:2px solid rgba(255,106,0,.15);
  outline-offset:-2px;
}

.srTitle{
  font-weight:1000;
  font-size:13px;
}

.srMeta{
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.srSub{
  margin-top:2px;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.searchEmpty{
  padding:14px 12px;
  color:var(--muted);
  font-weight:900;
}

.hl{
  background:var(--hl);
  border-radius:8px;
  padding:0 4px;
}

/* INDEX LAYOUT */
.grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:16px;
  align-items:start;
}

.main{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.mapCard,
.contentCard,
.side,
.exploreCard,
.cityHero,
.sideCard{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:none;
  overflow:hidden;
}

.contentCard{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.mapHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--border);
  background:#fafafa;
}

.bigTitle{
  font-size:16px;
  font-weight:1000;
}

.activeCity{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:260px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fffaf6;
}

.activeName{
  font-size:16px;
  font-weight:1000;
  color:var(--text);
}

#activeCityMeta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

#activeCityMeta b{
  color:var(--red);
}

.hoverLine{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.hoverDot{
  color:#c7b1a0;
  font-weight:900;
}

.mapArea{
  padding:14px;
  min-height:68vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

#map{
  width:100%;
  display:block;
}

#map svg{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  display:block;
}

/* Map styles */
#map svg [data-city]{
  cursor:pointer;
  fill:var(--map-base);
  stroke:var(--map-stroke);
  stroke-width:.55;
  transition:fill .14s ease, filter .14s ease, stroke .14s ease, stroke-width .14s ease;
}

#map svg [data-city]:focus,
#map svg [data-city]:focus-visible,
#map svg [data-city]:active{
  outline:none !important;
  box-shadow:none !important;
}

#map svg [data-city]:hover{
  fill:var(--map-hover);
  filter:none;
  stroke:var(--map-stroke-hover);
  stroke-width:.85;
}

/* Labels */
#map svg .city-label-group{
  pointer-events:none;
}

#map svg .city-label,
#map svg .city-plate{
  font-family:var(--font);
  fill:#1d1d1d;
  paint-order:stroke;
  stroke:#ffffff;
  stroke-width:3.8px;
  stroke-linejoin:round;
}

#map svg .city-label{
  font-weight:1000;
  letter-spacing:.25px;
  font-size:14px;
}

#map svg .city-plate{
  font-weight:1000;
  opacity:.95;
  font-size:11px;
}

#map svg .city-hot{
  fill:var(--labelHot) !important;
}

/* Explore */
.exploreCard{
  padding:12px 14px 14px;
}

.exploreHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.exploreHead h3{
  margin:0;
  font-size:14px;
  font-weight:1000;
}

.exploreGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

/* cards */
.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.cards.oneCol{
  grid-template-columns:1fr;
}

.story{
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:12px;
  background:#ffffff;
}

.storyTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  flex-wrap:wrap;
  gap:6px;
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #ffd7bf;
  background:#fff3eb;
  color:#ff6a00;
  font-weight:1000;
  font-size:12px;
}

.tagSoft{
  background:#fafafa;
  border:1px solid var(--border);
  color:var(--muted);
  opacity:1;
}

.story h3{
  margin:0 0 6px;
  font-size:15px;
}

.story p{
  margin:0;
  font-size:13px;
  color:var(--muted);
  font-weight:900;
}

/* forms + comments */
.formRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.input{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  outline:none;
  width:100%;
  background:#ffffff;
  color:var(--text);
}

.input:focus{
  border-color:#ffb287;
}

.select{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  outline:none;
  background:#ffffff;
  color:var(--text);
  width:100%;
}

.textarea{
  width:100%;
  min-height:140px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  outline:none;
  resize:vertical;
  background:#ffffff;
  color:var(--text);
}

.grow{
  flex:1;
}

.commentList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.comment{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:#ffffff;
}

.commentTop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}

.commentAuthor{
  font-weight:1000;
}

.commentDate{
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.commentText{
  margin-top:6px;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
}

.formGrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}

.label{
  display:block;
  margin:8px 0 6px;
  font-weight:1000;
  color:var(--muted);
  font-size:12px;
}

.submitActions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  background:var(--panel);
  border-top:1px solid var(--border);
}

/* SIDEBAR (index) */
.side{
  position:sticky;
  top:72px;
}

.sideHeader{
  padding:14px;
  border-bottom:1px solid var(--border);
  background:#fafafa;
}

.sideHeader h2{
  margin:0 0 4px;
  font-size:14px;
}

.sideHeader p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.sideBlock{
  padding:14px;
  border-top:1px solid var(--border);
}

.sideTitleRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.sideBlock h3{
  margin:0;
  font-size:12px;
  font-weight:1000;
}

.list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.listItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  background:#ffffff;
  color:var(--text);
}

.listItem:hover{
  border-color:#ffd7bf;
  background:#fff8f3;
}

.listItem .name{
  font-weight:1000;
  font-size:13px;
}

.badge{
  border:1px solid #ffd7bf;
  background:#fff3eb;
  color:#ff6a00;
  padding:6px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size:12px;
}

/* City page */
.cityGrid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:16px;
  align-items:start;
}

.cityMain{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

.citySide{
  position:sticky;
  top:72px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

.cityHero{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:none;
  padding:16px;
}

.cityHeroTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.cityName{
  font-size:22px;
  font-weight:1000;
}

.cityMeta{
  margin-top:4px;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.cityHeroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.cityHeroHint{
  margin-top:10px;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  border-top:1px solid var(--border);
  padding-top:10px;
}

.citySide{
  position:sticky;
  top:76px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sideCard{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:none;
  overflow:hidden;
}

.miniList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.miniRow{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  padding:10px;
  border-radius:10px;
  cursor:pointer;
}

.miniRow:hover{
  border-color:#ffd7bf;
  background:#fff8f3;
}

.linkRow{
  display:block;
  text-decoration:none;
  color:inherit;
}

.miniTitle{
  font-weight:1000;
  font-size:13px;
}

.miniMeta{
  margin-top:4px;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:80;
}

.modal.open{
  display:flex;
}

.modal .panel{
  width:min(920px, 100%);
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:none;
  overflow:hidden;
}

.modal header{
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
}

.modal header h2{
  margin:0;
  font-size:18px;
}

.modal .meta{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  margin-top:4px;
}

.modal .body{
  padding:14px;
  line-height:1.55;
  font-weight:900;
  white-space:pre-wrap;
}

/* responsive */
@media (max-width: 1100px){
  .grid{ grid-template-columns:1fr; }
  .side{ position:static; top:auto; }
  .exploreGrid{ grid-template-columns:1fr; }
  .cityGrid{ grid-template-columns:1fr; }
  .citySide{ position:static; top:auto; }
  .mapArea{ min-height:66vh; }
}

@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; }
  .searchWrap{ width:100%; order:3; }

  .heroCard{
    padding:22px 16px;
  }

  .heroTitle{
    font-size:30px;
  }

  .heroStats{
    flex-direction:column;
  }

  .heroStat{
    width:100%;
  }
}

/* =========================
   AD SLOTS (placeholder)
   ========================= */
.adSlot{
  position:relative;
  border:1px solid rgba(17,17,17,.08);
  background:linear-gradient(180deg,#ffffff 0%, #fffaf6 100%);
  border-radius:18px;
  padding:14px;
  margin:16px 0;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(17,17,17,.04);
}

.adSlot::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#ff6a00 0%, #ff9a52 100%);
  opacity:.95;
}

.adSlot .adLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:6px 10px;
  margin:0 0 10px 0;
  border-radius:999px;
  border:1px solid #ffd7bf;
  background:#fff3eb;
  color:#c84f00;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.adSlot .adLabel::before{
  content:"Reklam";
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.adSlot .adBox{
  min-height:116px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:14px;
  border:1px dashed rgba(255,106,0,.28);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98) 0%, rgba(255,248,243,.98) 100%);
  color:#5e5e5e;
  font-size:13px;
  font-weight:900;
  line-height:1.5;
  padding:18px 16px;
}

.adSlot.adInline .adBox{
  min-height:94px;
}

.adSlot.adInline{
  margin:14px 0;
}

.adSlot.adWide .adBox{
  min-height:140px;
}

.adSlot:hover{
  border-color:rgba(255,106,0,.18);
  box-shadow:0 14px 34px rgba(17,17,17,.06);
}

@media (max-width: 720px){
  .adSlot{
    padding:12px;
    border-radius:16px;
  }

  .adSlot .adBox{
    min-height:102px;
    padding:16px 12px;
    font-size:12px;
  }

  .adSlot.adWide .adBox{
    min-height:116px;
  }
}

/* küçük hata geri bildirimi */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.shake{
  animation:shake 0.35s ease-in-out;
}

/* Tabs (Hikâyeler / Yorumlar) */
.tabs{
  display:flex;
  gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:#fafafa;
}

.tabBtn{
  cursor:pointer;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:1000;
  font-size:12px;
}

.tabBtn.active{
  border-color:#ff6a00;
  background:#fff3eb;
  color:#ff6a00;
}

.tabPane{
  display:none;
}

.tabPane.active{
  display:block;
}

/* ===== FIXED SUBMIT MODAL + VOTES + FAVORITES ===== */
#submitModal{
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:24px 16px;
}

#submitModal.open{
  display:flex;
}

#submitModal .panel{
  width:min(920px,100%);
  max-height:92vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#submitModal .body{
  overflow-y:auto;
  max-height:calc(92vh - 72px);
  padding:14px 14px 18px;
  white-space:normal;
}

#submitModal form{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

#submitModal .submitActions{
  position:sticky;
  bottom:0;
  z-index:10;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
  padding:14px 0 6px;
  background:#ffffff;
  border-top:1px solid var(--border);
}

#btnSubmitStory{
  min-width:180px;
}

/* global modal scroll safety */
.modal .panel{
  max-height:90vh;
  display:flex;
  flex-direction:column;
}

.modal .body{
  overflow-y:auto;
  max-height:70vh;
}

/* story votes */
.storyVoteMount,
.storyFavoriteMount{
  margin-top:6px;
}

.storyVoteBar,
.storyFavoriteBar{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
  border-radius:16px;
  padding:10px 12px;
  flex-wrap:wrap;
}

.voteBtn,
.favoriteBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  border-radius:12px;
  cursor:pointer;
  font-weight:1000;
  line-height:1;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.voteBtn:hover,
.favoriteBtn:hover{
  border-color:#ffd7bf;
  background:#fff3eb;
}

.voteBtn:active,
.favoriteBtn:active{
  transform:scale(.97);
}

.voteBtnIcon,
.favoriteBtnIcon,
.voteBtnLabel,
.favoriteBtnLabel,
.voteBtnCount,
.favoriteBtnCount{
  pointer-events:none;
}

.voteBtnCount,
.favoriteBtnCount{
  min-width:18px;
}

.voteScore{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding-left:2px;
}

.voteScoreNum,
.favoriteCountNum{
  font-size:16px;
  font-weight:1000;
  color:var(--red);
}

.voteMeta,
.favoriteMeta{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.storyFavoriteBar{
  justify-content:space-between;
  min-height:60px;
}

.storyCommentComposerActionsRight{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.voteBtn.is-active,
.favoriteBtn.is-active{
  border-color:#ff6a00 !important;
  box-shadow:0 0 0 3px rgba(255,106,0,.12);
  background:#fff3eb !important;
  color:#d84d00 !important;
}

.voteBtn.pop,
.favoriteBtn.pop{
  animation:storyVotePop .28s ease;
}

@keyframes storyVotePop{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@media (max-width:760px){
  .storyPageTopbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .storyPageCard--main,
  .storyPageCommentCard{
    padding:16px 14px;
  }

  .storyPageUtilityBar .btn,
  .storyPageUtilityBar .btnSolid,
  .storyCommentComposerActionsRight .btnSolid{
    flex:1 1 auto;
  }

  .storyCommentComposerActions{
    align-items:stretch;
  }

  .storyVoteBar,
  .storyFavoriteBar{
    padding:10px;
  }
}

/* ===============================
   PACKAGE 4 — CITY INSIGHTS
   =============================== */

.cityInsights{
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:12px;
  padding:16px;
  margin-bottom:14px;
}

.cityInsightsHead{
  margin-bottom:14px;
}

.cityInsightsHead h3{
  margin:0;
  font-size:16px;
  font-weight:1000;
  color:var(--text);
}

.cityInsightStats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.cityInsightStat{
  border:1px solid var(--border);
  background:#fafafa;
  border-radius:10px;
  padding:14px 12px;
}

.cityInsightValue{
  display:block;
  font-size:20px;
  font-weight:1000;
  color:var(--text);
  margin-bottom:4px;
}

.cityInsightLabel{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}

.cityInsightGroup{
  margin-top:12px;
}

.cityInsightGroupTitle{
  font-size:12px;
  font-weight:1000;
  color:var(--muted);
  margin-bottom:8px;
}

.cityInsightChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.insightChip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #ffd7bf;
  background:#fff3eb;
  color:#ff6a00;
  font-size:12px;
  font-weight:900;
}

.insightChipVehicle{
  border-color:#ffe3d1;
  background:#fff8f3;
  color:#cc5500;
}

.activeCity{
  text-align:right;
}

@media (max-width: 720px){
  .cityInsightStats{
    grid-template-columns:1fr;
  }
}
/* PACKAGE 5 — TREND FLOW */
.exploreGrid .story{
  transition:background .12s ease, border-color .12s ease;
}

.exploreGrid .story:hover{
  background:#fff8f3;
  border-color:#ffd7bf;
}

.exploreGrid .story h3{
  cursor:inherit;
}
/* =========================
   EXPLORE BLOCKS
   ========================= */

.exploreBlock{
  margin-bottom:24px;
}

.exploreHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.exploreHead h3{
  margin:0;
  font-size:16px;
  font-weight:1000;
}

#viralStory .card{
  border:2px solid #ffd7bf;
  background:#fff8f3;
}

#viralStory .cardTitle{
  font-size:20px;
}

.viralSection{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:24px;
}

.viralCard{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}

.viralTitle{
  font-weight:900;
  margin-bottom:10px;
  color:var(--text);
}

.viralStory{
  font-weight:700;
  cursor:pointer;
  color:var(--text);
}

.viralStory:hover{
  text-decoration:underline;
}

/* PRESERVE FIXES */
.viralCard{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}

.viralTitle{
  font-weight:900;
  margin-bottom:10px;
  color:var(--text);
}

.viralStory{
  font-weight:700;
  cursor:pointer;
  color:var(--text);
}

.viralStory:hover{
  text-decoration:underline;
}
/* HERO RESTORE FIX */

.hero{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px 28px 22px;
  margin-bottom:18px;
}

.heroContent{
  max-width:760px;
}

.hero h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.1;
  font-weight:1000;
  color:var(--text);
  letter-spacing:-0.02em;
}

.heroKicker{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  margin:0 0 14px;
  font-size:12px;
  font-weight:900;
  color:var(--red);
  background:#fff3eb;
  border:1px solid #ffd7bf;
  border-radius:999px;
}

.hero p{
  margin:0;
  max-width:700px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  font-weight:800;
}

.heroStats{
  display:flex;
  gap:14px;
  margin-top:20px;
  flex-wrap:wrap;
}

.heroStat{
  min-width:110px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fafafa;
  display:flex;
  flex-direction:column;
}

.heroStatNumber{
  font-size:24px;
  line-height:1.05;
  font-weight:1000;
  color:var(--red);
}

.heroStatLabel{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
/* STORY MODAL - COMPACT + SINGLE TOOLBAR */
#storyModal{
  align-items:center !important;
  justify-content:center !important;
}

#storyModal .panel{
  width:min(920px, calc(100vw - 32px)) !important;
  max-height:86vh !important;
  min-height:auto !important;
  overflow-y:auto !important;
  display:flex !important;
  flex-direction:column !important;
}

#storyModal header{
  padding:16px 18px 12px !important;
  flex:0 0 auto !important;
}

#storyModal .body{
  padding:14px 18px 18px !important;
  min-height:auto !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

/* genel boşlukları azalt */
#storyModal .body > *{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

#storyModal p,
#storyModal .storyContent,
#storyModal .storyBody{
  margin:0 0 8px !important;
  line-height:1.6 !important;
}

/* ===== tek satır toolbar mantığı ===== */
/* oy, favori ve paylaş bloklarını aynı bar gibi göster */
#storyModal .storyActions,
#storyModal .storyFav,
#storyModal .storyShare,
#storyModal .storyMeta,
#storyModal .storyToolbar{
  min-height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* bu 3 blok yan yana dizilsin */
#storyModal .storyActions,
#storyModal .storyFav,
#storyModal .storyShare{
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
}

/* ortak toolbar görünümü */
#storyModal .storyActions{
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:10px 12px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:16px !important;
  background:#fff !important;
}

/* favori ve paylaş blokları aynı bara otursun */
#storyModal .storyFav{
  margin-left:10px !important;
}

#storyModal .storyShare{
  margin-left:auto !important;
  gap:10px !important;
}

/* storyActions içindeki fazla yüksekliği düşür */
#storyModal .storyActions button,
#storyModal .storyActions .btn,
#storyModal .storyFav button,
#storyModal .storyFav .btn,
#storyModal .storyShare button,
#storyModal .storyShare .btn{
  height:42px !important;
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:12px !important;
}

/* oy kutuları küçülsün */
#storyModal .storyActions .voteBtn,
#storyModal .storyActions [data-vote],
#storyModal .storyActions .voteButton{
  min-width:46px !important;
  width:auto !important;
  padding:0 12px !important;
}

/* puan alanı hizalansın */
#storyModal .storyActions .voteScore,
#storyModal .storyActions .storyScore,
#storyModal .storyActions .scoreText{
  margin:0 4px !important;
  font-size:15px !important;
  line-height:1 !important;
}

/* favori sayısı metni */
#storyModal .storyFav .favCount,
#storyModal .storyFav .favoriteCount,
#storyModal .storyFav .saveCount{
  margin-left:8px !important;
}

/* paylaşım butonları */
#storyModal .storyShare .btn,
#storyModal .storyShare button{
  white-space:nowrap !important;
}

/* toolbar tek parça gibi görünsün diye body içindeki sırayı korurken sıkıştır */
#storyModal .storyActions + .storyFav,
#storyModal .storyFav + .storyShare{
  margin-top:0 !important;
}

/* yorum alanı */
#storyModal .storyComments,
#storyModal .commentsWrap,
#storyModal .commentSection,
#storyModal .storyCommentWrap{
  min-height:auto !important;
  height:auto !important;
  margin-top:6px !important;
  padding-top:0 !important;
}

#storyCommentText{
  min-height:88px !important;
  height:88px !important;
  max-height:120px !important;
  resize:vertical !important;
}

#storyCommentAuthor{
  height:42px !important;
}

#btnSubmitStoryComment{
  height:46px !important;
  padding:0 18px !important;
  align-self:flex-end !important;
}

#storyModal hr{
  margin:8px 0 !important;
}

/* mobil */
@media (max-width: 768px){
  #storyModal .panel{
    width:calc(100vw - 16px) !important;
    max-height:92vh !important;
  }

  #storyModal header{
    padding:14px 14px 10px !important;
  }

  #storyModal .body{
    padding:12px 14px 14px !important;
    gap:10px !important;
  }

  #storyModal .storyActions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding:10px !important;
  }

  #storyModal .storyFav,
  #storyModal .storyShare{
    margin-left:0 !important;
  }

  #storyModal .storyShare{
    width:100% !important;
    justify-content:flex-start !important;
  }

  #storyCommentText{
    min-height:76px !important;
    height:76px !important;
  }
}
/* COMMENT FORM POLISH */
#storyModal #storyCommentAuthor{
  width:100% !important;
  display:block !important;
  margin:0 0 10px !important;
  border:1px solid var(--border) !important;
  background:#ffffff !important;
  border-radius:12px !important;
  padding:0 12px !important;
  font-weight:900 !important;
}

#storyModal #storyCommentText{
  width:100% !important;
  display:block !important;
  min-height:120px !important;
  height:120px !important;
  max-height:220px !important;
  border:1px solid var(--border) !important;
  background:#ffffff !important;
  border-radius:12px !important;
  padding:12px !important;
  line-height:1.55 !important;
  resize:vertical !important;
  overflow-y:auto !important;
  margin:0 !important;
}

#storyModal #storyCommentAuthor:focus,
#storyModal #storyCommentText:focus{
  outline:none !important;
  border-color:#ffb287 !important;
  box-shadow:0 0 0 3px rgba(255,106,0,.08) !important;
}

#storyModal #commentCounter,
#storyModal #storyCommentStatus{
  display:block !important;
  width:100% !important;
  text-align:right !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:var(--muted) !important;
  margin-top:6px !important;
}

#storyModal #storyCommentStatus{
  text-align:left !important;
}

#storyModal #btnSubmitStoryComment{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:150px !important;
  margin-top:10px !important;
  margin-left:auto !important;
  border:1px solid #ff6a00 !important;
  background:#ff6a00 !important;
  color:#ffffff !important;
  border-radius:10px !important;
  font-weight:1000 !important;
}

#storyModal #btnSubmitStoryComment:hover{
  background:#e55c00 !important;
  border-color:#e55c00 !important;
}

#storyModal #btnSubmitStoryComment:disabled{
  opacity:.6 !important;
  cursor:not-allowed !important;
}

@media (max-width: 768px){
  #storyModal #storyCommentText{
    min-height:96px !important;
    height:96px !important;
  }

  #storyModal #btnSubmitStoryComment{
    width:100% !important;
    min-width:0 !important;
  }
}
/* CITY COMMENT FORM - EXACT FIX */
#cityCommentForm{
  display:grid !important;
  grid-template-columns: 1fr 140px !important;
  gap:10px !important;
  align-items:start !important;
}

#cityCommentAuthor{
  grid-column:1 / 3 !important;
  width:100% !important;
  min-width:0 !important;
  height:48px !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}

#cityCommentText{
  grid-column:1 / 2 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
  height:48px !important;
  max-height:48px !important;
  padding:12px 14px !important;
  box-sizing:border-box !important;
  resize:none !important;
  overflow:hidden !important;
  display:block !important;
}

#cityCommentForm button,
#cityCommentForm .btn,
#cityCommentForm [type="submit"]{
  grid-column:2 / 3 !important;
  width:140px !important;
  min-width:140px !important;
  height:48px !important;
  align-self:stretch !important;
  justify-self:end !important;
}

@media (max-width: 768px){
  #cityCommentForm{
    grid-template-columns:1fr !important;
  }

  #cityCommentAuthor,
  #cityCommentText,
  #cityCommentForm button,
  #cityCommentForm .btn,
  #cityCommentForm [type="submit"]{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
  }
}


/* LEGAL LINKS FOOTER */
.siteFooter{
  margin-top:20px;
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:var(--radius);
  padding:16px;
}

.siteFooterTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.siteFooterTitle{
  margin:0 0 6px;
  font-size:15px;
  font-weight:1000;
  color:var(--text);
}

.siteFooterText{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}

.siteFooterNav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.siteFooterNav a{
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
}

.siteFooterNav a:hover{
  border-color:#ffd7bf;
  background:#fff3eb;
  color:var(--red);
}

@media (max-width:768px){
  .siteFooterTop{
    flex-direction:column;
    align-items:stretch;
  }

  .siteFooterNav{
    gap:6px;
  }

  .siteFooterNav a{
    width:100%;
    text-align:center;
  }
}

/* HOMEPAGE LEGAL FOOTER PLACEMENT */
.main + .siteFooter,
.grid + .siteFooter{
  margin-top:18px;
}

.siteFooter{
  margin:18px 0 0;
}

.siteFooterTitle{
  letter-spacing:-.01em;
}

.siteFooterText{
  max-width:760px;
  line-height:1.6;
}


/* Logo polish */

.brandLink:hover{
  text-decoration:none;
}

.brand h1{
  display:flex;
  align-items:baseline;
  gap:6px;
  line-height:1;
}

.brand h1 span{
  color:var(--text);
}

.topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
}

@media (max-width: 720px){
  

  .brand h1{
    font-size:16px;
    gap:4px;
    flex-wrap:wrap;
  }
}


/* PREMIUM HEADER MOBILE */
@media (max-width: 720px){
  .brand{
    gap:5px;
  }

  

  .brand h1{
    font-size:16px;
  }
}


/* HEADER LOGO FIX */
.logoIcon{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  flex:0 0 42px;
  border-radius:12px;
}

@media (max-width: 720px){
  .brand{
    gap:7px;
  }

  .logoIcon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .brand h1{
    font-size:16px;
  }
}
/* STORY MODAL - TOOLBAR POLISH */
#storyModal .storyVoteBar,
#storyModal .storyFavoriteBar{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:14px !important;
  padding:10px 12px !important;
  box-shadow:none !important;
}

#storyModal .storyVoteBar{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

#storyModal .storyFavoriteBar{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
}

#storyModal .storyVoteBar button,
#storyModal .storyFavoriteBar button{
  height:42px !important;
  min-height:42px !important;
  border-radius:12px !important;
  font-weight:1000 !important;
}

#storyModal .storyVoteBar .voteScore,
#storyModal .storyFavoriteBar .favCount{
  font-size:15px !important;
  font-weight:1000 !important;
}

#storyCommentAuthor{
  margin-bottom:10px !important;
  border-radius:12px !important;
}

#storyCommentText{
  border-radius:14px !important;
}

#storyCommentList{
  display:block !important;
  margin-top:14px !important;
}

#storyCommentList .commentItem{
  border:1px solid var(--border);
  background:#fafafa;
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}

#storyCommentList .commentHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

#storyCommentList .commentBody{
  line-height:1.55;
  color:var(--text);
  font-weight:800;
}
/* STORY READING + COMMENT FINAL POLISH */
#storyModal .storyCommentSection{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:6px;
}

#storyModal .storyCommentSectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

#storyModal .storyCommentTitle{
  font-size:16px;
  font-weight:1000;
  color:var(--text);
}

#storyModal .storyCommentHint{
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}

#storyModal .storyCommentComposer{
  border:1px solid var(--border);
  background:#fafafa;
  border-radius:14px;
  padding:12px;
}

#storyModal .storyCommentComposerActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

#storyModal #storyCommentList{
  display:flex !important;
  flex-direction:column;
  gap:10px;
  margin-top:4px !important;
}

#storyModal #storyCommentList .commentItem{
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:14px;
  padding:12px;
}

#storyModal #storyCommentList .commentHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
}

#storyModal #storyCommentList .commentAuthorLine{
  display:flex;
  align-items:center;
  gap:8px;
}

#storyModal #storyCommentList .commentBody{
  line-height:1.6;
  color:var(--text);
  font-weight:800;
  white-space:pre-wrap;
}

@media (max-width: 768px){
  #storyModal .storyCommentComposerActions{
    flex-direction:column;
    align-items:stretch;
  }

  #storyModal .storyCommentSectionHead{
    flex-direction:column;
    align-items:flex-start;
  }

  #storyModal #storyCommentList .commentHead{
    flex-direction:column;
    align-items:flex-start;
  }
}

.commentPending{opacity:.7;background:#fff8f3;border-style:dashed}
#storyCommentCount{font-weight:900;font-size:12px;color:var(--muted)}


/* ===== STORY DETAIL PAGE ===== */
.storyPage .wrap{
  max-width:1400px;
}

.storyPageLayout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(320px, 430px);
  gap:18px;
  align-items:start;
}

.storyPageMainCard,
.storyPageSideCard{
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:var(--radius);
  overflow:hidden;
}

.storyPageMainCard{
  padding:18px 20px 22px;
}

.storyPageSideCard{
  position:sticky;
  top:78px;
  padding:16px;
}

.storyPageEyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid #ffd7bf;
  border-radius:999px;
  background:#fff3eb;
  color:#ff6a00;
  font-size:12px;
  font-weight:1000;
  margin-bottom:10px;
}

.storyPageTitle{
  margin:0;
  font-size:30px;
  line-height:1.12;
  font-weight:1000;
  letter-spacing:-.02em;
}

.storyPageMeta{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}

.storyPageContent{
  margin-top:18px;
  font-size:15px;
  line-height:1.8;
  color:var(--text);
  white-space:pre-wrap;
}

.storyPageActionWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.08);
}

.storyPageUtilityBar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.storyPageCommentList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.storyPageCommentList .commentItem{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:16px;
  padding:12px 12px 12px 16px;
  position:relative;
}

.storyPageCommentList .commentItem::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background:#ff6a00;
  opacity:.18;
}

.storyPageCommentList .commentPending{
  background:#fff8f3;
  border-style:dashed;
}

.storyPageCommentList .commentHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.storyPageCommentList .commentBody{
  line-height:1.65;
  white-space:pre-wrap;
}

.storyPageStatus{
  margin-top:14px;
  text-align:center;
}

@media (max-width: 1024px){
  .storyPageLayout{
    grid-template-columns:1fr;
  }
  .storyPageSideCard{
    position:static;
    top:auto;
  }
}

@media (max-width: 720px){
  .storyPageMainCard{
    padding:14px 14px 18px;
  }
  .storyPageSideCard{
    padding:14px;
  }
  .storyPageTitle{
    font-size:24px;
  }
  .storyPageUtilityBar{
    flex-direction:column;
  }
  .storyPageUtilityBar .btn,
  .storyPageUtilityBar .btnSolid{
    width:100%;
  }
}



/* ===== FINAL STORY PAGE PATCH ===== */
.storyPageWrap{
  max-width:1180px;
  margin:0 auto;
  padding:24px 16px 40px;
}
.storyPageTopbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  background:#fff;
  margin-bottom:18px;
}
.storyPageLayout--single{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}
.storyPageCard--main,
.storyPageCommentCard,
.storyPageAd{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  overflow:hidden;
}
.storyPageCard--main{ padding:22px 22px 20px; }
.storyPageCommentCard{ padding:18px; }
.storyPageAd{
  position:relative;
  padding:16px 18px;
  background:linear-gradient(180deg,#ffffff 0%, #fffaf6 100%);
  border-style:solid;
  border-color:rgba(17,17,17,.08);
  box-shadow:0 10px 28px rgba(17,17,17,.04);
}
.storyPageAdLabel{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff3eb;
  color:#c84f00;
  border:1px solid #ffd7bf;
  font-size:11px;
  font-weight:1000;
  margin-bottom:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.storyPageAdBody{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#5e5e5e;
  font-size:13px;
  font-weight:900;
  line-height:1.5;
  border:1px dashed rgba(255,106,0,.28);
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%, #fff8f3 100%);
  padding:14px 12px;
}
.storyPageTopText{ min-width:0; }
.storyPageUtilityBar{ display:flex; gap:10px; flex-wrap:wrap; }
.storyPageUtilityBar .btn,
.storyPageUtilityBar .btnSolid{ min-height:42px; }
.storyCommentComposerActionsRight{
  display:flex;
  gap:10px;
  align-items:center;
}
.storyPageCommentList{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.storyPageCommentList .commentItem{
  position:relative;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#fff;
  padding:14px 14px 14px 16px;
  overflow:hidden;
}
.storyPageCommentList .commentItem::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background:#ff6a00;
  opacity:.18;
}
.storyPageCommentList .commentPending{
  background:#fff8f3;
  border-style:dashed;
}
.storyPageCommentList .commentHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.storyPageCommentList .commentBody{
  font-size:16px;
  line-height:1.72;
  white-space:pre-wrap;
  word-break:break-word;
}
.storyPageCard--main{
  box-shadow:0 18px 50px rgba(17,17,17,.06);
}
.storyPageActionWrap{
  gap:14px;
}
.storyPageUtilityBar{
  align-items:center;
}
.storyVoteBar,
.storyFavoriteBar{
  min-height:56px;
  border-radius:16px;
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
}
.voteBtn,
.favoriteBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.voteBtn:active,
.favoriteBtn:active{
  transform:scale(.97);
}
.voteBtnCount,
.favoriteBtnCount{
  min-width:18px;
}
.storyCommentComposerActionsRight{
  display:flex;
  gap:10px;
  align-items:center;
}
.voteBtn.is-active,
.favoriteBtn.is-active{
  border-color:#ff6a00 !important;
  box-shadow:0 0 0 3px rgba(255,106,0,.12);
  background:#fff3eb !important;
  color:#d84d00 !important;
}
.voteBtn.pop,
.favoriteBtn.pop{
  animation:storyVotePop .28s ease;
}
@keyframes storyVotePop{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@media (max-width:760px){
  .storyPageTopbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .storyPageCard--main,
  .storyPageCommentCard{
    padding:16px 14px;
  }
  .storyPageUtilityBar .btn,
  .storyPageUtilityBar .btnSolid{
    flex:1 1 auto;
  }
  .storyCommentComposerActions{
    align-items:stretch;
  }
  .storyCommentComposerActionsRight{
    width:100%;
    justify-content:space-between;
  }
}


/* city page card layout restore */
#cityCards.cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

#cityCards .card,
#topReadStories .card{
  border:1px solid var(--border);
  border-radius:18px;
  background:#ffffff;
  box-shadow:none;
  overflow:hidden;
}

#cityCards .card{
  padding:16px;
}

#cityCards .cardTop,
#topReadStories .cardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

#cityCards .cardBadges,
#topReadStories .cardBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#cityCards .storyChip,
#topReadStories .storyChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid #ffd7bf;
  background:#fff7f1;
  color:#ff6a00;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

#cityCards .cardTitle,
#topReadStories .cardTitle{
  margin:0 0 12px;
  color:#111111;
  font-size:17px;
  line-height:1.25;
  font-weight:1000;
}

#cityCards .cardExcerpt,
#topReadStories .cardExcerpt{
  margin:0;
  color:#5f5f5f;
  font-size:14px;
  line-height:1.55;
  font-weight:800;
}

#cityCards .cardMetaRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:14px 0 12px;
}

#cityCards .cardMeta{
  color:#666666;
  font-size:13px;
  font-weight:900;
}

#cityCards .storyVoteMount,
#cityCards .storyFavoriteMount{
  margin-top:10px;
}

#cityCards .cardActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:14px;
}

#cityCards .btnRead{
  min-width:58px;
  min-height:40px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid #ff6a00;
  background:#ff6a00;
  color:#ffffff;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
}

#cityCards .btnRead:hover{
  background:#ea6100;
  border-color:#ea6100;
}

#topReadStories.miniList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#topReadStories .card{
  padding:18px 16px;
}

#topReadStories .cardTitle{
  margin-bottom:10px;
  font-size:15px;
}

#topReadStories .cardExcerpt{
  overflow:hidden;
  line-height:1.55;
  max-height:3.1em;
}

#topReadStories .card:hover{
  border-color:#ffd7bf;
  background:#fffdfa;
}

@media (max-width:1100px){
  #cityCards.cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  #cityCards.cards{
    grid-template-columns:1fr;
  }
}


/* STABLE RESTORE PATCH */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.brand .dot{
  display:none !important;
}
.logoIcon{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  flex:0 0 42px;
  border-radius:12px;
}
.brand h1{
  margin:0;
  font-size:18px;
  font-weight:1000;
  color:var(--red);
  letter-spacing:-0.02em;
  line-height:1;
}
.searchWrap{
  position:relative;
  flex:1;
  min-width:240px;
}
.searchBox{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:#ffffff;
  border-radius:999px;
  padding:8px 10px;
}
.storyFavoriteMount,
.storyPageFavoriteMount{
  display:none !important;
}
.storyPageMiniStory{
  display:flex;
  flex-direction:column;
  min-height:208px;
  overflow:hidden;
}
.storyPageMiniExcerpt{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  min-height:3.95em;
  word-break:break-word;
}
.storyPageMiniMeta{
  margin-top:auto;
}
.storyVoteBar.storyVoteBar--split{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
  border-radius:18px;
  flex-wrap:nowrap;
}
.storyVoteBar.storyVoteBar--split .voteBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:76px;
  height:52px;
  padding:0 16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  font-weight:1000;
  font-size:14px;
  line-height:1;
}
.storyVoteBar.storyVoteBar--split .voteGlyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  flex:0 0 auto;
}
.storyVoteBar.storyVoteBar--split .voteCount{
  display:inline-block;
  font-size:18px;
  font-weight:1000;
  line-height:1;
  color:var(--text);
  min-width:10px;
}
.storyVoteBar.storyVoteBar--split .voteMeta,
.storyVoteBar.storyVoteBar--split .redditVoteScore{
  display:none !important;
}
#topReadStories .card,
#topReadStories .storyPageMiniStory{
  display:flex;
  flex-direction:column;
  min-height:208px;
  overflow:hidden;
}
#topReadStories .cardExcerpt,
.storyPageMiniExcerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  word-break:break-word;
}
#topReadStories .cardExcerpt{
  min-height:3.95em;
}
#topReadStories .cardMeta,
.storyPageMiniMeta{
  margin-top:auto;
}
@media (max-width:760px){
  .logoIcon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .brand h1{
    font-size:16px;
  }
  .searchWrap{
    width:100%;
    order:3;
    min-width:0;
  }
  .storyVoteBar.storyVoteBar--split{
    width:100%;
    justify-content:space-between;
  }
  .storyVoteBar.storyVoteBar--split .voteBtn{
    flex:1 1 0;
    min-width:0;
  }
}



/* STABLE VOTE UI */
.storyVoteBar{
  display:flex;
  align-items:center;
  gap:12px;
}

.storyVoteBar .voteBtn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  font-weight:1000;
}

.storyVoteBar .voteGlyph{
  font-size:18px;
}

.storyVoteBar .voteCount{
  font-size:16px;
  font-weight:1000;
}


/* FINAL TRUE PIXEL PERFECT */

.storyVoteBar.storyVoteBar--compact{
  display:flex;
  align-items:center;
  gap:6px;

  /* ❌ dış kutuyu tamamen kaldır */
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
}

/* buton */
.storyVoteBar.storyVoteBar--compact .voteBtn{
  display:flex;
  align-items:center;
  gap:4px;

  height:30px;
  padding:0 10px;

  border:1px solid #f1f1f1; /* daha soft */
  background:#fff;

  border-radius:8px;
  font-size:13px;
  font-weight:600;

  transition:all .12s ease;
}

/* hover */
.storyVoteBar.storyVoteBar--compact .voteBtn:hover{
  background:#fafafa;
}

/* aktif */
.storyVoteBar.storyVoteBar--compact .redditVoteBtnUp.is-active{
  background:#fff4ec;
  border-color:#ffe2d0;
  color:#ff6a00;
}

.storyVoteBar.storyVoteBar--compact .redditVoteBtnDown.is-active{
  background:#f5f8ff;
  border-color:#e2ecff;
  color:#2563eb;
}

/* ikon */
.storyVoteBar.storyVoteBar--compact .voteGlyph{
  font-size:14px;
}

/* sayı */
.storyVoteBar.storyVoteBar--compact .voteCount{
  font-size:13px;
}


.storyVoteBar.storyVoteBar--compact .voteBtn,
.storyVoteBar.storyVoteBar--compact .redditVoteBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-width:auto !important;
  width:auto !important;
  height:38px !important;
  padding:0 12px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  background:#fff !important;
  color:var(--text) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  transition:border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease !important;
}

.storyVoteBar.storyVoteBar--compact .voteBtn:hover,
.storyVoteBar.storyVoteBar--compact .redditVoteBtn:hover{
  border-color:#ffd7bf !important;
  background:#fff3eb !important;
  color:#ff6a00 !important;
  transform:translateY(-1px) !important;
}

.storyVoteBar.storyVoteBar--compact .redditVoteBtnUp.is-active{
  border-color:#ffb27d !important;
  background:#fff3eb !important;
  color:#ff6a00 !important;
}

.storyVoteBar.storyVoteBar--compact .redditVoteBtnDown.is-active{
  border-color:#b7d0ff !important;
  background:#f3f7ff !important;
  color:#2563eb !important;
}

.storyVoteBar.storyVoteBar--compact .voteGlyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:17px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

.storyVoteBar.storyVoteBar--compact .voteCount{
  display:inline-block !important;
  min-width:0 !important;
  font-size:15px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  color:inherit !important;
}

.storyVoteBar.storyVoteBar--compact .voteMeta,
.storyVoteBar.storyVoteBar--compact .redditVoteScore{
  display:none !important;
}

.storyPageActionWrap .storyPageVoteMount{
  display:flex;
  align-items:center;
}

@media (max-width:760px){
  .storyVoteBar.storyVoteBar--compact{
    width:auto !important;
    justify-content:flex-start !important;
  }

  .storyVoteBar.storyVoteBar--compact .voteBtn,
  .storyVoteBar.storyVoteBar--compact .redditVoteBtn{
    flex:0 0 auto !important;
    min-width:auto !important;
    height:36px !important;
    padding:0 10px !important;
    border-radius:10px !important;
  }

  .storyVoteBar.storyVoteBar--compact .voteGlyph{
    font-size:16px !important;
  }

  .storyVoteBar.storyVoteBar--compact .voteCount{
    font-size:14px !important;
  }
}
.storyVoteInline{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}

#storyVoteMount{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
}
/* HARD RESET - vote container tamamen sıfırla */

#storyVoteMount .storyVoteBar{
  all: unset !important;

  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

/* butonlar tekrar düzgün stil alsın */

#storyVoteMount .voteBtn{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;

  height:30px !important;
  padding:0 10px !important;

  border:1px solid #f1f1f1 !important;
  background:#fff !important;

  border-radius:8px !important;
  font-size:13px !important;
  font-weight:600 !important;
}

/* hover */
#storyVoteMount .voteBtn:hover{
  background:#fafafa !important;
}

/* aktif */
#storyVoteMount .redditVoteBtnUp.is-active{
  background:#fff4ec !important;
  border-color:#ffe2d0 !important;
  color:#ff6a00 !important;
}

#storyVoteMount .redditVoteBtnDown.is-active{
  background:#f5f8ff !important;
  border-color:#e2ecff !important;
  color:#2563eb !important;
}

/* ikon */
#storyVoteMount .voteGlyph{
  font-size:14px !important;
}

/* sayı */
#storyVoteMount .voteCount{
  font-size:13px !important;
}


/* STORY VOTE AND COMMENT SIZE POLISH */
#storyVoteMount .storyVoteBar,
.storyVoteInline .storyVoteBar,
.storyVoteBar.storyVoteBar--compact{
  gap:5px !important;
}

#storyVoteMount .voteBtn,
.storyVoteInline .voteBtn,
.storyVoteBar.storyVoteBar--compact .voteBtn,
.storyVoteBar.storyVoteBar--compact .redditVoteBtn{
  height:28px !important;
  padding:0 9px !important;
  border-radius:8px !important;
  gap:4px !important;
  font-size:12px !important;
  font-weight:700 !important;
}

#storyVoteMount .voteGlyph,
.storyVoteInline .voteGlyph,
.storyVoteBar.storyVoteBar--compact .voteGlyph{
  font-size:13px !important;
  line-height:1 !important;
}

#storyVoteMount .voteCount,
.storyVoteInline .voteCount,
.storyVoteBar.storyVoteBar--compact .voteCount{
  font-size:12px !important;
  line-height:1 !important;
}

.storyCommentComposerActions .btnSolid,
.storyCommentComposerActions .btn,
.commentActionRow .commentActionBtn,
.commentActionRow .redditActionBtn,
.inlineThreadFooter .commentActionBtn,
.inlineThreadFooter .redditActionBtn.redditReplyBtn,
.redditActionBtn.redditReplyBtn,
.commentActionBtn{
  min-height:32px !important;
  height:32px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:900 !important;
}

#btnSubmitStoryComment{
  min-height:34px !important;
  height:34px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:1000 !important;
}

.storyPageUtilityBar .btn,
.storyPageUtilityBar .btnSolid{
  min-height:38px !important;
  height:38px !important;
  padding:0 14px !important;
  border-radius:10px !important;
}

@media (max-width:760px){
  #storyVoteMount .voteBtn,
  .storyVoteInline .voteBtn,
  .storyVoteBar.storyVoteBar--compact .voteBtn,
  .storyVoteBar.storyVoteBar--compact .redditVoteBtn{
    height:27px !important;
    padding:0 8px !important;
  }

  .storyCommentComposerActions .btnSolid,
  .storyCommentComposerActions .btn,
  .commentActionRow .commentActionBtn,
  .commentActionRow .redditActionBtn,
  .inlineThreadFooter .commentActionBtn,
  .inlineThreadFooter .redditActionBtn.redditReplyBtn,
  #btnSubmitStoryComment{
    min-height:31px !important;
    height:31px !important;
  }

  .storyPageUtilityBar .btn,
  .storyPageUtilityBar .btnSolid{
    min-height:36px !important;
    height:36px !important;
  }
}
/* FINAL BALANCE FIX */

/* vote biraz büyüsün */
#storyVoteMount .voteBtn{
  height:30px !important;
  padding:0 10px !important;
}

#storyVoteMount .voteGlyph{
  font-size:14px !important;
}

#storyVoteMount .voteCount{
  font-size:13px !important;
}

/* yorum gönder butonu küçülsün */
#btnSubmitStoryComment{
  height:32px !important;
  min-height:32px !important;
  padding:0 12px !important;
  font-size:12px !important;
  border-radius:10px !important;
}
/* FINAL MICRO POLISH */

/* vote ile alt butonlar arası denge */
#storyVoteMount{
  margin-bottom: 8px !important;
}

/* vote biraz daha ortalansın */
#storyVoteMount .storyVoteBar{
  align-items: center !important;
}

/* yorum gönder butonu son dokunuş */
#btnSubmitStoryComment{
  height:30px !important;
  min-height:30px !important;
  padding:0 10px !important;
  font-size:12px !important;
}


/* STORY COMMENT AND VOTE ALIGN FIX */
.storyPageActionWrap--top{
  margin-top: 16px;
  padding-top: 14px;
}

.storyPageActionWrap--top .storyVoteInline,
.storyPageActionWrap--top #storyVoteMount{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px 0 !important;
}

.storyPageActionWrap--top .storyPageUtilityBar{
  margin-top:0 !important;
}

.commentActionRow,
.inlineThreadFooter{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.commentActionRow .commentActionBtn,
.commentActionRow .redditActionBtn,
.inlineThreadFooter .commentActionBtn,
.inlineThreadFooter .redditActionBtn,
.redditActionBtn.redditReplyBtn,
.commentActionBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  border:1px solid #f1f1f1 !important;
  background:#fff !important;
  color:var(--text) !important;
  box-shadow:none !important;
}

.commentActionRow .commentActionBtn:hover,
.commentActionRow .redditActionBtn:hover,
.inlineThreadFooter .commentActionBtn:hover,
.inlineThreadFooter .redditActionBtn:hover,
.redditActionBtn.redditReplyBtn:hover,
.commentActionBtn:hover{
  background:#fafafa !important;
}

.commentActionRow .voteGlyph,
.commentActionRow .voteCount,
.inlineThreadFooter .voteGlyph,
.inlineThreadFooter .voteCount{
  font-size:12px !important;
  line-height:1 !important;
}

@media (max-width:760px){
  .storyPageActionWrap--top{
    margin-top:14px;
    padding-top:12px;
  }

  .commentActionRow .commentActionBtn,
  .commentActionRow .redditActionBtn,
  .inlineThreadFooter .commentActionBtn,
  .inlineThreadFooter .redditActionBtn,
  .redditActionBtn.redditReplyBtn,
  .commentActionBtn{
    min-height:27px !important;
    height:27px !important;
    padding:0 9px !important;
  }
}


/* STORY COMMENT AND VOTE FINAL FIX */
.storyPageActionWrap{
  margin-top: 14px !important;
  padding-top: 14px !important;
}

.storyPageActionWrap .storyVoteInline,
.storyPageActionWrap #storyVoteMount{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 10px 0 !important;
}

.storyPageActionWrap .storyPageUtilityBar{
  margin-top:0 !important;
}

.commentActionRow,
.inlineThreadFooter,
.commentFooterActions,
.commentActions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}

.commentActionBtn,
.replyBtn,
.redditReplyBtn,
.commentReplyBtn,
.commentActionRow .commentActionBtn,
.commentActionRow .redditActionBtn,
.inlineThreadFooter .commentActionBtn,
.inlineThreadFooter .redditReplyBtn,
.inlineThreadFooter .redditActionBtn,
.commentFooterActions .commentActionBtn,
.commentFooterActions .redditReplyBtn,
.commentActions .commentActionBtn,
.commentActions .redditReplyBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
  border:1px solid #f1f1f1 !important;
  background:#fff !important;
  color:var(--text) !important;
  box-shadow:none !important;
  text-decoration:none !important;
}

.commentActionBtn:hover,
.replyBtn:hover,
.redditReplyBtn:hover,
.commentReplyBtn:hover,
.commentActionRow .commentActionBtn:hover,
.commentActionRow .redditActionBtn:hover,
.inlineThreadFooter .commentActionBtn:hover,
.inlineThreadFooter .redditReplyBtn:hover,
.inlineThreadFooter .redditActionBtn:hover{
  background:#fafafa !important;
}

.commentActionRow .voteGlyph,
.commentActionRow .voteCount,
.inlineThreadFooter .voteGlyph,
.inlineThreadFooter .voteCount{
  font-size:12px !important;
  line-height:1 !important;
}

@media (max-width:760px){
  .commentActionBtn,
  .replyBtn,
  .redditReplyBtn,
  .commentReplyBtn,
  .commentActionRow .commentActionBtn,
  .commentActionRow .redditActionBtn,
  .inlineThreadFooter .commentActionBtn,
  .inlineThreadFooter .redditReplyBtn,
  .inlineThreadFooter .redditActionBtn{
    min-height:27px !important;
    height:27px !important;
    padding:0 9px !important;
  }
}



/* REPLY BUTTON = VOTE STYLE + ORANGE GLOW */
.redditReplyBtn,
.replyBtn,
.commentReplyBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;

  height:30px !important;
  padding:0 10px !important;

  border:1px solid #f1f1f1 !important;
  background:#fff !important;

  border-radius:8px !important;
  font-size:13px !important;
  font-weight:600 !important;

  transition:all .15s ease !important;
}

/* hover */
.redditReplyBtn:hover,
.replyBtn:hover,
.commentReplyBtn:hover{
  background:#fff7f0 !important;
  border-color:#ff6a00 !important;
}

/* active orange glow (same feel as vote) */
.redditReplyBtn:active,
.replyBtn:active,
.commentReplyBtn:active{
  background:#fff3e8 !important;
  border-color:#ff6a00 !important;
  box-shadow:0 0 0 2px rgba(255,106,0,0.15) !important;
}
/* REPLY = VOTE EXACT STYLE */

.redditReplyBtn,
.replyBtn,
.commentReplyBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;

  height:30px !important;
  padding:0 10px !important;

  border:1px solid #f1f1f1 !important;
  background:#fff7f0 !important; /* hafif turuncu zemin */

  border-radius:8px !important;
  font-size:13px !important;
  font-weight:600 !important;

  color:#ff6a00 !important; /* turuncu text */

  transition:all .15s ease !important;
}

/* hover = vote hissi */
.redditReplyBtn:hover,
.replyBtn:hover,
.commentReplyBtn:hover{
  background:#fff3e8 !important;
  border-color:#ff6a00 !important;
  box-shadow:0 0 0 2px rgba(255,106,0,0.15) !important;
}

/* active */
.redditReplyBtn:active,
.replyBtn:active,
.commentReplyBtn:active{
  transform:scale(0.97);
}
.commentReplyBtn:disabled {
  opacity: 1 !important;
  color: #ff6b00 !important;
  border-color: #ff6b00 !important;
  background: #fff !important;
}

/* ===== INDEX CARD UI UPGRADE ===== */
#viralStory .indexStoryCard,
#newStories .indexStoryCard,
#topStories .indexStoryCard,
#talkedStories .indexStoryCard,
#risingStories .indexStoryCard,
#hotStories .indexStoryCard{
  border:1px solid #ece4dd;
  border-radius:18px;
  background:#ffffff;
  padding:16px;
  box-shadow:0 8px 24px rgba(17,17,17,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#viralStory .indexStoryCard:hover,
#newStories .indexStoryCard:hover,
#topStories .indexStoryCard:hover,
#talkedStories .indexStoryCard:hover,
#risingStories .indexStoryCard:hover,
#hotStories .indexStoryCard:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(17,17,17,.06);
  border-color:#ffd7bf;
}
#viralStory .indexStoryCard .cardTitle,
#newStories .indexStoryCard .cardTitle,
#topStories .indexStoryCard .cardTitle,
#talkedStories .indexStoryCard .cardTitle,
#risingStories .indexStoryCard .cardTitle,
#hotStories .indexStoryCard .cardTitle{
  margin:0 0 10px;
  color:#111111;
  font-size:18px;
  line-height:1.25;
  font-weight:1000;
}
#viralStory .indexStoryCard .cardExcerpt,
#newStories .indexStoryCard .cardExcerpt,
#topStories .indexStoryCard .cardExcerpt,
#talkedStories .indexStoryCard .cardExcerpt,
#risingStories .indexStoryCard .cardExcerpt,
#hotStories .indexStoryCard .cardExcerpt{
  margin:0;
  color:#5f5f5f;
  font-size:14px;
  line-height:1.55;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#viralStory .indexStoryCard .cardMetaRow,
#newStories .indexStoryCard .cardMetaRow,
#topStories .indexStoryCard .cardMetaRow,
#talkedStories .indexStoryCard .cardMetaRow,
#risingStories .indexStoryCard .cardMetaRow,
#hotStories .indexStoryCard .cardMetaRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:14px 0 12px;
}
#viralStory .indexStoryCard .cardMeta,
#newStories .indexStoryCard .cardMeta,
#topStories .indexStoryCard .cardMeta,
#talkedStories .indexStoryCard .cardMeta,
#risingStories .indexStoryCard .cardMeta,
#hotStories .indexStoryCard .cardMeta{
  color:#666666;
  font-size:13px;
  font-weight:900;
}
#viralStory .indexStoryCard .cardActions,
#newStories .indexStoryCard .cardActions,
#topStories .indexStoryCard .cardActions,
#talkedStories .indexStoryCard .cardActions,
#risingStories .indexStoryCard .cardActions,
#hotStories .indexStoryCard .cardActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
#viralStory .indexStoryCard .btnRead,
#newStories .indexStoryCard .btnRead,
#topStories .indexStoryCard .btnRead,
#talkedStories .indexStoryCard .btnRead,
#risingStories .indexStoryCard .btnRead,
#hotStories .indexStoryCard .btnRead{
  min-height:38px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid #ffd7bf;
  background:#fff7f1;
  color:#ff6a00;
  font-size:13px;
  font-weight:900;
}


/* ===== HEADER BRAND SUBTITLE POLISH ===== */
.brand{
  gap:10px;
}
.brandText{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.brandText h1{
  margin:0;
}
.brandSubtitle{
  display:block;
  margin-top:4px;
  color:#6b6b6b;
  font-size:12px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-0.01em;
}
@media (max-width:720px){
  .brand{
    gap:8px;
  }
  .brandSubtitle{
    font-size:11px;
    margin-top:3px;
  }
}

/* ===== INDEX CARD UI FINAL POLISH ===== */
.indexStoryCard{
  display:flex;
  flex-direction:column;
  min-height:220px;
}
.indexStoryCard .cardBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.indexStoryCard .storyChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #ffd7bf;
  background:#fff7f1;
  color:#ff6a00;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.indexStoryCard .cardTop{
  margin-bottom:10px;
}
.indexStoryCard .cardExcerpt{
  min-height:65px;
}
.indexStoryCard .cardMetaRow{
  margin-top:auto;
}
.indexStoryCard .btnRead--premium{
  cursor:pointer;
}

/* ===== INDEX CARD UI UPGRADE V2 ===== */
.exploreCard{
  padding:18px 18px 20px;
  background:linear-gradient(180deg,#ffffff 0%, #fffdfb 100%);
  border-color:#eee3d9;
}

.exploreBlock + .exploreBlock{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(17,17,17,.06);
}

.exploreHead{
  margin-bottom:14px;
}

.exploreHead h3{
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.02em;
}

.exploreHead .muted{
  font-size:12px;
  color:#8b7b6c;
}

.exploreGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

#viralStory{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

#viralStory .indexStoryCard{
  padding:18px 18px 16px;
  border:1px solid #ffd7bf;
  background:linear-gradient(180deg,#fffaf6 0%, #ffffff 100%);
  box-shadow:0 14px 34px rgba(17,17,17,.05);
}

#viralStory .indexStoryCard .cardTitle{
  font-size:22px;
  line-height:1.15;
  margin-bottom:12px;
}

#viralStory .indexStoryCard .cardExcerpt{
  -webkit-line-clamp:4;
  font-size:15px;
}

#viralStory .indexStoryCard .btnRead{
  min-height:40px;
  height:40px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid #ff6a00;
  background:#ff6a00;
  color:#fff;
  font-size:13px;
  font-weight:1000;
}

#viralStory .indexStoryCard .btnRead:hover{
  background:#e55c00;
  border-color:#e55c00;
}

#newStories .indexStoryCard,
#topStories .indexStoryCard,
#talkedStories .indexStoryCard,
#risingStories .indexStoryCard,
#hotStories .indexStoryCard{
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

#newStories .indexStoryCard .cardTop,
#topStories .indexStoryCard .cardTop,
#talkedStories .indexStoryCard .cardTop,
#risingStories .indexStoryCard .cardTop,
#hotStories .indexStoryCard .cardTop,
#viralStory .indexStoryCard .cardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

#newStories .indexStoryCard .cardBadges,
#topStories .indexStoryCard .cardBadges,
#talkedStories .indexStoryCard .cardBadges,
#risingStories .indexStoryCard .cardBadges,
#hotStories .indexStoryCard .cardBadges,
#viralStory .indexStoryCard .cardBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#newStories .indexStoryCard .storyChip,
#topStories .indexStoryCard .storyChip,
#talkedStories .indexStoryCard .storyChip,
#risingStories .indexStoryCard .storyChip,
#hotStories .indexStoryCard .storyChip,
#viralStory .indexStoryCard .storyChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #ffd9c3;
  background:#fff5ee;
  color:#ff6a00;
  font-size:11px;
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
}

#newStories .indexStoryCard .storyChip--vehicle,
#topStories .indexStoryCard .storyChip--vehicle,
#talkedStories .indexStoryCard .storyChip--vehicle,
#risingStories .indexStoryCard .storyChip--vehicle,
#hotStories .indexStoryCard .storyChip--vehicle,
#viralStory .indexStoryCard .storyChip--vehicle{
  color:#8a4f00;
  background:#fff9f4;
}

#newStories .indexStoryCard .storyChip--read,
#topStories .indexStoryCard .storyChip--read,
#talkedStories .indexStoryCard .storyChip--read,
#risingStories .indexStoryCard .storyChip--read,
#hotStories .indexStoryCard .storyChip--read,
#viralStory .indexStoryCard .storyChip--read{
  color:#6b6b6b;
  border-color:#ece6df;
  background:#faf8f6;
}

#newStories .indexStoryCard .cardTitle,
#topStories .indexStoryCard .cardTitle,
#talkedStories .indexStoryCard .cardTitle,
#risingStories .indexStoryCard .cardTitle,
#hotStories .indexStoryCard .cardTitle{
  min-height:44px;
}

#newStories .indexStoryCard .cardExcerpt,
#topStories .indexStoryCard .cardExcerpt,
#talkedStories .indexStoryCard .cardExcerpt,
#risingStories .indexStoryCard .cardExcerpt,
#hotStories .indexStoryCard .cardExcerpt{
  min-height:65px;
}

#newStories .indexStoryCard .cardMetaRow,
#topStories .indexStoryCard .cardMetaRow,
#talkedStories .indexStoryCard .cardMetaRow,
#risingStories .indexStoryCard .cardMetaRow,
#hotStories .indexStoryCard .cardMetaRow,
#viralStory .indexStoryCard .cardMetaRow{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(17,17,17,.06);
}

#newStories .indexStoryCard .btnRead,
#topStories .indexStoryCard .btnRead,
#talkedStories .indexStoryCard .btnRead,
#risingStories .indexStoryCard .btnRead,
#hotStories .indexStoryCard .btnRead{
  min-height:36px;
  height:36px;
  padding:0 14px;
  border-radius:11px;
  border:1px solid #ffd7bf;
  background:#fff7f1;
  color:#ff6a00;
  font-size:12px;
  font-weight:1000;
}

#newStories .indexStoryCard .btnRead:hover,
#topStories .indexStoryCard .btnRead:hover,
#talkedStories .indexStoryCard .btnRead:hover,
#risingStories .indexStoryCard .btnRead:hover,
#hotStories .indexStoryCard .btnRead:hover{
  border-color:#ffbe93;
  background:#fff0e4;
}

@media (max-width: 980px){
  .exploreGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .exploreCard{
    padding:14px 14px 16px;
  }

  .exploreHead h3{
    font-size:16px;
  }

  #viralStory .indexStoryCard .cardTitle{
    font-size:19px;
  }
}
/* ===== FINAL PREMIUM INDEX CARD ===== */

.indexStoryCard{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:20px;
  transition:all .25s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  cursor:pointer;
}

.indexStoryCard:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
  border-color:#ffd2b5;
}

/* Başlık */
.indexStoryCard .cardTitle{
  font-size:20px;
  font-weight:800;
  margin-bottom:10px;
  letter-spacing:-0.02em;
}

/* Açıklama */
.indexStoryCard .cardExcerpt{
  font-size:14px;
  color:#555;
  line-height:1.5;
  margin-bottom:16px;
}

/* Alt bilgi */
.indexStoryCard .cardMetaRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#888;
  margin-top:auto;
}

/* Buton */
.indexStoryCard .btnRead{
  background:#ff6a00;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  transition:all .2s ease;
}

.indexStoryCard .btnRead:hover{
  background:#e85d00;
}

/* Chipler */
.storyChip{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:#fff5ee;
  color:#ff6a00;
  border:1px solid #ffd7bf;
}
/* ===== FINAL FIX (OVERRIDE) ===== */

.indexStoryCard{
  background:#fff !important;
  border:1px solid #eee !important;
  border-radius:16px !important;
  padding:20px !important;
  box-shadow:0 6px 16px rgba(0,0,0,0.06) !important;
  transition:all .25s ease !important;
  cursor:pointer;
}

.indexStoryCard:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 22px 50px rgba(0,0,0,0.15) !important;
  border-color:#ffb88a !important;
}

/* BAŞLIK GÜÇLENDİR */
.indexStoryCard .cardTitle{
  font-size:22px !important;
  font-weight:900 !important;
  margin-bottom:12px !important;
}

/* METİN */
.indexStoryCard .cardExcerpt{
  font-size:14px !important;
  color:#555 !important;
  line-height:1.6 !important;
}

/* BUTON (EN KRİTİK) */
.indexStoryCard .btnRead{
  background:#ff6a00 !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  padding:8px 16px !important;
  font-weight:800 !important;
}

.indexStoryCard .btnRead:hover{
  background:#e65c00 !important;
}
/* ===== FINAL SMALL POLISH ===== */

.indexStoryCard .cardTitle{
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.indexStoryCard .cardMetaRow span:first-child{
  font-weight:600;
  color:#333;
}

.storyChip{
  font-size:11px;
  padding:5px 10px;
  border-radius:999px;
  background:#fff3ea;
  color:#ff6a00;
  border:1px solid #ffc9a6;
}

.storyChip:nth-child(2){
  background:#f5f5f5;
  color:#555;
  border-color:#e5e5e5;
}

.indexStoryCard .cardMetaRow{
  border-top:1px solid #f0f0f0;
  padding-top:12px;
  margin-top:14px;
}


/* ===== CITY + STORY TYPO & SIDEBAR FIX ===== */
.citySide,
.storyPageSideCard,
.storyPageSide,
.cityPageSide,
.cityGrid .citySide,
.storyPageLayout .storyPageSideCard{
  min-height:auto !important;
  height:auto !important;
  align-self:start !important;
  overflow:visible !important;
}

.citySide .sideCard,
.storyPageSideCard,
.citySide .card,
.storyPageSideCard .card{
  overflow:visible !important;
}

#topReadStories .cardExcerpt,
.storyPageMiniExcerpt,
.citySide .cardExcerpt,
.storyPageSideCard .cardExcerpt{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  overflow:hidden !important;
  word-break:break-word !important;
}

.cityHero .cityName,
.storyPageTitle,
.storyPageMainCard .storyPageTitle{
  text-transform:none !important;
  letter-spacing:-0.02em !important;
}

#cityCards .cardTitle,
#topReadStories .cardTitle,
.storyPageMiniStory .cardTitle,
.storyPageSideCard .cardTitle{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:1000 !important;
}

#cityCards .cardMetaRow .cardMeta:first-child,
#topReadStories .cardMetaRow .cardMeta:first-child,
.storyPageMiniMeta{
  color:#555 !important;
  font-weight:900 !important;
}

.storyChip,
#cityCards .storyChip,
#topReadStories .storyChip{
  text-transform:none !important;
  letter-spacing:0 !important;
}

.cityInsights .insightChip,
.cityInsightChips .insightChip{
  text-transform:none !important;
  letter-spacing:0 !important;
}

.storyPageSideCard,
.citySide{
  position:sticky;
  top:78px;
}

@media (max-width: 1024px){
  .citySide,
  .storyPageSideCard{
    position:static !important;
    top:auto !important;
  }
}

.cardTitle,
.miniTitle,
.storyPageTitle,
.cityName{
  word-break:break-word;
}
/* ===== SIDEBAR FINAL FIX ===== */

.citySide,
.storyPageSideCard{
  max-height:calc(100vh - 100px);
  overflow-y:auto;
  padding-right:6px;
}

/* scroll görünüm iyileştirme */
.citySide::-webkit-scrollbar,
.storyPageSideCard::-webkit-scrollbar{
  width:6px;
}

.citySide::-webkit-scrollbar-thumb,
.storyPageSideCard::-webkit-scrollbar-thumb{
  background:#ddd;
  border-radius:10px;
}
/* ===== STORY READ EXPERIENCE ===== */

.storyPageMainCard p{
  font-size:16px;
  line-height:1.7;
  color:#333;
}

.storyPageMainCard{
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

.storyPageTitle{
  font-size:32px;
  letter-spacing:-0.02em;
}

.storyPageMeta{
  font-size:13px;
  color:#777;
}


/* ===== CITY/STORY FINAL HARD FIX ===== */
.cityGrid{
  align-items:start !important;
}

.citySide{
  position:sticky !important;
  top:78px !important;
  align-self:start !important;
  max-height:calc(100vh - 96px) !important;
  overflow-y:auto !important;
  overflow-x:visible !important;
  padding-right:6px !important;
  min-width:0 !important;
}

.citySide > *{
  flex:0 0 auto !important;
}

.citySide::-webkit-scrollbar,
.storyPageSideCard::-webkit-scrollbar{
  width:6px;
}
.citySide::-webkit-scrollbar-thumb,
.storyPageSideCard::-webkit-scrollbar-thumb{
  background:#dddddd;
  border-radius:999px;
}

.storyPageSideCard{
  max-height:calc(100vh - 96px) !important;
  overflow-y:auto !important;
  overflow-x:visible !important;
  padding-right:6px !important;
}

#cityCards .cardTitle,
#topReadStories .cardTitle,
.storyPageMiniTitle{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:1000 !important;
  word-break:break-word !important;
}

#cityCards .storyChip,
#topReadStories .storyChip,
.storyPageMiniStory .badge{
  text-transform:none !important;
  letter-spacing:0 !important;
}

#topReadStories .card,
.storyPageMiniStory{
  min-height:208px !important;
  display:flex !important;
  flex-direction:column !important;
}

#topReadStories .cardExcerpt,
.storyPageMiniExcerpt{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  overflow:hidden !important;
  word-break:break-word !important;
}

#topReadStories .cardMeta,
.storyPageMiniMeta{
  margin-top:auto !important;
}

@media (max-width:1024px){
  .citySide,
  .storyPageSideCard{
    position:static !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
}



/* ===== FINAL CITY/STORY REAL FIX ===== */
body.cityPage .wrap{
  max-width:1180px;
  margin:0 auto;
  padding:24px 16px 40px;
}

body.cityPage .cityGrid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px !important;
  gap:18px !important;
  align-items:start !important;
}

body.cityPage .cityMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

body.cityPage .citySide{
  min-width:0;
  align-self:start !important;
  position:sticky !important;
  top:86px !important;
  max-height:calc(100vh - 102px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:6px !important;
}

body.cityPage .citySide::-webkit-scrollbar,
.storyPageSideStack::-webkit-scrollbar{
  width:6px;
}
body.cityPage .citySide::-webkit-scrollbar-thumb,
.storyPageSideStack::-webkit-scrollbar-thumb{
  background:#dddddd;
  border-radius:999px;
}

.storyPageSideStack{
  max-height:calc(100vh - 102px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:6px !important;
}

#cityCards .cardTitle,
#topReadStories .cardTitle,
.storyPageMiniTitle,
.storyPageTitle{
  text-transform:none !important;
  letter-spacing:0 !important;
  word-break:break-word !important;
}

#cityCards .cardTitle,
#topReadStories .cardTitle,
.storyPageMiniTitle{
  font-weight:1000 !important;
}

#cityCards .cardMetaRow,
#topReadStories .cardMetaRow{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
}

#cityCards .cardActions,
#topReadStories .cardActions{
  margin-top:14px !important;
}

@media (max-width: 1024px){
  body.cityPage .cityGrid{
    grid-template-columns:1fr !important;
  }
  body.cityPage .citySide,
  .storyPageSideStack{
    position:static !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
}



/* ===== FINAL CITY + STORY POLISH V2 ===== */
body.cityPage .cityGrid{
  grid-template-columns:minmax(0,1fr) 340px !important;
  gap:18px !important;
  align-items:start !important;
}

body.cityPage .cityMain{
  min-width:0 !important;
}

body.cityPage .citySide{
  position:sticky !important;
  top:84px !important;
  align-self:start !important;
  max-height:calc(100vh - 96px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:6px !important;
}

body.cityPage .citySide::-webkit-scrollbar,
.storyPageSideStack::-webkit-scrollbar{
  width:6px;
}
body.cityPage .citySide::-webkit-scrollbar-thumb,
.storyPageSideStack::-webkit-scrollbar-thumb{
  background:#dddddd;
  border-radius:999px;
}

body.cityPage #cityCards.cards{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}

body.cityPage #cityCards .indexStoryCard,
body.cityPage #topReadStories .indexStoryCard{
  min-height:230px !important;
  display:flex !important;
  flex-direction:column !important;
  background:#fff !important;
  border:1px solid #ece4dd !important;
  border-radius:18px !important;
  padding:16px !important;
  box-shadow:0 8px 24px rgba(17,17,17,.04) !important;
}

body.cityPage #cityCards .indexStoryCard:hover,
body.cityPage #topReadStories .indexStoryCard:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 30px rgba(17,17,17,.06) !important;
  border-color:#ffd7bf !important;
}

body.cityPage #cityCards .cardTitle,
body.cityPage #topReadStories .cardTitle{
  text-transform:uppercase !important;
  letter-spacing:.45px !important;
  font-size:20px !important;
  line-height:1.2 !important;
  margin:0 0 12px !important;
}

body.cityPage #cityCards .cardExcerpt,
body.cityPage #topReadStories .cardExcerpt{
  min-height:65px !important;
  line-height:1.58 !important;
  font-size:14px !important;
}

body.cityPage #cityCards .cardMetaRow,
body.cityPage #topReadStories .cardMetaRow{
  margin-top:auto !important;
  padding-top:14px !important;
  border-top:1px solid rgba(17,17,17,.06) !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
}

body.cityPage #cityCards .cardActions,
body.cityPage #topReadStories .cardActions{
  margin-top:14px !important;
}

body.cityPage #cityCards .btnRead,
body.cityPage #topReadStories .btnRead{
  min-height:38px !important;
  height:38px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid #ff6a00 !important;
  background:#ff6a00 !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:1000 !important;
}

body.cityPage #cityCards .btnRead:hover,
body.cityPage #topReadStories .btnRead:hover{
  background:#e55c00 !important;
  border-color:#e55c00 !important;
}

body.cityPage #cityCards .storyChip,
body.cityPage #topReadStories .storyChip,
.storyPageMiniStory .badge,
.storyPageSideCard .badge{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:1000 !important;
}

.storyPageShell{
  align-items:start !important;
}

.storyPageSideStack{
  position:sticky !important;
  top:84px !important;
  align-self:start !important;
  max-height:calc(100vh - 96px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:6px !important;
}

.storyPageTitle,
.storyPageMiniTitle,
.storyPageCityName{
  text-transform:none !important;
  letter-spacing:0 !important;
  word-break:break-word !important;
}

@media (max-width: 1100px){
  body.cityPage #cityCards.cards{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 1024px){
  body.cityPage .cityGrid{
    grid-template-columns:1fr !important;
  }
  body.cityPage .citySide,
  .storyPageSideStack{
    position:static !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
}


/* ===== FINAL UI BUGFIX PATCH ===== */
.adSlot .adLabel::before{
  content:none !important;
  display:none !important;
}

.searchBox input[type="search"]::-webkit-search-cancel-button,
.searchBox input[type="search"]::-webkit-search-decoration{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:none !important;
}

.searchBox input[type="search"]{
  appearance:textfield;
}

/* Right side panels should not have internal scroll */
body.cityPage .citySide,
.storyPageSideStack,
.storyPageSideCard{
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
  overflow-x:visible !important;
  padding-right:0 !important;
}

body.cityPage .citySide{
  position:sticky !important;
  top:84px !important;
  align-self:start !important;
}

.storyPageSideStack{
  position:sticky !important;
  top:96px !important;
  align-self:start !important;
}

body.cityPage .citySide::-webkit-scrollbar,
.storyPageSideStack::-webkit-scrollbar,
.storyPageSideCard::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* City cards should follow index card rhythm */
#cityCards.cards{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

#cityCards .indexStoryCard{
  min-height:230px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  border:1px solid #ece4dd !important;
  border-radius:18px !important;
  background:#ffffff !important;
  padding:16px !important;
  box-shadow:0 8px 24px rgba(17,17,17,.04) !important;
}

#cityCards .indexStoryCard .cardTop{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:12px !important;
}

#cityCards .indexStoryCard .cardBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

#cityCards .indexStoryCard .storyChip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  border:1px solid #ffd9c3 !important;
  background:#fff5ee !important;
  color:#ff6a00 !important;
  font-size:11px !important;
  font-weight:1000 !important;
  line-height:1 !important;
}

#cityCards .indexStoryCard .storyChip--vehicle{
  color:#8a4f00 !important;
  background:#fff9f4 !important;
}

#cityCards .indexStoryCard .storyChip--read{
  color:#6b6b6b !important;
  border-color:#ece6df !important;
  background:#faf8f6 !important;
}

#cityCards .indexStoryCard .cardTitle,
#topReadStories .cardTitle,
.storyPageMiniTitle{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:1000 !important;
  word-break:break-word !important;
}

#cityCards .indexStoryCard .cardExcerpt,
#topReadStories .cardExcerpt,
.storyPageMiniExcerpt{
  margin:0 !important;
  color:#5f5f5f !important;
  font-size:14px !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-height:65px !important;
}

#cityCards .indexStoryCard .cardMetaRow{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
  margin-top:auto !important;
  padding-top:14px !important;
  border-top:1px solid rgba(17,17,17,.06) !important;
}

#cityCards .indexStoryCard .cardMeta,
#topReadStories .cardMeta,
.storyPageMiniMeta{
  color:#666666 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

#cityCards .indexStoryCard .cardActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin-top:12px !important;
}

#cityCards .indexStoryCard .btnRead,
#topReadStories .btnRead{
  min-height:36px !important;
  height:36px !important;
  padding:0 14px !important;
  border-radius:11px !important;
  border:1px solid #ffd7bf !important;
  background:#fff7f1 !important;
  color:#ff6a00 !important;
  font-size:12px !important;
  font-weight:1000 !important;
}

#cityCards .indexStoryCard .btnRead:hover,
#topReadStories .btnRead:hover{
  border-color:#ffbe93 !important;
  background:#fff0e4 !important;
}

@media (max-width: 1100px){
  #cityCards.cards{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 1024px){
  body.cityPage .citySide,
  .storyPageSideStack{
    position:static !important;
    top:auto !important;
  }
}


/* ===== FINAL PAGE-SPECIFIC RIGHT SIDEBAR SEPARATION ===== */
body.cityPage .citySide{
  position:sticky !important;
  top:84px !important;
  align-self:start !important;
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
  overflow-x:visible !important;
  padding-right:0 !important;
}

body.cityPage .citySide > .adSlot,
body.cityPage .citySide > .sideCard{
  position:relative !important;
  top:auto !important;
  align-self:stretch !important;
  margin:0 !important;
}

body.storyPage .storyPageSideStack{
  position:sticky !important;
  top:96px !important;
  align-self:start !important;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
  overflow-x:visible !important;
  padding-right:0 !important;
}

body.storyPage .storyPageSideStack > .storyPageSideCard{
  position:relative !important;
  top:auto !important;
  align-self:stretch !important;
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
  overflow-x:visible !important;
  padding-right:0 !important;
  margin:0 !important;
}

body.storyPage #storyTopReadStories,
body.storyPage #storyTopWrittenCities{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body.storyPage #storyTopReadStories .storyPageMiniStory{
  min-height:208px !important;
}

@media (max-width: 1024px){
  body.cityPage .citySide,
  body.storyPage .storyPageSideStack{
    position:static !important;
    top:auto !important;
  }
}



/* ===== HERO LIVE REFRESH ===== */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(255,122,26,.16) 0, rgba(255,122,26,0) 34%),
    radial-gradient(circle at bottom left, rgba(255,106,0,.10) 0, rgba(255,106,0,0) 36%),
    linear-gradient(135deg, #fffaf6 0%, #ffffff 48%, #fff6ef 100%);
  border:1px solid rgba(255,106,0,.14);
  border-radius:22px;
  padding:32px 34px 26px;
  margin-bottom:18px;
  box-shadow:0 16px 38px rgba(17,17,17,.05);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%);
  pointer-events:none;
}

.heroContent{
  position:relative;
  z-index:1;
  max-width:860px;
}

.heroKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  margin:0 0 18px;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.01em;
  color:var(--red);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,106,0,.18);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(255,106,0,.08);
}

.heroLead,
.hero p{
  margin:0;
  max-width:780px;
  color:#555d69;
  font-size:17px;
  line-height:1.72;
  font-weight:900;
}

.heroStats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 160px));
  gap:14px;
  margin-top:24px;
  max-width:max-content;
}

.heroStat{
  position:relative;
  min-width:0;
  padding:16px 16px 14px;
  border:1px solid rgba(255,106,0,.12);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  box-shadow:0 12px 28px rgba(17,17,17,.04);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.heroStat::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, #ff6a00 0%, #ffb067 100%);
}

.heroStatNumber{
  font-size:36px;
  line-height:1;
  font-weight:1000;
  color:#ff6a00;
  letter-spacing:-.03em;
}

.heroStatLabel{
  margin-top:0;
  font-size:13px;
  color:#666f7a;
  font-weight:900;
}

@media (max-width: 900px){
  .hero{
    padding:26px 22px 22px;
    border-radius:18px;
  }

  .heroLead,
  .hero p{
    font-size:16px;
  }

  .heroStats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    max-width:none;
  }
}

@media (max-width: 640px){
  .heroStats{
    grid-template-columns:1fr;
  }

  .heroStat{
    width:100%;
  }
}



/* ===== REDDIT + EKSI TYPE SYSTEM REFRESH ===== */
:root{
  --font-ui: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-reading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font: var(--font-ui);
}

body{
  font-family: var(--font-ui);
  line-height: 1.56;
  letter-spacing: -0.003em;
  color: #171717;
}

input,
textarea,
button,
select{
  font: inherit;
}

.muted{
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  color:#6b7280;
}

.brand h1,
.bigTitle,
.cityName,
.sideHeader h2,
.cardTitle,
.miniTitle,
.label,
.tabBtn,
.storyCommentTitle{
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand h1{
  font-size: 18px;
}

.bigTitle{
  font-size: 15px;
}

.cityName{
  font-size: 21px;
}

.searchBox input,
.input,
.textarea,
.select,
.pill,
.btn,
.btnSolid,
.badge,
.cardMeta,
.heroStatLabel,
.sideHeader p{
  font-family: var(--font-ui);
}

.searchBox input{
  font-weight: 500;
  font-size: 14px;
}

.btn,
.btnSolid,
.badge,
.pill,
.linkBtn{
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cardTitle,
.storyPageMiniTitle{
  font-size: 19px;
  line-height: 1.28;
}

.cardExcerpt,
.storyPageMiniExcerpt,
.heroLead,
.hero p,
.cityHeroHint,
.sideHeader p,
.cardMeta,
.miniMeta{
  font-family: var(--font-reading);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
}

.cardExcerpt{
  font-size: 15px;
  color:#4b5563;
}

.cardMeta{
  font-size: 13px;
  color:#667085;
}

.heroKicker{
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}

.heroLead,
.hero p{
  font-size: 18px;
  max-width: 780px;
  color:#4b5563;
}

.heroStatNumber{
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sideCard,
.contentCard,
.card,
.storyPageCard,
.storyPageCommentCard{
  box-shadow: 0 8px 24px rgba(17,17,17,.035);
}

.commentItem .commentBody,
.storyPageCommentList .commentBody{
  font-family: var(--font-reading);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 500;
  color:#20242a;
}

@media (max-width: 760px){
  .cardTitle,
  .storyPageMiniTitle{
    font-size: 18px;
  }

  .heroLead,
  .hero p,
  .cardExcerpt,
  .storyPageMiniExcerpt{
    font-size: 15px;
  }
}



/* ===== REDDIT + EKSI TYPE SYSTEM V2 ===== */
:root{
  --font-ui: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-reading: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font: var(--font-ui);
}

html{
  font-size:16px;
}

body{
  font-family: var(--font-ui) !important;
  line-height: 1.58;
  letter-spacing: -0.002em;
  color:#171717;
}

.brand h1{
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.02em !important;
}

.searchBox input{
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

.muted,
.cardMeta,
.miniMeta,
.sideHeader p,
.cityMeta,
.cityHeroHint,
.heroStatLabel{
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  color:#667085 !important;
  letter-spacing: -0.005em !important;
}

.badge,
.pill,
.linkBtn,
.btn,
.btnSolid,
.label,
.tabBtn{
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.bigTitle,
.cityName,
.sideHeader h2,
.sideBlock h3,
.listItem strong,
.miniTitle,
.cardTitle,
.heroKicker{
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
}

.cardTitle{
  font-size: 17px !important;
  line-height: 1.28 !important;
  margin-bottom: 10px !important;
}

.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt,
.heroLead,
.hero p,
.cityHeroHint,
.sideHeader p,
.miniMeta{
  font-family: var(--font-reading) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
  font-weight: 500 !important;
  color:#4b5563 !important;
  letter-spacing: 0 !important;
}

#cityCards .cardExcerpt,
#topReadStories .cardExcerpt{
  font-size: 14px !important;
}

.heroLead,
.hero p{
  max-width: 760px;
  font-size: 17px !important;
}

.heroStatNumber{
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.sideCard,
.contentCard,
.card,
.storyPageCard,
.storyPageCommentCard{
  box-shadow: 0 6px 18px rgba(17,17,17,.028) !important;
}

.listItem,
.miniItem,
.sideCard .sideBlock > *{
  font-family: var(--font-ui);
}

#cityCards .btnRead,
.btnRead{
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.commentItem .commentBody,
.storyPageCommentList .commentBody{
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  font-weight: 500 !important;
  color:#252b33 !important;
}

@media (max-width: 760px){
  .cardTitle{
    font-size: 16px !important;
  }

  .cardExcerpt,
  #cityCards .cardExcerpt,
  #topReadStories .cardExcerpt,
  .heroLead,
  .hero p{
    font-size: 14px !important;
  }
}



/* ===== GLOBAL TYPE UNIFICATION ===== */
:root{
  --font-ui: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-reading: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font: var(--font-ui);
}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

body{
  font-family: var(--font-ui) !important;
  color:#171717;
  line-height:1.58;
  letter-spacing:-0.003em;
  text-rendering:optimizeLegibility;
}

input,
textarea,
button,
select{
  font: inherit;
}

.brand,
.brand h1,
.bigTitle,
.cityName,
.sideHeader h2,
.sideTitleRow h3,
.sideBlock h3,
.cardTitle,
.miniTitle,
.storyCommentTitle,
.storyPageTitle,
.storyPageMiniTitle,
.storyPageSideTitle,
.storyPageCityName,
.storyPageCommentList .commentAuthorLine strong,
.label,
.tabBtn{
  font-family: var(--font-ui) !important;
  color:#171717;
}

.brand h1{
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
}

.bigTitle,
.sideHeader h2,
.sideTitleRow h3,
.sideBlock h3,
.storyPageSideTitle,
.storyCommentTitle{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-0.018em !important;
}

.cityName{
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:-0.025em !important;
}

.cardTitle,
.miniTitle,
.storyPageMiniTitle{
  font-size:17px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
}

.storyPageTitle{
  font-size:34px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  letter-spacing:-0.03em !important;
}

.storyPageCityName,
.label,
.tabBtn{
  font-weight:600 !important;
  letter-spacing:-0.015em !important;
}

.searchBox input,
.input,
.textarea,
.select{
  font-family: var(--font-ui) !important;
  font-weight:500 !important;
  letter-spacing:-0.008em !important;
}

.btn,
.btnSolid,
.badge,
.pill,
.linkBtn,
.heroKicker,
.storyPageEyebrow,
.storyPageUtilityBar .btn,
.storyPageUtilityBar .btnSolid,
.storyPageAdLabel,
.storyPageCityCount{
  font-family: var(--font-ui) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
}

.muted,
.cardMeta,
.miniMeta,
.sideHeader p,
.cityMeta,
.cityHeroHint,
.heroStatLabel,
.storyPageMeta,
.storyCommentHint,
.storyPageMiniMeta,
.storyPageCityMeta{
  font-family: var(--font-ui) !important;
  font-weight:500 !important;
  color:#667085 !important;
  letter-spacing:-0.005em !important;
}

.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt,
.heroLead,
.hero p,
.cityHeroHint,
.sideHeader p,
.storyPageContent,
.storyPageMiniExcerpt,
.storyPageCommentList .commentBody,
.commentItem .commentBody{
  font-family: var(--font-reading) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:#374151 !important;
}

.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt,
.storyPageMiniExcerpt{
  font-size:14px !important;
  line-height:1.64 !important;
}

.heroLead,
.hero p{
  font-size:17px !important;
  line-height:1.7 !important;
  max-width:760px;
}

.storyPageContent{
  font-size:18px !important;
  line-height:1.82 !important;
  max-width:72ch;
}

.storyPageCommentList .commentBody,
.commentItem .commentBody{
  font-size:16px !important;
  line-height:1.72 !important;
}

.heroStatNumber{
  font-family: var(--font-ui) !important;
  font-weight:700 !important;
  letter-spacing:-0.03em !important;
}

.sideCard,
.contentCard,
.card,
.storyPageCard,
.storyPageCommentCard{
  box-shadow:0 6px 18px rgba(17,17,17,.028) !important;
}

@media (max-width:760px){
  .cardTitle,
  .miniTitle,
  .storyPageMiniTitle{
    font-size:16px !important;
  }

  .heroLead,
  .hero p,
  .cardExcerpt,
  #cityCards .cardExcerpt,
  #topReadStories .cardExcerpt,
  .storyPageMiniExcerpt{
    font-size:14px !important;
  }

  .storyPageTitle{
    font-size:30px !important;
  }

  .storyPageContent{
    font-size:17px !important;
  }
}


/* ===== SITE FONT UNIFICATION ===== */
:root{
  --font-ui: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-reading: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font: var(--font-ui);
}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

body{
  font-family: var(--font-ui) !important;
  color:#171717;
  line-height:1.58;
  letter-spacing:-0.003em;
  text-rendering:optimizeLegibility;
}

input, textarea, button, select{
  font: inherit;
}

.brand, .brand h1, .bigTitle, .cityName, .sideHeader h2, .sideTitleRow h3, .sideBlock h3,
.cardTitle, .miniTitle, .storyCommentTitle, .storyPageTitle, .storyPageMiniTitle,
.storyPageSideTitle, .storyPageCityName, .storyPageCommentList .commentAuthorLine strong,
.label, .tabBtn{
  font-family: var(--font-ui) !important;
  color:#171717;
}

.brand h1{
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
}

.bigTitle, .sideHeader h2, .sideTitleRow h3, .sideBlock h3, .storyPageSideTitle, .storyCommentTitle{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-0.018em !important;
}

.cityName{
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:-0.025em !important;
}

.cardTitle, .miniTitle, .storyPageMiniTitle{
  font-size:17px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
}

.storyPageTitle{
  font-size:34px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  letter-spacing:-0.03em !important;
}

.storyPageCityName, .label, .tabBtn{
  font-weight:600 !important;
  letter-spacing:-0.015em !important;
}

.searchBox input, .input, .textarea, .select{
  font-family: var(--font-ui) !important;
  font-weight:500 !important;
  letter-spacing:-0.008em !important;
}

.btn, .btnSolid, .badge, .pill, .linkBtn, .heroKicker, .storyPageEyebrow,
.storyPageUtilityBar .btn, .storyPageUtilityBar .btnSolid, .storyPageAdLabel, .storyPageCityCount{
  font-family: var(--font-ui) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
}

.muted, .cardMeta, .miniMeta, .sideHeader p, .cityMeta, .cityHeroHint, .heroStatLabel,
.storyPageMeta, .storyCommentHint, .storyPageMiniMeta, .storyPageCityMeta{
  font-family: var(--font-ui) !important;
  font-weight:500 !important;
  color:#667085 !important;
  letter-spacing:-0.005em !important;
}

.cardExcerpt, #cityCards .cardExcerpt, #topReadStories .cardExcerpt, .heroLead, .hero p,
.cityHeroHint, .sideHeader p, .storyPageContent, .storyPageMiniExcerpt,
.storyPageCommentList .commentBody, .commentItem .commentBody{
  font-family: var(--font-reading) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:#374151 !important;
}

.cardExcerpt, #cityCards .cardExcerpt, #topReadStories .cardExcerpt, .storyPageMiniExcerpt{
  font-size:14px !important;
  line-height:1.64 !important;
}

.heroLead, .hero p{
  font-size:17px !important;
  line-height:1.7 !important;
  max-width:760px;
}

.storyPageContent{
  font-size:18px !important;
  line-height:1.82 !important;
  max-width:72ch;
}

.storyPageCommentList .commentBody, .commentItem .commentBody{
  font-size:16px !important;
  line-height:1.72 !important;
}

.heroStatNumber{
  font-family: var(--font-ui) !important;
  font-weight:700 !important;
  letter-spacing:-0.03em !important;
}

.sideCard, .contentCard, .card, .storyPageCard, .storyPageCommentCard{
  box-shadow:0 6px 18px rgba(17,17,17,.028) !important;
}

@media (max-width:760px){
  .cardTitle, .miniTitle, .storyPageMiniTitle{
    font-size:16px !important;
  }

  .heroLead, .hero p, .cardExcerpt, #cityCards .cardExcerpt, #topReadStories .cardExcerpt, .storyPageMiniExcerpt{
    font-size:14px !important;
  }

  .storyPageTitle{
    font-size:30px !important;
  }

  .storyPageContent{
    font-size:17px !important;
  }
}



/* ===== SIDEBAR + BUTTON SOFTENING ===== */
.sideHeader h2,
.sideTitleRow h3,
.sideBlock h3,
.storyPageSideTitle{
  font-weight: 600 !important;
  letter-spacing: -0.016em !important;
}

.cardTitle,
.miniTitle,
.storyPageMiniTitle{
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
}

.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt,
.storyPageMiniExcerpt{
  font-weight: 450 !important;
  color:#4b5563 !important;
}

.btn,
.btnSolid,
.linkBtn,
.btnRead,
.storyPageUtilityBar .btn,
.storyPageUtilityBar .btnSolid{
  font-weight: 550 !important;
  letter-spacing: -0.008em !important;
}

.storyPageMeta,
.storyPageMiniMeta,
.storyPageCityMeta,
.cardMeta,
.miniMeta{
  font-weight: 450 !important;
  color:#6b7280 !important;
}



/* ===== FINAL MICRO POLISH ===== */
.storyCommentTitle{
  font-weight:600 !important;
  letter-spacing:-0.02em !important;
}

.btn,
.btnSolid,
.linkBtn,
.btnRead,
#btnSubmitStoryComment,
.storyPageUtilityBar .btn,
.storyPageUtilityBar .btnSolid{
  font-weight:500 !important;
  letter-spacing:-0.006em !important;
}

.badge,
.pill,
.storyPageEyebrow,
.storyPageAdLabel{
  font-weight:500 !important;
  letter-spacing:-0.006em !important;
}

.storyPageMiniTitle{
  font-weight:600 !important;
  letter-spacing:-0.018em !important;
}

.storyPageMiniExcerpt,
.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt{
  font-weight:400 !important;
  color:#55606f !important;
}

.storyPageMiniMeta,
.storyPageCityMeta,
.cardMeta,
.miniMeta,
.storyPageMeta{
  font-weight:500 !important;
  color:#70798a !important;
}



/* ===== STORY FINAL TONE CLEANUP ===== */
.storyPageMiniExcerpt{
  font-weight: 400 !important;
  color:#616b79 !important;
  line-height: 1.68 !important;
}

#btnSubmitStoryComment,
.storyCommentComposerActions .btnSolid{
  font-weight: 500 !important;
  letter-spacing: -0.004em !important;
}
/* HEADER BRAND TURUNCU */
.topbar .brand,
.topbar .brand:visited,
.topbar .brand:hover,
.topbar .brand span,
.topbar .brandText,
.topbar .brand h1 {
  color: #ff6a00 !important;
}



/* ===== LEGAL HEADER VARIANT ===== */
.topbar--legal{
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
}

.topActions--legal{
  margin-left:auto;
  justify-content:flex-end;
  flex-wrap:wrap;
  max-width:100%;
}

.legalHeaderNav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.legalHeaderLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:#525a66;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

.legalHeaderLink:hover{
  background:#fffaf6;
  border-color:#ffd7bf;
  color:var(--red);
  transform:translateY(-1px);
}

.legalHeaderLink.is-active,
.legalHeaderLink[aria-current="page"]{
  color:var(--red);
  border-color:#ffd7bf;
  background:#fff3eb;
}

@media (max-width: 960px){
  .topbar--legal{
    flex-direction:column;
    align-items:flex-start;
  }

  .topActions--legal{
    margin-left:0;
    width:100%;
    justify-content:flex-start;
  }

  .legalHeaderNav{
    justify-content:flex-start;
  }
}

@media (max-width: 680px){
  .legalHeaderLink{
    min-height:34px;
    font-size:12px;
  }
}



/* ===== AŞAMA 9 — TOPLULUK + OKUMA DENGESİ ===== */
:root{
  --font: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

body{
  letter-spacing:-0.003em;
}

.brand h1{
  font-size:18px !important;
  font-weight:760 !important;
  letter-spacing:-0.024em !important;
}

.pill,
.badge,
.legalHeaderLink{
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:-0.008em !important;
}

.btn,
.btnSolid,
.btnRead,
.linkBtn,
#btnSubmitStoryComment,
.storyPageUtilityBar .btn,
.storyPageUtilityBar .btnSolid{
  font-weight:620 !important;
  letter-spacing:-0.01em !important;
}

.heroTitle,
.cityName,
.storyPageTitle,
.cardTitle,
#cityCards .cardTitle,
#topReadStories .cardTitle,
.miniTitle,
.storyPageMiniTitle,
.storyCommentTitle,
.sideHeader h2,
.sideTitleRow h3,
.sideBlock h3,
.siteFooterTitle{
  font-weight:720 !important;
  letter-spacing:-0.024em !important;
  color:#171717 !important;
}

.heroTitle{
  font-size:27px !important;
}

.cityName{
  font-size:21px !important;
}

.storyPageTitle{
  font-size:31px !important;
  line-height:1.1 !important;
}

.cardTitle,
#cityCards .cardTitle{
  font-size:17px !important;
  line-height:1.18 !important;
}

#topReadStories .cardTitle,
.miniTitle,
.storyPageMiniTitle{
  font-size:15px !important;
  line-height:1.22 !important;
}

.heroText,
.hero p,
.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt,
.storyPageMiniExcerpt,
.storyPageContent,
.storyBody,
.modal .body{
  color:#475467 !important;
  font-weight:460 !important;
  letter-spacing:-0.004em !important;
}

.heroText,
.hero p,
.cardExcerpt,
#cityCards .cardExcerpt,
#topReadStories .cardExcerpt,
.storyPageMiniExcerpt{
  font-size:15px !important;
  line-height:1.68 !important;
}

.storyPageContent,
.storyBody{
  font-size:17px !important;
  line-height:1.82 !important;
  color:#243041 !important;
}

.muted,
.miniMeta,
.cardMeta,
#cityCards .cardMeta,
.cityMeta,
.storyPageMeta,
.storyPageMiniMeta,
.storyPageCityMeta,
.siteFooterText,
.heroKicker,
.heroMeta,
.label,
.tabBtn{
  color:#667085 !important;
  font-weight:560 !important;
  letter-spacing:-0.006em !important;
}

.listItem .name{
  font-size:14px !important;
  font-weight:620 !important;
  letter-spacing:-0.012em !important;
}

.siteFooterTitle{
  font-size:15px !important;
}

.siteFooterText{
  font-size:13px !important;
  line-height:1.65 !important;
}

.card,
.sideCard,
.contentCard,
.storyPageCard,
.storyPageCommentCard,
.listItem{
  box-shadow:none !important;
}

#topReadStories .card,
.storyPageMiniStory,
.listItem{
  background:#fffdfb !important;
}

@media (max-width:760px){
  .brand h1{
    font-size:17px !important;
  }

  .storyPageTitle{
    font-size:28px !important;
  }

  .storyPageContent,
  .storyBody{
    font-size:16px !important;
  }

  .cardTitle,
  #cityCards .cardTitle{
    font-size:16px !important;
  }

  #topReadStories .cardTitle,
  .miniTitle,
  .storyPageMiniTitle{
    font-size:14px !important;
  }

  .heroText,
  .hero p,
  .cardExcerpt,
  #cityCards .cardExcerpt,
  #topReadStories .cardExcerpt,
  .storyPageMiniExcerpt{
    font-size:14px !important;
  }
}


/* ===== AŞAMA 10 — Şikayet et butonu sakinleştirme ===== */
.storyPageActions .btnDanger,
.storyPageActions [data-action="report"],
.storyPageActions .reportBtn,
.storyPageActions #btnReportStory,
.storyPageUtilityBar .btnDanger,
.storyPageUtilityBar [data-action="report"],
.storyPageUtilityBar .reportBtn,
.storyPageUtilityBar #btnReportStory,
button[aria-label="Şikayet et"],
button[title="Şikayet et"]{
  background:#fff !important;
  color:#c45b14 !important;
  border:1px solid #f2c5a6 !important;
  box-shadow:none !important;
  font-weight:600 !important;
}

.storyPageActions .btnDanger:hover,
.storyPageActions [data-action="report"]:hover,
.storyPageActions .reportBtn:hover,
.storyPageActions #btnReportStory:hover,
.storyPageUtilityBar .btnDanger:hover,
.storyPageUtilityBar [data-action="report"]:hover,
.storyPageUtilityBar .reportBtn:hover,
.storyPageUtilityBar #btnReportStory:hover,
button[aria-label="Şikayet et"]:hover,
button[title="Şikayet et"]:hover{
  background:#fff7f1 !important;
  color:#a94e10 !important;
  border-color:#eab089 !important;
}

.storyPageActions .btnDanger:active,
.storyPageActions [data-action="report"]:active,
.storyPageActions .reportBtn:active,
.storyPageActions #btnReportStory:active,
.storyPageUtilityBar .btnDanger:active,
.storyPageUtilityBar [data-action="report"]:active,
.storyPageUtilityBar .reportBtn:active,
.storyPageUtilityBar #btnReportStory:active{
  transform:none !important;
}

/* text-match fallback: only styles the report button if it's the third action button */
.storyPageActions > .btn:nth-of-type(3),
.storyPageActions > .btnSolid:nth-of-type(3),
.storyPageUtilityBar > .btn:nth-of-type(3),
.storyPageUtilityBar > .btnSolid:nth-of-type(3){
  background:#fff !important;
  color:#c45b14 !important;
  border:1px solid #f2c5a6 !important;
  box-shadow:none !important;
  font-weight:600 !important;
}


/* ===== AŞAMA 15 — LİNK GİBİ DAVRANIŞ ===== */
[data-link-href][role="link"],
[data-story-id][role="link"],
[data-city-slug][role="link"]{
  cursor:pointer;
}
[data-link-href][role="link"]:focus-visible,
[data-story-id][role="link"]:focus-visible,
[data-city-slug][role="link"]:focus-visible{
  outline:2px solid #f59e0b;
  outline-offset:2px;
}


/* ===== AŞAMA 16 — GERÇEK ANCHOR KARTLAR ===== */
.cardLinkWrap{
  display:block;
  text-decoration:none;
  color:inherit;
}
.cardLinkWrap:hover,
.cardLinkWrap:visited,
.cardLinkWrap:active{
  color:inherit;
  text-decoration:none;
}
.cardLinkWrap:focus-visible{
  outline:2px solid #f59e0b;
  outline-offset:3px;
  border-radius:18px;
}
.listItem[href]{
  text-decoration:none;
  color:inherit;
}
.listItem[href]:visited,
.listItem[href]:hover,
.listItem[href]:active{
  color:inherit;
  text-decoration:none;
}
#map a[data-city-slug]{
  cursor:pointer;
}


/* ===== AŞAMA 30 — Yorumlar başlığı görünürlük düzeltmesi ===== */
.storyCommentSectionHead{
  display:block !important;
  margin:0 0 14px 0 !important;
}
.storyCommentTitle,
#storyCommentsTitle{
  display:block !important;
  margin:0 0 6px 0 !important;
  font-size:22px !important;
  line-height:1.18 !important;
  font-weight:720 !important;
  letter-spacing:-0.02em !important;
  color:#171717 !important;
}
.storyCommentHint{
  display:block !important;
  margin:0 0 14px 0 !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#667085 !important;
}
.storyCommentSection--page .storyCommentComposer,
.storyCommentSection .storyCommentComposer{
  margin-top:0 !important;
}


/* ===== AŞAMA 32 — Story layout tam genişlik düzeltmesi ===== */
body.storyPage .storyPageLayout{
  width:100% !important;
  max-width:none !important;
  align-items:stretch !important;
}

body.storyPage .storyPageShell{
  width:100% !important;
  max-width:100% !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 330px !important;
  gap:18px !important;
}

body.storyPage .storyPageMain{
  width:100% !important;
  min-width:0 !important;
}

body.storyPage .storyPageCard,
body.storyPage .storyPageCommentCard,
body.storyPage .storyPageBottomAd{
  width:100% !important;
  box-sizing:border-box !important;
}

body.storyPage .storyCommentSectionHead,
body.storyPage .storyCommentSectionHead > *,
body.storyPage .storyCommentTitle,
body.storyPage #storyCommentsTitle,
body.storyPage .storyCommentHint{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width:1024px){
  body.storyPage .storyPageShell{
    grid-template-columns:1fr !important;
  }
}


/* ===== AŞAMA 36 — Türkçe konu/tema yazı biçimi güvenliği ===== */
.storyChip,
.badge,
.insightChip,
.storyPageMiniStory .badge,
.storyPageSideCard .badge,
.cityInsightValue,
.cityInsightChips .insightChip,
#cityCards .storyChip,
#topReadStories .storyChip,
#newStories .storyChip,
#topStories .storyChip,
#talkedStories .storyChip,
#risingStories .storyChip,
#hotStories .storyChip,
#viralStory .storyChip{
  text-transform:none !important;
}


/* ===== AŞAMA 58A — Story paylaşım menüsü ===== */
.storyShareWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.storyShareMenu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:40;
  min-width:210px;
  padding:8px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.14);
}

.storyShareMenu[hidden]{
  display:none !important;
}

.storyShareMenu button{
  width:100%;
  border:0;
  background:transparent;
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  font:inherit;
  font-weight:750;
  color:#1f2937;
  cursor:pointer;
}

.storyShareMenu button:hover,
.storyShareMenu button:focus-visible{
  background:#fff3eb;
  color:#d35400;
  outline:none;
}

@media (max-width:640px){
  .storyShareWrap{
    position:static;
  }

  .storyShareMenu{
    left:16px;
    right:16px;
    top:auto;
    margin-top:8px;
    min-width:0;
  }
}


/* ===== AŞAMA 58A1 — Story paylaşım menüsü kesilme düzeltmesi ===== */
.storyPageCard,
.storyPageCard--main,
.storyPageMain,
.storyPageActionWrap,
.storyPageUtilityBar{
  overflow:visible !important;
}

.storyPageCard--main,
.storyPageActionWrap,
.storyPageUtilityBar{
  position:relative;
  z-index:20;
}

.storyShareWrap{
  position:relative;
  z-index:60;
}

.storyShareMenu{
  z-index:9999 !important;
  max-height:min(360px, calc(100vh - 160px));
  overflow-y:auto;
  overscroll-behavior:contain;
}

@media (max-width:640px){
  .storyShareWrap{
    position:relative;
  }

  .storyShareMenu{
    left:0;
    right:auto;
    top:calc(100% + 8px);
    width:min(280px, calc(100vw - 32px));
    max-height:min(330px, calc(100vh - 180px));
  }
}


/* ===== AŞAMA 67.1 — Oku butonu görsel standardı ===== */
/* Index, city ve sağ/top listelerdeki tüm Oku butonlarını tek görsel dile çeker. */
#cityCards .btnRead,
#topReadStories .btnRead,
#storyTopReadStories .btnRead,
#viralStory .indexStoryCard .btnRead,
#newStories .indexStoryCard .btnRead,
#topStories .indexStoryCard .btnRead,
#talkedStories .indexStoryCard .btnRead,
#risingStories .indexStoryCard .btnRead,
#hotStories .indexStoryCard .btnRead,
.indexStoryCard .btnRead{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:72px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 18px !important;
  border:1px solid #ff6a00 !important;
  border-radius:12px !important;
  background:#ff6a00 !important;
  color:#ffffff !important;
  font-family:var(--font-ui) !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-0.01em !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:none !important;
  white-space:nowrap !important;
}

#cityCards .btnRead:hover,
#topReadStories .btnRead:hover,
#storyTopReadStories .btnRead:hover,
#viralStory .indexStoryCard .btnRead:hover,
#newStories .indexStoryCard .btnRead:hover,
#topStories .indexStoryCard .btnRead:hover,
#talkedStories .indexStoryCard .btnRead:hover,
#risingStories .indexStoryCard .btnRead:hover,
#hotStories .indexStoryCard .btnRead:hover,
.indexStoryCard .btnRead:hover{
  background:#e85d00 !important;
  border-color:#e85d00 !important;
  color:#ffffff !important;
  text-decoration:none !important;
}

#cityCards .cardActions,
#topReadStories .cardActions,
#storyTopReadStories .cardActions,
.indexStoryCard .cardActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
}

@media (max-width:760px){
  #cityCards .btnRead,
  #topReadStories .btnRead,
  #storyTopReadStories .btnRead,
  .indexStoryCard .btnRead{
    min-width:68px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 16px !important;
    font-size:13px !important;
    border-radius:12px !important;
  }
}


/* ===== AŞAMA 74 — Hero kicker kozmik turuncu ===== */
.heroKicker{
  color:#ff6a00 !important;
  border-color:rgba(255,106,0,.28) !important;
}


/* ===== AŞAMA 79 — Index chip rol renkleri düzeltildi ===== */
/* Konu + araç turuncu/krem; okuma süresi gri/nötr. */
#viralStory .indexStoryCard .storyChip--vehicle,
#newStories .indexStoryCard .storyChip--vehicle,
#topStories .indexStoryCard .storyChip--vehicle,
#talkedStories .indexStoryCard .storyChip--vehicle,
#risingStories .indexStoryCard .storyChip--vehicle,
#hotStories .indexStoryCard .storyChip--vehicle{
  color:#f97316 !important;
  border-color:#fed7aa !important;
  background:#fff7ed !important;
}

#viralStory .indexStoryCard .storyChip--read,
#newStories .indexStoryCard .storyChip--read,
#topStories .indexStoryCard .storyChip--read,
#talkedStories .indexStoryCard .storyChip--read,
#risingStories .indexStoryCard .storyChip--read,
#hotStories .indexStoryCard .storyChip--read{
  color:#4b5563 !important;
  border-color:#e5e7eb !important;
  background:#fafafa !important;
}


/* ===== AŞAMA 88 — Mobil/tablet index header + harita responsive düzeltmesi ===== */
/* Sadece yerleşim düzeltmesi: JS, modal, oy, yorum, paylaşım ve cache davranışlarına dokunmaz. */

@media (max-width:1024px){
  .wrap{
    max-width:100% !important;
    padding:10px 12px 22px !important;
  }

  .topbar{
    gap:10px !important;
  }

  .brandLink,
  .brand{
    min-width:0 !important;
  }

  .brand h1{
    max-width:230px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .searchWrap{
    min-width:210px !important;
  }

  .hero{
    padding:22px 22px 20px !important;
    margin-bottom:14px !important;
  }

  .heroContent{
    max-width:100% !important;
  }

  .heroStats{
    width:100% !important;
    max-width:none !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .mapArea{
    min-height:48vh !important;
    padding:12px !important;
  }

  .activeCity{
    min-width:190px !important;
  }
}

@media (max-width:760px){
  .wrap{
    padding:8px 10px 18px !important;
  }

  .topbar{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  .brandLink{
    flex:1 1 100% !important;
    width:100% !important;
  }

  .brand{
    width:100% !important;
  }

  .brand h1{
    max-width:calc(100vw - 92px) !important;
    font-size:16px !important;
    line-height:1.15 !important;
  }

  .topActions{
    order:2 !important;
    flex:0 0 auto !important;
    gap:8px !important;
  }

  .topActions .btnSolid,
  #btnWriteFromIndex,
  #btnOpenSubmit{
    min-height:40px !important;
    height:40px !important;
    padding:0 12px !important;
    border-radius:10px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .searchWrap{
    order:3 !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .searchBox{
    min-height:40px !important;
    padding:7px 8px !important;
    gap:6px !important;
  }

  .searchBox input{
    min-width:0 !important;
    font-size:12px !important;
  }

  .searchIcon{
    font-size:13px !important;
  }

  .searchBox .iconBtn,
  #btnClear{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    border-radius:10px !important;
    flex:0 0 32px !important;
  }

  .hero{
    padding:18px 14px !important;
    margin-bottom:14px !important;
    border-radius:16px !important;
  }

  .heroKicker{
    max-width:100% !important;
    white-space:normal !important;
    line-height:1.35 !important;
    padding:8px 12px !important;
  }

  .heroLead,
  .hero p{
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.62 !important;
  }

  .heroStats{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:18px !important;
    max-width:none !important;
  }

  .heroStat{
    min-height:0 !important;
    padding:14px 14px 12px !important;
    border-radius:14px !important;
  }

  .heroStatNumber{
    font-size:28px !important;
    line-height:1 !important;
  }

  .mapHead{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:12px !important;
  }

  .activeCity{
    width:100% !important;
    min-width:0 !important;
    align-items:flex-start !important;
    text-align:left !important;
    box-sizing:border-box !important;
  }

  #activeCityMeta{
    justify-content:flex-start !important;
  }

  .mapArea{
    min-height:0 !important;
    height:auto !important;
    padding:10px !important;
    align-items:flex-start !important;
  }

  #map{
    width:100% !important;
    overflow:hidden !important;
  }

  #map svg{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    display:block !important;
  }

  #map svg .city-label{
    font-size:12px !important;
    stroke-width:3px !important;
  }
}

@media (max-width:430px){
  .topbar{
    gap:8px !important;
  }

  .topActions .btnSolid,
  #btnWriteFromIndex,
  #btnOpenSubmit{
    padding:0 10px !important;
    font-size:12.5px !important;
  }

  .searchWrap{
    flex-basis:calc(100% - 118px) !important;
  }

  .searchBox input::placeholder{
    font-size:12px !important;
  }

  .hero{
    padding:16px 12px !important;
  }

  .heroStats{
    gap:8px !important;
  }

  .mapCard{
    border-radius:14px !important;
  }

  .mapArea{
    padding:8px !important;
  }

  #map svg .city-label{
    font-size:10px !important;
    stroke-width:2.8px !important;
  }
}


/* ===== AŞAMA 89 — Sağ panel saha responsive düzeni ===== */
/* Amaç: tablette sağ panel en alta düşmesin; mobilde öne çıkanlar haritadan önce kompakt görünsün. */

/* Tablet / küçük laptop: sağ panel sağda kalır. */
@media (min-width:761px) and (max-width:1100px){
  .grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(260px, 300px) !important;
    gap:14px !important;
    align-items:start !important;
  }

  .main{
    min-width:0 !important;
  }

  .side{
    position:sticky !important;
    top:72px !important;
    min-width:0 !important;
    width:auto !important;
    align-self:start !important;
  }

  .sideHeader{
    padding:12px !important;
  }

  .sideBlock{
    padding:12px !important;
  }

  .side .listItem{
    padding:10px 10px !important;
    gap:8px !important;
  }

  .side .adBox{
    min-height:160px !important;
    height:auto !important;
  }

  .exploreGrid{
    grid-template-columns:1fr !important;
  }

  .mapArea{
    min-height:46vh !important;
  }
}

/* Mobil: sağ panel artık sayfanın en dibine gömülmez; hero'dan sonra, haritadan önce gelir. */
@media (max-width:760px){
  .grid{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .side{
    order:-1 !important;
    position:static !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
  }

  .main{
    order:0 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .sideHeader{
    padding:12px 12px 10px !important;
  }

  .sideHeader h2{
    font-size:15px !important;
  }

  .sideBlock{
    padding:10px 12px 12px !important;
  }

  .sideTitleRow{
    margin-bottom:8px !important;
  }

  .sideTitleRow h3{
    font-size:13px !important;
  }

  .side .list{
    display:grid !important;
    gap:8px !important;
    max-height:220px !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    padding-right:2px !important;
  }

  .side .listItem{
    min-height:44px !important;
    padding:9px 10px !important;
    border-radius:12px !important;
    gap:8px !important;
  }

  .side .liTitle,
  .side .listItem strong{
    font-size:13px !important;
    line-height:1.2 !important;
  }

  .side .liMeta,
  .side .listItem span,
  .side .muted{
    font-size:11.5px !important;
  }

  .side .liRight{
    min-width:34px !important;
    height:34px !important;
    font-size:12px !important;
  }

  /* Reklam, mobilde "En çok okunan" başlığını aşağı itmesin; listenin altına alınsın. */
  .sideBlock{
    display:flex !important;
    flex-direction:column !important;
  }

  .sideBlock .sideTitleRow{
    order:1 !important;
  }

  .sideBlock .list{
    order:2 !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"]{
    order:3 !important;
    margin-top:10px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"] .adBox{
    min-height:90px !important;
    height:90px !important;
    font-size:12px !important;
  }

  .mapCard{
    order:1 !important;
  }

  .exploreCard{
    order:2 !important;
  }

  .mapArea{
    min-height:0 !important;
    height:auto !important;
    padding:10px !important;
  }

  .mapHead{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  .activeCity{
    width:100% !important;
    min-width:0 !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
}

@media (max-width:430px){
  .side .list{
    max-height:200px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"] .adBox{
    min-height:78px !important;
    height:78px !important;
  }
}


/* ===== AŞAMA 90 — Mobil saha akışı: harita önce, sağ panel kompakt ===== */
/* Sadece mobil index akışını düzeltir. Tablet düzenine ve JS davranışlarına dokunmaz. */
@media (max-width:760px){
  /* .main içindeki harita ve keşfet kartları, .side ile aynı mobil akışta sıralanabilsin. */
  .grid{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .main{
    display:contents !important;
  }

  .mapCard{
    order:1 !important;
  }

  .side{
    order:2 !important;
    position:static !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
  }

  .exploreCard{
    order:3 !important;
  }

  /* Hero istatistikleri mobilde büyük dikey blok değil, kompakt mini şerit gibi dursun. */
  .heroStats{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:7px !important;
    margin-top:14px !important;
    width:100% !important;
    max-width:none !important;
  }

  .heroStat{
    min-height:0 !important;
    padding:9px 8px 8px !important;
    border-radius:13px !important;
  }

  .heroStatNumber{
    font-size:22px !important;
    line-height:1 !important;
  }

  .heroStatLabel{
    margin-top:3px !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
  }

  /* Harita mobilde daha erken ve daha az boşlukla görünsün. */
  .mapHead{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:11px 12px !important;
  }

  .activeCity{
    width:100% !important;
    min-width:0 !important;
    align-items:flex-start !important;
    text-align:left !important;
    box-sizing:border-box !important;
    padding:8px 10px !important;
  }

  #activeCityMeta{
    justify-content:flex-start !important;
  }

  .mapArea{
    min-height:0 !important;
    height:auto !important;
    padding:8px !important;
    align-items:flex-start !important;
  }

  #map,
  #map svg{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    display:block !important;
  }

  /* Sağ panel haritadan sonra gelir ama sayfayı boğmasın. */
  .sideHeader{
    padding:10px 12px 8px !important;
  }

  .sideBlock{
    padding:9px 12px 10px !important;
  }

  .side .list{
    max-height:168px !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    gap:7px !important;
  }

  .side .listItem{
    min-height:40px !important;
    padding:8px 9px !important;
    border-radius:11px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"]{
    margin-top:8px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"] .adBox{
    min-height:68px !important;
    height:68px !important;
    font-size:11px !important;
  }
}

@media (max-width:430px){
  .heroStats{
    gap:6px !important;
  }

  .heroStat{
    padding:8px 7px 7px !important;
  }

  .heroStatNumber{
    font-size:20px !important;
  }

  .heroStatLabel{
    font-size:10px !important;
  }

  .side .list{
    max-height:154px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"] .adBox{
    min-height:60px !important;
    height:60px !important;
  }
}


/* ===== AŞAMA 91 — Mobil final polish ===== */
/* Mobilde ürün hissini iyileştirir: daha temiz header, daha ince harita başlığı, daha sakin sidebar. */
@media (max-width:760px){
  .topbar{
    row-gap:9px !important;
    column-gap:8px !important;
    padding:10px 10px 11px !important;
  }

  .brandLink{
    flex:1 1 100% !important;
    width:100% !important;
  }

  .brand{
    width:100% !important;
    gap:8px !important;
  }

  .logoIcon{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    border-radius:10px !important;
  }

  .brand h1{
    font-size:16px !important;
    max-width:calc(100vw - 78px) !important;
    line-height:1.1 !important;
  }

  .topActions{
    order:2 !important;
  }

  .searchWrap{
    order:3 !important;
  }

  #btnWriteFromIndex,
  #btnOpenSubmit,
  .topActions .btnSolid{
    height:38px !important;
    min-height:38px !important;
    padding:0 11px !important;
    font-size:12.5px !important;
    border-radius:10px !important;
  }

  .searchBox{
    min-height:38px !important;
    padding:6px 7px !important;
  }

  .searchBox input{
    font-size:12.5px !important;
  }

  #btnClear,
  .searchBox .iconBtn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }

  .hero{
    padding:15px 12px 14px !important;
    margin-bottom:12px !important;
  }

  .heroKicker{
    padding:7px 10px !important;
    margin-bottom:12px !important;
    font-size:11.5px !important;
  }

  .heroLead,
  .hero p{
    font-size:13.5px !important;
    line-height:1.55 !important;
  }

  .heroStats{
    margin-top:12px !important;
  }

  .heroStat{
    padding:8px 7px 7px !important;
  }

  .heroStatNumber{
    font-size:20px !important;
  }

  .mapHead{
    padding:10px 11px !important;
    gap:7px !important;
  }

  .bigTitle{
    font-size:14px !important;
  }

  .mapHead .muted{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  .activeCity{
    padding:7px 9px !important;
    border-radius:10px !important;
  }

  .activeName{
    font-size:14px !important;
  }

  #activeCityMeta{
    font-size:11px !important;
    gap:5px !important;
  }

  .mapArea{
    padding:7px !important;
  }

  .side{
    border-radius:15px !important;
  }

  .sideHeader{
    padding:10px 11px 8px !important;
  }

  .sideHeader h2{
    font-size:14px !important;
  }

  .sideBlock{
    padding:9px 11px !important;
  }

  .sideTitleRow h3{
    font-size:12.5px !important;
  }

  .side .list{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }

  .side .listItem:nth-child(n+4){
    display:none !important;
  }

  .side .listItem{
    min-height:38px !important;
    padding:8px 9px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"]{
    margin-top:8px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"] .adBox{
    min-height:52px !important;
    height:52px !important;
    border-radius:12px !important;
    font-size:10.5px !important;
  }
}

@media (max-width:430px){
  .brand h1{
    font-size:15.5px !important;
  }

  #btnWriteFromIndex,
  #btnOpenSubmit,
  .topActions .btnSolid{
    padding:0 10px !important;
    font-size:12px !important;
  }

  .searchBox input{
    font-size:12px !important;
  }

  .heroStatNumber{
    font-size:19px !important;
  }

  .sideBlock .adSlot[data-ad-slot="index_side"] .adBox{
    min-height:48px !important;
    height:48px !important;
  }
}


/* ===== MOBIL CITY HERO POLISH V3 ===== */
/* city.html mobil hero: basligi sikistirmeden daha kompakt ve dengeli tutar. */
body.cityPage .cityHeroHint:empty{
  display:none !important;
}

body.cityPage .mobileOnlyText{
  display:none !important;
}

@media (max-width:760px){
  body.cityPage .desktopOnlyText{
    display:none !important;
  }

  body.cityPage .mobileOnlyText{
    display:inline !important;
  }

  body.cityPage .cityMain{
    gap:12px !important;
  }

  body.cityPage .cityHero{
    padding:12px !important;
    border-radius:16px !important;
  }

  body.cityPage .cityHeroTop{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:9px !important;
    align-items:start !important;
    justify-content:stretch !important;
    min-width:0 !important;
  }

  body.cityPage .cityHeroTop > div:first-child{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  body.cityPage .cityName{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:20px !important;
    line-height:1.12 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  body.cityPage .cityMeta{
    width:100% !important;
    max-width:100% !important;
    margin-top:2px !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  body.cityPage .cityHeroActions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    gap:8px !important;
    align-items:center !important;
    justify-content:stretch !important;
    min-width:0 !important;
  }

  body.cityPage .cityHeroActions .btn,
  body.cityPage .cityHeroActions .btnSolid{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    border-radius:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:12.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.cityPage .cityHeroHint{
    display:none !important;
  }
}

/* ===== MOBIL CITY UI POLISH V4 ===== */
/* City sayfasi mobilde daha dogal bir hero, sade aksiyon alani ve kompakt sehir ozeti. */
@media (max-width:760px){
  body.cityPage .cityMain{
    gap:12px !important;
  }

  body.cityPage .cityHero{
    padding:14px 14px 12px !important;
    border-radius:18px !important;
    background:#fff !important;
  }

  body.cityPage .cityHeroTop{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:10px !important;
    align-items:start !important;
  }

  body.cityPage .cityHeroTop > div:first-child{
    min-width:0 !important;
    width:100% !important;
  }

  body.cityPage .cityName{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    font-size:22px !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  body.cityPage .cityMeta{
    margin-top:4px !important;
    font-size:12px !important;
    line-height:1.25 !important;
    color:#667085 !important;
  }

  body.cityPage .cityHeroActions{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-width:0 !important;
  }

  body.cityPage .cityHeroActions .btn{
    width:auto !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 2px !important;
    border:0 !important;
    background:transparent !important;
    color:#667085 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    font-size:12.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    box-shadow:none !important;
  }

  body.cityPage .cityHeroActions .btnSolid{
    width:auto !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:12.5px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.cityPage .cityHeroHint{
    display:none !important;
  }

  body.cityPage .adInline{
    margin-top:0 !important;
  }

  body.cityPage .cityInsights{
    padding:13px !important;
    border-radius:18px !important;
    margin-bottom:0 !important;
    background:#fff !important;
  }

  body.cityPage .cityInsightsHead{
    margin-bottom:10px !important;
  }

  body.cityPage .cityInsightsHead h3{
    font-size:14px !important;
    line-height:1.2 !important;
  }

  body.cityPage .cityInsightStats{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }

  body.cityPage .cityInsightStat{
    padding:10px 11px !important;
    border-radius:14px !important;
    background:#fbfbfb !important;
  }

  body.cityPage .cityInsightValue{
    font-size:19px !important;
    line-height:1.05 !important;
    margin-bottom:5px !important;
  }

  body.cityPage .cityInsightLabel{
    font-size:11.5px !important;
    line-height:1.2 !important;
  }

  body.cityPage .cityInsightStat:nth-child(3){
    grid-column:1 / -1 !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  body.cityPage .cityInsightStat:nth-child(3) .cityInsightValue{
    margin-bottom:0 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    max-width:62% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.cityPage .cityInsightStat:nth-child(3) .cityInsightLabel{
    flex:0 0 auto !important;
    text-align:right !important;
  }

  body.cityPage .cityInsightGroup{
    margin-top:9px !important;
  }

  body.cityPage .cityInsightGroupTitle{
    margin-bottom:6px !important;
    font-size:11.5px !important;
  }

  body.cityPage .cityInsightChips{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-x:auto !important;
    padding-bottom:1px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  body.cityPage .cityInsightChips::-webkit-scrollbar{
    display:none !important;
  }

  body.cityPage .insightChip{
    flex:0 0 auto !important;
    padding:5px 8px !important;
    font-size:11.5px !important;
    line-height:1 !important;
  }
}

@media (max-width:380px){
  body.cityPage .cityHero{
    padding:13px 12px 11px !important;
  }

  body.cityPage .cityName{
    font-size:21px !important;
  }

  body.cityPage .cityHeroActions{
    gap:8px !important;
  }

  body.cityPage .cityHeroActions .btn{
    font-size:12px !important;
  }

  body.cityPage .cityHeroActions .btnSolid{
    padding:0 12px !important;
    font-size:12px !important;
  }
}



/* ===== MOBILE CITY PANEL ORDER V6 ===== */
/* City mobil akisi: hikayeler daha erken gorunsun; yan panel kartlari hikayelerden sonra kompakt kalsin. */
@media (max-width:760px){
  body.cityPage .cityGrid{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  body.cityPage .cityMain,
  body.cityPage .citySide{
    display:contents !important;
  }

  body.cityPage .cityHero{
    order:1 !important;
    width:100% !important;
  }

  body.cityPage .adInline{
    order:2 !important;
    width:100% !important;
  }

  body.cityPage .cityInsights{
    order:3 !important;
    width:100% !important;
  }

  body.cityPage .contentCard{
    order:4 !important;
    width:100% !important;
  }

  body.cityPage .cityNearPanel{
    order:5 !important;
    width:100% !important;
  }

  body.cityPage .cityTopReadPanel{
    order:6 !important;
    width:100% !important;
  }

  body.cityPage .citySideAd{
    order:7 !important;
    width:100% !important;
  }

  body.cityPage .cityTopReadPanel,
  body.cityPage .cityNearPanel{
    border-radius:18px !important;
    background:#fff !important;
    overflow:hidden !important;
  }

  body.cityPage .cityTopReadPanel .sideHeader,
  body.cityPage .cityNearPanel .sideHeader{
    padding:12px 13px 8px !important;
  }

  body.cityPage .cityTopReadPanel .sideHeader h2,
  body.cityPage .cityNearPanel .sideHeader h2{
    font-size:14px !important;
    line-height:1.2 !important;
    margin:0 !important;
  }

  body.cityPage .cityTopReadPanel .sideBlock,
  body.cityPage .cityNearPanel .sideBlock{
    padding:0 12px 12px !important;
  }

  body.cityPage .cityNearPanel .miniList{
    gap:7px !important;
  }

  body.cityPage .cityNearPanel .miniRow{
    min-height:40px !important;
    padding:9px 11px !important;
    border-radius:12px !important;
  }

  body.cityPage .cityNearPanel .miniRow:nth-child(n+5){
    display:none !important;
  }

  body.cityPage .cityTopReadPanel .miniList{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }

  body.cityPage .cityTopReadPanel .miniList > *{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:none !important;
  }

  body.cityPage #topReadStories .indexStoryCard{
    min-height:0 !important;
    padding:10px 11px !important;
    border-radius:13px !important;
    box-shadow:none !important;
  }

  body.cityPage #topReadStories .cardLinkWrap{
    display:block !important;
  }

  body.cityPage #topReadStories .cardTop{
    margin:0 0 6px !important;
  }

  body.cityPage #topReadStories .cardBadges{
    gap:5px !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  body.cityPage #topReadStories .storyChip{
    padding:4px 7px !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  body.cityPage #topReadStories .storyChip:nth-child(n+2){
    display:none !important;
  }

  body.cityPage #topReadStories .cardTitle{
    margin:0 0 6px !important;
    font-size:13.5px !important;
    line-height:1.18 !important;
    letter-spacing:.15px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.cityPage #topReadStories .cardExcerpt,
  body.cityPage #topReadStories .cardActions{
    display:none !important;
  }

  body.cityPage #topReadStories .cardMetaRow{
    margin:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  body.cityPage #topReadStories .cardMeta{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:11.5px !important;
    line-height:1.2 !important;
    color:#667085 !important;
  }
}

/* ===== FINAL MOBILE MAP EXPERIENCE =====
   Tek kaynak: mobil ana sayfa harita CTA + tam ekran keşif modu.
   Eski harita patch blokları bu bölümle değiştirilmiştir. */
.mapMobileTools,
.mapExploreBtn{
  display:none;
}

#mobileMapExplorer.mobileMapExplorer[hidden]{
  display:none !important;
}

#map svg [data-city].is-map-selected{
  fill:#ff6a00 !important;
  stroke:rgba(43,28,18,.38) !important;
  stroke-width:1.15 !important;
  filter:drop-shadow(0 6px 10px rgba(255,106,0,.26)) !important;
}

@media (max-width:720px), (hover:none), (pointer:coarse){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body:not(.mobileMapOpen) .wrap,
  body:not(.mobileMapOpen) .grid,
  body:not(.mobileMapOpen) .main,
  body:not(.mobileMapOpen) .mapCard,
  body:not(.mobileMapOpen) .contentCard,
  body:not(.mobileMapOpen) .side{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body:not(.mobileMapOpen) .grid{
    display:flex !important;
    flex-direction:column !important;
    overflow-x:hidden !important;
  }

  body:not(.mobileMapOpen) .mapCard{
    overflow:hidden !important;
  }

  body:not(.mobileMapOpen) .mapMobileTools{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    margin:0 10px 10px !important;
    padding:8px !important;
    max-width:calc(100vw - 32px) !important;
    border:1px solid rgba(42,31,24,.08) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 10px 24px rgba(42,31,24,.07) !important;
    overflow:hidden !important;
  }

  body:not(.mobileMapOpen) .mapMobileHint,
  body:not(.mobileMapOpen) .mapMobileTools .mapZoomBtns{
    display:none !important;
  }

  body:not(.mobileMapOpen) .mapExploreBtn{
    width:100% !important;
    max-width:100% !important;
    min-height:43px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:16px !important;
    padding:0 16px !important;
    background:linear-gradient(135deg,#ff7a1a,#ff5d00) !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:950 !important;
    letter-spacing:.1px !important;
    box-shadow:0 12px 24px rgba(255,106,0,.22) !important;
    touch-action:manipulation !important;
    user-select:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  body:not(.mobileMapOpen) .mapArea{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:8px 10px 14px !important;
    display:block !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#fff,#fff8f3) !important;
  }

  body:not(.mobileMapOpen) #map,
  body:not(.mobileMapOpen) #map svg{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }
}

html.mobileMapOpen,
body.mobileMapOpen{
  width:100vw !important;
  max-width:100vw !important;
  height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.mobileMapOpen{
  touch-action:none !important;
}

body.mobileMapOpen > .wrap{
  pointer-events:none !important;
}

#mobileMapExplorer.mobileMapExplorer:not([hidden]){
  display:flex !important;
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:100vw !important;
  height:100vh !important;
  height:100svh !important;
  height:100dvh !important;
  height:calc(var(--ceh-map-vh, 1vh) * 100) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:2147483000 !important;
  overflow:hidden !important;
  background:#fffaf6 !important;
  transform:none !important;
  box-sizing:border-box !important;
  touch-action:none !important;
}

#mobileMapExplorer .mobileMapShell{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:0 !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#ffffff 0%,#fff8f2 100%) !important;
  color:#2a1f18 !important;
  box-sizing:border-box !important;
}

#mobileMapExplorer .mobileMapTop{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:calc(9px + env(safe-area-inset-top)) 12px 8px !important;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid rgba(42,31,24,.08) !important;
  box-shadow:0 8px 22px rgba(42,31,24,.06) !important;
  z-index:20 !important;
}

#mobileMapExplorer .mobileMapTop strong{
  display:block !important;
  font-size:16px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  letter-spacing:-.2px !important;
}

#mobileMapExplorer .mobileMapTop span{
  display:block !important;
  max-width:245px !important;
  margin-top:2px !important;
  color:#6d5a4e !important;
  font-size:11px !important;
  line-height:1.18 !important;
  font-weight:850 !important;
}

#mobileMapExplorer .mobileMapClose{
  flex:0 0 auto !important;
  min-width:62px !important;
  min-height:34px !important;
  border:1px solid rgba(42,31,24,.12) !important;
  border-radius:999px !important;
  padding:0 12px !important;
  background:#fff !important;
  color:#3b2a1f !important;
  font-size:12px !important;
  font-weight:950 !important;
  box-shadow:0 8px 18px rgba(42,31,24,.08) !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

#mobileMapExplorer .mobileMapSearchRow{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 12px !important;
  background:rgba(255,255,255,.98) !important;
  z-index:19 !important;
}

#mobileMapExplorer .mobileMapSearchRow input{
  min-width:0 !important;
  flex:1 1 auto !important;
  height:39px !important;
  border:1px solid rgba(42,31,24,.13) !important;
  border-radius:999px !important;
  padding:0 13px !important;
  background:#fff !important;
  color:#2a1f18 !important;
  font-size:13px !important;
  font-weight:850 !important;
  outline:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(42,31,24,.06) !important;
  touch-action:manipulation !important;
}

#mobileMapExplorer .mobileMapSearchRow button{
  flex:0 0 auto !important;
  min-width:56px !important;
  height:39px !important;
  border:0 !important;
  border-radius:999px !important;
  padding:0 14px !important;
  background:#ff6a00 !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:950 !important;
  box-shadow:0 9px 20px rgba(255,106,0,.24) !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

#mobileMapExplorer .mobileMapViewport{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
  cursor:grab !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,106,0,.08), transparent 26%),
    linear-gradient(180deg,#f7f8fa 0%,#fff8f2 100%) !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

#mobileMapExplorer .mobileMapViewport.isDragging{
  cursor:grabbing !important;
}

#mobileMapExplorer .mobileMapCanvas{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#mobileMapExplorer .mobileMapCanvas svg{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  display:block !important;
  background:transparent !important;
  fill:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
}

#mobileMapExplorer .mobileMapCanvas svg g#labels,
#mobileMapExplorer .mobileMapCanvas svg .city-label-layer,
#mobileMapExplorer .mobileMapCanvas svg .city-label-group,
#mobileMapExplorer .mobileMapCanvas svg .city-label,
#mobileMapExplorer .mobileMapCanvas svg .city-plate,
#mobileMapExplorer .mobileMapCanvas svg #label_points,
#mobileMapExplorer .mobileMapCanvas svg text{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

#mobileMapExplorer .mobileMapCanvas svg a,
#mobileMapExplorer .mobileMapCanvas svg a[data-city-slug]{
  color:inherit !important;
  fill:inherit !important;
  text-decoration:none !important;
  pointer-events:auto !important;
}

#mobileMapExplorer .mobileMapCanvas svg [data-city]{
  fill:#d9dee3 !important;
  stroke:#ffffff !important;
  stroke-width:.72 !important;
  filter:none !important;
  transition:fill .15s ease, stroke .15s ease, stroke-width .15s ease, filter .15s ease !important;
  cursor:pointer !important;
  touch-action:none !important;
  pointer-events:auto !important;
}

#mobileMapExplorer .mobileMapCanvas svg [data-city][data-has-stories="1"]{
  fill:#ffd8bb !important;
}

#mobileMapExplorer .mobileMapCanvas svg [data-city].is-map-selected{
  fill:#ff6a00 !important;
  stroke:rgba(43,28,18,.50) !important;
  stroke-width:1.45 !important;
  filter:drop-shadow(0 8px 13px rgba(255,106,0,.32)) !important;
}

#mobileMapExplorer .mobileMapControlBar{
  position:absolute !important;
  top:calc(112px + env(safe-area-inset-top)) !important;
  right:10px !important;
  z-index:30 !important;
  width:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

#mobileMapExplorer .mobileMapControlBar .mapZoomBtn,
#mobileMapExplorer .mobileMapControlBar #mobileMapZoomReset{
  appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:44px !important;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 10px 24px rgba(42,31,24,.16) !important;
  border:1px solid rgba(42,31,24,.12) !important;
  color:#2a1f18 !important;
  font-size:17px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

#mobileMapExplorer .mobileMapControlBar #mobileMapZoomReset{
  font-size:10px !important;
  letter-spacing:.1px !important;
}

#mobileMapExplorer .mobileMapControlBar .mapZoomBtnPrimary{
  background:linear-gradient(135deg,#ff7a1a,#ff5d00) !important;
  color:#fff !important;
  border-color:rgba(255,106,0,.35) !important;
}

#mobileMapExplorer .mobileMapSheet{
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  z-index:31 !important;
  width:auto !important;
  max-height:38vh !important;
  overflow:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:auto !important;
  touch-action:pan-y !important;
}

#mobileMapExplorer .mobileMapSheetEmpty,
#mobileMapExplorer .mobileMapSelectedCard{
  border-radius:22px !important;
  background:rgba(255,255,255,.97) !important;
  border:1px solid rgba(42,31,24,.10) !important;
  box-shadow:0 18px 42px rgba(42,31,24,.18) !important;
  backdrop-filter:blur(14px) !important;
}

#mobileMapExplorer .mobileMapSheetEmpty{
  padding:12px 14px !important;
  color:#6d5a4e !important;
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
}

#mobileMapExplorer .mobileMapSelectedCard{
  padding:12px !important;
}

#mobileMapExplorer .mobileMapSelectedTop{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
}

#mobileMapExplorer .mobileMapSelectedLabel{
  margin-bottom:2px !important;
  color:#8a7160 !important;
  font-size:10px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
}

#mobileMapExplorer .mobileMapSelectedCard h3{
  margin:0 !important;
  color:#1f2933 !important;
  font-size:21px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  letter-spacing:-.35px !important;
}

#mobileMapExplorer .mobileMapSelectedPill{
  flex:0 0 auto !important;
  max-width:42% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  padding:7px 10px !important;
  background:#fff4eb !important;
  border:1px solid rgba(255,106,0,.16) !important;
  color:#b84b00 !important;
  font-size:11px !important;
  font-weight:950 !important;
}

#mobileMapExplorer .mobileMapSelectedStats{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin:9px 0 !important;
}

#mobileMapExplorer .mobileMapSelectedStats div{
  min-width:0 !important;
  border-radius:16px !important;
  padding:9px 10px !important;
  background:#fff7f0 !important;
  border:1px solid rgba(42,31,24,.07) !important;
}

#mobileMapExplorer .mobileMapSelectedStats b{
  display:block !important;
  color:#1f2933 !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

#mobileMapExplorer .mobileMapSelectedStats span{
  display:block !important;
  margin-top:3px !important;
  color:#6d5a4e !important;
  font-size:11px !important;
  font-weight:900 !important;
}

#mobileMapExplorer .mobileMapSelectedActions{
  display:grid !important;
  grid-template-columns:1.1fr .9fr !important;
  gap:8px !important;
}

#mobileMapExplorer .mobileMapSelectedActions a{
  min-height:41px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  padding:0 12px !important;
  font-size:12.5px !important;
  font-weight:1000 !important;
  text-decoration:none !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

#mobileMapExplorer .mobileMapPrimaryAction{
  background:#ff6a00 !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(255,106,0,.22) !important;
}

#mobileMapExplorer .mobileMapGhostAction{
  background:#fff !important;
  color:#3b2a1f !important;
  border:1px solid rgba(42,31,24,.10) !important;
}

@media (max-width:360px){
  #mobileMapExplorer .mobileMapTop span{
    display:none !important;
  }

  #mobileMapExplorer .mobileMapSelectedActions{
    grid-template-columns:1fr !important;
  }
}

/* ===== FINAL MOBILE MAP REFINEMENT V7 =====
   390/430px telefonlarda: ortalı keşif görünümü, gerçek sürükleme hissi,
   kompakt bilgi kartı, seçili şehir etiketi ve focus/bracket temizliği. */
#mobileMapExplorer .mobileMapCanvas svg a:focus,
#mobileMapExplorer .mobileMapCanvas svg a:focus-visible,
#mobileMapExplorer .mobileMapCanvas svg [data-city]:focus,
#mobileMapExplorer .mobileMapCanvas svg [data-city]:focus-visible{
  outline:none !important;
}

#mobileMapExplorer .mobileMapCanvas svg [data-city].is-map-selected{
  fill:#ff6a00 !important;
  stroke:rgba(136,64,19,.38) !important;
  stroke-width:.95 !important;
  filter:drop-shadow(0 7px 12px rgba(255,106,0,.24)) !important;
}

#mobileMapExplorer .mobileMapCityLabel{
  position:absolute !important;
  z-index:29 !important;
  transform:translate(-50%, calc(-100% - 9px)) !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:rgba(31,41,51,.94) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 10px 24px rgba(31,41,51,.20) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .14s ease, transform .14s ease !important;
}

#mobileMapExplorer .mobileMapCityLabel::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:-5px !important;
  width:9px !important;
  height:9px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  background:rgba(31,41,51,.94) !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

#mobileMapExplorer .mobileMapCityLabel.isVisible{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate(-50%, calc(-100% - 13px)) !important;
}

@media (max-width:720px), (hover:none), (pointer:coarse){
  #mobileMapExplorer .mobileMapTop{
    padding:calc(8px + env(safe-area-inset-top)) 12px 7px !important;
  }

  #mobileMapExplorer .mobileMapTop strong{
    font-size:15.5px !important;
  }

  #mobileMapExplorer .mobileMapTop span{
    max-width:220px !important;
    font-size:10.5px !important;
  }

  #mobileMapExplorer .mobileMapSearchRow{
    padding:7px 12px 7px !important;
    gap:7px !important;
  }

  #mobileMapExplorer .mobileMapSearchRow input{
    height:37px !important;
    font-size:12.5px !important;
  }

  #mobileMapExplorer .mobileMapSearchRow button{
    height:37px !important;
    min-width:54px !important;
    font-size:12.5px !important;
  }

  #mobileMapExplorer .mobileMapViewport{
    flex:1 1 auto !important;
    min-height:260px !important;
    padding-bottom:188px !important;
    background:
      radial-gradient(circle at 22% 18%, rgba(255,106,0,.075), transparent 29%),
      linear-gradient(180deg,#fbfcfd 0%,#fff8f2 100%) !important;
  }

  #mobileMapExplorer .mobileMapCanvas{
    height:100% !important;
  }

  #mobileMapExplorer .mobileMapCanvas svg{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
  }

  #mobileMapExplorer .mobileMapControlBar{
    top:calc(100px + env(safe-area-inset-top)) !important;
    right:10px !important;
    gap:6px !important;
  }

  #mobileMapExplorer .mobileMapControlBar .mapZoomBtn,
  #mobileMapExplorer .mobileMapControlBar #mobileMapZoomReset{
    min-width:39px !important;
    width:39px !important;
    height:39px !important;
    border-radius:14px !important;
    font-size:15px !important;
    box-shadow:0 8px 18px rgba(42,31,24,.14) !important;
  }

  #mobileMapExplorer .mobileMapControlBar #mobileMapZoomReset{
    font-size:9.5px !important;
  }

  #mobileMapExplorer .mobileMapSheet{
    left:10px !important;
    right:10px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    max-height:200px !important;
  }

  #mobileMapExplorer .mobileMapSheetEmpty,
  #mobileMapExplorer .mobileMapSelectedCard{
    border-radius:20px !important;
    box-shadow:0 14px 34px rgba(42,31,24,.16) !important;
  }

  #mobileMapExplorer .mobileMapSelectedCard{
    padding:10px !important;
  }

  #mobileMapExplorer .mobileMapSelectedTop{
    align-items:center !important;
    gap:8px !important;
  }

  #mobileMapExplorer .mobileMapSelectedLabel{
    font-size:9.5px !important;
    letter-spacing:.42px !important;
  }

  #mobileMapExplorer .mobileMapSelectedCard h3{
    font-size:18.5px !important;
    line-height:1.05 !important;
  }

  #mobileMapExplorer .mobileMapSelectedPill{
    max-width:44% !important;
    padding:6px 9px !important;
    font-size:10.5px !important;
  }

  #mobileMapExplorer .mobileMapSelectedStats{
    gap:7px !important;
    margin:8px 0 !important;
  }

  #mobileMapExplorer .mobileMapSelectedStats div{
    border-radius:14px !important;
    padding:8px 9px !important;
  }

  #mobileMapExplorer .mobileMapSelectedStats b{
    font-size:18px !important;
  }

  #mobileMapExplorer .mobileMapSelectedStats span{
    margin-top:2px !important;
    font-size:10.5px !important;
  }

  #mobileMapExplorer .mobileMapSelectedActions{
    grid-template-columns:1.05fr .95fr !important;
    gap:7px !important;
  }

  #mobileMapExplorer .mobileMapSelectedActions a{
    min-height:37px !important;
    border-radius:999px !important;
    font-size:11.8px !important;
  }
}

/* ===== MOBILE MAP FINAL V10: compact suggestions + unified map labels ===== */
#mobileMapExplorer .mobileMapSearchRow{
  position:relative !important;
  z-index:60 !important;
}

#mobileMapExplorer .mobileMapSuggestPanel{
  position:absolute !important;
  left:12px !important;
  right:72px !important;
  top:calc(100% + 4px) !important;
  z-index:90 !important;
  display:none !important;
  max-height:min(194px, 31vh) !important;
  overflow:auto !important;
  padding:4px !important;
  border:1px solid rgba(42,31,24,.10) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 14px 28px rgba(42,31,24,.14) !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

#mobileMapExplorer .mobileMapSuggestPanel.isVisible{
  display:block !important;
}

#mobileMapExplorer .mobileMapSuggestItem{
  appearance:none !important;
  width:100% !important;
  min-height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  border:0 !important;
  border-radius:11px !important;
  padding:0 9px !important;
  background:#fff !important;
  color:#26313b !important;
  text-align:left !important;
  font-size:12px !important;
  font-weight:950 !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

#mobileMapExplorer .mobileMapSuggestItem + .mobileMapSuggestItem{
  margin-top:1px !important;
}

#mobileMapExplorer .mobileMapSuggestItem:active,
#mobileMapExplorer .mobileMapSuggestItem:hover,
#mobileMapExplorer .mobileMapSuggestItem[aria-selected="true"]{
  background:#fff5ed !important;
}

#mobileMapExplorer .mobileMapSuggestItem small{
  flex:0 0 auto !important;
  min-width:25px !important;
  height:20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#fff7f0 !important;
  border:1px solid rgba(255,106,0,.12) !important;
  color:#a94a00 !important;
  font-size:9px !important;
  font-weight:950 !important;
}

#mobileMapExplorer .mobileMapSuggestEmpty{
  padding:9px 10px !important;
  color:#7a6a60 !important;
  font-size:11.5px !important;
  font-weight:850 !important;
}

#mobileMapExplorer .mobileMapControlBar{
  z-index:42 !important;
}

#mobileMapExplorer .mobileMapViewport{
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  padding-bottom:124px !important;
}

#mobileMapExplorer .mobileMapViewport.isDragging .mobileMapCanvas svg [data-city]{
  cursor:grabbing !important;
}

#mobileMapExplorer .mobileMapCanvas svg g#labels,
#mobileMapExplorer .mobileMapCanvas svg .city-label-layer,
#mobileMapExplorer .mobileMapCanvas svg .city-label-group,
#mobileMapExplorer .mobileMapCanvas svg .city-label{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
}

#mobileMapExplorer .mobileMapCanvas svg #label_points,
#mobileMapExplorer .mobileMapCanvas svg .city-plate{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

#mobileMapExplorer .mobileMapCanvas svg .city-label-group{
  opacity:.52 !important;
  transition:opacity .15s ease !important;
}

#mobileMapExplorer .mobileMapCanvas svg .city-label-group[data-has-stories="1"]{
  opacity:.90 !important;
}

#mobileMapExplorer .mobileMapCanvas svg .city-label-group.is-label-selected{
  opacity:1 !important;
}

#mobileMapExplorer .mobileMapCanvas svg .city-label{
  fill:#4f5f6b !important;
  stroke:#fffaf6 !important;
  stroke-width:2.35px !important;
  stroke-linejoin:round !important;
  paint-order:stroke fill !important;
  font-size:8.7px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.08px !important;
  text-rendering:geometricPrecision !important;
}

#mobileMapExplorer .mobileMapCanvas svg .city-label-group[data-has-stories="1"] .city-label{
  fill:#a24f0b !important;
  font-weight:1000 !important;
}

#mobileMapExplorer .mobileMapCanvas svg .city-label-group.is-label-selected .city-label{
  fill:#1f2933 !important;
  stroke:#fff !important;
  stroke-width:3.8px !important;
  font-size:12.4px !important;
  font-weight:1000 !important;
}

#mobileMapExplorer .mobileMapCityLabel,
#mobileMapExplorer .mobileMapCityLabel.isVisible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

@media (max-width:720px), (hover:none), (pointer:coarse){
  #mobileMapExplorer .mobileMapViewport{
    padding-bottom:128px !important;
  }

  #mobileMapExplorer .mobileMapSheet{
    max-height:166px !important;
  }

  #mobileMapExplorer .mobileMapSelectedCard{
    padding:9px !important;
  }

  #mobileMapExplorer .mobileMapSelectedStats{
    margin:7px 0 !important;
  }
}

@media (max-width:390px){
  #mobileMapExplorer .mobileMapSuggestPanel{
    right:70px !important;
    max-height:min(178px, 29vh) !important;
  }

  #mobileMapExplorer .mobileMapSuggestItem{
    min-height:30px !important;
    font-size:11.6px !important;
  }

  #mobileMapExplorer .mobileMapCanvas svg .city-label{
    font-size:8.2px !important;
  }

  #mobileMapExplorer .mobileMapCanvas svg .city-label-group.is-label-selected .city-label{
    font-size:11.6px !important;
  }
}

/* ===== MOBILE INDEX FINAL — map hidden, existing highlights adapted ===== */
@media (max-width: 767px){
  body.page-index{
    overflow-x:hidden !important;
  }

  body.page-index .wrap{
    padding:8px 10px 18px !important;
  }

  body.page-index .topbar{
    position:static !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    margin-bottom:10px !important;
    padding:8px 9px !important;
    border-radius:14px !important;
  }

  body.page-index .brandLink{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
  }

  body.page-index .brand{
    width:auto !important;
    min-width:0 !important;
    gap:7px !important;
  }

  body.page-index .logoIcon{
    width:31px !important;
    height:31px !important;
    flex-basis:31px !important;
    border-radius:9px !important;
  }

  body.page-index .brand h1{
    max-width:calc(100vw - 174px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:13.5px !important;
    line-height:1.1 !important;
  }

  body.page-index .topbar .searchWrap{
    display:block !important;
    order:3 !important;
    flex:1 0 100% !important;
    width:100% !important;
  }

  body.page-index .topbar .searchBox{
    min-height:38px !important;
    padding:6px 7px !important;
    border-radius:13px !important;
  }

  body.page-index .topbar .searchBox input{
    font-size:12.5px !important;
  }

  body.page-index .topActions{
    order:0 !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  body.page-index .topActions .btnSolid,
  body.page-index #btnWriteFromIndex{
    min-height:34px !important;
    height:34px !important;
    padding:0 11px !important;
    border-radius:11px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  body.page-index .mobileCityHub,
  body.page-index .mapCard,
  body.page-index #mobileMapExplorer,
  body.page-index .mapMobileTools{
    display:none !important;
  }

  body.page-index .hero{
    margin:0 0 10px !important;
    padding:13px 13px 12px !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }

  body.page-index .heroKicker{
    margin:0 0 8px !important;
    padding:5px 9px !important;
    font-size:11px !important;
  }

  body.page-index .heroLead,
  body.page-index .hero p{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  body.page-index .heroStats{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    max-width:none !important;
    margin-top:10px !important;
  }

  body.page-index .heroStat{
    min-height:54px !important;
    padding:9px 8px 8px !important;
    border-radius:13px !important;
    gap:3px !important;
  }

  body.page-index .heroStat::before{
    left:8px !important;
    right:8px !important;
    height:2px !important;
  }

  body.page-index .heroStatNumber{
    font-size:22px !important;
  }

  body.page-index .heroStatLabel{
    font-size:10.5px !important;
  }

  body.page-index .grid{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  body.page-index .side{
    display:block !important;
    order:1 !important;
    position:static !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border:1px solid var(--border) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .main{
    display:block !important;
    order:2 !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.page-index .sideHeader{
    padding:12px 12px 8px !important;
    border-bottom:1px solid var(--border) !important;
  }

  body.page-index .sideHeader h2{
    margin:0 !important;
    font-size:15px !important;
    line-height:1.15 !important;
  }

  body.page-index .sideBlock{
    padding:10px 12px 12px !important;
    border-top:0 !important;
  }

  body.page-index .sideBlock + .sideBlock{
    border-top:1px solid var(--border) !important;
    padding-top:12px !important;
  }

  body.page-index .sideTitleRow{
    margin:0 0 8px !important;
  }

  body.page-index .sideTitleRow h3{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }

  body.page-index .side .adSlot[data-ad-slot="index_side"]{
    display:none !important;
  }

  body.page-index .side .list{
    display:grid !important;
    gap:7px !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }

  body.page-index .side .listItem:nth-child(n+4){
    display:none !important;
  }

  body.page-index .side .listItem{
    min-height:40px !important;
    padding:8px 9px !important;
    border-radius:12px !important;
    gap:8px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .side .liTitle,
  body.page-index .side .listItem strong,
  body.page-index .side .name{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  body.page-index .side .liRight,
  body.page-index .side .listItem span,
  body.page-index .side .muted{
    flex:0 0 auto !important;
    color:var(--muted) !important;
    font-size:11.5px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }

  body.page-index .exploreCard{
    padding:12px !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .exploreBlock{
    margin-bottom:16px !important;
  }

  body.page-index .exploreBlock + .exploreBlock{
    margin-top:13px !important;
    padding-top:13px !important;
  }

  body.page-index .exploreHead{
    margin-bottom:9px !important;
  }

  body.page-index .exploreHead h3{
    font-size:15px !important;
    line-height:1.18 !important;
  }

  body.page-index .exploreGrid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.page-index #viralStory .indexStoryCard,
  body.page-index .exploreGrid .indexStoryCard{
    padding:12px !important;
    border-radius:15px !important;
    box-shadow:none !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index .exploreGrid .indexStoryCard .cardTitle{
    font-size:18px !important;
    line-height:1.18 !important;
    margin-bottom:8px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardExcerpt,
  body.page-index .exploreGrid .indexStoryCard .cardExcerpt{
    font-size:13px !important;
    line-height:1.48 !important;
    -webkit-line-clamp:3 !important;
  }

  body.page-index .indexStoryCard .cardBadges{
    gap:5px !important;
    margin-bottom:8px !important;
  }

  body.page-index .indexStoryCard .storyChip{
    font-size:10.5px !important;
    padding:4px 7px !important;
  }

  body.page-index .indexStoryCard .cardMetaRow{
    margin-top:8px !important;
    padding-top:8px !important;
    font-size:11.5px !important;
  }

  body.page-index .indexStoryCard .btnRead{
    min-height:34px !important;
    padding:0 13px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }

  body.page-index .exploreCard .adInline{
    margin:12px 0 !important;
  }

  body.page-index .exploreCard .adInline .adBox{
    min-height:58px !important;
    height:58px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
}

@media (min-width: 768px){
  body.page-index .mobileCityHub{
    display:none !important;
  }
}


/* ===== MOBIL 14 FINAL: haritasiz index akisi, arama paneli ve kompakt bloklar ===== */
@media (max-width: 760px){
  body.page-index{
    overflow-x:hidden !important;
  }

  body.page-index .wrap{
    padding:8px 10px 18px !important;
  }

  body.page-index .topbar{
    position:relative !important;
    z-index:20 !important;
    overflow:visible !important;
    padding:10px !important;
    margin-bottom:10px !important;
    border-radius:16px !important;
  }

  body.page-index .topbar .searchWrap{
    position:relative !important;
    z-index:30 !important;
    display:block !important;
    order:3 !important;
    flex:1 0 100% !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.page-index .topbar .searchBox{
    min-height:42px !important;
    padding:6px 7px 6px 12px !important;
    border-radius:14px !important;
  }

  body.page-index .topbar .searchBox input{
    font-size:14px !important;
    line-height:1.2 !important;
  }

  body.page-index .topbar #btnClear,
  body.page-index .topbar .searchBox .iconBtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    padding:0 !important;
    border-radius:12px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:18px !important;
  }

  body.page-index .topbar .searchPanel{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    margin-top:8px !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 12px 30px rgba(20,20,20,.08) !important;
    background:#fff !important;
    z-index:40 !important;
  }

  body.page-index .topbar .searchPanelList{
    max-height:250px !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
  }

  body.page-index .topbar .searchRow{
    min-height:44px !important;
    padding:9px 11px !important;
    background:#fff !important;
  }

  body.page-index .topbar .srTitle{
    font-size:13.5px !important;
    line-height:1.2 !important;
  }

  body.page-index .topbar .srMeta{
    margin-top:2px !important;
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  body.page-index .mobileCityHub,
  body.page-index .mapCard,
  body.page-index #mobileMapExplorer,
  body.page-index .mapMobileTools{
    display:none !important;
  }

  body.page-index .hero{
    margin:0 0 10px !important;
    padding:10px 11px !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .heroKicker{
    display:inline-flex !important;
    margin:0 0 7px !important;
    padding:5px 9px !important;
    border-radius:999px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  body.page-index .heroLead,
  body.page-index .hero p{
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.42 !important;
    color:#4b5563 !important;
  }

  body.page-index .heroStats{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
    margin-top:9px !important;
    width:100% !important;
  }

  body.page-index .heroStat{
    min-height:42px !important;
    padding:7px 7px 6px !important;
    border-radius:12px !important;
  }

  body.page-index .heroStat::before{
    left:7px !important;
    right:7px !important;
    height:2px !important;
  }

  body.page-index .heroStatNumber{
    font-size:18px !important;
    line-height:1 !important;
  }

  body.page-index .heroStatLabel{
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }

  body.page-index .grid{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  body.page-index .side{
    display:block !important;
    order:1 !important;
    position:static !important;
    width:100% !important;
    overflow:hidden !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .main{
    display:block !important;
    order:2 !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.page-index .sideHeader{
    padding:11px 12px 8px !important;
  }

  body.page-index .sideHeader h2{
    font-size:18px !important;
    line-height:1.1 !important;
  }

  body.page-index .sideBlock{
    padding:9px 12px 11px !important;
  }

  body.page-index .sideBlock + .sideBlock{
    padding-top:11px !important;
  }

  body.page-index .sideTitleRow{
    margin:0 0 7px !important;
  }

  body.page-index .sideTitleRow h3{
    font-size:13px !important;
    line-height:1.15 !important;
  }

  body.page-index .side .adSlot[data-ad-slot="index_side"]{
    display:none !important;
  }

  body.page-index .side .list{
    display:grid !important;
    gap:6px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }

  body.page-index .side .listItem:nth-child(n+4){
    display:none !important;
  }

  body.page-index .side .listItem{
    min-height:38px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    gap:8px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .side .liTitle,
  body.page-index .side .listItem strong,
  body.page-index .side .name{
    font-size:13.5px !important;
    line-height:1.2 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.page-index .side .liRight,
  body.page-index .side .listItem span,
  body.page-index .side .muted{
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    color:#667085 !important;
  }

  body.page-index .exploreCard{
    order:2 !important;
    padding:11px !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.page-index .exploreBlock{
    margin-bottom:14px !important;
  }

  body.page-index .exploreBlock + .exploreBlock{
    margin-top:12px !important;
    padding-top:12px !important;
  }

  body.page-index .exploreHead{
    margin-bottom:8px !important;
  }

  body.page-index .exploreHead h3{
    font-size:18px !important;
    line-height:1.15 !important;
  }

  body.page-index .exploreGrid{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  body.page-index #viralStory .indexStoryCard,
  body.page-index .exploreGrid .indexStoryCard{
    padding:11px !important;
    border-radius:14px !important;
    box-shadow:none !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index .exploreGrid .indexStoryCard .cardTitle{
    font-size:17px !important;
    line-height:1.16 !important;
    margin-bottom:7px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardExcerpt,
  body.page-index .exploreGrid .indexStoryCard .cardExcerpt{
    font-size:12.5px !important;
    line-height:1.42 !important;
    -webkit-line-clamp:2 !important;
  }

  body.page-index .indexStoryCard .cardMetaRow{
    margin-top:8px !important;
    padding-top:8px !important;
    font-size:11.5px !important;
  }

  body.page-index .indexStoryCard .btnRead{
    min-height:32px !important;
    padding:0 12px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }

  body.page-index .exploreCard .adInline{
    margin:10px 0 12px !important;
  }

  body.page-index .exploreCard .adInline .adBox{
    min-height:56px !important;
    height:56px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
}

@media (max-width:430px){
  body.page-index .topbar .searchPanelList{
    max-height:232px !important;
  }

  body.page-index .heroStatNumber{
    font-size:17px !important;
  }

  body.page-index .exploreHead h3,
  body.page-index .sideHeader h2{
    font-size:17px !important;
  }
}

/* ===== MOBIL 15 FINAL: search priority polish and denser index cards ===== */
@media (max-width: 760px){
  body.page-index .topbar{
    gap:9px !important;
    margin-bottom:9px !important;
  }

  body.page-index .topbar .brand h1{
    font-size:15px !important;
    line-height:1.1 !important;
  }

  body.page-index .topbar .btnSolid{
    min-height:34px !important;
    padding:0 13px !important;
    border-radius:12px !important;
    font-size:12.5px !important;
  }

  body.page-index .topbar .searchBox{
    min-height:40px !important;
    border-radius:13px !important;
  }

  body.page-index .topbar .searchPanel{
    margin-top:7px !important;
    border:1px solid rgba(16,24,40,.08) !important;
    border-radius:13px !important;
    box-shadow:0 14px 26px rgba(15,23,42,.08) !important;
  }

  body.page-index .topbar .searchPanelList{
    max-height:218px !important;
  }

  body.page-index .topbar .searchRow{
    min-height:38px !important;
    padding:8px 10px !important;
  }

  body.page-index .topbar .searchRow + .searchRow{
    border-top:1px solid rgba(16,24,40,.07) !important;
  }

  body.page-index .topbar .srTitle{
    font-size:12.8px !important;
    line-height:1.15 !important;
  }

  body.page-index .topbar .srMeta{
    margin-top:2px !important;
    font-size:10.8px !important;
    line-height:1.18 !important;
    color:#667085 !important;
  }

  body.page-index .hero{
    padding:9px 10px !important;
    margin-bottom:9px !important;
    border-radius:14px !important;
  }

  body.page-index .heroKicker{
    padding:4px 8px !important;
    margin-bottom:6px !important;
    font-size:10.5px !important;
  }

  body.page-index .heroLead,
  body.page-index .hero p{
    font-size:12px !important;
    line-height:1.36 !important;
  }

  body.page-index .heroStats{
    gap:5px !important;
    margin-top:8px !important;
  }

  body.page-index .heroStat{
    min-height:38px !important;
    padding:6px !important;
    border-radius:11px !important;
  }

  body.page-index .heroStatNumber{
    font-size:16px !important;
  }

  body.page-index .heroStatLabel{
    font-size:9.5px !important;
  }

  body.page-index .sideHeader{
    padding:10px 11px 7px !important;
  }

  body.page-index .sideHeader h2{
    font-size:17px !important;
  }

  body.page-index .sideBlock{
    padding:8px 11px 10px !important;
  }

  body.page-index .sideTitleRow h3{
    font-size:12.6px !important;
  }

  body.page-index .side .list{
    gap:5px !important;
  }

  body.page-index .side .listItem{
    min-height:35px !important;
    padding:7px 9px !important;
    border-radius:11px !important;
  }

  body.page-index .side .liTitle,
  body.page-index .side .listItem strong,
  body.page-index .side .name{
    font-size:12.8px !important;
  }

  body.page-index .side .liRight,
  body.page-index .side .listItem span,
  body.page-index .side .muted{
    font-size:11.2px !important;
  }

  body.page-index .exploreCard{
    padding:10px !important;
    border-radius:14px !important;
  }

  body.page-index .exploreBlock{
    margin-bottom:12px !important;
  }

  body.page-index .exploreBlock + .exploreBlock{
    margin-top:10px !important;
    padding-top:10px !important;
  }

  body.page-index .exploreHead h3{
    font-size:16px !important;
  }

  body.page-index #viralStory .indexStoryCard,
  body.page-index .exploreGrid .indexStoryCard{
    padding:10px !important;
    border-radius:13px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index .exploreGrid .indexStoryCard .cardTitle{
    font-size:15.8px !important;
    margin-bottom:6px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardExcerpt,
  body.page-index .exploreGrid .indexStoryCard .cardExcerpt{
    font-size:12px !important;
    line-height:1.38 !important;
  }

  body.page-index .indexStoryCard .cardBadges{
    gap:4px !important;
    margin-bottom:7px !important;
  }

  body.page-index .indexStoryCard .storyChip{
    font-size:10px !important;
    padding:3px 6px !important;
  }

  body.page-index .indexStoryCard .cardMetaRow{
    margin-top:7px !important;
    padding-top:7px !important;
    font-size:11px !important;
  }

  body.page-index .indexStoryCard .btnRead{
    min-height:30px !important;
    padding:0 11px !important;
    border-radius:9px !important;
    font-size:11.5px !important;
  }
}

/* ===== MOBIL 16 FINAL: compact search/results, highlight lists, story cards and ads ===== */
@media (max-width: 760px){
  body.page-index .topbar .searchPanel{
    margin-top:6px !important;
    border-radius:12px !important;
    border:1px solid rgba(16,24,40,.08) !important;
    box-shadow:0 10px 22px rgba(15,23,42,.07) !important;
  }

  body.page-index .topbar .searchPanelList{
    max-height:205px !important;
    overflow:auto !important;
  }

  body.page-index .topbar .searchRow{
    min-height:36px !important;
    padding:7px 10px !important;
    align-items:flex-start !important;
  }

  body.page-index .topbar .searchRow:nth-child(n+6){
    display:none !important;
  }

  body.page-index .topbar .searchRowCity .srTitle::after{
    content:"Şehir";
    display:inline-flex;
    align-items:center;
    margin-left:7px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid rgba(255,107,0,.18);
    background:#fff7ed;
    color:#f97316;
    font-size:9px;
    font-weight:900;
    vertical-align:middle;
  }

  body.page-index .topbar .searchRowStory .srTitle::after{
    content:"Hikâye";
    display:inline-flex;
    align-items:center;
    margin-left:7px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid rgba(16,24,40,.1);
    background:#f8fafc;
    color:#64748b;
    font-size:9px;
    font-weight:900;
    vertical-align:middle;
  }

  body.page-index .topbar .srTitle{
    font-size:12.5px !important;
    line-height:1.15 !important;
  }

  body.page-index .topbar .srMeta{
    margin-top:2px !important;
    font-size:10.5px !important;
    line-height:1.16 !important;
    color:#667085 !important;
  }

  body.page-index .hero{
    padding:8px 10px !important;
    margin-bottom:8px !important;
    border-radius:14px !important;
  }

  body.page-index .heroKicker{
    padding:4px 8px !important;
    margin-bottom:5px !important;
    font-size:10px !important;
  }

  body.page-index .heroLead,
  body.page-index .hero p{
    font-size:11.5px !important;
    line-height:1.32 !important;
  }

  body.page-index .heroStats{
    gap:5px !important;
    margin-top:7px !important;
  }

  body.page-index .heroStat{
    min-height:35px !important;
    padding:5px 6px !important;
    border-radius:10px !important;
  }

  body.page-index .heroStatNumber{
    font-size:15px !important;
  }

  body.page-index .heroStatLabel{
    font-size:9px !important;
  }

  body.page-index .sideHeader{
    padding:9px 11px 6px !important;
  }

  body.page-index .sideHeader h2{
    font-size:16px !important;
  }

  body.page-index .sideBlock{
    padding:7px 10px 9px !important;
  }

  body.page-index .sideBlock + .sideBlock{
    padding-top:9px !important;
  }

  body.page-index .side .list{
    gap:4px !important;
  }

  body.page-index .side .listItem{
    min-height:32px !important;
    padding:6px 9px !important;
    border-radius:10px !important;
  }

  body.page-index .side .liTitle,
  body.page-index .side .listItem strong,
  body.page-index .side .name{
    font-size:12.3px !important;
  }

  body.page-index .side .liRight,
  body.page-index .side .listItem span,
  body.page-index .side .muted{
    font-size:10.8px !important;
  }

  body.page-index .exploreCard{
    padding:9px !important;
    border-radius:14px !important;
  }

  body.page-index .exploreBlock{
    margin-bottom:10px !important;
  }

  body.page-index .exploreBlock + .exploreBlock{
    margin-top:9px !important;
    padding-top:9px !important;
  }

  body.page-index .exploreHead{
    margin-bottom:7px !important;
  }

  body.page-index .exploreHead h3{
    font-size:15px !important;
    line-height:1.12 !important;
  }

  body.page-index #viralStory .indexStoryCard,
  body.page-index .exploreGrid .indexStoryCard{
    padding:9px !important;
    border-radius:13px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index .exploreGrid .indexStoryCard .cardTitle{
    font-size:15px !important;
    line-height:1.14 !important;
    margin-bottom:5px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardExcerpt,
  body.page-index .exploreGrid .indexStoryCard .cardExcerpt{
    font-size:11.5px !important;
    line-height:1.34 !important;
    -webkit-line-clamp:2 !important;
  }

  body.page-index .indexStoryCard .cardBadges{
    gap:4px !important;
    margin-bottom:6px !important;
  }

  body.page-index .indexStoryCard .storyChip{
    font-size:9.5px !important;
    padding:3px 6px !important;
  }

  body.page-index .indexStoryCard .cardMetaRow{
    margin-top:6px !important;
    padding-top:6px !important;
    font-size:10.5px !important;
  }

  body.page-index .indexStoryCard .btnRead{
    min-height:28px !important;
    padding:0 10px !important;
    border-radius:9px !important;
    font-size:11px !important;
  }

  body.page-index .exploreCard .adInline{
    margin:8px 0 10px !important;
    padding:8px !important;
  }

  body.page-index .exploreCard .adInline .adLabel{
    padding:4px 8px !important;
    font-size:9px !important;
  }

  body.page-index .exploreCard .adInline .adBox{
    min-height:50px !important;
    height:50px !important;
    border-radius:11px !important;
    font-size:10.5px !important;
  }
}

/* ===== MOBIL 17 FINAL: last density pass for index mobile ===== */
@media (max-width: 760px){
  body.page-index .topbar .searchPanelList{
    max-height:176px !important;
  }

  body.page-index .topbar .searchRow{
    min-height:32px !important;
    padding:6px 9px !important;
  }

  body.page-index .topbar .searchRow:nth-child(n+5){
    display:none !important;
  }

  body.page-index .topbar .searchRowStory{
    background:linear-gradient(180deg,#fff 0%,#fffaf6 100%) !important;
    border-left:3px solid rgba(255,107,0,.55) !important;
  }

  body.page-index .topbar .searchRowStory .srMeta{
    color:#9a5a2e !important;
    font-weight:700 !important;
  }

  body.page-index .topbar .searchRowCity .srMeta{
    color:#6b7280 !important;
    font-weight:650 !important;
  }

  body.page-index .hero{
    padding:7px 9px !important;
    margin-bottom:7px !important;
  }

  body.page-index .heroKicker{
    padding:3px 7px !important;
    margin-bottom:4px !important;
    font-size:9.5px !important;
  }

  body.page-index .heroLead,
  body.page-index .hero p{
    font-size:11px !important;
    line-height:1.25 !important;
    margin-bottom:0 !important;
  }

  body.page-index .heroStats{
    margin-top:6px !important;
    gap:4px !important;
  }

  body.page-index .heroStat{
    min-height:30px !important;
    padding:4px 6px !important;
    border-radius:9px !important;
  }

  body.page-index .heroStatNumber{
    font-size:13.5px !important;
    line-height:1 !important;
  }

  body.page-index .heroStatLabel{
    font-size:8.5px !important;
    line-height:1.1 !important;
  }

  body.page-index .sideHeader{
    padding:8px 10px 5px !important;
  }

  body.page-index .sideHeader h2{
    font-size:15px !important;
    line-height:1.1 !important;
  }

  body.page-index .sideBlock{
    padding:6px 9px 8px !important;
  }

  body.page-index .sideBlock h3{
    font-size:12.5px !important;
    margin-bottom:5px !important;
  }

  body.page-index .side .list{
    gap:3px !important;
  }

  body.page-index .side .listItem{
    min-height:28px !important;
    padding:5px 8px !important;
    border-radius:9px !important;
  }

  body.page-index .side .liTitle,
  body.page-index .side .listItem strong,
  body.page-index .side .name{
    font-size:11.7px !important;
  }

  body.page-index .side .liRight,
  body.page-index .side .listItem span,
  body.page-index .side .muted{
    font-size:10.2px !important;
  }

  body.page-index .exploreBlock{
    margin-bottom:9px !important;
  }

  body.page-index .exploreHead{
    margin-bottom:6px !important;
  }

  body.page-index .exploreHead h3{
    font-size:14.5px !important;
  }

  body.page-index #viralStory .indexStoryCard,
  body.page-index .exploreGrid .indexStoryCard{
    padding:8px !important;
    border-radius:12px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index .exploreGrid .indexStoryCard .cardTitle{
    font-size:14.2px !important;
    margin-bottom:4px !important;
  }

  body.page-index #viralStory .indexStoryCard .cardExcerpt,
  body.page-index .exploreGrid .indexStoryCard .cardExcerpt{
    font-size:11px !important;
    line-height:1.3 !important;
  }

  body.page-index .indexStoryCard .cardBadges{
    gap:3px !important;
    margin-bottom:5px !important;
  }

  body.page-index .indexStoryCard .storyChip{
    font-size:9px !important;
    padding:2px 5px !important;
  }

  body.page-index .indexStoryCard .cardMetaRow{
    margin-top:5px !important;
    padding-top:5px !important;
    font-size:10px !important;
  }

  body.page-index .indexStoryCard .btnRead{
    min-height:25px !important;
    padding:0 9px !important;
    border-radius:8px !important;
    font-size:10.5px !important;
  }

  body.page-index .exploreCard .adInline{
    padding:7px !important;
    margin:7px 0 9px !important;
  }

  body.page-index .exploreCard .adInline .adBox{
    min-height:44px !important;
    height:44px !important;
  }
}

/* ===== MOBIL 18 FINAL: compact story cards and smaller read buttons ===== */
@media (max-width: 760px){
  body.page-index .exploreCard{
    padding:10px 10px 12px !important;
    border-radius:14px !important;
  }

  body.page-index .exploreBlock{
    margin-bottom:10px !important;
  }

  body.page-index .exploreBlock + .exploreBlock{
    margin-top:9px !important;
    padding-top:9px !important;
  }

  body.page-index .exploreHead{
    margin-bottom:6px !important;
  }

  body.page-index .exploreHead h3{
    font-size:14px !important;
    line-height:1.15 !important;
  }

  body.page-index #viralStory,
  body.page-index #newStories,
  body.page-index #topStories,
  body.page-index #talkedStories,
  body.page-index #risingStories,
  body.page-index #hotStories{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.page-index #viralStory .indexStoryCard,
  body.page-index #newStories .indexStoryCard,
  body.page-index #topStories .indexStoryCard,
  body.page-index #talkedStories .indexStoryCard,
  body.page-index #risingStories .indexStoryCard,
  body.page-index #hotStories .indexStoryCard,
  body.page-index .exploreGrid .indexStoryCard{
    min-height:0 !important;
    height:auto !important;
    padding:9px 10px !important;
    border-radius:13px !important;
    display:block !important;
    box-shadow:0 5px 16px rgba(17,17,17,.035) !important;
  }

  body.page-index .indexStoryCard .cardLinkWrap{
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTop,
  body.page-index #newStories .indexStoryCard .cardTop,
  body.page-index #topStories .indexStoryCard .cardTop,
  body.page-index #talkedStories .indexStoryCard .cardTop,
  body.page-index #risingStories .indexStoryCard .cardTop,
  body.page-index #hotStories .indexStoryCard .cardTop,
  body.page-index .exploreGrid .indexStoryCard .cardTop{
    margin:0 0 6px !important;
    min-height:0 !important;
  }

  body.page-index .indexStoryCard .cardBadges{
    gap:4px !important;
    margin:0 !important;
  }

  body.page-index .indexStoryCard .storyChip{
    min-height:0 !important;
    padding:2px 6px !important;
    border-radius:999px !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
  }

  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index #newStories .indexStoryCard .cardTitle,
  body.page-index #topStories .indexStoryCard .cardTitle,
  body.page-index #talkedStories .indexStoryCard .cardTitle,
  body.page-index #risingStories .indexStoryCard .cardTitle,
  body.page-index #hotStories .indexStoryCard .cardTitle,
  body.page-index .exploreGrid .indexStoryCard .cardTitle{
    min-height:0 !important;
    margin:0 0 5px !important;
    font-size:14px !important;
    line-height:1.18 !important;
    letter-spacing:-.01em !important;
  }

  body.page-index #viralStory .indexStoryCard .cardExcerpt,
  body.page-index #newStories .indexStoryCard .cardExcerpt,
  body.page-index #topStories .indexStoryCard .cardExcerpt,
  body.page-index #talkedStories .indexStoryCard .cardExcerpt,
  body.page-index #risingStories .indexStoryCard .cardExcerpt,
  body.page-index #hotStories .indexStoryCard .cardExcerpt,
  body.page-index .exploreGrid .indexStoryCard .cardExcerpt{
    min-height:0 !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    -webkit-line-clamp:2 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  body.page-index #viralStory .indexStoryCard .cardMetaRow,
  body.page-index #newStories .indexStoryCard .cardMetaRow,
  body.page-index #topStories .indexStoryCard .cardMetaRow,
  body.page-index #talkedStories .indexStoryCard .cardMetaRow,
  body.page-index #risingStories .indexStoryCard .cardMetaRow,
  body.page-index #hotStories .indexStoryCard .cardMetaRow,
  body.page-index .exploreGrid .indexStoryCard .cardMetaRow{
    min-height:0 !important;
    margin:6px 0 0 !important;
    padding-top:6px !important;
    gap:6px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    border-top:1px solid rgba(17,17,17,.055) !important;
  }

  body.page-index .indexStoryCard .cardMeta{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  body.page-index #viralStory .indexStoryCard .cardActions,
  body.page-index #newStories .indexStoryCard .cardActions,
  body.page-index #topStories .indexStoryCard .cardActions,
  body.page-index #talkedStories .indexStoryCard .cardActions,
  body.page-index #risingStories .indexStoryCard .cardActions,
  body.page-index #hotStories .indexStoryCard .cardActions,
  body.page-index .exploreGrid .indexStoryCard .cardActions{
    margin-top:7px !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  body.page-index #viralStory .indexStoryCard .btnRead,
  body.page-index #newStories .indexStoryCard .btnRead,
  body.page-index #topStories .indexStoryCard .btnRead,
  body.page-index #talkedStories .indexStoryCard .btnRead,
  body.page-index #risingStories .indexStoryCard .btnRead,
  body.page-index #hotStories .indexStoryCard .btnRead,
  body.page-index .exploreGrid .indexStoryCard .btnRead{
    min-height:24px !important;
    height:24px !important;
    padding:0 10px !important;
    border-radius:8px !important;
    font-size:10.2px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* ===== MOBIL CITY FINAL POLISH V7 =====
   City mobil akisi: ana sayfadaki son mobil olcuyle uyumlu, kompakt ve sade. */
@media (max-width: 760px){
  body.cityPage .wrap{
    padding-inline:10px !important;
  }

  body.cityPage .cityGrid{
    gap:10px !important;
  }

  body.cityPage .cityHero{
    order:1 !important;
    padding:11px 12px 10px !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 5px 16px rgba(17,17,17,.035) !important;
  }

  body.cityPage .cityHeroTop{
    gap:8px !important;
  }

  body.cityPage .cityName{
    font-size:19px !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
  }

  body.cityPage .cityMeta{
    margin-top:2px !important;
    font-size:11px !important;
    line-height:1.22 !important;
  }

  body.cityPage .cityHeroActions{
    gap:8px !important;
    align-items:center !important;
  }

  body.cityPage .cityHeroActions .cityBackBtn,
  body.cityPage .cityHeroActions .btn{
    height:28px !important;
    min-height:28px !important;
    padding:0 2px !important;
    font-size:11.5px !important;
    line-height:1 !important;
    color:#667085 !important;
  }

  body.cityPage .cityHeroActions .btnSolid{
    height:30px !important;
    min-height:30px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:11.5px !important;
    line-height:1 !important;
  }

  body.cityPage .adSlot{
    border-radius:14px !important;
  }

  body.cityPage .adInline,
  body.cityPage .citySideAd{
    padding:9px !important;
    margin:0 !important;
  }

  body.cityPage .adLabel{
    padding:4px 8px !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  body.cityPage .adBox{
    min-height:44px !important;
    height:44px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  body.cityPage .cityInsights{
    order:3 !important;
    padding:10px !important;
    border-radius:14px !important;
    box-shadow:0 5px 16px rgba(17,17,17,.035) !important;
  }

  body.cityPage .cityInsightsHead{
    margin-bottom:7px !important;
  }

  body.cityPage .cityInsightsHead h3{
    font-size:13px !important;
    line-height:1.15 !important;
  }

  body.cityPage .cityInsightStats{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
    margin-bottom:7px !important;
  }

  body.cityPage .cityInsightStat,
  body.cityPage .cityInsightStat:nth-child(3){
    grid-column:auto !important;
    min-height:0 !important;
    padding:7px 8px !important;
    border-radius:11px !important;
    display:block !important;
    background:#fbfbfb !important;
  }

  body.cityPage .cityInsightValue,
  body.cityPage .cityInsightStat:nth-child(3) .cityInsightValue{
    display:block !important;
    max-width:100% !important;
    margin:0 0 3px !important;
    font-size:15.5px !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.cityPage .cityInsightLabel,
  body.cityPage .cityInsightStat:nth-child(3) .cityInsightLabel{
    display:block !important;
    text-align:left !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
    color:#667085 !important;
  }

  body.cityPage .cityInsightGroup{
    margin-top:6px !important;
  }

  body.cityPage .cityInsightGroupTitle{
    margin-bottom:4px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
  }

  body.cityPage .cityInsightChips{
    gap:5px !important;
  }

  body.cityPage .insightChip{
    padding:3px 6px !important;
    border-radius:999px !important;
    font-size:9.8px !important;
    line-height:1.05 !important;
  }

  body.cityPage .contentCard{
    order:4 !important;
    padding:9px 10px 10px !important;
    border-radius:14px !important;
  }

  body.cityPage .tabs{
    padding:0 0 7px !important;
    margin-bottom:8px !important;
  }

  body.cityPage .tabBtn{
    min-height:28px !important;
    padding:0 10px !important;
    border-radius:999px !important;
    font-size:11px !important;
  }

  body.cityPage #cityCards.cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.cityPage #cityCards .indexStoryCard,
  body.cityPage #topReadStories .indexStoryCard{
    min-height:0 !important;
    height:auto !important;
    padding:9px 10px !important;
    border-radius:13px !important;
    box-shadow:0 5px 16px rgba(17,17,17,.035) !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardLinkWrap,
  body.cityPage #topReadStories .indexStoryCard .cardLinkWrap{
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardTop,
  body.cityPage #topReadStories .indexStoryCard .cardTop{
    margin:0 0 6px !important;
    min-height:0 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardBadges,
  body.cityPage #topReadStories .indexStoryCard .cardBadges{
    gap:4px !important;
    margin:0 !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  body.cityPage #cityCards .indexStoryCard .storyChip,
  body.cityPage #topReadStories .indexStoryCard .storyChip{
    min-height:0 !important;
    padding:2px 6px !important;
    border-radius:999px !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardTitle,
  body.cityPage #topReadStories .indexStoryCard .cardTitle{
    min-height:0 !important;
    margin:0 0 5px !important;
    font-size:14px !important;
    line-height:1.18 !important;
    letter-spacing:-.01em !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardExcerpt,
  body.cityPage #topReadStories .indexStoryCard .cardExcerpt{
    min-height:0 !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    -webkit-line-clamp:2 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardMetaRow,
  body.cityPage #topReadStories .indexStoryCard .cardMetaRow{
    min-height:0 !important;
    margin:6px 0 0 !important;
    padding-top:6px !important;
    gap:6px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    border-top:1px solid rgba(17,17,17,.055) !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardMeta,
  body.cityPage #topReadStories .indexStoryCard .cardMeta{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardActions,
  body.cityPage #topReadStories .indexStoryCard .cardActions{
    margin-top:7px !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  body.cityPage #cityCards .indexStoryCard .btnRead,
  body.cityPage #topReadStories .indexStoryCard .btnRead{
    min-height:24px !important;
    height:24px !important;
    padding:0 10px !important;
    border-radius:8px !important;
    font-size:10.2px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body.cityPage .cityNearPanel,
  body.cityPage .cityTopReadPanel{
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 5px 16px rgba(17,17,17,.035) !important;
  }

  body.cityPage .cityNearPanel .sideHeader,
  body.cityPage .cityTopReadPanel .sideHeader{
    padding:10px 11px 7px !important;
  }

  body.cityPage .cityNearPanel .sideHeader h2,
  body.cityPage .cityTopReadPanel .sideHeader h2{
    font-size:13px !important;
    line-height:1.15 !important;
  }

  body.cityPage .cityNearPanel .sideBlock,
  body.cityPage .cityTopReadPanel .sideBlock{
    padding:0 10px 10px !important;
  }

  body.cityPage .cityNearPanel .miniList,
  body.cityPage .cityTopReadPanel .miniList{
    gap:6px !important;
  }

  body.cityPage .cityNearPanel .listItem,
  body.cityPage .cityNearPanel .miniRow{
    min-height:34px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
  }

  body.cityPage .cityNearPanel .listItem:nth-child(n+5),
  body.cityPage .cityNearPanel .miniRow:nth-child(n+5){
    display:none !important;
  }

  body.cityPage .cityNearPanel .liTitle,
  body.cityPage .cityNearPanel .miniTitle{
    font-size:11.5px !important;
    line-height:1.15 !important;
  }

  body.cityPage .cityNearPanel .liRight,
  body.cityPage .cityNearPanel .miniMeta{
    font-size:10.2px !important;
    line-height:1.1 !important;
  }

  body.cityPage .cityTopReadPanel .miniList{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    overflow:visible !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard{
    padding:8px 9px !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .cardExcerpt,
  body.cityPage .cityTopReadPanel #topReadStories .cardActions{
    display:none !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .storyChip:nth-child(n+2){
    display:none !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .cardTitle{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:12.5px !important;
    margin-bottom:5px !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .cardMetaRow{
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
  }
}

@media (max-width:380px){
  body.cityPage .cityInsightStats{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  body.cityPage .cityInsightStat:nth-child(3){
    grid-column:1 / -1 !important;
  }
}

/* ===== MOBIL 20 CITY HEADER SEARCH FINAL ===== */
@media (max-width: 760px){
  body.cityPage .topbar{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:16px !important;
    margin-bottom:10px !important;
    overflow:visible !important;
  }

  body.cityPage .brandLink{
    order:1 !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
  }

  body.cityPage .brand{
    width:auto !important;
    min-width:0 !important;
    gap:8px !important;
  }

  body.cityPage .logoIcon{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    border-radius:10px !important;
  }

  body.cityPage .brand h1{
    max-width:calc(100vw - 172px) !important;
    font-size:15.5px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.cityPage .topActions{
    order:2 !important;
    display:flex !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
  }

  body.cityPage .topActions .btnSolid,
  body.cityPage #btnOpenSubmit{
    height:34px !important;
    min-height:34px !important;
    padding:0 11px !important;
    border-radius:11px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  body.cityPage .topbar .searchWrap{
    order:3 !important;
    position:relative !important;
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  body.cityPage .topbar .searchBox{
    min-height:38px !important;
    padding:5px 7px 5px 10px !important;
    gap:7px !important;
    border-radius:14px !important;
    align-items:center !important;
  }

  body.cityPage .topbar .searchIcon{
    font-size:13px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }

  body.cityPage .topbar .searchBox input{
    min-width:0 !important;
    height:26px !important;
    line-height:26px !important;
    font-size:12.5px !important;
    padding:0 !important;
  }

  body.cityPage .topbar #btnClear,
  body.cityPage .topbar .searchBox .iconBtn{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    flex:0 0 28px !important;
    padding:0 !important;
    border-radius:10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:15px !important;
    line-height:1 !important;
  }

  body.cityPage .topbar .searchPanel{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    margin-top:7px !important;
    border-radius:13px !important;
    border:1px solid rgba(16,24,40,.08) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    background:#fff !important;
  }

  body.cityPage .topbar .searchPanelList{
    max-height:178px !important;
    overflow:auto !important;
  }

  body.cityPage .topbar .searchRow{
    min-height:34px !important;
    padding:7px 10px !important;
    border-top:1px solid rgba(16,24,40,.065) !important;
    background:#fff !important;
  }

  body.cityPage .topbar .searchRow:nth-child(n+5){
    display:none !important;
  }

  body.cityPage .topbar .srTitle{
    font-size:12.5px !important;
    line-height:1.15 !important;
  }

  body.cityPage .topbar .srMeta{
    margin-top:2px !important;
    font-size:10.5px !important;
    line-height:1.16 !important;
    color:#667085 !important;
    font-weight:700 !important;
  }

  body.cityPage .topbar .searchRowCity .srTitle::after{
    content:"Şehir";
    display:inline-flex;
    align-items:center;
    margin-left:7px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid rgba(255,107,0,.18);
    background:#fff7ed;
    color:#f97316;
    font-size:9px;
    font-weight:900;
    vertical-align:middle;
  }

  body.cityPage .topbar .searchRowStory{
    background:linear-gradient(180deg,#fff 0%,#fffaf6 100%) !important;
    border-left:3px solid rgba(255,107,0,.5) !important;
  }

  body.cityPage .topbar .searchRowStory .srTitle::after{
    content:"Hikâye";
    display:inline-flex;
    align-items:center;
    margin-left:7px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid rgba(16,24,40,.1);
    background:#f8fafc;
    color:#64748b;
    font-size:9px;
    font-weight:900;
    vertical-align:middle;
  }

  body.cityPage .contentCard .tabs{
    padding:0 0 5px !important;
    margin:0 0 7px !important;
    border:0 !important;
  }

  body.cityPage .contentCard .tabBtn{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#111827 !important;
    border-radius:0 !important;
    font-size:13.5px !important;
    line-height:1.2 !important;
    font-weight:1000 !important;
    box-shadow:none !important;
  }

  body.cityPage .cityNearPanel .sideHeader,
  body.cityPage .cityTopReadPanel .sideHeader{
    padding:8px 10px 6px !important;
  }

  body.cityPage .cityNearPanel .sideBlock,
  body.cityPage .cityTopReadPanel .sideBlock{
    padding:0 9px 9px !important;
  }

  body.cityPage .cityNearPanel .miniList,
  body.cityPage .cityTopReadPanel .miniList{
    gap:5px !important;
  }

  body.cityPage .cityNearPanel .listItem,
  body.cityPage .cityNearPanel .miniRow{
    min-height:30px !important;
    padding:6px 8px !important;
    border-radius:9px !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard{
    padding:7px 8px !important;
    border-radius:10px !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .cardTitle{
    font-size:12px !important;
    margin-bottom:4px !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .cardMetaRow{
    gap:5px !important;
    font-size:9.8px !important;
  }
}

/* ===== MOBIL 21 CITY FINAL POLISH: sticky, search, hero, summary density ===== */
@media (max-width: 760px){
  body.cityPage .topbar{
    position:relative !important;
    top:auto !important;
    z-index:20 !important;
    gap:7px !important;
    padding:8px 9px !important;
    margin-bottom:9px !important;
    border-radius:15px !important;
  }

  body.cityPage .logoIcon{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
    border-radius:9px !important;
  }

  body.cityPage .brand h1{
    max-width:calc(100vw - 158px) !important;
    font-size:15px !important;
  }

  body.cityPage .topActions .btnSolid,
  body.cityPage #btnOpenSubmit{
    height:32px !important;
    min-height:32px !important;
    padding:0 10px !important;
    border-radius:10px !important;
    font-size:11.5px !important;
  }

  body.cityPage .topbar .searchWrap{
    margin-top:0 !important;
  }

  body.cityPage .topbar .searchBox{
    min-height:34px !important;
    height:34px !important;
    padding:4px 6px 4px 9px !important;
    gap:6px !important;
    border-radius:13px !important;
  }

  body.cityPage .topbar .searchIcon{
    font-size:12px !important;
  }

  body.cityPage .topbar .searchBox input{
    height:24px !important;
    line-height:24px !important;
    font-size:12px !important;
  }

  body.cityPage .topbar #btnClear,
  body.cityPage .topbar .searchBox .iconBtn{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    flex-basis:24px !important;
    border-radius:8px !important;
    font-size:13px !important;
    line-height:1 !important;
  }

  body.cityPage .topbar .searchPanel{
    margin-top:6px !important;
    border-radius:12px !important;
  }

  body.cityPage .topbar .searchPanelList{
    max-height:148px !important;
  }

  body.cityPage .topbar .searchRow{
    min-height:30px !important;
    padding:6px 9px !important;
  }

  body.cityPage .topbar .searchRow:nth-child(n+5){
    display:none !important;
  }

  body.cityPage .topbar .srTitle{
    font-size:12px !important;
    line-height:1.12 !important;
  }

  body.cityPage .topbar .srMeta{
    margin-top:1px !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }

  body.cityPage .topbar .searchRowCity .srTitle::after,
  body.cityPage .topbar .searchRowStory .srTitle::after{
    margin-left:5px !important;
    padding:1px 5px !important;
    font-size:8.5px !important;
  }

  body.cityPage .cityHero{
    padding:9px 10px 8px !important;
    border-radius:13px !important;
  }

  body.cityPage .cityHeroTop{
    gap:6px !important;
  }

  body.cityPage .cityName{
    font-size:18px !important;
    line-height:1.05 !important;
  }

  body.cityPage .cityMeta{
    margin-top:1px !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
  }

  body.cityPage .cityHeroActions{
    gap:6px !important;
    margin-top:6px !important;
  }

  body.cityPage .cityHeroActions .cityBackBtn,
  body.cityPage .cityHeroActions .btn{
    height:25px !important;
    min-height:25px !important;
    font-size:10.8px !important;
  }

  body.cityPage .cityHeroActions .btnSolid{
    height:27px !important;
    min-height:27px !important;
    padding:0 10px !important;
    border-radius:999px !important;
    font-size:10.8px !important;
  }

  body.cityPage .cityInsights{
    padding:8px !important;
    border-radius:13px !important;
  }

  body.cityPage .cityInsightsHead{
    margin-bottom:5px !important;
  }

  body.cityPage .cityInsightsHead h3{
    font-size:12px !important;
  }

  body.cityPage .cityInsightStats{
    gap:5px !important;
    margin-bottom:5px !important;
  }

  body.cityPage .cityInsightStat,
  body.cityPage .cityInsightStat:nth-child(3){
    padding:6px 7px !important;
    border-radius:10px !important;
  }

  body.cityPage .cityInsightValue,
  body.cityPage .cityInsightStat:nth-child(3) .cityInsightValue{
    margin-bottom:2px !important;
    font-size:14px !important;
  }

  body.cityPage .cityInsightLabel,
  body.cityPage .cityInsightStat:nth-child(3) .cityInsightLabel{
    font-size:9px !important;
  }

  body.cityPage .cityInsightGroup{
    margin-top:5px !important;
  }

  body.cityPage .cityInsightGroupTitle{
    margin-bottom:3px !important;
    font-size:10px !important;
  }

  body.cityPage .insightChip{
    padding:2px 5px !important;
    font-size:9.2px !important;
  }

  body.cityPage .cityNearPanel .sideHeader,
  body.cityPage .cityTopReadPanel .sideHeader{
    padding:7px 9px 5px !important;
  }

  body.cityPage .cityNearPanel .sideHeader h2,
  body.cityPage .cityTopReadPanel .sideHeader h2{
    font-size:12px !important;
  }

  body.cityPage .cityNearPanel .sideBlock,
  body.cityPage .cityTopReadPanel .sideBlock{
    padding:0 8px 8px !important;
  }

  body.cityPage .cityNearPanel .miniList,
  body.cityPage .cityTopReadPanel .miniList{
    gap:4px !important;
  }

  body.cityPage .cityNearPanel .listItem,
  body.cityPage .cityNearPanel .miniRow{
    min-height:28px !important;
    padding:5px 7px !important;
    border-radius:8px !important;
  }

  body.cityPage .cityNearPanel .liTitle,
  body.cityPage .cityNearPanel .miniTitle{
    font-size:11px !important;
  }

  body.cityPage .cityNearPanel .liRight,
  body.cityPage .cityNearPanel .miniMeta{
    font-size:9.8px !important;
  }
}

/* ===== MOBIL 22 CITY FINAL DENSITY PASS ===== */
@media (max-width: 760px){
  body.cityPage .topbar .searchPanelList{
    max-height:118px !important;
    overflow-y:auto !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  body.cityPage .topbar .searchPanelList::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  body.cityPage .topbar .searchPanel{
    margin-top:5px !important;
    border-radius:11px !important;
    box-shadow:0 8px 18px rgba(17,17,17,.08) !important;
  }

  body.cityPage .topbar .searchRow{
    min-height:26px !important;
    padding:5px 8px !important;
    gap:6px !important;
  }

  body.cityPage .topbar .srTitle{
    font-size:11.5px !important;
    line-height:1.08 !important;
  }

  body.cityPage .topbar .srMeta{
    margin-top:0 !important;
    font-size:9.5px !important;
    line-height:1.08 !important;
  }

  body.cityPage .cityHero{
    padding:7px 9px 7px !important;
    border-radius:12px !important;
  }

  body.cityPage .cityName{
    font-size:17px !important;
    line-height:1.02 !important;
  }

  body.cityPage .cityMeta{
    font-size:10px !important;
    line-height:1.1 !important;
  }

  body.cityPage .cityHeroActions{
    margin-top:5px !important;
    gap:5px !important;
  }

  body.cityPage .cityHeroActions .cityBackBtn,
  body.cityPage .cityHeroActions .btn{
    height:23px !important;
    min-height:23px !important;
    font-size:10.2px !important;
  }

  body.cityPage .cityHeroActions .btnSolid{
    height:25px !important;
    min-height:25px !important;
    padding:0 9px !important;
    font-size:10.2px !important;
  }

  body.cityPage .cityInsights{
    margin-bottom:7px !important;
  }

  body.cityPage .contentCard{
    margin-top:7px !important;
  }

  body.cityPage #cityCards.cards{
    gap:7px !important;
  }

  body.cityPage #cityCards .indexStoryCard,
  body.cityPage #topReadStories .indexStoryCard{
    padding:7px 8px !important;
    border-radius:12px !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardTop,
  body.cityPage #topReadStories .indexStoryCard .cardTop{
    margin-bottom:4px !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardBadges,
  body.cityPage #topReadStories .indexStoryCard .cardBadges{
    gap:3px !important;
  }

  body.cityPage #cityCards .indexStoryCard .storyChip,
  body.cityPage #topReadStories .indexStoryCard .storyChip{
    padding:2px 5px !important;
    font-size:9px !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardTitle,
  body.cityPage #topReadStories .indexStoryCard .cardTitle{
    margin-bottom:4px !important;
    font-size:13.5px !important;
    line-height:1.14 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardExcerpt,
  body.cityPage #topReadStories .indexStoryCard .cardExcerpt{
    font-size:10.5px !important;
    line-height:1.25 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardMetaRow,
  body.cityPage #topReadStories .indexStoryCard .cardMetaRow{
    margin-top:5px !important;
    padding-top:5px !important;
    gap:5px !important;
    font-size:9.6px !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardActions,
  body.cityPage #topReadStories .indexStoryCard .cardActions{
    margin-top:5px !important;
  }

  body.cityPage #cityCards .indexStoryCard .btnRead,
  body.cityPage #topReadStories .indexStoryCard .btnRead{
    height:22px !important;
    min-height:22px !important;
    padding:0 9px !important;
    border-radius:7px !important;
    font-size:9.8px !important;
  }

  body.cityPage .cityNearPanel .sideHeader,
  body.cityPage .cityTopReadPanel .sideHeader{
    padding:6px 8px 4px !important;
  }

  body.cityPage .cityNearPanel .sideBlock,
  body.cityPage .cityTopReadPanel .sideBlock{
    padding:0 7px 7px !important;
  }

  body.cityPage .cityNearPanel .miniList,
  body.cityPage .cityTopReadPanel .miniList{
    gap:3px !important;
  }

  body.cityPage .cityNearPanel .listItem,
  body.cityPage .cityNearPanel .miniRow{
    min-height:25px !important;
    padding:4px 6px !important;
    border-radius:8px !important;
  }

  body.cityPage .cityNearPanel .liTitle,
  body.cityPage .cityNearPanel .miniTitle{
    font-size:10.5px !important;
  }

  body.cityPage .cityNearPanel .liRight,
  body.cityPage .cityNearPanel .miniMeta{
    font-size:9.4px !important;
  }
}

/* ===== MOBIL 23 CITY FINAL TINY FIX: full 4 search rows + compact top-read/cards ===== */
@media (max-width: 760px){
  body.cityPage .topbar .searchPanel{
    overflow:hidden !important;
  }

  body.cityPage .topbar .searchPanelList{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  body.cityPage .topbar .searchPanelList::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  body.cityPage .topbar .searchRow:nth-child(n+5){
    display:none !important;
  }

  body.cityPage .topbar .searchRow{
    min-height:32px !important;
    padding:5px 8px !important;
  }

  body.cityPage .topbar .searchRowStory{
    border-left-width:2px !important;
  }

  body.cityPage .topbar .srTitle{
    font-size:11.6px !important;
    line-height:1.1 !important;
  }

  body.cityPage .topbar .srMeta{
    font-size:9.4px !important;
    line-height:1.08 !important;
  }

  body.cityPage #cityCards .indexStoryCard .cardExcerpt{
    font-weight:500 !important;
    color:#4b5563 !important;
    line-height:1.24 !important;
  }

  body.cityPage #topReadStories .indexStoryCard{
    padding:6px 7px !important;
    border-radius:10px !important;
  }

  body.cityPage #topReadStories .indexStoryCard .cardTop{
    margin-bottom:3px !important;
  }

  body.cityPage #topReadStories .indexStoryCard .cardTitle{
    font-size:12.3px !important;
    line-height:1.12 !important;
    margin-bottom:3px !important;
  }

  body.cityPage #topReadStories .indexStoryCard .cardExcerpt{
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
    color:#4b5563 !important;
  }

  body.cityPage #topReadStories .indexStoryCard .cardMetaRow{
    margin-top:4px !important;
    padding-top:4px !important;
    font-size:9.2px !important;
  }

  body.cityPage #topReadStories .indexStoryCard .cardActions{
    margin-top:4px !important;
  }

  body.cityPage #topReadStories .indexStoryCard .btnRead{
    height:21px !important;
    min-height:21px !important;
    padding:0 8px !important;
    font-size:9.4px !important;
  }
}

/* MOBILE TAP HIGHLIGHT FINAL FIX V1
   Mobilde Android/iOS tarayici dokunma parlamasini kapatir.
   Klavye/focus erisilebilirligini korumak icin focus-visible korunur. */
@media (max-width: 767px){
  a,
  button,
  input,
  textarea,
  select,
  summary,
  label,
  svg a,
  svg [data-city],
  [role="button"],
  [role="link"],
  [tabindex],
  .topbar,
  .brand,
  .searchBox,
  .searchInput,
  .searchRow,
  .searchPanelList,
  .iconBtn,
  #btnClear,
  .btn,
  .btnRead,
  .btnPrimary,
  .btnGhost,
  .chip,
  .pill,
  .tag,
  .indexStoryCard,
  .cardLinkWrap,
  .cityHero,
  .cityHeroActions,
  .citySummary,
  .cityStat,
  .nearCityRow,
  .legalQuickCard,
  .adShell,
  .adBox,
  .commentCard,
  .commentAction,
  .storyAction,
  .shareAction{
    -webkit-tap-highlight-color:transparent !important;
  }

  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  summary:focus:not(:focus-visible),
  svg a:focus:not(:focus-visible),
  svg [data-city]:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  [role="link"]:focus:not(:focus-visible),
  [tabindex]:focus:not(:focus-visible){
    outline:none !important;
  }

  input:focus,
  textarea:focus,
  select:focus{
    -webkit-tap-highlight-color:transparent !important;
  }

  button,
  a,
  [role="button"],
  [role="link"],
  #btnClear,
  .iconBtn,
  .btn,
  .btnRead,
  .searchRow,
  .indexStoryCard,
  .cardLinkWrap,
  .nearCityRow{
    touch-action:manipulation;
  }
}

/* ===== MOBIL 25 FINAL: Hikaye Yaz modal city select consistency ===== */
@media (max-width: 767px){
  #submitModal .formGrid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    margin-bottom:8px !important;
  }

  #submitModal .formGrid > div{
    min-width:0 !important;
  }

  #submitModal .formGrid > div:first-child{
    grid-column:1 / -1 !important;
  }

  #submitModal .label{
    margin:6px 0 4px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  #submitModal .select,
  #pickCityModal .select{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 36px 0 10px !important;
    font-size:13px !important;
    line-height:42px !important;
    border-radius:11px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
  }

  #submitModal #submitCity,
  #pickCityModal #pickCitySelect{
    font-size:13px !important;
    font-weight:800 !important;
    padding-right:40px !important;
  }

  #submitModal .body{
    padding:10px 12px 14px !important;
  }

  #submitModal .panel,
  #pickCityModal .panel{
    width:calc(100vw - 22px) !important;
    max-width:calc(100vw - 22px) !important;
  }

  #pickCityModal .formRow{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  #pickCityModal #pickCityGo{
    width:100% !important;
    min-height:40px !important;
  }
}

/* ===== PC/TABLET QUALITY ALIGNMENT V1 ===== */
.srTypeBadge{
  display:none;
}

@media (min-width: 761px){
  /* Search result clarity: city/story label standard */
  .topbar .searchPanel{
    border-radius:16px;
    border-color:#eadfd7;
    box-shadow:0 18px 38px rgba(17,17,17,.08);
    overflow:hidden;
  }

  .topbar .searchPanelList{
    max-height:420px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,106,0,.32) transparent;
  }

  .topbar .searchPanelList::-webkit-scrollbar{
    width:6px;
  }

  .topbar .searchPanelList::-webkit-scrollbar-thumb{
    background:rgba(255,106,0,.28);
    border-radius:999px;
  }

  .topbar .searchRow{
    padding:11px 13px;
    transition:background .16s ease, border-color .16s ease;
  }

  .topbar .searchRow:hover{
    background:#fff7f1;
  }

  .topbar .searchRow .srTitle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
  }

  .topbar .searchRow .srTitleText{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .topbar .srTypeBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:22px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid #ffd7bf;
    background:#fff3eb;
    color:#ff6a00;
    font-size:11px;
    font-weight:1000;
    line-height:1;
  }

  .topbar .srTypeBadge--story{
    border-color:#ece6df;
    background:#faf8f6;
    color:#5f6470;
  }

  .topbar .srMeta,
  .topbar .srSub{
    margin-top:3px;
    line-height:1.35;
  }

  /* Search clear/X standard on tablet and desktop */
  .topbar .searchBox{
    min-height:42px;
  }

  .topbar .searchBox input{
    min-width:0;
  }

  .topbar #btnClear,
  .topbar .searchBox .iconBtn{
    width:34px;
    height:34px;
    min-width:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:18px;
    line-height:1;
  }

  /* Shared ad card language for tablet/desktop */
  .adSlot{
    padding:12px;
    margin:14px 0;
    border-radius:16px;
    border-color:rgba(17,17,17,.075);
    box-shadow:0 8px 24px rgba(17,17,17,.035);
  }

  .adSlot .adLabel{
    min-height:25px;
    padding:5px 9px;
    margin-bottom:9px;
    font-size:10.5px;
  }

  .adSlot .adBox{
    min-height:98px;
    padding:14px 14px;
    border-radius:13px;
  }

  .adSlot.adInline .adBox{
    min-height:86px;
  }

  .adSlot.adWide .adBox{
    min-height:118px;
  }

  /* Story card density: keep desktop/tablet spacious, but less bloated */
  .indexStoryCard,
  #cityCards .indexStoryCard,
  #topReadStories .indexStoryCard,
  #storyTopReadStories .indexStoryCard,
  #viralStory .indexStoryCard,
  #newStories .indexStoryCard,
  #topStories .indexStoryCard,
  #talkedStories .indexStoryCard,
  #risingStories .indexStoryCard,
  #hotStories .indexStoryCard{
    padding:16px 17px;
    border-radius:16px;
  }

  #viralStory .indexStoryCard{
    padding:18px 18px 16px;
  }

  .indexStoryCard .cardTop,
  #cityCards .indexStoryCard .cardTop,
  #topReadStories .indexStoryCard .cardTop,
  #storyTopReadStories .indexStoryCard .cardTop{
    margin-bottom:8px;
  }

  .indexStoryCard .cardBadges,
  #cityCards .indexStoryCard .cardBadges,
  #topReadStories .indexStoryCard .cardBadges,
  #storyTopReadStories .indexStoryCard .cardBadges{
    gap:6px;
  }

  .indexStoryCard .storyChip,
  #cityCards .storyChip,
  #topReadStories .storyChip,
  #storyTopReadStories .storyChip{
    padding:4px 8px;
    font-size:11px;
  }

  .indexStoryCard .cardTitle,
  #cityCards .indexStoryCard .cardTitle,
  #topReadStories .indexStoryCard .cardTitle,
  #storyTopReadStories .indexStoryCard .cardTitle{
    margin-bottom:8px;
    line-height:1.22;
  }

  .indexStoryCard .cardExcerpt,
  #cityCards .indexStoryCard .cardExcerpt,
  #topReadStories .indexStoryCard .cardExcerpt,
  #storyTopReadStories .indexStoryCard .cardExcerpt{
    margin-bottom:12px;
    line-height:1.48;
    min-height:0;
  }

  .indexStoryCard .cardMetaRow,
  #cityCards .indexStoryCard .cardMetaRow,
  #topReadStories .indexStoryCard .cardMetaRow,
  #storyTopReadStories .indexStoryCard .cardMetaRow{
    margin-top:10px;
    padding-top:10px;
  }

  .indexStoryCard .btnRead,
  #cityCards .btnRead,
  #topReadStories .btnRead,
  #storyTopReadStories .btnRead{
    min-height:34px;
    height:34px;
    padding:0 13px;
    border-radius:10px;
    font-size:12.5px;
  }

  /* Cleaner top-read / written lists on wider screens */
  .miniList,
  .cityNearPanel .miniList,
  .cityTopReadPanel .miniList{
    gap:8px;
  }

  .listItem,
  .miniRow{
    border-radius:12px;
  }

  .cityNearPanel .miniRow,
  .cityNearPanel .listItem{
    padding:9px 11px;
  }
}

/* ===== PC/TABLET LIST LANGUAGE ALIGNMENT V2 ===== */
@media (min-width: 761px){
  /* Shared panel rhythm for nearby / most read / most written blocks */
  .citySide .sideCard,
  body.page-index .sideCard,
  body.storyPage .storyPageSideCard{
    border-radius:18px;
    border:1px solid rgba(17,17,17,.075);
    background:#fff;
    box-shadow:0 10px 30px rgba(17,17,17,.035);
    overflow:hidden;
  }

  .citySide .sideHeader,
  body.page-index .sideHeader,
  body.storyPage .storyPageSideHead{
    padding:15px 18px;
    border-bottom:1px solid rgba(17,17,17,.065);
    background:#fbfbfb;
  }

  .citySide .sideHeader h2,
  body.page-index .sideHeader h2,
  body.storyPage .storyPageSideTitle{
    margin:0;
    font-size:16px;
    font-weight:900;
    color:#111;
    letter-spacing:-.01em;
  }

  .citySide .sideBlock,
  body.page-index .sideBlock,
  body.storyPage .storyPageSideBody{
    padding:14px 16px 16px;
  }

  .citySide .miniList,
  body.page-index .side .miniList,
  body.storyPage .storyPageMiniList{
    display:flex;
    flex-direction:column;
    gap:9px;
  }

  /* One shared row language: no old underlined links or circle badges */
  .side .listItem,
  .citySide .listItem,
  .citySide .miniRow,
  body.storyPage .storyPageCityRow{
    width:100%;
    min-height:52px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border:1px solid rgba(17,17,17,.085);
    border-radius:14px;
    background:#fff;
    color:#1f1f1f;
    text-decoration:none !important;
    box-shadow:none;
    transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  }

  .side .listItem:hover,
  .citySide .listItem:hover,
  .citySide .miniRow:hover,
  body.storyPage .storyPageCityRow:hover{
    border-color:#ffc7aa;
    background:#fff8f3;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(255,106,0,.07);
    text-decoration:none !important;
  }

  .side .listItem:focus-visible,
  .citySide .listItem:focus-visible,
  .citySide .miniRow:focus-visible,
  body.storyPage .storyPageCityRow:focus-visible{
    outline:3px solid rgba(255,106,0,.18);
    outline-offset:2px;
  }

  .side .liLeft,
  .citySide .liLeft,
  body.storyPage .storyPageCityMain,
  body.storyPage .storyPageCityRow > div:first-child{
    min-width:0;
    flex:1 1 auto;
  }

  .side .liTitle,
  .side .listItem strong,
  .citySide .liTitle,
  .citySide .listItem strong,
  body.storyPage .storyPageCityName{
    display:block;
    min-width:0;
    margin:0;
    color:#202226;
    font-size:15.5px;
    font-weight:850;
    line-height:1.22;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-decoration:none !important;
  }

  .side .listItem span,
  .citySide .listItem span,
  body.storyPage .storyPageCityMeta{
    display:block;
    margin-top:4px;
    color:#6b7280;
    font-size:12.25px;
    font-weight:750;
    line-height:1.25;
    text-decoration:none !important;
  }

  .side .liRight,
  .citySide .liRight,
  body.storyPage .storyPageCityCount{
    flex:0 0 auto;
    min-width:max-content;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#34363b;
    font-size:14.5px;
    font-weight:850;
    line-height:1.2;
    text-align:right;
    white-space:nowrap;
    box-shadow:none;
    text-decoration:none !important;
  }

  body.storyPage .storyPageCityRow .storyPageCityCount{
    min-width:auto;
    height:auto;
    width:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

  /* Keep nearby city plate numbers subtle, not selected-looking */
  body.cityPage .cityNearPanel .listItem:first-child,
  body.cityPage .cityNearPanel .miniRow:first-child{
    border-color:rgba(17,17,17,.085);
    background:#fff;
  }

  body.cityPage .cityNearPanel .listItem:first-child:hover,
  body.cityPage .cityNearPanel .miniRow:first-child:hover{
    border-color:#ffc7aa;
    background:#fff8f3;
  }
}

/* ===== STORY/LIST PANEL UNIFICATION FINAL ===== */
/* One modern row language for story side panels, city nearby panels and index/city side lists.
   Desktop/tablet and mobile keep the same structure; mobile only tightens spacing. */
.side .listItem,
.citySide .listItem,
.citySide .miniRow,
.cityNearPanel .listItem,
html body.storyPage .storyPageSideCard .storyPageCityRow,
html body.storyPage #storyTopWrittenCities .storyPageCityRow,
html body.storyPage #storyTopReadStories .storyPageMiniStory,
.storyPanelRow{
  width:100% !important;
  min-height:50px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:10px 12px !important;
  border:1px solid rgba(17,17,17,.085) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#202226 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.side .listItem:hover,
.citySide .listItem:hover,
.citySide .miniRow:hover,
.cityNearPanel .listItem:hover,
html body.storyPage .storyPageSideCard .storyPageCityRow:hover,
html body.storyPage #storyTopWrittenCities .storyPageCityRow:hover,
html body.storyPage #storyTopReadStories .storyPageMiniStory:hover,
.storyPanelRow:hover{
  border-color:#ffc7aa !important;
  background:#fff8f3 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(255,106,0,.065) !important;
  text-decoration:none !important;
}

.side .listItem:focus-visible,
.citySide .listItem:focus-visible,
.citySide .miniRow:focus-visible,
.cityNearPanel .listItem:focus-visible,
html body.storyPage .storyPageSideCard .storyPageCityRow:focus-visible,
html body.storyPage #storyTopWrittenCities .storyPageCityRow:focus-visible,
html body.storyPage #storyTopReadStories .storyPageMiniStory:focus-visible,
.storyPanelRow:focus-visible{
  outline:3px solid rgba(255,106,0,.18) !important;
  outline-offset:2px !important;
}

.side .liLeft,
.citySide .liLeft,
.storyPanelMain,
html body.storyPage .storyPageCityMain,
html body.storyPage .storyPageMiniMain{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:block !important;
}

.side .liTitle,
.side .listItem strong,
.citySide .liTitle,
.citySide .listItem strong,
.storyPanelTitle,
html body.storyPage .storyPageCityName,
html body.storyPage .storyPageMiniTitle{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  color:#202226 !important;
  font-size:15px !important;
  font-weight:850 !important;
  line-height:1.22 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

.side .listItem span,
.citySide .listItem span,
.storyPanelMeta,
html body.storyPage .storyPageCityMeta,
html body.storyPage .storyPageMiniMeta{
  display:block !important;
  margin:3px 0 0 !important;
  color:#6b7280 !important;
  font-size:12px !important;
  font-weight:750 !important;
  line-height:1.24 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

.side .liRight,
.citySide .liRight,
.storyPanelMetric,
html body.storyPage .storyPageCityCount,
html body.storyPage .storyPageMiniMetric{
  flex:0 0 auto !important;
  min-width:max-content !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#34363b !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  text-align:right !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

html body.storyPage #storyTopReadStories .storyPageMiniStory{
  flex-direction:row !important;
  min-height:50px !important;
}

html body.storyPage #storyTopReadStories .storyPageMiniStory .badge,
html body.storyPage #storyTopReadStories .storyPageMiniExcerpt{
  display:none !important;
}

html body.storyPage #storyTopReadStories,
html body.storyPage #storyTopWrittenCities,
.side .miniList,
.citySide .miniList{
  gap:8px !important;
}

html body.storyPage .storyPageSideHead,
.citySide .sideHeader,
.side .sideHeader{
  background:#fbfbfb !important;
}

@media (max-width: 760px){
  .side .listItem,
  .citySide .listItem,
  .citySide .miniRow,
  .cityNearPanel .listItem,
  html body.storyPage .storyPageSideCard .storyPageCityRow,
  html body.storyPage #storyTopWrittenCities .storyPageCityRow,
  html body.storyPage #storyTopReadStories .storyPageMiniStory,
  .storyPanelRow{
    min-height:44px !important;
    padding:8px 9px !important;
    border-radius:12px !important;
    gap:9px !important;
  }

  .side .liTitle,
  .side .listItem strong,
  .citySide .liTitle,
  .citySide .listItem strong,
  .storyPanelTitle,
  html body.storyPage .storyPageCityName,
  html body.storyPage .storyPageMiniTitle{
    font-size:13px !important;
    line-height:1.18 !important;
  }

  .side .listItem span,
  .citySide .listItem span,
  .storyPanelMeta,
  html body.storyPage .storyPageCityMeta,
  html body.storyPage .storyPageMiniMeta{
    margin-top:2px !important;
    font-size:10.75px !important;
    line-height:1.18 !important;
  }

  .side .liRight,
  .citySide .liRight,
  .storyPanelMetric,
  html body.storyPage .storyPageCityCount,
  html body.storyPage .storyPageMiniMetric{
    font-size:11.5px !important;
  }
}

/* ===== CITY/STORY TOP READ META ALIGNMENT FINAL ===== */
/* Keep en cok okunan hikaye cards informationally consistent on city and story pages:
   title + city + topic/tag + vehicle + read metric on every viewport. */
body.cityPage #topReadStories .indexStoryCard .storyChip,
body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip{
  display:inline-flex !important;
}

body.cityPage #topReadStories .indexStoryCard .cardBadges,
body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .cardBadges{
  display:flex !important;
  flex-wrap:wrap !important;
}

body.storyPage #storyTopReadStories .storyPageMiniMeta,
body.storyPage #topReadStories .storyPageMiniMeta{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body.storyPage #storyTopReadStories .storyPageMiniSubMeta,
body.storyPage #topReadStories .storyPageMiniSubMeta{
  display:block !important;
  margin-top:2px !important;
  color:#8b8f98 !important;
  font-size:11.5px !important;
  font-weight:750 !important;
  line-height:1.18 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body.storyPage #storyTopReadStories .storyPageMiniMetric,
body.storyPage #topReadStories .storyPageMiniMetric{
  align-self:center !important;
}

@media (max-width:760px){
  body.cityPage #topReadStories .indexStoryCard .storyChip,
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip{
    display:inline-flex !important;
    max-width:100% !important;
  }

  body.cityPage #topReadStories .indexStoryCard .cardBadges,
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .cardBadges{
    gap:4px !important;
  }

  body.cityPage #topReadStories .indexStoryCard .storyChip{
    padding:3px 6px !important;
    font-size:10.5px !important;
  }

  body.storyPage #storyTopReadStories .storyPageMiniSubMeta,
  body.storyPage #topReadStories .storyPageMiniSubMeta{
    margin-top:1px !important;
    font-size:10.25px !important;
    line-height:1.15 !important;
  }
}

/* ===== CITY/STORY TOP READ PANEL — UNIFIED COMPACT ROW FINAL ===== */
body.cityPage #topReadStories .topReadPanelRow,
body.storyPage #storyTopReadStories .topReadPanelRow,
body.storyPage #topReadStories .topReadPanelRow{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
  min-height:58px !important;
  padding:10px 12px !important;
  border:1px solid rgba(17,17,17,.085) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#202226 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

body.cityPage #topReadStories .topReadPanelRow:hover,
body.storyPage #storyTopReadStories .topReadPanelRow:hover,
body.storyPage #topReadStories .topReadPanelRow:hover{
  border-color:#ffc7aa !important;
  background:#fff8f3 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(255,106,0,.065) !important;
}

body.cityPage #topReadStories .topReadPanelMain,
body.storyPage #storyTopReadStories .topReadPanelMain,
body.storyPage #topReadStories .topReadPanelMain{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:block !important;
}

body.cityPage #topReadStories .topReadPanelTitle,
body.storyPage #storyTopReadStories .topReadPanelTitle,
body.storyPage #topReadStories .topReadPanelTitle{
  margin:0 !important;
  color:#202226 !important;
  font-size:14.5px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-decoration:none !important;
}

body.cityPage #topReadStories .topReadPanelMeta,
body.storyPage #storyTopReadStories .topReadPanelMeta,
body.storyPage #topReadStories .topReadPanelMeta,
body.cityPage #topReadStories .topReadPanelDate,
body.storyPage #storyTopReadStories .topReadPanelDate,
body.storyPage #topReadStories .topReadPanelDate{
  display:block !important;
  margin:2px 0 0 !important;
  color:#6b7280 !important;
  font-size:11.5px !important;
  font-weight:750 !important;
  line-height:1.18 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-decoration:none !important;
}

body.cityPage #topReadStories .topReadPanelDate,
body.storyPage #storyTopReadStories .topReadPanelDate,
body.storyPage #topReadStories .topReadPanelDate{
  color:#8b8f98 !important;
  font-size:11px !important;
}

body.cityPage #topReadStories .topReadPanelMetric,
body.storyPage #storyTopReadStories .topReadPanelMetric,
body.storyPage #topReadStories .topReadPanelMetric{
  flex:0 0 auto !important;
  min-width:max-content !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#34363b !important;
  font-size:13.5px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

body.cityPage #topReadStories .topReadPanelRow .cardTop,
body.cityPage #topReadStories .topReadPanelRow .cardBadges,
body.cityPage #topReadStories .topReadPanelRow .cardExcerpt,
body.cityPage #topReadStories .topReadPanelRow .cardActions,
body.storyPage #storyTopReadStories .topReadPanelRow .storyChip,
body.storyPage #storyTopReadStories .topReadPanelRow .badge,
body.storyPage #storyTopReadStories .topReadPanelRow .storyPageMiniExcerpt{
  display:none !important;
}

@media (max-width:760px){
  body.cityPage #topReadStories .topReadPanelRow,
  body.storyPage #storyTopReadStories .topReadPanelRow,
  body.storyPage #topReadStories .topReadPanelRow{
    min-height:48px !important;
    padding:8px 9px !important;
    gap:9px !important;
    border-radius:12px !important;
  }

  body.cityPage #topReadStories .topReadPanelTitle,
  body.storyPage #storyTopReadStories .topReadPanelTitle,
  body.storyPage #topReadStories .topReadPanelTitle{
    font-size:13px !important;
    line-height:1.18 !important;
  }

  body.cityPage #topReadStories .topReadPanelMeta,
  body.storyPage #storyTopReadStories .topReadPanelMeta,
  body.storyPage #topReadStories .topReadPanelMeta,
  body.cityPage #topReadStories .topReadPanelDate,
  body.storyPage #storyTopReadStories .topReadPanelDate,
  body.storyPage #topReadStories .topReadPanelDate{
    margin-top:1px !important;
    font-size:10.25px !important;
    line-height:1.15 !important;
  }

  body.cityPage #topReadStories .topReadPanelMetric,
  body.storyPage #storyTopReadStories .topReadPanelMetric,
  body.storyPage #topReadStories .topReadPanelMetric{
    font-size:11.5px !important;
  }
}

/* ===== FINAL: SHARED CHIP LANGUAGE + C TYPE TOP READ CARDS ===== */
.indexStoryCard .storyChip,
#cityCards .storyChip,
#topReadStories .storyChip,
#storyTopReadStories .storyChip,
.storyDetailCard .storyChip,
.topReadPanelCardC .storyChip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  width:auto !important;
  max-width:100% !important;
  min-height:0 !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,106,0,.20) !important;
  background:#fff3ea !important;
  color:#d95600 !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

.indexStoryCard .storyChip--read,
#cityCards .storyChip--read,
#topReadStories .storyChip--read,
#storyTopReadStories .storyChip--read,
.storyDetailCard .storyChip--read,
.topReadPanelCardC .storyChip--read{
  border-color:rgba(17,24,39,.10) !important;
  background:#f7f7f5 !important;
  color:#51555d !important;
}

body.cityPage #topReadStories .topReadPanelCardC,
body.storyPage #storyTopReadStories .topReadPanelCardC,
body.storyPage #topReadStories .topReadPanelCardC{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  padding:12px 13px !important;
  border:1px solid rgba(17,17,17,.085) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#202226 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

body.cityPage #topReadStories .topReadPanelCardC:hover,
body.storyPage #storyTopReadStories .topReadPanelCardC:hover,
body.storyPage #topReadStories .topReadPanelCardC:hover{
  border-color:#ffc7aa !important;
  background:#fff8f3 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(255,106,0,.065) !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelBadges,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 8px !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelTitle,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelTitle,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelTitle{
  display:block !important;
  margin:0 0 5px !important;
  color:#202226 !important;
  font-size:14.5px !important;
  font-weight:900 !important;
  line-height:1.18 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-decoration:none !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelMetaLine,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine{
  display:block !important;
  margin:0 !important;
  color:#6b7280 !important;
  font-size:11.5px !important;
  font-weight:750 !important;
  line-height:1.18 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-decoration:none !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelMetric,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelMetric,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelMetric,
body.cityPage #topReadStories .topReadPanelCardC .cardExcerpt,
body.cityPage #topReadStories .topReadPanelCardC .cardActions,
body.storyPage #storyTopReadStories .topReadPanelCardC .storyPageMiniExcerpt,
body.storyPage #topReadStories .topReadPanelCardC .storyPageMiniExcerpt{
  display:none !important;
}

@media (max-width:760px){
  .indexStoryCard .storyChip,
  #cityCards .storyChip,
  #topReadStories .storyChip,
  #storyTopReadStories .storyChip,
  .storyDetailCard .storyChip,
  .topReadPanelCardC .storyChip{
    padding:4px 7px !important;
    font-size:10.5px !important;
    gap:3px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC,
  body.storyPage #storyTopReadStories .topReadPanelCardC,
  body.storyPage #topReadStories .topReadPanelCardC{
    padding:9px 10px !important;
    border-radius:12px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelBadges,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
    gap:5px !important;
    margin-bottom:6px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelTitle,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelTitle,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelTitle{
    margin-bottom:4px !important;
    font-size:13px !important;
    line-height:1.16 !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelMetaLine,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine{
    font-size:10.5px !important;
    line-height:1.15 !important;
  }
}

/* ===== FINAL CHIP STANDARD + STORY CARD SPACING (PC/TABLET/MOBILE) ===== */
/* City reference chip language: topic + vehicle orange, read-time neutral. */
.indexStoryCard .storyChip,
#cityCards .storyChip,
#topReadStories .storyChip,
#storyTopReadStories .storyChip,
.storyDetailCard .storyChip,
.storyPageCard .storyChip,
.topReadPanelCardC .storyChip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:auto !important;
  max-width:100% !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  border:1px solid #ffd7bf !important;
  background:#fff7f1 !important;
  color:#ff6a00 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

.indexStoryCard .storyChip--read,
#cityCards .storyChip--read,
#topReadStories .storyChip--read,
#storyTopReadStories .storyChip--read,
.storyDetailCard .storyChip--read,
.storyPageCard .storyChip--read,
.topReadPanelCardC .storyChip--read{
  border-color:rgba(17,24,39,.10) !important;
  background:#f7f7f5 !important;
  color:#51555d !important;
}

/* Main story cards need more breathing room than compact C-type top-read cards. */
.indexStoryCard:not(.topReadPanelCardC) .cardTop,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardTop{
  margin-bottom:14px !important;
}

.indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
}

.indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle{
  margin-top:0 !important;
}

/* C-type top-read cards stay compact but keep the same chip colors and readable spacing. */
body.cityPage #topReadStories .topReadPanelCardC,
body.storyPage #storyTopReadStories .topReadPanelCardC,
body.storyPage #topReadStories .topReadPanelCardC{
  display:block !important;
  padding:13px 14px !important;
  border:1px solid rgba(17,17,17,.085) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#202226 !important;
  text-decoration:none !important;
  overflow:hidden !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelBadges,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px !important;
  margin:0 0 9px !important;
  padding:0 !important;
}

body.cityPage #topReadStories .topReadPanelCardC .storyChip,
body.storyPage #storyTopReadStories .topReadPanelCardC .storyChip,
body.storyPage #topReadStories .topReadPanelCardC .storyChip{
  display:inline-flex !important;
  border-color:#ffd7bf !important;
  background:#fff7f1 !important;
  color:#ff6a00 !important;
}

body.cityPage #topReadStories .topReadPanelCardC .storyChip--read,
body.storyPage #storyTopReadStories .topReadPanelCardC .storyChip--read,
body.storyPage #topReadStories .topReadPanelCardC .storyChip--read{
  border-color:rgba(17,24,39,.10) !important;
  background:#f7f7f5 !important;
  color:#51555d !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelTitle,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelTitle,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelTitle{
  display:block !important;
  margin:0 0 6px !important;
  color:#202226 !important;
  font-size:14.5px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-decoration:none !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelMetaLine,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine{
  display:block !important;
  margin:0 !important;
  color:#6b7280 !important;
  font-size:11.5px !important;
  font-weight:750 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-decoration:none !important;
}

body.cityPage #topReadStories .topReadPanelCardC .cardExcerpt,
body.cityPage #topReadStories .topReadPanelCardC .cardActions,
body.cityPage #topReadStories .topReadPanelCardC .topReadPanelMetric,
body.storyPage #storyTopReadStories .topReadPanelCardC .storyPageMiniExcerpt,
body.storyPage #topReadStories .topReadPanelCardC .storyPageMiniExcerpt,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelMetric,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelMetric{
  display:none !important;
}

@media (max-width:760px){
  .indexStoryCard .storyChip,
  #cityCards .storyChip,
  #topReadStories .storyChip,
  #storyTopReadStories .storyChip,
  .storyDetailCard .storyChip,
  .storyPageCard .storyChip,
  .topReadPanelCardC .storyChip{
    padding:4px 7px !important;
    font-size:10.5px !important;
    gap:3px !important;
  }

  .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #cityCards .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #viralStory .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #newStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #topStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #risingStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
  #hotStories .indexStoryCard:not(.topReadPanelCardC) .cardTop{
    margin-bottom:11px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC,
  body.storyPage #storyTopReadStories .topReadPanelCardC,
  body.storyPage #topReadStories .topReadPanelCardC{
    padding:10px 10px !important;
    border-radius:12px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelBadges,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
    gap:5px !important;
    margin-bottom:7px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelTitle,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelTitle,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelTitle{
    margin-bottom:4px !important;
    font-size:13px !important;
    line-height:1.16 !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelMetaLine,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelMetaLine{
    font-size:10.5px !important;
    line-height:1.15 !important;
  }
}

/* ===== FINAL LOCK: chip renk standardi + chip/baslik mesafesi (PC/TABLET/MOBIL) ===== */
/* Referans: konu ve arac turuncu/krem; sure gri/notr. Genel layout, header, arama, modal ve harita degismez. */
.indexStoryCard .storyChip,
#cityCards .storyChip,
#topReadStories .storyChip,
#storyTopReadStories .storyChip,
.storyDetailCard .storyChip,
.storyPageCard .storyChip,
.topReadPanelCardC .storyChip,
.storyPageMiniStory .storyChip,
.storyPageSideCard .storyChip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:auto !important;
  max-width:100% !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  border:1px solid #fed7aa !important;
  background:#fff7ed !important;
  color:#f97316 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

.indexStoryCard .storyChip--vehicle,
#cityCards .storyChip--vehicle,
#topReadStories .storyChip--vehicle,
#storyTopReadStories .storyChip--vehicle,
.storyDetailCard .storyChip--vehicle,
.storyPageCard .storyChip--vehicle,
.topReadPanelCardC .storyChip--vehicle,
.storyPageMiniStory .storyChip--vehicle,
.storyPageSideCard .storyChip--vehicle{
  border-color:#fed7aa !important;
  background:#fff7ed !important;
  color:#f97316 !important;
}

.indexStoryCard .storyChip--read,
#cityCards .storyChip--read,
#topReadStories .storyChip--read,
#storyTopReadStories .storyChip--read,
.storyDetailCard .storyChip--read,
.storyPageCard .storyChip--read,
.topReadPanelCardC .storyChip--read,
.storyPageMiniStory .storyChip--read,
.storyPageSideCard .storyChip--read{
  border-color:#e5e7eb !important;
  background:#fafafa !important;
  color:#4b5563 !important;
}

/* Ana hikaye kartlarinda chip satiri basliga yapismasin. C tipi en cok okunan kartlari kompakt kalir. */
.indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 13px !important;
}

.indexStoryCard:not(.topReadPanelCardC) .cardTop,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardTop{
  margin-bottom:0 !important;
}

.indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardTitle{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* C tipi en cok okunan kartlarda ayni renk dili, daha kontrollu bosluk. */
body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelBadges,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px !important;
  margin:0 0 9px !important;
  padding:0 !important;
}

body.cityPage #topReadStories .topReadPanelCardC .topReadPanelTitle,
body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelTitle,
body.storyPage #topReadStories .topReadPanelCardC .topReadPanelTitle{
  margin:0 0 6px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

@media (max-width:760px){
  .indexStoryCard .storyChip,
  #cityCards .storyChip,
  #topReadStories .storyChip,
  #storyTopReadStories .storyChip,
  .storyDetailCard .storyChip,
  .storyPageCard .storyChip,
  .topReadPanelCardC .storyChip,
  .storyPageMiniStory .storyChip,
  .storyPageSideCard .storyChip{
    padding:4px 8px !important;
    font-size:10.5px !important;
    gap:4px !important;
  }

  .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #cityCards .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #viralStory .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #newStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #topStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #risingStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #hotStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges{
    gap:6px !important;
    margin-bottom:10px !important;
  }

  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges,
  body.storyPage #storyTopReadStories .topReadPanelCardC .topReadPanelBadges,
  body.storyPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
    gap:5px !important;
    margin-bottom:7px !important;
  }
}

/* ===== ABSOLUTE FINAL: CHIP ROLE COLOR LOCK (2026-05-06) =====
   Gercek chip classlari app.js icinde storyChip, storyChip--genre,
   storyChip--vehicle ve storyChip--read olarak uretiliyor.
   Bu blok sadece renk/rol standardini kilitler; layout, header, arama,
   modal ve harita davranisina dokunmaz. */
.indexStoryCard .storyChip,
#cityCards .storyChip,
#topReadStories .storyChip,
#storyTopReadStories .storyChip,
.storyDetailCard .storyChip,
.storyPageCard .storyChip,
.storyPageMiniStory .storyChip,
.storyPageSideCard .storyChip,
.topReadPanelCardC .storyChip,
.indexStoryCard .storyChip--genre,
#cityCards .storyChip--genre,
#topReadStories .storyChip--genre,
#storyTopReadStories .storyChip--genre,
.storyDetailCard .storyChip--genre,
.storyPageCard .storyChip--genre,
.storyPageMiniStory .storyChip--genre,
.storyPageSideCard .storyChip--genre,
.topReadPanelCardC .storyChip--genre,
.indexStoryCard .storyChip--vehicle,
#cityCards .storyChip--vehicle,
#topReadStories .storyChip--vehicle,
#storyTopReadStories .storyChip--vehicle,
.storyDetailCard .storyChip--vehicle,
.storyPageCard .storyChip--vehicle,
.storyPageMiniStory .storyChip--vehicle,
.storyPageSideCard .storyChip--vehicle,
.topReadPanelCardC .storyChip--vehicle{
  border-color:#fed7aa !important;
  background:#fff7ed !important;
  color:#f97316 !important;
}

.indexStoryCard .storyChip--read,
#cityCards .storyChip--read,
#topReadStories .storyChip--read,
#storyTopReadStories .storyChip--read,
.storyDetailCard .storyChip--read,
.storyPageCard .storyChip--read,
.storyPageMiniStory .storyChip--read,
.storyPageSideCard .storyChip--read,
.topReadPanelCardC .storyChip--read{
  border-color:#e5e7eb !important;
  background:#fafafa !important;
  color:#4b5563 !important;
}

/* ===== PC-TABLET 43 DEBUG FIX: CHIP ROLE + SPACING FINAL SOURCE OF TRUTH =====
   Tespit edilen gercek chip siniflari app.js icinde:
   storyChip, storyChip--genre, storyChip--vehicle, storyChip--read.
   Bu blok eski patch'leri role ve sira yedegiyle ezer.
   Genel layout/header/arama/modal/harita degistirmez. */
:root{
  --story-chip-accent-bg:#fff7ed;
  --story-chip-accent-text:#f97316;
  --story-chip-accent-border:#fed7aa;
  --story-chip-neutral-bg:#fafafa;
  --story-chip-neutral-text:#4b5563;
  --story-chip-neutral-border:#e5e7eb;
}

.indexStoryCard .cardBadges > .storyChip,
#cityCards .cardBadges > .storyChip,
#viralStory .cardBadges > .storyChip,
#newStories .cardBadges > .storyChip,
#topStories .cardBadges > .storyChip,
#talkedStories .cardBadges > .storyChip,
#risingStories .cardBadges > .storyChip,
#hotStories .cardBadges > .storyChip,
#topReadStories .cardBadges > .storyChip,
#topReadStories .topReadPanelBadges > .storyChip,
#storyTopReadStories .topReadPanelBadges > .storyChip,
.storyDetailCard .storyChip,
.storyPageCard .storyChip,
.storyPageMiniStory .storyChip,
.storyPageSideCard .storyChip,
.topReadPanelCardC .storyChip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:auto !important;
  max-width:100% !important;
  min-height:0 !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  border:1px solid var(--story-chip-accent-border) !important;
  background:var(--story-chip-accent-bg) !important;
  color:var(--story-chip-accent-text) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

/* Konu + arac: turuncu/krem. Class varsa class, yoksa 1. ve 2. chip yedek hedeflenir. */
.indexStoryCard .storyChip--genre,
.indexStoryCard .storyChip--vehicle,
#cityCards .storyChip--genre,
#cityCards .storyChip--vehicle,
#viralStory .storyChip--genre,
#viralStory .storyChip--vehicle,
#newStories .storyChip--genre,
#newStories .storyChip--vehicle,
#topStories .storyChip--genre,
#topStories .storyChip--vehicle,
#talkedStories .storyChip--genre,
#talkedStories .storyChip--vehicle,
#risingStories .storyChip--genre,
#risingStories .storyChip--vehicle,
#hotStories .storyChip--genre,
#hotStories .storyChip--vehicle,
#topReadStories .storyChip--genre,
#topReadStories .storyChip--vehicle,
#storyTopReadStories .storyChip--genre,
#storyTopReadStories .storyChip--vehicle,
.storyDetailCard .storyChip--genre,
.storyDetailCard .storyChip--vehicle,
.storyPageCard .storyChip--genre,
.storyPageCard .storyChip--vehicle,
.storyPageMiniStory .storyChip--genre,
.storyPageMiniStory .storyChip--vehicle,
.storyPageSideCard .storyChip--genre,
.storyPageSideCard .storyChip--vehicle,
.topReadPanelCardC .storyChip--genre,
.topReadPanelCardC .storyChip--vehicle,
.cardBadges > .storyChip:nth-child(1),
.cardBadges > .storyChip:nth-child(2),
.topReadPanelBadges > .storyChip:nth-child(1),
.topReadPanelBadges > .storyChip:nth-child(2){
  border-color:var(--story-chip-accent-border) !important;
  background:var(--story-chip-accent-bg) !important;
  color:var(--story-chip-accent-text) !important;
}

/* Okuma suresi: gri/notr. Class varsa class, yoksa 3. chip yedek hedeflenir. */
.indexStoryCard .storyChip--read,
#cityCards .storyChip--read,
#viralStory .storyChip--read,
#newStories .storyChip--read,
#topStories .storyChip--read,
#talkedStories .storyChip--read,
#risingStories .storyChip--read,
#hotStories .storyChip--read,
#topReadStories .storyChip--read,
#storyTopReadStories .storyChip--read,
.storyDetailCard .storyChip--read,
.storyPageCard .storyChip--read,
.storyPageMiniStory .storyChip--read,
.storyPageSideCard .storyChip--read,
.topReadPanelCardC .storyChip--read,
.cardBadges > .storyChip:nth-child(3),
.topReadPanelBadges > .storyChip:nth-child(3){
  border-color:var(--story-chip-neutral-border) !important;
  background:var(--story-chip-neutral-bg) !important;
  color:var(--story-chip-neutral-text) !important;
}

/* Ana hikaye kartlari: chip satiri basliga yapismasin. C tipi en cok okunan kompakt kalir. */
.indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 13px !important;
}

.indexStoryCard:not(.topReadPanelCardC) .cardTop,
#cityCards .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#viralStory .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#newStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#topStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#risingStories .indexStoryCard:not(.topReadPanelCardC) .cardTop,
#hotStories .indexStoryCard:not(.topReadPanelCardC) .cardTop{
  margin-bottom:0 !important;
}

.topReadPanelCardC .topReadPanelBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px !important;
  margin:0 0 9px !important;
  padding:0 !important;
}

@media (max-width:760px){
  .indexStoryCard .cardBadges > .storyChip,
  #cityCards .cardBadges > .storyChip,
  #viralStory .cardBadges > .storyChip,
  #newStories .cardBadges > .storyChip,
  #topStories .cardBadges > .storyChip,
  #talkedStories .cardBadges > .storyChip,
  #risingStories .cardBadges > .storyChip,
  #hotStories .cardBadges > .storyChip,
  #topReadStories .cardBadges > .storyChip,
  #topReadStories .topReadPanelBadges > .storyChip,
  #storyTopReadStories .topReadPanelBadges > .storyChip,
  .storyDetailCard .storyChip,
  .storyPageCard .storyChip,
  .storyPageMiniStory .storyChip,
  .storyPageSideCard .storyChip,
  .topReadPanelCardC .storyChip{
    padding:4px 8px !important;
    font-size:10.5px !important;
    gap:4px !important;
  }

  .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #cityCards .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #viralStory .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #newStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #topStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #talkedStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #risingStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges,
  #hotStories .indexStoryCard:not(.topReadPanelCardC) .cardBadges{
    gap:6px !important;
    margin-bottom:10px !important;
  }

  .topReadPanelCardC .topReadPanelBadges{
    gap:5px !important;
    margin-bottom:7px !important;
  }
}

/* ===== PC-TABLET 44A FINAL: exact chip role color lock =====
   DevTools tespitine gore index'teki eski selectorlar daha spesifikti.
   Bu blok ayni selectorlari en sonda tekrar kullanarak rol renklerini kilitler.
   Renkler PC/tablet/mobilde aynidir; mobilde yalnizca olcu/padding farklari kalabilir. */
:root{
  --story-chip-accent-bg:#fff7ed;
  --story-chip-accent-text:#f97316;
  --story-chip-accent-border:#fed7aa;
  --story-chip-neutral-bg:#fafafa;
  --story-chip-neutral-text:#4b5563;
  --story-chip-neutral-border:#e5e7eb;
}

#viralStory .indexStoryCard .storyChip--genre,
#newStories .indexStoryCard .storyChip--genre,
#topStories .indexStoryCard .storyChip--genre,
#talkedStories .indexStoryCard .storyChip--genre,
#risingStories .indexStoryCard .storyChip--genre,
#hotStories .indexStoryCard .storyChip--genre,
#viralStory .indexStoryCard .storyChip--vehicle,
#newStories .indexStoryCard .storyChip--vehicle,
#topStories .indexStoryCard .storyChip--vehicle,
#talkedStories .indexStoryCard .storyChip--vehicle,
#risingStories .indexStoryCard .storyChip--vehicle,
#hotStories .indexStoryCard .storyChip--vehicle,
#cityCards .indexStoryCard .storyChip--genre,
#cityCards .indexStoryCard .storyChip--vehicle,
#topReadStories .topReadPanelCardC .storyChip--genre,
#topReadStories .topReadPanelCardC .storyChip--vehicle,
#storyTopReadStories .topReadPanelCardC .storyChip--genre,
#storyTopReadStories .topReadPanelCardC .storyChip--vehicle,
.storyDetailCard .storyChip--genre,
.storyDetailCard .storyChip--vehicle{
  border-color:var(--story-chip-accent-border) !important;
  background:var(--story-chip-accent-bg) !important;
  color:var(--story-chip-accent-text) !important;
}

#viralStory .indexStoryCard .storyChip--read,
#newStories .indexStoryCard .storyChip--read,
#topStories .indexStoryCard .storyChip--read,
#talkedStories .indexStoryCard .storyChip--read,
#risingStories .indexStoryCard .storyChip--read,
#hotStories .indexStoryCard .storyChip--read,
#cityCards .indexStoryCard .storyChip--read,
#topReadStories .topReadPanelCardC .storyChip--read,
#storyTopReadStories .topReadPanelCardC .storyChip--read,
.storyDetailCard .storyChip--read{
  border-color:var(--story-chip-neutral-border) !important;
  background:var(--story-chip-neutral-bg) !important;
  color:var(--story-chip-neutral-text) !important;
}

/* Sira yedegi: app.js disinda uretilen 3. chip da okuma suresi kabul edilir. */
.indexStoryCard .cardBadges > .storyChip:nth-child(3),
.topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(3),
.storyDetailCard .cardBadges > .storyChip:nth-child(3){
  border-color:var(--story-chip-neutral-border) !important;
  background:var(--story-chip-neutral-bg) !important;
  color:var(--story-chip-neutral-text) !important;
}

.indexStoryCard .cardBadges > .storyChip:nth-child(1),
.indexStoryCard .cardBadges > .storyChip:nth-child(2),
.topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(1),
.topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(2),
.storyDetailCard .cardBadges > .storyChip:nth-child(1),
.storyDetailCard .cardBadges > .storyChip:nth-child(2){
  border-color:var(--story-chip-accent-border) !important;
  background:var(--story-chip-accent-bg) !important;
  color:var(--story-chip-accent-text) !important;
}


/* ===== PC-TABLET 44B FINAL: CHIP VEHICLE BRIDGE COLOR LOCK =====
   Konu turuncu/krem, arac ara ton, sure gri/notr.
   PC/tablet/mobil ayni renk mantigini kullanir; mobilde onceki olcu kurallari korunur. */
:root{
  --story-chip-genre-bg:#fff7ed;
  --story-chip-genre-text:#f97316;
  --story-chip-genre-border:#fed7aa;
  --story-chip-vehicle-bg:#fffaf3;
  --story-chip-vehicle-text:#b45309;
  --story-chip-vehicle-border:#fde3c0;
  --story-chip-read-bg:#fafafa;
  --story-chip-read-text:#4b5563;
  --story-chip-read-border:#e5e7eb;
}

#viralStory .indexStoryCard .storyChip--genre,
#newStories .indexStoryCard .storyChip--genre,
#topStories .indexStoryCard .storyChip--genre,
#talkedStories .indexStoryCard .storyChip--genre,
#risingStories .indexStoryCard .storyChip--genre,
#hotStories .indexStoryCard .storyChip--genre,
#cityCards .indexStoryCard .storyChip--genre,
#topReadStories .topReadPanelCardC .storyChip--genre,
#storyTopReadStories .topReadPanelCardC .storyChip--genre,
.storyDetailCard .storyChip--genre,
.storyPageCard .storyChip--genre,
.storyPageMiniStory .storyChip--genre,
.storyPageSideCard .storyChip--genre,
.indexStoryCard .cardBadges > .storyChip:nth-child(1),
.topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(1),
.storyDetailCard .cardBadges > .storyChip:nth-child(1){
  border-color:var(--story-chip-genre-border) !important;
  background:var(--story-chip-genre-bg) !important;
  color:var(--story-chip-genre-text) !important;
}

#viralStory .indexStoryCard .storyChip--vehicle,
#newStories .indexStoryCard .storyChip--vehicle,
#topStories .indexStoryCard .storyChip--vehicle,
#talkedStories .indexStoryCard .storyChip--vehicle,
#risingStories .indexStoryCard .storyChip--vehicle,
#hotStories .indexStoryCard .storyChip--vehicle,
#cityCards .indexStoryCard .storyChip--vehicle,
#topReadStories .topReadPanelCardC .storyChip--vehicle,
#storyTopReadStories .topReadPanelCardC .storyChip--vehicle,
.storyDetailCard .storyChip--vehicle,
.storyPageCard .storyChip--vehicle,
.storyPageMiniStory .storyChip--vehicle,
.storyPageSideCard .storyChip--vehicle,
.indexStoryCard .cardBadges > .storyChip:nth-child(2),
.topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(2),
.storyDetailCard .cardBadges > .storyChip:nth-child(2){
  border-color:var(--story-chip-vehicle-border) !important;
  background:var(--story-chip-vehicle-bg) !important;
  color:var(--story-chip-vehicle-text) !important;
}

#viralStory .indexStoryCard .storyChip--read,
#newStories .indexStoryCard .storyChip--read,
#topStories .indexStoryCard .storyChip--read,
#talkedStories .indexStoryCard .storyChip--read,
#risingStories .indexStoryCard .storyChip--read,
#hotStories .indexStoryCard .storyChip--read,
#cityCards .indexStoryCard .storyChip--read,
#topReadStories .topReadPanelCardC .storyChip--read,
#storyTopReadStories .topReadPanelCardC .storyChip--read,
.storyDetailCard .storyChip--read,
.storyPageCard .storyChip--read,
.storyPageMiniStory .storyChip--read,
.storyPageSideCard .storyChip--read,
.indexStoryCard .cardBadges > .storyChip:nth-child(3),
.topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(3),
.storyDetailCard .cardBadges > .storyChip:nth-child(3){
  border-color:var(--story-chip-read-border) !important;
  background:var(--story-chip-read-bg) !important;
  color:var(--story-chip-read-text) !important;
}

/* ===== PC-TABLET 45 FINAL: top read C-card chip density only =====
   Scope: only right/alt En cok okunan C tipi kartlar.
   Ana hikaye kartlari, header, arama, harita ve layout etkilenmez. */
#topReadStories .topReadPanelCardC .topReadPanelBadges,
#storyTopReadStories .topReadPanelCardC .topReadPanelBadges{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  margin:0 0 7px !important;
  padding:0 !important;
}
#topReadStories .topReadPanelCardC .storyChip,
#storyTopReadStories .topReadPanelCardC .storyChip{
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
  max-width:100% !important;
  padding:3px 7px !important;
  gap:3px !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
#topReadStories .topReadPanelCardC .storyChip--genre,
#storyTopReadStories .topReadPanelCardC .storyChip--genre,
#topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(1),
#storyTopReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(1){
  border-color:var(--story-chip-genre-border, #fed7aa) !important;
  background:var(--story-chip-genre-bg, #fff7ed) !important;
  color:var(--story-chip-genre-text, #f97316) !important;
}
#topReadStories .topReadPanelCardC .storyChip--vehicle,
#storyTopReadStories .topReadPanelCardC .storyChip--vehicle,
#topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(2),
#storyTopReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(2){
  border-color:var(--story-chip-vehicle-border, #fde3c0) !important;
  background:var(--story-chip-vehicle-bg, #fffaf3) !important;
  color:var(--story-chip-vehicle-text, #b45309) !important;
}
#topReadStories .topReadPanelCardC .storyChip--read,
#storyTopReadStories .topReadPanelCardC .storyChip--read,
#topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(3),
#storyTopReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(3){
  border-color:var(--story-chip-read-border, #e5e7eb) !important;
  background:var(--story-chip-read-bg, #fafafa) !important;
  color:var(--story-chip-read-text, #4b5563) !important;
}
@media (max-width:760px){
  #topReadStories .topReadPanelCardC .topReadPanelBadges,
  #storyTopReadStories .topReadPanelCardC .topReadPanelBadges{
    gap:4px !important;
    margin-bottom:6px !important;
  }
  #topReadStories .topReadPanelCardC .storyChip,
  #storyTopReadStories .topReadPanelCardC .storyChip{
    padding:3px 6px !important;
    font-size:10px !important;
    gap:3px !important;
  }
}

/* ===== PC-TABLET 46 FINAL: mobile city top-read show all chips =====
   Scope: only mobile city En cok okunan hikayeler panel.
   Fixes old mobile rules that hid vehicle/read chips with nth-child(n+2).
   Does not affect PC/tablet or main story cards. */
@media (max-width:760px){
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .cardBadges,
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .topReadPanelBadges,
  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:4px !important;
    overflow:visible !important;
    max-height:none !important;
    margin:0 0 6px !important;
    padding:0 !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip,
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip:nth-child(n+2),
  body.cityPage #topReadStories .indexStoryCard .storyChip:nth-child(n+2),
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .storyChip,
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .storyChip:nth-child(n+2),
  body.cityPage #topReadStories .topReadPanelCardC .storyChip:nth-child(n+2){
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:static !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:3px 6px !important;
    gap:3px !important;
    border-radius:999px !important;
    font-size:10px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip--genre,
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .storyChip--genre,
  body.cityPage #topReadStories .topReadPanelCardC .storyChip--genre,
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .cardBadges > .storyChip:nth-child(1),
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(1),
  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(1){
    border-color:var(--story-chip-genre-border, #fed7aa) !important;
    background:var(--story-chip-genre-bg, #fff7ed) !important;
    color:var(--story-chip-genre-text, #f97316) !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip--vehicle,
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .storyChip--vehicle,
  body.cityPage #topReadStories .topReadPanelCardC .storyChip--vehicle,
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .cardBadges > .storyChip:nth-child(2),
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(2),
  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(2){
    border-color:var(--story-chip-vehicle-border, #fde3c0) !important;
    background:var(--story-chip-vehicle-bg, #fffaf3) !important;
    color:var(--story-chip-vehicle-text, #b45309) !important;
  }

  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .storyChip--read,
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .storyChip--read,
  body.cityPage #topReadStories .topReadPanelCardC .storyChip--read,
  body.cityPage .cityTopReadPanel #topReadStories .indexStoryCard .cardBadges > .storyChip:nth-child(3),
  body.cityPage .cityTopReadPanel #topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(3),
  body.cityPage #topReadStories .topReadPanelCardC .topReadPanelBadges > .storyChip:nth-child(3){
    border-color:var(--story-chip-read-border, #e5e7eb) !important;
    background:var(--story-chip-read-bg, #fafafa) !important;
    color:var(--story-chip-read-text, #4b5563) !important;
  }
}

/* ===== AŞAMA 52: Hikâye Yaz modal takma ad alanı ===== */
#submitModal .submitIdentityGrid{
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap:14px;
  align-items:end;
  margin-top:12px;
}

#submitModal .submitIdentityGrid > div{
  min-width:0;
}

#submitModal #submitNickname{
  width:100%;
}

@media (max-width: 767px){
  #submitModal .submitIdentityGrid{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:8px !important;
    margin-top:8px !important;
  }

  #submitModal #submitNickname,
  #submitModal #submitTitle{
    min-height:42px !important;
    font-size:14px !important;
  }
}


/* ===== AŞAMA 56: Hikâye başlıklarını sakinleştirme =====
   Amaç: index/city kart başlıkları ve story detay başlığı PC-tablet-mobilde daha dengeli görünsün.
   Not: Sadece font-size/line-height/letter-spacing/text-transform başlık stilleri hedeflenir. */
body.page-index .indexStoryCard .cardTitle,
body.page-index #viralStory .indexStoryCard .cardTitle,
body.page-index #newStories .indexStoryCard .cardTitle,
body.page-index #topStories .indexStoryCard .cardTitle,
body.page-index #talkedStories .indexStoryCard .cardTitle,
body.page-index #risingStories .indexStoryCard .cardTitle,
body.page-index #hotStories .indexStoryCard .cardTitle{
  font-size:18px !important;
  line-height:1.28 !important;
  font-weight:760 !important;
  letter-spacing:-0.018em !important;
  text-transform:none !important;
  min-height:auto !important;
  margin-bottom:10px !important;
}

body.cityPage #cityCards .indexStoryCard .cardTitle,
body.cityPage #cityCards .cardTitle{
  font-size:18px !important;
  line-height:1.28 !important;
  font-weight:760 !important;
  letter-spacing:-0.018em !important;
  text-transform:none !important;
  min-height:auto !important;
  margin-bottom:10px !important;
}

body.cityPage #topReadStories .cardTitle,
body.storyPage #topReadStories .cardTitle,
body.storyPage #storyTopReadStories .cardTitle,
body.storyPage .storyPageMiniTitle,
body.storyPage .storyPageMiniStory .cardTitle{
  font-size:14px !important;
  line-height:1.28 !important;
  font-weight:720 !important;
  letter-spacing:-0.014em !important;
  text-transform:none !important;
}

body.storyPage .storyPageTitle,
body.storyPage .storyPageMainCard .storyPageTitle{
  font-size:30px !important;
  line-height:1.12 !important;
  font-weight:760 !important;
  letter-spacing:-0.026em !important;
  text-transform:none !important;
}

@media (max-width:1024px){
  body.page-index .indexStoryCard .cardTitle,
  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index #newStories .indexStoryCard .cardTitle,
  body.page-index #topStories .indexStoryCard .cardTitle,
  body.page-index #talkedStories .indexStoryCard .cardTitle,
  body.page-index #risingStories .indexStoryCard .cardTitle,
  body.page-index #hotStories .indexStoryCard .cardTitle,
  body.cityPage #cityCards .indexStoryCard .cardTitle,
  body.cityPage #cityCards .cardTitle{
    font-size:17px !important;
    line-height:1.3 !important;
  }

  body.storyPage .storyPageTitle,
  body.storyPage .storyPageMainCard .storyPageTitle{
    font-size:27px !important;
    line-height:1.14 !important;
  }
}

@media (max-width:760px){
  body.page-index .indexStoryCard .cardTitle,
  body.page-index #viralStory .indexStoryCard .cardTitle,
  body.page-index #newStories .indexStoryCard .cardTitle,
  body.page-index #topStories .indexStoryCard .cardTitle,
  body.page-index #talkedStories .indexStoryCard .cardTitle,
  body.page-index #risingStories .indexStoryCard .cardTitle,
  body.page-index #hotStories .indexStoryCard .cardTitle,
  body.cityPage #cityCards .indexStoryCard .cardTitle,
  body.cityPage #cityCards .cardTitle{
    font-size:16px !important;
    line-height:1.3 !important;
  }

  body.cityPage #topReadStories .cardTitle,
  body.storyPage #topReadStories .cardTitle,
  body.storyPage #storyTopReadStories .cardTitle,
  body.storyPage .storyPageMiniTitle,
  body.storyPage .storyPageMiniStory .cardTitle{
    font-size:13px !important;
    line-height:1.3 !important;
  }

  body.storyPage .storyPageTitle,
  body.storyPage .storyPageMainCard .storyPageTitle{
    font-size:24px !important;
    line-height:1.16 !important;
  }
}