/* ==========================================================================
   DJ Ahmet Polat — main stylesheet
   Faithful rebuild of djahmetpolat.com (WordPress/Elementor original).
   Brand tokens measured from the live site's CSS:
     navy #072560 · pink #ff0055 · red #EB3D19 · heading blue #6EC1E4
   Fonts: Helvetica (headings/hero, system), Roboto (body), Inter, Montserrat.
   ========================================================================== */

:root {
    --navy:         #072560;
    --navy-deep:    #051b47;
    --bar-top:      #1E2C66;
    --pink:         #ff0055;
    --red:          #EB3D19;
    --red-hover:    #FF0000;
    --heading-blue: #6EC1E4;
    --text-gray:    #7A7A7A;
    --about-bg:     #FFF7F7;
    --white:        #FFFFFF;
    --submit-green: #61CE70;

    --font-head: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --rail-width: 60px;
}

/* ------------------------------------------------------------------ reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--navy);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #fff; text-decoration: none; transition: color .3s; }
a:hover { color: var(--heading-blue); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: #fff; color: var(--navy);
    padding: 8px 14px; z-index: 10000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color: var(--navy); }

:focus-visible { outline: 2px solid var(--heading-blue); outline-offset: 2px; }

.hp-field {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------ left rail */
.icon-rail {
    position: fixed;
    top: 0; left: 0;
    width: var(--rail-width);
    min-height: 100vh;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 5px;
    background: linear-gradient(180deg, var(--bar-top) 40%, rgba(30, 44, 102, 0) 100%);
}

.icon-rail a { display: block; line-height: 0; }
.icon-rail a img { opacity: .9; transition: opacity .3s, transform .3s; }
.icon-rail a:hover img,
.icon-rail a:focus img { opacity: 1; transform: scale(1.06); }

/* social icons pinned to the bottom of the rail — each in its own round
   button so they stay legible on white sections without a long pill */
