/* Small overrides for Laravel integration (keep vendor CSS intact). */

/*
 * Desktop-only motion (tema `site.isMobile` = viewport width < 1200px)
 * ---------------------------------------------------------------------
 * - Logo: Loader `lightBlink` on `.header-logo` — below 1200px we force opacity:1 (see media query near header).
 * - Works kategori başlığı: `works.blade.php` — düz metin <1200px; `.works-title` + TemplateWorks ≥1200px.
 * - Video kart başlığı: `c-title data-mobile="false"` — Title bileşeni mobilde split/reveal yapmaz.
 */

/*
 * Artefakt app-DZbACm4C.css (@theme) defines:
 *   --font-heading: "DrukWide", sans-serif;
 *   --font-body: "TronicaMono", sans-serif;
 * Laravel resources/css/app.css (@theme) uses Instrument Sans for --font-sans; we mirror that for headings/body.
 */
:root {
    --font-heading:
        "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-body:
        "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

/* Global font — match resources/css/app.css + override Artefakt var(--font-heading) consumers */
html,
body,
button,
input,
textarea,
select,
#app {
    font-family:
        "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji" !important;
}

#app * {
    font-family: inherit !important;
}

/* Do not override embedded media / canvas (fonts irrelevant; inherit can confuse some browsers) */
#app canvas,
#app video,
#app iframe {
    font-family: initial !important;
}

/* Global uppercase (locale-insensitive handled via lang="en" in layout)
   Force with !important to override vendor styles. */
html {
    text-transform: uppercase;
}

#app,
#wrapper {
    text-transform: uppercase;
}

/* Exceptions: keep technical strings readable */
a[href^="tel:"],
.sg-no-uppercase,
.sg-no-uppercase * {
    text-transform: none !important;
}

/* Email: lowercase (#app * / #wrapper * { uppercase } would otherwise win over html a[href^=mailto]) */
#app a[href^="mailto:"],
#app a[href^="mailto:"] *,
#app .sg-email,
#app .sg-email *,
#wrapper a[href^="mailto:"],
#wrapper a[href^="mailto:"] *,
#wrapper .sg-email,
#wrapper .sg-email * {
    text-transform: lowercase !important;
}

/* Work card pill: yalnızca görsel alanı hover/focus (md+); hoversız görünmez; mobilde gizli */
.sg-card-open-pill {
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
    a.group\/card-work .card-work-image:hover .sg-card-open-pill,
    a.group\/card-work .card-work-image:focus-within .sg-card-open-pill,
    a.group\/card-work:focus-visible .sg-card-open-pill {
        opacity: 1 !important;
    }
}

@media (max-width: 767px) {
    .sg-card-open-pill {
        display: none !important;
    }
}

/* Tema: CardWork is-hover + hover ile opacity/overlay farkı yok */
a.group\/card-work .card-work-image,
a.group\/card-work.is-hover .card-work-image {
    opacity: 1 !important;
}

/* WebGL canvas: fare ile plane etkileşimi (distortion/hover) yok — tıklama <a>’ya gider */
c-card-work .card-work-plane canvas {
    pointer-events: none !important;
}

/* Shuffle / tema metin animasyonları — GSAP inline stilleri tamamen durduramaz; mümkün olduğunca nötr */
c-shuffle,
c-shuffle-chars,
c-shuffle *,
c-shuffle-chars * {
    animation: none !important;
}

c-shuffle .char,
c-shuffle-chars .char {
    opacity: 1 !important;
    visibility: visible !important;
}

/* TemplateWorks / grid: kare “blink” animasyonu */
.blink {
    animation: none !important;
}

