/* Gilroy is self-hosted from the licensed webfont kit - see css/fonts.css */

body {
    font-family: 'Gilroy', sans-serif;
    font-weight: 400;
}

*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Gilroy', sans-serif;
}

body.menu-active {
    overflow: hidden;
}

.amissos-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    color: #fff;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 2;
}

.amissos-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    padding: 38px 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.amissos-logo,
.menu-logo {
    color: #fff;
    text-decoration: none;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    font-family: 'Gilroy', sans-serif;
}

.menu-open {
    width: 34px;
    height: 26px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .menu-open span {
        display: block;
        width: 100%;
        height: 3px;
        background: #fff;
    }

.hero-content {
    position: absolute;
    left: 70px;
    bottom: 90px;
    z-index: 4;
}

    .hero-content h1 {
        margin: 0;
        font-size: clamp(42px, 6vw, 96px);
        line-height: 0.9;
        font-weight: 800;
        text-transform: uppercase;
    }

.fullscreen-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #d40000;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

    .fullscreen-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.menu-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 42px 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 64px;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
}

.menu-links {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 100px 30px;
}

    .menu-links a {
        color: #fff;
        text-decoration: none;
        font-family: 'Gilroy', sans-serif;
        font-size: clamp(56px, 7vw, 132px);
        line-height: 0.9;
        font-weight: 800;
        text-transform: uppercase;
    }

        .menu-links a:hover {
            opacity: 0.8;
        }

