/* İçerik detay gövdesindeki resimler: eski sistemden gelen sabit
   piksel width/height inline stilleri taşmaya sebep oluyordu */
.icerik-detay-govde img {
    max-width: 100% !important;
    height: auto !important;
}

/* 2026-09-09: Tailwind preflight reset'i (app.css) h1-h6'nın font-weight'ini
   "inherit" yapıyor — üst elemandan normal (400) ağırlığı miras alıp diğer
   metinlerle (p) aynı görünüyordu. Haber içeriğindeki h2 ara başlıkları
   görsel olarak ayırt edilsin diye kalınlaştırıldı. */
.icerik-detay-govde h2 {
    font-weight: 700;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

html {
    overflow-x: clip;
}
body {
    background-color: var(--arkaplan-bg, #f3f3f3);
    font-family: var(--site-font, "Poppins", sans-serif);
    font-size: var(--site-font-size, 16px);
    overflow-x: clip;
}


.text-gray-800.leading-loose {
    font-family: var(--icerik-font, sans-serif);
    font-size: var(--icerik-font-size, 16px);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--baslik-font, "Poppins", sans-serif);
}

.menu-border-custom-right {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    padding-right: 12px;
}

/* Pagination container styling */
/* ===== Ana manşet pagination — sayısız dot/pill ===== */
/* Güncelleme tarihi masaüstü/mobil görünüm */
.guncelleme-mobil { display: none; }
.guncelleme-desktop { display: inline; }
@media (max-width: 1023px) {
    .guncelleme-mobil { display: block; }
    .guncelleme-desktop { display: none; }
}

/* Tab menü yatay kaydırma — scrollbar gizle */
.tab-menu-scroll::-webkit-scrollbar { display: none; }
.tab-menu-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

/* İmsakiye yatay kaydırma — scrollbar gizle */
.imsakiye-scroll::-webkit-scrollbar { display: none; }
.imsakiye-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overflow-x: auto;
    overflow-y: hidden;
    transform: translateZ(0);
}

/* ===== Ana manşet pagination — dot/pill ===== */
.manset-swiper-pagination {
    position: relative !important;
    margin-top: 4px;
    padding: 6px 0 5px;
    text-align: center;
    width: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Swiper noktaları JS ile sonradan ekliyor — boşken de aynı yükseklik
       (10px nokta + padding) ayrılmazsa noktalar eklenince kapsayıcı aniden
       büyüyüp altındaki içeriği aşağı iter (layout shift/CLS). */
    min-height: 21px;
}