/* Works: boş alanlara sızan / ara sıra beliren tema parçaları */
.template-works .sg-template-works-filters {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.template-works [aria-hidden="true"] .square {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    animation: none !important;
}

/* Shuffle hedefleri sr-only içinde kalsın; içerik taşmasın */
.template-works .sr-only {
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

/* Works: extra bottom breathing room + safe area on phones */
@media (max-width: 767px) {
    .card-work-title {
        padding-bottom: 0.75rem;
    }

    c-view-switcher.works {
        /* Extra space so the last card title can scroll fully into view above the safe area */
        padding-bottom: max(
            2.5rem,
            calc(1.5rem + env(safe-area-inset-bottom, 0px))
        );
    }
}

/* List view: slightly smaller category label on narrow screens */
@media (max-width: 767px) {
    .works-list-category {
        font-size: 0.625rem;
        line-height: 1.15;
    }
}

/* Header: scroll’da gizlenir (sg-header-scroll-hide.js → .sg-header--scrolled-away) */
.header {
    transition:
        transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity 0.35s ease;
    will-change: transform;
}

.header.sg-header--scrolled-away {
    transform: translate3d(0, calc(-100% - 0.75rem), 0);
    opacity: 0;
    pointer-events: none;
}

/*
 * Loader → animateHeader: .header-logo için lightBlink (opacity flicker).
 * Dar ekranda (tema isMobile: genişlik < 1200px) efekt istenmiyor; GSAP inline opacity’yi bastırır.
 */
@media (max-width: 1199px) {
    .header .header-logo {
        opacity: 1 !important;
    }
}

/* Sağ alt: yukarı çık (sg-header-scroll-hide.js → .sg-scroll-top--visible) */
.sg-scroll-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        background 0.2s ease;
}

.sg-scroll-top.sg-scroll-top--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.sg-scroll-top:hover,
.sg-scroll-top:focus-visible {
    background: rgba(255, 255, 255, 0.24);
}

.sg-scroll-top:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
}

.sg-scroll-top__icon {
    display: block;
    margin-top: -2px;
}

/* Mobile header: hamburger (tema .header-toggler-text açıkken .a ekler) */
.header-toggler.sg-header-toggler {
    padding: 1.25rem !important;
    min-width: 3.5rem;
    min-height: 3.5rem;
    box-sizing: border-box;
}

.sg-header-burger-icon {
    position: relative;
    display: block;
    width: 1.625rem;
    height: 1rem;
}

.sg-header-burger-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition:
        transform 0.22s ease,
        opacity 0.22s ease,
        top 0.22s ease,
        bottom 0.22s ease;
}

.sg-header-burger-line:nth-child(1) {
    top: 0;
    transform-origin: center;
}

.sg-header-burger-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.sg-header-burger-line:nth-child(3) {
    bottom: 0;
    transform-origin: center;
}

.header-toggler-text.a .sg-header-burger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.header-toggler-text.a .sg-header-burger-line:nth-child(2) {
    opacity: 0;
}

.header-toggler-text.a .sg-header-burger-line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* Text wordmark (header): two-line lockup; keep “serkan güler” lowercase (global rule is uppercase) */
.header-logo.sg-wordmark,
.header-logo.sg-wordmark * {
    text-transform: lowercase !important;
}

.header-logo.sg-wordmark {
    width: auto;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.header-logo.sg-wordmark .sg-wordmark-line {
    line-height: 0.95;
}

/* Prevent layout shift when modal/menu open */
html.sg-scroll-locked,
body.sg-scroll-locked {
    overflow: hidden !important;
}

/* Mobile menu overlay (artefakt-like) */
.sg-mobile-menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .sg-mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        padding: 0.75rem 0.5rem;
        cursor: pointer;
    }
}

.sg-mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
}

.sg-mobile-menu.is-open {
    display: block;
}

.sg-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}

.sg-mobile-menu__panel {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 1.25rem 1rem 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sg-mobile-menu__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.sg-mobile-menu__close {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
}

.sg-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sg-mobile-menu__list a {
    color: #fff;
    text-decoration: none;
    font-size: 1.125rem;
}

/* Video modal */
.sg-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4500;
}

.sg-video-modal.is-open {
    display: block;
}

.sg-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.sg-video-modal__dialog {
    position: relative;
    width: calc(100% - 2rem);
    max-width: 58rem;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.sg-video-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    width: 2.375rem;
    height: 2.375rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sg-video-modal__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.sg-video-modal__frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}

@media (min-width: 1024px) {
    .mt-responsive {
        margin-top: 25rem !important;
    }
}