/* Üyelik ve müşteri formları (uyelik modülü) — giriş, kayıt, hesabım, şifre, kurumsal teklif.
   Genel sınıflar (.btn, .card, .input, .form-row, .badge, .crumbs, .section, .container) style.css'ten gelir;
   burada yalnızca account- önekli sınıflar tanımlanır. Renkler style.css token'larını kullanır, yedek değerlerle. */

/* İkincil metin rengi: genel --mut (#79808d) beyaz/fildişi zeminde 4:1 kontrastta kalıyor; bu sayfalardaki
   küçük yardım metinleri için 4.5:1 üstü (≈5.8:1) koyu gri kullanılır. */
:root { --account-mut: #5f6672; }

.account-auth,
.account-page { padding-block: 24px 56px; }

/* Ekmek kırıntısı */
.account-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--account-mut, #5f6672); margin-bottom: 20px; }
.account-crumbs a { color: inherit; text-decoration: none; }
.account-crumbs a:hover { color: var(--red, #d23a5c); }

/* Başlıklar */
.account-title { font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink, #0e1116); }
.account-subtitle { font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 24px; margin: 0 0 16px; color: var(--ink, #0e1116); }
.account-lead { color: var(--ink-2, #3f4650); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.account-opt { font-weight: 400; color: var(--account-mut, #5f6672); font-size: 13px; }
.account-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kart */
.account-card { background: var(--card, #fff); border: 1px solid var(--line, #e9e6e0); border-radius: var(--r-xl, 28px); padding: 28px 22px; box-shadow: 0 12px 34px rgba(14, 17, 22, 0.05); }
@media (min-width: 640px) { .account-card { padding: 36px; } }

/* Giriş / kayıt düzeni */
.account-auth-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .account-auth-grid { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 32px; } }
.account-aside { display: grid; gap: 20px; }

/* Form */
.account-form .form-row { margin-bottom: 16px; }
.account-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink, #0e1116); }
.account-form .input { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; }
.account-form textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; padding-block: 12px; }
.account-form .input[readonly] { background: var(--paper, #f8f7f4); color: var(--account-mut, #5f6672); cursor: default; }
.account-form-2col { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .account-form-2col { grid-template-columns: 1fr 1fr; } }
.account-hint { font-size: 13px; color: var(--account-mut, #5f6672); line-height: 1.5; margin: 6px 0 0; }
.account-hint a { color: var(--red-d, #b8294f); }
.account-submit { width: 100%; margin-top: 4px; min-height: 52px; font-size: 16px; }
.account-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.account-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* Şifre göster/gizle */
.account-pw { position: relative; }
.account-pw .input { padding-right: 88px; }
.account-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--red-soft, #fdecef); color: var(--red-d, #b8294f); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.account-eye:hover { background: #fbd9dc; }

/* Onay kutusu */
.account-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2, #3f4650); margin: 4px 0 18px; cursor: pointer; }
.account-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--red, #d23a5c); }
.account-check a { color: var(--red-d, #b8294f); }

/* Hata kutusu */
.account-alert { background: #fff4f4; border: 1px solid #f3c1c5; color: #8a1c24; border-radius: var(--r-md, 14px); padding: 12px 16px; margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.account-alert ul { margin: 0; padding-left: 18px; }
.account-alert li + li { margin-top: 4px; }

/* Yardımcı metinler */
.account-alt { margin: 20px 0 0; font-size: 15px; color: var(--ink-2, #3f4650); text-align: center; }
.account-alt a { color: var(--red-d, #b8294f); font-weight: 700; }
.account-help { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--account-mut, #5f6672); }
.account-help a { color: var(--red-d, #b8294f); }

/* Koyu bilgi kutusu: "Üye olmadan da sipariş verebilirsiniz" */
.account-note { background: var(--ink, #0e1116); color: #fff; border-radius: var(--r-xl, 28px); padding: 26px 24px; }
.account-note h2 { font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 22px; margin: 0 0 10px; color: #fff; }
.account-note p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.account-note-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-btn-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: rgba(255, 255, 255, 0.06); }
.account-btn-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Avantaj listesi */
.account-why { background: var(--card, #fff); border: 1px solid var(--line, #e9e6e0); border-radius: var(--r-xl, 28px); padding: 24px; }
.account-why h2 { font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 20px; margin: 0 0 12px; }
.account-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.account-benefits li { position: relative; padding-left: 32px; font-size: 14px; line-height: 1.55; color: var(--ink-2, #3f4650); }
.account-benefits li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--red-soft, #fdecef) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b30510' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.account-benefits a { color: var(--red-d, #b8294f); }

/* Hesabım düzeni */
.account-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 960px) { .account-wrap { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; } .account-side { position: sticky; top: 96px; } }
.account-side { background: var(--card, #fff); border: 1px solid var(--line, #e9e6e0); border-radius: var(--r-xl, 28px); padding: 18px; }
.account-user { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--line, #e9e6e0); margin-bottom: 12px; }
.account-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--red, #d23a5c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.account-user-text { display: grid; min-width: 0; }
.account-user-text strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-user-text span { font-size: 13px; color: var(--account-mut, #5f6672); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-nav { display: grid; gap: 4px; }
.account-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm, 10px); color: var(--ink, #0e1116); text-decoration: none; font-weight: 600; font-size: 14px; }
.account-nav a svg { flex: none; color: var(--account-mut, #5f6672); }
.account-nav a:hover { background: var(--paper, #f8f7f4); }
.account-nav a[aria-current="page"] { background: var(--red-soft, #fdecef); color: var(--red-d, #b8294f); }
.account-nav a[aria-current="page"] svg { color: var(--red-d, #b8294f); }
.account-nav-count { margin-left: auto; background: var(--ink, #0e1116); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.account-nav a[aria-current="page"] .account-nav-count { background: var(--red-d, #b8294f); }
.account-logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #e9e6e0); }
.account-logout-btn { width: 100%; }
@media (max-width: 959px) {
  .account-side { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .account-nav { grid-template-columns: repeat(2, 1fr); }
  .account-nav a { padding: 10px; }
}

.account-main { display: grid; gap: 20px; min-width: 0; }
.account-head .account-lead { margin-bottom: 0; }

/* Hızlı kutular */
.account-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.account-tile { display: grid; gap: 2px; background: var(--card, #fff); border: 1px solid var(--line, #e9e6e0); border-radius: var(--r-lg, 20px); padding: 16px; text-decoration: none; color: var(--ink, #0e1116); min-height: 44px; }
.account-tile:hover { border-color: var(--red, #d23a5c); }
.account-tile strong { font-family: var(--serif, 'Fraunces', Georgia, serif); font-size: 26px; line-height: 1.1; }
.account-tile span { font-size: 13px; color: var(--account-mut, #5f6672); }
/* WhatsApp kutusu: beyaz yazı --wa (#25d366) üzerinde yalnızca ≈2:1; koyu yeşil --wa-d (#0f7a3c) ≈5.4:1 (style.css .btn-wa gibi).
   Alt satır da tam beyaz: %85 saydam beyaz bu zeminde 4.4:1'e düşüyor. */
.account-tile-wa { background: var(--wa-d, #0f7a3c); border-color: var(--wa-d, #0f7a3c); color: #fff; }
.account-tile-wa strong { font-family: inherit; font-size: 18px; }
.account-tile-wa span { color: #fff; }
.account-tile-wa:hover { border-color: #0b6630; background: #0b6630; }
@media (max-width: 560px) { .account-quick { grid-template-columns: 1fr 1fr; } .account-tile-wa { grid-column: 1 / -1; } }

/* Paneller */
.account-panel { background: var(--card, #fff); border: 1px solid var(--line, #e9e6e0); border-radius: var(--r-xl, 28px); padding: 22px 18px; }
@media (min-width: 640px) { .account-panel { padding: 28px; } }
.account-panel-narrow { max-width: 560px; }
.account-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.account-panel-head h2 { font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 22px; margin: 0; }
.account-range { flex-basis: 100%; margin: 0; }
.account-panel .pager { margin: 20px 0 4px; }
.account-panel-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #e9e6e0); }
.account-empty { text-align: center; padding: 20px 8px 8px; color: var(--ink-2, #3f4650); }
.account-empty p { margin: 0 0 8px; }
.account-empty .btn { margin-top: 12px; }

/* Sipariş tablosu */
.account-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.account-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.account-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--account-mut, #5f6672); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line, #e9e6e0); white-space: nowrap; }
.account-table td { padding: 14px 10px; border-bottom: 1px solid var(--line, #e9e6e0); vertical-align: middle; }
.account-table tr:last-child td { border-bottom: 0; }
.account-order-no { font-weight: 700; color: var(--ink, #0e1116); text-decoration: none; font-variant-numeric: tabular-nums; }
.account-order-no:hover { color: var(--red, #d23a5c); }
.account-cargo { display: block; margin-top: 4px; }
.account-badge-test { background: #fff4e0; color: #9a5b00; }
@media (max-width: 760px) {
  .account-table thead { display: none; }
  .account-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--line, #e9e6e0); }
  .account-table tr:last-child { border-bottom: 0; }
  .account-table td { display: block; padding: 0; border: 0; }
  .account-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--account-mut, #5f6672); margin-bottom: 2px; }
  .account-table td[data-label=""]::before { display: none; }
  .account-table td[data-label=""] { grid-column: 1 / -1; }
  .account-table td[data-label=""] .btn { width: 100%; }
}

/* Durum rozeti (sipariş ve yorum) */
.account-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef0f3; color: var(--ink-2, #3f4650); white-space: nowrap; }
.account-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.account-status.st-odeme_bekliyor, .account-status.st-inceleme, .account-status.st-bekliyor { background: #fff4e0; color: #9a5b00; }
.account-status.st-odendi, .account-status.st-hazirlaniyor, .account-status.st-onayli { background: #e6f4ec; color: #157a4d; }
.account-status.st-kargolandi { background: #e8f0fe; color: #1f5fbf; }
.account-status.st-teslim_edildi { background: #e6f4ec; color: #146c45; }
.account-status.st-iptal, .account-status.st-red { background: var(--danger-soft, #fdecec); color: var(--danger, #c62828); }

/* Yorum listesi */
.account-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.account-reviews li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--line, #e9e6e0); font-size: 14px; }
.account-reviews li:last-child { border-bottom: 0; }
.account-reviews li > a { color: var(--ink, #0e1116); font-weight: 600; text-decoration: none; flex: 1 1 220px; }
.account-reviews li > a:hover { color: var(--red, #d23a5c); }
.account-stars { color: #f5a623; letter-spacing: 1px; font-size: 15px; }
.account-stars-off { color: var(--line, #e9e6e0); }

/* Kurumsal teklif */
.account-quote-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 960px) { .account-quote-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 40px; } }
.account-quote-info .account-benefits { margin-bottom: 24px; }
.account-quote-info .account-benefits li { font-size: 15px; }

/* Teşekkür */
.account-thanks { max-width: 680px; margin: 0 auto; background: var(--card, #fff); border: 1px solid var(--line, #e9e6e0); border-radius: var(--r-xl, 28px); padding: 36px 24px; text-align: center; }
@media (min-width: 640px) { .account-thanks { padding: 48px; } }
.account-thanks-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: #e6f4ec; color: var(--green, #1e8e5a); display: grid; place-items: center; }
.account-thanks .account-lead { font-size: 16px; }
.account-steps { text-align: left; margin: 8px auto 20px; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2, #3f4650); max-width: 520px; }
.account-thanks .account-form-actions { justify-content: center; margin-top: 20px; }

/* Klavye odağı */
.account-auth :focus-visible, .account-page :focus-visible { outline: 3px solid rgba(11, 99, 168, 0.35); outline-offset: 2px; }