/* =====================================================
   Tanıtım paneli ile üretilen bölümler
   (yonetim paneli tarafından oluşturulan içerik düzeni)
===================================================== */
.tn-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.tn-wrap.tn-size-wide { grid-template-columns: 1.4fr 1fr; }
.tn-wrap.tn-size-narrow { grid-template-columns: 0.8fr 1.2fr; }
.tn-wrap.tn-media-right { grid-template-columns: 1fr 1fr; }
.tn-wrap.tn-media-right.tn-size-wide { grid-template-columns: 1fr 1.4fr; }
.tn-wrap.tn-media-right.tn-size-narrow { grid-template-columns: 1.2fr 0.8fr; }
.tn-wrap.tn-media-right .tn-media { order: 2; }

.tn-wrap.tn-media-top,
.tn-wrap.tn-media-bottom,
.tn-wrap.tn-media-only,
.tn-wrap.tn-no-media {
    grid-template-columns: 1fr;
    max-width: 1036px;
    gap: 24px;
}
.tn-wrap.tn-no-media { max-width: 1200px; }
.tn-wrap.tn-media-bottom .tn-media { order: 2; }

.tn-media { min-width: 0; display: flex; justify-content: center; }
.tn-body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tn-body .pet-img-row { margin-bottom: 4px; }

.tn-media-box { position: relative; width: 100%; }
.tn-media-box img,
.tn-media-box video {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.tn-media-box.tn-sized { overflow: hidden; }
.tn-media-box.tn-sized > img,
.tn-media-box.tn-sized > video,
.tn-media-box.tn-sized .tn-slide img,
.tn-media-box.tn-sized .tn-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.tn-media-box.tn-sized.tn-slider .tn-slide,
.tn-media-box.tn-sized.tn-slider .tn-slide.active {
    position: absolute;
    inset: 0;
    height: 100%;
}
.tn-frame-soft img,
.tn-frame-soft video { border-radius: 20px; }
.tn-frame-none img,
.tn-frame-none video { border-radius: 12px; }
.tn-frame-video img,
.tn-frame-video video {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Slayt */
.tn-slider { overflow: hidden; }
.tn-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s ease;
}
.tn-slide.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}
.tn-frame-video .tn-slide.active { position: absolute; }
.tn-slide img,
.tn-slide video { width: 100%; height: 100%; object-fit: cover; }
.tn-frame-soft .tn-slide img,
.tn-frame-soft .tn-slide video { border-radius: 20px; }

.tn-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.55);
    background: rgba(18, 18, 18, 0.55);
    color: rgba(232, 197, 71, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
    padding: 0;
}
.tn-slider:hover .tn-arrow { opacity: 1; }
.tn-arrow:hover { background: var(--accent-gold, #c9a227); color: #111; }
.tn-prev { left: 12px; }
.tn-next { right: 12px; }
.tn-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 5;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}
.tn-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.8);
    background: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}
