/*
 * Beste Plaatjes — "Modern" ön yüz (lib/tema.ts). Eski tema CSS'i bu tasarımda
 * yüklenmez; buradaki kurallar hem modern kabuğu (m-*) hem de iki tasarımın ortak
 * bileşenlerini (galeri, paylaşım, sayfalama, kenar çubuğu) biçimler.
 *
 * Kimlik: mavi başlık + alan adı logosu (beste-plaatjes.nl, resimlerdeki filigranla
 * aynı), krem sayfa üzerinde beyaz paneller. Renk resimlerden ve paylaşım
 * düğmelerinden (ağların kendi renkleri) gelir; arayüzde tek vurgu marka mavisi.
 * Harici yazı tipi yok: sistem yazı tipi (hız).
 *
 * Ziyaretçi çoğunlukla 30–70 yaş, telefondan WhatsApp'a resim gönderiyor: büyük yazı
 * (gövde 18px), sıcak nötr renkler (Tailwind stone; soğuk mavi-gri değil), yazılı
 * büyük düğmeler, açılışta kendiliğinden hareket yok (yalnız dokunma/üzerine gelme).
 *
 * Ölçekler sabittir; yeni değer uydurma, bunlardan seç:
 *   aralık  4 8 12 16 20 24 32 48 64
 *   yazı    13 14 16 17 18 20 24 30
 *   kalınlık 400 (metin) · 600 (vurgu) · 700 (başlık) · 800 (logo)
 *   köşe    8 (küçük) · 12 (panel, resim)
 *   z-index 10 (etiket) · 40 (başlık) · 60 (atlama bağlantısı)
 * --vurgu: panelin bağlantı rengi (layout satır içi verir); içerikteki bağlantılar.
 */

:root {
  --merk: #1d4ed8;
  --merk-koyu: #1e3a8a;
  --merk-acik: #eff6ff;
  --vurgu: #1d4ed8;

  /* Sıcak nötrler (Tailwind stone). */
  --gri-50: #fafaf9;
  --gri-100: #f5f5f4;
  --gri-200: #e7e5e4;
  --gri-300: #d6d3d1;
  --gri-400: #a8a29e;
  --gri-500: #78716c;
  --gri-600: #57534e;
  --gri-700: #44403c;
  --gri-900: #1c1917;
  --krem: #f7f2ea;
  --sicak: #f59e0b;

  --metin: var(--gri-900);
  --metin-2: var(--gri-600);
  --metin-3: var(--gri-500);
  --zemin: var(--krem);
  --panel: #fff;
  --cizgi: var(--gri-200);

  --r: 12px;
  --r-kucuk: 8px;
  --golge: 0 1px 3px 0 rgb(68 64 60 / 0.08), 0 1px 2px -1px rgb(68 64 60 / 0.08);

  --kap: 1200px;
  --kenar: 12px;
  --yazi: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 640px) {
  :root {
    --kenar: 24px;
  }
}

/* ---------------------------------------------------------------- temel */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body.tema-modern {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 18px/1.6 var(--yazi);
  -webkit-font-smoothing: antialiased;
}

/* Sıfırlamalar :where() ile sıfır özgüllükte: bileşen kuralları (tek sınıf) onları ezebilsin. */
:where(.tema-modern) img {
  max-width: 100%;
  height: auto;
}

:where(.tema-modern) a {
  color: var(--vurgu);
  text-decoration: none;
}

:where(.tema-modern) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tema-modern :focus-visible {
  outline: 2px solid var(--merk);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(.tema-modern) :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--metin);
  line-height: 1.25;
  text-wrap: balance;
}

:where(.tema-modern) p {
  margin: 0;
  text-wrap: pretty;
}

.tema-modern [hidden] {
  display: none !important;
}

.m-gizli,
.tema-modern .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.m-atla {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 8px 16px;
  border-radius: var(--r-kucuk);
  background: #fff;
  color: var(--metin) !important;
  font-weight: 600;
  transform: translateY(-200%);
}

.m-atla:focus {
  transform: none;
}

/* ---------------------------------------------------------------- başlık */

/* Mavi bant: logo + arama; altında beyaz menü şeridi. Yapışkan değil (mobilde yer kaplamasın). */
.m-ust {
  background: var(--merk);
  color: #fff;
}