.manset-swiper-pagination .swiper-pagination-bullet {
    flex: none;
    width: 10px;
    height: 10px;
    background: #d1d5db;
    opacity: 1;
    border-radius: 50%;
    margin: 0 !important;
    padding: 0;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.manset-swiper-pagination .swiper-pagination-bullet:hover {
    background: var(--tema-renk, #ef4444);
    opacity: 0.7;
}

.manset-swiper-pagination .swiper-pagination-bullet-active,
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 32px !important;
    height: 10px !important;
    border-radius: 5px !important;
    background: var(--tema-renk, #ef4444) !important;
    opacity: 1 !important;
}

/* Swiper height */
.manset-swiper {
    background: white !important;
}
.manset-swiper .swiper-wrapper,
.manset-swiper .swiper-slide {
    background: transparent !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 !important;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 0 !important;
}

/* ===== Üst manşet swiper pagination bullets ===== */
/* Noktalar JS ile sonradan eklendiği için boşken de yer ayrılmazsa
   eklenince kapsayıcı büyüyüp altındaki içeriği iter (CLS) — bkz.
   .manset-swiper-pagination'daki aynı gerekçe. */
.ustmanset-swiper-pagination {
    min-height: 14px;
    padding: 2px 0;
}
/* 4-class specificity → global .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet (3 class) geçer */
.ustmanset-swiper-pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
.ustmanset-swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 2px !important;
    opacity: 1;
    background: #d1d5db;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.ustmanset-swiper-pagination .swiper-pagination-bullet-active {
    width: 32px !important;
    height: 10px !important;
    border-radius: 5px !important;
    background: var(--tema-renk, #ef4444) !important;
    opacity: 1;
}

/* ===== DARK MODE: divide çizgileri ===== */
html.dark .divide-y > *,
html.dark .divide-gray-50  > *,
html.dark .divide-gray-100 > *,
html.dark .divide-gray-200 > *,
html.dark .divide-zinc-100 > *,
html.dark .divide-zinc-200 > *,
html.dark .divide-slate-100 > *,
html.dark .divide-y > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-50  > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-zinc-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-zinc-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #27272a !important;
}

/* ===== DARK MODE: gazete swiper ===== */
html.dark .gazeteler-swiper .swiper-slide {
    background: #18181b !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
html.dark .gazeteler-newspaper-slide { color: #d4d4d8 !important; }
html.dark .gazeteler-newspaper-title { color: #a1a1aa !important; }

/* ===== DARK MODE: ana manşet dot bullets ===== */
html.dark .manset-swiper-pagination .swiper-pagination-bullet {
    background: #52525b !important;
}
html.dark .manset-swiper-pagination .swiper-pagination-bullet-active,
html.dark .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--tema-renk, #ef4444) !important;
}

/* Mobilde yüksekliği koruma + rounded + pagination boşluğu */
@media (max-width: 768px) {
    .manset-swiper {
        height: auto !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .manset-swiper-pagination {
        margin-top: 10px;
    }
}


/* Desktop devmanset text line-height */
@media (min-width: 1024px) {
    .devmanset-swiper .swiper-slide h2   { line-height: 1.25 !important; }
    .devmanset-swiper .swiper-slide span { line-height: 1.4 !important; }
    .devmanset-swiper .swiper-slide p    { line-height: 1.5 !important; }
}

/* Mobilde tüm anasayfa font boyutunu bir tık küçült */
@media (max-width: 1023px) {
    body { font-size: 95%; }
}

/* Desktop'ta pagination biraz daha büyük + swiper fix */
@media (min-width: 1024px) {
    .manset-swiper-pagination .swiper-pagination-bullet {
        width: 11px;
        height: 11px;
    }
    .manset-swiper-pagination .swiper-pagination-bullet-active,
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 34px !important;
        height: 11px !important;
        border-radius: 5px !important;
    }
    .manset-swiper {
        height: calc(100% - 46px) !important;
        border-radius: 10px;
        overflow: hidden;
    }
    .manset-swiper-pagination {
        margin-top: 14px;
    }
}

.sondakika-dot {
    width: 10px;
    height: 10px;
    background-color: #e2e2e2;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
}


@keyframes nefes {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ritim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes shake {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(8px, 0, 0);
    }

    50% {
        transform: translate3d(-8px, 0, 0);
    }

    75% {
        transform: translate3d(8px, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes tonyhawk {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes blur {
    0% {
        filter: blur(0);
        transform: skew(0);
    }

    50% {
        filter: blur(8px);
        transform: skew(30deg);
    }

    100% {
        filter: blur(0);
        transform: skew(0);
    }
}

/* Devmanset dikey pagination (sağ taraf — mobil + masaüstü) */
.devmanset-pagination {
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 20;
    width: 26px !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    flex-shrink: 0;
}
.devmanset-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d1d5db;
    opacity: 1;
    border-radius: 50%;
    margin: 0 !important;
    display: block;
    cursor: pointer !important;
    transition: all 0.3s ease;
}
.devmanset-pagination .swiper-pagination-bullet-active {
    width: 10px !important;
    height: 32px !important;
    background: var(--tema-renk, #ef4444) !important;
    border-radius: 5px !important;
    opacity: 1 !important;
}

.devmanset-wrap {
    height: 400px;
}

.devmanset-swiper,
.devmanset-swiper .swiper-wrapper,
.devmanset-swiper .swiper-slide,
.devmanset-swiper .swiper-slide a,
.devmanset-swiper .swiper-slide img {
    height: 400px !important;
}

@media (max-width: 768px) {
    .devmanset-pagination {
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px 0 6px !important;
        gap: 5px !important;
        justify-content: center !important;
    }
    .devmanset-pagination .swiper-pagination-bullet-active {
        width: 32px !important;
        height: 10px !important;
        border-radius: 5px !important;
    }
}

@media (max-width: 768px) {
    .devmanset-wrap,
    .devmanset-swiper,
    .devmanset-swiper .swiper-wrapper,
    .devmanset-swiper .swiper-slide,
    .devmanset-swiper .swiper-slide a,
    .devmanset-swiper .swiper-slide img {
        height: 300px !important;
    }
    .devmanset-swiper .swiper-slide h2   { font-size: 25px !important; line-height: 1.3 !important; }
    .devmanset-swiper .swiper-slide span { font-size: 17px !important; line-height: 1.4 !important; }
    .devmanset-swiper .swiper-slide p    { font-size: 15px !important; line-height: 1.5 !important; }
}

.devmanset-swiper .swiper-slide img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.devmanset-swiper .swiper-slide a {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}


.social-icon {
    width: 30px;
    height: 30px;
}

.social-svg {
    width: 14px;
    height: 14px;
}

.social-gn-img {
    height: 18px;
}

@media (min-width: 640px) {
    .social-icon {
        width: 34px;
        height: 34px;
    }

    .social-svg {
        width: 16px;
        height: 16px;
    }

    .social-gn-img {
        height: 24px;
    }
}

.pswp {
    position: fixed !important;
}

.footer-link {
    color: var(--footer-link-renk, #ffffff);
    opacity: 0.8;
    transition: opacity 0.2s;
}
.footer-link:hover {
    opacity: 1;
}

.footer-ust-link {
    color: var(--footer-ust-renk, #ffffff);
    opacity: 0.8;
    transition: opacity 0.2s;
}
.footer-ust-link:hover {
    opacity: 1;
}
.tema-bg {
    background-color: var(--tema-renk, #bf000f);
}
.tema-text {
    color: var(--tema-renk, #bf000f);
}
.tema-border {
    border-color: var(--tema-renk, #bf000f);
}

.tema-bg:hover {
    opacity: 0.9;
}

/* =================== PAGE: futbolPuanDurumu =================== */
/* --fbl-color: header-bg'den bağımsız, dark modda korunur */
.fbl-bg      { background-color: var(--fbl-color, #16a34a); }
.fbl-text    { color: var(--fbl-color, #16a34a); }
.fbl-thead   { background-color: color-mix(in srgb, var(--fbl-color, #16a34a) 8%, white);
               border-color: color-mix(in srgb, var(--fbl-color, #16a34a) 20%, white);
               color: color-mix(in srgb, var(--fbl-color, #16a34a) 85%, black); }
.fbl-hover:hover { border-color: color-mix(in srgb, var(--fbl-color, #16a34a) 35%, white);
                   color: var(--fbl-color, #16a34a); }
/* Dark mode: fbl-thead karanlık zemin için */
html.dark .fbl-thead { background-color: color-mix(in srgb, var(--fbl-color, #16a34a) 20%, #18181b);
                       color: #d4d4d8; }

/* =================== PAGE: astroloji =================== */
.astro-hero {
    background: linear-gradient(160deg, #1a0533 0%, #3b0764 35%, #6b21a8 65%, #9333ea 100%);
    position: relative; overflow: hidden;
}
.astro-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 60%, rgba(255,255,255,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.07) 0%, transparent 50%);
    pointer-events: none;
}
.astro-hero > .container { position: relative; z-index: 2; }
.burc-strip {
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
}
.burc-btn {
    cursor: pointer; flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 10px 4px 10px; border-radius: 10px;
    transition: background .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent; opacity: 0.5;
}
.burc-btn:hover { opacity: 0.8; background: rgba(255,255,255,0.07); }
.burc-btn.aktif { opacity: 1; background: rgba(255,255,255,0.18); }
.burc-btn svg { display: block; }
.burc-adi {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #fff; text-align: center;
    line-height: 1.2; white-space: nowrap;
    margin-top: 6px;
    display: block;
}
.tab-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 13px 11px; border-radius: 8px;
    font-size: 15px; color: #6b7280; text-align: left;
    transition: background .15s, color .15s;
    cursor: pointer; background: none; border: none; line-height: 1.3;
}
.tab-btn:hover { background: #faf5ff; color: #9333ea; }
.tab-btn.aktif-tab { background: #faf5ff; color: #7e22ce; font-weight: 600; }
.tab-btn svg { flex-shrink: 0; }

.tag-guclu { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.tag-zayif  { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.tag-uyumlu { background:#f3e8ff; color:#7e22ce; border:1px solid #e9d5ff; }

/* =================== PAGE: gazeteMansetleri =================== */
.gazete-kart { cursor: zoom-in; position: relative; }
.gazete-kart .zoom-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0);
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease;
    pointer-events: none;
    z-index: 2;
}
.gazete-kart:hover .zoom-icon { transform: translate(-50%,-50%) scale(1); }

/* =================== PAGE: gazeteArsiv/detay =================== */
#gazeteOuter {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: #e5e7eb;
    height: calc(100vh - 290px);
    min-height: 400px;
    max-height: 900px;
    position: relative;
}
#gazeteOuter.grabbing { cursor: grabbing; }
#gazeteTransform {
    position: absolute;
    top: 0; left: 0;
    /* JS (initGazetePanZoom) doğru konum/ölçeği hesaplayıp uygulayana kadar
       gizli kalır (visibility:hidden) — JS initFit() tamamlanınca "ready"
       sınıfını ekleyip gösterir. Önceki denemede top/left:50% + transform
       ile "varsayılan ortalama" yapılmıştı ama JS SADECE transform'u
       değiştirdiği için top/left:50% kalıcı kalıp JS'in translate(tx,ty)
       hesabının üzerine binip görseli sağ-alta kaydırıyordu. Görseli hiç
       göstermemek (konum hesaplanana dek), yanlış bir ara konum gösterip
       sonra düzeltmekten daha güvenli.  */
    visibility: hidden;
    transform-origin: 0 0;
    will-change: transform;
    display: inline-block;
}
.page-frame {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    line-height: 0;
}
.cm-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 5;
}
.cm-corner.tl { top: 10px;    left: 10px;    border-top: 1.5px solid #bbb; border-left: 1.5px solid #bbb; }
.cm-corner.tr { top: 10px;    right: 10px;   border-top: 1.5px solid #bbb; border-right: 1.5px solid #bbb; }
.cm-corner.bl { bottom: 10px; left: 10px;    border-bottom: 1.5px solid #bbb; border-left: 1.5px solid #bbb; }
.cm-corner.br { bottom: 10px; right: 10px;   border-bottom: 1.5px solid #bbb; border-right: 1.5px solid #bbb; }
.cm-mid {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 5;
}
.cm-mid.tc { top: 6px;    left: 50%; transform: translateX(-50%); }
.cm-mid.bc { bottom: 6px; left: 50%; transform: translateX(-50%); }
.cm-mid.lc { left: 6px;   top: 50%; transform: translateY(-50%); }
.cm-mid.rc { right: 6px;  top: 50%; transform: translateY(-50%); }

/* =================== PAGE: havaDurumu =================== */
.hava-hero {
    background:
        linear-gradient(to bottom right, transparent 40%, rgba(3,105,161,0.12) 100%),
        linear-gradient(160deg, #0369a1 0%, #0284c7 35%, #0ea5e9 65%, #7dd3fc 100%);
    position: relative;
    overflow: hidden;
}
.hava-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 50%);
    pointer-events: none;
}
.glass-card {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.35);
}
.metric-card {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
}
#hava-anim-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.hava-hero > .container { position: relative; z-index: 2; }
@keyframes snowFall {
    0%   { transform: translateY(-20px) translateX(0px) rotate(0deg);   opacity: 0.9; }
    50%  { transform: translateY(50vh)  translateX(25px) rotate(180deg); opacity: 0.7; }
    100% { transform: translateY(110vh) translateX(-15px) rotate(360deg); opacity: 0; }
}
@keyframes rainFall {
    0%   { transform: translateY(-30px) translateX(0);   opacity: 0.7; }
    100% { transform: translateY(110vh) translateX(-90px); opacity: 0.15; }
}
@keyframes sunPulse {
    0%, 100% { transform: scale(1)   rotate(0deg);   opacity: 0.18; }
    50%       { transform: scale(1.25) rotate(20deg);  opacity: 0.28; }
}
@keyframes sunRay {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes fogDrift {
    0%   { transform: translateX(-5%)  scaleX(1);   opacity: 0.18; }
    50%  { transform: translateX(3%)   scaleX(1.05); opacity: 0.28; }
    100% { transform: translateX(-5%)  scaleX(1);   opacity: 0.18; }
}
@keyframes lightningFlash {
    0%,88%,100% { opacity: 0; }
    89%,91%     { opacity: 0.55; }
    90%,92%     { opacity: 0; }
    93%         { opacity: 0.35; }
    94%         { opacity: 0; }
}
@keyframes flicker {
    0%,100% { opacity: 0.8; }
    50%     { opacity: 0.4; }
}

/* =================== anamanset swiper nav color =================== */
.manset-swiper-button-next,
.manset-swiper-button-prev { --swiper-navigation-color: #ffffff; }

/* =================== gazeteler swiper (anasayfa) =================== */
.gazeteler-swiper-container {
    width: 100%;
    padding-bottom: 30px;
    position: relative;
}
.gazeteler-swiper .swiper-slide {
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    height: auto;
    width: 100%;
    overflow: hidden;
}
.gazeteler-swiper .swiper-slide:hover { transform: translateY(-5px); }
.gazeteler-newspaper-slide {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px;
}
.gazeteler-newspaper-image {
    width: 100%;
    height: 320px;
    object-fit: contain;
    object-position: center top;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}
.gazeteler-newspaper-title {
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 4px;
    text-align: center;
    line-height: 1.3;
    color: #374151;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
    .gazeteler-swiper .swiper-slide { width: 100%; }
    .gazeteler-newspaper-image { height: 256px; }
}

/* ===================================================================
   RTL (Sağdan Sola) Dil Desteği — ar, fa, ur, he
   =================================================================== */
[dir="rtl"] body                        { direction: rtl; text-align: right; }
[dir="rtl"] .flex                       { flex-direction: row-reverse; }
[dir="rtl"] .flex.items-center          { flex-direction: row-reverse; }
[dir="rtl"] nav ul.flex                 { flex-direction: row-reverse; }
[dir="rtl"] #sidebarMenu               { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] #sidebarMenu.-translate-x-full { transform: translateX(100%); }
[dir="rtl"] #sidebarMenu:not(.-translate-x-full) { transform: translateX(0); }
[dir="rtl"] .px-8                       { padding-right: 2rem; padding-left: 0; }
[dir="rtl"] .ml-auto                    { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto                    { margin-right: 0; margin-left: auto; }
[dir="rtl"] .space-x-2 > * + *         { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .gap-3                      { gap: 0.75rem; }
[dir="rtl"] .text-left                  { text-align: right; }
[dir="rtl"] .rounded-l-lg              { border-radius: 0 0.5rem 0.5rem 0; }
[dir="rtl"] .rounded-r-lg              { border-radius: 0.5rem 0 0 0.5rem; }
[dir="rtl"] .border-l                   { border-left: none; border-right-width: 1px; }
[dir="rtl"] .border-r                   { border-right: none; border-left-width: 1px; }

/* ===================================================================
   DARK MODE — zinc-950 tabanlı palette
   (Statik kurallar; siteye özgü CSS değişkenleri head.php'de kalır)
   =================================================================== */

html.dark body        { background-color:#09090b!important; color:#d4d4d8; }
html.dark .bg-white   { background-color:#18181b!important; }
html.dark .bg-gray-50  { background-color:#18181b!important; }
html.dark .bg-gray-100 { background-color:#27272a!important; }
html.dark .bg-gray-200 { background-color:#3f3f46!important; }
html.dark .bg-zinc-50  { background-color:#18181b!important; }
html.dark .bg-zinc-100 { background-color:#27272a!important; }
html.dark .bg-zinc-200 { background-color:#3f3f46!important; }
html.dark .bg-slate-50 { background-color:#18181b!important; }

html.dark .text-gray-900 { color:#f4f4f5!important; }
html.dark .text-gray-800 { color:#e4e4e7!important; }
html.dark .text-gray-700 { color:#d4d4d8!important; }
html.dark .text-gray-600 { color:#a1a1aa!important; }
html.dark .text-gray-500 { color:#71717a!important; }
html.dark .text-gray-400 { color:#52525b!important; }
html.dark .text-zinc-900 { color:#f4f4f5!important; }
html.dark .text-zinc-800 { color:#e4e4e7!important; }
html.dark .text-zinc-700 { color:#d4d4d8!important; }
html.dark .text-zinc-600 { color:#a1a1aa!important; }
html.dark .text-zinc-500 { color:#71717a!important; }
html.dark .text-zinc-400 { color:#a1a1aa!important; }
html.dark .text-black    { color:#e4e4e7!important; }

html.dark .border-gray-50,
html.dark .border-gray-100 { border-color:#27272a!important; }
html.dark .border-gray-200 { border-color:#3f3f46!important; }
html.dark .border-gray-300 { border-color:#52525b!important; }
html.dark .border-zinc-200 { border-color:#27272a!important; }
html.dark .border-zinc-300 { border-color:#3f3f46!important; }
html.dark .border-zinc-700,
html.dark .border-zinc-800 { border-color:#18181b!important; }
html.dark .border-slate-200 { border-color:#3f3f46!important; }
html.dark .border-slate-300 { border-color:#52525b!important; }
html.dark .border-slate-500 { border-color:#71717a!important; }

html.dark .hover\:bg-gray-50:hover  { background-color:#27272a!important; }
html.dark .hover\:bg-gray-100:hover { background-color:#3f3f46!important; }

html.dark input,
html.dark textarea,
html.dark select { background-color:#18181b!important; color:#e4e4e7!important; border-color:#3f3f46!important; }

html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg { box-shadow:0 2px 10px 0 rgba(0,0,0,.7)!important; }

/* Tema rengi olan alanlar dark modda siyahlaşmasın */
html.dark .tema-bg,
html.dark .tema-bg:hover { background-color:var(--tema-renk)!important; }
/* Gözden Kaçmasın sağ panel: dark modda koyu ton */
html.dark .gozden-panel,
html.dark .gozden-panel:hover { background-color:#0f0f12!important; }
html.dark .tema-text   { color:var(--tema-renk)!important; }
html.dark .tema-border { border-color:var(--tema-renk)!important; }

/* Renkli section başlıkları ve sosyal butonlar korunsun */
html.dark .bg-green-600  { background-color:#16a34a!important; }
html.dark .bg-green-500  { background-color:#22c55e!important; }
html.dark .bg-green-400  { background-color:#4ade80!important; }
html.dark .bg-purple-600 { background-color:#9333ea!important; }
html.dark .bg-purple-700 { background-color:#7e22ce!important; }
html.dark .bg-blue-700   { background-color:#1d4ed8!important; }
html.dark .bg-blue-600   { background-color:#2563eb!important; }
html.dark .bg-blue-500   { background-color:#3b82f6!important; }
html.dark .bg-sky-600    { background-color:#0284c7!important; }
html.dark .bg-red-600    { background-color:#dc2626!important; }
html.dark .bg-orange-500 { background-color:#f97316!important; }
html.dark .bg-yellow-300 { background-color:#fde047!important; }
html.dark .bg-black      { background-color:#333333!important; }

html.dark .text-red-600 { color:#ffffff!important; }
html.dark .text-red-500 { color:#ffffff!important; }

html.dark .text-green-900  { color:#34d399!important; }
html.dark .text-green-800  { color:#22c55e!important; }
html.dark .text-purple-900 { color:#d8b4fe!important; }
html.dark .text-purple-800 { color:#c084fc!important; }
html.dark .text-blue-900   { color:#93c5fd!important; }
html.dark .text-blue-800   { color:#60a5fa!important; }

html.dark .bg-green-50,
html.dark .bg-green-100  { background-color:#18181b!important; }
html.dark .bg-purple-50,
html.dark .bg-purple-100 { background-color:#18181b!important; }
html.dark .bg-blue-50,
html.dark .bg-blue-100   { background-color:#18181b!important; }
html.dark .bg-sky-50     { background-color:#0c1a2e!important; }
html.dark .bg-orange-50  { background-color:#1c1208!important; }
html.dark .bg-red-50     { background-color:#1f0a0a!important; }
html.dark .bg-lime-50    { background-color:#0f1a09!important; }

/* Opacity modifier'lı bg sınıfları */
html.dark .bg-white\/50   { background-color:rgba(255,255,255,0.06)!important; }
html.dark .bg-white\/30   { background-color:rgba(255,255,255,0.04)!important; }
html.dark .bg-gray-50\/50,
html.dark .bg-gray-50\/75 { background-color:#18181b!important; }
html.dark .hover\:bg-purple-100:hover { background-color:#2e1065!important; }

/* CSS variable override'ları — dark modda header/footer/mobil tonları */
html.dark {
    --header-bg:          #18181b;
    --mobil-bg:           #18181b;
    --footer-ust-bg:      #0f0f12;
    --footer-ust-renk:    #f4f4f5;
    --footer-baslik-renk: #a1a1aa;
    --footer-link-renk:   #71717a;
    --footer-alt-bg:      #000000;
    --footer-alt-renk:    #3f3f46;
}

/* İmsakiye: koyu modda arka plan görselleri gizle */
html.dark .imsakiye-bg { background-image: none !important; }

/* Dark mode toggle icon görünürlüğü */
html.dark #dmIconMoon    { display:none!important; }
html:not(.dark) #dmIconSun { display:none!important; }

/* Dil switcher dropdown — dark mod uyumu */
html.dark #langDropdown           { background-color:#27272a!important; border:1px solid #3f3f46; }
html.dark #langDropdown a         { color:#d4d4d8!important; }
html.dark #langDropdown a:hover   { background-color:#3f3f46!important; }

/* =================== Hikaye yuvarlaklar büyüt =================== */
#stories ul {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
#stories ul li {
    width: 120px !important;
    padding: 0 6px !important;
    height: auto !important;
}
#stories ul li > a > img,
#stories ul li > a > .photo {
    width: 100px !important;
    height: 100px !important;
}
@media (max-width: 768px) {
    #stories ul li {
        width: 83px !important;
        padding: 0 4px !important;
    }
    #stories ul li > a > img,
    #stories ul li > a > .photo {
        width: 68px !important;
        height: 68px !important;
    }
}

/* =================== Hikaye kategori adı — pill bg kaldırıldı, metin kaldı =================== */
#stories > ul > li > a .name,
#stories .story .info .name,
#stories .name {
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: #18181b !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    text-align: center !important;
}
@media (max-width: 1023px) {
    #stories > ul > li > a .name,
    #stories .story .info .name,
    #stories .name {
        font-size: 13px !important;
    }
}

/* =================== Son dakika: init öncesi zıplama önle =================== */
.son-dakika-swiper:not(.swiper-initialized) {
    overflow: hidden !important;
}
.son-dakika-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}

/* =================== Hikaye viewer — masaüstünde sağda kalan boşluk =================== */
/* zuck.css modal genişliğini 100vw ile veriyor; sayfanın dikey scrollbar'ı olduğunda
   100vw, görünen alandan scrollbar kadar geniş oluyor ve modal'ın sağ kenarı scrollbar'ın
   altında kalıp boşluk gibi görünüyor. Mobilde scrollbar overlay (yer kaplamıyor) olduğu
   için sorun yok, sadece masaüstünde (scrollbar yer kaplayan cihazlarda) düzeltiliyor. */
@media (min-width: 1024px) {
    #zuck-modal,
    #zuck-modal-content,
    #zuck-modal-content .story-viewer,
    #zuck-modal-content .story-viewer > .slides,
    #zuck-modal-content .story-viewer > .slides > * {
        width: 100% !important;
    }
}

/* =================== Hikaye viewer — 4:3 + blur bg + büyük başlık =================== */
/* Zuck viewer genel yapı */
#zuck-modal .slide-item {
    position: relative !important;
    overflow: hidden !important;
    background: #111 !important;
}
/* JS inject edilen blur div */
#zuck-modal .slide-item .zuck-blur-bg {
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
}
/* Resim: genişliğe otur, doğal yükseklik, uzanma */
#zuck-modal .slide-item a:not(.caption) img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Tüm slide-item içeriği blur'un üstünde, dikey ortala */
#zuck-modal .slide-item > a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Başlık: tam genişlik, ortalı */
#zuck-modal .slide-item a.caption {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    z-index: 2 !important;
}
#zuck-modal .slide-item a.caption b,
#zuck-modal .slide-item a.caption strong {
    font-size: 26px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* Global cursor */
a, button, [role="button"], label[for], input[type="submit"], input[type="button"], input[type="reset"] { cursor: pointer !important; }

/* =================== Canlı Yayın animasyonları =================== */
@keyframes cy-blink {
  0%, 45%  { opacity: 1; }
  55%, 100% { opacity: 0; }
}
.cy-blink { animation: cy-blink 0.65s ease-in-out infinite; }

@keyframes cy-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.12); opacity: 0.82; }
}
.cy-pulse { animation: cy-pulse 1.1s ease-in-out infinite; }

@keyframes cy-glow {
  0%, 100% { text-shadow: none; opacity: 1; }
  50%       { text-shadow: 0 0 8px rgba(255,210,210,1), 0 0 18px rgba(255,70,70,0.75); opacity: 0.88; }
}
.cy-glow { animation: cy-glow 1.4s ease-in-out infinite; }

@keyframes cy-shake {
  0%, 78%, 100% { transform: translateX(0); }
  82%            { transform: translateX(-6px); }
  86%            { transform: translateX(6px); }
  90%            { transform: translateX(-4px); }
  94%            { transform: translateX(4px); }
  97%            { transform: translateX(-2px); }
}
.cy-shake { animation: cy-shake 2.2s ease-in-out infinite; }

@keyframes cy-bounce {
  0%, 100% { transform: translateY(0);   animation-timing-function: cubic-bezier(.33,0,.66,0); }
  40%       { transform: translateY(-7px); animation-timing-function: cubic-bezier(.33,1,.66,1); }
  65%       { transform: translateY(-3px); animation-timing-function: cubic-bezier(.33,0,.66,0); }
}
.cy-bounce { animation: cy-bounce 1.0s infinite; }

@keyframes cy-wave {
  0%, 100% { opacity: 1;   filter: brightness(1);   }
  25%       { opacity: 0.5; filter: brightness(0.65); }
  55%       { opacity: 1;   filter: brightness(1.45); }
  80%       { opacity: 0.6; filter: brightness(0.75); }
}
.cy-wave { animation: cy-wave 1.6s ease-in-out infinite; }