@import url('./perjetesi-theme.css');
body.perjetesi-site {
    background: var(--ivory);
    font-family: var(--font-body);
    color: #101D39;
    -webkit-font-smoothing: antialiased;
}
.perjetesi-home {
    min-width: 0;
    --home-gutter: clamp(24px,4.8vw,80px);
}
.perjetesi-hero {
    min-height: calc(100svh - 96px);
    background: #BFDCEF url('../assets/perjetesi-homepage-desktop.webp') right top/cover no-repeat;
}
.perjetesi-hero-description--desktop,.perjetesi-hero-actions--desktop,.perjetesi-desktop-features { display: none; }
.perjetesi-hero-copy {
    margin: 24px var(--home-gutter) 0;
    padding-bottom: clamp(90px,10vw,160px);
    max-width: 680px;
}
.perjetesi-hero-copy h1 {
    margin: 0;
    color: #091631;
    font: 600 clamp(60px,5.7vw,96px)/.94 var(--font-heading);
    letter-spacing: -.025em;
}
.perjetesi-hero-copy p {
    max-width: 600px;
    margin: 26px 0 32px;
    color: #40536D;
    font: 400 clamp(17px,1.25vw,21px)/1.5 var(--font-body);
}
.perjetesi-hero-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    max-width: 500px;
}
.perjetesi-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid #C79C55;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font: 500 15px/1.3 var(--font-body);
}
.perjetesi-button.primary {
    background: linear-gradient(145deg,#DEAF67,#BE873F);
    color: #fff;
}
.perjetesi-button.secondary {
    background: linear-gradient(180deg,#FFFEFB,#F5F2EB);
    color: #101D39;
}
.perjetesi-button:hover {
    border-color: #8d652c;
    filter: brightness(.97);
}
@media (min-width: 961px) {
    .perjetesi-hero {
        min-height: 100svh;
        background: radial-gradient(ellipse 340px 190px at 180px 90px, rgba(247,243,235,.55), rgba(247,243,235,0) 100%), linear-gradient(90deg, rgba(247,243,235,.78) 0%, rgba(247,243,235,.65) 26%, rgba(247,243,235,.3) 39%, rgba(247,243,235,0) 50%), #dce9f2 url('../images/home-desktop-hero-optimized.webp') center center/cover no-repeat;
    }
    .perjetesi-hero-copy {
        max-width: 790px;
        margin: 0 0 0 clamp(54px,5.3vw,100px);
        padding: calc(clamp(180px,23vh,260px) + 36px) 0 54px;
    }
    .perjetesi-hero-copy h1 {
        color: #151b20;
        font-size: clamp(79px,7.7vw,130px);
        font-weight: 500;
        line-height: .77;
        letter-spacing: -.045em;
        transform: translateY(-40px);
    }
    .perjetesi-hero-copy .perjetesi-hero-description--desktop {
        display: block;
        max-width: 600px;
        margin: 24px 0 28px;
        color: #22272b;
        font: 500 clamp(22px,1.8vw,28px)/1.3 var(--font-heading);
        transform: translateY(-40px);
    }
    .perjetesi-hero-description--mobile,.perjetesi-hero-actions--mobile{ display: none; }
    .perjetesi-hero-actions--desktop {
        display: grid;
        grid-template-columns: repeat(2,max-content);
        gap: 16px;
        max-width: 640px;
    }
    .perjetesi-hero-actions--desktop .perjetesi-button {
        justify-content: center;
        gap: 10px;
        min-height: 54px;
        padding: 12px 20px;
        font: 600 clamp(20px,1.55vw,25px)/1 var(--font-heading);
        letter-spacing: .01em;
        box-shadow: inset 0 1px 0 #ffffff99, inset 0 -1px 0 #8e713526, 0 4px 12px #5840211f;
    }
    .perjetesi-hero-actions--desktop .perjetesi-button.primary { background: linear-gradient(145deg,rgba(222,175,103,.86),#F8D3AD); color: #352719; }
    .perjetesi-hero-actions--desktop .perjetesi-button svg { flex: none; width: 18px; height: 18px; stroke-width: 1.35; }
    .perjetesi-hero-actions--desktop .perjetesi-button.secondary { background: linear-gradient(145deg,rgba(255,253,250,.88) 0%,rgba(242,232,216,.82) 55%,rgba(225,203,169,.84) 100%); border-color: #B79A65; color: #34383B; }
    .perjetesi-desktop-features {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        max-width: 560px;
        gap: 16px;
        margin-top: clamp(30px,4vh,55px);
    }
    .perjetesi-desktop-feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
        padding: 12px 16px 18px;
        border: 1px solid rgba(196,181,159,.55);
        border-radius: 16px;
        background: linear-gradient(rgba(231,193,144,.12),rgba(231,193,144,.12)), rgba(255,252,246,.94);
        box-shadow: 0 4px 16px rgba(70,55,36,.06);
        text-align: center;
    }
    .perjetesi-desktop-feature img { display: block; width: clamp(80px,6.5vw,96px); height: clamp(80px,6.5vw,96px); margin-bottom: 6px; object-fit: contain; }
    .perjetesi-desktop-feature strong { color: #1e2428; font: 600 clamp(22px,1.85vw,26px)/1.15 var(--font-heading); }
    .perjetesi-desktop-feature span { max-width: 250px; margin-top: 12px; color: #465057; font: 500 clamp(16px,1.2vw,18px)/1.45 var(--font-heading); }
}
@media (min-width: 1101px) {
    body.perjetesi-site > .unified-header { position: absolute; top: 0; left: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.perjetesi-site .unified-header__inner { grid-template-columns: 260px minmax(0,1fr) auto; gap: clamp(10px,1.5vw,24px); width: min(1840px,calc(100% - 8vw)); min-height: 150px; }
    body.perjetesi-site .unified-header__brand { display: block; width: 260px; }
    body.perjetesi-site .unified-header__wordmark,body.perjetesi-site .unified-header__tagline { display: none; }
    body.perjetesi-site .unified-header__home-logo { display: block; width: 100%; height: auto; }
    body.perjetesi-site .unified-header__home-menu { display: flex; position: absolute; top: 27px; left: 50%; align-items: center; gap: clamp(14px,1.5vw,22px); width: max-content; max-width: calc(100vw - 32px); padding: 8px 14px 8px 22px; border: 1px solid rgba(226,213,193,.8); border-radius: 5px; background: rgba(250,248,244,.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 4px 20px rgba(55,49,38,.09); transform: translateX(-50%); }
    body.perjetesi-site .unified-header__nav { gap: clamp(22px,2vw,34px); white-space: nowrap; }
    body.perjetesi-site .unified-header__nav a { font-size: clamp(17px,1.25vw,20px); }
    body.perjetesi-site .unified-header__actions { gap: 14px; padding-left: 0; border-left: 0; }
    body.perjetesi-site .unified-header__home-search { display: flex; align-items: center; gap: 9px; width: clamp(120px,10vw,155px); min-height: 46px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(255,255,255,.82); color: #34383b; }
    body.perjetesi-site .unified-header__home-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #34383b; font: 400 16px/1 var(--font-heading); }
    body.perjetesi-site .unified-header__home-search input::placeholder { color: #7d7b78; }
    body.perjetesi-site .unified-header__account { padding-left: 14px; border-left: 1px solid rgba(71,71,69,.4); }
    body.perjetesi-site .unified-header__account :is(summary, .unified-header__account-link) { width: 50px; height: 50px; background: #EEC695; color: #33383b; }
    body.perjetesi-site .unified-header__account svg { width: 28px; height: 28px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
    .perjetesi-hero { min-height: calc(100svh - 72px); }
    .perjetesi-hero-copy { padding-top: 131px; }
}
@media(max-width:960px) {
    .perjetesi-home {
        --home-gutter: clamp(24px,7.3vw,36px);
    }
    .perjetesi-hero {
        position: relative;
        min-height: calc(100svh - 72px);
        background: var(--ivory);
    }
    .perjetesi-hero::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: calc(100svh - 72px);
        z-index: 0;
        pointer-events: none;
        background: #F4E9D9 url('../images/homepage-background-mobile-right-clouds.png?v=20261018a') right bottom/cover no-repeat;
    }
    .perjetesi-hero>.perjetesi-hero-copy {
        position: relative;
        z-index: 1;
    }
    .perjetesi-hero-copy {
        margin: 0 var(--home-gutter);
        padding-top: clamp(40px,8vh,80px);
        padding-bottom: max(48px,env(safe-area-inset-bottom));
        max-width: 620px;
    }
    .perjetesi-hero-copy h1 {
        font-size: calc(clamp(54px,15.2vw,80px) - 4px);
        line-height: .94;
        letter-spacing: -.035em;
        color: #34383B;
    }
    .perjetesi-hero-copy p {
        max-width: min(100%,70vw);
        margin: 16.8px 0 30px;
        font-size: calc(clamp(18px,4.5vw,21px) + 3px);
        line-height: 1.45;
        font-family: var(--font-heading);
        font-weight: 700;
        color: #2B2B2B;
    }
    .perjetesi-hero-actions{
        width: min(100%,80vw);
    }
    .perjetesi-hero-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: fit-content;
        max-width: min(100%,500px);
        gap: 18px;
        padding-top: 40px;
    }
    .perjetesi-hero-actions--desktop { display: none; }
    .perjetesi-button {
        min-height: 52px;
        padding: 12px 16px;
        gap: 6px;
        font-family: var(--font-heading);
        font-size: clamp(18px,4.6vw,21px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: .01em;
        white-space: nowrap;
        box-shadow: inset 0 1px 0 #ffffff99, inset 0 -1px 0 #8e713526, 0 4px 12px #5840211f;
        transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .perjetesi-button svg {
        flex: none;
        width: 15px;
        height: 15px;
    }
    .perjetesi-button.primary {
        background: linear-gradient(145deg,rgba(222,175,103,.86),#F8D3AD);
        border-color: #C79C55;
        color: #352719;
    }
    .perjetesi-button.secondary {
        background: linear-gradient(145deg,rgba(255,253,250,.88) 0%,rgba(242,232,216,.82) 55%,rgba(225,203,169,.84) 100%);
        border-color: #B79A65;
        color: #34383B;
    }
    .perjetesi-button:hover {
        filter: none;
    }
    .perjetesi-button.primary:hover {
        background: linear-gradient(145deg,rgba(222,175,103,.86),#F8D3AD);
        border-color: #A77A38;
    }
    .perjetesi-button.secondary:hover {
        background: linear-gradient(145deg,rgba(255,253,248,.94) 0%,rgba(237,224,202,.88) 55%,rgba(217,191,152,.90) 100%);
        border-color: #A48752;
    }
    .perjetesi-button:active {
        box-shadow: inset 0 2px 3px rgba(0,0,0,.12);
    }
    .perjetesi-button:focus-visible {
        outline: 2px solid #B79A65;
        outline-offset: 4px;
    }
}
@media(min-width:601px) and (max-width:960px) {
    .perjetesi-hero-copy p {
        max-width: 510px;
    }
}
@media(max-width:380px) {
    .perjetesi-button {
        font-size: 20px;
    }
}