:root,
[data-tema="gunduz"] {
  --bg:           #f7f8fa;
  --bg-kart:      #ffffff;
  --bg-ust:       #ffffff;
  --bg-yumusak:   #eef1f5;
  --metin:        #0f172a;
  --metin-sol:    #475569;
  --metin-sag:    #64748b;
  --cizgi:        #e2e8f0;
  --cizgi-koyu:   #cbd5e1;
  --vurgu:        #4f46e5;
  --vurgu-hover:  #4338ca;
  --vurgu-bg:     #eef2ff;
  --vurgu-bg-2:   #e0e7ff;
  --vurgu-metin:  #ffffff;
  --uyari-bg:     #fef2f2;
  --uyari-renk:   #b91c1c;
  --begeni-bg:    #fff1f2;
  --begeni-renk:  #be123c;
  --begeni-aktif: #e11d48;
  --basari-bg:    #ecfdf5;
  --basari-renk:  #047857;
  --basari-cizgi: #6ee7b7;
  --alt-bg:       #ffffff;
  --alt-metin:    #475569;
  --alt-link:     #4f46e5;
  --golge:        0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --golge-ust:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --golge-hover:  0 8px 24px -8px rgba(15,23,42,.16), 0 4px 8px -4px rgba(15,23,42,.08);

  --gecis:        background .25s ease, color .25s ease, border-color .15s ease;
  --gecis-hizli:  background .15s ease, color .15s ease, transform .15s ease;
}

[data-tema="gece"] {
  --bg:           #0b1220;
  --bg-kart:      #151e2e;
  --bg-ust:       #0f1626;
  --bg-yumusak:   #1c2740;
  --metin:        #f1f5f9;
  --metin-sol:    #cbd5e1;
  --metin-sag:    #94a3b8;
  --cizgi:        #243149;
  --cizgi-koyu:   #334155;
  --vurgu:        #818cf8;
  --vurgu-hover:  #a5b4fc;
  --vurgu-bg:     #1e1b4b;
  --vurgu-bg-2:   #312e81;
  --vurgu-metin:  #0b1220;
  --uyari-bg:     #451a1a;
  --uyari-renk:   #fca5a5;
  --begeni-bg:    #451a1a;
  --begeni-renk:  #fda4af;
  --begeni-aktif: #be123c;
  --basari-bg:    #052e2b;
  --basari-renk:  #6ee7b7;
  --basari-cizgi: #047857;
  --alt-bg:       #0f1626;
  --alt-metin:    #94a3b8;
  --alt-link:     #c7d2fe;
  --golge:        0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
  --golge-ust:    0 1px 4px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --golge-hover:  0 8px 24px -8px rgba(0,0,0,.6), 0 4px 8px -4px rgba(0,0,0,.4);

  --gecis:        background .25s ease, color .25s ease, border-color .15s ease;
  --gecis-hizli:  background .15s ease, color .15s ease, transform .15s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--metin);
  background: var(--bg);
  transition: background .25s ease, color .25s ease;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-ust);
  color: var(--metin);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge-ust);
  transition: transform .3s ease, background .25s ease, color .25s ease;
  will-change: transform;
}
.ust.gizli { transform: translateY(-100%); }

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
}

.logo {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .3px;
  color: var(--metin);
}

.ust-sag { display: flex; align-items: center; gap: 5px; }

.tema-btn,
.menu-btn {
  background: none;
  border: 0;
  color: var(--metin);
  padding: 6px 8px;
  line-height: 1;
  border-radius: 8px;
  transition: background .15s ease;
}
.tema-btn:hover,
.menu-btn:hover { background: rgba(0,0,0,.06); }
[data-tema="gece"] .tema-btn:hover,
[data-tema="gece"] .menu-btn:hover { background: rgba(255,255,255,.1); }

.menu-btn { font-size: 1.5rem; }

.tema-btn {
  font-size: 1.15rem;
  position: relative;
  width: 40px;
  height: 36px;
}

