/* ============================================================
   Auth V2 — Üyelik ekranları (Login / Register / Email onay)
   Figma: Trendway_blog, node 4599-15072
   Tasarım token'ları + ekran stilleri. Modüler: tüm auth ekranları
   bu dosyadaki token'ları paylaşır.
   ============================================================ */

:root {
  /* Renkler (Figma TWT/* + fill_*) */
  --twt-blue: #0D437F;            /* TWT/blue — ana renk, başlık, metin */
  --twt-cyan: #40C1C5;            /* input kenarı */
  --twt-white: #FFFFFF;
  --twt-bg: #EBFEFF;             /* sayfa arka planı (açık camgöbeği) */
  --twt-text: #424242;           /* body/marketing metin */
  --twt-border-muted: #D8D8D8;   /* pasif kenar */
  /* Mavi gradient (sol panel + birincil buton) */
  --twt-gradient: linear-gradient(-36deg, #00264F 0%, #0D437F 78%, #5AA3F5 100%);

  /* Tipografi */
  --twt-font-head: "Montserrat", sans-serif;   /* başlık/buton/link */
  --twt-font-body: "Open Sans", sans-serif;    /* input/body */

  /* Radius */
  --twt-radius-card: 32px;
  --twt-radius-field: 16px;

  /* Gölgeler */
  --twt-shadow-card: 0px 8px 24px 0px rgba(64, 193, 197, 0.15);
  --twt-shadow-btn: 0px 8px 20px 0px rgba(13, 67, 127, 0.2);
}

/* ---------- Ortak sayfa kabı ---------- */
.auth-v2 {
  font-family: var(--twt-font-body);
  background: transparent;     /* Figma: kart frame'i beyaz; sayfa arkasında camgöbeği bant YOK */
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 16px;
}

/* ---------- Login: split-screen kart ---------- */
/* Figma Log-in-ENG-b2C: mavi panel arkada GENİŞ (858x422), beyaz kart ÖNDE ORTADA (368x624, daha uzun).
   Kart panelin üstüne biner, panel kartın iki yanına taşar. Overlap layout (yan yana DEĞİL). */
.auth-v2-login {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  width: 100%;
  min-height: 624px; /* kart yüksekliği (Figma 624) — panel ortalansın */
}

/* Mavi panel — arkada, geniş, dikeyde kısa (Figma 858x422); kartın arkasına yayılır */
.auth-v2-aside {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 422px;
  background: var(--twt-gradient);
  border-radius: var(--twt-radius-card);
  color: var(--twt-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  /* LOGIN (Log-in-ENG-b2C): kart SOLDA (x:336) → "Don't have an account?" SAĞ bölgede ortalı.
     Sol padding kartı geçer, içerik sağ bölgede ortalanır. */
  padding: 0 40px 0 calc(50% + 144px);
  text-align: center;
  z-index: 0;
}

.auth-v2-aside__title {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
}

.auth-v2-aside__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--twt-border-muted);
  border-radius: var(--twt-radius-field);
  color: var(--twt-white);
  background: transparent;
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 32px;
  transition: background .15s ease;
}
.auth-v2-aside__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--twt-white);
  text-decoration: none;
}

/* LOGIN kartı — ÖNDE, SOLDA (Figma Log-in-ENG-b2C: kart x:336 sol-orta), panelin üstüne biner. */
.auth-v2-card {
  position: relative;
  z-index: 1;
  flex: 0 0 368px;
  width: 368px;
  background: var(--twt-white);
  border-radius: var(--twt-radius-card);
  box-shadow: var(--twt-shadow-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* kartı SOLA al (Figma login): sağda "Don't have an account? / Sign up" yeri kalsın */
  margin-right: 208px;
}

.auth-v2-card__logo {
  width: 174px;
  height: 70px;
  object-fit: contain;
}

.auth-v2-card__title {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--twt-blue);
  margin: 0;
  align-self: flex-start;
}

