/* ==========================================================================
   WHITOO EXPLORE — GORSEL KATMAN (2026-08-28)

   Bu dosya SADECE gorunumu yukseltir. Hicbir isaretleme, baglanti ya da
   dugme degistirilmedi: kartlarin hepsi zaten gercek kontrol
   (.whitoo-quick-match-open, .whitoo-create-normal, markt SSO baglantisi,
   .whitoo-create-ai, join_by_link formu) ve oldugu gibi calismaya devam
   ediyor. Bu yuzden burada calismayan tek bir dugme yok - yeni dugme
   EKLENMEDI, var olanlar yeniden giydirildi.

   Kapsam: yalnizca body.whitoo-explore-active — oda ekranina dokunmaz.
   Geri alma: chat_room.html icindeki bu dosyanin <link> satirini sil.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

body.whitoo-explore-active {
    --wxp-line:  rgba(255, 255, 255, .065);
    --wxp-line2: rgba(255, 255, 255, .10);
    --wxp-fill:  linear-gradient(168deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014));
    --wxp-lift:  inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 46px rgba(0, 0, 0, .42);
    --wxp-red:   #ef2b52;
    --wxp-text:  #f2f5fc;
    --wxp-mute:  #8b93a7;
    --wxp-dim:   #6b7488;
}

/* ---------- hareket sozlugu ---------- */
@keyframes wxpRise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wxpGlint { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes wxpSweep { to { transform: rotate(360deg); } }
@keyframes wxpHalo  { 0% { transform: scale(.9); opacity: .65; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
@keyframes wxpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* kaydirdikca yerine oturan bolumler */
@keyframes wxpIn { from { opacity: .001; transform: translateY(34px) scale(.99); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
    body.whitoo-explore-active .wx26-discover,
    body.whitoo-explore-active .wx26-join,
    body.whitoo-explore-active .wx26-welcome,
    body.whitoo-explore-active .wx26-cats,
    body.whitoo-explore-active .wx26-top {
        animation: wxpIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}

/* ==========================================================================
   1) KESFET — asimetrik duzen + radar imzasi
   ========================================================================== */
body.whitoo-explore-active .wx26-discover {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    padding: clamp(26px, 2.6vw, 40px) !important;
    border: 1px solid var(--wxp-line);
    border-radius: 22px;
    background: var(--wxp-fill);
    box-shadow: var(--wxp-lift);
}

/* radar taramasi: "KESFET" basligindaki radar ikonunun gorsel karsiligi */
body.whitoo-explore-active .wx26-discover::before {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -260px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .5;
    background:
        repeating-radial-gradient(circle, rgba(239, 43, 82, .11) 0 1px, transparent 1px 54px),
        conic-gradient(from 0deg, rgba(239, 43, 82, .22), transparent 32%);
    animation: wxpSweep 18s linear infinite;
    -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 72%);
    mask-image: radial-gradient(circle, #000 42%, transparent 72%);
}
body.whitoo-explore-active .wx26-discover > * { position: relative; z-index: 1; }

body.whitoo-explore-active .wx26-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 2.6px;
    font-size: 10.5px;
    font-weight: 600;
}
body.whitoo-explore-active .wx26-discover-copy h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 2.9vw, 42px);
    line-height: 1.08;
    letter-spacing: -1.6px;
    color: var(--wxp-text);
    text-wrap: pretty;
}
body.whitoo-explore-active .wx26-discover-copy p {
    font-weight: 300;
    line-height: 1.65;
    color: var(--wxp-mute);
}

/* ---------- aksiyon kartlari: bento ritmi ---------- */
body.whitoo-explore-active .wx26-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
/* Asimetrik ritim: ust satir 3+3, alt satir 2+4.
   Woo AI en genis kutu - sayfanin one cikardigi eylem o. */
body.whitoo-explore-active .wx26-cards > *:nth-child(1) { grid-column: span 3; }
body.whitoo-explore-active .wx26-cards > *:nth-child(2) { grid-column: span 3; }
body.whitoo-explore-active .wx26-cards > *:nth-child(3) { grid-column: span 2; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) { grid-column: span 4; }

body.whitoo-explore-active .wx26-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wxp-line);
    border-radius: 16px;
    background: var(--wxp-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-color .26s ease, box-shadow .26s ease;
}
body.whitoo-explore-active .wx26-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}
body.whitoo-explore-active .wx26-card:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 43, 82, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 26px 54px rgba(0, 0, 0, .5);
}
body.whitoo-explore-active .wx26-card:hover::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }
body.whitoo-explore-active .wx26-card:focus-visible {
    outline: 2px solid rgba(239, 43, 82, .7);
    outline-offset: 2px;
}
body.whitoo-explore-active .wx26-ct strong {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: .7px;
}
body.whitoo-explore-active .wx26-ct small { color: var(--wxp-mute); line-height: 1.5; }

/* kart rengi kimligi korunur, sadece derinlesir */
body.whitoo-explore-active .wx26-card:has(.wx26-c-red)    { background: linear-gradient(150deg, rgba(239, 43, 82, .11), rgba(255, 255, 255, .014)); }
body.whitoo-explore-active .wx26-card:has(.wx26-c-green)  { background: linear-gradient(150deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .014)); }
body.whitoo-explore-active .wx26-card:has(.wx26-c-blue)   { background: linear-gradient(150deg, rgba(59, 130, 246, .10), rgba(255, 255, 255, .014)); }
body.whitoo-explore-active .wx26-card:has(.wx26-c-purple) {
    background: linear-gradient(150deg, rgba(168, 85, 247, .15), rgba(255, 255, 255, .014));
    border-color: rgba(168, 85, 247, .24);
}