.menu-bottom {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.back-link,
.share-link {
    color: #fff;
    text-decoration: none;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

    .back-link span {
        display: block;
        width: 46px;
        height: 28px;
        border: 2px solid #fff;
        border-radius: 50px;
        text-align: center;
        line-height: 23px;
        margin-bottom: 8px;
        font-size: 24px;
    }

.share-link {
    text-align: center;
}

    .share-link strong {
        display: block;
        font-family: 'Gilroy', sans-serif;
        font-size: 32px;
        line-height: 1;
    }

@media (max-width: 991px) {
    .amissos-header,
    .menu-top {
        padding: 28px 34px;
    }

    .hero-content {
        left: 34px;
        bottom: 70px;
    }

    .menu-links a {
        font-size: clamp(48px, 13vw, 90px);
    }

    .menu-bottom {
        left: 34px;
        right: 34px;
        bottom: 34px;
    }
}

@media (max-width: 575px) {
    .amissos-hero {
        height: 100vh;
        min-height: 560px;
    }

    .amissos-logo,
    .menu-logo {
        font-size: 30px;
    }

    .amissos-header,
    .menu-top {
        padding: 22px 20px;
    }

    .menu-open {
        width: 26px;
        height: 20px;
    }

    .hero-content {
        left: 20px;
        right: 20px;
        bottom: 55px;
    }

        .hero-content h1 {
            font-size: 38px;
        }

    .menu-close {
        font-size: 46px;
    }

    .menu-links {
        gap: 10px;
        padding: 90px 20px 120px;
    }

        .menu-links a {
            font-size: clamp(42px, 16vw, 64px);
            line-height: 0.95;
        }

    .menu-bottom {
        left: 20px;
        right: 20px;
        bottom: 24px;
    }

    .back-link,
    .share-link {
        font-size: 15px;
    }

        .share-link strong {
            font-size: 24px;
        }
}

.amissos-page {
    background: #fff;
    color: #111;
    overflow: hidden;
}

.mission-section {
    background: #C70A0C;
    padding: 80px 0;
}

.mission-container {
    width: min(1180px, 88%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.mission-image img,
.founder-image img,
.timeline img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.mission-image img {
    aspect-ratio: 4 / 5;
}

.mission-text {
    color: #fff;
    font-size: 10pt !important;
}

    .mission-text h2,
    .founder-text h2 {
        margin: 0 0 28px;
        font-family: 'Gilroy', sans-serif;
        font-size: clamp(48px, 4vw, 86px);
        line-height: 0.9;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mission-text p,
    .founder-text p {
        font-size: 13px;
        line-height: 1.7;
        margin: 0 0 16px;
    }

.founder-section {
    padding: 95px 0 120px;
}

.founder-container {
    width: min(1180px, 88%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
    gap: 85px;
}

.founder-text h2 {
    color: #d73612;
}

.founder-text h5 {
    color: #d73612;
    margin: -10px 0 35px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.founder-image img {
    aspect-ratio: 4 / 5;
    border-bottom: 8px solid #d73612;
}

.portfolio-section {
    padding: 20px 0 70px;
    text-align: center;
}

    .portfolio-section h2,
    .story-section h2 {
        color: #d73612;
        font-size: clamp(28px, 3vw, 42px);
        line-height: 1;
        margin: 0 0 60px;
        font-family: 'Gilroy', sans-serif;
        font-weight: 900;
        text-transform: uppercase;
        font-style: italic;
    }

.clubs {
    width: min(760px, 80%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

.club-item img {
    max-width: 110px;
    max-height: 130px;
    object-fit: contain;
}

.story-section {
    padding: 25px 0 120px;
    text-align: center;
}

.timeline {
    width: min(780px, 88%);
    margin: 0 auto;
}

.timeline-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 210px;
    gap: 45px;
}

    .timeline-row.left {
        text-align: right;
    }

    .timeline-row.right {
        text-align: left;
    }

.timeline-year {
    color: #d73612;
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 1;
    font-weight: 800;
}

.timeline-content span {
    display: block;
    color: #d73612;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
}

.timeline-content p {
    margin: 0;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}

.image-content img {
    max-width: 250px;
    border-right: 8px solid #d73612;
}

.timeline-row.left .image-content img {
    margin-left: auto;
}

.timeline-row.right .image-content img {
    margin-right: auto;
}

.story-dot {
    width: 10px;
    height: 10px;
    background: #d73612;
    border-radius: 50%;
    margin: 55px auto 0;
}

@media (max-width: 991px) {
    .mission-container,
    .founder-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .mission-section {
        padding: 55px 0;
    }

    .founder-section {
        padding: 65px 0 80px;
    }

    .founder-image {
        order: 2;
    }

    .clubs {
        width: 70%;
        gap: 50px;
    }

    .timeline {
        width: min(680px, 90%);
    }
}

@media (max-width: 575px) {
    .mission-container,
    .founder-container {
        width: 86%;
    }

    .mission-text h2,
    .founder-text h2 {
        font-size: 42px;
    }

    .mission-text p,
    .founder-text p {
        font-size: 13px;
        line-height: 1.6;
    }

    .portfolio-section h2,
    .story-section h2 {
        font-size: 26px;
        margin-bottom: 40px;
    }

    .clubs {
        width: 82%;
        gap: 45px;
    }

    .club-item img {
        max-width: 82px;
    }

    .story-section {
        padding-bottom: 80px;
    }

    .timeline-row {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: auto;
        margin-bottom: 55px;
        text-align: center !important;
    }

        .timeline-row.left,
        .timeline-row.right {
            text-align: center;
        }

    .timeline-year {
        font-size: 58px;
        order: -1;
    }

    .timeline-content p {
        font-size: 13px;
    }

    .image-content img {
        max-width: 240px;
        margin: 0 auto !important;
    }
}

/*About*/
.amissos-page {
    width: 100%;
    overflow-x: hidden;
}

/* HERO ABOUT */
.hero-about {
    position: relative;
    min-height: 560px;
    background-image: url("/media/Index/1-About-Banner.png");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.hero-about-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
}

.hero-about-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 34px;
}

.hero-about-logo {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-about-menu {
    font-size: 28px;
    line-height: 1;
}

.hero-about-content {
    position: relative;
    z-index: 2;
    padding: 260px 45px 35px;
}

    .hero-about-content h1 {
        margin: 0;
        max-width: 720px;
        font-size: 58px;
        line-height: 0.92;
        font-weight: 900;
        letter-spacing: -2px;
        text-transform: uppercase;
    }

.hero-about-scroll {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    opacity: 0.9;
}

.hero-about-scroll-icon {
    width: 20px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 20px;
    display: inline-block;
    position: relative;
}

    .hero-about-scroll-icon::after {
        content: "";
        width: 3px;
        height: 7px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
    }

/* GENERAL */
.content-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 70px 24px;
}

.section-label {
    text-align: center;
    color: #d50000;
    font-size: 24px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 70px;
}

/* OWNERSHIP */
.ownership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.ownership-title {
    color: #d50000;
    font-size: 52px;
    line-height: 0.9;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
    margin: 0 0 45px;
    letter-spacing: -1px;
}

.ownership-text p,
.image-text p {
    font-size: 10pt;
    line-height: 1.55;
    margin: 0 0 18px;
}

.image-text img,
.ownership-image img,
.impact-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.left-image {
    margin-top: 10px;
}

.right-image {
    border-top: 7px solid #d50000;
    margin-top: 18px;
}

/* LEADERSHIP */
.leadership-section {
    padding: 40px 12px 70px;
}

.leadership-title,
.impact-title {
    color: #d50000;
    text-align: center;
    font-size: 22px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 55px;
}

.leadership-grid {
    /*background: #000;*/
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px;
    max-width: 1480px;
    margin: 0 auto;
}

.leader-card {
  /*  background: #000;*/
    color: #d50000;
}

    .leader-card img {
        width: 100%;
       height: 500px;
        object-fit: cover;
        display: block;
    }

.leader-info {
    padding: 14px 10px 18px;
    min-height: 88px;
}

    .leader-info h3 {
        margin: 0;
        color: #000;
        font-size: 17px;
        line-height: 1;
        font-weight: 900;
        text-transform: uppercase;
    }

    .leader-info p {
        margin: 3px 0 8px;
        color: #e00000;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 800;
        text-transform: uppercase;
    }

.leader-arrow {
    color: #e00000;
    font-size: 16px;
}

/* IMPACT */
.impact-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 50px 24px 100px;
    text-align: center;
}

.impact-image {
    max-width: 560px;
    margin: 0 auto 55px;
}

.impact-text {
    max-width: 1080px;
    margin: 0 auto;
}

    .impact-text p {
        font-size: 10pt;
        line-height: 1.55;
        margin: 0 0 20px;
    }

.discover-btn {
    display: inline-block;
    margin-top: 18px;
    background: #d50000;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    padding: 10px 24px;
    border-radius: 24px;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.red-footer-block {
    height: 260px;
    background: #7d1b1d;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hero-about {
        min-height: 500px;
    }

    .hero-about-content {
        padding: 230px 32px 35px;
    }

        .hero-about-content h1 {
            font-size: 48px;
        }

    .ownership-title {
        font-size: 42px;
    }

    .leader-card img {
        height: 360px;
    }
}

@media (max-width: 768px) {
    .hero-about-header {
        padding: 22px 20px;
    }

    .hero-about-logo {
        font-size: 22px;
    }

    .hero-about {
        min-height: 480px;
    }

    .hero-about-content {
        padding: 235px 24px 30px;
    }

        .hero-about-content h1 {
            font-size: 40px;
            line-height: 0.95;
        }

    .content-wrapper {
        padding: 55px 20px;
    }

    .section-label {
        font-size: 21px;
        margin-bottom: 45px;
    }

    .ownership-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ownership-title {
        text-align: left;
        font-size: 38px;
        margin-bottom: 25px;
    }

    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .leader-card img {
        height: 390px;
    }

    .impact-section {
        padding: 40px 20px 80px;
    }
}

@media (max-width: 520px) {
    .hero-about {
        min-height: 430px;
    }

    .hero-about-content {
        padding: 215px 20px 28px;
    }

        .hero-about-content h1 {
            font-size: 32px;
            letter-spacing: -1px;
        }

    .hero-about-scroll {
        font-size: 10px;
    }

    .ownership-title {
        font-size: 32px;
    }

    .ownership-text p,
    .image-text p,
    .impact-text p {
        font-size: 12px;
        line-height: 1.6;
    }

    .leadership-section {
        padding: 30px 10px 55px;
    }

    .leadership-title,
    .impact-title {
        font-size: 19px;
        margin-bottom: 35px;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .leader-card img {
        height: auto;
        max-height: none;
    }

    .leader-info h3 {
        font-size: 18px;
    }

    .leader-info p {
        font-size: 11px;
    }

    .impact-image {
        margin-bottom: 35px;
    }

    .red-footer-block {
        height: 180px;
    }
}

/*About*/

/*Social*/

.social-impact-hero {
    position: relative;
    min-height: 560px;
    background-image: url("/media/Index/social-banner.png");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.social-impact-hero-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 28px 38px;
}

.social-impact-menu {
    font-size: 34px;
    font-weight: 300;
    color: #fff;
}

.social-impact-hero-content {
    position: absolute;
    left: 50px;
    bottom: 58px;
    z-index: 2;
}

    .social-impact-hero-content h1 {
        margin: 0;
        font-size: 62px;
        line-height: 0.95;
        font-weight: 900;
        letter-spacing: -2px;
        text-transform: uppercase;
    }

.social-impact-scroll {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.social-impact-scroll-icon {
    width: 22px;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 20px;
    position: relative;
    display: inline-block;
}

    .social-impact-scroll-icon::after {
        content: "";
        width: 3px;
        height: 8px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
    }

/* =========================
   SOCIAL IMPACT MAIN
========================= */

.social-impact-main {
    position: relative;
    padding: 80px 0 90px;
    min-height: 870px;
    overflow: hidden;
}

.social-impact-bg-pattern {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52%;
    max-width: 760px;
    z-index: 1;
    pointer-events: none;
}

    .social-impact-bg-pattern img {
        width: 100%;
        display: block;
    }

.social-impact-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: start;
}

.social-impact-title-block {
    padding-top: 5px;
}

    .social-impact-title-block h2 {
        margin: 0;
        color: #d50000;
        font-size: 58px;
        line-height: 0.9;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -1px;
    }

.social-impact-content {
    max-width: 430px;
}

    .social-impact-content p {
        margin: 0 0 14px;
        font-size: 11pt;
        line-height: 1.55;
    }

.social-impact-small-image {
    width: 245px;
    margin: 28px auto 26px;
    border-top: 7px solid #d50000;
}

    .social-impact-small-image img {
        width: 100%;
        display: block;
    }

/* =========================
   SOCIAL IMPACT STATS
========================= */

.social-impact-stats-image {
    width: 430px;
    max-width: 100%;
    margin: 0 auto;
}

    .social-impact-stats-image img {
        width: 100%;
        display: block;
    }

/* =========================
   SOCIAL IMPACT FOOTER
========================= */

.social-impact-footer {
    position: relative;
    height: 250px;
    background: #8f1d1f;
    overflow: hidden;
}

.social-impact-footer-logo {
    position: absolute;
    left: 23%;
    top: 55px;
    color: rgba(255, 255, 255, 0.08);
    font-size: 34px;
    font-weight: 800;
}

.social-impact-back-top {
    position: fixed;
    right: 28px;
    bottom: 24px;
    width: 28px;
    height: 28px;
    background: #000;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    text-decoration: none;
    z-index: 20;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {

    .social-impact-hero {
        min-height: 500px;
    }

    .social-impact-hero-content h1 {
        font-size: 52px;
    }

    .social-impact-container {
        gap: 55px;
    }

    .social-impact-title-block h2 {
        font-size: 48px;
    }

    .social-impact-bg-pattern {
        width: 58%;
    }
}

@media (max-width: 768px) {

    .social-impact-hero {
        min-height: 460px;
        background-position: center;
    }

    .social-impact-hero-header {
        padding: 22px 24px;
    }

    .social-impact-hero-content {
        left: 28px;
        bottom: 45px;
    }

        .social-impact-hero-content h1 {
            font-size: 42px;
            letter-spacing: -1px;
        }

    .social-impact-main {
        padding: 65px 0 70px;
    }

    .social-impact-container {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 0 24px;
    }

    .social-impact-title-block h2 {
        font-size: 44px;
    }

    .social-impact-content {
        max-width: 100%;
    }

        .social-impact-content p {
            font-size: 13px;
        }

    .social-impact-bg-pattern {
        width: 90%;
        opacity: 0.25;
    }

    .social-impact-small-image {
        width: 280px;
    }

    .social-impact-stats-image {
        width: 430px;
    }
}

@media (max-width: 520px) {

    .social-impact-hero {
        min-height: 420px;
    }

    .social-impact-hero-content {
        left: 20px;
        bottom: 38px;
    }

        .social-impact-hero-content h1 {
            font-size: 34px;
        }

    .social-impact-scroll {
        font-size: 11px;
    }

    .social-impact-title-block h2 {
        font-size: 36px;
    }

    .social-impact-main {
        padding: 50px 0 60px;
    }

    .social-impact-container {
        padding: 0 20px;
    }

    .social-impact-small-image {
        width: 100%;
        max-width: 270px;
    }

    .social-impact-stats-image {
        width: 100%;
        max-width: 360px;
    }

    .social-impact-footer {
        height: 180px;
    }

    .social-impact-footer-logo {
        left: 28px;
        top: 45px;
        font-size: 28px;
    }
}
/*Social*/

/*menu*/
/* PAGE */
.anamenu-page {
    width: 100%;
    overflow: hidden;
}

/* HERO */
.anamenu-hero-about {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* OVERLAY */
.anamenu-hero-about-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2;
}

/* HEADER */
.anamenu-hero-about-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35px 60px;
}

/* LOGO */
.anamenu-hero-about-logo img,
.anamenu-menu-logo img {
    height: 42px;
    width: auto;
    display: block;
}

/* MENU BUTTON */
.anamenu-hero-about-menu {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

    .anamenu-hero-about-menu span {
        width: 30px;
        height: 2px;
        background: #fff;
        display: block;
        margin-left: auto;
    }

/* CONTENT */
.anamenu-hero-about-content {
    position: relative;
    z-index: 5;
    height: calc(100vh - 120px);
    display: flex;
    align-items: flex-end;
    padding: 0 60px 80px;
}

    .anamenu-hero-about-content h1 {
        color: #fff;
        font-size: 82px;
        line-height: 0.95;
        font-weight: 700;
        letter-spacing: -2px;
    }

/* MENU */
.anamenu-fullscreen-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #c70a0c;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 60px;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
}

    .anamenu-fullscreen-menu.active {
        opacity: 1;
        visibility: visible;
    }

/* MENU TOP */
.anamenu-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CLOSE */
.anamenu-menu-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 52px;
    line-height: 1;
    cursor: pointer;
}

/* LINKS */
.anamenu-menu-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

    .anamenu-menu-links a {
        color: #fff;
        text-decoration: none;
        font-size: 52px;
        font-weight: 700;
        transition: 0.3s;
        width: fit-content;
    }

        .anamenu-menu-links a:hover {
            opacity: 0.7;
            transform: translateX(8px);
        }

/* BOTTOM */
.anamenu-menu-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    /* Back artik <button>; mevcut <a> gorunumu birebir korunuyor */
    .anamenu-menu-bottom a,
    .anamenu-menu-bottom button {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
    }

        /* yalnizca button icin tarayici varsayilanlarini sifirla */
    .anamenu-menu-bottom button {
        background: none;
        border: none;
        padding: 0;
        font-family: 'Gilroy', sans-serif;
        cursor: pointer;
    }

/* menu acikken arkadaki sayfa kaymasin */
body.anamenu-menu-open {
    overflow: hidden;
}


/* RESPONSIVE */
@media(max-width:991px) {

    .anamenu-hero-about-header {
        padding: 25px 20px;
    }

    .anamenu-hero-about-content {
        padding: 0 20px 50px;
    }

        .anamenu-hero-about-content h1 {
            font-size: 52px;
            line-height: 1;
        }

    .anamenu-fullscreen-menu {
        padding: 25px 20px;
    }

    .anamenu-menu-links a {
        font-size: 38px;
    }

    .anamenu-menu-close {
        font-size: 42px;
    }

    .anamenu-hero-about-logo img,
    .anamenu-menu-logo img {
        height: 32px;
    }
}

@media(max-width:576px) {

    .anamenu-hero-about-content h1 {
        font-size: 40px;
    }

    .anamenu-menu-links {
        gap: 18px;
    }

        .anamenu-menu-links a {
            font-size: 30px;
        }
}

/* BG IMAGE */
.anamenu-hero-about-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

    .anamenu-hero-about-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/*menu*/

/*portfolio*/
.portfolio-page {
    width: 100%;
    overflow-x: hidden;
}

/* TITLE */
.portfolio-title {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

    .portfolio-title h2 {
        color: #db0000;
        font-size: 18px;
        font-style: italic;
        font-weight: 900;
        margin: 0;
    }

/* BLOCK */
.portfolio-block {
    position: relative;
    padding: 40px 0 95px;
}

.red {
    background: #d90000;
}

.white {
    background: #fff;
}

/* IMAGE SCROLL */
.image-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    position: relative;
}

    .image-row::-webkit-scrollbar {
        display: none;
    }

    .image-row:active {
        cursor: grabbing;
    }

    .image-row img {
        flex: 0 0 33vw;
        width: 33vw;
        min-width: 430px;
        height: 285px;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1;
        transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease;
        will-change: transform;
    }

    /* Hover olunca diğer görseller biraz küçülür */
    .image-row:hover img {
        opacity: .45;
        transform: scale(.94);
    }

    /* Üstüne gelinen görsel öne çıkar */
    .image-row img:hover {
        opacity: 1;
        transform: scale(1.14) translateY(-10px);
        z-index: 20;
        box-shadow: 0 25px 60px rgba(0,0,0,.35);
    }

.top-row img:nth-child(2),
.middle-row img:nth-child(2),
.bottom-row img:nth-child(2) {
    margin-top: 55px;
}

/* SCROLL LABEL */
.scroll-label {
    color: #fff;
    font-size: 10px;
    margin-left: 22px;
    line-height: 1.2;
}

.red-label {
    color: #d90000;
}

/* TEXT */
.text-area {
    max-width: 900px;
    margin: 65px auto 0;
    text-align: center;
    padding: 0 24px;
}

    .text-area h3 {
        margin: 0 0 32px;
        font-size: clamp(42px, 5vw, 72px);
        line-height: .92;
        font-weight: 900;
        letter-spacing: -2px;
    }

.white-text {
    color: #fff;
}

.red-text {
    color: #d90000;
}

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    text-align: left;
    margin-bottom: 44px;
}

    .columns p {
        margin: 0;
        font-size: 10pt;
        line-height: 1.55;
    }

/* BUTTON */
.visit-btn {
    display: inline-block;
    background: #fff;
    color: #d90000;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    font-style: italic;
}

.red-btn {
    background: #d90000;
    color: #fff;
}

.academy {
    padding-top: 46px;
}

.portfolio-footer {
    height: 230px;
    background: #2f3032;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .image-row {
        padding-left: 40px;
        padding-right: 40px;
    }

        .image-row img {
            flex: 0 0 45vw;
            width: 45vw;
            min-width: 320px;
            height: 240px;
        }

    .text-area {
        margin-top: 45px;
    }

    .columns {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .portfolio-title {
        height: 95px;
    }

    .portfolio-block {
        padding-bottom: 70px;
    }

    .image-row {
        gap: 10px;
        padding: 20px 16px 35px;
    }

        .image-row img {
            flex: 0 0 78vw;
            width: 78vw;
            min-width: 260px;
            height: 210px;
        }

    .top-row img:nth-child(2),
    .middle-row img:nth-child(2),
    .bottom-row img:nth-child(2) {
        margin-top: 35px;
    }

    .image-row:hover img {
        opacity: 1;
        transform: none;
    }

    .image-row img:hover {
        transform: scale(1.04);
        box-shadow: 0 14px 30px rgba(0,0,0,.25);
    }

    .text-area h3 {
        font-size: 44px;
    }

    .columns {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
    }

        .columns p {
            font-size: 12px;
        }
}

@media (max-width: 480px) {
    .image-row img {
        flex: 0 0 82vw;
        width: 82vw;
        min-width: 235px;
        height: 180px;
    }

    .text-area h3 {
        font-size: 36px;
    }
}
/*portfolio*/

/*footer*/
.amissos-footer {
    width: 100%;
    background: #C70A0C;
    color: #fff;
    font-family: 'Gilroy', sans-serif;
    overflow: hidden;
}

.amissos-footer-inner {
    position: relative;
    max-width: 1220px;
    min-height: 298px;
    margin: 0 auto;
    padding: 28px 0 18px;
}

/* LOGO */
.footer-logo {
    position: absolute;
    top: 26px;
    left: 0;
}

    .footer-logo img {
        width: 162px;
        height: auto;
        display: block;
    }

/* RIGHT MENU */
.footer-menu {
    position: absolute;
    top: 25px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .footer-menu a,
    .footer-links a,
    .footer-bottom p {
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.3px;
        text-decoration: none;
    }

        .footer-menu a:hover,
        .footer-links a:hover {
            opacity: 0.8;
        }

/* BOTTOM */
.footer-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .footer-bottom p {
        margin: 0;
    }

.footer-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* TABLET */
@media (max-width: 991px) {
    .amissos-footer-inner {
        max-width: 100%;
        min-height: 280px;
        padding: 30px 40px 22px;
    }

    .footer-logo {
        left: 40px;
    }

    .footer-menu {
        right: 40px;
    }

    .footer-bottom {
        left: 40px;
        right: 40px;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .amissos-footer-inner {
        min-height: auto;
        padding: 36px 24px 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .footer-logo,
    .footer-menu,
    .footer-bottom {
        position: static;
    }

        .footer-logo img {
            width: 150px;
        }

    .footer-menu {
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .footer-bottom {
        width: 100%;
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}
/*footer*/

/*contact*/
.contact-page,
.contact-page *,
.contact-section,
.contact-section *,
.contact-title,
.contact-title h2,
.contact-title p,
.contact-form,
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-info,
.contact-info h4,
.contact-info p,
.contact-info a,
.checkbox-label,
#formResult {
    font-family: 'Gilroy', sans-serif !important;
}

.contact-form label,
.contact-title p,
.contact-info h4,
.contact-form button {
    font-weight: 700 !important;
}

.contact-title h2 {
    font-weight: 800 !important;
}
/*contact*/

/*year*/
/* ==========================================================================
   OUR STORY - TIMELINE
   Eski surum 620x1650px sabit kutuda top/left ile mutlak konumlanmisti,
   mobilde 7px yaziya dusuyordu. Bu surum grid tabanli: her madde kendi
   satiri, yil karsi kolonda, 760px altinda tek kolona iniyor.
   Scroll ile ortaya cikma efekti .is-visible sinifiyla, JS tarafinda
   IntersectionObserver ile veriliyor.
   ========================================================================== */

.story-section {
    --story-accent: #d83a17;
    --story-year: #c70a0c;
    --story-gap: clamp(28px, 6vw, 90px);
    padding: 0 0 40px;
    text-align: center;
    background: #fff;
}

    .story-section h2 {
        margin: 0 0 70px;
        color: var(--story-accent);
        font-family: 'Gilroy', sans-serif;
        font-size: 25px;
        font-weight: 900;
        font-style: italic;
        text-transform: uppercase;
    }

/* TIMELINE GOVDESI */
/* .story-timeline sarmalayici div, .story-list ise <ol>.
   Cizgi <ol> icine konamaz (gecersiz HTML), o yuzden sarmalayicida. */
.story-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: initial;
}

.story-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ORTA CIZGI + ust/alt noktalar */
.story-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(216, 58, 23, .28);
    transform: translateX(-50%);
}

    .story-line::before,
    .story-line::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--story-accent);
        transform: translateX(-50%);
    }

    .story-line::before {
        top: -4px;
    }

    .story-line::after {
        bottom: -4px;
    }

/* sayfa kaydikca dolan ilerleme cizgisi */
.story-line-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--story-accent);
    transform-origin: top;
}

/* MADDE */
.story-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--story-gap);
    align-items: start;
    padding-bottom: clamp(34px, 5vw, 62px);
}

    /* madde icerigi hangi kolonda duruyorsa yil karsi kolonda */
    .story-item-left > * {
        grid-column: 1;
        text-align: right;
    }

    .story-item-right > * {
        grid-column: 2;
        text-align: left;
    }

    .story-item-left > .story-item-year {
        grid-column: 2;
        text-align: left;
    }

    .story-item-right > .story-item-year {
        grid-column: 1;
        text-align: right;
    }

/* YIL */
.story-item-year {
    margin: -.12em 0 0;
    color: var(--story-year);
    font-family: 'Gilroy', sans-serif;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    font-weight: 800;
}

/* SIRA NUMARASI */
.story-item-no {
    display: block;
    margin-bottom: 4px;
    color: var(--story-accent);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

/* METIN */
.story-item-text {
    margin: 0;
    color: #111;
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.3;
    font-weight: 700;
    text-wrap: balance;
}

/* GORSEL */
.story-item-media {
    margin: 16px 0 0;
    max-width: 260px;
}

    /* sol kolondaki gorsel saga yaslanir */
    .story-item-left > .story-item-media {
        margin-left: auto;
    }

    .story-item-media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

/* tasarimdaki kirmizi kenar vurgusu */
.story-item-media-accent img {
    border-right: 7px solid var(--story-accent);
}

/* SCROLL REVEAL */
.story-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
}

    .story-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

/* yil, metinden bir tik sonra gelsin */
.story-item-year.story-reveal {
    transition-delay: .12s;
}

.story-item-media.story-reveal {
    transition-delay: .18s;
}

/* JS yoksa her sey gorunur kalsin */
.no-js .story-reveal {
    opacity: 1;
    transform: none;
}

/* hareketi azalt tercihi */
@media (prefers-reduced-motion: reduce) {
    .story-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .story-line-progress {
        transition: none;
    }
}

/* TABLET */
@media (max-width: 991px) {
    .story-section h2 {
        margin-bottom: 55px;
    }
}

/* MOBIL: tek kolon, cizgi sola gecer */
@media (max-width: 760px) {
    .story-timeline {
        padding-left: 34px;
        padding-right: 16px;
    }

    .story-line {
        left: 4px;
    }

    .story-item {
        grid-template-columns: 1fr;
        padding-bottom: 34px;
    }

        /* butun hucreler tek kolona, hepsi sola hizali */
        .story-item-left > *,
        .story-item-right > *,
        .story-item-left > .story-item-year,
        .story-item-right > .story-item-year {
            grid-column: 1;
            text-align: left;
        }

    /* mobilde yil once gelsin */
    .story-item-year {
        order: -1;
        margin-bottom: 10px;
    }

    .story-item-left > .story-item-media {
        margin-left: 0;
    }

    .story-item-media {
        max-width: 100%;
    }

    /* her maddenin yaninda cizgi uzerinde nokta */
    .story-item::before {
        content: "";
        position: absolute;
        left: -33px;
        top: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--story-accent);
    }
}
/*year*/

