/*
Theme Name: Calixell
Theme URI: https://calixell.com.tr
Author: Atom & hfatih
Author URI: https://calixell.com.tr
Description: Calixell Topluluk Sitesi Teması
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calixell
*/

/* ============================================================
   ORIGINAL SITE STYLES
   ============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #04080f !important;
    color: #fff;
    font-family: 'Barlow', sans-serif;
}

/* ------- Navbar / Hero Banner ------- */
.navbarr-resim {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbarr-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    z-index: 0;
}

.containerr-default {
    position: relative;
    z-index: 1;
    text-align: center;
}

.navbarr-baslik h1 {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.navbarr-aciklama {
    font-family: 'Barlow', sans-serif;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0.75rem auto 0;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

/* ------- Sections ------- */
.team-member {
    padding: 60px 0 80px;
}

.content-top {
    text-align: center;
    margin-bottom: 40px;
}

.kadro {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: #fff;
}

/* ------- Dividers ------- */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 32px 0 20px;
    color: #fff;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
}

.divider-text {
    padding: 0 18px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 1.15rem;
    white-space: nowrap;
}

.divider-warning .divider-text {
    color: #ffc107;
    border-left: 3px solid #ffc107;
    border-right: 3px solid #ffc107;
}

.divider-danger .divider-text {
    color: #dc3545;
    border-left: 3px solid #dc3545;
    border-right: 3px solid #dc3545;
}

.divider-info .divider-text {
    color: #0dcaf0;
    border-left: 3px solid #0dcaf0;
    border-right: 3px solid #0dcaf0;
}

.divider-light .divider-text {
    color: #c0c0c0;
    border-left: 3px solid #c0c0c0;
    border-right: 3px solid #c0c0c0;
}

.divider-primary .divider-text {
    color: #6f42c1;
    border-left: 3px solid #6f42c1;
    border-right: 3px solid #6f42c1;
}

.divider-success .divider-text {
    color: #198754;
    border-left: 3px solid #198754;
    border-right: 3px solid #198754;
}

.divider-navy .divider-text {
    color: #0d6efd;
    border-left: 3px solid #0d6efd;
    border-right: 3px solid #0d6efd;
}

.divider-orange .divider-text {
    color: #fd7e14;
    border-left: 3px solid #fd7e14;
    border-right: 3px solid #fd7e14;
}

/* ------- Cards — Neon + 3D Mouse-Tracked Hover ------- */

/* Per-card neon CSS variables (overridden by JS) */
:root {
    --card-neon: rgba(255, 255, 255, 0.15);
}

.bb {
    --card-neon: #ffc107;
}

.turuncu {
    --card-neon: #fd7e14;
}

.kırmızı,
.kirmizi {
    --card-neon: #dc3545;
}

.mavi {
    --card-neon: #0dcaf0;
}

.lacivert {
    --card-neon: #0d6efd;
}

.gumus {
    --card-neon: #c0c0c0;
}

.mor {
    --card-neon: #6f42c1;
}

.yesil {
    --card-neon: #198754;
}

@property --card-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Perspective container */
.col-md-3 {
    perspective: 900px;
    perspective-origin: center center;
}

.card {
    border: none !important;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    cursor: default;
    will-change: transform;
    border-bottom: 2px solid var(--card-neon);
    box-shadow: 0 4px 12px var(--card-neon);
    transition: box-shadow 0.3s ease, border-bottom 0.3s ease;
}

/* Animated neon conic border — shows on hover */
.card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: conic-gradient(from var(--card-angle),
            transparent 0%,
            var(--card-neon) 8%,
            rgba(255, 255, 255, 0.9) 16%,
            var(--card-neon) 24%,
            transparent 40%,
            transparent 60%,
            var(--card-neon) 76%,
            transparent 90%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    padding: 1.5px;
    animation: card-border-spin 2.5s linear infinite;
    opacity: 0.4;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 2;
}

.card:hover::after {
    opacity: 1;
}

@keyframes card-border-spin {
    to {
        --card-angle: 360deg;
    }
}

/* Mouse-shine layer — position driven by JS custom props */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%),
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            transparent 70%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover::before {
    opacity: 1;
}

