/* ============================================================================
   diyarbakr.com — KART SİSTEMİ YENİDEN TASARIM (redesign-cards.css)
   ----------------------------------------------------------------------------
   Dergi/editoryal seviyesinde kart dili. polish.css'ten SONRA yüklenir;
   bundle (index--MSd8cSU.css) ve polish.css kurallarını eşit özgüllükle
   (çoğunlukla `.portal-root .x`) kaynak sırasıyla ezer.

   Ortak dil:
   - Vurgu: #ea580c / koyu #c2410c / açık #fff7ed #ffedd5 #fdba74
   - Metin: #1c1917 (koyu), #57534e (orta), #78716c (soluk)
   - Köşe: kart 1.25rem, chip 999px
   - Gölge (dinlenme): 0 1px 2px rgba(28,25,23,.05), 0 12px 32px -16px rgba(28,25,23,.14)
   - Gölge (hover): + 0 24px 56px -20px rgba(234,88,12,.18) ve translateY(-4px)
   - Easing: cubic-bezier(.22,.61,.36,1), süreler .25–.35s
   - Başlık: "Source Serif 4" / Gövde: Plus Jakarta Sans

   Bölümler:
     1. Mekan kartları         (.sec-place-card)
     2. Etkinlik satırları     (.ev / .ev-date / .ev-tag)
     3. Blog kartları          (.hero-post-card / .related-post-card)
     4. Mini mekan kartları    (.portal-place-mini)
     5. Tarih zaman çizelgesi  (.timeline / .tl-*)
     6. Haber rayı             (.portal-news-hero-rail-item)
     7. Filtre pilleri         (.filter-pill — yalnız rafine)
     8. prefers-reduced-motion
   ========================================================================== */


/* ============================================================================
   1. MEKAN KARTLARI — .sec-place-card
   Dergi kapağı yaklaşımı: 4/3 büyük görsel, alttan güçlü scrim, görselin
   üzerine binen beyaz yuvarlatılmış gövde paneli, cam efektli turuncu rozet,
   serif başlık, ikon hizalı tek satır meta.
   ========================================================================== */

.portal-root .sec-place-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eceae7;
  border-radius: 1.25rem;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 12px 32px -16px rgba(28, 25, 23, .14);
  transition:
    transform .3s cubic-bezier(.22, .61, .36, 1),
    box-shadow .3s cubic-bezier(.22, .61, .36, 1),
    border-color .3s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.portal-root .sec-place-card:hover {
  transform: translateY(-4px);
  border-color: #fdba74;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 12px 32px -16px rgba(28, 25, 23, .14),
    0 24px 56px -20px rgba(234, 88, 12, .18);
}

/* Görsel: büyük 4/3 sahne */
.portal-root .sec-place-card__img {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background-color: #e7e5e4;
}

.portal-root .sec-place-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}

.portal-root .sec-place-card:hover .sec-place-card__img img {
  transform: scale(1.06);
}

/* Alttan güçlü editoryal scrim — beyaz panel bindirmesinin zemini */
.portal-root .sec-place-card__img:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 10, 9, 0) 40%,
    rgba(12, 10, 9, .72) 100%
  );
}

/* Kategori rozeti: cam efektli turuncu chip (sol üst) */
.portal-root .sec-place-card__badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(234, 88, 12, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 2px 10px rgba(194, 65, 12, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Puan rozeti: kimliği koru, derinliği dengele */
.portal-root .sec-place-card__rating {
  top: .75rem;
  right: .75rem;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(234, 88, 12, .4);
}

/* Gövde: görselin üzerine binen beyaz yuvarlatılmış panel */
.portal-root .sec-place-card__body {
  position: relative;
  z-index: 1;
  margin-top: -1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.05rem 1.125rem 1.125rem;
}

/* Başlık: serif, dergi tonu */
.portal-root .sec-place-card__title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #1c1917;
}

/* Meta: ikon hizalı, tek satır ellipsis, soluk */
.portal-root .sec-place-card__meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: #78716c;
}

.portal-root .sec-place-card__meta > span {
  min-width: 0; /* flex satırında ellipsis için gerekli */
}