/* Input grubu */
.auth-v2-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.auth-v2-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--twt-white);
  border: 1px solid var(--twt-cyan);
  border-radius: 12px;          /* Figma input radius 1:1 (buton 16, input 12) */
  padding: 8px 16px 8px 24px;   /* Figma input padding 1:1 (sol 24, sağ 16 — asimetrik) */
}
.auth-v2-field svg { flex: 0 0 auto; }
/* Figma: input baş ikonu cyan (#40C1C5, fill_7LFB5K). Göz toggle'ı kapsamaz (kendi rengi var). */
.auth-v2-field .auth-v2-field__icon {
  flex: 0 0 auto;
  color: var(--twt-cyan);
}
.auth-v2-field input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--twt-font-body);  /* Figma TWT/imput = Open Sans (doğru) */
  font-size: 16px;                     /* Figma TWT/imput 1:1 */
  color: var(--twt-blue);
  padding: 8px 0;
}
.auth-v2-field input::placeholder {
  color: var(--twt-blue);
  opacity: .7;
}
/* Ülke (nationality) select — input'larla aynı stil + sağda chevron */
.auth-v2-field--select { position: relative; }
.auth-v2-field--select select {
  flex: 1 1 auto;
  border: none; outline: none; background: transparent;
  font-family: var(--twt-font-body); font-size: 16px; color: var(--twt-blue);
  padding: 8px 24px 8px 0; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.auth-v2-field--select select:invalid { color: var(--twt-blue); opacity: .7; } /* placeholder option soluk */
.auth-v2-field__chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--twt-cyan); pointer-events: none; }
/* parola göster/gizle ikonu sağda */
.auth-v2-field--password input { padding-right: 8px; }
.auth-v2-field__toggle {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--twt-blue);
  display: inline-flex;
}

/* Şifre göster/gizle ikonu — Figma: kapalı göz soluk, açık göz mavi (state'e göre ikon değişir) */
.auth-v2-eye { display: none; }
.auth-v2-field__toggle .auth-v2-eye--off { display: inline-block; color: #9aa6b2; } /* varsayılan: gizli şifre, soluk kapalı-göz */
.auth-v2-field__toggle.is-revealed .auth-v2-eye--off { display: none; }
.auth-v2-field__toggle.is-revealed .auth-v2-eye--on { display: inline-block; color: var(--twt-blue); } /* görünür şifre: mavi açık-göz */

/* Forgot password linki */
.auth-v2-forgot {
  width: 100%;
}
.auth-v2-forgot a {
  font-family: var(--twt-font-head);
  font-weight: 500;
  font-size: 12px;
  color: var(--twt-blue);
  text-decoration: none;
}
.auth-v2-forgot a:hover { text-decoration: underline; }

/* Birincil buton (CONTINUE) */
.auth-v2-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--twt-gradient);
  box-shadow: var(--twt-shadow-btn);
  border: none;
  border-radius: var(--twt-radius-field);
  color: var(--twt-white);
  font-family: var(--twt-font-head);
  font-weight: 700;            /* Figma TWT/button 700 */
  font-size: 20px;             /* Figma TWT/button 20px 1:1 */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  transition: filter .15s ease;
}
.auth-v2-btn:hover { filter: brightness(1.05); }

