@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root {
    /* TAEKWONDO FUSION LOGO PALETTE */
    --blue:#243e9b;        /* biru uniform/logo */
    --red:#f20d0d;         /* merah background logo */
    --yellow:#ffe600;      /* kuning wreath/logo */
    --green:#59b92c;       /* hijau kecil dalam logo */

    --ink:#101010;         /* hitam logo */
    --paper:#fffdf8;       /* warm white */
    --silver:#f4f3ed;
    --border:#deddd5;

    --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
    --body:'DM Sans',Arial,sans-serif;
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font:16px/1.65 var(--body)
}
a {
    color:inherit;
    text-decoration:none
}
button {
    cursor:pointer
}
img {
    max-width:100%;
    display:block;
    object-fit:cover
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    line-height:1.02
}
h1,h2 {
    font-family:var(--display);
    font-weight:900;
    letter-spacing:-.025em
}
h1 {
    font-size:clamp(4rem,7.7vw,7.8rem)
}
h2 {
    font-size:clamp(2.8rem,4.5vw,4.8rem)
}
h3 {
    font-family:var(--display);
    font-size:2rem;
    font-weight:800
}
p {
    max-width:65ch
}
button:disabled {
    cursor:not-allowed;
    opacity:.65
}
.site-shell {
    max-width:1480px;
    margin:auto;
    padding:0 4.4%
}
.skip-link {
    position:fixed;
    top:-100px;
    left:16px;
    background:white;
    padding:12px;
    z-index:99
}
.skip-link:focus {
    top:12px
}
.blue {
    color:var(--blue)
}
.eyebrow {
    font-weight:800;
    font-size:.78rem;
    letter-spacing:.16em;
    margin-bottom:20px
}
.site-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:23px 0;
    position:relative;
    z-index:5;
    border-bottom:1px solid var(--border)
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0
}
.brand img {
    width:78px;
    height:78px;
    object-fit:contain;
    border-radius:50%;
    background:#000
}
.brand>span {
    font:900 1.7rem/.95 var(--display);
    font-style:italic
}
.brand small {
    display:block;
    font:700 .61rem/1.3 var(--body);
    letter-spacing:.08em;
    margin-top:7px
}
.site-header nav {
    display:flex;
    gap:3px;
    padding:5px;
    background:var(--silver);
    border-radius:40px
}
.site-header nav a {
    font-size:.87rem;
    font-weight:700;
    border-radius:30px;
    padding:9px 18px
}
.site-header nav a:hover {
    background:#dde6fb
}
.site-header nav a[aria-current] {
    background:var(--blue);
    color:white
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    border-radius:50px;
    background:var(--blue);
    border:2px solid var(--blue);
    color:#fff;
    font-weight:800;
    line-height:1.4;
    padding:15px 26px;
    transition:transform .18s,box-shadow .18s
}
.button span {
    font-size:1.35em
}
.button:hover:not(:disabled) {
    transform:translateY(-3px);
    box-shadow:0 6px 0 #1224471a
}
.button.outline {
    background:transparent;
    color:var(--ink);
    border-color:var(--ink)
}
.button.white {
    background:white;
    border-color:white;
    color:var(--blue)
}
.nav-cta {
    font-size:.88rem;
    padding:10px 21px
}
.menu-toggle {
    display:none;
    border:0;
    background:transparent;
    padding:12px
}
.menu-toggle span {
    display:block;
    background:var(--ink);
    width:26px;
    height:3px;
    margin:5px
}
.photo-frame {
    background:var(--blue);
    border-radius:42% 15% 28% 12%;
    transform:rotate(3deg);
    overflow:hidden;
    border:7px solid white;
    box-shadow:14px 15px 0 var(--blue),-14px -12px 0 #e6ebf4
}
.photo-frame img {
    height:440px;
    width:100%;
    object-position:center;
    transform:scale(1.06) rotate(-3deg)
}
.sticker {
    display:inline-block;
    background:white;
    border:3px solid var(--ink);
    padding:14px 19px;
    border-radius:17px;
    box-shadow:5px 5px 0 var(--blue);
    font:900 1.65rem/.98 var(--display);
    font-style:italic
}
.sticker b {
    color:var(--red)
}
.section {
    padding:78px 0
}
.sky {
    background:#d8eaff
}
.red {
    background:var(--red);
    color:white
}
.silver {
    background:var(--silver)
}
.card-number {
    font-size:.77rem;
    font-weight:800;
    letter-spacing:.12em
}
.card-symbol {
    position:absolute;
    top:38px;
    right:25px;
    font-size:5rem;
    font-weight:800;
    line-height:1;
    transform:rotate(12deg)
}
footer {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:25px;
    justify-content:space-between;
    padding:25px 0 35px;
    border-top:1px solid var(--border)
}
.footer-brand img {
    width:52px;
    height:52px
}
.footer-brand>span {
    font-size:1.1rem
}
.footer-brand small {
    font-size:.7rem;
    font-weight:500;
    letter-spacing:0
}
footer nav {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    font-size:.82rem;
    font-weight:700
}
footer nav a:hover {
    color:var(--blue)
}
footer>p {
    font-size:.75rem;
    color:#586172
}
.page-heading {
    padding:65px 0 45px;
    max-width:900px
}
.page-heading h1 {
    font-size:clamp(4rem,6.5vw,6.8rem);
    margin-bottom:25px
}
.page-heading>p:last-child {
    font-size:1.1rem;
    max-width:600px
}
dialog {
    padding:48px 18px 18px;
    border:0;
    border-radius:20px;
    max-width:90vw;
    max-height:90vh;
    background:#fff
}
dialog::backdrop {
    background:#060c20db
}
dialog img {
    max-height:70vh;
    object-fit:contain;
    margin:auto
}
dialog p {
    padding:12px 0 0;
    text-align:center
}
.history-emblem .handwritten {
    margin:35px auto
}
@media(min-width:1480px) {
    .site-shell {
        padding:0 65px
    }

}
@media(max-width:1100px) {
    .site-shell {
        padding:0 28px
    }

    .site-header {
        gap:12px
    }

    .site-header nav a {
        padding:9px 12px
    }

    .brand>span {
        font-size:1.4rem
    }

    .brand img {
        width:65px;
        height:65px
    }

    .nav-cta {
        padding:10px 15px
    }

    .photo-frame img {
        height:400px
    }

}
@media(max-width:900px) {
    .nav-cta {
        display:none
    }

    .menu-toggle {
        display:block;
        margin-left:auto
    }

    .site-header nav {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        padding:14px;
        background:white;
        border:1px solid var(--border);
        border-radius:18px;
        box-shadow:0 15px 25px #18273d1a
    }

    .site-header nav.is-open {
        display:flex
    }

    .site-header nav a {
        padding:12px 18px
    }

    .photo-frame img {
        height:360px
    }

    .sticker {
        font-size:1.35rem
    }

    .card-symbol {
        font-size:3.3rem;
        right:17px;
        top:52px
    }

}
@media(max-width:650px) {
    .site-shell {
        padding:0 20px
    }

    .site-header {
        padding:15px 0
    }

    .brand img {
        width:60px;
        height:60px
    }

    .brand>span {
        font-size:1.35rem
    }

    .brand small {
        font-size:.55rem
    }

    .eyebrow {
        font-size:.7rem;
        letter-spacing:.12em
    }

    .photo-frame img {
        height:330px
    }

    .section {
        padding:50px 0
    }

    .card-symbol {
        right:32px;
        top:58px;
        font-size:5rem
    }

    footer {
        gap:24px
    }

    footer nav {
        gap:18px;
        font-size:.82rem
    }

    .page-heading {
        padding:40px 0 32px
    }

    .page-heading h1 {
        font-size:clamp(3.3rem,13vw,5rem)
    }

    .page-heading>p:last-child {
        font-size:1rem
    }

    .history-emblem .handwritten {
        text-align:center
    }

}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*:before,*:after {
        transition:none!important
    }

}
/* ===== CHAMPIONSHIP ALBUM ARCHIVE ===== */
.gallery-archive-heading {
    max-width:980px
}
.all-title {
    margin-top:62px
}
.album-hero {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:35px;
    border-bottom:1px solid var(--border);
    padding-bottom:38px;
    margin-bottom:28px
}
.album-hero h1 {
    font-size:clamp(4rem,8vw,8rem);
    max-width:900px
}
#album-lightbox {
    padding:48px 18px 18px;
    border:0;
    border-radius:20px;
    max-width:94vw;
    max-height:92vh
}
#album-lightbox::backdrop {
    background:#060c20e8
}
#album-lightbox img {
    position:static;
    width:auto;
    height:auto;
    max-height:76vh;
    max-width:86vw;
    object-fit:contain;
    margin:auto;
    opacity:1
}
@media(max-width:900px) {

    .album-hero {
        align-items:start;
        flex-direction:column
    }
}
@media(max-width:650px) {

    .all-title {
        margin-top:42px
    }

    .album-hero {
        padding-bottom:25px
    }

    .album-hero h1 {
        font-size:clamp(3.3rem,15vw,5.5rem)
    }

}
@keyframes photoShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* =========================================
   CONTACT RIGHT
