/*
 * Gold theme.
 * One shared gold recipe; each element tunes --gx-a (angle) and --gx-d (depth).
 */
html:root {
    --color-brand: #b8892b;
    --gx-gold: #d9ad4c;
    --gx-light: #ecd082;
    --gx-on: #1d1608;
    --gx-black: #0b0905;
    /* Reusable gold ramp for text and icon glyphs */
    --gx-text: linear-gradient(175deg, #fbefc4 0%, #ecd082 35%, #d8ae51 62%, #f2dc9e 100%);
}

::selection {
    background: var(--gx-gold);
    color: var(--gx-on);
}

:focus-visible {
    outline-color: #b8892b;
}

/* ---------- Logo sizing (refined & slightly more compact) ---------- */
.home-header .header-inner > .brand .brand-mark {
    transform: scale(1.25);
    transform-origin: left center;
}

@media (max-width: 991px) {
    .home-header .header-inner > .brand .brand-mark {
        transform-origin: center;
    }
}

.home-header .brand img {
    width: 185px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
}

.footer-brand .brand img,
.brand img {
    width: 165px;
    height: auto;
    max-height: 56px;
    object-fit: contain;
}

@media (max-width: 1199px) {
    .home-header .brand img {
        width: 170px;
        max-height: 56px;
    }
}

@media (max-width: 991px) {
    .home-header .brand img {
        width: clamp(135px, 38vw, 160px);
        max-height: 52px;
    }
}

@media (max-width: 767px) {

    .brand img,
    .home-header .brand img,
    .footer-brand .brand img {
        width: 135px;
        max-height: 52px;
    }
}

/* ---------- Shared gold surface ---------- */
.btn-brand,
.btn-brand:hover,
.btn-outline-brand:hover,
.service-card-cta,
.service-card-cta:hover,
.service-item[open] .service-toggle,
.faq-item[open] .faq-toggle,
.floating-contact .floating-phone,
.hero .catalog-banner,
.hero .catalog-banner:hover {
    background:
        linear-gradient(rgba(29, 22, 8, var(--gx-d, 0)), rgba(29, 22, 8, var(--gx-d, 0))),
        linear-gradient(var(--gx-a, 170deg), #f8e7b4 0%, #ecd082 22%, #d8ae51 46%, #c09334 62%, #f2dc9e 78%, #b98526 100%);
    border-color: rgba(255, 236, 176, .5);
    color: var(--gx-on);
}

.btn-brand:hover,
.service-card-cta:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 0 1px rgba(255, 236, 176, .35), 0 6px 20px rgba(217, 173, 76, .22);
    color: var(--gx-on);
}

.btn-brand,
.service-card-cta {
    transition: filter 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

/* Per-element variation */
.btn-brand {
    --gx-a: 135deg;
}

.service-card-cta {
    --gx-a: 160deg;
    --gx-d: .05;
}

.service-item[open] .service-toggle {
    --gx-a: 210deg;
    --gx-d: .1;
}

.faq-item[open] .faq-toggle {
    --gx-a: 45deg;
    --gx-d: .08;
}

.floating-contact .floating-phone {
    --gx-a: 145deg;
    --gx-d: .03;
}

.hero .catalog-banner {
    --gx-a: 100deg;
    --gx-d: 0;
}


.branch .btn:hover {
    color: #8a6420;
}

.service-card-variants li::marker {
    color: #b8892b;
}


/* ---------- Hero: title (larger, airier spacing, cohesive gold highlight) ---------- */
.hero .hero-copy {
    max-width: 900px;
}


.hero .hero-copy h1 {
    max-width: 20ch;
    font-size: clamp(2.65rem, 4.6vw, 4.55rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    word-spacing: .04em;
    margin-bottom: 18px;
}


.hero .hero-line {
    padding-bottom: .14em;
    margin-bottom: -.08em;
}


.hero .hero-line+.hero-line {
    margin-top: .06em;
}


.hero .hero-copy h1 .hero-gold {
    color: var(--gx-gold);
    background-image: var(--gx-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Hero: catalog banner (black text) ---------- */
.hero .catalog-banner {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transition: filter 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.hero .catalog-banner,
.hero .catalog-banner:hover,
.hero .catalog-icon,
.hero .catalog-label,
.hero .catalog-arrow {
    color: var(--gx-black);
}

.hero .catalog-label {
    font-weight: 700;
}

.hero .catalog-banner:hover .catalog-arrow {
    border-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .hero .catalog-banner:hover {
        filter: brightness(1.1);
        box-shadow: 0 10px 30px rgba(217, 173, 76, .3), 0 8px 24px rgba(0, 0, 0, .25);
        transform: translateY(-2px);
    }
}

/* ---------- Hero: action cards (black body, gold icons, solid white copy) ---------- */
.hero .action-tile {
    --gx-a: 180deg;
    gap: 12px;
    min-height: 144px;
    padding: 22px 12px 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #ffffff;
    background:
        linear-gradient(180deg, #17130d 0%, #0e0c08 100%) padding-box,
        linear-gradient(var(--gx-a), rgba(217, 173, 76, .22), rgba(236, 208, 130, .5) 45%, rgba(217, 173, 76, .2)) border-box;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), filter 200ms;
}

.hero .action-tile:nth-child(1) {
    --gx-a: 145deg;
}

.hero .action-tile:nth-child(2) {
    --gx-a: 175deg;
}

.hero .action-tile:nth-child(3) {
    --gx-a: 210deg;
}

.hero .action-tile:nth-child(4) {
    --gx-a: 135deg;
}

.hero .action-tile:nth-child(5) {
    --gx-a: 185deg;
}

.hero .action-tile:nth-child(6) {
    --gx-a: 220deg;
}

/* Icon: no ring, large filled gold glyph */
.hero .action-icon-wrap,
.hero .action-icon-wrap:has(.bi-whatsapp),
.hero .action-tile:hover .action-icon-wrap,
.hero .action-tile:hover .action-icon-wrap:has(.bi-whatsapp) {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    color: var(--gx-gold);
}

.hero .action-tile .action-icon,
.hero .action-tile .action-icon::before,
.hero .action-tile .action-icon-wrap>.icon,
.hero .action-tile .action-icon-wrap>.icon::before {
    font-size: 2.3rem;
    line-height: 1.1;
}

.hero .action-tile .action-icon-wrap>.icon::before {
    background-image: var(--gx-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.hero .action-tile-copy {
    width: 100%;
    color: #ffffff;
}

/* Label: solid crisp white text */
.hero .action-tile-copy strong {
    display: block;
    font-size: clamp(.78rem, 1.02vw, .92rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.015em;
    word-break: keep-all;
    overflow-wrap: normal;
    color: #ffffff;
}


.hero .action-tile-copy>span {
    color: #ffffff;
    font-size: clamp(.7rem, .85vw, .78rem);
    line-height: 1.45;
}

.hero .action-tile-arrow {
    color: rgba(255, 255, 255, .85);
}

@media (hover: hover) and (pointer: fine) {
    .hero .action-tile:hover {
        transform: translateY(-3px);
        filter: brightness(1.08);
        color: #ffffff;
        background:
            linear-gradient(180deg, #1c1710 0%, #110e09 100%) padding-box,
            linear-gradient(var(--gx-a), rgba(217, 173, 76, .5), #f5e2ab 45%, rgba(217, 173, 76, .5)) border-box;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 208, 130, .08);
    }

    .hero .action-tile:hover .action-tile-arrow {
        color: #ffffff;
    }
}

@media (max-width: 700px) {
    .hero .hero-copy h1 {
        font-size: clamp(2.05rem, 7.4vw, 2.75rem);
        line-height: 1.2;
        letter-spacing: -.01em;
        margin-bottom: 12px;
    }

    .hero .action-tile {
        gap: 8px;
        min-height: 116px;
        padding: 14px 6px 12px;
    }

    .hero .action-tile .action-icon,
    .hero .action-tile .action-icon::before,

    .hero .action-tile .action-icon-wrap>.icon,
    .hero .action-tile .action-icon-wrap>.icon::before {
        font-size: 1.85rem;
    }

    .hero .action-tile-copy strong {
        font-size: clamp(.72rem, 2.8vw, .82rem);
    }
}

.catalog-banner:focus-visible,
.action-tile:focus-visible {
    outline-color: #f2dc9e;
}

/* ---------- About (#hakkimizda): dark surface & adapted content colors ---------- */
#hakkimizda.about {
    background: #161412;
    color: var(--color-paper);
    border-bottom: 1px solid rgba(250, 247, 242, .1);
    --line: color-mix(in srgb, var(--color-paper) 18%, transparent);
    --muted: color-mix(in srgb, var(--color-paper) 78%, #161412);
}

#hakkimizda .section-eyebrow {
    color: var(--gx-gold);
}

#hakkimizda .about-story h2 {
    color: var(--color-paper);
}

#hakkimizda .about-description,
#hakkimizda .about-description p {
    color: var(--muted);
}

#hakkimizda .topic-links a {
    color: var(--color-paper);
    border-bottom-color: var(--line);
}

#hakkimizda .topic-links .icon {
    color: var(--gx-gold);
}

#hakkimizda .text-link {
    color: var(--gx-light);
}

#hakkimizda .about-detail {
    border-color: #161412;
    background: #201c18;
    color: var(--color-paper);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}

#hakkimizda .about-detail>span {
    padding-inline: 10px;
    padding-bottom: 4px;
    color: var(--color-paper);
}

#hakkimizda .about-detail .icon {
    color: var(--gx-gold);
}

@media (hover: hover) and (pointer: fine) {

    #hakkimizda .topic-links a:hover,
    #hakkimizda .text-link:hover,
    #hakkimizda .about-detail:hover>span {
        color: var(--gx-light);
    }
}

/* ---------- FAQ: predominantly dark, very subtle gold touches ---------- */
.faq {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0e0c09;
    background-image:
        radial-gradient(36% 42% at 10% 16%, rgba(168, 126, 43, .16) 0%, transparent 70%),
        radial-gradient(34% 40% at 88% 88%, rgba(145, 106, 32, .13) 0%, transparent 70%),
        radial-gradient(45% 50% at 85% 12%, rgba(42, 34, 20, .35) 0%, transparent 72%),
        radial-gradient(50% 50% at 18% 92%, rgba(32, 26, 15, .45) 0%, transparent 75%);
    --muted: color-mix(in srgb, var(--color-paper) 82%, #0e0c09);
}

.faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

.faq-item summary {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ---------- Floating buttons: soft wave ---------- */
.floating-contact a {
    --wave: rgba(217, 173, 76, .45);
}

.floating-contact .floating-whatsapp {
    --wave: rgba(18, 140, 69, .4);
}

.floating-contact a::before,
.floating-contact a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--wave);
    opacity: 0;
    pointer-events: none;
    animation: floating-wave 3.2s ease-out infinite;
}

.floating-contact a::after {
    animation-delay: 1.6s;
}

.floating-contact .floating-whatsapp::before {
    animation-delay: .8s;
}

.floating-contact .floating-whatsapp::after {
    animation-delay: 2.4s;
}

@keyframes floating-wave {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    70%,
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

/* ---------- Footer: faint gold curtain ornaments (footer only) ---------- */
footer.home-footer {
    position: relative;
}

footer.home-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    clip-path: inset(0);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 640' fill='none' stroke='%23d9ad4c' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M40 0C90 120 0 240 60 360S20 560 70 640'/%3E%3Cpath d='M110 0C170 130 70 250 130 370S90 570 140 640'/%3E%3Cpath d='M180 0C240 140 140 260 200 380S160 580 210 640'/%3E%3Cpath d='M250 0C310 150 210 270 270 390S230 590 280 640'/%3E%3Cpath d='M320 0C380 160 280 280 340 400S300 600 350 640'/%3E%3Cpath d='M390 0C450 170 350 290 410 410S370 610 420 640'/%3E%3Cpath d='M460 0C520 180 420 300 480 420S440 620 490 640'/%3E%3Cpath d='M0 40Q140 90 280 40T560 40' stroke-opacity='.7'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%23d9ad4c' stroke-width='1.2'%3E%3Ccircle cx='120' cy='120' r='110'/%3E%3Ccircle cx='120' cy='120' r='78' stroke-dasharray='3 7'/%3E%3Cpath d='M120 10V230M10 120H230' stroke-opacity='.5'/%3E%3Cpath d='M120 52L188 120 120 188 52 120Z'/%3E%3Ccircle cx='120' cy='120' r='6' fill='%23d9ad4c' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right top, left bottom 40px;
    background-size: auto 100%, 240px 240px;
    opacity: .1;
}

footer.home-footer>.container {
    position: relative;
    z-index: 1;
}

.footer-socials a:hover,
.footer-nav a:hover .icon {
    color: var(--gx-gold);
    border-color: var(--gx-gold);
}

.footer-credit a,
.footer-title {
    color: var(--gx-gold);
}

@media (max-width: 767px) {
    footer.home-footer::before {
        background-size: auto 70%, 160px 160px;
        opacity: .08;
    }
}