.rail-social {
    margin: auto 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rail-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(5, 27, 71, .85);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    line-height: 0;
    transition: background .3s, transform .3s;
}
.rail-social a svg { width: 16px; height: 16px; }
.rail-social a:hover, .rail-social a:focus { transform: scale(1.1); color: #fff; }
.rail-social a:hover .icon--facebook   { color: #1877F2; }
.rail-social a:hover .icon--instagram  { color: #E1306C; }
.rail-social a:hover .icon--youtube    { color: #FF0000; }
.rail-social a:hover .icon--soundcloud { color: #ff5500; }
.rail-social a:hover .icon--spotify    { color: #1DB954; }

body.page-booking .icon-rail { display: none; }  /* live booking page has no rail */

/* nothing ever sits under the fixed rail — offset all page content
   (the footer sits outside <main>, so it needs its own offset) */
main { display: block; margin-left: var(--rail-width); }
.site-footer { margin-left: var(--rail-width); }
body.page-booking main,
body.page-booking .site-footer { margin-left: 0; }

/* ----------------------------------------------------------------- hero */
/* Full-bleed photo hero: the image is in normal flow so its FULL height
   is always visible (no cropping); text floats over it. */
.hero {
    position: relative;
    background-color: var(--navy);
    overflow: hidden;
}

.hero-img {
    display: block;
    width: 100%;
    height: auto;                  /* natural aspect ratio — fits top to bottom */
    z-index: 1;
}

/* dark gradient so the name stays readable over any photo
   (strongest at the bottom-left where the text sits) */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(0deg, rgba(3, 12, 34, .88) 0%, rgba(3, 12, 34, .55) 26%, rgba(3, 12, 34, 0) 58%),
        linear-gradient(90deg, rgba(3, 12, 34, .38) 0%, rgba(3, 12, 34, 0) 48%);
    pointer-events: none;
}

.hero-text {
    position: absolute;
    left: 0;
    bottom: clamp(24px, 7%, 84px);
    z-index: 3;
    padding: 0 24px 0 110px;
    max-width: 620px;
}

.hero-name {
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 4px 28px rgba(0, 0, 0, .65);
}

.hero-tagline {
    font-family: var(--font-head);
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.4;
    letter-spacing: 2.2px;
    color: #fff;
    margin: 0 0 30px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 3px 18px rgba(0, 0, 0, .65);
}

.hero-text .btn-book { margin-top: 6px; }

/* Book DJ button (also used on the About page) */
.btn-book {
    display: inline-block;
    background-color: var(--red);
    color: #fff;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 500;
    padding: 15px 40px;
    border: none;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}
.btn-book:hover, .btn-book:focus { background-color: #FFFCFC; color: var(--red-hover); }

/* -------------------------------------------------------- section shell */
.section { position: relative; }

.section-heading {
    font-family: var(--font-head);
    font-size: 70px;
    font-weight: 300;
    color: var(--heading-blue);
    padding: 35px 0 0 100px;
    margin-bottom: 30px;
}

/* about — the entire text (bio + facts) flows through two equal columns */
.section--about { background-color: var(--about-bg); min-height: 636px; color: var(--text-gray); padding-bottom: 60px; }
.section--about .section-heading { color: var(--heading-blue); }

.about-title {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 20px 0 0 100px;
}

.about-cols {
    width: 80%;
    margin-top: 14px;
    padding: 0 20px 0 100px;
    font-family: var(--font-body);
    color: var(--text-gray);
    columns: 2;
    column-gap: 46px;
    column-fill: balance;
    text-align: justify;
}

.about-lead { margin-bottom: 14px; }

.about-facts { list-style: none; }
.about-facts li { break-inside: avoid; margin-bottom: 8px; }
.about-facts strong { color: #444; }

/* mixes — three equal columns with equal gaps */
.section--mixes { min-height: 660px; background: var(--navy); padding-bottom: 60px; }

.mixes-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 100px;
    align-items: start;
}

.mix-embed iframe { width: 100%; height: 450px; border: 0; }

/* power card — verbatim from the live site's inline CSS */
.ap-power-card {
    width: 100%; height: 450px; border-radius: 15px; position: relative; display: flex;
    flex-direction: column; justify-content: space-between; padding: 40px 30px; overflow: hidden;
    background: linear-gradient(135deg, #072560 0%, #ff0055 100%);
    border: 1px solid rgba(255, 255, 255, .1);
}
.ap-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 1; }
.ap-header, .ap-body { position: relative; z-index: 2; text-align: center; }
.power-local-logo { width: 100px; height: auto; margin: 0 auto; }
.ap-dj-info h3 { color: #fff; margin: 5px 0; font-size: 36px; font-weight: 900; text-transform: uppercase; font-family: "Montserrat", sans-serif; }
.ap-subtitle { color: var(--pink); margin: 0; font-weight: 800; letter-spacing: 2px; font-size: 13px; }
.ap-tagline { color: #fff; margin: 10px 0 30px 0; font-weight: 400; letter-spacing: 5px; font-size: 14px; opacity: .9; }
.ap-play-btn {
    background: #fff; color: var(--pink) !important; text-decoration: none !important;
    padding: 15px 40px; border-radius: 50px; font-weight: 800; display: inline-block;
    font-family: "Montserrat", sans-serif; font-size: 14px;
    transition: transform .3s, box-shadow .3s;
}
.ap-play-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, .3); color: var(--pink); }

/* photos */
.section--photos { background-color: var(--white); min-height: 781px; padding-bottom: 60px; }

.gallery {
    width: 85%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #eee;
}

.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s ease, filter .8s ease;
}

.gallery-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .8s ease;
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay { opacity: 1; }
.gallery-item:hover img { transform: scale(1.03); }

/* videos — three equal columns with equal gaps */
.section--videos { min-height: 434px; padding-bottom: 60px; }

.videos-row {
    width: 85%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

.videos-empty { color: #a0a0a0; font-style: italic; padding-left: 100px; }

/* contact */
.section--contact { background-color: var(--white); min-height: 547px; padding-bottom: 60px; }

.contact-form-wrap { width: 42%; max-width: 560px; padding-left: 100px; }

/* generic form (homepage #contact + contact page) */
.ap-form .field { margin-bottom: 10px; }

.ap-form label {
    display: block;
    color: var(--text-gray);
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 6px;
}

.ap-form input[type="text"],
.ap-form input[type="email"],
.ap-form textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    padding: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: #333;
    transition: border-color .3s;
}
.ap-form input:focus,
.ap-form textarea:focus { border-color: var(--heading-blue); outline: none; }

.ap-form textarea { resize: vertical; }

.field--error input, .field--error textarea { border-color: #d9534f; }
.field-error { display: block; color: #d9534f; font-size: 12px; margin-top: 4px; }

.form-submit {
    background-color: var(--submit-green);
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .3s;
}
.form-submit:hover { background-color: #4fb35f; color: #fff; }

.form-success {
    background: #e9f9ec;
    border: 1px solid #b7e2bf;
    border-radius: 6px;
    padding: 18px;
    color: #21632c;
}

.form-errors {
    background: #fdecea;
    border: 1px solid #f5c6c2;
    border-radius: 6px;
    padding: 12px 16px;
    color: #8a332c;
    margin-bottom: 14px;
}

/* ------------------------------------------------------- booking page */
.page-booking body, body.page-booking { background: var(--navy); }

.booking-shell {
    background: var(--navy);
    min-height: 100vh;
    padding: 120px 20px 60px;
    font-family: "Montserrat", sans-serif;
}

.booking-card {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    color: #333;
}

.booking-card-header {
    background: linear-gradient(135deg, #F43F46 0%, #ff0055 100%);
    padding: 30px;
    text-align: center;
    color: #fff;
}
.booking-card-header h1 { margin: 0; font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.booking-card-header p  { margin: 10px 0 0 0; opacity: .9; }

.booking-card-body { padding: 40px; }

.booking-form .bf-group { margin-bottom: 20px; }
.booking-form .bf-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.booking-form .bf-row .bf-group { flex: 1; min-width: 200px; margin-bottom: 0; }

.booking-form label {
    display: block;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    transition: border-color .3s;
    font-family: inherit;
    color: #333;
    background: #fff;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus { border-color: #F43F46; }

.booking-form textarea { resize: vertical; }

.bf-submit {
    width: 100%;
    background: var(--navy);
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
}
.bf-submit:hover { background: #F43F46; color: #fff; }
.bf-plane { margin-left: 10px; }

.booking-success { text-align: center; padding: 20px 10px; }
.booking-success h2 { color: var(--navy); margin-bottom: 10px; }
.booking-success p { color: #555; margin-bottom: 20px; }
.booking-again {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
}
.booking-again:hover { background: #F43F46; color: #fff; }

/* ------------------------------------------------------ generic pages */
.page-wrap { max-width: 860px; margin: 0 auto; padding: 60px 24px; }

.page-title {
    font-family: var(--font-head);
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 300;
    color: var(--heading-blue);
    margin-bottom: 30px;
}

.page-subtitle {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 300;
    color: var(--heading-blue);
    margin-bottom: 20px;
}

.prose { color: #eaeaea; font-family: var(--font-body); font-size: 17px; }
.prose h2 { font-family: var(--font-head); font-weight: 400; font-size: 24px; color: #fff; margin: 28px 0 12px; }
.prose h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: #fff; margin: 20px 0 10px; }
.prose strong { color: #fff; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 14px 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: #8ED8FF; text-decoration: underline; text-underline-offset: 3px; }
.prose a.btn-book { color: #fff; text-decoration: none; font-weight: 600; }   /* buttons keep white text on red */
.prose a.btn-book:hover, .prose a.btn-book:focus { background-color: #FFFCFC; color: var(--red-hover); }

/* Ask-me callout (How to DJ) */
.ask-box {
    margin-top: 30px;
    padding: 24px 26px;
    background: var(--navy-deep, #051b47);
    border: 1px solid rgba(255, 255, 255, .18);
    border-left: 4px solid var(--red);
    border-radius: 8px;
}
.ask-box h2 { margin-top: 0; }
.ask-box p { color: #eaeaea; }

.page-legal .prose { color: #c9c9c9; }

/* About page — two equal columns (Profile | Residencies + Venues + Radio) */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 44px;
    align-items: start;
    margin-top: 6px;
}

.about-col > h2:first-child { margin-top: 0; }

@media (max-width: 767px) {
    .about-grid { grid-template-columns: 1fr; gap: 0; }
}

.contact-page-form { margin-top: 50px; }
.contact-page-form .ap-form input,
.contact-page-form .ap-form textarea { background: #fff; }
.contact-page-form .form-note { color: #a0a0a0; margin-top: 14px; }

.page-legal .contact-form-wrap,
.page-contact .contact-form-wrap { width: 100%; max-width: 560px; padding-left: 0; }

/* --------------------------------------------------------------- footer */
.site-footer {
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 50px 0 60px;
}

.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-col--bio   { flex: 0 0 27%; min-width: 260px; padding-left: 80px; }
.footer-col--links { flex: 0 0 23%; min-width: 240px; }
.footer-col--follow{ flex: 1; min-width: 280px; }

.footer-name {
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-transform: capitalize;
    color: #fff;
    margin-bottom: 8px;
}

.footer-tagline { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 400; line-height: 18px; color: #B3B3B3; }
.footer-bio { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; line-height: 15.5px; color: #999; margin-top: 8px; }

.footer-col--links { display: flex; gap: 30px; }

.footer-menu { list-style: none; }
.footer-menu li { margin-bottom: 10px; }
.footer-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 400;
    color: #fff;
    transition: color .3s;
}
.footer-menu a:hover { color: #DAD8D8; }
.footer-menu .icon { width: 14px; height: 14px; flex: 0 0 14px; }

.follow-heading {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-blue);
    margin-bottom: 16px;
}

.follow-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }

.follow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--navy-deep);
}
.follow-badge img { width: 38px; height: 38px; object-fit: cover; }
.follow-badge--email { background: #8B1111; }

.follow-grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 5px;
}

.social-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #818a91;
    color: #fff;
    border-radius: 2px;
    transition: opacity .3s, transform .3s;
}
.social-tile:hover { opacity: .85; color: #fff; transform: translateY(-2px); }

/* ------------------------------------------------------------- lightbox */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 30px;
}
.lightbox.is-open { display: flex; }

.lightbox-figure { max-width: min(1100px, 92vw); text-align: center; }
.lightbox-figure img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox-caption { color: #ddd; font-size: 14px; padding: 14px 0 0; }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, .08);
    border: none;
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .22); }

.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .hero { min-height: 82vh; }
    .hero-text { padding-left: 60px; }

    .section-heading { font-size: 50px; padding-left: 60px; }
    .about-title { margin-left: 60px; }
    .about-cols { width: auto; padding-left: 60px; padding-right: 40px; }
    .mixes-row { padding-left: 60px; }
    .contact-form-wrap { padding-left: 60px; }
}

@media (max-width: 767px) {
    /* full-height photo doesn't leave room for text on small screens:
       pin the image as a cover background and give the hero breathing room */
    .hero { min-height: 88vh; }
    .hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* shift the crop right so the DJ (~68% across the image) lands
           left-of-center on mobile */
        object-position: 82% top;
    }
    /* main is already offset by the rail width — normal padding is enough */
    .hero-text { padding: 24px 20px 24px 24px; }
    /* light touch only — the DJ side stays clear */
    .hero-scrim {
        background: linear-gradient(90deg, rgba(3, 12, 34, .5) 0%, rgba(3, 12, 34, .22) 45%, rgba(3, 12, 34, 0) 68%);
    }

    .section-heading { font-size: 43px; padding-left: 30px; }
    .about-title { margin-left: 30px; }
    .about-cols { padding-left: 30px; padding-right: 24px; columns: 1; }
    .mixes-row { grid-template-columns: 1fr; padding: 0 20px; }
    .gallery { grid-template-columns: 1fr; }
    .videos-row { grid-template-columns: 1fr; width: auto; padding: 0 20px; }
    .contact-form-wrap { width: 100%; padding-left: 30px; padding-right: 24px; }

    .footer-col--bio { padding-left: 24px; }
    .footer-col--links { flex-direction: row; padding-left: 24px; }
    .footer-col--follow { padding-left: 24px; }   /* aligns with the bio above */
    .follow-grid { grid-template-columns: repeat(5, auto); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}