/* Sonuç mesajı (login result) */
.auth-v2-message {
  width: 100%;
  text-align: center;
  font-family: var(--twt-font-body);
  font-size: 13px;
  margin: 0;
}
.auth-v2-message.is-error { color: #DD4B39; }
.auth-v2-message.is-success { color: #2e7d32; }

/* ============================================================
   Register — çok adımlı (Figma: New-user-ENG-*)
   Tek kolonlu kart, üstte 4'lü adım göstergesi, adımlar arası
   client-side geçiş. Login token'larını paylaşır.
   ============================================================ */
.auth-v2-register {
  background: var(--twt-white);
  border-radius: var(--twt-radius-card);
  box-shadow: var(--twt-shadow-card);
  width: 100%;
  max-width: 440px;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Register: login ile AYNI overlap layout (mavi panel arkada + wizard kartı önde ortada).
   .auth-v2-register kartı, login'deki .auth-v2-card rolünü üstlenir. */
.auth-v2-login--register .auth-v2-register {
  position: relative;
  z-index: 1;
  flex: 0 0 368px;
  width: 368px;
  margin-left: 208px; /* kartı SAĞA al (Figma), solda 'Have account/Log in' görünsün */
  /* Login kartıyla aynı yükseklik (~430px): panelden (422) hafif taşar, kısa adımlarda da sabit kalır */
  min-height: 430px;
  justify-content: center;
}
/* REGISTER (Sign-in-ENG-b2C): kart SAĞDA (x:496) → "Have an account?" SOL bölgede ortalı.
   Genel aside login için sağ bölge ayarlı; register'da SOL bölgeye al (padding ters). */
.auth-v2-login--register .auth-v2-aside {
  padding: 0 calc(50% + 144px) 0 40px;
}
/* Sol panel zaten "Have account/Log in" yönlendirmesini veriyor → alt link tekrarını gizle */
.auth-v2-login--register #regAltLink { display: none; }

/* bg-circles eliptik desen — varsayılan gizli; sadece iç adımlarda (2-5) görünür (Figma). */
.auth-v2-register__bg {
  display: none;
  position: absolute;
  /* Figma 1:1 (kart 1200x750): bg-circles SVG x:181 y:132, 555x555 — birebir Figma.
     Daire SOL bölgede; sağ kısmı stage (beyaz örtü, x:348) altında kalır -> kesik görünür. */
  left: 181px;
  top: 132px;
  width: 555px;
  height: 555px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
.auth-v2-register { position: relative; overflow: hidden; }
/* Katman sırası: daire (z:0, arkada) -> beyaz stage örtü (z:1) -> içerik (z:2, üstte).
   İçerik bg-circles VE stage'in üstünde; logo daire bölgesinde ama stage'in solunda. */
.auth-v2-register > *:not(.auth-v2-register__bg):not(.auth-v2-register__stage) {
  position: relative;
  z-index: 2;
}
/* Beyaz kapak — varsayılan gizli; sadece iç adımlarda görünür (daireyi örter) */
.auth-v2-register__stage { display: none; }

/* İÇ ADIMLAR (Figma New-user-ENG-*: confirm/password/name/phone)
   Figma frame 1200x750: logo sol-üst (x:59), bg-circles sol (x:176, 555px), içerik SAĞ bölge (x:436, ~320px geniş).
   Bizde ölçekli: geniş kart (~860px), sol %42 dekoratif (logo+eliptik) / sağ içerik. Mavi panel gizli. */
.auth-v2-login--register.is-inner-step .auth-v2-aside { display: none; }
/* STAGED düzen (kesik daire + beyaz form örtüsü) — register iç adımları VE forgot/need-help paylaşır.
   .is-staged wizard elemanına eklenir (register: JS ile iç adımlarda; forgot: kalıcı). */
.auth-v2-register.is-staged {
  margin-left: 0;
  flex: 0 0 1200px;
  width: 1200px;
  max-width: 1200px;          /* base max-width:440'ı ez. Figma frame 1:1 = 1200px. */
  min-height: 750px;          /* Figma frame yüksekliği 1:1 */
  align-items: stretch;
  padding: 44px 56px;
}
/* logo sol-üstte sabit — Figma x:59 y:66 1:1. Absolute: left padding'i de kapsar -> Figma x direkt. */
.auth-v2-register.is-staged .auth-v2-register__logo {
  position: absolute;
  left: 59px;
  top: 66px;
  margin: 0;
  z-index: 2;
}
/* Beyaz kapak (stage) — Figma Frame8 x:348 1:1, tam yükseklik. Dairenin sağını örter. */
.auth-v2-register.is-staged .auth-v2-register__stage {
  display: block;
  position: absolute;
  left: 348px;
  top: 0;
  bottom: 0;
  right: 0;
  background: var(--twt-white);
  z-index: 1;
  border-radius: 0 var(--twt-radius-card) var(--twt-radius-card) 0;
}
/* İçerik bloğu (başlık/input) — Figma metin x:436 1:1; padding-left 56 düşülür -> margin-left 380.
   İçerik kolonu Figma genişliği 320px. */
.auth-v2-register.is-staged .auth-v2-step {
  margin-left: 380px;
  margin-top: 150px;        /* absolute step göstergesinin (top94+~32) altından, dikeyde dengeli */
  width: auto;
  max-width: 320px;
}
/* Figma içerik boşlukları (Frame8): text-box(title+body) -> code-inputs arası 36px.
   step gap 16 olduğu için input grubuna +20 üst boşluk; input->buton 12 (16'dan -4). */
.auth-v2-register.is-staged .auth-v2-step .auth-v2-fields { margin-top: 20px; }
.auth-v2-register.is-staged .auth-v2-step .auth-v2-fields + .auth-v2-btn { margin-top: -4px; }
/* Geri oku Figma'da YOK — iç adımlarda gizle */
.auth-v2-register.is-staged .auth-v2-back {
  display: none;
}
/* Step göstergesi — Figma number-of-steps x:438 y:93.5 1:1. */
.auth-v2-register.is-staged .auth-v2-steps {
  position: absolute;
  left: 438px;
  top: 94px;
  margin: 0;
  width: auto;
  justify-content: flex-start;
  z-index: 2;
}
.auth-v2-register.is-staged .auth-v2-register__bg { display: block; }

.auth-v2-register__logo {
  width: 174px;
  height: 70px;
  object-fit: contain;
}

/* Adım göstergesi (Figma number-of-steps: numaralı kutular 1-2-3-4, çizgiyle bağlı) */
.auth-v2-steps {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.auth-v2-steps__box {
  flex: 0 0 auto;
  min-width: 32px;            /* Figma: hug, padding 4px 12px etrafında 20px rakam */
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1.5px solid var(--twt-cyan);
  background: var(--twt-white);
  color: var(--twt-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--twt-font-head);
  font-weight: 600;           /* Figma TWT/card-title 600 */
  font-size: 20px;            /* Figma TWT/card-title 20px 1:1 */
  transition: background .2s ease, color .2s ease;
}
/* aktif/tamamlanmış adım: cyan dolgu + beyaz rakam (Figma) */
.auth-v2-steps__box.is-active,
.auth-v2-steps__box.is-done {
  background: var(--twt-cyan);
  color: var(--twt-white);
}
/* kutular arası bağlantı çizgisi (Figma number-of-steps gap 52px 1:1) */
.auth-v2-steps__line {
  flex: 0 0 48px;
  height: 1.5px;
  background: var(--twt-cyan);
  opacity: 0.5;
}

/* Geri navigasyon (üstte ok) */
.auth-v2-back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--twt-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--twt-font-head);
  font-size: 13px;
  padding: 0;
  align-self: flex-start;
}
.auth-v2-back[hidden] { display: none; }

/* Tek adım paneli — sadece aktif olan görünür */
.auth-v2-step { display: none; flex-direction: column; gap: 16px; }
.auth-v2-step.is-active { display: flex; }

/* Login email-first wizard adımları — sadece aktif olan görünür */
.auth-v2-login-step { display: none; flex-direction: column; gap: 16px; }
.auth-v2-login-step.is-active { display: flex; }

.auth-v2-step__title {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 26px;           /* Figma TWT/h4 1:1 */
  line-height: 1.05;          /* Figma 1em (descender payı için 1.05) */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--twt-blue);
  margin: 0;
}
.auth-v2-step__body {
  font-family: var(--twt-font-head); /* Figma TWT/text-body = Montserrat (Open Sans DEĞİL) */
  font-weight: 400;
  font-size: 14px;            /* Figma TWT/text-body 1:1 */
  line-height: 1.286;
  color: var(--twt-text);
  margin: 0;
}

/* İkincil buton (Skip for now) */
.auth-v2-btn-secondary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--twt-blue);
  font-family: var(--twt-font-head);
  font-weight: 700;            /* Figma TWT/button 700 */
  font-size: 20px;             /* Figma TWT/button 20px 1:1 */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  cursor: pointer;
}
.auth-v2-btn-secondary:hover { text-decoration: underline; }

