:root{
  --ink:#111111;
  --cream:#f4eee5;
  --paper:#fbf7f1;
  --gold:#d7a96f;
  --gold2:#efc997;
  --muted:#7f776f;
  --line:#ddd4c8;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
body{min-height:100vh}

.landing{
  width:min(100%,760px);
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  overflow:hidden;
}

.hero{
  position:relative;
  min-height:660px;
  padding:calc(26px + env(safe-area-inset-top)) 32px 130px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 70% 15%,rgba(255,255,255,.07),transparent 30%),
    linear-gradient(145deg,#0b0b0b 0%,#171717 52%,#0b0b0b 100%);
}

.hero:after{
  content:"";
  position:absolute;
  left:-12%;
  right:-10%;
  bottom:-95px;
  height:180px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:var(--paper);
}

.heroGlow{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.heroGlowA{width:330px;height:330px;right:-130px;top:-135px}
.heroGlowB{width:190px;height:190px;right:80px;top:70px}

.brandRow{
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:3;
}
.brandLogo{
  width:62px;
  height:62px;
  border-radius:20px;
  background:#fff;
  color:#111;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:25px;
  font-weight:950;
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}
.brandLogo img{width:100%;height:100%;object-fit:cover}
.brandText strong{display:block;font-size:21px;letter-spacing:-.04em}
.brandText span{display:block;margin-top:3px;font-size:9px;letter-spacing:.11em;color:rgba(255,255,255,.58)}

.heroGrid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.07fr .93fr;
  gap:18px;
  align-items:center;
  margin-top:32px;
}

.scriptTitle{
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:48px;
  line-height:1;
  color:var(--gold2);
  transform:rotate(-3deg);
  transform-origin:left center;
}

.heroCopy h1{
  margin:10px 0 0;
  font-size:47px;
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:950;
}
.heroCopy h1 em{
  color:#edc99b;
  font-style:normal;
}

.heroStroke{
  width:112px;
  height:9px;
  margin-top:18px;
  border-top:3px solid var(--gold2);
  border-radius:50%;
  transform:rotate(-5deg);
}

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:28px;
}
.feature{
  min-width:0;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.15);
}
.feature:first-child{padding-left:0}
.feature:last-child{border-right:0;padding-right:0}
.featureIcon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:var(--gold2);
}
.featureIcon svg{
  width:33px;
  height:33px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature strong{display:block;margin-top:7px;font-size:9.5px;letter-spacing:.02em}
.feature small{display:block;margin-top:3px;font-size:8px;color:rgba(255,255,255,.58)}

.phoneStage{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:420px;
  perspective:1000px;
}
.phone{
  width:245px;
  height:470px;
  border-radius:38px;
  padding:16px 14px 18px;
  position:relative;
  color:#111;
  background:#101010;
  border:2px solid #c89459;
  box-shadow:0 28px 55px rgba(0,0,0,.45);
  transform:rotate(5deg) translateY(8px);
}
.phone:after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:33px;
  border:1px solid rgba(255,255,255,.15);
  pointer-events:none;
}
.phoneNotch{
  position:absolute;
  top:9px;
  left:50%;
  transform:translateX(-50%);
  width:75px;
  height:18px;
  border-radius:0 0 12px 12px;
  background:#050505;
  z-index:3;
}
.phoneTop{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  padding:8px 5px;
}
.phoneBrand{display:flex;align-items:center;gap:7px}
.miniLogo{
  width:27px;
  height:27px;
  border-radius:8px;
  background:#fff;
  color:#111;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:950;
}
.phoneBrand strong{display:block;font-size:9px}
.phoneBrand small{display:block;margin-top:1px;font-size:5.5px;color:rgba(255,255,255,.55)}