.m-ust-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  max-width: var(--kap);
  margin: 0 auto;
  padding: 12px var(--kenar);
}

.m-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: auto;
  color: #fff !important;
  text-decoration: none !important;
}

.m-logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

.m-isaret {
  flex: none;
  color: var(--merk);
}

.m-logo-ad {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.m-logo-ad span {
  font-weight: 400;
  opacity: 0.8;
}

.m-ara {
  display: flex;
  flex: 1 1 100%;
  order: 3;
  height: 44px;
  overflow: hidden;
  border-radius: var(--r-kucuk);
  background: #fff;
}

.m-ara input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--metin);
  font: inherit;
  font-size: 16px;
}

.m-ara input:focus-visible {
  outline: none;
}

.m-ara:focus-within {
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.4);
}

.m-ara input::placeholder {
  color: var(--metin-3);
}

.m-ara button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 0;
  background: transparent;
  color: var(--merk);
  cursor: pointer;
}

@media (min-width: 768px) {
  .m-ara {
    flex: 0 1 400px;
    order: 0;
  }
}

.m-menu {
  border-bottom: 1px solid var(--cizgi);
  background: #fff;
}

.m-menu ul {
  display: flex;
  gap: 4px;
  max-width: var(--kap);
  margin: 0 auto;
  padding: 0 var(--kenar);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.m-menu ul::-webkit-scrollbar {
  display: none;
}

.m-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--metin-2);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.m-menu li:first-child a {
  margin-left: -12px;
}

.m-menu a:hover {
  color: var(--metin);
  text-decoration: none;
}

.m-menu a[aria-current='page'] {
  border-bottom-color: var(--merk);
  color: var(--merk);
}

/*
 * Telefonda menü (bestekrabbels.nl gibi): mavi bantta yalnız logo ve ☰. Düğme
 * (menu-dugmesi.tsx) başlığa data-menu-acik koyar; menü alt alta, arama en altta açılır
 * ve sayfayı aşağı iter (üstüne binmez). Animasyon yok. .m-ust-ic display: contents
 * olur ki arama formu DOM'da logonun yanında kalırken menünün altına dizilebilsin.
 */
.m-menu-dugmesi {
  display: none;
}

/*
 * Başlığa dışarıdan sokulan öğeler (AdSense otomatik reklamı, eklenti kodları) başlık
 * satırını bölmesin: logo / arama / ☰ / menü dışındaki her çocuk satırın SONUNA, tam
 * genişlikte düşer. Telefonda .m-ust-ic display: contents olduğu için yerleşim .m-ust
 * düzeyinde; orada da aynı kural. (PageSpeed film şeridinde reklam logo ile ☰ arasına
 * giriyordu, 2026-10-01.)
 */
.m-ust-ic > :not(.m-logo, .m-ara, .m-menu-dugmesi),
.m-ust > :not(.m-ust-ic, .m-menu) {
  flex: 1 1 100%;
  order: 20;
  max-width: 100%;
}

