:root{
    --tm-sky: #2bb6ff;
    --tm-sky-2: #169ee8;
    --tm-ink: #0b2230;
    --tm-paper: #fbfbfb;
    --tm-paper-2: #f3f6f8;

    --font-display: ui-serif, 'Iowan Old Style', 'Charter', Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --accent: var(--tm-sky-2);
    --fg: var(--tm-ink);
    --muted: rgba(11,34,48,.68);
    --border: rgba(11,34,48,.12);
    --surface: var(--tm-paper);
}

body{
    font-family: ui-serif, 'Iowan Old Style', 'Charter', Georgia, serif;
    background: var(--tm-paper);
    color: var(--tm-ink);
}

.tm-noise::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index: 9999;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.018) 2px, rgba(0,0,0,.018) 4px);
}

.tm-nav{
    z-index: 10001 !important;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease, border 0.4s ease, box-shadow 0.4s ease;
}

/* Hero overlay ga blokir navbar */
.tm-hero{
    z-index: 1;
    position: relative;
}

.tm-brand{
    letter-spacing: -0.02em;
}

.tm-logo{
    width:36px;
    height:36px;
    border-radius:10px;
    object-fit:cover;
}

.tm-nav.scrolled{
    background: rgba(251,251,251,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(11,34,48,.1) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.tm-hero{
    background: radial-gradient(900px 500px at 80% -10%, rgba(43,182,255,.18), transparent 60%), var(--tm-paper);
}

.tm-eyebrow{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    color: var(--tm-sky-2);
}

.tm-display{
    font-family: ui-serif, 'Iowan Old Style', 'Charter', Georgia, serif;
    letter-spacing: -0.03em;
}

.tm-btn-primary{
    --bs-btn-bg: var(--tm-sky-2);
    --bs-btn-border-color: var(--tm-sky-2);
    --bs-btn-hover-bg: color-mix(in oklab, var(--tm-sky-2) 88%, black);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--tm-sky-2) 88%, black);
    --bs-btn-active-bg: color-mix(in oklab, var(--tm-sky-2) 78%, black);
    --bs-btn-active-border-color: color-mix(in oklab, var(--tm-sky-2) 78%, black);
}

.tm-btn-outline{
    --bs-btn-color: var(--tm-ink);
    --bs-btn-border-color: rgba(11,34,48,.35);
    --bs-btn-hover-bg: rgba(11,34,48,.06);
    --bs-btn-hover-border-color: rgba(11,34,48,.5);
    --bs-btn-active-bg: rgba(11,34,48,.1);
}

section{padding:5rem 0}
.section-ornament{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.25em;color:var(--accent);margin-bottom:.5rem}
.section-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}

.tm-section-rule{
    border-top: 1px solid rgba(11,34,48,.12);
}

.tm-card{
    border: 1px solid rgba(11,34,48,.12);
    background: var(--tm-paper);
}

.tm-card:hover{
    border-color: color-mix(in oklab, var(--tm-sky-2) 70%, rgba(11,34,48,.12));
}

.tm-muted{color: rgba(11,34,48,.68)}
.tm-brand-italic{font-style:italic}
.tm-lead-hero{max-width:52ch}
.tm-footer-desc{line-height:1.7}

.tm-vinyl{
    width: clamp(120px, 16vw, 210px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, #3a3a3a, #111 40%, #232323 60%, #1a1a1a);
    box-shadow: 0 10px 34px rgba(11,34,48,.12);
    position: relative;
}
.tm-vinyl::after{
    content:"";
    position:absolute;
    inset:38%;
    border-radius:50%;
    background: var(--tm-sky);
    opacity:.88;
}

.tm-wave stop{stop-color: color-mix(in oklab, var(--tm-sky) 40%, transparent)}

@media (max-width: 600px){
    .tm-hero{padding-top: 4.5rem}
}

/* ——— vinyl record disc ——— */
.vinyl-disc{
    width:clamp(120px,16vw,200px);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 38% 38%, #333, #111 40%, #222 60%, #1a1a1a);
    position:relative;
    margin:2rem auto 0;
    box-shadow:0 4px 30px rgba(0,0,0,.08);
}
.vinyl-disc::before{
    content:'';
    position:absolute;inset:18%;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.03);
    background:radial-gradient(circle at 38% 38%, #444, #222 50%);
}
.vinyl-disc::after{
    content:'';
    position:absolute;inset:38%;
    border-radius:50%;
    background:var(--accent);
    opacity:.8;
}
.vinyl-grooves{
    position:absolute;inset:10%;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.02);
}
.vinyl-grooves::before{
    content:'';position:absolute;inset:10%;
    border-radius:50%;border:1px solid rgba(255,255,255,.02);
}
.vinyl-grooves::after{
    content:'';position:absolute;inset:30%;
    border-radius:50%;border:1px solid rgba(255,255,255,.02);
}

