/* ==========================================================================
   Alber Kimya — Visual Enhancement Layer
   Sadece görsel deneyim: içerik değiştirilmez. Tüm sayfalarda ortak.
   ========================================================================== */

:root {
    --fx-ease-out: cubic-bezier(.22, 1, .36, 1);
    --fx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --fx-primary: #00246c;
    --fx-primary-2: #1b3b8a;
    --fx-accent: #56b4fa;
    --fx-accent-soft: #93ccff;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

html body {
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(86, 180, 250, .28);
    color: #00174c;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* Soft ambient background */
body.bg-surface {
    background-color: #f9f9ff;
    background-image:
        radial-gradient(60rem 40rem at 100% -10%, rgba(86, 180, 250, .08), transparent 60%),
        radial-gradient(50rem 35rem at -10% 30%, rgba(27, 59, 138, .06), transparent 60%);
    background-attachment: fixed;
}

main.bg-surface {
    background: transparent !important;
}

/* Accessible focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--fx-accent) !important;
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Page entrance
   -------------------------------------------------------------------------- */
@keyframes fxHeaderIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes fxFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body>header {
    animation: fxHeaderIn .8s var(--fx-ease-out) both;
}

body>main {
    animation: fxFadeIn .6s ease .1s both;
}

/* --------------------------------------------------------------------------
   Header: scroll state + progress bar
   -------------------------------------------------------------------------- */
body>header {
    transition: box-shadow .4s ease, transform .5s var(--fx-ease-out);
}

body>header>div:first-child {
    transition: margin-top .45s var(--fx-ease-out), opacity .3s ease;
}

body>header>div:nth-child(2)>div {
    transition: height .45s var(--fx-ease-out);
}

body>header.fx-scrolled {
    box-shadow: 0 10px 40px -12px rgba(0, 36, 108, .18) !important;
}

body>header.fx-scrolled>div:first-child {
    margin-top: -2.5rem;
    opacity: 0;
    pointer-events: none;
}

body>header.fx-scrolled>div:nth-child(2) {
    background-color: rgba(255, 255, 255, 1);
}

body>header.fx-scrolled>div:nth-child(2)>div.h-20 {
    height: 4.25rem;
}

.fx-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--fx-progress, 0));
    background: linear-gradient(90deg, var(--fx-primary-2), var(--fx-accent), #b4c5ff);
    box-shadow: 0 0 12px rgba(86, 180, 250, .6);
    pointer-events: none;
    z-index: 2;
}

/* Desktop nav: animated underline */
header nav a {
    position: relative;
}

header nav a:not([aria-current="page"])::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fx-primary-2), var(--fx-accent));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--fx-ease-out);
}

header nav a:not([aria-current="page"]):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

header nav a[aria-current="page"] {
    box-shadow: inset 0 0 0 1px rgba(27, 59, 138, .08);
}

/* --------------------------------------------------------------------------
   Scroll reveal (upgrades the existing .animate-on-scroll)
   -------------------------------------------------------------------------- */
html .animate-on-scroll {
    opacity: 0;
    transform: translateY(36px) scale(.985);
    filter: blur(6px);
    transition: opacity .9s var(--fx-ease-out), transform 1s var(--fx-ease-out), filter .9s var(--fx-ease-out);
}

html .animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

footer.animate-on-scroll {
    filter: none !important;
    transform: none !important;
}

.fx-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--fx-ease-out), transform .9s var(--fx-ease-out),
        box-shadow .45s var(--fx-ease-out), border-color .3s ease, background-color .3s ease;
    transition-delay: var(--fx-delay, 0ms), var(--fx-delay, 0ms), 0ms, 0ms, 0ms;
}

.fx-reveal.fx-in {
    opacity: 1;
    transform: none;
}

.fx-reveal.fx-done {
    transition: transform .5s var(--fx-ease-out), box-shadow .45s var(--fx-ease-out),
        opacity .3s ease, border-color .3s ease, background-color .3s ease;
}

/* --------------------------------------------------------------------------
   Cards: lift, layered shadow, cursor spotlight, accent edge
   -------------------------------------------------------------------------- */
.fx-card {
    position: relative;
    isolation: isolate;
    will-change: transform;
}

.fx-card.fx-in:hover,
.fx-card:not(.fx-reveal):hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(0, 36, 108, .04), 0 24px 48px -16px rgba(0, 36, 108, .22) !important;
}

.fx-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(86, 180, 250, .13), transparent 45%);
    opacity: 0;
    transition: opacity .4s ease;
}

.fx-card:hover::before {
    opacity: 1;
}

.fx-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    padding: 1px;
    background: linear-gradient(135deg, rgba(86, 180, 250, .7), rgba(27, 59, 138, .15) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
}

.fx-card:hover::after {
    opacity: 1;
}

.fx-card>* {
    position: relative;
    z-index: 2;
}

.fx-card>img,
.fx-card>.absolute {
    position: absolute;
}

/* Smoother image zoom inside cards */
.fx-card img {
    transition: transform 1.1s var(--fx-ease-out), filter .6s ease !important;
}