body.whitoo-explore-active .wx26-chips span {
    border: 1px solid var(--wxp-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--wxp-mute);
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), border-color .2s ease, color .2s ease;
}
body.whitoo-explore-active .wx26-chips span:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 43, 82, .5);
    color: #ffd9e0;
}

body.whitoo-explore-active .wx26-studio {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 12px;
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-studio:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(168, 85, 247, .28);
}

/* ==========================================================================
   2) DAVET ILE ERISIM
   ========================================================================== */
body.whitoo-explore-active .wx26-join {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(239, 43, 82, .2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 6% 50%, rgba(239, 43, 82, .13), transparent 40%),
        var(--wxp-fill);
    box-shadow: var(--wxp-lift);
}
body.whitoo-explore-active .wx26-join-ico { animation: wxpFloat 5s ease-in-out infinite; }
body.whitoo-explore-active .wx26-join input[type="text"],
body.whitoo-explore-active .wx26-join .form-control {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    border-radius: 13px;
    border: 1px solid var(--wxp-line);
    background: rgba(5, 7, 13, .72);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join input[type="text"]:focus,
body.whitoo-explore-active .wx26-join .form-control:focus {
    border-color: rgba(239, 43, 82, .55);
    box-shadow: 0 0 0 3px rgba(239, 43, 82, .12);
}
body.whitoo-explore-active .wx26-join button[type="submit"],
body.whitoo-explore-active .wx26-join .btn-primary {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 13px;
    background: linear-gradient(100deg, #ef2b52, #c81e4a);
    border: 0;
    box-shadow: 0 14px 32px rgba(239, 43, 82, .36);
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join button[type="submit"]:hover,
body.whitoo-explore-active .wx26-join .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(239, 43, 82, .48);
}

/* ==========================================================================
   3) HOS GELDIN + HIZLI BAGLANTILAR
   ========================================================================== */
body.whitoo-explore-active .wx26-welcome {
    border: 1px solid var(--wxp-line);
    border-radius: 20px;
    background: var(--wxp-fill);
    box-shadow: var(--wxp-lift);
}
body.whitoo-explore-active .wx26-quick-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9.5px;
    letter-spacing: 2.2px;
    color: #5f6779;
}
body.whitoo-explore-active .wx26-quick-items > * {
    border-radius: 10px;
    transition: transform .18s cubic-bezier(.2, .9, .25, 1), background .18s ease, color .18s ease;
}
body.whitoo-explore-active .wx26-quick-items > *:hover {
    transform: translateX(2px);
    background: rgba(239, 43, 82, .1);
    color: #ffd9e0;
}

/* ==========================================================================
   4) KATEGORILER — tiklanabilirlik korunur, sadece his degisir
   ========================================================================== */
body.whitoo-explore-active .wx26-cats h2,
body.whitoo-explore-active .wx26-top h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(21px, 2.1vw, 30px);
    letter-spacing: -1.1px;
    color: var(--wxp-text);
}
body.whitoo-explore-active .wx26-cat-chips > * {
    border: 1px solid var(--wxp-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .028);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), border-color .2s ease, background .2s ease, color .2s ease;
}
body.whitoo-explore-active .wx26-cat-chips > *:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 43, 82, .5);
    background: rgba(239, 43, 82, .1);
    color: #ffd9e0;
}

/* ==========================================================================
   5) EN IYI TOPLULUKLAR — oda kartlari
   ========================================================================== */
body.whitoo-explore-active .chatroom-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wxp-line);
    border-radius: 18px;
    background: var(--wxp-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-color .26s ease, box-shadow .26s ease;
}
body.whitoo-explore-active .chatroom-item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: 2;
}
body.whitoo-explore-active .chatroom-item:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 43, 82, .42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 58px rgba(0, 0, 0, .5);
}
body.whitoo-explore-active .chatroom-item:hover::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }
body.whitoo-explore-active .lt-room-title {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -.3px;
}

/* ==========================================================================
   6) hareketi kapatanlar
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.whitoo-explore-active *,
    body.whitoo-explore-active *::before,
    body.whitoo-explore-active *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* dar ekranda bento tek sutuna duser */
@media (max-width: 900px) {
    body.whitoo-explore-active .wx26-discover { grid-template-columns: minmax(0, 1fr); }
    body.whitoo-explore-active .wx26-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.whitoo-explore-active .wx26-cards > * { grid-column: span 1 !important; }
}
@media (max-width: 560px) {
    body.whitoo-explore-active .wx26-cards { grid-template-columns: minmax(0, 1fr); }
}

/* bolum ust etiketleri (EN IYI TOPLULUKLAR, KATEGORILER ...) */
body.whitoo-explore-active .wx26-top-copy > *:first-child,
body.whitoo-explore-active .wx26-cat-row > *:first-child {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 2.4px;
}

/* ==========================================================================
   7) SES KURESI — "ONE WORLD. ENDLESS VOICES." cumlesinin gorsel karsiligi
   Tamamen dekoratif: pointer-events yok, hicbir kontrolun onunu kesmez.
   ========================================================================== */
