/* ==========================================================================
   Phone mockup — realistic device frame + in-app screens
   Ölçüler container query birimleriyle (cqw) verildi: cihaz küçüldüğünde
   bezel, köşe yarıçapı ve tipografi orantılı olarak birlikte küçülür.
   ========================================================================== */

.phone {
  container-type: inline-size;
  position: relative;
  z-index: 2;
  width: min(20rem, 76vw);
  aspect-ratio: 393 / 852;
  animation: float-phone 8s var(--ease-in-out) infinite;
  will-change: transform;
}

/* --- Işık yörüngesi ---------------------------------------------------
   Tek bir parametrik eğri iki canvas'a bölünerek çizilir: eğrinin derinliği
   (z) negatifken cihazın arkasındaki katmana, pozitifken önündeki katmana.
   Böylece ışık telefonun arkasından dolanıp önünden geçiyormuş gibi okunur.
   ---------------------------------------------------------------------- */

.orbit {
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.orbit--back {
  z-index: 1;
  opacity: 0.6;
  filter: blur(3px) drop-shadow(0 0 10px oklch(80% 0.14 196 / 0.5));
}

.orbit--front {
  z-index: 4;
  filter: drop-shadow(0 0 2px oklch(85% 0.13 196)) drop-shadow(0 0 10px oklch(80% 0.14 196 / 0.8))
    drop-shadow(0 0 34px oklch(62% 0.22 288 / 0.4));
}

/* Titanyum kasa kenarı */
.phone__rim {
  position: absolute;
  inset: 0;
  border-radius: 14.6cqw;
  background: conic-gradient(
    from 210deg,
    oklch(72% 0.012 280),
    oklch(38% 0.01 280) 12%,
    oklch(84% 0.014 280) 25%,
    oklch(44% 0.01 280) 38%,
    oklch(68% 0.012 280) 52%,
    oklch(34% 0.008 280) 68%,
    oklch(78% 0.014 280) 82%,
    oklch(42% 0.01 280) 100%
  );
  box-shadow: 0 2.5cqw 9cqw -2cqw oklch(0% 0 0 / 0.75), 0 0 28cqw -6cqw oklch(62% 0.22 288 / 0.55);
}

/* Siyah çerçeve (bezel) */
.phone__frame {
  position: absolute;
  inset: 0.85cqw;
  border-radius: 13.8cqw;
  padding: 2.4cqw;
  background: oklch(8% 0.006 280);
  box-shadow: inset 0 0 0 0.3cqw oklch(0% 0 0 / 0.9);
}

.phone__display {
  container-type: inline-size;
  position: relative;
  height: 100%;
  border-radius: 11.4cqw;
  overflow: hidden;
  background: oklch(11% 0.014 280);
  isolation: isolate;
}

/* Dynamic Island */
.phone__island {
  position: absolute;
  z-index: 6;
  inset-block-start: 3.2cqw;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 29cqw;
  height: 8.6cqw;
  border-radius: var(--radius-pill);
  background: oklch(4% 0 0);
}

.phone__island::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 2.4cqw;
  transform: translateY(-50%);
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(34% 0.04 250), oklch(10% 0.02 260) 70%);
}

.phone__home {
  position: absolute;
  z-index: 6;
  inset-block-end: 2.2cqw;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 35cqw;
  height: 1.3cqw;
  border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / 0.55);
}

/* Cam yansıması */
.phone__glare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    118deg,
    oklch(100% 0 0 / 0.13) 0%,
    oklch(100% 0 0 / 0.03) 22%,
    transparent 46%,
    transparent 74%,
    oklch(100% 0 0 / 0.05) 100%
  );
}

/* Yan düğmeler */
.phone__side {
  position: absolute;
  z-index: 2;
  border-radius: 0.6cqw;
  background: linear-gradient(180deg, oklch(66% 0.012 280), oklch(38% 0.01 280));
}

.phone__side--action {
  inset-inline-start: -0.5cqw;
  inset-block-start: 17%;
  width: 1cqw;
  height: 4.2%;
}

.phone__side--up {
  inset-inline-start: -0.5cqw;
  inset-block-start: 25%;
  width: 1cqw;
  height: 7.5%;
}

.phone__side--down {
  inset-inline-start: -0.5cqw;
  inset-block-start: 34.5%;
  width: 1cqw;
  height: 7.5%;
}

.phone__side--power {
  inset-inline-end: -0.5cqw;
  inset-block-start: 28%;
  width: 1cqw;
  height: 11%;
}

@keyframes float-phone {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(-0.6deg);
  }
}

/* --- Status bar (ekranlar değişse de sabit kalır) --------------------- */

