/* Dünyada Bodrum
   Gazete düzeni: çift çizgili künye, üst başlıklar, manşet ve iki sütun.
   Renkler: mürekkep laciverti, Ege mavisi, kırık beyaz kâğıt. */

:root {
  --murekkep: #16263c;
  --ege: #2d6f8e;
  --kagit: #f6f3ec;
  --kum: #d7cfc0;
  --kul: #5d6470;
  --isaret: #8c3a2b;
  --zeytin: #4e6b43;
  --derin: #1f4f5c;
  --mercan: #a44a52;
  --mor: #5b4b7a;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--ege); }

/* ---------- Üst bant ---------- */

.bant {
  background: var(--murekkep);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1.5rem;
}

.bant-marka {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--kagit);
  flex-shrink: 0;
}

.bant-marka img { border-radius: 7px; }

.bant-marka span {
  font-family: var(--serif);
  font-size: 1.02rem;
  white-space: nowrap;
}

.bant-ulkeler {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.bant-ulkeler::-webkit-scrollbar { display: none; }

.bant-ulkeler a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: #b9c6d4;
  font-family: var(--sans);
  font-size: 0.78rem;
  white-space: nowrap;
  padding: 0.2rem 0;
}

.bant-ulkeler a:hover { color: var(--kagit); }

.bant .bayrak-gorsel { border-color: rgba(255, 255, 255, 0.25); }

@media (max-width: 52rem) {
  .bant-ulkeler a span { display: none; }
  .bant { gap: 1rem; }
}

/* ---------- Konu bandı ---------- */

.konu-bandi {
  display: flex;
  align-items: center;
  gap: 0.35rem 1.1rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.5rem;
  background: #112033;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.konu-etiket {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6c8299;
}

.konu-bandi a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.79rem;
  color: #c6d3de;
  white-space: nowrap;
}

.konu-bandi a::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  flex-shrink: 0;
}

.konu-bandi a b {
  font-weight: 400;
  color: #6c8299;
  font-variant-numeric: tabular-nums;
}