@keyframes wxpGlobe  { to { transform: rotateY(360deg); } }
@keyframes wxpTwink  { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes wxpOrbit  { to { offset-distance: 100%; } }

body.whitoo-explore-active .wxp-globe {
    position: absolute;
    right: -40px;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    opacity: .72;
}
body.whitoo-explore-active .wxp-globe::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    filter: blur(58px);
    background: radial-gradient(circle, rgba(239, 43, 82, .5), rgba(168, 85, 247, .18) 52%, transparent 70%);
}
body.whitoo-explore-active .wxp-globe svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}
body.whitoo-explore-active .wxp-mer {
    transform-origin: 210px 210px;
    animation: wxpGlobe 15s linear infinite;
}
body.whitoo-explore-active .wxp-mer-2 { animation-delay: -5s; }
body.whitoo-explore-active .wxp-mer-3 { animation-delay: -10s; }

body.whitoo-explore-active .wxp-node   { animation: wxpTwink 3.2s ease-in-out infinite; }
body.whitoo-explore-active .wxp-node-2 { animation-delay: .6s; }
body.whitoo-explore-active .wxp-node-3 { animation-delay: 1.3s; }
body.whitoo-explore-active .wxp-node-4 { animation-delay: 2s; }

body.whitoo-explore-active .wxp-spark {
    offset-path: path('M132 128 Q 210 60 286 164');
    animation: wxpOrbit 3.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
body.whitoo-explore-active .wxp-spark-2 {
    offset-path: path('M104 246 Q 190 340 252 292');
    animation: wxpOrbit 4.2s cubic-bezier(.4, 0, .6, 1) .8s infinite;
}

/* kure kartlarin arkasinda kalsin, metin okunur olsun */
body.whitoo-explore-active .wx26-discover-copy,
body.whitoo-explore-active .wx26-cards { position: relative; z-index: 2; }
/* kure kartlarin altinda kalinca yazi okunurlugu dusmesin diye kartlara
   ince bir zemin karartmasi ekliyoruz */
body.whitoo-explore-active .wx26-card { backdrop-filter: blur(3px); }

@media (max-width: 1200px) {
    body.whitoo-explore-active .wxp-globe { width: 360px; height: 360px; right: -110px; opacity: .34; }
}
@media (max-width: 900px) {
    body.whitoo-explore-active .wxp-globe { display: none; }
}

/* ==========================================================================
   8) UC ADIM SERIDI
   ========================================================================== */
body.whitoo-explore-active .wxp-steps {
    margin-bottom: var(--wx-gap, 18px);
}
body.whitoo-explore-active .wxp-steps-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.6px;
    color: var(--wxp-red);
}
body.whitoo-explore-active .wxp-steps-label::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--wxp-red);
}
body.whitoo-explore-active .wxp-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--wxp-line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--wxp-line);
}
body.whitoo-explore-active .wxp-step {
    position: relative;
    overflow: hidden;
    padding: 28px 26px;
    background: #0b0d16;
    transition: background .26s ease;
}
body.whitoo-explore-active .wxp-step::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}
body.whitoo-explore-active .wxp-step:hover { background: #0e1120; }
body.whitoo-explore-active .wxp-step:hover::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }
body.whitoo-explore-active .wxp-step-no {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--wxp-red);
}
body.whitoo-explore-active .wxp-n2 { color: #ff6b81; }
body.whitoo-explore-active .wxp-n3 { color: #a855f7; }
body.whitoo-explore-active .wxp-step strong {
    display: block;
    margin-top: 13px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.9px;
    color: var(--wxp-text);
}
body.whitoo-explore-active .wxp-step small {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--wxp-mute);
}
@supports (animation-timeline: view()) {
    body.whitoo-explore-active .wxp-steps {
        animation: wxpIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}
@media (max-width: 760px) {
    body.whitoo-explore-active .wxp-steps-grid { grid-template-columns: minmax(0, 1fr); }
    body.whitoo-explore-active .wxp-step { padding: 22px 20px; }
    body.whitoo-explore-active .wxp-step strong { font-size: 21px; }
}

/* ==========================================================================
   9) KAHRAMAN — afis slaytinin yerine gecen bolum (2026-08-28)
   ========================================================================== */
@keyframes wxpLetter { from { opacity: 0; transform: translateY(88%) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes wxpFlow   { to { background-position: 300% 0; } }
@keyframes wxpDrift  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes wxpBlink  { 0%, 40% { transform: scaleY(0); } 42.5% { transform: scaleY(1); } 45%, 86% { transform: scaleY(0); } 88.5% { transform: scaleY(1); } 91%, 100% { transform: scaleY(0); } }
@keyframes wxpEq     { 0%, 100% { height: 22%; } 50% { height: 100%; } }

body.whitoo-explore-active .wxp-hero {
    position: relative;
    /* Bootstrap'in .d-lg-block kurali display:block !important ile geliyordu;
       sinif sablondan kaldirildi, yine de garanti olsun diye zorluyoruz. */
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: 24px;
    min-height: 0;
    padding: 46px 44px;
    overflow: hidden;
    border: 1px solid rgba(239, 43, 82, .2);
    border-radius: 24px;
    background:
        radial-gradient(120% 80% at 78% 40%, rgba(239, 43, 82, .2), transparent 56%),
        radial-gradient(70% 60% at 12% 10%, rgba(168, 85, 247, .12), transparent 60%),
        linear-gradient(122deg, #120a12 0%, #0d0f1c 54%, #08090f 100%);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
body.whitoo-explore-active .wxp-hero-copy { position: relative; z-index: 2; min-width: 0; }

body.whitoo-explore-active .wxp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 15px 7px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.4px;
    color: #ff9fb0;
}
body.whitoo-explore-active .wxp-hero-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef2b52;
}
body.whitoo-explore-active .wxp-hero-dot::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1.5px solid #ef2b52;
    border-radius: 50%;
    animation: wxpHalo 2.6s ease-out infinite;
}

/* harf harf acilan baslik */
body.whitoo-explore-active .wxp-hero-title {
    margin: 22px 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.4vw, 66px);
    line-height: .94;
    font-weight: 700;
    letter-spacing: -2.6px;
    color: #f2f5fc;
}
body.whitoo-explore-active .wxp-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
body.whitoo-explore-active .wxp-w > span { display: inline-block; animation: wxpLetter .82s cubic-bezier(.16, 1, .3, 1) both; }
body.whitoo-explore-active .wxp-w > span:nth-child(1) { animation-delay: .10s; }
body.whitoo-explore-active .wxp-w > span:nth-child(2) { animation-delay: .15s; }
body.whitoo-explore-active .wxp-w > span:nth-child(3) { animation-delay: .20s; }
body.whitoo-explore-active .wxp-w > span:nth-child(4) { animation-delay: .25s; }
body.whitoo-explore-active .wxp-w > span:nth-child(5) { animation-delay: .30s; }
body.whitoo-explore-active .wxp-w > span:nth-child(6) { animation-delay: .35s; }
body.whitoo-explore-active .wxp-w > span:nth-child(7) { animation-delay: .40s; }
/* Gradyan HARFLERE uygulanmali: metin cocuk span'lerin icinde, ustteki
   kutuda dogrudan metin yok - orada background-clip:text bos alani kirpip
   yaziyi tamamen gorunmez yapiyordu. */
body.whitoo-explore-active .wxp-flow > span {
    background: linear-gradient(96deg, #ef2b52 0%, #ff7d92 22%, #f4ece6 48%, #ff7d92 74%, #ef2b52 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: wxpLetter .82s cubic-bezier(.16, 1, .3, 1) both, wxpFlow 8s linear infinite;
}

body.whitoo-explore-active .wxp-hero-lead {
    margin: 22px 0 0;
    max-width: 430px;
    font-size: 16px;
    line-height: 1.68;
    font-weight: 300;
    color: #98a1b6;
    text-wrap: pretty;
}
body.whitoo-explore-active .wxp-hero-lead b { color: #f2f5fc; font-weight: 400; }

body.whitoo-explore-active .wxp-hero-cta { display: flex; gap: 11px; margin-top: 28px; }
body.whitoo-explore-active .wxp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 26px;
    border-radius: 13px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease, border-color .2s ease;
}
/* whitoo-brand.css icinde `a { color: var(--whitoo-red-2) !important }` var -
   secicisiz ve !important'li oldugu icin kirmizi dugmede kirmizi yazi cikiyordu.
   Bu yuzden dugme renklerini de !important ile sabitliyoruz. */
body.whitoo-explore-active .wxp-btn-main {
    background: linear-gradient(100deg, #ef2b52, #c81e4a);
    color: #fff !important;
    box-shadow: 0 16px 38px rgba(239, 43, 82, .42);
}
body.whitoo-explore-active .wxp-btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(239, 43, 82, .55); color: #fff !important; }
body.whitoo-explore-active .wxp-btn-main i { color: #fff !important; }
body.whitoo-explore-active .wxp-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .12);
    color: #f2f5fc !important;
}
body.whitoo-explore-active .wxp-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .26); color: #f2f5fc !important; }

/* gercek sayilar */
body.whitoo-explore-active .wxp-hero-stats {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
body.whitoo-explore-active .wxp-stat b {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1.1px;
    color: #f2f5fc;
}
body.whitoo-explore-active .wxp-stat small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    letter-spacing: .3px;
    color: #6b7488;
}
body.whitoo-explore-active .wxp-stat-sep { width: 1px; height: 32px; background: rgba(255, 255, 255, .08); }
body.whitoo-explore-active .wxp-stat-live { color: #ff8fa3 !important; }
body.whitoo-explore-active .wxp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
body.whitoo-explore-active .wxp-eq i { width: 2.5px; background: #ef2b52; border-radius: 2px; animation: wxpEq 1s ease-in-out infinite; }
body.whitoo-explore-active .wxp-eq i:nth-child(2) { background: #ff6b81; animation-delay: .14s; }
body.whitoo-explore-active .wxp-eq i:nth-child(3) { animation-delay: .28s; }

/* kure + maskot */
body.whitoo-explore-active .wxp-hero-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 0;
    aspect-ratio: 1 / .78;
}
body.whitoo-explore-active .wxp-hero-globe { position: relative; width: min(340px, 100%); aspect-ratio: 1; }
body.whitoo-explore-active .wxp-hero-globe::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    filter: blur(62px);
    background: radial-gradient(circle, rgba(239, 43, 82, .5), rgba(168, 85, 247, .18) 52%, transparent 70%);
}
body.whitoo-explore-active .wxp-hero-globe svg { position: relative; width: 100%; height: 100%; overflow: visible; }
body.whitoo-explore-active .wxp-mer-4 { animation-delay: -12s; }
body.whitoo-explore-active .wxp-node-5 { animation-delay: 2.6s; }
body.whitoo-explore-active .wxp-spark-3 {
    offset-path: path("M286 164 Q 350 200 330 238");
    animation: wxpOrbit 2.8s cubic-bezier(.4, 0, .6, 1) 1.4s infinite;
}

body.whitoo-explore-active .wxp-hero-mascot {
    position: absolute;
    right: 6%;
    bottom: 6%;
    width: 152px;
    animation: wxpDrift 5s ease-in-out infinite;
    filter: drop-shadow(0 22px 46px rgba(239, 43, 82, .55));
}
body.whitoo-explore-active .wxp-hero-mascot img { display: block; width: 100%; height: auto; }
body.whitoo-explore-active .wxp-lid {
    position: absolute;
    transform: scaleY(0);
    transform-origin: top center;
    background: linear-gradient(180deg, #ded8da 0%, #f2eff0 38%, #f8f6f7 100%);
    border-radius: 46% 46% 50% 50%/18% 18% 58% 58%;
    animation: wxpBlink 4.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
body.whitoo-explore-active .wxp-lid-l { left: 22.5%; top: 30.1%; width: 28.5%; height: 22.4%; }
body.whitoo-explore-active .wxp-lid-r { left: 58.5%; top: 30.6%; width: 28%; height: 21.9%; }

@media (max-width: 1200px) {
    body.whitoo-explore-active .wxp-hero { padding: 38px 32px; min-height: 380px; }
    body.whitoo-explore-active .wxp-hero-globe { width: 320px; height: 320px; }
    body.whitoo-explore-active .wxp-hero-mascot { width: 118px; }
    body.whitoo-explore-active .wxp-hero-stats { gap: 20px; }
}

@media (max-width: 991.98px) {
    body.whitoo-explore-active .wxp-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 30px 22px;
        text-align: left;
    }
    body.whitoo-explore-active .wxp-hero-art { display: none; }
    body.whitoo-explore-active .wxp-hero-stats { gap: 16px; margin-top: 26px; padding-top: 18px; }
    body.whitoo-explore-active .wxp-stat b { font-size: 22px; }
    body.whitoo-explore-active .wxp-hero-cta { flex-wrap: wrap; }
    body.whitoo-explore-active .wxp-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   10) BENTO — maketteki duzen (2026-08-28)
   Ust satir: WOO AI tam genislik.  Alt satir: uc esit kutu.
   DOM sirasi 1=hizli esles 2=sunucu 3=market 4=woo ai oldugu icin
   yerlesim grid-row / grid-column ile veriliyor; isaretleme sirasi bozulmadi.
   ========================================================================== */
body.whitoo-explore-active .wx26-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto;
    align-content: start;
    gap: 12px;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(4) { grid-column: 1 / -1; grid-row: 1; }
body.whitoo-explore-active .wx26-cards > *:nth-child(1) { grid-column: 1; grid-row: 2; }
body.whitoo-explore-active .wx26-cards > *:nth-child(2) { grid-column: 2; grid-row: 2; }
body.whitoo-explore-active .wx26-cards > *:nth-child(3) { grid-column: 3; grid-row: 2; }

/* ---- uc kucuk kutu: ikon ustte, metin altta ---- */
body.whitoo-explore-active .wx26-cards > *:nth-child(1),
body.whitoo-explore-active .wx26-cards > *:nth-child(2),
body.whitoo-explore-active .wx26-cards > *:nth-child(3) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 18px 18px !important;
    text-align: left;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-ct,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-ct,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-ct {
    display: block;
    margin-top: 34px;
    text-align: left;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-ct strong,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-ct strong,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-ct strong {
    display: block;
    font-size: 12px;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-ct small,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-ct small,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-ct small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}
/* ok isaretleri kucuk kutularda gereksiz — kutunun tamami zaten tiklanabilir */
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-go,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-go,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-go {
    display: none;
}

/* ---- Woo AI: genis kutu ---- */
body.whitoo-explore-active .wx26-cards > *:nth-child(4) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 14px;
    padding: 22px 24px !important;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-ci { align-self: center; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-go { align-self: center; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-ct { text-align: left; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-ct strong { font-size: 12.5px; }

/* yazan istem kutusu */
@keyframes wxpType  { from { width: 0; } to { width: 100%; } }
body.whitoo-explore-active .wxp-ai-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 11px 0 9px;
    padding: 11px 14px;
    border: 1px solid rgba(168, 85, 247, .22);
    border-radius: 11px;
    background: rgba(5, 7, 13, .66);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: .4px;
    color: #d8b4fe;
    white-space: nowrap;
    overflow: hidden;
}
body.whitoo-explore-active .wxp-ai-prompt em { font-style: normal; color: #6b7488; }
body.whitoo-explore-active .wxp-ai-prompt i {
    width: 7px;
    height: 14px;
    background: #a855f7;
    animation: wxpCaret 1s step-end infinite;
}
@keyframes wxpCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ==========================================================================
   11) DAVET CUBUGU — maketteki tek satir hali
   Form ve girdi AYNEN duruyor, yalnizca giydiriliyor.
   ========================================================================== */
body.whitoo-explore-active .wx26-join .lt-join-link-card {
    display: grid;
    grid-template-columns: minmax(0, .34fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
}
body.whitoo-explore-active .wx26-join .lt-join-link-copy small { display: none; }
body.whitoo-explore-active .wx26-join .lt-join-link-copy span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.4px;
    color: #ff9fb0;
}
body.whitoo-explore-active .wx26-join .lt-join-link-copy strong {
    display: block;
    margin-top: 7px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: #f2f5fc;
}
body.whitoo-explore-active .wx26-join .lt-join-link-form {
    display: contents;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    height: 54px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(5, 7, 13, .72);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input:focus-within {
    border-color: rgba(239, 43, 82, .55);
    box-shadow: 0 0 0 3px rgba(239, 43, 82, .12);
}
body.whitoo-explore-active .wx26-join .lt-join-link-input i { color: #6b7488; font-size: 17px; }
body.whitoo-explore-active .wx26-join .lt-join-link-input input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .3px;
    color: #ff8fa3;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input input::placeholder { color: #ff8fa3; opacity: .7; }
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 54px;
    padding: 0 34px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(100deg, #ef2b52, #c81e4a);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(239, 43, 82, .38);
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"] i { color: #fff !important; }
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(239, 43, 82, .5);
}
body.whitoo-explore-active .wx26-join .lt-join-link-error { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    body.whitoo-explore-active .wx26-join .lt-join-link-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    body.whitoo-explore-active .wx26-join .lt-join-link-copy { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    body.whitoo-explore-active .wx26-cards > * { grid-column: auto !important; grid-row: auto !important; }
    body.whitoo-explore-active .wx26-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.whitoo-explore-active .wx26-join .lt-join-link-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    body.whitoo-explore-active .wx26-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   12) DAVET CUBUGU — referansa gore sadelestirme (2026-08-28)
   Soldaki ikon rozeti, baslik ikonu ve girdideki dunya ikonu kaldirildi;
   girdinin onune gri "whitoo.com/" oneki kondu. Form ve girdi AYNEN duruyor.
   ========================================================================== */
body.whitoo-explore-active .wx26-join { padding: 18px 24px !important; }
body.whitoo-explore-active .wx26-join .wx26-join-ico { display: none !important; }
body.whitoo-explore-active .wx26-join .lt-join-link-copy span i { display: none !important; }
body.whitoo-explore-active .wx26-join .lt-join-link-input > i { display: none !important; }

body.whitoo-explore-active .wx26-join .lt-join-link-card {
    gap: 20px;
    grid-template-columns: minmax(0, .30fr) minmax(0, 1fr) auto;
}
body.whitoo-explore-active .wx26-join .lt-join-link-copy strong {
    margin-top: 4px;
    font-size: 19px;
    line-height: 1.2;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input {
    position: relative;
    height: 50px;
    padding: 0 18px;
    gap: 0;
}
/* gri onek — girdinin kendisi degismedi, yalnizca onunde duruyor */
body.whitoo-explore-active .wx26-join .lt-join-link-input::before {
    content: "whitoo.com/";
    flex: 0 0 auto;
    margin-right: 7px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .3px;
    color: #6b7488;
    pointer-events: none;
}
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"] {
    height: 50px;
    padding: 0 30px;
}
@media (max-width: 900px) {
    body.whitoo-explore-active .wx26-join { padding: 18px 18px !important; }
}

/* ==========================================================================
   13) ODA KARTLARI — referansa gore (2026-08-28)
   Isaretleme AYNEN duruyor (room_loop.html): kapak, ikon, baslik, dogrulama
   rozeti, sahip + WOO ROZETI, uye sayisi ve "Sunucuya gir" bagi. Sadece
   yerlesim ve yuzey degisti. Kartin tamami hala tek bir <a> — tiklama alani
   kucultulmedi.
   ========================================================================== */
body.whitoo-explore-active .room-loop-link { text-decoration: none; display: block; }
body.whitoo-explore-active .room-loop-link:hover { text-decoration: none; }

body.whitoo-explore-active .room-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wxp-line) !important;
    border-radius: 18px !important;
    background: var(--wxp-fill) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-color .26s ease, box-shadow .26s ease;
}
body.whitoo-explore-active .room-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: 3;
}
body.whitoo-explore-active .room-loop-link:hover .room-card {
    transform: translateY(-5px);
    border-color: rgba(239, 43, 82, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 58px rgba(0, 0, 0, .5) !important;
}
body.whitoo-explore-active .room-loop-link:hover .room-card::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }

/* ---- kapak ---- */
body.whitoo-explore-active .room-card .card-img-top {
    position: relative;
    height: 132px !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
}
/* alt tarafa karartma: ikon ve baslik alani okunur kalsin */
body.whitoo-explore-active .room-card .card-img-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 8, 15, .12) 0%, rgba(7, 8, 15, .55) 62%, rgba(11, 13, 22, .95) 100%);
}

/* ---- govde ---- */
body.whitoo-explore-active .room-card .card-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    padding: 0 18px 18px !important;
}
/* oda ikonu: kapagin alt kenarina binen kare rozet */
body.whitoo-explore-active .room-card .card-body > .room-image {
    grid-column: 1 / -1;
    position: relative;
    z-index: 2;
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
    border-radius: 13px !important;
    border: 2px solid rgba(11, 13, 22, .9) !important;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
body.whitoo-explore-active .room-card .lt-room-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0 !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--wxp-text);
}
body.whitoo-explore-active .room-card .lt-room-title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.whitoo-explore-active .room-card .lt-room-verified {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(52, 211, 153, .16);
    color: #6ee7b7;
    font-size: 11px;
}

/* aciklama: iki satirda kesilir, kartlar esit boyda kalir */
body.whitoo-explore-active .room-card .card-body > p {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 9px 0 0 !important;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--wxp-mute) !important;
}

/* ---- alt satir: solda sahip + Woo rozeti + uye sayisi, sagda dugme ---- */
body.whitoo-explore-active .room-card .room-stats {
    grid-column: 1;
    grid-row: 4;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 16px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 11.5px;
    color: var(--wxp-mute);
}
body.whitoo-explore-active .room-card .room-owner-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
body.whitoo-explore-active .room-card .room-owner-name {
    min-width: 0;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* WOO ROZETI KALIYOR — sadece hizalanip biraz kuculuyor */
body.whitoo-explore-active .room-card .woo-server-member-badge img {
    width: 26px;
    height: auto;
    display: block;
}
body.whitoo-explore-active .room-card .room-stats .ms-auto {
    margin-left: auto !important;
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .2px;
    white-space: nowrap;
}
body.whitoo-explore-active .room-card .room-stats i { color: var(--wxp-dim); }

/* "Sunucuya gir" — alt satirin sagina, kompakt dugme */
body.whitoo-explore-active .room-card .whitoo-room-card-action {
    grid-column: 2;
    grid-row: 4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    align-self: end;
    margin: 16px 0 0 !important;
    padding: 9px 15px !important;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--wxp-text) !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2, .9, .25, 1);
}
body.whitoo-explore-active .room-loop-link:hover .whitoo-room-card-action {
    border-color: transparent;
    background: #ef2b52;
    color: #fff !important;
    transform: translateY(-1px);
}
body.whitoo-explore-active .room-card .whitoo-room-card-action i { font-size: 14px; }

