/* ============================================================
   diyarbakr.com — polish.css
   Mevcut portal temasını KORUYAN ince iyileştirme katmanı.
   Renk paleti, yazı tipleri ve düzen aynen korunur; yalnızca
   mikro etkileşim, tipografi ve erişilebilirlik rötuşları içerir.
   Bundle CSS'inden SONRA yüklenmelidir.
   ============================================================ */

/* ---------- 1. Tipografi rötuşları ---------- */
.portal-root .sec-title,
.portal-root .portal-section-title,
.portal-root .portal-home-hero-headline,
.portal-root .portal-news-hero-headline,
.portal-root .dynamic-page-title {
  text-wrap: balance;
}
.portal-root .portal-home-hero-lead,
.portal-root .ev-desc {
  text-wrap: pretty;
}
.portal-root .portal-stat-value,
.portal-root .portal-today-stat-value,
.portal-root .ev-day {
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. Seçim rengi (tema turuncusu) ---------- */
.portal-root ::selection {
  background: #ffedd5; /* orange-100 */
  color: #7c2d12;      /* orange-900 */
}

/* ---------- 3. İnce, nötr kaydırma çubuğu ---------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #d6d3d1 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 999px;
  border: 2px solid #f4f4f3;
}
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 4. Sabit header'a cam efekti ---------- */
@supports (backdrop-filter: blur(1px)) {
  .portal-header {
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}

/* Sabit header altında çapa hedefleri gizlenmesin */
.portal-root section[id],
.portal-root .sec[id],
.portal-root [id^="bolum"],
.portal-root h2[id] {
  scroll-margin-top: 84px;
}

/* ---------- 5. Kartlarda daha akıcı hover eğrisi ---------- */
.portal-root .sec-place-card,
.portal-root .ev,
.portal-root .hero-post-card,
.portal-root .related-post-card,
.portal-card-hover {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 0.28s;
  will-change: transform;
}
.portal-root .sec-place-card:hover,
.portal-root .ev:hover,
.portal-root .hero-post-card:hover {
  transform: translateY(-3px);
}
.portal-root .sec-place-card__img img {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 0.7s;
}

/* ---------- 6. Katmanlı, yumuşak gölge sistemi ----------
   Hover'da üç katman: yakın temas + orta yayılım + geniş ambient.
   Turuncu tint (#ea580c) çok düşük opaklıkta korunur. */
.portal-root .sec-place-card:hover,
.portal-root .ev:hover,
.portal-root .hero-post-card:hover,
.portal-root .related-post-card:hover {
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.06),
    0 8px 24px rgba(28, 25, 23, 0.10),
    0 20px 48px #ea580c14;
}

/* ---------- 7. Buton ve pill basış geri bildirimi ---------- */
.portal-btn,
.portal-btn-outline,
.portal-root .filter-pill,
.portal-pill,
.portal-root .btn-view-all,
.portal-root .not-found-btn,
.portal-root .section-error-btn {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portal-btn:active,
.portal-btn-outline:active,
.portal-root .filter-pill:active,
.portal-pill:active,
.portal-root .btn-view-all:active,
.portal-root .not-found-btn:active {
  transform: scale(0.97);
}

/* Aktif filtre piline turuncu derinlik */
.portal-root .filter-pill.active {
  box-shadow: 0 4px 12px #ea580c30;
}

/* ---------- 8. Tutarlı, erişilebilir odak halkası ---------- */
.portal-root a:focus-visible,
.portal-root button:focus-visible,
.portal-root .filter-pill:focus-visible,
.portal-pill:focus-visible,
.portal-input:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
  border-radius: inherit;
}

/* ---------- 9. Hızlı menü mikro hareketi + turuncu vurgu ----------
   Bundle'daki hover (zemin: stone-50, ikon: stone-900) korunur;
   üzerine ince turuncu alt çizgi ve ikon tonu eklenir. */
.portal-quick-nav-icon {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s;
}
.portal-quick-nav-item {
  box-shadow: inset 0 0 0 transparent;
  transition-property: color, background-color, border-color, box-shadow,
    transform, translate, scale, opacity;
}
.portal-quick-nav-item:hover {
  box-shadow: inset 0 -2px 0 #ea580c8c;
}
.portal-quick-nav-item:hover .portal-quick-nav-icon {
  transform: translateY(-2px);
  color: #c2410c;
}
.portal-quick-nav-item:hover .portal-quick-nav-label {
  color: #c2410c;
}

/* ---------- 10. Panel ve dash kartlarına ince gradient zemin ---------- */
.portal-today-panel,
.portal-dash-card {
  background-image: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
  transition: border-color 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portal-today-panel:hover,
.portal-dash-card:hover {
  border-color: #d6d3d1; /* stone-300: hafif, nötr vurgu */
}
.portal-dash-card:hover {
  box-shadow: 0 1px 2px #1c191708, 0 8px 24px #1c19170a;
}

/* ---------- 11. Hero sahnesi: çerçeve, oklar, Ken Burns ---------- */
.portal-home-hero-stage,
.portal-news-hero-stage {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
              0 18px 44px rgba(28, 25, 23, 0.16);
}
.portal-home-hero-dot,
.portal-news-hero-progress-item {
  cursor: pointer;
}

/* Oklarda hover: büyüme + gölge.
   Konumlandırma 'translate' özelliğiyle yapıldığından 'scale'
   ayrı özellik olarak güvenle kullanılır, transform'a dokunulmaz. */
.portal-home-hero-arrow,
.portal-news-hero-arrow {
  transition-duration: 0.25s;
}
.portal-home-hero-arrow:hover,
.portal-news-hero-arrow:hover {
  scale: 1.08;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.portal-home-hero-arrow:active,
.portal-news-hero-arrow:active {
  scale: 1;
}

/* Ken Burns: aktif slayt 8 sn boyunca 1.02 → 1.06 büyür.
   Bundle'daki geçiş yalnızca opacity üzerinde olduğundan
   transform animasyonu opacity cross-fade'ini ETKİLEMEZ. */
@keyframes polish-ken-burns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.06); }
}
.portal-home-hero-stage-img.is-active {
  animation: polish-ken-burns 8s ease-out forwards;
}