/* Telefon adımı: ülke kodu + numara yan yana */
.auth-v2-phone-row { display: flex; gap: 10px; width: 100%; }
.auth-v2-phone-row .auth-v2-field--country { flex: 0 0 110px; }
.auth-v2-phone-row .auth-v2-field--phone { flex: 1 1 auto; }

/* Success ekranı */
.auth-v2-success { text-align: center; align-items: center; }
.auth-v2-success .auth-v2-step__title { text-align: center; }
/* STAGED modda (forgot/need-help) success/help içeriği SOLA hizalı (Figma need-help: sol kolon). */
.auth-v2-register.is-staged .auth-v2-success { text-align: left; align-items: flex-start; }
.auth-v2-register.is-staged .auth-v2-success .auth-v2-step__title { text-align: left; }

/* Alt link (zaten üye misin? Giriş yap) */
.auth-v2-altlink {
  text-align: center;
  font-family: var(--twt-font-body);
  font-size: 13px;
  color: var(--twt-text);
}
.auth-v2-altlink a {
  font-family: var(--twt-font-head);
  font-weight: 600;
  color: var(--twt-blue);
  text-decoration: none;
}
.auth-v2-altlink a:hover { text-decoration: underline; }
/* STAGED modda (forgot): alt link'i (User Log In) içerik kolonuyla aynı eksene ortala
   (NEED HELP? ile dikey hizada). Figma 1:1: içerik x436 -> margin-left 380, kolon 320. */