.tema-ikon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: opacity .2s, transform .3s;
}
[data-tema="gunduz"] .tema-gece   { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
[data-tema="gunduz"] .tema-gunduz { opacity: 1; }
[data-tema="gece"]   .tema-gunduz { opacity: 0; transform: translate(-50%,-50%) rotate(-90deg); }
[data-tema="gece"]   .tema-gece   { opacity: 1; }

.menu {
  display: none;
  flex-direction: column;
  background: var(--bg-kart);
  border-top: 1px solid var(--cizgi);
}
.menu.acik { display: flex; }

.menu a {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cizgi);
  font-size: .95rem;
  color: var(--metin);
  transition: background .15s ease, color .15s ease;
}
.menu a:hover { background: var(--bg); }
.menu a:active { background: var(--cizgi); }

.icerik-alan {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}

.sayfa-baslik {
  font-size: 1.35rem;
  margin: 8px 4px 16px;
  font-weight: 700;
}

.akis { display: grid; gap: 0; }

.kart {
  background: transparent;
  border-bottom: 1px solid var(--cizgi);
  padding: 16px 0;
  transition: background .15s ease;
}
.kart:last-child { border-bottom: 0; }
.kart:hover { background: var(--bg-yumusak); }
[data-tema="gece"] .kart:hover { background: rgba(255,255,255,.025); }

.kart-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}

.kart-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  background: var(--cizgi);
  margin: 0 auto 12px;
  border-radius: 8px;
}

.kart-icerik {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--metin-sol);
  margin: 0 0 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.devamini-goster {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  color: var(--vurgu);
  font-weight: 600;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s ease;
}
.devamini-goster:hover { color: var(--vurgu-hover); text-decoration: underline; }
.devamini-goster[disabled] { cursor: wait; opacity: .7; }

.kart-tam {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--metin-sol);
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-left: 3px solid var(--vurgu);
  border-radius: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
[data-tema="gece"] .kart-tam { background: rgba(255,255,255,.04); }

.kart-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
  color: var(--metin-sag);
}

.kart-kategori-satir { margin-top: 10px; }

.kart-kategori {
  display: inline-block;
  background: var(--vurgu-bg);
  color: var(--vurgu);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.kart-kategori:hover {
  background: var(--vurgu);
  color: var(--vurgu-metin);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  transition: var(--gecis-hizli);
}
.btn:active { transform: scale(.98); }
.btn-birincil { background: var(--vurgu); color: var(--vurgu-metin); }
.btn-birincil:hover { background: var(--vurgu-hover); }

.detay {
  background: var(--bg-kart);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--golge);
}

.detay-baslik {
  font-size: 1.4rem;
  margin: 6px 0 10px;
  line-height: 1.3;
  color: var(--metin);
}

.detay-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: .8rem; color: var(--metin-sag);
  margin-bottom: 14px;
}

.detay-resim {
  margin: 0 0 20px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cizgi);
  text-align: center;
}
.detay-resim img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.detay-video {
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  background: var(--cizgi);
}
.detay-video img,
.detay-video video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.detay-icerik {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--metin);
}

.detay-aciklama {
  color: var(--metin-sag);
  font-size: .9rem;
  margin-top: 14px;
}

.detay-aksiyon {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.btn-begeni,
.btn-paylas {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
  font-size: .95rem;
  transition: var(--gecis-hizli);
}
.btn-begeni { background: var(--begeni-bg); color: var(--begeni-renk); }
.btn-paylas { background: var(--vurgu-bg); color: var(--vurgu); }

.btn-begeni.begenildi {
  background: var(--begeni-aktif);
  color: #fff;
  cursor: default;
  opacity: .9;
}
.btn-begeni[disabled] {
  cursor: not-allowed;
  opacity: .85;
}

.geri {
  display: inline-block;
  margin-top: 16px;
  color: var(--vurgu);
  font-size: .9rem;
}

.detay-kategori {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 8px 16px;
  background: var(--bg-kart);
  border: 1.5px solid var(--kat-renk, var(--vurgu));
  border-radius: 999px;
  color: var(--metin);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  transition: var(--gecis-hizli);
}
.detay-kategori:hover {
  background: var(--kat-renk, var(--vurgu));
  color: var(--vurgu-metin);
  transform: translateY(-1px);
}

.sabit-sayfa {
  background: var(--bg-kart);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--golge);
}
.sabit-icerik {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--metin);
}