/* ---------- 12. Haber rayında okunabilirlik ---------- */
.portal-news-hero-rail-item {
  transition: background-color 0.2s, border-color 0.2s, padding-left 0.2s;
}
.portal-news-hero-rail-title {
  text-wrap: pretty;
}

/* ---------- 13. Görsel yüklenirken zemin tonu + yumuşak fade-in ---------- */
.portal-root .sec-place-card__img,
.portal-news-hero-featured-media,
.portal-news-hero-rail-thumb {
  background-color: #e7e5e4;
}

/* Kart görselleri ilk boyamada yumuşakça belirir.
   Slider görselleri HARİÇ tutuldu (opacity geçişleri bundle'da). */
@keyframes polish-img-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.portal-root .sec-place-card__img img,
.portal-news-hero-rail-thumb img,
.portal-news-hero-featured-media img,
.portal-root .ev img,
.portal-root .hero-post-card img,
.portal-root .related-post-card img {
  animation: polish-img-fade 0.5s ease-out backwards;
}

/* ---------- 14. Footer linklerinde yumuşak geçiş ---------- */
footer a,
footer button {
  transition: background-color 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.25s,
              border-color 0.25s,
              transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
footer a:hover {
  transform: translateY(-1px);
}

/* ---------- 15. Mobil dokunma hedefleri ----------
   Görünümü değiştirmeden tıklanabilir alanı dengeler:
   içerik dikeyde ortalanır, min-height ile alan büyür. */
@media (max-width: 767px) {
  .portal-root .filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .portal-quick-nav-item {
    min-height: 44px;
    justify-content: center;
  }
  footer a {
    min-height: 44px;
  }
}

/* ---------- 16. Hareket azaltma tercihine saygı (EN SONDA KALMALI) ---------- */
@media (prefers-reduced-motion: reduce) {
  .portal-root *,
  .portal-root *::before,
  .portal-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .portal-home-hero-stage-img.is-active {
    animation: none !important;
    transform: scale(1.02); /* bundle'daki statik değer korunur */
  }
}

/* ============================================================
   v3 — GÖRÜNÜR PROFESYONEL KATMAN (10 Haziran 2026)
   Tema kimliği (renkler/fontlar/düzen) korunur; dinlenme
   hâlindeki görünümü belirgin şekilde rafine eder.
   ============================================================ */

/* 17. Zemin: üstte hafif sıcak ton, aşağıda mevcut gri */
.portal-root {
  background: linear-gradient(180deg, #faf9f7 0%, #f4f4f3 360px);
}

/* 18. Bölüm başlıkları: marka turuncusu kimliği */
.portal-root .overline,
.portal-overline {
  color: #c2410c;
  letter-spacing: .18em;
}
.portal-root .sec-title-divider {
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ea580c, #fdba74);
}

/* 19. Kartlar dinlenme hâlinde daha rafine */
.portal-root .sec-place-card,
.portal-root .ev,
.portal-root .hero-post-card,
.portal-root .related-post-card {
  border-radius: 1.25rem;
  border-color: #eceae7;
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 10px 28px -18px rgba(28,25,23,.12);
}
.portal-card,
.portal-dash-card,
.portal-today-panel,
.portal-quick-nav,
.portal-announcement {
  border-radius: 1.1rem;
}

/* 20. Hızlı menü ikonları: yumuşak turuncu rozetler */
.portal-quick-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem;
  border-radius: .85rem;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  color: #c2410c;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .2s, color .2s;
}
.portal-quick-nav-item:hover .portal-quick-nav-icon {
  background: #ffedd5;
  color: #9a3412;
  transform: translateY(-2px);
}

/* 21. Birincil butonlar: derinlik + hover kalkışı */
.portal-btn {
  background-image: linear-gradient(180deg, #292524, #1c1917);
  box-shadow: 0 1px 2px rgba(28,25,23,.25), 0 6px 16px -8px rgba(28,25,23,.35);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s;
}
.portal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28,25,23,.25), 0 10px 24px -8px rgba(28,25,23,.4);
}