========================================= */
/* =========================================
   SOCIAL MEDIA
========================================= */
/* ICON */
/* =========================================
   BRAND COLORS
========================================= */
/* Facebook */
/* TikTok */
/* WhatsApp */
/* Instagram */
/* Telegram */
/* =========================================
   CONTACT FORM
========================================= */
/* =========================================
   MOBILE
========================================= */
/* =========================================
   MOBILE SIDEBAR NAVIGATION
========================================= */
@media (max-width:900px) {

    body.menu-open {
        overflow:hidden;
    }

    .nav-cta {
        display:none;
    }

    .menu-toggle {
        display:block;
        margin-left:auto;
        position:relative;
        z-index:1002;
    }

    /* SIDEBAR */
    .site-header nav {
        display:flex;
        position:fixed;

        top:0;
        right:0;
        left:auto;
        bottom:0;

        width:min(82vw,320px);
        height:100dvh;

        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;

        gap:6px;

        padding:110px 24px 30px;

        background:#fff;

        border:0;
        border-radius:0;

        box-shadow:-15px 0 40px rgba(0,0,0,.15);

        transform:translateX(110%);
        transition:transform .32s ease;

        z-index:1000;
    }

    /* BILA MENU BUKA */
    .site-header nav.is-open {
        transform:translateX(0);
    }

    .site-header nav a {
        display:block;
        width:100%;

        padding:14px 18px;

        border-radius:14px;

        font-size:1rem;
        font-weight:800;
    }

    .site-header nav a:hover {
        background:var(--silver);
    }

    .site-header nav a[aria-current] {
        background:var(--red);
        color:#fff;
    }

    /* HAMBURGER */
    .menu-toggle span {
        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform:translateY(8px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity:0;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform:translateY(-8px) rotate(-45deg);
    }
}

/* Shared form/control reset kept global because buttons are used on every page. */
button,input,textarea{font:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.65}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:5px}