/* Hesabım stilleri bölümü başlangıcı — SADECE bu sayfaya özel sınıflar.
   .shell/.button/renkler zaten navbar-yeni.css'te, .cart-list/.cart-row/.cart-badge
   zaten sepet-yeni.css'te yükleniyor (link ile eklendi, kopyalanmadı).
   body/html sıfırlaması BİLEREK yok. */

.section {
  padding: 44px 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--teal);
  font-weight: 700;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--teal-dark);
}
.page-hero {
  padding: 12px 0 8px;
  text-align: center;
}
.page-hero h1 {
  position: relative;
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.page-hero h1::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--gold);
}

/* Kimlik doğrulama kartı bölümü başlangıcı (ziyaretçi: giriş/kayıt) */
.auth-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.auth-form {
  display: grid;
  gap: 16px;
}
.auth-form h2 {
  margin: 0;
  font-size: 1.2rem;
}
.auth-switch {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}
.auth-switch-link {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-switch-link:hover {
  color: var(--teal-dark);
}
.auth-forgot {
  margin: -6px 0 0;
  text-align: end;
  font-size: 0.82rem;
}
.auth-forgot a {
  color: var(--muted);
  transition: color 0.2s ease;
}
.auth-forgot a:hover {
  color: var(--teal);
}
.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}
.auth-agree input {
  margin-top: 3px;
  flex: none;
}
.auth-agree a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Kimlik doğrulama kartı bölümü bitişi */