@media (max-width: 767px) {
  .m-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .m-ust-ic {
    display: contents;
  }

  .m-logo {
    order: 0;
    min-height: 56px;
    padding-left: var(--kenar);
  }

  .m-menu-dugmesi {
    display: inline-flex;
    order: 1;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: calc(var(--kenar) - 10px);
    padding: 0;
    border: 0;
    border-radius: var(--r-kucuk);
    background: none;
    color: #fff;
    cursor: pointer;
  }

  .m-menu-dugmesi:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  .m-ust:not([data-menu-acik]) .m-menu,
  .m-ust:not([data-menu-acik]) .m-ara {
    display: none;
  }

  .m-menu {
    flex: 1 1 100%;
    order: 2;
    border-top: 1px solid rgb(255 255 255 / 0.2);
    border-bottom: 0;
    background: var(--merk);
  }

  .m-menu ul {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .m-menu li:first-child a {
    margin-left: 0;
  }

  .m-menu a,
  .m-menu a:hover {
    display: flex;
    min-height: 56px;
    padding: 0 var(--kenar);
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
  }

  .m-menu a[aria-current='page'] {
    border-bottom-color: rgb(255 255 255 / 0.2);
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .m-ara {
    flex: 1 1 100%;
    order: 3;
    margin: 16px var(--kenar);
  }
}

/* ---------------------------------------------------------------- yerleşim */

.m-kap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: var(--kap);
  margin: 0 auto;
  padding: 16px var(--kenar) 48px;
}

.m-ana {
  min-width: 0;
}

@media (min-width: 1024px) {
  .m-kap {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    padding-top: 24px;
  }
}

/* Kenar çubuğunda gösterilecek bileşen yoksa (kategoriler sayfası) içerik tam genişlik. */
.m-kap:has(> .m-yan .sidebar:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.m-yan:has(.sidebar:empty) {
  display: none;
}

/* Beyaz panel: sayfa çerçevesi, ana sayfa blokları, kenar çubuğu bileşenleri. */
.m-cerceve,
.m-blok,
.m-yan .widget {
  padding: 16px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--golge);
}

@media (min-width: 640px) {
  .m-cerceve,
  .m-blok {
    padding: 24px;
  }
}

.m-sayfa-baslik {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .m-sayfa-baslik {
    font-size: 30px;
  }
}

.m-icerik > * + * {
  margin-top: 24px;
}

.m-icerik h2 {
  font-size: 20px;
  font-weight: 700;
}

.m-icerik h3 {
  font-size: 18px;
  font-weight: 600;
}

.m-icerik .intro,
.m-icerik .outro,
.m-icerik .outro-text {
  max-width: 42em;
  color: var(--metin-2);
}

.m-icerik .intro p + p,
.m-icerik .outro p + p {
  margin-top: 12px;
}

.m-icerik ul:not([class]),
.m-icerik ol:not([class]) {
  padding-left: 24px;
}

/* ---------------------------------------------------------------- ana sayfa */

/* Tek beyaz kart (bestekrabbels gibi): karşılama, kutular, büyük resimler, bayramlar. */
.m-ana-sayfa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 640px) {
  .m-ana-sayfa {
    gap: 40px;
  }
}

.m-welkom h1 {
  font-size: 24px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .m-welkom h1 {
    font-size: 30px;
  }
}

.m-datum {
  margin-bottom: 4px;
  color: var(--merk);
  font-size: 16px;
  font-weight: 600;
}

.m-giris {
  max-width: 42em;
  margin-top: 8px;
  color: var(--metin-2);
}

.m-blok .m-giris:first-child {
  margin-top: 0;
}

.m-blok-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.m-blok-kop h2 {
  font-size: 20px;
  font-weight: 700;
}

.m-blok-kop a {
  color: var(--merk);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* Selam başlığı: "Goedenavond!" kalın, soru ("Wat wil je vanavond sturen?") yumuşak. */
.m-blok-kop h2 span {
  color: var(--metin-2);
  font-weight: 400;
}

/* Bugünün kutusu: hareketsiz, ince sıcak çerçeve (resim ile çerçeve arasında beyaz boşluk). */
.m-tegel-vandaag .m-tegel-resim {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--sicak);
}

/* "Zo werkt het": üç numaralı adım, krem zeminli sakin bir kutu. */
.m-uitleg {
  padding: 20px;
  border-radius: var(--r);
  background: var(--krem);
}

.m-uitleg h2 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
}

.m-uitleg ol {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}

@media (min-width: 768px) {
  .m-uitleg ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.m-uitleg li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  counter-increment: stap;
}

.m-uitleg li::before {
  content: counter(stap);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--merk);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.m-uitleg strong {
  font-size: 18px;
  line-height: 36px;
}

.m-uitleg span {
  color: var(--metin-2);
  font-size: 16px;
  line-height: 1.5;
}

/*
 * bestekrabbels gibi kutular: telefonda 2, tablet ve masaüstünde 4 eşit hücre; resim hücrede
 * ortalı (telefonda 160px, genişte 110×110), ad hücre genişliğinde. Panel kutuları da aynı.
 */
.m-tegels,
.tema-modern .bp-kutu-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .m-tegels,
  .tema-modern .bp-kutu-izgara {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.m-tegels a,
.tema-modern .bp-kutu a {
  display: block;
  color: var(--metin);
  text-align: center;
}

.m-tegels a:hover {
  text-decoration: none;
}

.m-tegel-resim {
  position: relative;
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--gri-100);
}