@media (max-width: 640px) {
    body.whitoo-explore-active .room-card .card-body { grid-template-columns: minmax(0, 1fr); }
    body.whitoo-explore-active .room-card .room-stats { grid-column: 1; grid-row: auto; }
    body.whitoo-explore-active .room-card .whitoo-room-card-action {
        grid-column: 1;
        grid-row: auto;
        margin-top: 12px !important;
        justify-content: center;
    }
}

/* ==========================================================================
   13b) ODA KARTLARI — oncelik duzeltmesi (2026-08-28)
   whitoo-refresh.css icinde `#chat-room-list ... .card-body { display:flex }`
   var; ID tasidigi icin sinif secicilerimi eziyor ve kart icerigini ortaliyordu.
   Yerlesimi belirleyen ozellikleri !important ile sabitliyoruz.
   ========================================================================== */
body.whitoo-explore-active .room-card .card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 0 12px !important;
    padding: 0 18px 18px !important;
}
body.whitoo-explore-active .room-card .room-image {
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.whitoo-explore-active .room-card .lt-room-title {
    justify-self: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
body.whitoo-explore-active .room-card .card-body > p {
    justify-self: stretch !important;
    -webkit-line-clamp: 2 !important;
    text-align: left !important;
}
body.whitoo-explore-active .room-card .room-stats {
    justify-self: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
}
body.whitoo-explore-active .room-card .whitoo-room-card-action {
    justify-self: end !important;
    width: auto !important;
}

/* ==========================================================================
   13c) ODA KARTLARI — son duzeltmeler (2026-08-28)
   1. Aciklamanin display'i baska bir kuralla flow-root'a duşuyordu; iki satirda
      kesilmesi icin -webkit-box zorunlu.
   2. "Sunucuya gir" dugmesi 128px yer kapliyordu, sahip adina 0px kaliyordu.
      Dugme kompaktlastirildi, isim icin yer acildi.
   ========================================================================== */
body.whitoo-explore-active .room-card .card-body > p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

body.whitoo-explore-active .room-card .whitoo-room-card-action {
    gap: 6px !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
}
body.whitoo-explore-active .room-card .whitoo-room-card-action i { font-size: 13px !important; }

body.whitoo-explore-active .room-card .room-stats { gap: 8px !important; }
body.whitoo-explore-active .room-card .room-owner-meta { flex: 0 1 auto; min-width: 0; }
body.whitoo-explore-active .room-card .room-owner-name {
    max-width: 84px !important;
    flex: 0 1 auto;
}
body.whitoo-explore-active .room-card .room-stats .ms-auto { padding-left: 4px; }
body.whitoo-explore-active .room-card .woo-server-member-badge { flex: 0 0 auto; }

/* ==========================================================================
   13d) ODA KARTLARI — iki inatci sorun (2026-08-28)

   1) ACIKLAMA KIRPILMIYORDU. Sebep: .card-body'yi grid yaptik; grid/flex
      cocuklari "bloklasiyor" ve `display:-webkit-box` hayatta kalmiyor
      (computed: flow-root), boylece -webkit-line-clamp devre disi kaliyor.
      Cozum: clamp yerine iki satirlik max-height ile kirpmak.
   2) SAHIP ADI 0px'e cokuyordu. Esnek kutuda `flex: 0 1 auto` + `min-width:0`
      birlesimi ogeyi tamamen ezilebilir yapiyor; sikisinca once o siliniyordu.
      Cozum: taban genislik vermek ve satirin sarmasina izin vermek.
   ========================================================================== */
body.whitoo-explore-active .room-card .card-body > p {
    display: block !important;
    line-height: 1.55 !important;
    max-height: 3.1em !important;   /* tam iki satir */
    overflow: hidden !important;
}

body.whitoo-explore-active .room-card .room-stats {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
}
body.whitoo-explore-active .room-card .room-owner-name {
    flex: 1 1 auto !important;
    min-width: 56px !important;
    max-width: 120px !important;
}

/* 13e) Aciklama punto'su da ID'li bir kuralla 18px kaliyordu; max-height em
   cinsinden oldugu icin iki satir yerine uc satir gorunuyordu. */
body.whitoo-explore-active .room-card .card-body > p {
    font-size: 12.5px !important;
}
body.whitoo-explore-active .room-card .room-stats {
    font-size: 11.5px !important;
}
body.whitoo-explore-active .room-card .room-stats .ms-auto {
    font-size: 11px !important;
}

/* 13f) Izgara ogelerinde `min-height: auto` varsayilani icerik yuksekligine
   esitlenir ve max-height'i EZER — aciklama bu yuzden kirpilmiyordu. */
body.whitoo-explore-active .room-card .card-body > p {
    min-height: 0 !important;
}
body.whitoo-explore-active .room-card .woo-server-member-badge img {
    width: 22px !important;
}

/* ==========================================================================
   14) ODA KARTLARI — referans duzeni (2026-08-28)
   Yeni parcalar: kapak rozeti, ikon+ad+kategori basligi, DOGRULANMIS cipi,
   ORTAK ARKADAS avatarlari. Woo rozeti ve sahip satiri korundu.
   ========================================================================== */

/* --- kapaktaki kategori rozeti --- */
body.whitoo-explore-active .room-card .room-cat-badge {
    position: absolute;
    top: 12px;
    left: 13px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(7, 8, 15, .78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #ff9fb0;
    white-space: nowrap;
    max-width: calc(100% - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- baslik satiri: ikon + (ad / kategori) + dogrulama --- */
body.whitoo-explore-active .room-card .room-head {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin-top: 16px;
}
body.whitoo-explore-active .room-card .room-head .room-image {
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: none;
    object-fit: cover;
}
body.whitoo-explore-active .room-card .room-head-text { min-width: 0; flex: 1 1 auto; }
body.whitoo-explore-active .room-card .room-head .lt-room-title {
    display: block !important;
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.25;
}
body.whitoo-explore-active .room-card .room-head-cat {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--wxp-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.whitoo-explore-active .room-card .room-head .lt-room-verified {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: auto;
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(52, 211, 153, .13);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #6ee7b7;
}
body.whitoo-explore-active .room-card .room-head .lt-room-verified i { font-size: 11px; }

/* --- ORTAK ARKADAS AVATARLARI --- */
body.whitoo-explore-active .room-card .room-mutuals {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
body.whitoo-explore-active .room-card .room-mutuals img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0b0d16;
    background: #12141f;
}
body.whitoo-explore-active .room-card .room-mutuals img + img { margin-left: -9px; }
body.whitoo-explore-active .room-card .room-mutual-more {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    margin-left: -9px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #0b0d16;
    background: rgba(239, 43, 82, .2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: #ff9fb0;
}

/* --- sahip satiri arkadas avatarlari varken alta iner --- */
body.whitoo-explore-active .room-card .room-owner-second {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin-top: 9px !important;
    font-size: 11px;
    color: var(--wxp-dim);
}
body.whitoo-explore-active .room-card .room-owner-second .room-owner-name {
    max-width: 150px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   14b) SON DUZELTMELER (2026-08-28)
   1. Oda ikonu `#chat-room-loop .room-image` kuraliyla `position:absolute;
      top:-30px` tasiyordu; baslik satirinin icinde akmasi icin static'e cekildi.
   2. Satir sirasi: sahip satiri -> arkadas avatarlari + uye sayisi + dugme.
   ========================================================================== */
body.whitoo-explore-active .room-card .room-head .room-image {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

body.whitoo-explore-active .room-card .room-owner-second {
    grid-row: 4;
    grid-column: 1 / -1;
    margin-top: 15px !important;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
body.whitoo-explore-active .room-card .card-body:has(.room-owner-second) .room-stats {
    grid-row: 5 !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
body.whitoo-explore-active .room-card .card-body:has(.room-owner-second) .whitoo-room-card-action {
    grid-row: 5 !important;
    margin-top: 10px !important;
}

/* ==========================================================================
   14c) ORTAK ARKADAS AVATARLARI — boyut zorlamasi (2026-08-28)
   `#chat-room-loop` altindaki eski bir kural kart icindeki tum img'lere
   width:100% veriyor; avatarlar dev cikip duzeni bozuyordu. ID onceligini
   asmak icin olculeri !important ile sabitliyoruz.
   ========================================================================== */
body.whitoo-explore-active .room-card .room-mutuals {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
body.whitoo-explore-active .room-card .room-mutuals img {
    width: 25px !important;
    height: 25px !important;
    min-width: 0 !important;
    max-width: 25px !important;
    min-height: 0 !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    border-radius: 50% !important;
    border: 2px solid #0b0d16 !important;
    object-fit: cover !important;
    background: #12141f !important;
    display: block !important;
}
body.whitoo-explore-active .room-card .room-mutuals img + img { margin-left: -9px !important; }
body.whitoo-explore-active .room-card .room-mutual-more {
    flex: 0 0 auto !important;
    margin-left: -9px !important;
}

/* ==========================================================================
   14d) SAHIP SATIRI TEK TIP (2026-08-28)
   Ortak arkadasi olan kartta sahip .room-owner-second icinde, olmayan kartta
   .room-stats icinde duruyordu; iki kutu farkli renk/punto veriyordu.
   Ikisini de ayni degerlere sabitliyoruz.
   ========================================================================== */
body.whitoo-explore-active .room-card .room-owner-meta,
body.whitoo-explore-active .room-card .room-owner-second {
    font-size: 11.5px !important;
    color: #8b93a7 !important;
}
body.whitoo-explore-active .room-card .room-owner-meta .room-owner-name,
body.whitoo-explore-active .room-card .room-owner-second .room-owner-name {
    color: #8b93a7 !important;
    font-weight: 400 !important;
}
body.whitoo-explore-active .room-card .room-owner-meta > i,
body.whitoo-explore-active .room-card .room-owner-second > i {
    color: #6b7488 !important;
    font-size: 13px !important;
}

/* kapak rozeti kalktigi icin kuralini da etkisizlestiriyoruz */
body.whitoo-explore-active .room-card .room-cat-badge { display: none !important; }

/* kategori satiri oda adinin hemen altinda, sade */
body.whitoo-explore-active .room-card .room-head-cat {
    font-size: 11.5px !important;
    color: #6b7488 !important;
}