.portal-root .sec-place-card__meta .meta-line-1,
.portal-root .sec-place-card__meta .meta-line-2 {
  display: block;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Mobil kontrol — mekan kartları */
@media (max-width: 640px) {
  .portal-root .sec-place-card__body {
    margin-top: -1rem;
    border-radius: 1rem 1rem 0 0;
    padding: .9rem 1rem 1rem;
  }
  .portal-root .sec-place-card__title {
    font-size: 1.05rem;
  }
  .portal-root .sec-place-card__badge {
    top: .6rem;
    left: .6rem;
  }
  .portal-root .sec-place-card__rating {
    top: .6rem;
    right: .6rem;
  }
}


/* ============================================================================
   2. ETKİNLİK SATIRLARI — .ev
   Tarih kutusu: turuncu gradyan takvim yaprağı (üstte ay bandı, altta beyaz
   rakam). Hover'da sol kenarda 3px turuncu çizgi belirir. .ev-tag chip olur.
   ========================================================================== */

.portal-root .ev {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eceae7;
  border-radius: 1.25rem;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 12px 32px -16px rgba(28, 25, 23, .14);
  transition:
    transform .3s cubic-bezier(.22, .61, .36, 1),
    box-shadow .3s cubic-bezier(.22, .61, .36, 1),
    border-color .3s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* Sol kenar vurgu çizgisi (bundle'daki :before{display:none} ezilir) */
.portal-root .ev:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f97316, #ea580c 55%, #c2410c);
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: center;
  transition:
    opacity .3s cubic-bezier(.22, .61, .36, 1),
    transform .3s cubic-bezier(.22, .61, .36, 1);
}

.portal-root .ev:hover {
  transform: translateY(-3px);
  border-color: #fdba74;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 12px 32px -16px rgba(28, 25, 23, .14),
    0 24px 56px -20px rgba(234, 88, 12, .18);
}

.portal-root .ev:hover:before {
  opacity: 1;
  transform: scaleY(1);
}

/* Takvim yaprağı */
.portal-root .ev-date {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  text-align: center;
  padding: 0;
  border-right: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #f97316, #ea580c 55%, #c2410c);
  border-radius: .9rem;
  box-shadow:
    0 8px 18px -8px rgba(234, 88, 12, .55),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Üstte küçük ay bandı (DOM'da gün önce gelir; order ile üste alınır) */
.portal-root .ev-month {
  order: -1;
  margin-top: 0;
  padding: .3rem .25rem;
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

/* Beyaz rakam */
.portal-root .ev-day {
  padding: .45rem .25rem .55rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 40, 0, .22);
  font-variant-numeric: tabular-nums;
}

/* Etiket: chip */
.portal-root .ev-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: .45rem;
  padding: .2rem .6rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid rgba(234, 88, 12, .16);
  border-radius: 999px;
}

.portal-root .ev-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1c1917;
  line-height: 1.35;
}

/* Mobil kontrol — etkinlik satırları (bundle ≤640px'te grid 4rem 1fr yapar) */
@media (max-width: 640px) {
  .portal-root .ev-date {
    border-radius: .75rem;
  }
  .portal-root .ev-day {
    font-size: 1.35rem;
    padding: .4rem .2rem .5rem;
  }
  .portal-root .ev-month {
    font-size: .55rem;
    letter-spacing: .1em;
  }
  .portal-root .ev-name {
    font-size: 1rem;
  }
}


/* ============================================================================
   3. BLOG KARTLARI — .hero-post-card / .related-post-card
   Üst kenarda ince turuncu gradyan şerit, tarih chip'i, serif başlık,
   "devamını oku" oku hover'da kayar. related-post-* bundle'da stilsizdi;
   burada tam takım tanımlanır.
   ========================================================================== */

.portal-root .hero-post-card,
.portal-root .related-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eceae7;
  border-radius: 1.25rem;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 12px 32px -16px rgba(28, 25, 23, .14);
  transition:
    transform .3s cubic-bezier(.22, .61, .36, 1),
    box-shadow .3s cubic-bezier(.22, .61, .36, 1),
    border-color .3s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.portal-root .hero-post-card:hover,
.portal-root .related-post-card:hover {
  transform: translateY(-4px);
  border-color: #fdba74;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 12px 32px -16px rgba(28, 25, 23, .14),
    0 24px 56px -20px rgba(234, 88, 12, .18);
}

/* Üst kenarda ince turuncu gradyan şerit
   (bundle'daki .hero-post-card:before{display:none} ezilir) */
.portal-root .hero-post-card:before,
.portal-root .related-post-card:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #fdba74, #ea580c 45%, #c2410c);
}

/* Kapak görselleri */
.portal-root .hero-post-img,
.portal-root .related-post-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #e7e5e4;
}