.auth-v2-register.is-staged .auth-v2-altlink {
  margin-left: 380px;
  max-width: 320px;
}

/* ============================================================
   Profil / Account (Figma: Main-page-ENG-user-account)
   Sol menü (sekmeler) + sağ içerik (Contact, Basic info kartları).
   Login token'larını paylaşır. Şimdilik sadece Account sekmesi aktif.
   ============================================================ */
.profile-v2 {
  font-family: var(--twt-font-body);
  background: var(--twt-white); /* Figma: account ekranı arka planı beyaz (#FFFFFF), cyan DEĞİL */
  min-height: 100%;
  padding: 40px 16px;
}
.profile-v2__wrap {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Sol menü — Figma: şeffaf container, her sekme AYRI gölgeli beyaz kart */
.profile-v2__sidebar {
  flex: 0 0 300px;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-v2__hello {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--twt-blue);
  margin: 0 0 4px;
  padding: 0 4px;
}
.profile-v2__hello-email {
  font-family: var(--twt-font-body);
  font-size: 13px;
  color: #9aa6b2;
  margin: 0 0 20px;
  padding: 0 4px;
  word-break: break-all;
}
.profile-v2__navitem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--twt-white);
  border-radius: 16px;
  /* Figma: tüm kartlar beyaz + yumuşak cyan gölge (effect_RMZ2RN) */
  box-shadow: 0px 8px 24px 0px rgba(64, 193, 197, 0.15);
  text-decoration: none;
  color: var(--twt-blue);
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease;
}
.profile-v2__navitem:hover { box-shadow: 0px 10px 28px 0px rgba(64, 193, 197, 0.28); text-decoration: none; }
/* Figma: aktif kart beyaz ama gölgesiz (seçili vurgusu = gölgenin kalkması) */
.profile-v2__navitem.is-active { box-shadow: 0px 10px 28px 0px rgba(13, 67, 127, 0.18); }
.profile-v2__navitem.is-disabled { cursor: default; pointer-events: none; }
.profile-v2__navicon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  object-fit: contain;
}
.profile-v2__navtitle {
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--twt-blue);
  margin: 0;
}
.profile-v2__navsub {
  font-family: var(--twt-font-body);
  font-size: 12px;
  color: var(--twt-text);
  margin: 2px 0 0;
  line-height: 1.3;
}
.profile-v2__signout {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: none;
  background: none;
  cursor: pointer;
  color: #DD4B39;
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.profile-v2__signout:hover { text-decoration: underline; }

/* Sağ içerik — Figma: tek beyaz panel, breadcrumb + büyük başlık + sade bölümler (panel içi gölgesiz) */
.profile-v2__content {
  flex: 1 1 auto;
  background: var(--twt-white);
  border-radius: var(--twt-radius-card);
  box-shadow: var(--twt-shadow-card);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
}
.profile-v2__breadcrumb {
  font-family: var(--twt-font-body);
  font-size: 13px;
  color: var(--twt-text);
  margin: 0 0 8px;
}
.profile-v2__name {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--twt-blue);
  margin: 0 0 24px;
}

