/* ============================================================
   OCEAN MOBİL - Uygulama Hissi Veren İmmersive Tasarım
   Sadece 768px ve altı ekranlar için geçerlidir
   ============================================================ */

/* Mobil snap scroll sistemi - her bölüm tam ekran */
@media (max-width: 768px) {

  /* Temel reset ve font */
  html {
    scroll-snap-type: y mandatory; /* Dikey snap scroll aktif */
    overflow-y: scroll;            /* Kaydırma aktif */
    overflow-x: hidden;
    height: 100%;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    cursor: auto; /* Mobilde özel cursor yok */
  }

  /* Tüm elemanlar normal cursor kullansın */
  body * { cursor: auto; }

  /* Viewport ve wrapper - masaüstü fixed sistemini kapat */
  #viewport {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    inset: auto !important;
  }

  #slides-wrapper {
    transform: none !important;
    transition: none !important;
    height: auto !important;
  }

  /* Her slide tam ekran snap noktası */
  .slide {
    height: 100svh !important;              /* Viewport yüksekliği */
    min-height: 100svh !important;
    scroll-snap-align: start;               /* Snap noktası */
    scroll-snap-stop: always;               /* Her snap duraksasın */
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  /* İlerleme çubuğu mobilde gizle */
  #progress-bar { display: none !important; }

  /* Nav dots gizle */
  .nav-dots { display: none !important; }

  /* Section indicator ve counter gizle */
  #section-indicator,
  #section-counter { display: none !important; }

  /* Özel cursor gizle */
  #cursor,
  #cursor-ring { display: none !important; }

  /* ============ MOBİL NAVBAR ============ */
  nav#navbar {
    padding: .9rem 1.4rem;         /* Daha kompakt */
    background: rgba(10,21,37,.95); /* Koyu arka plan */
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,196,167,.15);
    z-index: 999;
  }

  /* Nav linkleri mobilde gizle */
  .nav-links { display: none !important; }

  /* Logo rengi mobilde beyaz */
  .nav-logo { color: #fff !important; }

  /* Mobil hamburger menü butonu */
  .mob-menu-btn {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    z-index: 1001;
  }

  .mob-menu-btn span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: rgba(255,255,255,.8);
    transition: all .3s ease;
    transform-origin: center;
  }

  /* Hamburger X hali */
  .mob-menu-btn.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .mob-menu-btn.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .mob-menu-btn.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Tam ekran mobil menü overlay */
  #mob-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,21,37,.98);
    backdrop-filter: blur(30px);
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }

  #mob-nav-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  /* Menü linkleri */
  #mob-nav-overlay a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    letter-spacing: .05em;
    transition: color .3s, transform .3s;
    transform: translateY(20px);
    opacity: 0;
  }

  #mob-nav-overlay.open a {
    opacity: 1;
    transform: none;
  }

  /* Link gecikmeli giriş animasyonu */
  #mob-nav-overlay.open a:nth-child(1) { transition-delay: .05s; }
  #mob-nav-overlay.open a:nth-child(2) { transition-delay: .1s; }
  #mob-nav-overlay.open a:nth-child(3) { transition-delay: .15s; }
  #mob-nav-overlay.open a:nth-child(4) { transition-delay: .2s; }
  #mob-nav-overlay.open a:nth-child(5) { transition-delay: .25s; }
  #mob-nav-overlay.open a:nth-child(6) { transition-delay: .3s; }

  #mob-nav-overlay a:hover { color: var(--teal); transform: translateX(8px); }

  /* Aktif menü linki */
  #mob-nav-overlay a.mob-active { color: var(--teal); }

  /* ============ HEROEkranı ============ */
  #s1 {
    background: var(--navy) !important; /* Mobilde koyu arka plan */
    padding-top: 0 !important;
  }

  /* Hero canvas animasyonu koru */
  #hero-canvas {
    opacity: .2 !important;
  }

  /* Hero içerik */
  .hero-inner {
    padding: 0 1.6rem !important;
    padding-top: 5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero eyebrow */
  .hero-eyebrow {
    font-size: .6rem !important;
    letter-spacing: .3em !important;
    color: var(--teal) !important;
  }

  /* Büyük başlık mobil uyumu */
  .hero-title {
    font-size: clamp(3rem, 14vw, 4.5rem) !important;
    line-height: 1.05 !important;
    color: #fff !important;
    margin-bottom: 1.2rem !important;
  }

  .hero-title em { color: var(--teal) !important; }

  /* Alt başlık indent'i kaldır */
  .hero-title .hl2 {
    padding-left: 0 !important;
    display: block !important;
  }

  /* Açıklama metni */
  .hero-sub {
    font-size: .9rem !important;
    color: rgba(255,255,255,.55) !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
  }

  /* Hero butonları */
  .hero-btns {
    flex-direction: column !important;
    gap: .8rem !important;
  }

  .btn-p, .btn-s {
    justify-content: center !important;
    padding: 1rem 1.5rem !important;
    font-size: .78rem !important;
  }

  /* Mobilde hero stats gizle */
  .hero-stats { display: none !important; }

  /* Scroll ipucu - mobilde alt orta */
  .hero-scroll-hint {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 1.5rem !important;
    color: rgba(255,255,255,.35) !important;
  }

  /* ============ MOBİL BÖLÜM GEÇİŞ ANİMASYONLARI ============ */

  /* Animasyonlu elementler başlangıç durumu */
  .mob-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s ease;
  }

  .mob-reveal.mob-on {
    opacity: 1;
    transform: none;
  }

  /* Gecikme sınıfları */
  .mob-d1 { transition-delay: .08s !important; }
  .mob-d2 { transition-delay: .16s !important; }
  .mob-d3 { transition-delay: .24s !important; }
  .mob-d4 { transition-delay: .32s !important; }
  .mob-d5 { transition-delay: .4s !important; }

  /* Soldan gelen animasyon */
  .mob-from-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .mob-from-left.mob-on {
    opacity: 1;
    transform: none;
  }

  /* Sağdan gelen animasyon */
  .mob-from-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .mob-from-right.mob-on {
    opacity: 1;
    transform: none;
  }

  /* Scale ile gelen animasyon */
  .mob-scale {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .5s ease, transform .5s ease;
  }
  .mob-scale.mob-on {
    opacity: 1;
    transform: scale(1);
  }

  /* ============ HİZMETLER BÖLÜMÜ ============ */
  #s2 {
    background: var(--off-white) !important;
    display: block !important;
    padding: 0 !important;
    overflow-y: auto !important;      /* İçerik uzarsa scroll */
  }

  .services-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1.4rem !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2rem !important;
    max-width: 100% !important;
  }

  /* Hizmetler başlık */
  #s2 h2.sh {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }

  /* Servis kartları ızgarası - tek sütun mobilde */
  .svc-grid {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }

  /* Servis kartı yatay düzen */
  .svc-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.2rem !important;
    border-radius: 8px !important;
  }

  .svc-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  .svc-name { font-size: 1rem !important; }
  .svc-desc { font-size: .78rem !important; }

  /* ============ PORTFOLyo BÖLÜMÜ ============ */
  #s3 {
    display: flex !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: var(--white) !important;
  }

  .gallery-inner {
    padding: 0 1.4rem !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Galeri filtre butonları yatay kaydırma */
  .gfilters {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: .5rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .gfilters::-webkit-scrollbar { display: none; }

  .gfbtn {
    flex-shrink: 0 !important;
    font-size: .65rem !important;
  }

  /* Galeri ızgarası - mobil 2 sütun */
  .gallery-mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 140px !important;
    gap: .6rem !important;
  }

  /* Tüm öğeler eşit boyut */
  .gitem:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* İlk öğe daha büyük */
  .gitem:nth-child(1) {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  .gallery-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.2rem !important;
  }

  /* ============ HAKKIMIZDA BÖLÜMÜ ============ */
  #s4 {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  /* Görsel alan */
  .about-visual {
    min-height: 35svh !important;
    height: 35svh !important;
  }

  .about-geo svg {
    width: 180px !important;
    height: 180px !important;
  }

  /* İçerik alanı */
  .about-content {
    padding: 1.8rem 1.4rem !important;
    flex: 1;
  }

  .about-quote {
    font-size: 1.1rem !important;
    margin: 1rem 0 !important;
  }

  .afeatures {
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
    margin-top: 1rem !important;
  }

  /* ============ SÜREÇ BÖLÜMÜ ============ */
  #s5 {
    overflow-y: auto !important;
  }

  .process-inner {
    padding: 0 1.4rem !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2rem !important;
    max-width: 100% !important;
  }

  /* Süreç adımları tek sütun */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    margin-top: 2rem !important;
  }

  .process-line { display: none !important; }

  /* Süreç kartı yatay düzen */
  .pstep {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
  }

  .pstep-num {
    font-size: 2rem !important;
    min-width: 3rem !important;
    color: rgba(0,196,167,.2) !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
  }

  .pstep-dot { display: none !important; }

  .pstep-name { font-size: 1rem !important; }
  .pstep-desc { font-size: .78rem !important; }

  /* ============ REFERANSLAR BÖLÜMÜ ============ */
  #s6 {
    overflow-y: auto !important;
  }

  .testi-inner {
    padding: 0 1.4rem !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2rem !important;
    max-width: 100% !important;
  }

  /* Referans kartları tek sütun */
  .tgrid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }

  .tcard {
    padding: 1.5rem !important;
  }

  /* ============ İLETİŞİM / CTA BÖLÜMÜ ============ */
  #s7 {
    overflow-y: auto !important;
  }

  .cta-inner {
    padding: 0 1.4rem !important;
    padding-top: 5.5rem !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .cta-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .cta-btns {
    flex-direction: column !important;
    gap: .8rem !important;
    margin-bottom: 2rem !important;
  }

  .btn-w {
    justify-content: center !important;
    padding: 1rem 1.5rem !important;
  }

  .trust-row {
    gap: .8rem !important;
  }

  .mini-footer {
    position: relative !important;
    flex-direction: column !important;
    gap: .5rem !important;
    padding: 1.5rem 1.4rem !important;
    text-align: center !important;
    margin-top: 1rem !important;
  }

  /* ============ MOBİL BOTTOM NAV BAR ============ */
  /* Uygulama hissi için altta sekme çubuğu */
  #mob-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 990;
    background: rgba(10,21,37,.96);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,196,167,.12);
    display: flex;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch desteği */
  }

  /* Alt nav sekme butonu */
  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .6rem .2rem;
    gap: 3px;
    border: none;
    background: none;
    cursor: pointer;
    transition: all .2s ease;
    -webkit-tap-highlight-color: transparent; /* iOS tap rengini kaldır */
  }

  /* Sekme ikonu */
  .mob-tab svg {
    width: 20px;
    height: 20px;
    stroke: rgba(255,255,255,.3);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s, transform .2s;
  }

  /* Sekme etiketi */
  .mob-tab span {
    font-size: .55rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    transition: color .2s;
  }

  /* Aktif sekme */
  .mob-tab.active svg {
    stroke: var(--teal);
    transform: translateY(-2px);
  }

  .mob-tab.active span {
    color: var(--teal);
  }

  /* Aktif sekme için parlama efekti */
  .mob-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    width: 30px;
    height: 2px;
    background: var(--teal);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 10px rgba(0,196,167,.6);
  }

  /* Bottom nav için içerik alanı padding */
  .slide {
    padding-bottom: 60px !important; /* Bottom nav yüksekliği kadar alan */
  }

  /* ============ SECTION HEADER - MOBİL ============ */
  h2.sh {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  /* ============ SECTION TAG - MOBİL ============ */
  .section-tag {
    font-size: .6rem !important;
    letter-spacing: .3em !important;
  }

  /* ============ SAYFA GEÇİŞ OVERLAY ============ */
  /* Bölümler arası geçişte görsel efekt */
  #mob-transition-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--navy) 0%, rgba(0,196,167,.2) 100%);
    z-index: 997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }

  #mob-transition-overlay.flash {
    opacity: .15;
  }

  /* ============ SCROLL GÖSTERGESİ - MOBİL ============ */
  /* Hangi bölümde olduğunu gösteren ince çubuk */
  #mob-scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
    z-index: 1000;
    transition: width .3s ease;
    box-shadow: 0 0 8px rgba(0,196,167,.5);
  }

  /* ============ PARLAYAN DOT NOKTA ============ */
  /* Aktif bölüm görsel geri bildirimi */
  #mob-active-dot {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 500;
  }

  .mob-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: all .3s ease;
  }

  .mob-dot.active {
    background: var(--teal);
    box-shadow: 0 0 6px rgba(0,196,167,.8);
    transform: scale(1.5);
  }

  /* Admin bar varsa nav kaymasın */
  body.admin-bar #mob-bottom-nav {
    bottom: 46px;
  }

} /* end @media (max-width: 768px) */