@media (min-width: 480px) {
  .m-tegel-resim {
    width: 110px;
  }
}

.m-tegel-resim img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease-out;
}

@media (hover: hover) {
  .m-tegels a:hover img {
    transform: scale(1.04);
  }

  .m-tegels a:hover .m-tegel-ad {
    color: var(--merk);
  }
}

.m-tegel-ad {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.m-etiket {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--metin);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: var(--golge);
  font-variant-numeric: tabular-nums;
}

.m-etiket-vurgu {
  background: var(--merk);
  color: #fff;
}

/* Büyük resimler: bestekrabbels gibi çerçevesiz, alt alta; resim, galeri adı, sayı, paylaşım. */
.m-plaatjes {
  display: grid;
  grid-template-columns: minmax(0, 500px);
  justify-content: center;
  gap: 40px;
}

.m-plaatje {
  text-align: center;
}

.m-plaatje-resim {
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--gri-100);
}

.m-plaatje-resim img {
  display: block;
  width: 100%;
  height: auto;
}

/* .m-icerik h2 kuralını ezmek için içerik alanıyla birlikte yazılır (liste sayfalarında h2). */
.m-plaatje :is(h2, h3),
.m-icerik .m-plaatje h2 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
}

.m-plaatje :is(h2, h3) a {
  color: var(--metin);
}

.m-plaatje :is(h2, h3) a:hover {
  color: var(--merk);
}

.m-plaatje-sayi {
  color: var(--metin-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.m-plaatje .codeboxlinks {
  margin-top: 12px;
}

/* ---------------------------------------------------------------- liste (kategori, arama): bestekrabbels gibi alt alta büyük resimler */

.m-kart-izgara,
.tema-modern #keremiya-archive-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.m-kart-izgara > *,
.tema-modern #keremiya-archive-container > .archive-item {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.tema-modern #keremiya-archive-container > .pagination {
  margin-top: 0;
}

.tema-modern .share-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ana sayfa hızlı bağlantıları (klasik veri): kare kutular. */
.tema-modern .gbpics-quick-links-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 16px 12px;
}

.tema-modern .gbpics-quick-link-item {
  color: var(--metin);
  text-align: center;
}

.tema-modern .gbpics-quick-link-item:hover {
  text-decoration: none;
}

.tema-modern .gbpics-quick-link-item figure {
  margin: 0;
}

.tema-modern .gbpics-quick-link-item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: var(--r);
}

.tema-modern .gbpics-quick-link-title {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Kategori sayfasının kutu grupları (Kategoriler → Sayfa düzeni): ana sayfa kutularıyla aynı. */
.tema-modern .bp-kutu-grup + .bp-kutu-grup {
  margin-top: 32px;
}

.tema-modern .bp-kutu-grup h2 {
  margin-bottom: 16px;
  font-size: 20px;
}

/* Panelde tanımlı kutular (Kategoriler → Sayfa düzeni): ızgara .m-tegels ile ortak (yukarıda). */
.tema-modern .bp-kutu a:hover {
  color: var(--merk);
  text-decoration: none;
}

.tema-modern .bp-kutu img,
.tema-modern .bp-kutu-bos {
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--gri-100);
}

@media (min-width: 480px) {
  .tema-modern .bp-kutu img,
  .tema-modern .bp-kutu-bos {
    width: 110px;
  }
}

.tema-modern .bp-kutu-baslik {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- galeri */

/* bestekrabbels düzeni: resimler alt alta, her birinin altında paylaşım düğmeleri ve mesaj. */
.tema-modern .gbpics-post-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.tema-modern .gbpics-post-content > p {
  max-width: 42em;
  color: var(--metin-2);
}

.tema-modern .gbpics-post-content figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
  text-align: center !important;
}

.tema-modern .gbpics-post-content > figure:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.tema-modern .gbpics-post-content figure > br {
  display: none;
}

.tema-modern .gbpics-post-content figure .bp-resim-baglanti {
  order: 1;
  width: 100%;
  max-width: 600px;
}