.portal-root .hero-post-img--placeholder {
  display: none; /* kapaksız yazıda boş blok bırakma */
}

.portal-root .hero-post-img img,
.portal-root .related-post-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}

.portal-root .hero-post-card:hover .hero-post-img img,
.portal-root .related-post-card:hover .related-post-img img {
  transform: scale(1.05);
}

/* Gövdeler */
.portal-root .hero-post-body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.2rem 1.35rem 1.35rem;
}

.portal-root .related-post-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.05rem 1.2rem 1.2rem;
}

/* Tarih: chip */
.portal-root .hero-post-date,
.portal-root .related-post-date {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: .22rem .65rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
}

/* Başlıklar: serif */
.portal-root .hero-post-heading {
  margin-top: .25rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #1c1917;
}

.portal-root .related-post-title {
  margin-top: .2rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: #1c1917;
}

.portal-root .hero-post-summary,
.portal-root .related-post-summary {
  font-size: .875rem;
  line-height: 1.6;
  color: #78716c;
}

/* "Devamını oku" — ok hover'da kayar
   (related-post-card içinde de .hero-post-read kullanılır) */
.portal-root .hero-post-read {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ea580c;
}

.portal-root .hero-post-read:after {
  content: "→";
  display: inline-block;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.portal-root .hero-post-card:hover .hero-post-read:after,
.portal-root .related-post-card:hover .hero-post-read:after {
  transform: translateX(5px);
}

/* Mobil kontrol — blog kartları */
@media (max-width: 640px) {
  .portal-root .hero-post-body {
    padding: 1rem 1.1rem 1.15rem;
  }
  .portal-root .related-post-body {
    padding: .95rem 1.05rem 1.1rem;
  }
  .portal-root .hero-post-heading {
    font-size: 1.15rem;
  }
  .portal-root .related-post-title {
    font-size: 1rem;
  }
}


/* ============================================================================
   4. MİNİ MEKAN KARTLARI — .portal-place-mini
   Bundle'da seçiciler öneksiz; aynı formda yazılır (dosya sırası kazanır).
   Küçük ama rafine: yumuşak köşeli thumb, kategori micro-chip,
   hover'da #fff7ed zemin + görsel nefesi.
   ========================================================================== */

.portal-place-mini {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #eceae7;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  transition:
    transform .28s cubic-bezier(.22, .61, .36, 1),
    box-shadow .28s cubic-bezier(.22, .61, .36, 1),
    border-color .28s cubic-bezier(.22, .61, .36, 1),
    background-color .28s cubic-bezier(.22, .61, .36, 1);
}

.portal-place-mini:hover {
  transform: translateY(-2px);
  border-color: #fdba74;
  background-color: #fff7ed;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, .05),
    0 14px 32px -18px rgba(234, 88, 12, .22);
}

.portal-place-mini img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.portal-place-mini:hover img {
  transform: scale(1.06);
}

.portal-place-mini-body {
  padding: .7rem .8rem .85rem;
  border-top: 1px solid #f5f5f4;
}

.portal-place-mini-title {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1c1917;
}

/* Kategori: micro-chip */
.portal-place-mini-cat {
  display: inline-flex;
  align-items: center;
  margin-top: .45rem;
  padding: .14rem .5rem;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c2410c;
  background: #ffedd5;
  border-radius: 999px;
}

/* Mobil kontrol — mini kartlar */
@media (max-width: 640px) {
  .portal-place-mini-body {
    padding: .6rem .7rem .75rem;
  }
  .portal-place-mini-title {
    font-size: .8125rem;
  }
}


/* ============================================================================
   5. TARİH ZAMAN ÇİZELGESİ — .timeline / .tl-item / .tl-dot / .tl-era
   Çizgi turuncu gradyan, dot içi beyaz dışı turuncu halka (krem hâle),
   era etiketi chip, başlık serif.
   ========================================================================== */

.portal-root .timeline:before {
  width: 3px;
  left: .32rem;
  background: linear-gradient(
    180deg,
    #fdba74,
    #f97316 35%,
    #ea580c 70%,
    #c2410c
  );
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(234, 88, 12, .22);
}

.portal-root .tl-dot {
  width: .85rem;
  height: .85rem;
  left: -1.5rem;
  top: .3rem;
  background: #fff;
  border: 3px solid #ea580c;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px #ffedd5,
    0 2px 8px rgba(234, 88, 12, .3);
}

/* Era: chip */
.portal-root .tl-era {
  display: inline-flex;
  align-items: center;
  margin-bottom: .55rem;
  padding: .22rem .7rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid rgba(234, 88, 12, .16);
  border-radius: 999px;
}

/* Başlık: serif */
.portal-root .tl-title {
  margin-bottom: .5rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #1c1917;
}

.portal-root .tl-body {
  font-size: .9375rem;
  line-height: 1.7;
  color: #57534e;
  max-width: 40rem;
}

/* Mobil kontrol — zaman çizelgesi */
@media (max-width: 640px) {
  .portal-root .tl-item {
    padding-bottom: 2rem;
  }
  .portal-root .tl-title {
    font-size: 1.1rem;
  }
  .portal-root .tl-dot {
    box-shadow:
      0 0 0 4px #ffedd5,
      0 2px 6px rgba(234, 88, 12, .3);
  }
}


/* ============================================================================
   6. HABER RAYI — .portal-news-hero-rail-item
   Kırmızı kimlik (is-active) haber bölümüne ait — DOKUNULMAZ.
   Yalnız rafine: thumb köşeleri + hover'da hafif scale.
   Bundle seçicileri öneksiz; aynı formda yazılır.
   ========================================================================== */

.portal-news-hero-rail-thumb {
  border-radius: .45rem;
}

.portal-news-hero-rail-thumb img {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.portal-news-hero-rail-item:hover .portal-news-hero-rail-thumb img {
  transform: scale(1.06);
}

/* Mobil kontrol — haber rayı (dokunmatikte scale gereksiz, kapat) */
@media (max-width: 640px) {
  .portal-news-hero-rail-item:hover .portal-news-hero-rail-thumb img {
    transform: none;
  }
}


/* ============================================================================
   7. FİLTRE PİLLERİ — .filter-pill
   Aktif gradyan polish.css v4'te tanımlı — EZİLMEZ.
   Yalnız boyut/padding dengesi rafine edilir.
   ========================================================================== */

.portal-root .filter-pill {
  padding-inline: 1.05rem;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Mobil kontrol — pil dizisi nefes payı */
@media (max-width: 640px) {
  .portal-root .filter-pill {
    padding-inline: .9rem;
    font-size: .78125rem;
  }
}


/* ============================================================================
   8. ERİŞİLEBİLİRLİK — prefers-reduced-motion
   Transform animasyonları kapatılır; renk/gölge geçişleri korunur.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .portal-root .sec-place-card,
  .portal-root .sec-place-card__img img,
  .portal-root .ev,
  .portal-root .ev:before,
  .portal-root .hero-post-card,
  .portal-root .related-post-card,
  .portal-root .hero-post-img img,
  .portal-root .related-post-img img,
  .portal-root .hero-post-read:after,
  .portal-place-mini,
  .portal-place-mini img,
  .portal-news-hero-rail-thumb img {
    transition-property: color, background-color, border-color, box-shadow, opacity;
    will-change: auto;
  }

  .portal-root .sec-place-card:hover,
  .portal-root .ev:hover,
  .portal-root .hero-post-card:hover,
  .portal-root .related-post-card:hover,
  .portal-place-mini:hover {
    transform: none;
  }

  .portal-root .sec-place-card:hover .sec-place-card__img img,
  .portal-root .hero-post-card:hover .hero-post-img img,
  .portal-root .related-post-card:hover .related-post-img img,
  .portal-place-mini:hover img,
  .portal-news-hero-rail-item:hover .portal-news-hero-rail-thumb img,
  .portal-root .hero-post-card:hover .hero-post-read:after,
  .portal-root .related-post-card:hover .hero-post-read:after {
    transform: none;
  }

  .portal-root .ev:hover:before {
    transform: scaleY(1); /* çizgi animasyonsuz, anında görünür */
  }
}