/*portfolio*/
/* ==========================================================================
   PORTFOLIO
   Butun siniflar "portfolio-" ile baslar. Boylece site genelindeki genel
   adlarla (.red .white .columns .text-area .visit-btn .image-row) cakismaz.
   ========================================================================== */

/* PAGE */
.portfolio-page {
    width: 100%;
    overflow-x: hidden;
}

/* TITLE */
.portfolio-title {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

    .portfolio-title h2 {
        color: #db0000;
        font-size: 18px;
        font-style: italic;
        font-weight: 900;
        margin: 0;
    }

/* BLOCK */
.portfolio-block {
    position: relative;
    padding: 40px 0 95px;
}

.portfolio-block-red {
    background: #d90000;
}

.portfolio-block-white {
    background: #fff;
}

.portfolio-block-academy {
    padding-top: 46px;
}

/* IMAGE SCROLL */
.portfolio-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    /* overflow-x: auto oldugu icin overflow-y: visible tarayicida "auto"
       olarak hesaplanir; bu yuzden hover'da buyuyen gorselin ustu
       kirpiliyordu. Dikey padding scrollport icinde yer acar, negatif margin
       de sayfa yerlesimini oldugu gibi korur (36-36 ve 12-12 birbirini
       goturur). */
    overflow-y: hidden;
    padding-top: 36px;
    padding-bottom: 12px;
    margin-top: -36px;
    margin-bottom: -12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    position: relative;
}

    .portfolio-row::-webkit-scrollbar {
        display: none;
    }

    /* JS surukleme sirasinda ekliyor */
    .portfolio-row.is-dragging {
        cursor: grabbing;
    }

