/* T77 — Mobile homepage rebuilt to match the approved reference.
   Desktop and all inner pages remain unchanged. */
.hero-kicker{display:none;}
.hero-kicker-en,.hero-kicker-tr{display:none;}

@keyframes t77GoldSweep{
  0%,14%{background-position:125% 50%;}
  38%,100%{background-position:-35% 50%;}
}

@media (max-width:760px){
  :root{
    --t77-gold:#e9b94e;
    --t77-gold-light:#ffe08a;
    --t77-navy:#031425;
    --t77-stage:100svh;
  }

  #home .hero.hero-photo.hero-video-mode{
    position:relative !important;
    width:100vw !important;
    height:var(--t77-stage) !important;
    min-height:720px !important;
    max-height:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    display:block !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    background:#020a14 !important;
    box-shadow:0 30px 72px rgba(0,0,0,.46) !important;
  }

  #home .hero.hero-photo.hero-video-mode::before,
  #home .hero.hero-photo.hero-video-mode::after{
    display:none !important;
  }

  #home .hero-video-mode .hero-cinematic-media,
  #home .hero-video-mode .hero-overlay,
  #home .hero-video-mode .hero-cinematic-light,
  #home .hero-video-mode .hero-stars{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    border-radius:0 !important;
  }

  #home .hero-waterfall-video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 49% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    filter:saturate(1.015) contrast(1.02) brightness(.985) !important;
    transform:none !important;
  }

  /* Keep the architecture visible, then create a dark navy base for the title/cards. */
  #home .hero-video-mode .hero-cinematic-media::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
      linear-gradient(180deg,
        rgba(1,7,15,.24) 0%,
        rgba(1,7,15,.03) 20%,
        rgba(1,7,15,.02) 48%,
        rgba(1,8,17,.18) 61%,
        rgba(2,11,22,.66) 73%,
        rgba(2,12,24,.93) 100%) !important;
    pointer-events:none !important;
  }

  #home .hero-video-mode .hero-overlay{
    background:
      radial-gradient(circle at 50% 8%,rgba(5,40,83,.32),transparent 19rem),
      linear-gradient(180deg,rgba(1,8,18,.12),transparent 38%,transparent 56%,rgba(2,10,21,.18) 70%,rgba(2,12,24,.68) 100%) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #home .hero-video-mode .hero-cinematic-light{opacity:.12 !important;}
  #home .hero-video-mode .hero-stars{display:none !important;}

  /* The approved composition: logo in the sky, text lower on the water, cards at the bottom. */
  #home .hero-content{
    position:absolute !important;
    z-index:5 !important;
    top:68px !important;
    right:0 !important;
    bottom:224px !important;
    left:0 !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:8px 18px 10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    background:transparent !important;
    pointer-events:none !important;
  }

  #home .hero-logo-stage{
    width:100% !important;
    margin:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
  }

  #home .main-logo{
    width:min(150px,36vw) !important;
    max-width:150px !important;
    margin:0 auto !important;
    filter:
      drop-shadow(0 14px 24px rgba(0,0,0,.64))
      drop-shadow(0 0 14px rgba(236,184,70,.10)) !important;
  }

  #home .hero-kicker{
    width:min(330px,84vw) !important;
    margin:auto auto 5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    color:#fffaf2 !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(1.05rem,4.9vw,1.30rem) !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    text-shadow:0 5px 18px rgba(0,0,0,.88) !important;
  }

  #home .hero-kicker::before,
  #home .hero-kicker::after{
    content:"" !important;
    width:54px !important;
    height:1px !important;
    flex:0 0 54px !important;
    background:linear-gradient(90deg,transparent,rgba(233,185,78,.82),transparent) !important;
  }

  #home .hero h1{
    position:relative !important;
    max-width:96vw !important;
    margin:2px 0 7px !important;
    padding:0 5px !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(2.42rem,10.5vw,3.05rem) !important;
    font-weight:900 !important;
    line-height:.98 !important;
    letter-spacing:-.045em !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    background-image:linear-gradient(110deg,
      #b87815 0%,
      #e2aa35 18%,
      #ffe18a 36%,
      #fff5bf 47%,
      #e8b64b 57%,
      #c8871b 77%,
      #f2c85f 100%) !important;
    background-size:235% 100% !important;
    animation:t77GoldSweep 6.8s ease-in-out infinite !important;
    filter:
      drop-shadow(0 7px 15px rgba(0,0,0,.72))
      drop-shadow(0 0 7px rgba(235,181,63,.16)) !important;
  }

  #home .hero-subtitle{
    max-width:345px !important;
    margin:0 auto !important;
    padding:0 6px !important;
    color:#fffaf3 !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:0 !important;
    font-weight:500 !important;
    line-height:1.55 !important;
    text-shadow:0 5px 18px rgba(0,0,0,.90) !important;
  }

  #home .hero-subtitle::after{
    content:attr(data-mobile-copy-ar) !important;
    font-size:clamp(.93rem,4vw,1.06rem) !important;
  }
  html[lang="en"] #home .hero-subtitle::after{content:attr(data-mobile-copy-en) !important;}
  html[lang="tr"] #home .hero-subtitle::after{content:attr(data-mobile-copy-tr) !important;}

  #home .hero-ornament{
    position:relative !important;
    width:min(238px,58vw) !important;
    height:18px !important;
    margin:10px auto 0 !important;
    border:0 !important;
    opacity:1 !important;
  }

  #home .hero-ornament::before,
  #home .hero-ornament::after{
    content:"" !important;
    position:absolute !important;
    top:8px !important;
    width:42% !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(233,185,78,.88)) !important;
  }
  #home .hero-ornament::before{right:0 !important;transform:scaleX(-1) !important;}
  #home .hero-ornament::after{left:0 !important;}

  #home .hero-ornament{
    background:
      radial-gradient(circle at 50% 50%,#f7d87c 0 2px,transparent 2.6px),
      radial-gradient(ellipse at 46% 56%,transparent 0 4px,#dba73c 4.5px 5.5px,transparent 6px),
      radial-gradient(ellipse at 54% 56%,transparent 0 4px,#dba73c 4.5px 5.5px,transparent 6px) !important;
  }

  #home .hero-scroll-cue{display:none !important;}

  /* Three compact premium cards, fully visible on the first phone screen. */
  #home .primary-actions{
    position:absolute !important;
    z-index:7 !important;
    right:14px !important;
    bottom:16px !important;
    left:14px !important;
    width:auto !important;
    height:194px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
    direction:rtl !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #home .feature-card{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:16px 8px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    overflow:hidden !important;
    border:1px solid rgba(229,181,65,.92) !important;
    border-radius:22px !important;
    background:
      radial-gradient(circle at 50% 0%,rgba(226,177,59,.08),transparent 8rem),
      linear-gradient(180deg,rgba(5,23,40,.93),rgba(2,13,25,.985)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 14px 30px rgba(0,0,0,.35) !important;
    text-align:center !important;
  }

  #home .feature-card::before{
    content:"" !important;
    position:absolute !important;
    inset:8px !important;
    width:auto !important;
    height:auto !important;
    border:1px solid rgba(229,181,65,.10) !important;
    border-radius:16px !important;
    background:none !important;
    pointer-events:none !important;
  }

  #home .feature-card::after{
    content:"›" !important;
    position:absolute !important;
    right:50% !important;
    bottom:10px !important;
    left:auto !important;
    width:28px !important;
    height:28px !important;
    transform:translateX(50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(239,192,79,.95) !important;
    border-radius:50% !important;
    background:rgba(4,18,32,.75) !important;
    color:#f4c75d !important;
    font-family:Arial,sans-serif !important;
    font-size:1.5rem !important;
    line-height:1 !important;
    opacity:1 !important;
  }

  #home .feature-card .icon{
    position:static !important;
    width:43px !important;
    height:43px !important;
    margin:0 auto 4px !important;
    transform:none !important;
    background:linear-gradient(180deg,#ffe18c,#d89525) !important;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.44)) drop-shadow(0 0 6px rgba(238,188,67,.10)) !important;
  }

  #home .feature-card strong{
    width:100% !important;
    min-height:2.3em !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#efbf52 !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(.98rem,4.35vw,1.15rem) !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    text-shadow:0 4px 10px rgba(0,0,0,.48) !important;
  }

  #home .feature-card small{
    width:100% !important;
    min-height:3em !important;
    margin:0 !important;
    padding:0 2px 32px !important;
    display:block !important;
    color:#f4ede2 !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:0 !important;
    font-weight:500 !important;
    line-height:1.38 !important;
  }

  #home .feature-card small::after{
    content:attr(data-mobile-copy-ar) !important;
    font-size:clamp(.73rem,3.05vw,.82rem) !important;
  }
  html[lang="en"] #home .feature-card small::after{content:attr(data-mobile-copy-en) !important;}
  html[lang="tr"] #home .feature-card small::after{content:attr(data-mobile-copy-tr) !important;}

  #home .feature-card[data-view="menu"]{order:1 !important;}
  #home .feature-card[data-view="hotel"]{order:2 !important;}
  #home .feature-card[data-view="booking"]{order:3 !important;}

  #home .booking-policies{margin-top:20px !important;}

  /* Match the reference header scale without changing its functionality. */
  body.unified-header-page .unified-site-header{
    top:12px !important;
    left:14px !important;
    right:14px !important;
    min-height:54px !important;
  }
  body.unified-header-page .unified-site-header::before{
    inset:-12px -14px -16px !important;
    height:92px !important;
    background:linear-gradient(180deg,rgba(1,8,18,.40),rgba(1,8,18,.12) 58%,transparent) !important;
  }
  body.unified-header-page .unified-site-header .language-current{
    min-width:124px !important;
    height:50px !important;
    padding:0 16px !important;
    border-color:rgba(230,181,65,.84) !important;
    border-radius:999px !important;
    background:rgba(3,14,27,.26) !important;
    color:#fff4d8 !important;
    font-size:.94rem !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 20px rgba(0,0,0,.18) !important;
  }
  body.unified-header-page .unified-site-header .nav-toggle{
    top:0 !important;
    width:50px !important;
    height:50px !important;
    border-color:rgba(230,181,65,.76) !important;
    border-radius:17px !important;
    background:rgba(3,14,27,.24) !important;
  }
  body.unified-header-page .unified-site-header .nav-toggle span{
    width:25px !important;
    background:linear-gradient(90deg,#f6d579,#dba537) !important;
  }

  html[lang="ar"] #home .hero-kicker-ar{display:inline !important;}
  html[lang="ar"] #home .hero-kicker-en,
  html[lang="ar"] #home .hero-kicker-tr{display:none !important;}
  html[lang="en"] #home .hero-kicker-en{display:inline !important;}
  html[lang="en"] #home .hero-kicker-ar,
  html[lang="en"] #home .hero-kicker-tr{display:none !important;}
  html[lang="tr"] #home .hero-kicker-tr{display:inline !important;}
  html[lang="tr"] #home .hero-kicker-ar,
  html[lang="tr"] #home .hero-kicker-en{display:none !important;}
}