.tema-modern .gbpics-post-content figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r);
  background: var(--gri-100);
}

.tema-modern .gbpics-post-content figcaption {
  order: 2;
  max-width: 600px;
  margin: 12px 0 0 !important;
  color: var(--metin-2);
  font-size: 16px;
  line-height: 1.5;
}

.tema-modern .gbpics-post-content figcaption strong {
  display: block;
  color: var(--metin);
  font-size: 16px;
  font-weight: 700;
}

.tema-modern .gbpics-post-content figcaption br {
  display: none;
}

.tema-modern .gbpics-post-content figure .codeboxlinks {
  order: 3;
  margin-top: 12px;
}

.tema-modern .gbpics-post-content figure .code-boxes {
  order: 4;
  width: 100%;
}

.tema-modern .bp-resim-baglanti {
  display: block;
}

/*
 * Paylaşım düğmeleri: yazılı ("WhatsApp", "Facebook", "Opslaan"), 48px yüksek. Zemin ağın
 * kendi rengi (--paylas-renk, PaylasimBaglantisi), beyaz yazı okunsun diye %28 koyulaştırılmış
 * (yeşil ve turuncu açık tonlarda beyaz yazı kontrastı yetersiz). Telefonda düğmeler satırı
 * eşit paylaşır ve simgesiz, yalnız yazıdır (simge masaüstünde kalır).
 */
.tema-modern .codeboxlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.tema-modern .codeboxlinks .share-button {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}

.tema-modern .codeboxlinks a,
.tema-modern .share-icons a {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 48px;
  padding: 0 16px 0 8px;
  border-radius: var(--r-kucuk);
  background: color-mix(in srgb, var(--paylas-renk, var(--gri-700)) 72%, #000);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.tema-modern .codeboxlinks a:hover,
.tema-modern .share-icons a:hover {
  background: color-mix(in srgb, var(--paylas-renk, var(--gri-700)) 60%, #000);
  text-decoration: none;
}

.tema-modern .bp-paylas {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
}

.tema-modern .bp-paylas svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 479px) {
  .tema-modern .codeboxlinks {
    flex-wrap: nowrap;
    width: 100%;
  }

  .tema-modern .codeboxlinks .share-button {
    flex: 1 1 0;
  }

  /*
   * Dar ekranda yalnız yazı: simge + ad üç düğmeye sığmıyor, ad sıkışıyordu. Ad zaten
   * tanıdık (WhatsApp, Facebook, Opslaan); düğme satırı tam genişlikte eşit paylaşılır.
   */
  .tema-modern .codeboxlinks a {
    height: 52px;
    padding: 0 8px;
  }

  /* Satır içi display: inline-flex'i (PaylasimIkonu) ezmek için !important. */
  .tema-modern .codeboxlinks a .bp-paylas {
    display: none !important;
  }
}

/* 360px altı (eski küçük telefonlar): "WhatsApp" düğme kenarına değmesin. */
@media (max-width: 359px) {
  .tema-modern .codeboxlinks {
    gap: 6px;
  }

  .tema-modern .codeboxlinks a {
    padding: 0 4px;
    font-size: 15px;
  }
}

/* Link/HTML/BB-code kutuları. */
.tema-modern .code-boxes {
  display: grid;
  gap: 8px;
  max-width: 600px;
  margin: 16px auto 0;
  text-align: left;
}

.tema-modern .code-box label {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.tema-modern .code-box strong {
  color: var(--metin-3);
  font-size: 14px;
  font-weight: 600;
}

.tema-modern .codebox {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: var(--gri-50);
  color: var(--metin-2);
  font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Sayfalama (site.tsx Pagination). */
.tema-modern .pagination {
  margin-top: 32px;
}

.tema-modern .pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tema-modern .pagination li {
  display: flex;
}

.tema-modern .pagination a,
.tema-modern .pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gri-300);
  border-radius: var(--r-kucuk);
  background: #fff;
  color: var(--metin);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tema-modern .pagination a:hover {
  border-color: var(--merk);
  color: var(--merk);
  text-decoration: none;
}

.tema-modern .pagination .current {
  border-color: var(--merk);
  background: var(--merk);
  color: #fff;
}

.tema-modern .pagecount {
  margin-top: 12px;
  color: var(--metin-3);
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Konu altındaki ilgili görseller ve resim sayfasının benzerleri. */
.tema-modern #related-images,
.tema-modern .bp-benzer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
}

.tema-modern .bp-benzer h2 {
  margin-bottom: 16px;
  font-size: 20px;
  text-align: left;
}

/* Telefonda iki sütun: üç sütunda resimdeki yazı okunmuyor, kutular sıkışık duruyordu. */
.tema-modern #boxes-related-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 640px) {
  .tema-modern #boxes-related-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.tema-modern .box-related-images a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--gri-100);
}

.tema-modern .box-related-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- resim sayfası */

.tema-modern .bp-resim-sayfasi > :not(.bp-benzer) {
  max-width: 600px;
  margin-inline: auto;
}

.tema-modern .bp-resim {
  margin: 0 auto;
}

.tema-modern .bp-resim img {
  display: block;
  width: 100%;
  border-radius: var(--r);
  background: var(--gri-100);
}

.tema-modern .bp-resim-sayfasi > br {
  display: none;
}

/* Link/HTML/BB-code kutuları telefonda gereksiz (kopyalayıp foruma yapıştıran yok): gizli. */
@media (max-width: 479px) {
  .tema-modern .bp-resim-sayfasi .code-boxes {
    display: none;
  }
}

.tema-modern .bp-resim-sayfasi .codeboxlinks {
  margin-top: 16px;
}

.tema-modern .bp-resim-sayfasi .detail {
  margin-top: 16px;
  font-weight: 700;
  text-align: center;
}

.tema-modern .bp-resim-sayfasi .name {
  margin-top: 4px;
  color: var(--metin-2);
  font-size: 16px;
  text-align: center;
}

.tema-modern .category-link {
  margin-top: 16px;
  text-align: center;
}

.tema-modern .category-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-kucuk);
  background: var(--merk);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.tema-modern .category-link a:hover {
  background: var(--merk-koyu);
  text-decoration: none;
}

.tema-modern .category-link br {
  display: none;
}

.tema-modern .bp-resim-gezinti {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-weight: 600;
}

.tema-modern .bp-resim-sira {
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}

.tema-modern .bp-resim-kategoriler {
  margin-top: 24px;
  color: var(--metin-3);
}

/* ---------------------------------------------------------------- kategoriler sayfası (kategori-dizini.tsx) */

.m-dizin-giris {
  margin-top: -4px;
}

.m-dizin {
  margin-top: 24px;
}

/* Süzme kutusu + sonuç sayısı. */
.m-dizin-arac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.m-dizin-ara {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--gri-300);
  border-radius: var(--r-kucuk);
  background: #fff;
  color: var(--metin-3);
}