.tn-dot.active {
    background: var(--accent-gold, #c9a227);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.9);
    transform: scale(1.25);
}
@media (hover: none) { .tn-arrow { opacity: 1; } }

/* Beceri maddesinde ikon yoksa boş kolon */
.pasif-beceriler-item > span:empty { width: 0; }

/* Partner sosyal medya — ek platformlar */
.psoc-tw { background: #9146ff; }
.psoc-tt { background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.psoc-kk { background: #53fc18; color: #111 !important; font-weight: 900; }
.psoc-web { background: #c9a227; color: #111 !important; }

/* Karakter kartında video yerine görsel */
.karakter-kart-img img.karakter-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ══════════════════════════════════════════
   DİL SEÇİMİ — sol tarafta bayraklar
   ══════════════════════════════════════════ */
.tn-langbar {
    position: fixed;
    left: 12px;
    top: 104px;
    z-index: 9995;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tn-lang-toggle { display: none; }
.tn-lang-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px 6px;
    background: rgba(10, 8, 6, 0.72);
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tn-lang {
    position: relative;
    display: block;
    width: 28px;
    height: 19px;
    border-radius: 5px;
    opacity: 0.75;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.tn-lang img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.tn-lang:hover,
.tn-lang:focus-visible { opacity: 1; transform: scale(1.12); outline: none; }
.tn-lang.active { opacity: 1; }
.tn-lang.active img { box-shadow: 0 0 0 2px #e8c547, 0 0 12px rgba(232, 197, 71, 0.65); }
.tn-lang span {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translate(-6px, -50%);
    white-space: nowrap;
    background: rgba(10, 8, 6, 0.92);
    color: #e8c547;
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.tn-lang:hover span,
.tn-lang:focus-visible span { opacity: 1; transform: translate(0, -50%); }

/* Mobil ve kısa ekranlar (Discord kutusuyla çakışmasın): sol altta tek bayrak, dokununca açılır */
@media (max-width: 768px), (max-height: 700px) {
    .tn-langbar {
        top: auto;
        bottom: 16px;
        flex-direction: column-reverse;
    }
    .tn-lang-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        background: rgba(10, 8, 6, 0.88);
        border: 1px solid rgba(201, 162, 39, 0.6);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    }
    .tn-lang-toggle img {
        width: 28px;
        height: 20px;
        object-fit: cover;
        border-radius: 3px;
    }
    .tn-lang-list { display: none; margin-bottom: 10px; }
    .tn-langbar.open .tn-lang-list { display: flex; }
    .tn-lang { width: 36px; height: 25px; }
    .tn-lang span { display: none; }
}

@media (max-width: 900px) {
    .tn-wrap,
    .tn-wrap.tn-size-wide,
    .tn-wrap.tn-size-narrow,
    .tn-wrap.tn-media-right,
    .tn-wrap.tn-media-right.tn-size-wide,
    .tn-wrap.tn-media-right.tn-size-narrow {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tn-wrap .tn-media,
    .tn-wrap.tn-media-right .tn-media { order: -1; }
    .tn-wrap.tn-media-bottom .tn-media { order: 2; }
}

/* Fare ile derinlik: kapalıyken bu sınıflar hiç üretilmez */
.tn-parallax {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
}
.tn-px-layer { will-change: transform; }
.tn-px-bg { transform: scale(1.08); transform-origin: center center; }
.tn-px-glow {
    position: absolute;
    inset: 8%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 42% 28%, rgba(232, 197, 71, 0.28), transparent 58%);
    mix-blend-mode: screen;
}
.tn-px-spark {
    position: absolute;
    z-index: 3;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f3e2a2;
    box-shadow: 0 0 10px rgba(232, 197, 71, 0.9);
    pointer-events: none;
}
.tn-px-spark-lg { width: 6px; height: 6px; opacity: 0.75; }
.tn-px-model {
    position: absolute;
    z-index: 4;
    width: auto;
    max-width: 52%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.5));
}
.tn-px-model.is-left,
.tn-px-model.is-top-left,
.tn-px-model.is-bottom-left { left: 6%; }
.tn-px-model.is-right,
.tn-px-model.is-top-right,
.tn-px-model.is-bottom-right { right: 6%; }
.tn-px-model.is-center,
.tn-px-model.is-top-center,
.tn-px-model.is-bottom-center { left: 50%; transform: translate3d(-50%, 0, 0); }
.tn-px-model.is-left,
.tn-px-model.is-center,
.tn-px-model.is-right { bottom: 0; height: 94%; }
.tn-px-model.is-top-left,
.tn-px-model.is-top-center,
.tn-px-model.is-top-right { top: 2%; height: 58%; }
.tn-px-model.is-bottom-left,
.tn-px-model.is-bottom-center,
.tn-px-model.is-bottom-right { bottom: 0; height: 58%; }
.tn-rise {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
.tn-media, .tn-body { position: relative; }
.tn-rise i {
    position: absolute;
    bottom: -8px;
    border-radius: 50%;
    background: rgba(243, 226, 162, 0.9);
    box-shadow: 0 0 8px rgba(232, 197, 71, 0.65);
    opacity: 0;
    animation-name: tnRise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes tnRise {
    0% { bottom: -6%; opacity: 0; }
    8% { opacity: 0.85; }
    50% { opacity: 0.6; }
    100% { bottom: 104%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tn-px-glow, .tn-px-spark, .tn-rise { display: none; }
}