/* İçerik bölümü (Basic information / Contact) — gölgesiz, düz, ince ayraçlı */
.profile-v2__card {
  background: transparent;
  padding: 0 0 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid #E3EAF1;
}
.profile-v2__card:last-child { border-bottom: none; }
.profile-v2__card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.profile-v2__card-title {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--twt-cyan);     /* Figma: kart başlığı cyan (#40C1C5) */
  margin: 0;
}
/* Figma TWT/Sub-title: Montserrat 400 / 12px / #424242 — kart başlığı altı + sayfa başlığı altı */
.profile-v2__card-sub,
.profile-v2__subtitle {
  font-family: var(--twt-font-head);
  font-weight: 400;
  font-size: 12px;
  color: var(--twt-text);
  margin: 4px 0 0;
}
/* Sayfa başlığı (h1) hemen altında subtitle gelince başlık alt boşluğunu daralt */
.profile-v2__name + .profile-v2__subtitle { margin: -16px 0 24px; }
.profile-v2__edit {
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--twt-blue);     /* Figma: Edit linki mavi (#0D437F) */
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.profile-v2__edit:hover { text-decoration: underline; }
.profile-v2__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #EEF2F6;
}
.profile-v2__row:last-child { border-bottom: none; }
.profile-v2__row-label {
  font-family: var(--twt-font-body);
  font-size: 14px;
  color: var(--twt-text);
}
.profile-v2__row-value {
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--twt-blue);
  text-align: right;
}
.profile-v2__row-value.is-empty { color: #9AA8B5; font-weight: 400; }

/* Security & Settings satırı: solda başlık+açıklama, sağda aksiyon linki */
.profile-v2__secrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid #EEF2F6;
}
.profile-v2__secrow:last-child { border-bottom: none; }
.profile-v2__secrow-title {
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--twt-blue);
  margin: 0 0 4px;
}
.profile-v2__secrow-desc {
  font-family: var(--twt-font-body);
  font-size: 13px;
  color: var(--twt-text);
  margin: 0;
  max-width: 460px;
  line-height: 1.4;
}
.profile-v2__secrow-action {
  flex: 0 0 auto;
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--twt-cyan);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.profile-v2__secrow-action:hover:not(:disabled) { text-decoration: underline; }
.profile-v2__secrow-action.is-danger { color: #DD4B39; }
.profile-v2__secrow-action:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }

/* Help & Feedback sekmesi */
.profile-v2__help-body {
  font-family: var(--twt-font-body); font-size: 14px; color: var(--twt-text);
  line-height: 1.6; margin: 0 0 20px;
}
.profile-v2__help-email {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--twt-font-head); font-weight: 600; font-size: 15px;
  color: var(--twt-cyan); text-decoration: none; margin-bottom: 10px;  /* Figma: cyan */
}
.profile-v2__help-email:hover { text-decoration: underline; }
.profile-v2__help-response {
  font-family: var(--twt-font-body); font-size: 13px; color: #9aa6b2; margin: 0;
}

/* Tab içerik geçişi */
.profile-v2__tab { display: none; }
.profile-v2__tab.is-active { display: flex; flex-direction: column; }