/* seride tabindex="0" var, klavyeyle de kaydirilabiliyor;
       odak halkasi blogun zeminine gore renk aliyor */
.portfolio-block-red .portfolio-row:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.portfolio-block-white .portfolio-row:focus-visible {
    outline: 2px solid #d90000;
    outline-offset: -2px;
}

.portfolio-row img {
    /* 3 gorsel 33vw ise toplam 99vw = ekran genisligi kadar, yani
       kaydirilacak mesafe kalmiyordu (1920px'de sadece 20px).
       42vw ile 3. gorsel tasar ve serit gercekten kaydirilir. */
    flex: 0 0 33vw;
    width: 42vw;
    min-width: 430px;
    height: 285px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    /* tarayicinin kendi "resmi surukle" davranisini kapatir;
           yoksa surukleyerek kaydirma bozulur */
    -webkit-user-drag: none;
    user-select: none;
    transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease;
    will-change: transform;
}

/* Hover olunca diger gorseller biraz kuculur */
.portfolio-row:hover img {
    opacity: .45;
    transform: scale(.94);
}

/* Ustune gelinen gorsel one cikar */
.portfolio-row img:hover {
    opacity: 1;
    transform: scale(1.14) translateY(-10px);
    z-index: 20;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

/* ortadaki gorsel asagi kayar */
.portfolio-row-top img:nth-child(2),
.portfolio-row-middle img:nth-child(2),
.portfolio-row-bottom img:nth-child(2) {
    margin-top: 55px;
}

/* SCROLL LABEL */
.portfolio-scroll-label {
    color: #fff;
    font-size: 10px;
    margin-left: 22px;
    line-height: 1.2;
}

.portfolio-scroll-label-red {
    color: #d90000;
}

/* TEXT */
.portfolio-text {
    max-width: 900px;
    margin: 65px auto 0;
    text-align: center;
    padding: 0 24px;
}

    .portfolio-text h3 {
        margin: 0 0 32px;
        font-size: clamp(42px, 5vw, 72px);
        line-height: .92;
        font-weight: 900;
        letter-spacing: -2px;
    }

.portfolio-text-white {
    color: #fff;
}

.portfolio-text-red {
    color: #d90000;
}

/* COLUMNS */
.portfolio-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    text-align: left;
    margin-bottom: 44px;
}

    .portfolio-columns p {
        margin: 0;
        font-size: 10pt;
        line-height: 1.55;
    }

