/*
 * AYBUGE — Mobile Responsive
 * Bu dosya layout.php'de en son yüklenir, tüm override'ları içerir.
 * Referans: Modarenta_v2 mobile UX
 * Breakpoints: 820px (tablet), 640px (mobile), 400px (small mobile)
 */

/* ═══════════════════════════════════════════════════════════════
   TABLET — max-width: 820px
════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ── Container ──────────────────────────────────────────────── */
  .container { --container-gutter: 20px; }

  /* ── Section spacing ────────────────────────────────────────── */
  .content-section { padding-block: clamp(44px, 6vw, 72px); }
  .page-home .content-section { padding-block: clamp(44px, 6vw, 72px); }

  /* ── Section headings ───────────────────────────────────────── */
  .page-home .content-section .section-heading,
  .ab-head, .uc-head, .om-head, .projects-head {
    text-align: left;
    max-width: none;
    margin-inline: 0;
  }


  /* ── Activity Branches ──────────────────────────────────────── */
  .ab-workbench {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .ab-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 6px;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid #e4ebf3;
  }

  .ab-tabs::-webkit-scrollbar { display: none; }

  .ab-tab {
    flex: 0 0 auto;
    min-width: 160px;
    min-height: 52px;
    scroll-snap-align: start;
    grid-template-columns: 26px 1fr;
    border-radius: 10px;
    border: 1px solid #e4ebf3;
  }

  .ab-tab.is-active {
    background: #fff;
    border-color: rgba(16,152,162,.3);
  }

  .ab-tab__chevron { display: none; }

  .ab-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
    min-height: auto;
  }

  .ab-panel__title {
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
  }

  .ab-mock { transform: none !important; max-width: 100%; }
  .ab-panel:hover .ab-mock { transform: none !important; }

  /* ── Use Case Grid ──────────────────────────────────────────── */
  .uc-grid {
    grid-template-columns: 1fr;
  }

  .uc-head__title {
    font-size: clamp(1.35rem, 3.5vw, 1.75rem) !important;
  }

  /* ── Projects ───────────────────────────────────────────────── */
  .projects-grid,
  .projects-branch__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ── Infrastructure ─────────────────────────────────────────── */
  .infrastructure-stage {
    grid-template-columns: 1fr;
  }

  .infra-capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .infra-capabilities article {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .infra-capabilities article > i { display: none; }

  .technology-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ── Operating model ────────────────────────────────────────── */
  .om-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-process  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-step:not(:last-child)::after { display: none; }

  /* ── Footer ─────────────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand__desc { max-width: 56ch; }

  /* ── CTA ────────────────────────────────────────────────────── */
  .content-cta {
    grid-template-columns: 1fr;
  }

  .content-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBİL — max-width: 640px
════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Container ──────────────────────────────────────────────── */
  .container { --container-gutter: 16px; }

  /* ── Spacing ────────────────────────────────────────────────── */
  .content-section { padding-block: clamp(36px, 8vw, 52px); }
  .page-home .content-section { padding-block: clamp(36px, 8vw, 52px); }

  /* ── Section heading ────────────────────────────────────────── */
  .page-home .content-section .section-heading h2,
  .ab-head__title, .uc-head__title, .om-head__title, .projects-head__title {
    font-size: clamp(1.25rem, 5.5vw, 1.65rem) !important;
    letter-spacing: -.02em;
    line-height: 1.22;
  }


  /* Hero background orbs — mobile optimize */
  .hero-bg__orb--a { width: 280px; height: 280px; }
  .hero-bg__orb--b { width: 240px; height: 240px; }
  .hero-bg__orb--c,
  .hero-bg__orb--d { display: none; }

  /* ── Refs marquee ───────────────────────────────────────────── */
  .ref-marquee { padding: 16px 0 20px; }
  .ref-marquee__head { margin-bottom: 12px; }
  .ref-marquee__chip { min-width: 120px; height: 52px; padding: 0 14px; }

  /* ── Activity Branches ──────────────────────────────────────── */
  .ab-tabs {
    margin: 0 calc(-1 * var(--container-gutter, 16px));
    padding: 8px 16px;
    border-radius: 0;
  }

  .ab-tab { min-width: 148px; min-height: 48px; padding: 10px 12px; }
  .ab-tab__num { width: 24px; height: 24px; font-size: .58rem; }

  .ab-panel { padding: 20px 16px; gap: 16px; }

  .ab-panel__eyebrow { font-size: .62rem; }

  .ab-panel__title {
    font-size: clamp(1.1rem, 5.5vw, 1.45rem) !important;
  }

  .ab-highlight { padding: 12px 14px; }
  .ab-highlight small { font-size: .58rem; }
  .ab-highlight p, .ab-highlight li { font-size: .8rem; }

  .ab-panel__cta { font-size: .8rem; }

  /* AB visual compact */
  .ab-vis { border-radius: 12px; }

  .ab-vis__top {
    grid-template-columns: 80px 1fr;
    gap: 10px;
    padding: 12px 14px 10px;
  }

  .ab-vis__ring-svg { width: 72px; height: 72px; }

  .ab-vis__ring-label strong { font-size: .92rem; }
  .ab-vis__ring-label span { font-size: .5rem; }
  .ab-vis__ring-label small { display: none; }

  .ab-vis__bar-header span { font-size: .62rem; }
  .ab-vis__bar-header em { font-size: .6rem; }

  .ab-vis__steps { padding: 10px 14px; }
  .ab-vis__step-label { font-size: .7rem; }

  /* ── Use Case Grid ──────────────────────────────────────────── */
  .uc-grid { grid-template-columns: 1fr; gap: 12px; }
  .uc-head { gap: 8px; margin-bottom: 22px; }

  .uc-card__inner { padding: 20px 18px 14px; gap: 10px; }
  .uc-card__footer { padding: 12px 18px 16px; }

  .uc-card__title {
    font-size: clamp(.96rem, 4vw, 1.15rem) !important;
  }

  .uc-card__desc { font-size: .8rem; }
  .uc-card__list li { font-size: .78rem; }
  .uc-card__link { font-size: .78rem; }

  /* ── Projects ───────────────────────────────────────────────── */
  .projects-head { margin-bottom: 18px; }

  .projects-branch { margin-bottom: 28px; }

  .projects-branch__head {
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  .projects-branch__title { font-size: .86rem; }
  .projects-branch__count { font-size: .66rem; }

  .projects-grid,
  .projects-branch__grid { grid-template-columns: 1fr; gap: 10px; }

  .project-card__body { padding: 12px 14px 14px; }
  .project-card__title { font-size: .86rem; }
  .project-card__desc { font-size: .74rem; }

  /* ── Infrastructure ─────────────────────────────────────────── */
  .infra-code-window { min-height: 340px; }

  .infra-code-window__bar {
    grid-template-columns: 1fr auto;
  }
  .infra-code-window__bar em { display: none; }

  .infra-code-window__body {
    grid-template-columns: 28px 1fr;
    padding: 18px 12px 18px 0;
  }

  .infra-code-window code { font-size: .66rem; }

  .infra-request {
    left: 12px; right: 12px; bottom: 12px;
    grid-template-columns: auto 1fr;
  }
  .infra-request b { display: none; }

  .infra-capabilities { grid-template-columns: 1fr; }
  .infra-capabilities article { grid-template-columns: auto 1fr; }

  .technology-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .technology-rail span { min-height: 80px; padding: 16px; }

  /* ── Operating model ────────────────────────────────────────── */
  .om-head { gap: 8px; margin-bottom: 22px; }

  .om-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 16px;
    margin-bottom: 24px;
  }

  .om-metric { padding: 20px 16px; gap: 8px; }
  .om-metric strong { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .om-metric span { font-size: .62rem; }
  .om-metric p { display: none; }

  .om-process { grid-template-columns: 1fr; }
  .om-step { padding: 18px 16px; }
  .om-step h3 { font-size: .92rem; }
  .om-step p { font-size: .78rem; }

  /* ── CTA Section ────────────────────────────────────────────── */
  .page-home .content-cta {
    min-height: 0;
    padding: 28px 22px;
    border-radius: 20px;
    align-content: start;
  }

  .page-home .content-cta h2,
  .page-home .content-cta__copy h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
    letter-spacing: -.03em;
  }

  .content-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .cta-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
  }

  .content-cta__kicker { font-size: .62rem; }

  /* ── Footer ─────────────────────────────────────────────────── */
  .footer-top { padding: 36px 0 28px; }

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

  .footer-brand { grid-column: 1; }

  .footer-logo img { height: 34px; }
  .footer-logo__text strong { font-size: 17px; }
  .footer-logo__text small { font-size: 9px; }

  .footer-brand__desc {
    font-size: .82rem;
    max-width: 44ch;
  }

  .footer-nav__title { font-size: .7rem; }

  .footer-nav a,
  .footer-contact ul a,
  .footer-contact ul li {
    font-size: .84rem;
  }

  .footer-bottom { padding: 14px 0 16px; }

  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer-bottom__copy { font-size: .74rem; }
  .footer-bottom__links a { font-size: .74rem; }

  /* ── General utils ──────────────────────────────────────────── */
  .u-grid--2,
  .u-grid--3,
  .u-grid--4 { grid-template-columns: 1fr; }

  .backbone-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: 1fr; }

  /* ── [data-reveal] — mobilde giriş (fade-in) geçişi anında biter.
     Not: bu SADECE [data-reveal] elemanının kendi transition'ını durdurur;
     içindeki dekoratif sonsuz animasyonlara (kod kayan şerit, yıldız
     titreşimi vb.) dokunmaz — onları da hedef alan bir `* { animation-
     duration: .01ms }` kuralı buradaydı, o kuralları saniyede binlerce
     kez döndürüp "aşırı hızlı" görünmelerine yol açıyordu. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   KÜÇÜK MOBİL — max-width: 400px
════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {

  .container { --container-gutter: 14px; }

  .ab-tab { min-width: 134px; }

  .om-metrics { grid-template-columns: 1fr; }
  .om-metric strong { font-size: 1.8rem; }

  .project-card__body { padding: 10px 12px 12px; }

  .footer-grid { gap: 22px; }

  /* Drawer küçük ekranlarda da viewport'un tamamını kaplamalıdır. Önceki
     92vw değeri sağ tarafta işlevsiz bir şerit bırakıyordu. */
  .mob-drawer {
    inset: 0;
    width: 100vw;
    width: 100dvw;
    max-width: none;
  }

  .mob-drawer__panel {
    width: 100%;
    max-width: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   KISALTMALAR (prefers-reduced-motion)
════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hero-bg__orb { animation: none !important; }
  .ab-vis__ring-fill { transition: none !important; }
  .ab-vis__bar-fill { transition: none !important; }
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
}