.konu-bandi a:hover { color: #fff; }

/* Bantta kategori renkleri koyu zemine göre açılıyor. */
.konu-bandi .k-otel::before { background: #5f93ad; }
.konu-bandi .k-yat::before { background: #4e93a6; }
.konu-bandi .k-yemek::before { background: #c79a4a; }
.konu-bandi .k-kultur::before { background: #7fa070; }
.konu-bandi .k-magazin::before { background: #c6757c; }
.konu-bandi .k-ekonomi::before { background: #8ba3b8; }
.konu-bandi .k-asayis::before { background: #c0705e; }
.konu-bandi .k-spor::before { background: #9184b5; }
.konu-bandi .k-diger::before { background: #6c8299; }

/* ---------- Dağılım ---------- */

/* Veri azken çubuk yerine tek satırlık liste. */
.dagilim-sade {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dagilim-sade a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--murekkep);
  font-family: var(--sans);
  font-size: 0.85rem;
  border: 1px solid var(--kum);
  padding: 0.4rem 0.75rem;
}

.dagilim-sade a:hover { border-color: var(--ege); color: var(--ege); }

.dagilim-sade a b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kul);
}

.dagilim-sade .k-otel a { border-left: 3px solid var(--ege); }
.dagilim-sade .k-yat a { border-left: 3px solid var(--derin); }
.dagilim-sade .k-yemek a { border-left: 3px solid #9a6a1f; }
.dagilim-sade .k-kultur a { border-left: 3px solid var(--zeytin); }
.dagilim-sade .k-magazin a { border-left: 3px solid var(--mercan); }
.dagilim-sade .k-ekonomi a { border-left: 3px solid var(--murekkep); }
.dagilim-sade .k-asayis a { border-left: 3px solid var(--isaret); }
.dagilim-sade .k-spor a { border-left: 3px solid var(--mor); }
.dagilim-sade .k-diger a { border-left: 3px solid var(--kul); }

.dagilim { list-style: none; padding: 0; margin: 0 0 0.5rem; }

.dagilim li { border-bottom: 1px solid var(--kum); }

.dagilim a {
  display: grid;
  grid-template-columns: 11rem 1fr 2.5rem;
  align-items: center;
  gap: 0.9rem;
  padding: 0.42rem 0;
  text-decoration: none;
  color: var(--murekkep);
}

@media (max-width: 34rem) {
  .dagilim a { grid-template-columns: 8rem 1fr 2rem; gap: 0.6rem; }
}

.dagilim-ad {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.dagilim-cubuk {
  display: block;
  height: 10px;
  background: var(--kum);
}

.dagilim-cubuk i {
  display: block;
  height: 100%;
  background: var(--ege);
}

.dagilim .k-otel .dagilim-cubuk i { background: var(--ege); }
.dagilim .k-yat .dagilim-cubuk i { background: var(--derin); }
.dagilim .k-yemek .dagilim-cubuk i { background: #9a6a1f; }
.dagilim .k-kultur .dagilim-cubuk i { background: var(--zeytin); }
.dagilim .k-magazin .dagilim-cubuk i { background: var(--mercan); }
.dagilim .k-ekonomi .dagilim-cubuk i { background: var(--murekkep); }
.dagilim .k-asayis .dagilim-cubuk i { background: var(--isaret); }
.dagilim .k-spor .dagilim-cubuk i { background: var(--mor); }
.dagilim .k-diger .dagilim-cubuk i { background: var(--kul); }

.dagilim-sayi {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--kul);
}

.dagilim a:hover .dagilim-ad { color: var(--ege); text-decoration: underline; }

/* ---------- Konu sayfası ---------- */

.konu-sayfa { max-width: 48rem; }

.konu-sayfa .ust-baslik { margin-top: 2.25rem; }
.konu-sayfa .ozet.buyuk { margin-bottom: 1rem; }
.konu-sayfa .kunye { padding-bottom: 0.25rem; }

.konu-sayfa h1 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--murekkep);
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.konu-sayfa .sutunlar { margin-top: 1.5rem; }
.konu-sayfa .olay:first-child,
.konu-sayfa .olay:nth-child(2) { border-top: none; padding-top: 0; }

/* ---------- Künye ---------- */

.baslik-alani {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem 0;
}

.kunye-satiri {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kul);
  padding: 0.5rem 0;
}

.kunye-satiri.ust { border-bottom: 1px solid var(--kum); }

.kunye-satiri.alt {
  justify-content: center;
  gap: 2.5rem;
  border-top: 1px solid var(--murekkep);
  border-bottom: 3px solid var(--murekkep);
  margin-top: 1rem;
}

.marka-simge {
  display: block;
  margin: 1.5rem auto 0;
  border-radius: 10px;
}

.baslik-alani h1 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--murekkep);
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  margin: 1.5rem 0 0;
}

.slogan {
  font-style: italic;
  text-align: center;
  color: var(--kul);
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
}

.baslik-alani.ince {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--murekkep);
  max-width: 44rem;
}

.geri {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  text-decoration: none;
  color: var(--murekkep);
  font-size: 1.2rem;
}

.geri img { border-radius: 6px; }

.ulke-basligi {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 2.5rem 0 1rem;
}

.ulke-basligi .bayrak-gorsel { width: 40px; height: 30px; }

.ulke-basligi h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin: 0;
}

.ulke-sayfa .sutunlar { margin-top: 1.5rem; }
.ulke-sayfa .olay:first-child { border-top: 3px solid var(--murekkep); }

/* ---------- Giriş ---------- */

.giris {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.giris p {
  font-size: 1.22rem;
  line-height: 1.5;
  margin: 0;
  max-width: 40rem;
}

.ulke-listesi {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  padding: 0;
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--kul);
}

.ulke-listesi li { display: flex; }

.ulke-listesi a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--kul);
  padding: 0.15rem 0;
}

.ulke-listesi a:hover { color: var(--ege); text-decoration: underline; }

.kunye .bayraklar a { line-height: 0; }

/* Bayraklar görsel olarak geliyor — Windows'ta emoji bayrak yok. */
.bayrak-gorsel {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border: 1px solid rgba(22, 38, 60, 0.18);
  vertical-align: -2px;
}

.bayrak-yok {
  display: inline-block;
  width: 20px;
  height: 15px;
  background: var(--kum);
  vertical-align: -2px;
}

/* ---------- Haberler ---------- */

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.ust-baslik {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ege);
  margin: 0 0 0.45rem;
}