/* Neon glow shadows per rank */
.card:hover {
    box-shadow:
        0 0 12px 2px rgba(255, 255, 255, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.bb:hover {
    box-shadow:
        0 0 16px 4px #ffc10766,
        0 0 36px 10px #ffc10722,
        0 24px 48px rgba(0, 0, 0, 0.6);
    animation: bb-glow 1.5s ease-in-out infinite alternate;
}

@keyframes bb-glow {
    0% {
        box-shadow: 0 0 16px 4px #ffc10766, 0 0 36px 10px #ffc10722, 0 24px 48px rgba(0, 0, 0, 0.6);
    }

    100% {
        box-shadow: 0 0 24px 8px #ffc107aa, 0 0 50px 20px #ffc10766, 0 24px 48px rgba(0, 0, 0, 0.8);
    }
}

.turuncu:hover {
    box-shadow:
        0 0 16px 4px #fd7e1466,
        0 0 36px 10px #fd7e1422,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.kırmızı:hover,
.kirmizi:hover {
    box-shadow:
        0 0 16px 4px #dc354566,
        0 0 36px 10px #dc354522,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.mavi:hover {
    box-shadow:
        0 0 16px 4px #0dcaf066,
        0 0 36px 10px #0dcaf022,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.gumus:hover {
    box-shadow:
        0 0 16px 4px #c0c0c066,
        0 0 36px 10px #c0c0c022,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.mor:hover {
    box-shadow:
        0 0 16px 4px #6f42c166,
        0 0 36px 10px #6f42c122,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.yesil:hover {
    box-shadow:
        0 0 16px 4px #19875466,
        0 0 36px 10px #19875422,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

/* Profile photo ring pulse on hover */
.card:hover .rounded-circle {
    box-shadow:
        0 0 0 3px var(--card-neon),
        0 0 16px 4px color-mix(in srgb, var(--card-neon) 40%, transparent);
    transition: box-shadow 0.3s ease;
}

.card h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-top: 14px;
}

.card .btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 50px;
    font-size: 0.85rem;
    padding: 5px 20px;
    transition: all 0.25s;
    margin-top: 6px;
}

.card .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* Rank renkli kartlar */
.bb {
    border-bottom: 3px solid #ffc107 !important;
}

.kırmızı {
    border-bottom: 3px solid #dc3545 !important;
}

.kirmizi {
    border-bottom: 3px solid #dc3545 !important;
}

.mavi {
    border-bottom: 3px solid #0dcaf0 !important;
}

.turuncu {
    border-bottom: 3px solid #fd7e14 !important;
}

.lacivert {
    border-bottom: 3px solid #0d6efd !important;
}

.gumus {
    border-bottom: 3px solid #c0c0c0 !important;
}

.mor {
    border-bottom: 3px solid #6f42c1 !important;
}

.yesil {
    border-bottom: 3px solid #198754 !important;
}

/* mt-11 utility (orijinal HTML'de kullanılıyor) */
.mt-11 {
    margin-top: 0.75rem !important;
}

/* ------- FOOTER ------- */
.footer {
    padding: 60px 0 30px;
    border-top: 1.5px solid rgba(255, 255, 255, .1);
}

.footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

/* ------- FOOTER LOGO (inline SVG) ------- */
.footer-logo-container {
    display: inline-block;
    text-decoration: none;
}

.footer-logo-svg {
    display: block;
    line-height: 0;
    transition: opacity 0.25s, filter 0.25s;
    opacity: 0.92;
}

.footer-logo-svg svg {
    width: 160px;
    height: auto;
    display: block;
}

.footer-logo-container:hover .footer-logo-svg {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(243, 44, 70, 0.6)) drop-shadow(0 0 20px rgba(243, 44, 70, 0.25));
}

/* ------- SOCIAL BUTTONS — Neon Kartlar ------- */
.social-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.3s ease,
        background 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

/* Glass shine */
.social-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%);
    border-radius: 12px;
    pointer-events: none;
}

/* Glow pseudo-element (blur overlay) */
.social-btn__glow {
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: -1;
}