/* Compact phones: preserve the complete composition inside the real viewport. */
@media (max-width:760px) and (max-height:780px){
  #home .hero.hero-photo.hero-video-mode{min-height:660px !important;}
  #home .hero-content{top:62px !important;bottom:190px !important;padding-inline:14px !important;}
  #home .main-logo{width:min(125px,31vw) !important;}
  #home .hero-kicker{font-size:1rem !important;margin-bottom:3px !important;}
  #home .hero h1{font-size:clamp(2rem,9vw,2.45rem) !important;margin-bottom:4px !important;}
  #home .hero-subtitle::after{font-size:.86rem !important;}
  #home .hero-ornament{margin-top:6px !important;}
  #home .primary-actions{height:166px !important;right:10px !important;bottom:10px !important;left:10px !important;gap:6px !important;}
  #home .feature-card{padding:10px 5px 8px !important;border-radius:18px !important;gap:4px !important;}
  #home .feature-card .icon{width:35px !important;height:35px !important;margin-bottom:1px !important;}
  #home .feature-card strong{min-height:2em !important;font-size:.94rem !important;}
  #home .feature-card small{padding-bottom:26px !important;}
  #home .feature-card small::after{font-size:.68rem !important;}
  #home .feature-card::after{width:24px !important;height:24px !important;bottom:7px !important;font-size:1.2rem !important;}
}

@media (max-width:380px){
  #home .hero-content{padding-inline:10px !important;}
  #home .main-logo{width:118px !important;}
  #home .hero h1{font-size:2rem !important;}
  #home .primary-actions{right:8px !important;left:8px !important;gap:5px !important;}
  #home .feature-card{border-radius:17px !important;}
  #home .feature-card strong{font-size:.88rem !important;}
  #home .feature-card small::after{font-size:.64rem !important;}
}

@media (prefers-reduced-motion:reduce){
  #home .hero h1{animation:none !important;background-position:50% 50% !important;}
}