.phoneTabs{
  display:flex;
  gap:6px;
  padding:8px 2px 10px;
  color:rgba(255,255,255,.58);
  font-size:6px;
}
.phoneTabs span{padding:6px 8px;border-radius:999px}
.phoneTabs .active{background:#eec898;color:#111}

.phoneCards{
  display:grid;
  gap:9px;
  background:#f3eee8;
  border-radius:22px;
  padding:11px;
}
.phoneCard{
  height:72px;
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:#fff;
  border-radius:17px;
  box-shadow:0 5px 13px rgba(0,0,0,.06);
}
.phoneCard strong{font-size:8px}
.phoneCard b{font-size:13px}
.drink{
  width:36px;height:45px;border-radius:7px 7px 10px 10px;display:block;margin:auto;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
}
.drinkCoffee{background:linear-gradient(#5e2b15 0 42%,#d8b193 43% 60%,#a6673f 61%)}
.drinkYellow{background:linear-gradient(#f5c844,#ffdb68)}
.drinkPink{background:linear-gradient(#d82d82,#f068b1)}
.dessert{
  width:43px;height:28px;border-radius:8px;background:linear-gradient(#3b160e,#6a2e1e 35%,#2a0d08 36% 60%,#6a2e1e 61%);display:block;margin:auto
}

.transitionArea{
  position:relative;
  z-index:5;
  margin-top:-76px;
  padding:0 32px 18px;
}

.menuOrb{
  width:280px;
  min-height:280px;
  margin:0 auto;
  padding:29px 26px 22px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 22%,rgba(255,255,255,.05),transparent 30%),
    linear-gradient(145deg,#111,#1e1e1e);
  border:2px solid #d3a064;
  box-shadow:0 18px 38px rgba(0,0,0,.22),0 0 0 7px rgba(211,160,100,.06);
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  transition:transform .2s ease;
}
.menuOrb:active{transform:scale(.985)}

.menuOrbVisual{
  position:relative;
  width:128px;
  height:96px;
  display:block;
}
.orbQr{
  position:absolute;
  left:6px;
  bottom:0;
  width:70px;
  height:70px;
  fill:none;
  stroke:#e4bc89;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.orbCup{
  position:absolute;
  right:4px;
  top:0;
  width:63px;
  height:82px;
  fill:none;
  stroke:#e4bc89;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.menuOrb small{
  margin-top:4px;
  font-size:8px;
  letter-spacing:.16em;
  color:#d7aa72;
  font-weight:900;
}
.menuOrb strong{
  margin-top:7px;
  font-size:25px;
  letter-spacing:-.045em;
}
.orbDesc{
  margin-top:5px;
  font-size:10px;
  color:rgba(255,255,255,.63);
}
.orbArrow{
  width:47px;
  height:47px;
  margin-top:15px;
  border-radius:50%;
  background:#efc58d;
  color:#111;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:900;
}

.orDivider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  margin-top:30px;
}
.orDivider span{height:1px;background:#d8c8b6}
.orDivider strong{font-size:10px;letter-spacing:.08em;color:#b08c61}

.loginArea{
  padding:8px 32px calc(28px + env(safe-area-inset-bottom));
}

.loginHeading{text-align:center}
.loginHeading h2{
  margin:0;
  font-size:24px;
  letter-spacing:-.04em;
}
.loginHeading p{
  margin:6px auto 20px;
  max-width:470px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
}

.loginForm{max-width:540px;margin:0 auto}
.phoneInput{
  height:61px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #d3c8ba;
  border-radius:18px;
  background:#fff;
}
.phonePrefix{
  width:82px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid #e4ddd4;
  font-size:13px;
  font-weight:800;
}
.phoneInput input{
  min-width:0;
  flex:1;
  height:100%;
  padding:0 15px;
  border:0;
  outline:none;
  font:inherit;
  font-size:14px;
  background:transparent;
}

.primaryBtn{
  width:100%;
  min-height:58px;
  margin-top:13px;
  border:0;
  border-radius:18px;
  background:#171717;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  text-decoration:none;
  font:inherit;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}
.buttonIcon{
  width:28px;height:28px;display:grid;place-items:center
}
.buttonIcon svg{
  width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}

.message{
  max-width:540px;
  margin:0 auto 12px;
  padding:13px 15px;
  border-radius:15px;
  font-size:10.5px;
  line-height:1.5;
}
.message.error{background:#fff0ef;color:#b42318;border:1px solid #fecdca}
.message.success{background:#f0ede7;color:#393530;border:1px solid #dfd8cf}
.message strong{display:block;margin-top:5px}

.secureLine{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin-top:12px;
  color:#5e5852;
  font-size:9.5px;
}
.secureLine svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}

.benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:590px;
  margin:28px auto 0;
  border-top:1px solid #e1d7ca;
  padding-top:18px;
}
.benefit{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border-right:1px solid #e5ddd3;
}
.benefit:first-child{padding-left:0}
.benefit:last-child{border-right:0;padding-right:0}
.benefitIcon{
  width:38px;height:38px;display:grid;place-items:center;color:#b88b57;flex:none
}
.benefitIcon svg{
  width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round
}
.benefit strong{display:block;font-size:8.5px}
.benefit small{display:block;margin-top:3px;font-size:7.5px;color:#77706a;line-height:1.25}

.privacy{
  margin-top:21px;
  text-align:center;
  font-size:8.5px;
  color:#8c857e;
}

@media(max-width:680px){
  .hero{
    min-height:750px;
    padding-left:22px;
    padding-right:22px;
  }

  .heroGrid{
    grid-template-columns:1fr;
    gap:0;
  }

  .heroCopy{
    max-width:430px;
  }

  .scriptTitle{font-size:41px}
  .heroCopy h1{font-size:42px}
  .phoneStage{
    position:absolute;
    right:-50px;
    bottom:35px;
    min-height:auto;
    transform:scale(.76);
    transform-origin:right bottom;
  }
  .features{
    max-width:390px;
    margin-top:24px;
  }

  .transitionArea{
    margin-top:-72px;
    padding-left:20px;
    padding-right:20px;
  }

  .loginArea{
    padding-left:20px;
    padding-right:20px;
  }
}

@media(max-width:480px){
  .hero{
    min-height:720px;
    padding-top:calc(22px + env(safe-area-inset-top));
    padding-bottom:116px;
  }

  .brandLogo{width:54px;height:54px;border-radius:17px}
  .brandText strong{font-size:18px}

  .scriptTitle{font-size:35px}
  .heroCopy h1{
    font-size:36px;
    max-width:330px;
  }

  .phoneStage{
    right:-86px;
    bottom:12px;
    transform:scale(.62);
  }

  .features{
    grid-template-columns:repeat(3,1fr);
    width:100%;
    max-width:330px;
  }

  .feature{
    padding-left:6px;
    padding-right:6px;
  }

  .feature strong{font-size:7.7px}
  .feature small{font-size:6.6px}

  .menuOrb{
    width:250px;
    min-height:250px;
    padding-top:24px;
  }
  .menuOrbVisual{transform:scale(.88);margin-top:-6px}
  .menuOrb strong{font-size:23px}
  .orbArrow{width:43px;height:43px;margin-top:11px}

  .loginHeading h2{font-size:20px}
  .benefits{
    gap:0;
  }
  .benefit{
    flex-direction:column;
    text-align:center;
    gap:4px;
    padding:0 5px;
  }
  .benefitIcon{width:31px;height:31px}
  .benefitIcon svg{width:28px;height:28px}
  .benefit strong{font-size:7.4px}
  .benefit small{font-size:6.7px}
}

/* V6.28.2 MENU OPEN CLICK FIX */
.transitionArea{
    position:relative !important;
    z-index:999 !important;
    pointer-events:auto !important;
}

.menuOrb{
    position:relative !important;
    z-index:1000 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
}

.menuOrb *{
    pointer-events:none !important;
}

.hero::after,
.heroGlow,
.phoneStage{
    pointer-events:none !important;
}


/* =========================================================
   MYOPS LOOP LOGIN MOTION - SIZE SAFE
   Boyutlara ve pozisyonlara dokunmaz.
   ========================================================= */


/* Sayfa açılışında marka alanı */
.brandRow{
    animation: loopFadeUp .75s cubic-bezier(.2,.8,.2,1) both;
}

/* Hero yazıları */
.heroCopy{
    animation: loopFadeUp .9s .08s cubic-bezier(.2,.8,.2,1) both;
}

/* Telefon sadece hafif yukarı-aşağı hareket eder.
   scale / width / height / right / bottom değişmez. */
.phone{
    animation: loopPhoneFloat 5.5s 1s ease-in-out infinite;
}

@keyframes loopPhoneFloat{
    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -7px;
    }
}


/* Üstteki 3 özellik sırayla gelir */
.feature{
    opacity:0;
    animation: loopFadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;
}

.feature:nth-child(1){
    animation-delay:.35s;
}

.feature:nth-child(2){
    animation-delay:.48s;
}

.feature:nth-child(3){
    animation-delay:.61s;
}


/* MENÜYÜ AÇ dairesi.
   Boyut değiştirmez, sadece gölge/parlama hareketi. */
.menuOrb{
    animation: loopOrbGlow 5.2s 1.4s ease-in-out infinite;
}

@keyframes loopOrbGlow{

    0%,72%,100%{
        box-shadow:
            0 18px 38px rgba(0,0,0,.22),
            0 0 0 7px rgba(211,160,100,.06);
    }

    82%{
        box-shadow:
            0 20px 44px rgba(0,0,0,.25),
            0 0 0 11px rgba(211,160,100,.12),
            0 0 28px rgba(211,160,100,.10);
    }
}


/* QR küçük canlılık */
.orbQr{
    transform-origin:center;
    animation: loopQrMove 6s 1.8s ease-in-out infinite;
}

@keyframes loopQrMove{

    0%,72%,100%{
        transform:translateY(0) rotate(0deg);
    }

    80%{
        transform:translateY(-3px) rotate(-2deg);
    }

    87%{
        transform:translateY(0) rotate(1deg);
    }
}


/* Bardak hafif sallanır */
.orbCup{
    transform-origin:50% 90%;
    animation: loopCupMove 6s 2s ease-in-out infinite;
}

@keyframes loopCupMove{

    0%,72%,100%{
        transform:rotate(0deg);
    }

    80%{
        transform:rotate(4deg);
    }

    86%{
        transform:rotate(-2deg);
    }

    92%{
        transform:rotate(0deg);
    }
}


/* Ok ara ara sağa gider */
.orbArrow{
    animation: loopArrowMove 4.5s 2s ease-in-out infinite;
}

@keyframes loopArrowMove{

    0%,75%,100%{
        translate:0 0;
    }

    83%{
        translate:4px 0;
    }

    90%{
        translate:0 0;
    }
}


/* Script başlık ara ara çok hafif parlar */
.scriptTitle{
    animation: loopTitleGlow 6.5s 1.5s ease-in-out infinite;
}

@keyframes loopTitleGlow{

    0%,72%,100%{
        text-shadow:none;
    }

    82%{
        text-shadow:
            0 0 18px rgba(239,201,151,.22);
    }
}


/* Login alanı sayfa açılırken gelir */
.loginArea{
    animation: loopFadeUp .8s .45s cubic-bezier(.2,.8,.2,1) both;
}


/* Ana giriş butonunda ara ara parlama */
.primaryBtn,
.accountButton{
    position:relative;
    overflow:hidden;
}

.primaryBtn::after,
.accountButton::after{

    content:"";

    position:absolute;

    top:-70%;
    left:-45%;

    width:24%;
    height:240%;

    transform:rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    animation: loopButtonShine 6s 2.7s ease-in-out infinite;

    pointer-events:none;
}

@keyframes loopButtonShine{

    0%,72%{
        left:-45%;
        opacity:0;
    }

    77%{
        opacity:1;
    }

    88%{
        left:125%;
        opacity:1;
    }

    89%,100%{
        left:125%;
        opacity:0;
    }
}


/* Alt fayda ikonları ara ara hareket eder */
.benefitIcon{
    animation: loopBenefitMove 7s ease-in-out infinite;
}

.benefit:nth-child(1) .benefitIcon{
    animation-delay:1.3s;
}

.benefit:nth-child(2) .benefitIcon{
    animation-delay:2s;
}

.benefit:nth-child(3) .benefitIcon{
    animation-delay:2.7s;
}

@keyframes loopBenefitMove{

    0%,76%,100%{
        translate:0 0;
    }

    84%{
        translate:0 -3px;
    }

    90%{
        translate:0 0;
    }
}


/* Ortak giriş efekti */
@keyframes loopFadeUp{

    from{
        opacity:0;
        translate:0 14px;
    }

    to{
        opacity:1;
        translate:0 0;
    }
}


/* Hareket azaltma tercihi olan kullanıcılar */
@media (prefers-reduced-motion: reduce){

    .brandRow,
    .heroCopy,
    .phone,
    .feature,
    .menuOrb,
    .orbQr,
    .orbCup,
    .orbArrow,
    .scriptTitle,
    .loginArea,
    .benefitIcon,
    .primaryBtn::after,
    .accountButton::after{
        animation:none !important;
    }

}


/* FEATURE ROW POSITION FIX */
.features{
    margin-top:42px !important;
}

.features{
    margin-top:50px !important;
}
/* FEATURE ROW POSITION - LOWER */
.features{
    margin-top:58px !important;
}


/* PHONE POSITION - SLIGHTLY UP */
/* Boyut degismez, sadece konum yukariya alinir */
.phoneStage{
    margin-top:-28px !important;
}