.olay {
  border-top: 1px solid var(--kum);
  padding: 1.75rem 0;
}

.olay-baglanti { text-decoration: none; color: inherit; }

.olay h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--murekkep);
  font-size: 1.45rem;
  line-height: 1.22;
  margin: 0 0 0.55rem;
}

.olay-baglanti:hover h2 { color: var(--ege); }

.manset {
  border-top: 3px solid var(--murekkep);
  padding-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Sütunlara bölme yalnızca sayfada o yapı varsa uygulanıyor. Tasarım
   dosyası güncellenip sayfalar henüz yeniden üretilmediğinde manşetin
   dağılmasını önlüyor. */
@media (min-width: 52rem) {
  .manset:has(> .manset-metin) {
    grid-template-columns: 1fr 15rem;
    gap: 3rem;
    align-items: start;
  }
}

.manset h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.manset .ozet { font-size: 1.15rem; }

/* Manşetin yanındaki mesafe bloğu — fotoğrafın yerini tutan görsel ağırlık. */
.mesafe-blok {
  background: var(--murekkep);
  color: var(--kagit);
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-self: stretch;
}

.mesafe-blok .bayrak-gorsel {
  width: 52px;
  height: 39px;
  border-color: rgba(255, 255, 255, 0.3);
  margin-bottom: 0.7rem;
}

.mesafe-ulke {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb4c6;
}

.mesafe-sayi {
  font-family: var(--serif);
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

.mesafe-birim {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: #9fb4c6;
}

.ozet {
  margin: 0 0 0.8rem;
  color: #2b3545;
}

.ozet.buyuk {
  font-size: 1.28rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.sutunlar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
}

@media (min-width: 46rem) {
  .sutunlar { grid-template-columns: 1fr 1fr; }
}

/* ---------- Kategori renkleri ----------
   Fotoğraf yok; renk ayrımını kategori taşıyor. Üst başlığın rengi ve
   başındaki küçük kare, kartlara göz atarken tür ayrımı veriyor. */

.ust-baslik {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ust-baslik::before {
  content: "";
  width: 9px;
  height: 9px;
  background: currentColor;
  flex-shrink: 0;
}

.k-otel .ust-baslik { color: var(--ege); }
.k-yat .ust-baslik { color: var(--derin); }
.k-yemek .ust-baslik { color: #9a6a1f; }
.k-kultur .ust-baslik { color: var(--zeytin); }
.k-magazin .ust-baslik { color: var(--mercan); }
.k-ekonomi .ust-baslik { color: var(--murekkep); }
.k-asayis .ust-baslik { color: var(--isaret); }
.k-spor .ust-baslik { color: var(--mor); }
.k-diger .ust-baslik { color: var(--kul); }

/* ---------- Mesafe şeridi ----------
   Sitenin kendine ait işareti: soldaki nokta Bodrum, bayrak yayının
   uzaklığı kadar sağda duruyor. Uzaklık burada okunacak bir sayı değil,
   bakılınca görülen bir şey. */

.serit {
  position: relative;
  height: 2.6rem;
  margin: 1rem 0 0.9rem;
  max-width: 30rem;
}

.serit-cizgi {
  position: absolute;
  top: 0.55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--kum);
}

.serit-bodrum {
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--murekkep);
}

.serit-bayrak {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  line-height: 0;
}

.serit-bayrak .bayrak-gorsel {
  width: 24px;
  height: 18px;
  box-shadow: 0 0 0 3px var(--kagit);
}

.serit-sayi {
  position: absolute;
  top: 1.5rem;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--kul);
  white-space: nowrap;
}

.serit-buyuk { height: 3.4rem; max-width: 38rem; margin-top: 1.5rem; }
.serit-buyuk .serit-cizgi { top: 0.8rem; height: 2px; background: var(--murekkep); opacity: 0.25; }
.serit-buyuk .serit-bodrum { top: 0.35rem; width: 11px; height: 11px; }
.serit-buyuk .serit-bayrak .bayrak-gorsel { width: 38px; height: 28px; }
.serit-buyuk .serit-sayi {
  top: 2.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--murekkep);
}