/* ---------- Edit profile modal ---------- */
.profile-v2__modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13, 67, 127, 0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.profile-v2__modal-overlay[hidden] { display: none; }
.profile-v2__modal {
  background: var(--twt-white);
  border-radius: 16px;
  width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(13, 67, 127, 0.25);
}
.profile-v2__modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid #eef2f6;
}
.profile-v2__modal-title { font-family: var(--twt-font-head); font-weight: 700; font-size: 18px; color: var(--twt-blue); margin: 0; }
.profile-v2__modal-close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #9aa6b2; }
.profile-v2__modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.profile-v2__modal-field { display: flex; flex-direction: column; gap: 6px; }
.profile-v2__modal-field > span { font-family: var(--twt-font-head); font-weight: 500; font-size: 12px; color: var(--twt-text); }
.profile-v2__modal-field input,
.profile-v2__modal-field select {
  border: 1px solid #d7dee6; border-radius: 12px; padding: 11px 14px;
  font-family: var(--twt-font-body); font-size: 14px; color: var(--twt-blue); background: var(--twt-white);
}
.profile-v2__modal-field input:focus,
.profile-v2__modal-field select:focus { outline: none; border-color: var(--twt-cyan); }
.profile-v2__modal-actions { display: flex; gap: 12px; margin-top: 6px; }
.profile-v2__modal-cancel,
.profile-v2__modal-save {
  flex: 1 1 0; border-radius: 12px; padding: 12px; cursor: pointer;
  font-family: var(--twt-font-head); font-weight: 600; font-size: 14px;
}
.profile-v2__modal-cancel { background: var(--twt-white); border: 1px solid #d7dee6; color: var(--twt-text); }
.profile-v2__modal-save { background: var(--twt-blue); border: 1px solid var(--twt-blue); color: var(--twt-white); }
.profile-v2__modal-save:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 860px) {
  .profile-v2__wrap { flex-direction: column; }
  .profile-v2__sidebar { flex: 0 0 auto; width: 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* Mobilde overlap iptal: aside ve kart alt alta (static), kart üstte */
  .auth-v2-login,
  .auth-v2-login--register {
    flex-direction: column-reverse;
    align-items: center;
    max-width: 420px;
    min-height: 0;
  }
  .auth-v2-aside {
    position: static;
    transform: none;
    height: auto;
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
  }
  .auth-v2-card,
  .auth-v2-login--register .auth-v2-register {
    flex: 0 0 auto;
    width: 100%;
    margin: 0; /* mobilde overlap/offset iptal */
  }
}

/* ===== Profil > Saved (favori oteller) — Figma: Main-page-ENG-user-saved =====
   2 kolonlu kart grid'i. Kart: sol foto (152x95, sol köşe yuvarlak) + sağda otel adı. */
.saved-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 328px));
  gap: 16px 24px;
}
.saved-card {
  display: flex;
  align-items: center;
  gap: 22px;
  border-radius: 12px;
}
.saved-card__img {
  flex: 0 0 152px;
  width: 152px;
  height: 95px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #E3EAF1;
}
.saved-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.saved-card__title {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--twt-blue, #0D437F);
  margin: 0;
}
.profile-v2__empty {
  font-family: var(--twt-font-body);
  font-size: 14px;
  color: #6B7785;
  margin: 0;
}
/* Saved — ülke kartı (drill-down tetikleyici) + alt satır ("N hotels") */
.saved-card--country { cursor: pointer; }
.saved-card--country:hover .saved-card__title { color: var(--twt-cyan, #40C1C5); }
.saved-card__sub {
  font-family: var(--twt-font-body);
  font-size: 14px;
  line-height: 1.29;
  color: #424242;
  margin: 0;
}
.saved-crumb-link { color: inherit; text-decoration: underline; cursor: pointer; }
.saved-detail { display: block; }
/* Saved drill-down: tam genişlik otel kartları (Figma: foto | ad | sağda fiyat-notu + Find similar) */
.saved-detail__list { display: flex; flex-direction: column; gap: 16px; }
.saved-card--detail {
  gap: 22px;
  background: #fff;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03);
  border-radius: 16px;
  padding: 0 16px 0 0;
}
.saved-card--detail .saved-card__text { flex: 1 1 auto; }
.saved-card__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
  padding: 16px 0;
  text-align: right;
  flex: 0 0 auto;
}
.saved-card__pricenote {
  font-family: var(--twt-font-body);
  font-size: 14px;
  color: #424242;
  margin: 0;
  white-space: nowrap;
}
.saved-card__findsimilar {
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--twt-cyan, #40C1C5);
  text-decoration: none;
}
.saved-card__findsimilar:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .saved-grid { grid-template-columns: 1fr; }
  .saved-card__action { margin-left: 0; align-items: flex-start; text-align: left; }
}

