/* ==========================================================================
   efecansungur.com — MOBİL GÖRÜNÜM (≤ 860px)
   Masaüstü düzeninin küçültülmüş hâli değil; kendi düzeni olan ayrı bir katman:
   hamburger + tam ekran çekmece, alt sekme barı, tek kolon akış, dokunma
   hedefleri 44px+, safe-area desteği.
   ========================================================================== */

@media (max-width: 860px) {

    /* ---------------------------------------------------- temel ölçekleme */
    :root {
        --gutter: 20px;
        --nav-h: 66px;
        --r-lg: 20px;
        --r-xl: 26px;
    }

    body.page {
        font-size: 16px;
        line-height: 1.68;
        /* alt sekme barı için yer aç */
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body.drawer-open { overflow: hidden; }

    h1, h2, h3 { letter-spacing: -.012em; }

    .display { font-size: clamp(2.3rem, 11vw, 3.3rem); }
    .h1 { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
    .h2 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
    .h3 { font-size: 1.28rem; }
    .lead { font-size: 1.02rem; line-height: 1.6; }

    .eyebrow { font-size: 10.5px; letter-spacing: .24em; margin-bottom: 16px; }
    .eyebrow::before { width: 22px; }

    .section { padding: 60px 0; }
    .section--tight { padding: 48px 0; }
    .section__head { margin-bottom: 32px; }
    .section__head p { margin-top: 16px; }

    /* ------------------------------------------------------------- topbar */
    .topbar::before { opacity: 1; border-bottom-color: color-mix(in srgb, var(--bordo) 10%, transparent); }
    .topbar.is-stuck .topbar__inner { height: 58px; }
    .topbar__inner { gap: 12px; }

    .mainnav { display: none; }
    .topbar__actions .btn--ghost { display: none; }

    .burger { display: grid; }

    .brand { gap: 11px; }
    .mono--mark { width: 44px; height: 26px; }
    .brand__text strong { font-size: 11.5px; letter-spacing: .18em; }
    .brand__text em { font-size: 9.5px; letter-spacing: .1em; }

    /* -------------------------------------------------------- tam çekmece */
    .drawer__panel {
        width: 100%;
        padding: 20px var(--gutter) calc(26px + env(safe-area-inset-bottom));
    }
    .drawer__nav a { font-size: 27px; padding: 16px 2px; }
    .drawer__foot { margin-top: 22px; }

    /* --------------------------------------------------------------- hero */
    .hero {
        padding-top: calc(var(--nav-h) + 28px);
        padding-bottom: 48px;
    }
    .hero__inner { grid-template-columns: 1fr; gap: 34px; }
    .hero__figure { order: -1; }

    .hero__title { font-size: clamp(2.5rem, 12vw, 3.6rem); line-height: 1.02; margin-bottom: 20px; }
    .hero__sub { max-width: none; font-size: 16.2px; }
    .hero__cta { margin-top: 26px; gap: 10px; }
    .hero__cta .btn { flex: 1 1 100%; }

    .hero__frame { aspect-ratio: 1 / 1.1; border-radius: 200px 200px var(--r-lg) var(--r-lg); }
    .hero__ring { inset: -10px -10px 14px -10px; border-radius: 210px 210px var(--r-lg) var(--r-lg); }
    .hero__badge { left: auto; right: 8px; bottom: 14px; padding: 12px 16px; animation: none; }
    .hero__badge strong { font-size: 21px; }
    .hero__badge span { font-size: 10px; letter-spacing: .12em; }
    .hero__watermark { font-size: 17rem; right: -14%; bottom: -6%; opacity: .7; }
    .hero__scroll { display: none; }

    /* ------------------------------------------------------------ marquee */
    .marquee { padding: 14px 0; }
    .marquee__item { font-size: 1rem; padding-inline: 16px; gap: 16px; }
    .marquee__track { animation-duration: 24s; }

    /* --------------------------------------------------------- istatistik */
    .stats { grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); }
    .stat { padding: 24px 14px; border-right: 1px solid color-mix(in srgb, var(--bordo) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--bordo) 10%, transparent); }
    .stat:nth-child(2n) { border-right: 0; }
    .stat:nth-last-child(-n+2) { border-bottom: 0; }
    .stat__value { font-size: 2.2rem; }
    .stat__label { font-size: 11px; letter-spacing: .1em; margin-top: 8px; }

    /* -------------------------------------------------------------- split */
    .split, .split--reverse { grid-template-columns: 1fr; gap: 30px; }
    .split--reverse .split__media { order: -1; }
    .split__media { order: -1; }
    .split__media img { aspect-ratio: 4 / 4.4; }
    .split__media::before { inset: 14px -14px -14px 14px; }
    .split__quote {
        position: static; right: auto; bottom: auto;
        max-width: none; margin-top: 18px; font-size: 16px;
    }

    .split__media--sticky { position: static; }
    .portrait-tag { left: 12px; bottom: 12px; padding: 11px 16px; }
    .portrait-tag strong { font-size: 1rem; }
    .portrait-tag span { font-size: 9.5px; letter-spacing: .14em; }

    .prose p { font-size: 16.2px; line-height: 1.78; }
    .prose__first::first-letter { font-size: 3.4em; }
    .pullquote { margin: 26px 0; padding: 22px 22px; }
    .pullquote p { font-size: 1.14rem; }

    .facts { margin-top: 26px; }
    .fact { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
    .fact dt { font-size: 10.5px; letter-spacing: .14em; }
    .fact dd { font-size: 15.5px; }
    .signature { font-size: 25px; margin-top: 26px; }

    /* ----------------------------------------------------------- kartlar */
    .cards { grid-template-columns: 1fr; gap: 14px; }
    .card { padding: 28px 24px; }
    /* dokunmatikte hover yok — kartlar sürekli açık renkte kalsın */
    .card:hover { transform: none; box-shadow: var(--shadow-sm); }
    .card:hover::before { opacity: 0; }
    .card:hover .card__title { color: var(--bordo-deep); }
    .card:hover .card__text { color: color-mix(in srgb, var(--ink) 68%, transparent); }
    .card:hover .card__icon { background: color-mix(in srgb, var(--bordo) 7%, transparent); color: var(--bordo); }
    .card:active { transform: scale(.99); }
    .card__icon { width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px; }
    .card__title { font-size: 1.22rem; }
    .card__index { top: 22px; right: 24px; font-size: 13px; }

    /* ------------------------------------------------------ zaman çizgisi */
    .tl { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    .tl:hover { padding-left: 0; }
    .tl__year { font-size: 1.45rem; }
    .tl__body h3 { font-size: 1.15rem; }
    .tl__body p { font-size: 15px; }

    /* ------------------------------------------------------------- galeri */
    .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
    .gitem { aspect-ratio: 3 / 4; border-radius: 14px; }
    .gitem:nth-child(even) { margin-top: 0; }
    .gitem::after { opacity: 1; }
    .gitem__cap { opacity: 1; transform: none; font-size: 14.5px; left: 14px; right: 14px; bottom: 12px; }

    /* -------------------------------------------------------- referanslar */
    .quotes { grid-template-columns: 1fr; gap: 14px; }
    .quote { padding: 26px 24px; }
    .quote__text { font-size: 1.04rem; }

    /* ----------------------------------------------------- iletişim / form */
    .contact-grid { grid-template-columns: 1fr; gap: 12px; }
    .ccard { padding: 24px 22px; }
    .ccard__value { font-size: 1.14rem; }

    .formwrap { grid-template-columns: 1fr; gap: 26px; }
    .form { padding: 26px 22px; border-radius: var(--r-lg); }
    .form__row { grid-template-columns: 1fr; gap: 0; }
    .field { margin-bottom: 16px; }
    /* iOS'ta odaklanınca sayfayı zoom'lamaması için 16px taban */
    .field input, .field textarea, .field select { font-size: 16px; padding: 14px 14px; }
    .field textarea { min-height: 132px; }

    .mapbox iframe { height: 280px; }

    /* ---------------------------------------------------------------- sss */
    .faq details { padding: 2px 20px; }
    .faq summary { font-size: 1.04rem; padding: 18px 0; gap: 14px; }
    .faq p { padding-bottom: 20px; font-size: 15.4px; }

    /* ---------------------------------------------------------------- cta */
    .cta-band__inner { grid-template-columns: 1fr; gap: 26px; }
    .cta-band .btns { width: 100%; }
    .cta-band .btns .btn { flex: 1 1 100%; }

    /* -------------------------------------------------------- sayfa başlık */
    .pagehead { padding-top: calc(var(--nav-h) + 30px); padding-bottom: 38px; }
    .pagehead__crumbs { font-size: 10.5px; margin-bottom: 18px; }
    .pagehead__mark { font-size: 12rem; top: auto; bottom: -12%; right: -10%; }

    /* ------------------------------------------------------------- footer */
    .foot { padding-top: 52px; }
    .foot__inner { grid-template-columns: 1fr; gap: 34px; padding-bottom: 34px; }
    .foot__mark { font-size: 11rem; top: -2%; right: -6%; }
    .foot__tagline { font-size: 1rem; max-width: none; }
    .foot__col h4 { margin-bottom: 14px; font-size: 10.5px; }
    .foot__col ul { gap: 12px; }
    .foot__col ul a { display: inline-block; padding: 2px 0; }
    .foot__bar {
        flex-direction: column; align-items: flex-start; gap: 14px;
        padding-block: 20px calc(24px + env(safe-area-inset-bottom));
        font-size: 12px;
    }
    .foot__admin { width: 100%; justify-content: center; padding: 13px 18px; font-size: 13px; }

    /* ------------------------------------------------- alt sekme barı (mobil) */
    .wafloat { display: none; }

    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 780;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        background: color-mix(in srgb, var(--white) 92%, transparent);
        backdrop-filter: saturate(160%) blur(18px);
        -webkit-backdrop-filter: saturate(160%) blur(18px);
        border-top: 1px solid color-mix(in srgb, var(--bordo) 12%, transparent);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -12px 30px -22px rgba(64, 12, 21, .5);
    }
    .tabbar a {
        position: relative;
        display: grid; place-items: center; gap: 3px;
        padding: 9px 4px 10px;
        min-height: 58px;
        font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
        color: color-mix(in srgb, var(--ink) 55%, transparent);
        transition: color .3s var(--ease-soft);
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar a::before {
        content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 2px;
        border-radius: 0 0 3px 3px;
        background: var(--bordo);
        transform: translateX(-50%) scaleX(0);
        transition: transform .4s var(--ease);
    }
    .tabbar a.is-active { color: var(--bordo); }
    .tabbar a.is-active::before { transform: translateX(-50%) scaleX(1); }
    .tabbar a:active { color: var(--bordo-deep); }
    .tabbar__wa { color: var(--bordo) !important; }
    .tabbar__wa .icon { color: var(--bordo); }

    /* --------------------------------------------------- reveal daha kısa */
    [data-reveal] { transform: translateY(16px); transition-duration: .7s; }

    /* mobilde ince kaydırma çubuğu */
    ::-webkit-scrollbar { width: 0; height: 0; }
}

/* ---------------------------------- çok küçük telefonlar (≤ 360px) */
@media (max-width: 360px) {
    :root { --gutter: 15px; }
    .brand__text em { display: none; }
    .brand__text strong { font-size: 10.5px; letter-spacing: .12em; }
    .hero__title { font-size: 2.15rem; }
    .stats { grid-template-columns: 1fr; }
    .stat { border-right: 0 !important; }
    .stat:last-child { border-bottom: 0; }
    .gallery { grid-template-columns: 1fr; }
    .tabbar a { font-size: 9.5px; }
    .ccard, .card, .quote { padding-inline: 18px; }
}

/* --------------------------------- tablet (861–1024px) ince ayar */
@media (min-width: 861px) and (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr .85fr; }
    .hero__badge { left: -14px; }
    .formwrap { grid-template-columns: 1fr; }
    .fact { grid-template-columns: 150px 1fr; }
}

/* ------------------------- dokunmatik cihazlarda hover efektlerini kıs */
@media (hover: none) {
    .btn--solid:hover { transform: none; }
    .quote:hover, .ccard:hover, .card:hover { transform: none; }
    .info-line:hover { transform: none; }
    .gitem:hover img { transform: none; }
    .foot__col ul a:hover { padding-left: 0; }
}

/* -------------------------------------- yatay mobil (landscape phone) */
@media (max-width: 860px) and (orientation: landscape) {
    .hero { padding-top: calc(var(--nav-h) + 20px); }
    .hero__inner { grid-template-columns: 1fr 1fr; align-items: center; }
    .hero__figure { order: 0; }
    .hero__frame { aspect-ratio: 4 / 3.4; border-radius: var(--r-lg); }
    .hero__ring { display: none; }
}