/* ===== HOME SEARCH HERO (full viewport landing search) ===== */

/* Hide the layout navbar search bar when this hero is in use */
body.navbar-search-hidden .navbar-search-container,
body.navbar-search-hidden .navbar-search-container-mobile {
    display: none !important;
}

/* Hero section ------------------------------------------------------------ */
.home-search-hero {
    position: relative;
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
    margin-top: -0.5rem;
    margin-bottom: 2rem;
    background: transparent;
    border: none;
    border-radius: 0;
}

@media (min-width: 768px) {
    .home-search-hero {
        /* Desktop'ta iki katli navbar var (~5-6rem). Compact navbar'a uyacak sekilde
           cikartilan miktari kuculttuk; aksi halde hero kisa kaliyor ve alttaki section
           viewport'a siziyordu. */
        min-height: calc(100vh - 5.5rem);
        padding: 3rem 2rem 4rem;
    }
}

.home-search-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Logo -------------------------------------------------------------------- */
.home-search-hero-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.home-search-hero-logo {
    height: 56px;
    width: auto;
    max-width: 280px;
}

@media (min-width: 768px) {
    .home-search-hero-logo {
        height: 80px;
        max-width: 360px;
    }
}

/* Typewriter -------------------------------------------------------------- */
.home-search-hero-typewriter {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2.6rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #475569;
    letter-spacing: -0.01em;
    line-height: 1.4;
    padding: 0 0.5rem;
}

@media (min-width: 768px) {
    .home-search-hero-typewriter {
        font-size: 1.25rem;
        min-height: 2rem;
    }
}

.home-search-hero-typewriter-prefix {
    color: #1e293b;
    font-weight: 700;
}

.home-search-hero-typewriter-text {
    color: #4f46e5;
    font-weight: 600;
    white-space: pre;
}

.home-search-hero-typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    background: #4f46e5;
    transform: translateY(2px);
    animation: home-search-hero-blink 1s steps(2, start) infinite;
}

@keyframes home-search-hero-blink {
    to { visibility: hidden; }
}

/* Search input wrapper (overrides on top of _SearchBoxPartial) ------------ */
.home-search-hero-search-wrapper {
    width: 100%;
    max-width: 720px;
}

.home-search-hero-search-wrapper .search-form {
    margin: 0;
}

.home-search-hero-search-wrapper .search-box-wrap {
    box-shadow: 0 18px 45px -22px rgba(79, 70, 229, 0.45),
                0 6px 18px -10px rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    background: #ffffff;
}

.home-search-hero-search-wrapper .search-term-input {
    height: 60px;
    font-size: 1.05rem;
    padding: 0.75rem 5.5rem 0.75rem 1.5rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-search-hero-search-wrapper .search-term-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.home-search-hero-search-wrapper .search-term-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
    outline: none;
}

@media (min-width: 768px) {
    .home-search-hero-search-wrapper .search-term-input {
        height: 68px;
        font-size: 1.15rem;
        padding-left: 1.75rem;
        padding-right: 6rem;
    }
}

.home-search-hero-search-wrapper .search-language-dropdown {
    right: 0.4rem;
}

/* Suggestion chips -------------------------------------------------------- */
.home-search-hero-suggestions {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.home-search-hero-suggestions-label {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-search-hero-suggestions-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
}

.home-search-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.85);
    color: #1e293b;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-search-hero-chip:hover,
.home-search-hero-chip:focus-visible {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.home-search-hero-chip-game {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.12);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
}