/* 22. Aktif filtre: marka turuncusu gradyanı */
.portal-root .filter-pill.active {
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: transparent;
}

/* 23. Hero sahnesi: daha cömert köşe yumuşatma */
.portal-home-hero-stage,
.portal-news-hero-stage,
.portal-news-hero-featured {
  border-radius: 1.25rem;
}

/* 24. Bugün paneli ve duyurular: marka vurgu şeridi */
.portal-today-panel {
  border-top: 3px solid #ea580c;
}
.portal-announcement {
  border-left: 3px solid #ea580c;
}

/* 25. Koyu footer'a ince marka şeridi */
.portal-root footer {
  border-top: 2px solid #ea580c;
}
.portal-root footer a {
  transition: color .2s, transform .2s;
}

/* 26. Rozetler: hafif derinlik */
.portal-root .sec-place-card__badge {
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.portal-root .sec-place-card__rating {
  box-shadow: 0 2px 10px rgba(234,88,12,.45);
}

/* ============================================================
   v4 — NAVBAR REDESIGN (10 Haziran 2026)
   Göze çarpan ama zarif: marka şeridi, cam zemin, büyük harfli
   nav linkleri + animasyonlu turuncu alt çizgi. Logo koyu yazılı
   PNG olduğundan zemin AÇIK kalır. Mobil menüde display/position
   değiştirilmez; yalnızca renk/tipografi.
   ============================================================ */

/* 27. Header tepesine 3px turuncu→amber marka şeridi */
.portal-header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #ea580c, #f59e0b, #fdba74);
}

/* 28. Header zemini: beyaz cam + belirgin ama yumuşak alt gölge */
.portal-header {
  box-shadow: 0 1px 0 #e7e5e4, 0 8px 32px rgba(28, 25, 23, 0.08);
}
@supports (backdrop-filter: blur(1px)) {
  .portal-header {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
  }
}