/* ——— services ——— */
.section-title{
    font-family:var(--font-display);
    font-size:clamp(1.75rem,3vw,2.75rem);
    font-weight:700;
    letter-spacing:-.03em;
    line-height:1.08;
    margin-bottom:.75rem;
}
.section-sub{color:var(--muted);max-width:55ch;margin-bottom:3rem;font-size:.95rem}
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:2rem;
}
.service-card{
    background:var(--surface);
    padding:2.5rem 2rem;
    border:1px solid var(--border);
    display:flex;flex-direction:column;
    transition:border-color .25s;
}
.service-card:hover{border-color:var(--accent)}
.service-card .tier{
    font-family:var(--font-mono);
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--accent);
    margin-bottom:.75rem;
}
.service-card h3{
    font-family:var(--font-display);
    font-size:1.4rem;
    font-weight:700;
    font-style:italic;
    margin-bottom:.5rem;
}
.service-card p{
    font-size:.9rem;
    color:var(--muted);
    line-height:1.7;
    margin-bottom:1.5rem;
    flex:1;
}
.service-card .price{
    font-family:var(--font-display);
    font-size:1.75rem;
    font-weight:700;
    font-style:italic;
    letter-spacing:-.03em;
    margin-bottom:1.25rem;
}
.service-card .price small{
    display:block;
    font-size:.7rem;
    font-weight:400;
    font-style:normal;
    color:var(--muted);
}
.service-card .btn-card{
    display:inline-block;
    padding:.6rem 1.75rem;
    background:var(--fg);
    color:var(--surface);
    text-decoration:none;
    font-size:.85rem;
    letter-spacing:.02em;
    text-align:center;
    transition:opacity .25s;
}
.service-card .btn-card:hover{opacity:.85}

/* ——— about ——— */
.story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
}
.story-text h2{
    font-family:var(--font-display);
    font-size:clamp(1.75rem,3vw,2.75rem);
    font-weight:700;
    font-style:italic;
    letter-spacing:-.03em;
    line-height:1.08;
    margin-bottom:1.25rem;
}
.story-text p{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:1rem;
    font-size:.95rem;
}
.story-visual{
    position:relative;
    aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
}
.story-visual .ring{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--border);
}
.story-visual .ring:nth-child(1){inset:5%}
.story-visual .ring:nth-child(2){inset:18%}
.story-visual .ring:nth-child(3){inset:31%}
.story-visual .inner{
    position:relative;z-index:2;
    width:45%;aspect-ratio:1;border-radius:50%;
    background:var(--accent);opacity:.15;
}
.story-visual .center-label{
    position:absolute;z-index:3;
    font-family:var(--font-mono);
    font-size:.55rem;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--muted);
    text-align:center;
    line-height:1.6;
}

/* ——— artists ——— */
.artists-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3rem;
}
.artist-card{
    text-align:center;
}
.artist-card .avatar{
    aspect-ratio:1;
    border-radius:50%;
    background:var(--border);
    margin:0 auto 1.25rem;
    width:80%;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);
    font-size:.7rem;
    font-family:var(--font-mono);
    text-transform:uppercase;
    border:1px solid var(--border);
}
.artist-card h4{
    font-family:var(--font-display);
    font-size:1.15rem;
    font-weight:700;
    font-style:italic;
    margin-bottom:.25rem;
}
.artist-card .role{font-size:.8rem;color:var(--accent);margin-bottom:.75rem}
.artist-card p{font-size:.85rem;color:var(--muted);line-height:1.65;max-width:30ch;margin:0 auto}

/* ——— testimonials ——— */
.testimonials-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
}
.testimonial{
    padding:2.5rem;
    background:var(--surface);
    border:1px solid var(--border);
    position:relative;
}
.testimonial::before{
    content:'\201C';
    position:absolute;top:.5rem;left:1.25rem;
    font-size:4rem;
    line-height:1;
    color:var(--accent);
    opacity:.15;
    font-family:var(--font-display);
}
.testimonial blockquote{
    font-size:1.05rem;
    line-height:1.75;
    font-style:italic;
    margin-bottom:1.25rem;
}
.testimonial cite{
    font-style:normal;
    font-size:.85rem;
}
.testimonial cite strong{display:block;font-weight:700}
.testimonial cite span{color:var(--muted)}