.home-search-hero-chip:hover .home-search-hero-chip-game,
.home-search-hero-chip:focus-visible .home-search-hero-chip-game {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Scroll hint ------------------------------------------------------------- */
.home-search-hero-scroll-hint {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 1.5rem;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation: home-search-hero-bounce 2s ease-in-out infinite;
}

.home-search-hero-scroll-hint i {
    font-size: 1.1rem;
    color: #6366f1;
}

@keyframes home-search-hero-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ===== DARK THEME ======================================================== */
.theme-dark .home-search-hero {
    background: transparent;
    border: none;
}

.theme-dark .home-search-hero-typewriter {
    color: #cbd5e1;
}

.theme-dark .home-search-hero-typewriter-prefix {
    color: #f1f5f9;
}

.theme-dark .home-search-hero-typewriter-text {
    color: #a5b4fc;
}

.theme-dark .home-search-hero-typewriter-cursor {
    background: #a5b4fc;
}

.theme-dark .home-search-hero-search-wrapper .search-box-wrap {
    background: #1e293b;
    box-shadow: 0 18px 45px -22px rgba(79, 70, 229, 0.55),
                0 6px 18px -10px rgba(0, 0, 0, 0.45);
}

.theme-dark .home-search-hero-search-wrapper .search-term-input {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

.theme-dark .home-search-hero-search-wrapper .search-term-input::placeholder {
    color: #94a3b8;
}

.theme-dark .home-search-hero-search-wrapper .search-term-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.22);
}

.theme-dark .home-search-hero-suggestions-label {
    color: #94a3b8;
}

.theme-dark .home-search-hero-chip {
    background: rgba(30, 41, 59, 0.85);
    border-color: #334155;
    color: #e2e8f0;
}

.theme-dark .home-search-hero-chip:hover,
.theme-dark .home-search-hero-chip:focus-visible {
    background: #6366f1;
    border-color: #818cf8;
    color: #ffffff;
}

.theme-dark .home-search-hero-chip-game {
    color: #c7d2fe;
    background: rgba(129, 140, 248, 0.18);
}

.theme-dark .home-search-hero-scroll-hint {
    color: #94a3b8;
}

.theme-dark .home-search-hero-scroll-hint i {
    color: #a5b4fc;
}

/* ===== LAYOUT TWEAKS WHEN HERO IS ACTIVE ================================ */

/* Hide the top navbar logo on the homepage hero (hero already has the logo). */
body.navbar-search-hidden .navbar-brand {
    display: none !important;
}

/* Strip the top navbar visual weight so it blends into the hero. */
body.navbar-search-hidden header > nav.navbar:first-child {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

body.navbar-search-hidden header > nav.navbar:first-child .navbar-content {
    min-height: 40px;
}

/* Same for the secondary navigation menu (desktop categories bar). */
body.navbar-search-hidden header > nav.navbar:nth-of-type(2) {
    background: transparent !important;
    border-bottom: 0 !important;
}

/* On desktop, the first navbar has nothing useful left on the homepage
   (logo and search are hidden, the icons moved to the nav menu row),
   so collapse it entirely. Mobile still needs it for the hamburger button. */
@media (min-width: 768px) {
    body.navbar-search-hidden header > nav.navbar:first-child {
        display: none !important;
    }
}

/* Pull main content tight against the slimmer navbar. */
body.navbar-search-hidden main[role="main"] {
    padding-top: 0;
}

body.navbar-search-hidden .home-search-hero {
    margin-top: -1rem;
}

/* Dark theme parity */
.theme-dark body.navbar-search-hidden header > nav.navbar:first-child,
.theme-dark body.navbar-search-hidden header > nav.navbar:nth-of-type(2) {
    background: transparent !important;
    border-bottom: 0 !important;
}

/* ===== MOBILE HEADER FIX (site.css forces header { background: white }) === */

/* Generic dark theme: mobile header should not be white. */
@media (max-width: 767px) {
    .theme-dark header {
        background: #0f172a !important;
        border-bottom-color: #334155 !important;
    }

    .theme-dark header > nav.navbar:first-child {
        background: transparent !important;
        border-bottom-color: #334155 !important;
    }
}

/* Homepage hero on mobile: header transparent so the page bg shows through. */
@media (max-width: 767px) {
    body.navbar-search-hidden header {
        background: transparent !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
}