/* Hesap alanları bölümü başlangıcı */
.account-field {
  display: block;
  min-width: 0;
}
.account-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.account-field > span:first-child {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.account-field > span:first-child em {
  color: var(--gold);
  font-style: normal;
}
/* 2026-09-28 (docx revize talebi: "şifre bölümü biraz daha güzel olabilir"):
   Bu kural ÇOCUK seçici (>) kullanıyor. Şifre alanları göster/gizle ikonu için
   .password-field sarmalayıcısının içine alındığında artık .account-field'ın
   doğrudan çocuğu olmadıkları için bu stillerin HİÇBİRİNİ almıyorlardı:
   width:100% gitmiş (alan daralmış), border/radius gitmiş (tarayıcı varsayılanı
   çıkmış), göz ikonu da tam genişlikteki sarmalayıcının sağına oturduğu için
   alandan kopuk görünüyordu. Sarmalayıcı içindeki input da seçiciye eklendi. */
.account-field > input,
.account-field .password-field > input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
/* 2026-09-28 (müşteri talebi): placeholder'lar ince ve soluk olsun. Bu dosyada
   da ::placeholder kuralı yoktu — 2026-09-28'de eklenen giriş/kayıt/şifremi
   unuttum placeholder metinleri tarayıcı varsayılanıyla (koyu) çıkıyordu.
   iletisim-yeni.css'teki tonla aynı tutuldu. */
.account-field > input::placeholder,
.account-field .password-field > input::placeholder {
  color: #b3bdbb;
  font-weight: 400;
  opacity: 1;
}
.account-field > input:focus,
.account-field .password-field > input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.12);
}
.account-field > input:disabled {
  color: var(--muted);
  background: var(--ivory, #fbf9f4);
  cursor: default;
}
.auth-form .button,
.account-content .button {
  width: 100%;
  min-height: 50px;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 10px 22px rgba(8, 127, 122, 0.25);
}
.auth-form .button:hover,
.account-content .button:hover {
  background: var(--teal-dark);
}
.account-form-actions {
  display: flex;
  gap: 10px;
}
.account-form-actions .button {
  flex: 1;
}
.account-form-actions .account-cancel-btn {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
}
.account-form-actions .account-cancel-btn:hover {
  background: var(--ivory, #f4f6f5);
}
/* Hesap alanları bölümü bitişi */

/* Telefon alanı bölümü başlangıcı — profilde salt-okunur/basit ikon+giriş
   deseni (webrev2'deki gibi ülke kodu seçici YOK): mevcut üyelerin gsm alanı
   zaten düz metin olarak saklanıyor, ülke koduna ayrıştırmaya çalışmak eski
   kayıtları bozma riski taşıyor — bu yüzden profil telefonu basit tutuldu.
   Kayıt formunda ise (yeni hesap, eski veri yok) proje genelinde zaten
   kullanılan ülke kodu seçici (bkz. genel/iletisim-icerik.php) aynen kullanıldı. */
.input-icon {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.input-icon:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.12);
}
.input-icon > svg {
  width: 17px;
  margin-inline-start: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.input-icon input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px;
  font-size: 0.85rem;
  color: var(--ink);
  outline: none;
  font-family: inherit;
}
.input-icon input:disabled {
  color: var(--muted);
  cursor: default;
}
.input-icon.is-readonly {
  background: var(--ivory, #fbf9f4);
}
/* 2026-09-30 (revizeler30-09 md.3): ülke seçici HER DİLDE solda, numara soldan
   sağa ve sola yaslı. Önceki kural (svg 1, input 2, ülke 3) satır yönünü
   sayfadan aldığı için ülke yalnız AR'de soldaydı. Artık alan yönü sabit LTR:
   [ülke kodu][numara][ikon] — AR görünümü aynı kalıyor. */
.phone-field {
  direction: ltr;
  padding-right: 13px;
  padding-inline-end: 13px;
}
.phone-field .country-select {
  order: 1;
}
.phone-field input {
  direction: ltr;
  text-align: left;
  order: 2;
}
.phone-field > svg {
  order: 3;
  margin-left: 0;
  margin-inline-start: 0;
}
.phone-field .country-select-btn {
  border-inline-start: 0;
  border-right: 1px solid var(--line);
}
/* Telefon alanı bölümü bitişi */

/* Sayfa yerleşimi bölümü başlangıcı (giriş yapılmış hesap görünümü) */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: start;
  gap: 48px;
  margin-top: 34px;
}
.account-nav {
  position: sticky;
  top: calc(var(--header-height, 113px) + 24px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line);
}
.account-nav a {
  position: relative;
  padding: 9px 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}
.account-nav a::before {
  content: "";
  position: absolute;
  inset-inline-start: -19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.2s ease;
}
.account-nav a:hover {
  color: var(--teal);
}
.account-nav a.is-active {
  color: var(--teal);
  font-weight: 800;
}
.account-nav a.is-active::before {
  background: var(--teal);
}
.account-content {
  display: flex;
  flex-direction: column;
  gap: 64px;
  min-width: 0;
}
.account-section h2 {
  margin: 0 0 18px;
  font-size: 1.2rem;
}
.account-logout {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b3261e;
  font-weight: 700;
  font-size: 0.86rem;
  transition: color 0.2s ease;
}
.account-logout:hover {
  color: #8c1d17;
}
.account-logout svg {
  width: 16px;
  height: 16px;
}
.account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 52px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--ivory, #fbf9f4);
  text-align: center;
}
.account-empty-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--teal);
  background: #eef7f5;
}
.account-empty-icon svg {
  width: 26px;
  height: 26px;
}
.account-empty p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.account-empty .button {
  min-width: 180px;
}
/* Sayfa yerleşimi bölümü bitişi */

/* Geçmiş bağışlar listesi başlangıcı — .cart-row sepet-yeni.css'ten aynen
   kullanılıyor (satır = tek bir bağış kalemi), sadece sepete-özgü kaldırma
   butonu (.cart-row-remove) burada yok. */
.donation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
/* Geçmiş bağışlar listesi bitişi */

/* Şifre göster/gizle özelliği başlangıcı — genel/hesabim.php'nin (eski tasarım)
   ORİJİNAL inline <style> bloğundan AYNEN taşındı, gerçek bir özellik (JS ile
   birlikte çalışıyor), sadece taşındı, değiştirilmedi. */
.password-field {
  position: relative;
}
/* 2026-09-28: göz ikonuna yer aç. Seçicinin özgüllüğü yukarıdaki
   `.account-field .password-field > input` (0,2,1) kuralının `padding: 12px 14px`
   kısayolunu geçecek kadar yüksek olmalı, yoksa metin ikonun altına giriyor. */