/* BUTTON */
.portfolio-visit-btn {
    display: inline-block;
    background: #fff;
    color: #d90000;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    font-style: italic;
}

.portfolio-visit-btn-red {
    background: #d90000;
    color: #fff;
}

/* FOOTER */
.portfolio-footer {
    height: 230px;
    background: #2f3032;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .portfolio-row {
        padding-left: 40px;
        padding-right: 40px;
    }

        .portfolio-row img {
            flex: 0 0 45vw;
            width: 45vw;
            min-width: 320px;
            height: 240px;
        }

    .portfolio-text {
        margin-top: 45px;
    }

    .portfolio-columns {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .portfolio-title {
        height: 95px;
    }

    .portfolio-block {
        padding-bottom: 70px;
    }

    .portfolio-row {
        gap: 10px;
        padding: 20px 16px 35px;
        /* ustteki negatif marginlari sifirla, yoksa mobilde kayma olur */
        margin-top: 0;
        margin-bottom: 0;
    }

        .portfolio-row img {
            flex: 0 0 78vw;
            width: 78vw;
            min-width: 260px;
            height: 210px;
        }

    .portfolio-row-top img:nth-child(2),
    .portfolio-row-middle img:nth-child(2),
    .portfolio-row-bottom img:nth-child(2) {
        margin-top: 35px;
    }

    .portfolio-row:hover img {
        opacity: 1;
        transform: none;
    }

    .portfolio-row img:hover {
        transform: scale(1.04);
        box-shadow: 0 14px 30px rgba(0,0,0,.25);
    }

    .portfolio-text h3 {
        font-size: 44px;
    }

    .portfolio-columns {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
    }

        .portfolio-columns p {
            font-size: 12px;
        }
}