.fx-card:hover img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

/* Icon tiles pop on card hover */
.fx-card .material-symbols-outlined {
    transition: transform .5s var(--fx-ease-spring), color .3s ease;
}

.fx-card:hover .w-14>.material-symbols-outlined,
.fx-card:hover .w-12>.material-symbols-outlined {
    transform: scale(1.12) rotate(-6deg);
}

/* --------------------------------------------------------------------------
   Buttons: shine sweep + press feedback
   -------------------------------------------------------------------------- */
.fx-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fx-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .8s var(--fx-ease-out);
}

.fx-btn:hover::after {
    left: 130%;
}

.fx-btn>* {
    position: relative;
    z-index: 2;
}

.fx-btn .material-symbols-outlined {
    transition: transform .4s var(--fx-ease-out);
}

.fx-btn:hover .material-symbols-outlined:last-child {
    transform: translateX(4px);
}

a.fx-btn:active,
button.fx-btn:active {
    transform: scale(.97) !important;
    transition-duration: .1s;
}

.fx-ripple {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 1;
    background: rgba(255, 255, 255, .45);
    transform: scale(0);
    animation: fxRipple .7s var(--fx-ease-out) forwards;
}

@keyframes fxRipple {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
@keyframes fxKenBurns {
    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1);
    }
}

.fx-hero-img {
    animation: fxKenBurns 2.4s var(--fx-ease-out) both;
}

.fx-hero-float {
    animation: fxFloat 6s ease-in-out infinite;
}

@keyframes fxFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.fx-hero-content>* {
    opacity: 0;
    transform: translateY(24px);
    animation: fxUp .9s var(--fx-ease-out) forwards;
}

.fx-hero-content>*:nth-child(1) {
    animation-delay: .35s;
}

.fx-hero-content>*:nth-child(2) {
    animation-delay: .5s;
}

.fx-hero-content>*:nth-child(3) {
    animation-delay: .65s;
}

.fx-hero-content>*:nth-child(4) {
    animation-delay: .8s;
}

.fx-hero-content>*:nth-child(5) {
    animation-delay: .95s;
}

@keyframes fxUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Section accent bars grow in */
.fx-bar {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1s var(--fx-ease-out) .25s;
}

.is-visible .fx-bar {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Floating quick-actions
   -------------------------------------------------------------------------- */
aside.fixed>div {
    animation: fxPop .7s var(--fx-ease-spring) both;
}

aside.fixed>div:nth-child(1) {
    animation-delay: 1s;
}

aside.fixed>div:nth-child(2) {
    animation-delay: 1.15s;
}

@keyframes fxPop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.6);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

aside.fixed a[href*="wa.me"] {
    position: relative;
}

aside.fixed a[href*="wa.me"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #25D366;
    z-index: -1;
    animation: fxPulse 2.4s ease-out infinite;
}

@keyframes fxPulse {
    0% {
        transform: scale(1);
        opacity: .55;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer li a,
footer .text-xs a,
footer a[href^="tel:"],
footer a[href^="mailto:"] {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .45s var(--fx-ease-out), color .3s ease;
}

footer li a:hover,
footer .text-xs a:hover,
footer a[href^="tel:"]:hover,
footer a[href^="mailto:"]:hover {
    background-size: 100% 1px;
}

footer {
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(86, 180, 250, .6), transparent);
}

/* --------------------------------------------------------------------------
   Teklif modal: spring entrance + nicer fields
   -------------------------------------------------------------------------- */
#teklifModal {
    background: rgba(0, 15, 46, .55) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#teklifModal>div {
    transform: translateY(0) scale(1);
    transition: transform .6s var(--fx-ease-spring), opacity .35s ease;
    box-shadow: 0 40px 80px -20px rgba(0, 15, 46, .45);
}

#teklifModal.opacity-0>div {
    transform: translateY(40px) scale(.94);
    opacity: 0;
}

#teklifModal input,
#teklifModal textarea,
main input,
main textarea,
main select {
    transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease !important;
}

#teklifModal input:focus,
#teklifModal textarea:focus,
main input:focus,
main textarea:focus,
main select:focus {
    box-shadow: 0 0 0 4px rgba(86, 180, 250, .18) !important;
    background-color: #fff;
}

#teklifModal button[type="submit"],
main button[type="submit"] {
    transition: background-color .3s ease, transform .3s var(--fx-ease-out), box-shadow .3s ease !important;
}

#teklifModal button[type="submit"]:hover,
main button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(0, 36, 108, .45);
}

/* Mobile hamburger subtle entrance */
#mobileMenuBtn .mm-bar:nth-child(1) {
    animation: fxBar .6s var(--fx-ease-out) .5s both;
}

#mobileMenuBtn .mm-bar:nth-child(2) {
    animation: fxBar .6s var(--fx-ease-out) .6s both;
}

#mobileMenuBtn .mm-bar:nth-child(3) {
    animation: fxBar .6s var(--fx-ease-out) .7s both;
}

@keyframes fxBar {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    html .animate-on-scroll,
    .fx-reveal,
    .fx-hero-content>* {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}