.status {
  position: absolute;
  z-index: 4;
  inset-block-start: 4.6cqw;
  inset-inline: 7cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 4cqw;
  font-weight: 600;
  color: oklch(98% 0 0);
  pointer-events: none;
}

.status__icons {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
}

.status__icons svg {
  height: 3.4cqw;
  width: auto;
  fill: currentColor;
}

/* --- Ekran geçişleri --------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-block-start: 14cqw;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 620ms var(--ease-out-expo), transform 620ms var(--ease-out-expo);
}

.screen.is-active {
  opacity: 1;
  transform: none;
}

.screen--sheet {
  background: linear-gradient(180deg, oklch(17% 0.04 288), oklch(10% 0.02 280) 55%);
}

/* --- Uygulama içeriği -------------------------------------------------- */

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.4cqw;
  padding-inline: 5.5cqw;
  min-height: 0;
}

.app__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2cqw;
}

.app__eyebrow {
  font-size: 3.4cqw;
  color: oklch(64% 0.02 280);
}

.app__title {
  font-family: var(--font-display);
  font-size: 6.4cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: oklch(98% 0 0);
}

.app__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: linear-gradient(140deg, oklch(66% 0.2 300), oklch(72% 0.16 220));
  font-size: 3.4cqw;
  font-weight: 600;
  color: oklch(100% 0 0);
}

/* Öne çıkan kart */
.app__feature {
  position: relative;
  padding: 4.2cqw;
  border-radius: 6cqw;
  background: linear-gradient(140deg, oklch(58% 0.22 292), oklch(66% 0.18 328) 55%, oklch(72% 0.15 205));
  color: oklch(100% 0 0);
  overflow: hidden;
}

.app__feature::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -18%;
  width: 26cqw;
  height: 26cqw;
  border-radius: 50%;
  background: oklch(100% 0 0 / 0.16);
}

.app__feature-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.4cqw;
  opacity: 0.92;
}

.app__feature-value {
  position: relative;
  display: block;
  margin-block-start: 1.4cqw;
  font-family: var(--font-display);
  font-size: 9cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.app__feature-bar {
  position: relative;
  display: flex;
  gap: 1.2cqw;
  margin-block-start: 3.4cqw;
}

.app__feature-bar i {
  flex: 1;
  height: 1.4cqw;
  border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / 0.3);
}

.app__feature-bar i.is-on {
  background: oklch(100% 0 0 / 0.95);
}

/* Liste */
.app__list {
  display: grid;
  gap: 2.2cqw;
}

.app__row {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3cqw 3.4cqw;
  border-radius: 4.4cqw;
  background: oklch(100% 0 0 / 0.05);
  border: 0.25cqw solid oklch(100% 0 0 / 0.06);
}

.app__row-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 8.4cqw;
  height: 8.4cqw;
  border-radius: 2.6cqw;
  color: oklch(100% 0 0);
}

.app__row-icon svg {
  width: 4.2cqw;
  height: 4.2cqw;
}

.app__row-icon--a {
  background: linear-gradient(140deg, oklch(64% 0.2 290), oklch(70% 0.16 250));
}

.app__row-icon--b {
  background: linear-gradient(140deg, oklch(72% 0.16 196), oklch(70% 0.18 160));
}

.app__row-icon--c {
  background: linear-gradient(140deg, oklch(76% 0.16 45), oklch(70% 0.19 20));
}

.app__row-text {
  flex: 1;
  min-width: 0;
}

.app__row-title {
  font-size: 3.7cqw;
  font-weight: 500;
  color: oklch(96% 0 0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__row-meta {
  font-size: 3.1cqw;
  color: oklch(62% 0.02 280);
}

.app__row-value {
  font-size: 3.4cqw;
  font-weight: 600;
  color: oklch(80% 0.13 196);
}

/* Grafik */
.app__chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2cqw;
  height: 34cqw;
  padding: 3.4cqw;
  border-radius: 5cqw;
  background: oklch(100% 0 0 / 0.04);
  border: 0.25cqw solid oklch(100% 0 0 / 0.06);
}

.app__chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  height: 100%;
}

.app__chart-bar {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / 0.06);
  overflow: hidden;
}

.app__chart-bar i {
  width: 100%;
  height: var(--h, 50%);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, oklch(80% 0.14 196), oklch(62% 0.22 288));
}

.app__chart-col span {
  font-size: 2.8cqw;
  color: oklch(58% 0.02 280);
}

.app__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
}

.app__stat {
  padding: 3.2cqw;
  border-radius: 4.4cqw;
  background: oklch(100% 0 0 / 0.05);
  border: 0.25cqw solid oklch(100% 0 0 / 0.06);
}