.social-btn__icon {
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.social-btn__label {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.25s;
    position: relative;
    z-index: 1;
}

/* HOVER base */
.social-btn:hover {
    transform: translateX(6px) translateY(-2px) scale(1.03);
    background: rgba(255, 255, 255, 0.07);
}

.social-btn:hover .social-btn__icon {
    transform: scale(1.22);
}

.social-btn:hover .social-btn__label {
    color: #fff;
}

.social-btn:hover .social-btn__glow {
    opacity: 1;
}

/* --- Discord --- */
.social-btn--discord {
    border-color: #5865F2;
    color: #5865F2;
}

.social-btn--discord .social-btn__icon {
    color: #5865F2;
}

.social-btn--discord .social-btn__glow {
    box-shadow: 0 0 18px 6px #5865F255, 0 0 40px 12px #5865F222;
    border: 1.5px solid #5865F266;
}

.social-btn--discord:hover {
    box-shadow: 0 0 14px 3px #5865F266, 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #5865F2;
}

/* --- Instagram --- */
.social-btn--instagram {
    border-color: #e1306c;
    color: #e1306c;
}

.social-btn--instagram .social-btn__icon {
    color: #e1306c;
}

.social-btn--instagram .social-btn__glow {
    box-shadow: 0 0 18px 6px #e1306c55, 0 0 40px 12px #e1306c22;
    border: 1.5px solid #e1306c66;
}

.social-btn--instagram:hover {
    box-shadow: 0 0 14px 3px #e1306c66, 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #e1306c;
}

/* --- YouTube --- */
.social-btn--youtube {
    border-color: #ff0000;
    color: #ff0000;
}

.social-btn--youtube .social-btn__icon {
    color: #ff0000;
}

.social-btn--youtube .social-btn__glow {
    box-shadow: 0 0 18px 6px #ff000055, 0 0 40px 12px #ff000022;
    border: 1.5px solid #ff000066;
}

.social-btn--youtube:hover {
    box-shadow: 0 0 14px 3px #ff000066, 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #ff0000;
}

/* --- Twitch --- */
.social-btn--twitch {
    border-color: #9147ff;
    color: #9147ff;
}

.social-btn--twitch .social-btn__icon {
    color: #9147ff;
}

.social-btn--twitch .social-btn__glow {
    box-shadow: 0 0 18px 6px #9147ff55, 0 0 40px 12px #9147ff22;
    border: 1.5px solid #9147ff66;
}

.social-btn--twitch:hover {
    box-shadow: 0 0 14px 3px #9147ff66, 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #9147ff;
}

.footer-main-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.paragraph.footer-main-content {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
}

.footer-nav-title {
    font-family: 'Chakra Petch', sans-serif;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.footer-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s;
}

.footer-nav-link:hover {
    color: #fff;
}

.footer-social-media-icon {
    width: 26px;
    text-align: center;
    font-size: 1.1rem;
}

.footer-small-print-wrapper {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tasarımcı kredi linkleri */
.footer-credit-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s, text-shadow 0.2s;
}

.footer-credit-link:hover {
    color: #ffc107;
    text-shadow: 0 0 8px #ffc10799;
}

/* ------- BAŞVURU SAYFASI ------- */
.basvuru-banner {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 32px;
}

.basvuru-banner-wrapper {
    background: url('') no-repeat center right / cover;
    height: 360px;
    border-radius: 12px;
    margin-bottom: 32px;
}

.kutu {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}

.ust-cizgi {
    width: 60px;
    height: 3px;
    background: #ffc107;
    margin-bottom: 20px;
    border-radius: 2px;
}

.kutu h1 {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 2rem;
    margin-bottom: 12px;
}

.kutu p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
}

.input-duzen {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    margin-top: 8px;
}

.input-duzen:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

.kutu h4 {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.basvuru-gonder {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 40px;
    background: #ffc107;
    color: #04080f;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.basvuru-gonder:hover {
    background: #ffd54f;
}

/* ------- PAGE HEADER (ön yüz haricinde sayfalar) ------- */
.page-hero {
    padding: 80px 0 40px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 40px;
}

.page-hero h1 {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 4px;
}

/* ─── PEMBE (Queen of CaliXell) ─── */
.pembe {
    --card-neon: #ff69b4;
    border-bottom: 3px solid #ff69b4 !important;
}

.pembe:hover {
    box-shadow:
        0 0 16px 4px #ff69b466,
        0 0 36px 10px #ff69b422,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

.divider-pink .divider-text {
    color: #ff69b4;
    border-left: 3px solid #ff69b4;
    border-right: 3px solid #ff69b4;
}

/* ─── LACİVERT HOVER (Yaşlı of CaliXell) ─── */
.lacivert:hover {
    box-shadow:
        0 0 16px 4px #0d6efd66,
        0 0 36px 10px #0d6efd22,
        0 24px 48px rgba(0, 0, 0, 0.6);
}

/* ------- RESPONSIVE ------- */
@media (max-width: 768px) {
    .navbarr-baslik h1 {
        font-size: 2.8rem;
    }

    .footer-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-nav-links {
        align-items: center;
    }
}