.m-dizin-ara:focus-within {
  border-color: var(--merk);
  box-shadow: 0 0 0 3px var(--merk-acik);
}

.m-dizin-ara input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--metin);
  font: inherit;
  font-size: 16px;
}

.m-dizin-ara input:focus-visible {
  outline: none;
}

.m-dizin-toplam {
  color: var(--metin-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* A–Z dizini: kaydırırken üstte kalır. */
.m-abc {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px -4px 0;
  padding: 8px 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--cizgi);
}

.m-abc a,
.m-abc span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--r-kucuk);
  font-size: 16px;
  font-weight: 600;
}

.m-abc a {
  color: var(--metin);
}

.m-abc a:hover {
  background: var(--merk-acik);
  color: var(--merk);
  text-decoration: none;
}

.m-abc span {
  color: var(--gri-300);
}

/* Telefonda tek satır, yana kayar: yapışkan şerit ekranı kaplamasın. */
@media (max-width: 639px) {
  .m-abc {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-abc::-webkit-scrollbar {
    display: none;
  }

  .m-abc a,
  .m-abc span {
    flex: none;
  }
}

/* Harf grupları. */
.m-dizin-grup {
  scroll-margin-top: 72px;
  margin-top: 32px;
}

.m-dizin-harf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--merk);
  font-size: 20px;
  font-weight: 700;
}

.m-dizin-harf::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cizgi);
}