.yukleniyor {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 20px;
  color: var(--metin-sag); font-size: .9rem;
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--cizgi);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: don .7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.son {
  text-align: center;
  padding: 24px;
  color: var(--metin-sag);
  font-size: .9rem;
}

.hata {
  background: var(--uyari-bg);
  color: var(--uyari-renk);
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.alt {
  background: var(--alt-bg);
  color: var(--alt-metin);
  padding: 20px 16px;
  font-size: .85rem;
  border-top: 1px solid var(--cizgi);
  transition: background .25s ease, color .25s ease;
}
.alt-ic {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.alt-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.alt-menu a {
  color: var(--alt-link);
  transition: color .15s ease;
}
.alt-menu a:hover { color: var(--vurgu); }

.yukari {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vurgu);
  color: var(--vurgu-metin);
  border: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: none;
  font-size: 1.2rem;
  transition: var(--gecis-hizli);
}
.yukari.gorunur { display: block; }
.yukari:hover { background: var(--vurgu-hover); transform: translateY(-2px); }

.benzer-bolum {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
}

.benzer-baslik {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--metin);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cizgi);
}

.benzer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.benzer-kart {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--bg-kart);
  border-radius: 10px;
  box-shadow: var(--golge);
  transition: transform .15s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
}
.benzer-kart:hover {
  transform: translateX(3px);
  box-shadow: var(--golge-hover);
}
.benzer-kart:active { transform: scale(.99); }

.benzer-img,
.benzer-img-yazi {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  background: var(--cizgi);
  display: block;
}
.benzer-img { object-fit: cover; }
.benzer-img-yazi {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--metin-sol);
  text-align: center;
  font-style: italic;
  padding: 6px;
  overflow: hidden;
  line-height: 1.3;
}

.benzer-body { flex: 1; min-width: 0; }

.benzer-kart-baslik {
  font-size: .92rem;
  font-weight: 600;
  color: var(--metin);
  margin: 0 0 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.benzer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .72rem;
  color: var(--metin-sag);
}

.ekle-sekmeler {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--cizgi);
}
.ekle-sekme {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--metin-sol);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.ekle-sekme:hover { color: var(--metin); background: var(--bg-kart); }
.ekle-sekme.aktif {
  color: var(--vurgu);
  border-bottom-color: var(--vurgu);
}

.ekle-form {
  display: none;
  background: var(--bg-kart);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--golge);
}
.ekle-form.aktif { display: block; }

.form-grup { margin-bottom: 18px; }
.form-grup label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--metin);
}
.form-grup input[type=text],
.form-grup input[type=email],
.form-grup input[type=file],
.form-grup select,
.form-grup textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--cizgi);
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--metin);
  transition: border-color .15s ease;
}
.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
  outline: none;
  border-color: var(--vurgu);
}
.form-grup textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}
.form-grup input[type=file] {
  padding: 8px 10px;
  cursor: pointer;
}
.form-grup .ipucu {
  font-size: .78rem;
  color: var(--metin-sag);
  margin-top: 5px;
}

.gorsel-onizleme {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg);
  border-radius: 10px;
  text-align: center;
}
.gorsel-onizleme img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}

.btn-gonder {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--vurgu);
  color: var(--vurgu-metin);
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--gecis-hizli);
  margin-top: 8px;
}
.btn-gonder:hover { background: var(--vurgu-hover); }
.btn-gonder:active { transform: scale(.98); }