/* 29. Nav linkleri: büyük harf, sıkı tipografi, animasyonlu çizgi.
   Bundle: 13px / weight 500 / stone-600. Link padding-inline .625rem
   olduğundan çizgi içerik genişliğine hizalanır. */
.portal-nav-link {
  position: relative;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #57534e;
}
.portal-nav-link::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: auto;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 999px;
  background: #ea580c;
  transition: width 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portal-nav-link:hover {
  color: #1c1917;
}
.portal-nav-link:hover::after {
  width: calc(100% - 1.25rem);
}

/* 30. Aktif link: turuncu kimlik + kalıcı çizgi
   (bundle'daki stone-900 ::after çubuğunun üzerine yazar) */
.portal-nav-link-active {
  color: #c2410c;
}
.portal-nav-link-active::after {
  width: calc(100% - 1.25rem);
  left: 0.625rem;
  right: auto;
  height: 2px;
  background: #ea580c;
}
.portal-nav-link-active:hover {
  color: #9a3412;
}

/* 31. Logo bir kademe büyür (bundle: 3rem → 3.25rem@40rem → 3.5rem@64rem;
   bar yüksekliği 4.25rem/4.75rem olduğundan taşma olmaz) */
.portal-header .portal-logo {
  height: 3.25rem;
}
@media (min-width: 40rem) {
  .portal-header .portal-logo { height: 3.5rem; }
}
@media (min-width: 64rem) {
  .portal-header .portal-logo { height: 3.75rem; }
}

/* 32. Arama kutusu: focus'ta turuncu halka (yalnızca renk, layout sabit) */
.portal-input:focus {
  border-color: #fdba74;
  --tw-ring-color: #ea580c33;
}

/* 33. Telefon butonu: turuncu kenarlıklı belirgin pill */
.portal-btn-call {
  border-radius: 999px;
  border-color: #fdba74;
  color: #c2410c;
  font-weight: 700;
}
.portal-btn-call:hover {
  border-color: #fb923c;
  background-color: #fff7ed;
  color: #9a3412;
}

/* ============================================================
   v4 — DOLULUK (10 Haziran 2026)
   Boş reklam alanları kapanır, bölüm ritmi sıkılaşır, quick-nav
   ve footer daha fazla mevcudiyet kazanır.
   ============================================================ */

/* 34. Boş reklam rayları yer kaplamasın (doluysa etkisiz) */
.portal-rail:empty,
.hero-ad:empty,
.portal-mobile-hero-ad:empty {
  display: none;
}

/* 35. Bölüm ritmi: 4rem/5rem → 3.25rem/4rem; sayfa daha dolu akar */
.portal-root .sec {
  padding-block: 3.25rem 4rem;
}

/* 36. Bölüm başlığında nefes */
.portal-root .sec-title {
  margin-bottom: 0.5rem;
}

/* 37. Quick-nav: bir tık daha derin gölge + daha okunur etiket */
.portal-quick-nav {
  box-shadow: 0 2px 8px #1c19170a, 0 20px 56px #1c191718, inset 0 1px #ffffffe6;
}
.portal-quick-nav-label {
  font-weight: 600;
  font-size: 11px;
}

/* 38. Kart gridlerinde görsel ağırlık */
.portal-root .sec-grid {
  gap: 1.1rem;
}

/* 39. Tarih bölümüne çok ince Diyarbakır kemer silüeti
   (yalnızca .timeline içeren tek bölüm; opaklık .05, zemin alt kenarı) */
.portal-root .sec:has(.timeline) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M8 64 V30 a22 22 0 0 1 44 0 V64 M68 64 V30 a22 22 0 0 1 44 0 V64' fill='none' stroke='%239a3412' stroke-width='2.5' opacity='.05'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 120px 64px;
}

/* 40. Footer: daha cömert dikey alan + linklerde sağa kayma */
.portal-root footer {
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}
.portal-root footer a:hover {
  transform: translateX(2px);
}