.m-dizin-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-dizin-liste a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  color: var(--metin);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.m-dizin-liste a:hover {
  border-color: var(--merk);
  background: var(--merk-acik);
  text-decoration: none;
}

.m-dizin-resim {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--r-kucuk);
  background: var(--gri-100);
}

.m-dizin-resim img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-dizin-metin {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.m-dizin-ad {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-dizin-liste a:hover .m-dizin-ad {
  color: var(--merk);
}

.m-dizin-sayi {
  color: var(--metin-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.m-dizin-bos {
  margin-top: 32px;
  color: var(--metin-3);
  text-align: center;
}

/* ---------------------------------------------------------------- kenar çubuğu */

.m-yan .sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 1024px) {
  .m-yan .sidebar {
    gap: 24px;
  }
}

.m-yan .widget-header {
  margin: -16px -16px 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cizgi);
}

.m-yan .widget-title {
  margin: 0;
  color: var(--metin);
  font-size: 16px;
  font-weight: 700;
}

.m-yan .widget ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-yan .widget li a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  margin: 0 -8px;
  border-radius: var(--r-kucuk);
  color: var(--metin);
  font-size: 17px;
}

.m-yan .widget li a:hover {
  background: var(--merk-acik);
  color: var(--merk);
  text-decoration: none;
}

.m-yan .widget .current-cat > a,
.m-yan .widget a[aria-current='page'] {
  background: var(--merk-acik);
  color: var(--merk);
  font-weight: 600;
}

.m-yan .widget .children {
  padding-left: 12px;
}

.m-yan .cat-item-all {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--cizgi);
}

.m-yan .cat-item-all a {
  color: var(--merk);
  font-weight: 600;
}

/* Kenar çubuğundaki arama (site.tsx SearchForm; modernde başlıkta arama olduğu için gizlidir). */
.m-yan .search-form {
  display: flex;
}

.m-yan .search-form label {
  flex: 1;
  min-width: 0;
}

.m-yan .search-field {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gri-300);
  border-right: 0;
  border-radius: var(--r-kucuk) 0 0 var(--r-kucuk);
  background: #fff;
  font: inherit;
}

.m-yan .search-submit {
  width: 48px;
  height: 44px;
  border: 0;
  border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0;
  background: var(--merk)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    center / 20px no-repeat;
  cursor: pointer;
}

/* ---------------------------------------------------------------- reklam */

.tema-modern .advertisement {
  margin: 24px auto !important;
}

/* ---------------------------------------------------------------- alt bilgi */

.m-alt {
  background: var(--gri-900);
  color: var(--gri-300);
}

.m-alt-ic {
  display: grid;
  gap: 24px;
  max-width: var(--kap);
  margin: 0 auto;
  padding: 48px var(--kenar) calc(48px + env(safe-area-inset-bottom));
}

.m-alt-baslik {
  color: #fff;
  font-weight: 700;
}

.m-alt-metin {
  max-width: 42em;
  margin-top: 8px;
  font-size: 16px;
}

.m-alt-baglantilar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-alt-baglantilar a,
.m-alt-metin a {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.m-alt-sosyal {
  display: flex;
  gap: 16px;
}

.m-alt-sosyal a {
  color: #fff;
}

.m-telif {
  color: var(--gri-400);
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .tema-modern *,
  .tema-modern *::before,
  .tema-modern *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Başlıktaki otomatik kategori linki (lib/oto-link.ts): bestekrabbels.nl gibi altı çizili,
   yalnız renkle ayrılmasın. */
.tema-modern .bp-oto-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reklam alanı (site.tsx Banner): hiza panelden (sol/orta/sağ), etiket varsa üstte. */
.tema-modern .bp-reklam {
  margin: 24px 0;
  text-align: center;
}

.tema-modern .bp-reklam-left {
  text-align: left;
}

.tema-modern .bp-reklam-right {
  text-align: right;
}

.tema-modern .bp-reklam img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.tema-modern .bp-reklam-etiket {
  margin-bottom: 4px;
  color: var(--metin-3);
  font-size: 13px;
}

/* Resim sayfasındaki reklam: düğmelerden ve gezintiden belirgin uzak (kazara tıklama). */
.tema-modern .bp-resim-sayfasi .bp-reklam {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
}