.app__stat-label {
  font-size: 3cqw;
  color: oklch(62% 0.02 280);
}

.app__stat-value {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  margin-block-start: 1cqw;
  font-family: var(--font-display);
  font-size: 5.4cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: oklch(97% 0 0);
}

.app__stat-delta {
  font-size: 3cqw;
  font-weight: 500;
  color: oklch(78% 0.16 155);
}

/* --- Paywall ----------------------------------------------------------- */

.sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.4cqw;
  padding: 2cqw 5.5cqw 0;
  min-height: 0;
}

.sheet__close {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: oklch(100% 0 0 / 0.08);
  color: oklch(88% 0 0);
}

.sheet__close svg {
  width: 3.2cqw;
  height: 3.2cqw;
}

.sheet__title {
  font-family: var(--font-display);
  font-size: 7.4cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(99% 0 0);
}

.sheet__lead {
  font-size: 3.5cqw;
  line-height: 1.5;
  color: oklch(70% 0.02 280);
}

.sheet__perks {
  display: grid;
  gap: 2.4cqw;
}

.sheet__perk {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  font-size: 3.5cqw;
  color: oklch(92% 0 0);
}

.sheet__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  background: oklch(80% 0.14 196 / 0.18);
  color: oklch(84% 0.14 196);
}

.sheet__check svg {
  width: 3cqw;
  height: 3cqw;
}

.sheet__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
  margin-block-start: auto;
}

.sheet__plan {
  position: relative;
  padding: 3.4cqw 2.4cqw;
  border-radius: 4.4cqw;
  border: 0.4cqw solid oklch(100% 0 0 / 0.12);
  text-align: center;
}

.sheet__plan--best {
  border-color: oklch(80% 0.14 196);
  background: oklch(80% 0.14 196 / 0.12);
}

.sheet__plan-tag {
  position: absolute;
  inset-block-start: -2.2cqw;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0.6cqw 2.2cqw;
  border-radius: var(--radius-pill);
  background: oklch(80% 0.14 196);
  color: oklch(18% 0.02 280);
  font-size: 2.6cqw;
  font-weight: 700;
  white-space: nowrap;
}

.sheet__plan-price {
  display: block;
  font-family: var(--font-display);
  font-size: 5.6cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: oklch(98% 0 0);
}

.sheet__plan-period {
  font-size: 3cqw;
  color: oklch(64% 0.02 280);
}

.sheet__cta {
  display: grid;
  place-items: center;
  padding: 4cqw;
  border-radius: var(--radius-pill);
  background: oklch(98% 0 0);
  color: oklch(16% 0.02 280);
  font-size: 3.9cqw;
  font-weight: 600;
}

.sheet__note {
  padding-block-end: 6cqw;
  text-align: center;
  font-size: 2.9cqw;
  color: oklch(58% 0.02 280);
}

/* --- Tab bar ----------------------------------------------------------- */

.tabbar {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 3.4cqw 7cqw 7.5cqw;
  border-block-start: 0.25cqw solid oklch(100% 0 0 / 0.07);
  background: oklch(13% 0.015 280 / 0.9);
  backdrop-filter: blur(8px);
  color: oklch(52% 0.02 280);
}

.tabbar svg {
  width: 5cqw;
  height: 5cqw;
}

.tabbar__item--active {
  color: oklch(84% 0.14 196);
}

/* --- Telefonun etrafında uçuşan uygulama ikonları --------------------- */

.float-icon {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1.05rem;
  border: 1px solid var(--color-border-strong);
  background: oklch(100% 0 0 / 0.07);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  animation: float-icon 5.5s var(--ease-in-out) infinite;
  will-change: transform;
}

.float-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.float-icon--1 {
  inset-block-start: 12%;
  inset-inline-start: -9%;
  animation-delay: -0.8s;
  color: var(--color-accent);
}

.float-icon--2 {
  inset-block-start: 46%;
  inset-inline-end: -9%;
  animation-delay: -2.4s;
  color: var(--color-primary-bright);
}

.float-icon--3 {
  inset-block-end: 13%;
  inset-inline-start: -5%;
  animation-delay: -3.9s;
  color: var(--color-warm);
}

@keyframes float-icon {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -16px, 0);
  }
}

@media (max-width: 40rem) {
  /* Cihaz mobilde hero'nun üstünde durduğu için başlığı ekran dışına
     itmeyecek kadar küçültülür */
  .phone {
    width: min(13.5rem, 54vw);
  }

  /* Küçük cihazda uçuşan ikonlar ekranın içeriğini örtüyordu */
  .float-icon {
    display: none;
  }
}