.uyari {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: .92rem;
  line-height: 1.5;
}
.uyari-basari {
  background: var(--basari-bg);
  color: var(--basari-renk);
  border: 1px solid var(--basari-cizgi);
}
.uyari-hata {
  background: var(--uyari-bg);
  color: var(--uyari-renk);
  border: 1px solid var(--uyari-renk);
}

.kat-bolum { margin-bottom: 32px; }

.kat-grup-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--metin);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cizgi);
}
.kat-grup-baslik small {
  font-size: .78rem;
  color: var(--metin-sag);
  font-weight: 500;
}

.kat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.kat-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-kart);
  border-radius: 12px;
  box-shadow: var(--golge);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease;
  border-left: 4px solid var(--kat-renk, var(--vurgu));
}
.kat-kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--golge-hover);
}

.kat-ikon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--bg-yumusak);
  border-radius: 10px;
}
[data-tema="gece"] .kat-ikon { background: rgba(255,255,255,.04); }

.kat-body { flex: 1; min-width: 0; }

.kat-baslik {
  font-size: 1rem;
  font-weight: 700;
  color: var(--metin);
  margin: 0 0 4px;
}

.kat-aciklama {
  font-size: .82rem;
  color: var(--metin-sol);
  margin: 0 0 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kat-sayi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .75rem;
  color: var(--metin-sag);
}

.kat-ok {
  flex-shrink: 0;
  color: var(--metin-sag);
  font-size: 1.2rem;
  transition: transform .2s ease, color .2s ease;
}
.kat-kart:hover .kat-ok {
  transform: translateX(4px);
  color: var(--vurgu);
}

.kat-ust { margin-bottom: 20px; }
.kat-ust-aciklama {
  color: var(--metin-sol);
  font-size: .9rem;
  margin: 6px 4px 12px;
  line-height: 1.55;
}

.kat-mod-secim {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-kart);
  border-radius: 10px;
  box-shadow: var(--golge);
  margin: 0 4px;
}
.kat-mod-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--metin-sol);
  text-decoration: none;
  transition: var(--gecis-hizli);
}
.kat-mod-btn:hover { color: var(--metin); }
.kat-mod-btn.aktif {
  background: var(--vurgu);
  color: var(--vurgu-metin);
}

.sayfalama {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 32px 0 8px;
  padding: 16px;
  background: var(--bg-kart);
  border-radius: 12px;
}
.syp-btn {
  padding: 10px 18px;
  background: var(--vurgu);
  color: var(--vurgu-metin);
  border-radius: 8px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: background .15s ease;
}
.syp-btn:hover { background: var(--vurgu-hover); }
.syp-bilgi {
  font-size: .9rem;
  color: var(--metin);
  font-weight: 600;
}

.kat-tur-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.kat-tur-kart {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-kart);
  border-radius: 14px;
  box-shadow: var(--golge);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease;
  border-left: 5px solid var(--kat-renk, var(--vurgu));
}
.kat-tur-kart:hover {
  transform: translateY(-3px);
  box-shadow: var(--golge-hover);
}

.kat-tur-ikon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border-radius: 12px;
  color: #fff;
}

.kat-tur-body { flex: 1; min-width: 0; }

.kat-tur-baslik {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--metin);
  margin: 0 0 6px;
}

.kat-tur-aciklama {
  font-size: .9rem;
  color: var(--metin-sol);
  margin: 0 0 8px;
  line-height: 1.5;
}

.kat-tur-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .82rem;
  color: var(--metin-sag);
}

.ara-form { margin: 0 0 24px; }

.ara-input-grup {
  display: flex;
  gap: 8px;
  max-width: 600px;
}

.ara-input-grup input[type=text] {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--cizgi);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg-kart);
  color: var(--metin);
  transition: border-color .15s ease;
}
.ara-input-grup input[type=text]:focus {
  outline: none;
  border-color: var(--vurgu);
}