@media (max-width: 480px) {
    .portfolio-row img {
        flex: 0 0 82vw;
        width: 82vw;
        min-width: 235px;
        height: 180px;
    }

    .portfolio-text h3 {
        font-size: 36px;
    }
}
/*portfolio*/

/*banner*/
/* ==========================================================================
   SITE BANNER
   Gorsel dogrudan background-image ile veriliyor (.hero-about ile ayni kalip).
   HTML: <section class="site-banner">
           <div class="site-banner__inner">
             <h1 class="site-banner__title">...</h1>
             <p class="site-banner__text">...</p>
           </div>
         </section>
   ========================================================================== */
.site-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(240px, 26vw, 490px);
    overflow: hidden;
    background-color: #1a1a1a;
    background-image: url("/media/Index/updates-banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* karartma katmani: metin okunur kalsin, gorsel sagda gorunsun */
.site-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
                rgba(0,0,0,.78) 0%,
                rgba(0,0,0,.62) 45%,
                rgba(0,0,0,.30) 100%);
}

.site-banner__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.site-banner__title {
    display: inline-block;
    margin: 0;
    /* basligin arkasindaki yari saydam blok */
    padding: 6px 18px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: clamp(30px, 5.2vw, 76px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.site-banner__text {
    margin: 16px 0 0;
    max-width: 640px;
    color: #fff;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.5;
    font-weight: 500;
}

@media (max-width: 768px) {
    .site-banner {
        min-height: 220px;
        /* kucuk ekranda gorsel detayi kayboluyor, metni one al */
    }

    .site-banner::before {
        background: linear-gradient(90deg,
                    rgba(0,0,0,.82) 0%,
                    rgba(0,0,0,.62) 100%);
    }

    .site-banner__inner {
        padding: 28px 16px;
    }

    .site-banner__title {
        padding: 4px 12px;
        letter-spacing: -.5px;
    }
}
/*banner*/