/* ============================================================
   EASTER EGG — "berin" klavye gizli mesajı
   Efe'den Berin'e özel
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
#easter-egg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    cursor: pointer;
}

#easter-egg-overlay.ee--visible { opacity: 1; }
#easter-egg-overlay.ee--closing { opacity: 0; }

/* ── Grid Lines Decoration ───────────────────────────────── */
.ee-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ee-line {
    position: absolute;
    background: rgba(255,255,255,0.03);
    transform: scaleX(0);
    transform-origin: left;
}

.ee--visible .ee-line {
    transform: scaleX(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ee-line--h { height: 1px; width: 100%; }
.ee-line--v { width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; }
.ee--visible .ee-line--v { transform: scaleY(1); }

.ee-line--h1 { top: 30%; transition-delay: 0.1s !important; }
.ee-line--h2 { top: 70%; transition-delay: 0.2s !important; }
.ee-line--v1 { left: 25%; transition-delay: 0.3s !important; }
.ee-line--v2 { right: 25%; transition-delay: 0.4s !important; }

/* ── Close Button ────────────────────────────────────────── */
.ee-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.4);
    width: 40px;
    height: 40px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    z-index: 10;
}
.ee-close:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
/* Fix: SVG stroke'u explicit set et — Astra parent theme ezmesin */
.ee-close svg { stroke: rgba(255,255,255,0.65); fill: none; }
.ee-close:hover svg { stroke: #fff; }
.ee-smile svg path { stroke: rgba(130,0,0,0.8); }
/* ── Content ─────────────────────────────────────────────── */
.ee-content {
    text-align: center;
    position: relative;
    z-index: 5;
    padding: 2rem;
    max-width: 600px;
}

/* ── Message Lines ───────────────────────────────────────── */
.ee-message p {
    margin: 0;
    overflow: hidden;
    line-height: 1.2;
    cursor: default;
}

.ee-line-1, .ee-line-2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    font-weight: 600;
    color: #EEEEEE;
    letter-spacing: -0.03em;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.ee-line-3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: #820000;
    font-weight: 500;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    margin-top: 0.5rem;
}

.ee-line-4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgba(255,255,255,0.5);
    font-weight: 400;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    margin-top: 0.25rem;
}

.ee--visible .ee-line-1 { transform: translateY(0); opacity: 1; transition-delay: 0.3s; }
.ee--visible .ee-line-2 { transform: translateY(0); opacity: 1; transition-delay: 0.5s; }
.ee--visible .ee-line-3 { transform: translateY(0); opacity: 1; transition-delay: 0.9s; }
.ee--visible .ee-line-4 { transform: translateY(0); opacity: 1; transition-delay: 1.1s; }

/* ── Divider ─────────────────────────────────────────────── */
.ee-divider {
    width: 0;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 1.5rem auto;
    transition: width 0.8s ease;
}
.ee--visible .ee-divider { width: 120px; transition-delay: 0.8s; }

/* ── Smile ───────────────────────────────────────────────── */
.ee-smile {
    color: rgba(130,0,0,0.6);
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.ee--visible .ee-smile { opacity: 1; transform: translateY(0); transition-delay: 1.3s; }

/* ── Hint ────────────────────────────────────────────────── */
.ee-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.15);
    margin-top: 3rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ee--visible .ee-hint { opacity: 1; transition-delay: 1.8s; }

/* ── Italic styling ──────────────────────────────────────── */
.ee-efe {
    font-style: italic;
    color: #ff6677;
}

.ee-italic {
    font-style: italic;
    color: rgba(255,255,255,0.85);
}

/* ── Particle Container ──────────────────────────────────── */
.ee-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* ── Individual Particle ─────────────────────────────────── */
.ee-particle {
    position: absolute;
    pointer-events: none;
    user-select: none;
    display: inline-block;
    animation: ee-particle-fly linear forwards;
    opacity: 0;
    transform-origin: center;
    z-index: 2;
    line-height: 1;
}

@keyframes ee-particle-fly {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
    15%  { opacity: 1; transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) rotate(calc(var(--rot) * 0.3)) scale(1.2); }
    60%  { opacity: 1; transform: translate(calc(var(--tx) * 0.8), calc(var(--ty) * 0.8)) rotate(calc(var(--rot) * 0.8)) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.6); }
}

/* ── Login Welcome Popup ─────────────────────────────────── */
.login-welcome-popup {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 8000;
    background: #111;
    border: 1px solid rgba(130,0,0,0.4);
    border-radius: 4px;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    pointer-events: none;
}

.login-welcome-popup.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.lwp-check {
    color: #22c55e;
    font-size: 1rem;
}

.lwp-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
}