.ara-btn {
  padding: 12px 24px;
  background: var(--vurgu);
  color: var(--vurgu-metin);
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.ara-btn:hover { background: var(--vurgu-hover); }

.ara-bilgi {
  color: var(--metin-sol);
  font-size: .9rem;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--bg-yumusak);
  border-radius: 10px;
  border-left: 4px solid var(--vurgu);
}
.ara-bilgi strong { color: var(--metin); }

.ara-bosluk {
  text-align: center;
  color: var(--metin-sag);
  padding: 40px 20px;
  font-size: .95rem;
}

.breadcrumb {
  margin: 0 0 16px;
  font-size: .82rem;
  color: var(--metin-sag);
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: 6px;
  color: var(--metin-sag);
}
.breadcrumb a {
  color: var(--metin-sol);
  text-decoration: none;
  transition: color .15s ease;
}
.breadcrumb a:hover { color: var(--vurgu); }
.breadcrumb li:last-child {
  color: var(--metin-sag);
  font-weight: 500;
}

.detay-paylas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cizgi);
}

.detay-paylas-baslik {
  font-size: .85rem;
  color: var(--metin-sag);
  margin-right: 4px;
}

.paylas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--bg-kart);
  color: var(--metin);
  cursor: pointer;
  text-decoration: none;
  transition: var(--gecis-hizli);
  box-shadow: var(--golge);
}
.paylas-btn:hover { transform: translateY(-2px); }

.paylas-wa { color: #25D366; }
.paylas-wa:hover { background: #25D366; color: #fff; }

.paylas-tw { color: var(--metin); }
.paylas-tw:hover { background: var(--metin); color: var(--bg-kart); }

.paylas-fb { color: #1877F2; }
.paylas-fb:hover { background: #1877F2; color: #fff; }

.paylas-kopyala { color: var(--metin-sol); }
.paylas-kopyala:hover { background: var(--vurgu); color: var(--vurgu-metin); }
.paylas-kopyala.kopyalandi {
  background: #10b981;
  color: #fff;
}

@media (min-width: 640px) {
  .icerik-alan { padding: 20px 16px 60px; }
  .sayfa-baslik { font-size: 1.6rem; }
  .kat-grid { grid-template-columns: repeat(2, 1fr); }
  .kat-tur-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .menu-btn { display: none; }

  .menu {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    background: var(--bg-ust);
    border-top: 0;
    padding: 0 8px;
  }
  .menu a {
    border-bottom: 3px solid transparent;
    border-top: 0;
    padding: 12px 14px;
    color: var(--metin);
  }
  .menu a:hover {
    background: transparent;
    border-bottom-color: var(--vurgu);
    color: var(--vurgu);
  }

  .kat-grid { grid-template-columns: repeat(3, 1fr); }
  .kat-tur-grid { grid-template-columns: repeat(3, 1fr); }
}

.btn-begeni.btn-begeni-kucuk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: auto;
  padding: 2px 6px;
  background: none;
  border: 0;
  color: var(--metin-sag);
  font-size: .78rem;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
  line-height: 1;
}
.btn-begeni.btn-begeni-kucuk:hover {
  background: var(--uyari-bg);
  color: var(--uyari-renk);
}
.btn-begeni.btn-begeni-kucuk.begenildi {
  color: #ef4444;
  cursor: default;
}
.btn-begeni.btn-begeni-kucuk[disabled] {
  cursor: default;
  opacity: .8;
}

.detay-aksiyon {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
}
.detay-aksiyon .btn-begeni {
  flex: 0 0 auto;
  padding: 10px 20px;
}

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

@media print {
  .ust, .yukari, .alt, .yukleniyor, .devamini-goster { display: none !important; }
  .kart { break-inside: avoid; }
}
.reklam-ajan {
  margin: 24px 0;
  text-align: center;
  min-height: 100px;
}