.account-field .password-field > input,
.password-field input {
  padding-right: 45px;
}
.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}
.toggle-password:hover {
  color: #000;
}
/* Şifre göster/gizle özelliği bitişi */

@media (max-width: 900px) {
  .account-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 16px;
  }
  .auth-wrap {
    margin-top: 16px;
  }
  .account-nav {
    position: static;
    flex-direction: row;
    gap: 20px;
    padding-inline-start: 0;
    padding-bottom: 10px;
    border-inline-start: 0;
    border-block-end: 1px solid var(--line);
    overflow-x: auto;
    scroll-padding-inline: 4px;
  }
  .account-nav::-webkit-scrollbar {
    display: none;
  }
  .account-nav a {
    flex: none;
    white-space: nowrap;
  }
  .account-nav a::before {
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: auto;
    bottom: -11px;
    width: auto;
    height: 2px;
  }
}
@media (max-width: 600px) {
  .account-field-row {
    grid-template-columns: 1fr;
  }
  .auth-card {
    padding: 24px;
  }
  .account-field input,
  .input-icon input,
  .country-select-btn {
    font-size: 16px;
  }
}
/* Hesabım stilleri bölümü bitişi */

/* 2026-09-28 (docx revize talebi): sifremi_unuttum.php yeni tasarıma taşınırken
   gereken sonuç mesajı kutusu. O sayfa eskiden Bootstrap'in .alert-success /
   .alert-danger sınıflarını kullanıyordu; yeni tasarımda karşılığı yoktu. */
.auth-alert {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
}
.auth-alert--ok {
  border-color: #b8ddc6;
  background: #eef8f2;
  color: #1c6b41;
}
.auth-alert--err {
  border-color: #eccfcf;
  background: #fcf1f1;
  color: #8e2f2f;
}

/* sifremi_unuttum.php formunun açıklama satırı. .auth-form bir grid (gap: 16px)
   olduğu için kendi margin'ini sıfırlıyoruz, boşluğu grid veriyor. */
.auth-form .auth-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* account-field dışındaki (label sarmalayıcısı olmayan) alanlar için aynı
   etiket görünümü — bkz. .account-field > span:first-child. */
.account-field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

/* reCAPTCHA kutusu 320px'in altında yatay taşıyor; küçük ekranda ölçekliyoruz. */
.auth-form .auth-recaptcha .g-recaptcha {
  transform-origin: left top;
}
@media (max-width: 400px) {
  .auth-form .auth-recaptcha .g-recaptcha {
    transform: scale(0.86);
  }
}

/* 2026-09-30: profil düzenleme — ülke seçici (düzenleme kapalıyken pasif) +
   e-posta kontrolü / güncelleme mesajı */
.phone-field .country-select-btn:disabled {
  cursor: default;
  opacity: 0.75;
}
.phone-field .country-select-btn:disabled .country-select-chevron {
  visibility: hidden;
}
.account-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.account-alert--hata {
  color: #9b2c2c;
  background: #fdecec;
  border: 1px solid #f5c2c2;
}
.account-alert--basarili {
  color: var(--teal-dark, #075b5a);
  background: #e9f5f3;
  border: 1px solid #bfe0da;
}
/* Profil düzenleme bitişi */

/* 2026-10-01 (müşteri: "hesap oluşturmadaki telefon placeholder'ı fazla kalın"):
   28-09'daki "placeholder ince ve soluk" kuralı yalnız .account-field'ın doğrudan
   input'larını kapsıyordu; telefon kutusu .input-icon sarmalayıcısında olduğu için
   bootstrap label'ın 700 kalınlığını ve tarayıcının koyu placeholder rengini
   alıyordu. Diğer alanlarla aynı: ince (400) ve soluk (kayıt + profil formu). */
.input-icon input::placeholder {
  color: #b3bdbb;
  font-weight: 400;
  opacity: 1;
}