/* ===== Profil > Bookings (Figma: Main-page-ENG-user-bookings) ===== */
.bookings-filter { display: flex; gap: 16px; margin-bottom: 24px; }
.bookings-chip {
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid #40C1C5;
  background: #fff;
  color: #40C1C5;
  font-family: var(--twt-font-head);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.bookings-chip.is-active { background: #40C1C5; color: #fff; }
/* Empty state — gezegen ikonu + başlık + alt metin */
.bookings-empty {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 24px;
}
.bookings-empty__icon { width: 90px; height: 68px; flex: 0 0 auto; }
.bookings-empty__title {
  font-family: var(--twt-font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--twt-blue, #0D437F);
  margin: 0 0 8px;
}
.bookings-empty__sub {
  font-family: var(--twt-font-body);
  font-size: 14px;
  color: #424242;
  margin: 0;
  max-width: 500px;
}
/* Dolu hali — temel v1 (Figma gruplu/detay/voucher gerçek rezervasyon verisiyle tamamlanacak) */
.bookings-list { display: flex; flex-direction: column; gap: 12px; }
.bookings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #E3EAF1;
  border-radius: 12px;
}
.bookings-row__main { display: flex; flex-direction: column; gap: 4px; }
.bookings-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bookings-row__num { font-family: var(--twt-font-head); font-weight: 600; font-size: 14px; color: #0D437F; }
.bookings-row__date, .bookings-row__status { font-size: 12px; color: #6B7785; }
.bookings-row__price { font-family: var(--twt-font-head); font-weight: 700; font-size: 16px; color: #0D437F; }

/* Bookings — Figma zengin kart (foto | gövde: ad+status / destinasyon-tarih / fiyat+voucher) */
.booking-card {
  display: flex; align-items: stretch; gap: 22px;
  background: #fff; box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03);
  border-radius: 16px; padding: 0 16px 0 0; overflow: hidden;
}
.booking-card__img {
  flex: 0 0 152px; width: 152px; min-height: 116px;
  background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #E3EAF1;
}
.booking-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 16px 0; min-width: 0; }
.booking-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-card__title { font-family: var(--twt-font-head); font-weight: 700; font-size: 18px; line-height: 1.2; color: #0D437F; margin: 0; }
.booking-card__status { font-family: var(--twt-font-body); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.booking-card__status--past { background: #E8F0F1; color: #0D437F; }
.booking-card__status--coming { background: #E3F7F7; color: #2A8C8F; }
.booking-card__status--canceled { background: #FBE6E3; color: #C0392B; }
.booking-card__meta { font-family: var(--twt-font-body); font-size: 14px; color: #6B7785; margin: 0; }
.booking-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.booking-card__price { font-family: var(--twt-font-head); font-weight: 700; font-size: 16px; color: #0D437F; }
.booking-card__voucher { font-family: var(--twt-font-head); font-weight: 600; font-size: 14px; color: var(--twt-cyan, #40C1C5); text-decoration: none; }
.booking-card__voucher:hover { text-decoration: underline; }
.bookings-empty--filter { padding: 24px 0; }

@media (max-width: 767px) {
  .bookings-empty { flex-direction: column; text-align: center; gap: 16px; }
  .booking-card { flex-direction: column; padding: 0 0 16px 0; }
  .booking-card__img { width: 100%; min-height: 140px; }
  .booking-card__body { padding: 0 16px; }
}