/* ---------- Künye satırları ---------- */

.kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--kul);
}

.kunye > span + span {
  border-left: 1px solid var(--kum);
  padding-left: 0.85rem;
}

.kunye .bayraklar {
  display: inline-flex;
  gap: 0.28rem;
  border-left: none;
  padding-left: 0;
}

.kapsam { color: var(--murekkep); font-weight: 600; }

.ilk-kez {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--isaret);
  margin: 0 0 0.6rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--isaret);
}

/* ---------- Künye sayfası ---------- */

.kunye-sayfa { max-width: 44rem; }

.kunye-sayfa .ust-baslik { margin-top: 2.5rem; color: var(--kul); }

.kunye-sayfa h1 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--murekkep);
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.kunye-sayfa p {
  max-width: 38rem;
  margin: 0 0 1rem;
}

.sayilar-baslik {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kul);
  margin: 2rem 0 0.6rem;
}

.sayilar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--kum);
  border: 1px solid var(--kum);
  margin: 0 0 0.5rem;
}

@media (min-width: 36rem) {
  .sayilar { grid-template-columns: repeat(4, 1fr); }
}

.sayilar div {
  background: var(--kagit);
  padding: 1.1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sayilar strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sayilar span {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kul);
}

.bolum-baslik {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ege);
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kum);
}

.bant-kunye {
  margin-left: auto;
  text-decoration: none;
  color: #b9c6d4;
  font-family: var(--sans);
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.bant-kunye:hover { color: var(--kagit); }

/* ---------- Olay sayfası ---------- */

.olay-sayfa { max-width: 44rem; }

.olay-sayfa h1 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--murekkep);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.olay-sayfa .ust-baslik { margin-top: 2.5rem; }

.alt-baslik {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kul);
  font-weight: 600;
  margin: 1.75rem 0 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kum);
}

/* Haber listesinin başlığı sayfadaki asıl ayrımı yapıyor. */
.alt-baslik.ayrim {
  border-top: 3px solid var(--murekkep);
  margin-top: 2.25rem;
  padding-top: 1.1rem;
}

.yayin-listesi { list-style: none; padding: 0; margin: 0; }

.yayin-listesi li {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--kum);
}

.yayin-bayrak { flex-shrink: 0; padding-top: 0.3rem; }

.yayin-listesi a { text-decoration: none; font-weight: 500; }
.yayin-listesi a:hover { text-decoration: underline; }

.yayin-kunye {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--kul);
  margin-top: 0.2rem;
}

.bos { color: var(--kul); padding: 2.5rem 0; }

footer {
  border-top: 3px solid var(--murekkep);
  margin-top: 2rem;
  padding: 2rem 1.5rem 3rem;
}

.alt-bilgi {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 46rem) {
  .alt-bilgi { grid-template-columns: 16rem 1fr; gap: 3rem; }
}

.alt-marka { display: flex; align-items: center; gap: 0.75rem; }
.alt-marka img { border-radius: 8px; }
.alt-marka strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
}
.alt-marka span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--kul);
}

.alt-metin p {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--kul);
  margin: 0 0 0.75rem;
  max-width: 38rem;
}

.alt-kunye {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--kul);
  padding-top: 0.75rem;
  border-top: 1px solid var(--kum);
  max-width: 38rem;
}

a:focus-visible,
.olay-baglanti:focus-visible {
  outline: 2px solid var(--ege);
  outline-offset: 3px;
}