/* ——— gallery & lightbox ——— */
.gallery-thumbnail {
    cursor: pointer;
    aspect-ratio: 4/3;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery-thumbnail img {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-thumbnail:hover img {
    transform: scale(1.08);
}
.gallery-overlay {
    inset: 0;
    background: linear-gradient(to top, rgba(11, 34, 48, 0.8) 0%, rgba(11, 34, 48, 0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gallery-thumbnail:hover .gallery-overlay {
    opacity: 1;
}
.gallery-thumbnail .overlay-text {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.gallery-thumbnail:hover .overlay-text {
    transform: translateY(0);
}

/* Lightbox Modal Custom Animation */
#galleryModal.modal.fade .modal-dialog {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
    transform: scale(0.9) translateY(30px);
    opacity: 0;
}
#galleryModal.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.modal-backdrop.show {
    backdrop-filter: blur(12px) !important;
    background-color: rgba(11, 34, 48, 0.85) !important;
    opacity: 1 !important;
}
/* ——— contact ——— */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
}
.contact-form .form-group{margin-bottom:1.75rem}
.contact-form label{
    display:block;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:.4rem;
    color:var(--fg);
}
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:.7rem .85rem;
    border:none;
    border-bottom:1px solid var(--border);
    background:transparent;
    font-family:var(--font-body);
    font-size:.9rem;
    color:var(--fg);
    outline:none;
    transition:border-color .25s;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--accent)}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-form .btn-submit{
    padding:.75rem 2.5rem;
    background:var(--accent);
    color:var(--surface);
    border:none;
    font-size:.9rem;
    letter-spacing:.02em;
    cursor:pointer;
    transition:opacity .25s;
}
.contact-form .btn-submit:hover{opacity:.85}
.contact-info h3{
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:700;
    font-style:italic;
    letter-spacing:-.02em;
    margin-bottom:1.75rem;
}
.contact-info .info-row{
    margin-bottom:1.5rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--border);
}
.contact-info .info-row:last-child{border-bottom:none}
.contact-info .info-row .label{
    font-family:var(--font-mono);
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--accent);
    margin-bottom:.2rem;
}
.contact-info .info-row .value{font-size:.95rem;color:var(--muted)}

/* ——— footer ——— */
footer{
    border-top:1px solid var(--border);
    padding:4rem 0 2rem;
    font-size:.9rem;
    color:var(--muted);
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
    margin-bottom:3rem;
}
footer h5{
    font-family:var(--font-display);
    font-weight:700;
    font-style:italic;
    font-size:.95rem;
    color:var(--fg);
    margin-bottom:.75rem;
}
footer ul{list-style:none}
footer ul li{margin-bottom:.4rem}
footer a{text-decoration:none;color:var(--muted);transition:color .25s}
footer a:hover{color:var(--fg)}
.footer-bottom{
    border-top:1px solid var(--border);
    padding-top:1.5rem;
    display:flex;justify-content:space-between;
    font-size:.8rem;
}

/* ——— toast ——— */
.toast{
    position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:999;
    padding:1rem 2rem;
    background:var(--fg);
    color:var(--surface);
    font-size:.9rem;
    opacity:0;
    transition:opacity .35s;
    pointer-events:none;
}
.toast.show{opacity:1;pointer-events:auto}

/* ——— responsive ——— */
@media(max-width:1024px){
    .artists-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:820px){
    .story-grid{grid-template-columns:1fr;gap:2.5rem}
    .testimonials-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .contact-grid{grid-template-columns:1fr;gap:3rem}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}

@media(max-width:768px){
    .navbar .nav-link{padding:.65rem 0}
}
@media(max-width:600px){
    .services-grid{grid-template-columns:1fr}
    .artists-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
    .footer-grid{grid-template-columns:1fr;gap:1.5rem}
    .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
    section{padding:3.5rem 0}
    .service-card{padding:2rem 1.5rem}
    .testimonial{padding:2rem 1.5rem}
}
@media(max-width:390px){
    .contact-form input,.contact-form textarea{font-size:.85rem}
}
@media(max-width:360px){
    .container{padding-left:1rem;padding-right:1rem}
    .tm-display{letter-spacing:-.02em}
    .service-card{padding:1.5rem 1rem}
    .section-title{font-size:1.5rem}
}
@media(min-width:1536px){
    .container{max-width:1440px}
}