/**
 * Hesap katmanı: misafir giriş penceresi ve oturum açıkken hesap menüsü.
 *
 * Pencere, Hızlı Bakış ailesini izler — aynı perde tonu, aynı yarıçap, aynı
 * kapatma düğmesi ve aynı yığın seviyesi. Form işaretlemesi WooCommerce'in
 * kendi `form-login.php` çıktısıdır; burada yalnız site tipografisine ve
 * düğme sistemine uydurulur.
 */

/*
 * Pencere sayfa geometrisi değil, sabit ölçülü bir örtüdür: `--dj-u` 1440'ın
 * altında küçülmeye devam ederken tipografi 0.75'te tabanlandığı için denetimler
 * sabit ölçü taşır. Aynı yaklaşım sitenin WooCommerce form kuralında da var
 * (`woocommerce.css`: sabit 52 px alan yüksekliği).
 *
 * 16 ve 14 için sitenin sabit tokenları kullanılır (`--dj-fs-16`, `--dj-fs-14`).
 * 28 ve 15 basamağında sabit token yok; bu iki değer bileşen içinde, aynı rem
 * ölçeğinde tanımlanır.
 */
:is(.dj-auth, .dj-account-auth) {
	--dj-auth-title: 1.625rem;    /* 26 */
	--dj-auth-intro: var(--dj-fs-14);
	--dj-auth-label: 0.9375rem;   /* 15 */
	--dj-auth-input: 0.9375rem;   /* 15 */
	--dj-auth-small: var(--dj-fs-14);
	--dj-auth-legal: 0.8125rem;   /* 13 */
	--dj-auth-field: 50px;
	--dj-auth-cta: 52px;

	/*
	 * Ritim değerleri: alan grupları arası, etiket → alan ve alanın iç yatay
	 * boşluğu. Varsayılanlar giriş penceresinin onaylı ölçüleridir; “Hesabım”
	 * sayfası aynı kurallara kendi değerleriyle bağlanır — kural kopyalanmaz.
	 */
	--dj-auth-gap: 17px;
	--dj-auth-label-gap: 7px;
	--dj-auth-pad: 18px;
}

.dj-auth {
	/*
	 * Pencere ana başlığın altından başlar: logo ve gezinme örtünün altında
	 * kalmaz. Değer JS ile gerçek başlık yüksekliğinden yazılır; JS yoksa
	 * token tabanlı yedek kullanılır (üst şerit + gezinme satırı).
	 */
	--dj-auth-offset: calc(var(--dj-header-height) + 30px);

	/*
	 * Optik merkez düzeltmesi. Göz, bir kutuyu kullanılabilir alanın geometrik
	 * merkezinde gördüğünde onu olduğundan aşağıda algılar; pencere bu yüzden
	 * merkezin 20 px üstüne oturur. Kayma, pencerenin altında gerçekten kalan
	 * boşluğun yarısıyla sınırlanır: alçak ekranlarda pencere yukarı taşıp
	 * logo/gezinme satırının altına girmez. 693 px = pencere yüksekliği (645)
	 * + alt/üst güvenlik boşluğu (48).
	 */
	--dj-auth-lift: min(20px, max(0px, calc((100dvh - var(--dj-auth-offset) - 693px) / 2)));

	position: fixed;
	inset: 0;
	z-index: var(--dj-z-drawer);
	display: flex;
	/*
	 * Pencere, **logo/gezinme satırının altında kalan alanın** optik merkezine
	 * oturur (bkz. `--dj-auth-lift`) ve logo hiçbir zaman örtünün altında
	 * kalmaz. Referans JS ile gerçek logo/menü alt sınırından okunur; JS yoksa
	 * token tabanlı yedek devreye girer.
	 */
	align-items: center;
	justify-content: center;
	padding-block: calc(var(--dj-auth-offset) + 24px) calc(24px + 2 * var(--dj-auth-lift));
	padding-inline: var(--dj-space-30);
}

.dj-auth[hidden] {
	display: none;
}

.dj-auth__backdrop {
	position: absolute;
	inset: 0;
	/* Giriş odaklı bir görev olduğu için perde Hızlı Bakış'tan bir tık koyu. */
	background: rgba(16, 18, 19, 0.5);
}

/*
 * Dış kutu site kart/panel yarıçapını kullanır (`--dj-card-radius` = 16 tasarım
 * px). Aşırı oval köşe yok; gölge ve kenarlık mevcut tokenlardan.
 *
 * `overflow: hidden` görselin dış köşeden kırpılmasını sağlar — görsele ayrı
 * yarıçap verilmez, iç birleşim çizgisi düz kalır. Uzun içerikte sağdaki
 * sütun kendi içinde kayar, görsel sabit durur.
 */
.dj-auth__dialog {
	position: relative;
	display: grid;
	/*
	 * Pencere sayfa geometrisi değil: `--dj-u` 1440'ın altında küçülmeye devam
	 * ederken tipografi 0.75'te tabanlandığı için kutu ve denetimler okunabilirlik
	 * tabanı taşır. Aynı yaklaşım sitenin WooCommerce form kuralında da var
	 * (`woocommerce.css`: sabit 52 px alan yüksekliği).
	 */
	width: min(420px, 100%);
	max-height: calc(100dvh - var(--dj-auth-offset) - 48px);
	/*
	 * Tek satırlık ızgara açıkça tanımlanır. `max-height` bir ızgara
	 * kabında satır ölçüsünü daraltmaz — yalnız kırpar; bu yüzden kısa
	 * görünümlerde panel kendi içeriği kadar uzayıp alt bandı (yasal
	 * metin + kayıt şeridi) kırptırıyordu. `minmax(0, 1fr)` satırı kabın
	 * yüksekliğine bağlar, panel de kendi içinde kaydırır.
	 */
	grid-template-rows: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-card-radius);
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
}

/* Görsel tanımlıysa iki sütun; tanımlı değilse tek sütun kalır. */
.dj-auth--split .dj-auth__dialog {
	width: min(1160px, 100%);
	/* Görsel ağırlıklı oran: sol sütun baskın, form kolonu ölçülü. */
	min-height: min(645px, calc(100dvh - var(--dj-auth-offset) - 48px));
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}

/*
 * Görsel sütunu pencere yüksekliğine katılmaz: `<img>` mutlak konumlanır,
 * satır yüksekliğini yalnız form sütunu belirler. Aksi hâlde dikey kaynak
 * kendi doğal oranıyla pencereyi gereksiz uzatıyordu (676 px).
 */
.dj-auth__media {
	position: relative;
	overflow: hidden;
	background: var(--dj-surface);
}

/*
 * Kaynak dikey (1122 × 1402); televizyon karenin üst yarısında. `cover` ile
 * kırpılırken odak yukarıda tutulur, aksi hâlde varsayılan merkez kadraj
 * ekranın üst yarısını kesiyordu.
 */
.dj-auth__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
}

/*
 * Pencere kabuğu etkileşimli bir denetim değil; açılışta odağı aldığı için
 * `:focus-visible` tüm modalın çevresine mavi halka çiziyordu. Halka yalnız
 * gerçekten odaklanan alan ve düğmelerde kalır — erişilebilirlik göstergesi
 * kaldırılmadı, doğru öğeye taşındı.
 */
.dj-auth__dialog:focus,
.dj-auth__dialog:focus-visible {
	outline: none;
}

/*
 * Panel ızgara satırının yüksekliğini aşmaz: `max-height: 100%` yüzde
 * olduğu için içerikten belirlenen satırda çözülemiyor, panel kendi
 * içeriği kadar uzuyor ve pencerenin `overflow: hidden` kırpması alt
 * bandı (yasal metin + “Hesabınız yok mu? Üye Ol”) görünmez kılıyordu —
 * kısa görünümlerde (≈700 px ve altı) bant tamamen kayboluyordu.
 *
 * `min-height: 0` ızgara öğesinin satıra küçülmesine izin verir; böylece
 * kendi `overflow-y: auto` kaydırması devreye girer. Ortalama `safe` ile
 * yazılır: içerik sığdığında bugünkü ortalı yerleşim aynen korunur,
 * sığmadığında üst kenardan kırpılmaz.
 */
.dj-auth__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	min-width: 0;
	min-height: 0;
	max-height: none;
	/*
	 * Masaüstü ve tablette pencere görünüme sığdığı için panelin kendi
	 * kaydırması yoktur; kaydırma yalnız 767 ve altında açılır.
	 */
	overflow-y: auto;
	padding: 40px;
}

/*
 * Form sağ panelin tamamına yayılmaz: okunabilir bir ölçüde kalıp panel
 * içinde ortalanır. Kapatma düğmesi mutlak konumlu olduğu için etkilenmez.
 */
.dj-auth__panel > *:not(.dj-auth__close) {
	width: 100%;
	max-width: 450px;
	margin-inline: auto;
}

/* Başlık → giriş metni → form → yasal → kayıt: dikey ritim tek yerde. */
.dj-auth__intro {
	margin: 9px 0 0;
	font-size: var(--dj-auth-intro);
	font-weight: var(--dj-fw-regular);
	line-height: 1.5;
	color: var(--dj-muted);
}

.dj-auth__form {
	margin-top: 23px;
}

.dj-auth__legal {
	margin: 21px 0 0;
	padding-top: 17px;
	border-top: 1px solid var(--dj-line);
	font-size: var(--dj-auth-legal);
	line-height: 1.55;
	color: var(--dj-muted);
}

.dj-auth__legal a {
	color: var(--dj-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 180ms ease;
}

@media (hover: hover) {
	.dj-auth__legal a:hover {
		color: var(--dj-ink);
	}
}

.dj-auth__legal a:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-auth__close {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dj-surface);
	color: var(--dj-ink);
	cursor: pointer;
	transition: background-color var(--dj-transition);
}

.dj-auth__close svg {
	display: block;
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.dj-auth__close:hover {
		background: var(--dj-line);
	}
}

.dj-auth__close:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Başlık: 28 / 700 / 1.2 — büyük ama baskın değil. */
.dj-auth__title {
	font-size: var(--dj-auth-title);
	font-weight: var(--dj-fw-bold);
	color: var(--dj-ink);
	line-height: 1.2;
	margin: 0 50px 0 0;
}

.dj-auth__errors {
	margin-bottom: 18px;
	padding: 12px 16px;
	border: 1px solid var(--dj-red);
	border-radius: var(--dj-radius-md);
	background: rgba(188, 0, 0, 0.06);
	color: var(--dj-red);
	font-size: var(--dj-fs-14);
	line-height: 1.45;
}

.dj-auth__errors p {
	margin: 0;
}

.dj-auth__errors p + p {
	margin-top: calc(6 * var(--dj-u));
}

/* WooCommerce hata metni içinde bağlantı taşıyabilir. */
.dj-auth__errors a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- WooCommerce form işaretlemesinin site diline uydurulması --- */

/*
 * Form işaretlemesi WooCommerce'indir: “beni hatırla” ile gönder düğmesi aynı
 * `<p class="form-row">` içinde, “parolanızı mı unuttunuz?” ise ayrı bir
 * paragrafta gelir. Şablon kopyalanmadan istenen dikey sırayı kurmak için o
 * paragraf `display: contents` ile saydamlaştırılır ve dört öğe formun
 * ızgarasına açık satır/sütunlarla yerleşir:
 *
 *   1  kullanıcı adı        (tam genişlik)
 *   2  parola               (tam genişlik)
 *   3  beni hatırla | parolanızı mı unuttunuz?
 *   4  giriş yap            (tam genişlik)
 */
:is(.dj-auth, .dj-account-auth) .woocommerce-form-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	/*
	 * Satır aralığı ızgaranın kendi boşluğundan gelir, satır başına margin'den
	 * değil: kayıt formuyla aynı mekanizma, ve genel WooCommerce `.form-row`
	 * margin sıfırlamaları bu ritmi ezemiyor.
	 */
	row-gap: var(--dj-auth-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form-login > .form-row-first {
	grid-area: 1 / 1 / 2 / -1;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form-login > .form-row-last {
	grid-area: 2 / 1 / 3 / -1;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form-login > .form-row:not(.form-row-first):not(.form-row-last) {
	display: contents;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form-login > .lost_password {
	grid-area: 3 / 2 / 4 / 3;
	justify-self: end;
	align-self: center;
}

:is(.dj-auth, .dj-account-auth) .form-row {
	display: grid;
	gap: var(--dj-auth-label-gap);
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
}

/*
 * WooCommerce'in **genel** form kuralları, `woocommerce` gövde sınıfı taşıyan
 * her sayfada (ürün, arşiv, sepet) bu pencereye de ulaşıyor ve onaylı
 * yerleşimi bozuyordu:
 *
 *   woocommerce.css         .woocommerce form.login
 *                           → 1 px çerçeve + 20 px iç boşluk + 2em margin
 *   woocommerce-layout.css  .woocommerce form .form-row-first / -last
 *                           → width: 47%
 *
 * Her ikisi de (0,2,1). Yukarıdaki tema kuralları (0,2,0) / (0,1,1) olduğu
 * için kaybediyorlardı; burada aynı özellikler bir sınıf yukarıdan yeniden
 * yazılır. `!important` yok, genel seçici yok — kapsam yalnız giriş
 * penceresi ve hesap sayfasının kimlik bloğu.
 *
 * Anasayfada gövdede `woocommerce` sınıfı olmadığı için sorun görünmüyordu;
 * bu yüzden düzeltme de gövde sınıfına bakmaz, her sayfada aynı sonucu verir.
 */
:is(.dj-auth, .dj-account-auth) form.woocommerce-form.woocommerce-form-login,
:is(.dj-auth, .dj-account-auth) form.woocommerce-form.woocommerce-form-register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form .form-row,
:is(.dj-auth, .dj-account-auth) .woocommerce-form .form-row-first,
:is(.dj-auth, .dj-account-auth) .woocommerce-form .form-row-last {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

:is(.dj-auth, .dj-account-auth) .form-row label {
	font-size: var(--dj-auth-label);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

:is(.dj-auth, .dj-account-auth) .form-row .required {
	color: var(--dj-red);
	text-decoration: none;
}

:is(.dj-auth, .dj-account-auth) .input-text {
	box-sizing: border-box;
	width: 100%;
	/* `woocommerce.css` ile aynı: 52 yükseklik, 12/18 iç boşluk, 16 punto. */
	min-height: var(--dj-auth-field);
	padding: 12px var(--dj-auth-pad);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
	color: var(--dj-ink);
	font-size: var(--dj-auth-input);
	font-family: inherit;
	transition: border-color var(--dj-transition);
}

/*
 * Odak halkası alanın kenarına oturur (`outline-offset: -1px`): kenarlıkla
 * ikinci bir çizgi oluşturmaz, erişilebilirlik göstergesi korunur.
 */
:is(.dj-auth, .dj-account-auth) .input-text:focus {
	border-color: var(--dj-focus);
	outline: none;
}

:is(.dj-auth, .dj-account-auth) .input-text:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: -1px;
}

/* Parola alanı + görünürlük düğmesi (işaretleme JS ile eklenir). */
.dj-auth__control {
	position: relative;
	display: block;
}

.dj-auth__control .input-text {
	padding-inline-end: 50px;
}

/*
 * Düğme alanın yüksekliğine hizalanır, sarmalayıcının tamamına değil:
 * WooCommerce'in parola gücü göstergesi aynı sarmalayıcıya, alanın altına
 * eklendiğinde düğme onun üzerine yayılmamalı.
 */
.dj-auth__reveal {
	position: absolute;
	inset-block-start: 0;
	height: var(--dj-auth-field);
	inset-inline-end: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dj-muted);
	cursor: pointer;
	transition: color var(--dj-transition);
}

.dj-auth__reveal svg {
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.dj-auth__reveal:hover {
		color: var(--dj-ink);
	}
}

.dj-auth__reveal:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* “Beni hatırla” satırı ile gönder düğmesi aynı form-row içinde gelir. */
/* `:is(.dj-auth, .dj-account-auth) .form-row label` (0,2,1) kuralını ezmesi için sınıf da yazılır. */
:is(.dj-auth, .dj-account-auth) .form-row label.woocommerce-form-login__rememberme {
	grid-area: 3 / 1 / 4 / 2;
	align-self: center;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--dj-auth-small);
	font-weight: var(--dj-fw-regular);
	color: var(--dj-ink);
	cursor: pointer;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form__input-checkbox {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--dj-ink);
}

/*
 * Gönder düğmesi birincil koyu düğme ailesinde: hover ve klavye odağında
 * beyaz zemin, koyu metin, görünür 1 px koyu kenarlık. Kenarlık normalde de
 * vardır (zeminle aynı renk) — kutu ölçüsü durumlar arasında değişmez.
 */
:is(.dj-auth, .dj-account-auth) .woocommerce-form-login__submit,
.dj-account-auth .woocommerce-form-register__submit {
	box-sizing: border-box;
	width: 100%;
	grid-area: 4 / 1 / 5 / -1;
	min-height: var(--dj-auth-cta);
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--dj-ink);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-family: inherit;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-bold);
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

:is(.dj-auth, .dj-account-auth) .woocommerce-form-login__submit:focus-visible,
.dj-account-auth .woocommerce-form-register__submit:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
	border-color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

@media (hover: hover) {
	:is(.dj-auth, .dj-account-auth) .woocommerce-form-login__submit:hover,
	.dj-account-auth .woocommerce-form-register__submit:hover {
		background: var(--dj-white);
		color: var(--dj-ink);
		border-color: var(--dj-ink);
	}
}

:is(.dj-auth, .dj-account-auth) .lost_password {
	font-size: var(--dj-auth-small);
	color: var(--dj-muted);
	white-space: nowrap;
}

:is(.dj-auth, .dj-account-auth) .lost_password a,
.dj-auth__register a,
.dj-account-auth__back-link {
	color: var(--dj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	:is(.dj-auth, .dj-account-auth) .lost_password a:hover,
	.dj-auth__register a:hover,
	.dj-account-auth__back-link:hover {
		color: var(--dj-muted);
	}
}

:is(.dj-auth, .dj-account-auth) .clear {
	display: none;
}

/*
 * Kayıt satırı: “Parolanızı mı unuttunuz?”un altında, ince ayraçtan sonra,
 * ortalı. Gövde muted/regular, bağlantı 600 ve alt çizgili — hover'da yalnız
 * renk değişir, kalınlık ve alt çizgi sabit kaldığı için satır kaymaz.
 */
.dj-auth__register {
	margin: 21px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--dj-line);
	font-size: var(--dj-auth-small);
	font-weight: var(--dj-fw-regular);
	color: var(--dj-muted);
	text-align: center;
}

.dj-auth__register-link {
	margin-inline-start: 4px;
	font-size: var(--dj-auth-small);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 180ms ease;
}

@media (hover: hover) {
	.dj-auth__register-link:hover {
		color: var(--dj-muted);
	}
}

.dj-auth__register-link:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Kayıt formuna atlamak için görünmez çapa. */
.dj-anchor {
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: calc(var(--dj-header-height) + 24px);
}

/* ------------------------------------------------------------------ */
/* Oturum açıkken hesap menüsü                                         */
/* ------------------------------------------------------------------ */

/*
 * Üst şerit açılırlarıyla aynı aile: beyaz yüzey, aynı yarıçap ve gölge,
 * tetikleyicinin altına hizalı. Panel konumlandırılmış olduğu için başlık
 * yüksekliğini ve sayfa akışını etkilemez.
 */
.dj-account {
	position: relative;
	display: inline-flex;
}

.dj-account__trigger {
	border: 0;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}

.dj-account__panel {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-end: 0;
	z-index: var(--dj-z-header);
	/*
	 * Sabit, kompakt ölçü: başlık ikonları gibi okunabilirlik tabanı taşır;
	 * önceki akışkan ölçü (`--dj-u`) 1470'te 184 px / 12 px yazıya iniyor,
	 * 1920'de büyüyordu.
	 */
	width: 250px;
	max-width: calc(100vw - 2 * var(--dj-page-padding));
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--dj-line);
	border-radius: 16px;
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
	color: var(--dj-ink);
	font-family: var(--dj-font);
}

.dj-account__panel[hidden] {
	display: none;
}

.dj-account__greeting {
	margin: 0;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--dj-line);
	font-size: var(--dj-fs-15);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.3;
	color: var(--dj-ink);
	overflow-wrap: anywhere;
}

.dj-account__list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

.dj-account__item a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	color: var(--dj-ink);
	font-size: var(--dj-fs-15);
	font-weight: var(--dj-fw-regular);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--dj-transition);
}

@media (hover: hover) {
	.dj-account__item a:hover {
		background: var(--dj-surface);
		color: var(--dj-ink);
	}
}

.dj-account__item a:focus-visible {
	background: var(--dj-surface);
	outline: 2px solid var(--dj-focus);
	outline-offset: -2px;
}

/* Çıkış son öğedir; üstünde listeyi ayıran ince çizgi, satır ölçüsü aynı. */
.dj-account__item--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--dj-line);
}

.dj-account__item--customer-logout a {
	font-weight: var(--dj-fw-medium);
}

/* ------------------------------------------------------------------ */
/* Dar ekran                                                           */
/* ------------------------------------------------------------------ */

/*
 * 1024'ün altında iki sütun zorlanmaz: görsel üstte kısa bir editoryal şerit
 * olur, form ana içerik olarak öne geçer.
 */
/* Tablet: görselin payı küçülür, form ağırlık kazanır. */
@media (max-width: 1199px) {
	.dj-auth--split .dj-auth__dialog {
		width: min(920px, 100%);
		/* Tabletde yükseklik içerikten gelir; görsel sliver'a dönüşmez. */
		min-height: 0;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.dj-auth__panel {
		padding: 36px;
	}
}

/* 1024'ün altında iki sütun zorlanmaz; görsel üstte kısa şerit olur. */
@media (max-width: 1023px) {
	.dj-auth {
		--dj-auth-title: 1.5rem; /* 24 */
	}

	.dj-auth__dialog,
	.dj-auth--split .dj-auth__dialog {
		width: min(480px, 100%);
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
	}

	.dj-auth__media {
		height: 150px;
	}

	.dj-auth__panel {
		padding: 32px;
	}

	.dj-auth__title {
		margin-inline-end: 48px;
	}
}

@media (max-width: 767px) {
	.dj-auth {
		--dj-auth-title: 1.375rem; /* 22 */
		/* Dokunma alanı 44'ün altına inmez. */
		--dj-auth-field: 50px;
		--dj-auth-cta: 52px;

		/*
		 * Ortak mobil yüzey ailesi (`--dj-sheet-*`, header.css): favoriler,
		 * Hızlı Bakış, filtre ve gezinme panelleriyle aynı dış pencere —
		 * yan/alt boşluk, üstte yönetim çubuğu payı + boşluk, tam yükseklik,
		 * yarıçap, gölge ve perde. İçerik pencerenin üstünden başlar; uzarsa
		 * yalnız panel kendi içinde kayar.
		 */
		padding-block: calc(var(--dj-sheet-safe-top) + var(--dj-sheet-gap)) var(--dj-sheet-gap);
		padding-inline: var(--dj-sheet-gap);
		align-items: stretch;
	}

	.dj-auth__backdrop {
		background: var(--dj-overlay);
	}

	.dj-auth__dialog,
	.dj-auth--split .dj-auth__dialog {
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: 100%;
		border: 0;
		border-radius: var(--dj-sheet-radius);
		box-shadow: var(--dj-shadow-lg);
	}

	/* Favoriler/filtre/gezinme panelindeki kapatma düğmesiyle aynı çerçeve ve konum. */
	.dj-auth__close {
		inset-block-start: 12px;
		inset-inline-end: calc(var(--dj-space-20) - 11px);
		width: 44px;
		height: 44px;
		border: 1px solid var(--dj-line);
		background: var(--dj-white);
	}

	/* Mobilde içerik görünümden uzun olabilir; panel kendi içinde kaydırır. */
	.dj-auth__panel {
		overflow-y: auto;
	}

	/* Dar ekranda “beni hatırla” ile “parolanızı mı unuttunuz?” alt alta. */
	.dj-auth .woocommerce-form-login {
		grid-template-columns: minmax(0, 1fr);
	}

	.dj-auth .form-row label.woocommerce-form-login__rememberme {
		grid-area: 3 / 1 / 4 / -1;
	}

	.dj-auth .woocommerce-form-login > .lost_password {
		grid-area: 4 / 1 / 5 / -1;
		justify-self: start;
		margin-top: 10px;
		white-space: normal;
	}

	.dj-auth .woocommerce-form-login__submit {
		grid-area: 5 / 1 / 6 / -1;
	}

	/*
	 * Masaüstündeki marka görseli (aynı `.dj-auth__media` / `dijitsu_login_image_id()`
	 * görseli) formun üstünde bir şerit olur: [görsel] / [form]. Pencere
	 * dikey esnek kutudur: form kendi gerçek yüksekliğini alır, pencerede
	 * kalan bütün yükseklik görsele gider (yüzde/sabit tavan yok); formun
	 * altında yalnız panelin alt boşluğu kalır. Görsel en az 100 px'tir;
	 * yer ondan da darsa form kendi içinde kayar. Görsel alanı `cover` ile
	 * doldurur, kadraj televizyon ve salonu tutar.
	 */
	.dj-auth__dialog,
	.dj-auth--split .dj-auth__dialog {
		display: flex;
		flex-direction: column;
	}

	.dj-auth__media {
		flex: 1 1 0;
		min-height: 100px;
	}

	/*
	 * Kapatma düğmesi pencereye göre konumlanır (panel konum bağlamı
	 * olmaz): görselin üstünde, diğer panellerdeki köşesinde kalır ve
	 * form kaydığında yerinden oynamaz.
	 */
	.dj-auth__panel {
		position: static;
		flex: 0 1 auto;
	}

	/*
	 * Seçici görseli şeride tam oturtur: WooCommerce'in `.woocommerce-page img
	 * { height: auto }` kuralı tek sınıflı seçiciyi eziyor, görsel doğal
	 * boyunda üstten kırpılıyordu (kadraj ayarı işlemiyordu).
	 */
	.dj-auth .dj-auth__media .dj-auth__image {
		height: 100%;
		object-position: 50% 30%;
	}

	/*
	 * Form: görselin altından 20 px ile başlar. Görsel eklendiği için dikey
	 * aralıklar sıkılır; alan ve düğme yükseklikleri, sıra ve metinler aynı.
	 */
	.dj-auth__panel {
		justify-content: flex-start;
		padding: 20px 20px 12px;
	}

	.dj-auth__intro {
		margin-top: 6px;
	}

	.dj-auth__form {
		margin-top: 16px;
	}

	.dj-auth .woocommerce-form-login {
		row-gap: 12px;
	}

	.dj-auth .woocommerce-form.woocommerce-form-login .form-row label {
		margin-bottom: 0;
		line-height: 20px;
	}

	.dj-auth .woocommerce-form-login > .lost_password {
		margin-block: 4px;
	}

	.dj-auth__legal {
		margin-top: 14px;
		padding-top: 12px;
	}

	.dj-auth__register {
		margin-top: 12px;
		padding-top: 10px;
	}

	.dj-account__panel {
		inset-inline-end: 0;
		min-width: 220px;
	}
}

/* ------------------------------------------------------------------ */
/* “Hesabım” misafir görünümü — sekmeli tek kolon                      */
/* ------------------------------------------------------------------ */

/*
 * Sayfa, pencerenin form dilini aynen kullanır (yukarıdaki kurallar iki kabuğa
 * birden bağlı). Burada yalnız sayfaya ait olan kurulur: merkezdeki dar kolon,
 * tipografik sekmeler ve kayıt formunun ritmi. İkinci bir form tasarım sistemi
 * yok; kart/kutu çizilmiyor.
 *
 * Sekme durumu tek bir yerden okunur: sarmalayıcıdaki `data-dj-tab`. İlk değeri
 * sunucu yazar (gönderim sonrası hâl), sonrasını sekme denetimi günceller.
 * Adres çapası DOM'da bir kimliğe karşılık gelmez; tarayıcının çapa kaydırması
 * bu yüzden hiç devreye girmez.
 */
.dj-account-auth {
	--dj-account-tab: 1.625rem;    /* 26 */
	--dj-account-col: 540px;

	/* Sayfa ölçüsü pencereden biraz geniş: ortak kurallar buradan okur. */
	--dj-auth-field: 56px;
	--dj-auth-cta: 54px;
	--dj-auth-gap: 23px;
	--dj-auth-label-gap: 10px;
	--dj-auth-pad: 19px;
	--dj-auth-legal: var(--dj-fs-14);

	/*
	 * Kolon ana kabın ortasına oturur (`margin-inline: auto`), görünümün değil:
	 * geniş ekranda optik merkez kabuğun merkeziyle aynı kalır.
	 * Üst boşluk sayfa ritmi tokenından gelir; auth'a özel değer üretilmedi.
	 * Alt boşluk güven bandının kendi `--dj-space-100` üst boşluğuna bırakılır.
	 */
	width: min(var(--dj-account-col), 100%);
	margin-inline: auto;
	margin-block: var(--dj-space-40) var(--dj-space-20);
}

/*
 * Sekmeler: yalnız renk ile durum; kutu, pill, alt çizgi yok. İki sekme de her
 * durumda 700 ağırlıkta olduğu için aktiflik değiştiğinde satır kaymaz.
 */
.dj-account-auth__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 36px;
	margin-bottom: 31px;
}

/*
 * Sekme bir düğmedir; tarayıcının düğme varsayılanları sıfırlanır. İki sekme de
 * her durumda 700 ağırlıkta olduğu için aktiflik değişince metin kutusu
 * genişlemez: satır, X konumları ve aralık sabit kalır.
 */
.dj-account-auth__tab {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--dj-account-tab);
	font-weight: var(--dj-fw-bold);
	line-height: 1.2;
	color: var(--dj-muted);
	text-decoration: none;
	cursor: pointer;
	transition: color 180ms ease;
}

@media (hover: hover) {
	.dj-account-auth__tab:hover {
		color: var(--dj-ink);
	}
}

.dj-account-auth__tab:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 4px;
	border-radius: var(--dj-radius-sm);
}

/*
 * Panel başlığı yalnız JavaScript kapalıyken görünür: o durumda sekmeler
 * anlamsız olduğu için iki panel de kendi adıyla açık kalır
 * (bkz. şablondaki `<noscript>`).
 */
.dj-account-auth__heading {
	display: none;
	margin: 0 0 26px;
	font-size: var(--dj-account-tab);
	font-weight: var(--dj-fw-bold);
	line-height: 1.2;
	color: var(--dj-ink);
}

/*
 * Varsayılan: yalnız etkin panel açık. Durum `data-dj-tab` ile taşınır —
 * adres çapası DOM'da bir hedefe karşılık gelmediği için tarayıcının kendi
 * çapa kaydırması hiç devreye girmez.
 */
.dj-account-auth__panel {
	display: none;
}

.dj-account-auth[data-dj-tab="giris-yap"] > [data-dj-panel="giris-yap"],
.dj-account-auth[data-dj-tab="uye-ol"] > [data-dj-panel="uye-ol"] {
	display: block;
}

.dj-account-auth[data-dj-tab="giris-yap"] [data-dj-tab-link="giris-yap"],
.dj-account-auth[data-dj-tab="uye-ol"] [data-dj-tab-link="uye-ol"] {
	color: var(--dj-ink);
}

/*
 * Açıklama satırı: iki metin de aynı ızgara gözünde durur. Etkin olmayan metin
 * yalnız görünmez olur (`visibility`), yer kaplamayı sürdürür — satırın
 * yüksekliği her görünümde uzun metne göre belirlenir ve sekme değişince
 * formun başlangıcı yerinden oynamaz.
 */
.dj-account-auth__intros {
	display: grid;
	margin-bottom: 37px;
}

.dj-account-auth__intros > .dj-account-auth__intro {
	grid-area: 1 / 1;
}

.dj-account-auth[data-dj-tab="giris-yap"] [data-dj-intro="uye-ol"],
.dj-account-auth[data-dj-tab="uye-ol"] [data-dj-intro="giris-yap"] {
	visibility: hidden;
}

/* Açıklama: sekmeler ile formun arasında, ortalı ve okunur bir ölçüde. */
.dj-account-auth__intro {
	max-width: 520px;
	margin: 0 auto;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-regular);
	line-height: 1.5;
	color: var(--dj-muted);
	text-align: center;
	/* İki satıra düşerse satırlar dengeli bölünür, tek kelime alta sarkmaz. */
	text-wrap: balance;
}

/*
 * Parola sıfırlama ekranları (isteme ve yeni parola) sekmesizdir: tek panel
 * her zaman açıktır ve panelin kendi başlığı görünür. Geometri, tipografi,
 * alan ve düğme kuralları ortak `.dj-account-auth` bileşeninden gelir —
 * burada yalnız sekmeli düzenin iki varsayılanı (gizli başlık, kapalı panel)
 * bu bağlam için açılır. Yinelenen form/ölçü kuralı yazılmaz.
 */
.dj-account-auth--single > .dj-account-auth__panel--single {
	display: block;
}

/*
 * Başlık `.dj-entry__content` içindeki genel `h2` ritminden bir üst boşluk
 * miras alıyordu (1.4em → 1440'ta 33,6 px). Sekmeli ekranda başlık gizli
 * olduğu için görünmüyordu; burada görünür olduğu an ilk içerik satırını
 * referans ekranın sekme satırının bir kademe altına itiyordu. Üst boşluk
 * sıfırlanır: ilk görünür içerik, kabuğun kendi iç boşluğunda başlar —
 * “Hesabım” ekranındaki sekme satırıyla aynı Y.
 */
.dj-account-auth--single .dj-account-auth__heading {
	display: block;
	margin-block-start: 0;
	text-align: center;
}

/*
 * Tek açıklama olduğu için ızgara gözü yığma yapmaz; ölçü ve alt boşluk
 * sekmeli ekranla aynı kalır.
 */
.dj-account-auth--single .dj-account-auth__intros {
	margin-bottom: 30px;
}

/*
 * Sıfırlama formları giriş/kayıt formlarıyla aynı dikey ritmi kullanır:
 * alanlar arası `--dj-auth-gap`, tam genişlik ızgara.
 */
.dj-account-auth .woocommerce-ResetPassword {
	display: grid;
	gap: var(--dj-auth-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

.dj-account-auth .woocommerce-ResetPassword > .form-row {
	margin: 0;
}

/* Giriş formundaki gönder satırıyla aynı üst boşluk. */
.dj-account-auth__submit-row {
	margin-block-start: calc(var(--dj-auth-gap) - 6px);
}

/*
 * Giriş formuna dönüş bağlantısı: “Hesabınız yok mu? Üye Ol” şeridiyle aynı
 * çizgi dili — üstte ince ayırıcı, ortalı, ikincil ağırlık.
 */
.dj-account-auth__back {
	margin: 21px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--dj-line);
	font-size: var(--dj-auth-small);
	color: var(--dj-muted);
	text-align: center;
}

/*
 * Dönüş bağlantısı kendi stilini taşımaz: renk, alt çizgi, kalınlık ve
 * hover davranışı yukarıdaki ortak ikincil kimlik bağlantısı kuralından
 * (“Parolanızı mı unuttunuz?” ile aynı) gelir. Burada yalnız odak halkası
 * ve satır içi punto mirası kalır.
 */
.dj-account-auth__back-link:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/*
 * Kayıt formu giriş formuyla aynı dikey ritmi kullanır: alanlar arası 17,
 * yasal metin ile düğme de aynı aralıkta. Izgara, alanların tam genişlik
 * kalmasını garanti eder.
 */
.dj-account-auth .woocommerce-form-register {
	display: grid;
	gap: var(--dj-auth-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

/* Gizlilik metni ile düğme arasında bir tık daha nefes. */
.dj-account-auth .woocommerce-form-register > .form-row:last-child {
	margin-top: 5px;
}

.dj-account-auth .woocommerce-form-register > p {
	margin: 0;
}

/*
 * WooCommerce'in sipariş kaynağı alanları (`<wc-order-attribution-inputs>`)
 * yalnız gizli input taşır ama ızgarada boş bir satır açıp ritmi bozuyordu.
 * Öğe akıştan çıkarılır, içindeki alanlar olduğu gibi gönderilmeye devam eder.
 */
.dj-account-auth .woocommerce-form-register > wc-order-attribution-inputs {
	display: contents;
}

/* WooCommerce'in gizlilik metni: 13 punto, muted, rahat satır yüksekliği. */
.dj-account-auth__legal p {
	margin: 0;
	font-size: var(--dj-auth-legal);
	line-height: 1.6;
	color: var(--dj-muted);
}

.dj-account-auth__legal a {
	color: var(--dj-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 180ms ease;
}

@media (hover: hover) {
	.dj-account-auth__legal a:hover {
		color: var(--dj-ink);
	}
}

.dj-account-auth__legal a:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Bildirim kabı sekmelerle formun arasında; boşken yer kaplamaz. */
.dj-account-auth > .woocommerce-notices-wrapper {
	display: block;
	margin-bottom: 24px;
}

.dj-account-auth > .woocommerce-notices-wrapper:empty {
	margin-bottom: 0;
}

/*
 * Yol izi sitenin ortak bileşenidir; bu görünümde ona özel kural yok — kategori
 * sayfasıyla aynı ölçü, renk, ayraç ve alt boşluk geçerli.
 */
.dj-entry--auth .dj-entry__header {
	margin: 0;
}

.dj-entry--auth .dj-entry__content {
	max-width: none;
}


/*
 * Genel WooCommerce kurallarının bu sayfada devre dışı bırakılması.
 *
 * “Hesabım” içeriği `.woocommerce` kabuğunun içinde çizildiği için iki genel
 * kural kümesi forma da uzanıyor: WooCommerce eklentisinin `form.login` /
 * `form.register` kutusu (gri çerçeve + iç boşluk) ve temanın `woocommerce.css`
 * içindeki genel alan/etiket kuralı. İkisi de element seçici taşıdığı için
 * yukarıdaki ortak form katmanını özgüllükte geçiyor.
 *
 * Burada yeni bir form dili kurulmaz: değerler yine ortak katmanın kendi
 * tokenlarıdır (`--dj-auth-*`). Kurallar yalnız `.dj-account-auth` içinde
 * geçerli — ödeme ve diğer WooCommerce sayfaları etkilenmez.
 */
.dj-account-auth .woocommerce-form.login,
.dj-account-auth .woocommerce-form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/*
 * WooCommerce, `form-row-first` / `form-row-last` sınıflarını “yan yana iki
 * sütun” anlamında kullanır (`width: 47%; float: left`). Buradaki ızgara
 * satırları tam genişlik kullanıyor; genişlik ve kayma sıfırlanır, dikey
 * boşluk yine ortak katmanın ritminden gelir.
 */
.dj-account-auth .woocommerce-form .form-row {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

.dj-account-auth .woocommerce-form .form-row input.input-text {
	min-height: var(--dj-auth-field);
	padding: 12px var(--dj-auth-pad);
	font-size: var(--dj-auth-input);
}

/* Göz düğmesinin altına giren metni engeller (ortak katmandaki kuralın eşi). */
.dj-account-auth .woocommerce-form .form-row .dj-auth__control input.input-text {
	padding-inline-end: 50px;
}

.dj-account-auth .woocommerce-form .form-row label {
	margin-bottom: 0;
	font-size: var(--dj-auth-label);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

/* “Beni hatırla” yine küçük ve normal ağırlıkta kalır. */
.dj-account-auth .woocommerce-form .form-row label.woocommerce-form-login__rememberme {
	font-size: var(--dj-auth-small);
	font-weight: var(--dj-fw-regular);
}


/*
 * WooCommerce'in parola gücü göstergesi ve ipucu. Kayıt düğmesi parola yeterli
 * güce ulaşana kadar WooCommerce tarafından pasif tutulur; bu yüzden pasif
 * durumun da görünür bir karşılığı olmalı.
 */
.dj-account-auth .woocommerce-form .woocommerce-password-strength,
.dj-account-auth .woocommerce-form .woocommerce-password-hint {
	display: block;
	margin-top: 8px;
	padding: 0;
	border: 0;
	/* Eklentinin renkli kutusu yerine düz metin — sitede kutu dili yok. */
	background: none;
	font-size: var(--dj-auth-legal);
	line-height: 1.5;
	text-align: start;
}

.dj-account-auth .woocommerce-form .woocommerce-password-hint {
	color: var(--dj-muted);
}

.dj-account-auth .woocommerce-form .woocommerce-password-strength {
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-muted);
}

.dj-account-auth .woocommerce-form .woocommerce-password-strength.short,
.dj-account-auth .woocommerce-form .woocommerce-password-strength.bad {
	color: var(--dj-red);
}

.dj-account-auth .woocommerce-form .woocommerce-password-strength.good,
.dj-account-auth .woocommerce-form .woocommerce-password-strength.strong {
	color: var(--dj-ink);
}

/*
 * Kayıt düğmesi parola yeterli güce ulaşana kadar WooCommerce tarafından
 * pasif tutulur. Eklentinin `.disabled` kuralı `color: inherit` + `opacity: .5`
 * verdiği için metin zeminle aynı renge düşüp okunmaz oluyordu; pasif durum
 * burada okunur bir karşılığa kavuşur.
 */
/* Eklentinin kuralı `[disabled]` niteliğini de taşır; seçici ona göre yazıldı. */
.dj-account-auth .woocommerce-form .woocommerce-form-register__submit:disabled[disabled],
.dj-account-auth .woocommerce-form .woocommerce-form-register__submit.disabled {
	opacity: 1;
	border-color: var(--dj-line);
	background: var(--dj-line);
	color: var(--dj-muted);
	cursor: not-allowed;
}

@media (hover: hover) {
	.dj-account-auth .woocommerce-form .woocommerce-form-register__submit:disabled[disabled]:hover,
	.dj-account-auth .woocommerce-form .woocommerce-form-register__submit.disabled:hover {
		border-color: var(--dj-line);
		background: var(--dj-line);
		color: var(--dj-muted);
	}
}


/*
 * WooCommerce'in görünürlük düğmesi kendi ikonunu `::before` üzerinde bir
 * data-URI olarak taşır. Düğme devralınıp Dijitsu ikonu içine basıldığı için
 * eklentinin ikonu kapatılır — aksi hâlde alanda iki göz yan yana görünüyordu.
 * Düğmenin davranışı ve erişilebilir adı WooCommerce'te kalır.
 */
.dj-account-auth .woocommerce-form .show-password-input::before {
	content: none;
}

/*
 * Konum da ortak katmandaki değerlerle sabitlenir; eklentinin kendi
 * yerleşim kuralına (`right: .7em; top: 50%`) bağlı kalınmaz.
 */
.dj-account-auth .woocommerce-form .show-password-input {
	inset-block-start: 0;
	inset-inline-end: 6px;
	height: var(--dj-auth-field);
	transform: none;
}

/*
 * WooCommerce, gönderim sonrası bildirim kutusuna odağı taşır (`tabindex="-1"`).
 * Bu, ekran okuyucu için doğru davranış; ancak kutu etkileşimli bir denetim
 * olmadığından çevresindeki odak halkası hatayı bozuk gösteriyordu. Halka
 * kaldırılır, bildirim kendi rengi ve metniyle zaten ayırt edilir.
 */
.dj-account-auth > .woocommerce-notices-wrapper > [tabindex="-1"]:focus,
.dj-account-auth > .woocommerce-notices-wrapper > [tabindex="-1"]:focus-visible {
	outline: none;
}


/*
 * WooCommerce'in `.form-row` temizleyici sözde öğeleri (`::before` / `::after`)
 * ızgarada birer öğe sayılıp etiketin üstünde ve alanın altında birer boş
 * satır açıyordu: etiket → alan aralığı 10 px istenirken satır 20 px büyüyordu.
 * Yüzdürme kullanılmadığı için temizleyiciye gerek yok.
 */
.dj-account-auth .woocommerce-form .form-row::before,
.dj-account-auth .woocommerce-form .form-row::after {
	display: none;
}

/*
 * Gönder düğmesi: temanın genel WooCommerce düğme kuralı `--dj-button-height-sm`
 * (50 tasarım px, `--dj-u` ile küçülür) veriyor; auth formunda yükseklik
 * okunabilirlik tabanlı sabit ölçüdür (ortak katmandaki `--dj-auth-cta`).
 */
.dj-account-auth .woocommerce-form .woocommerce-form-login__submit,
.dj-account-auth .woocommerce-form .woocommerce-form-register__submit {
	min-height: var(--dj-auth-cta);
}

/*
 * Kayıt düğmesi görünümü giriş düğmesiyle paylaşır ama onun ızgara yerleşimini
 * paylaşmaz: giriş formunda düğme 4. satırdadır, kayıt formunda ise kendi
 * satırının tek öğesidir. Yerleşim devralınırsa satırın üstünde üç boş iz
 * açılıyordu (gizlilik metniyle düğme arası 28 yerine 58 px).
 */
.dj-account-auth .woocommerce-form .woocommerce-form-register__submit {
	grid-area: auto;
	margin: 0;
}

/*
 * Alt nefes: `.dj-main`'in genel alt boşluğu bu görünümde kaldırılır, böylece
 * formdan güven bandına kalan mesafe bandın kendi `--dj-space-100` üst boşluğu
 * artı kolonun küçük alt boşluğu kadar olur (1920'de 120, 1470'te 92 px).
 */
.woocommerce-account .dj-main:has(> .dj-entry--auth) {
	padding-block-end: 0;
}

@media (max-width: 767px) {
	.dj-account-auth {
		--dj-account-tab: 1.3125rem;   /* 21 */

		width: calc(100% - 32px);
		margin-block: var(--dj-space-40) var(--dj-space-20);
	}

	.dj-account-auth__tabs {
		flex-wrap: nowrap;
		gap: 28px;
		margin-bottom: 24px;
	}

	.dj-account-auth__intro {
		margin-bottom: 28px;
	}
}

/* ------------------------------------------------------------------ */
/* Giriş / kayıt ana düğmesi                                           */
/* ------------------------------------------------------------------ */

/*
 * Sitenin ters çevirme standardı: normalde siyah zemin / beyaz metin,
 * hover ve odakta beyaz zemin / siyah metin. Kenarlık normalde de vardır
 * (zeminle aynı renk), bu yüzden kutu ölçüsü değişmez — yükselme, gölge ve
 * ölçek yok. Ok hareketi genel CTA sisteminden gelir.
 *
 * Seçici tema uyumluluk kuralından (`.woocommerce button.button:hover`,
 * 0-3-1) bir kademe güçlüdür — `.button` sınıfı da seçiciye alınır; o dosya
 * bu dosyadan sonra yükleniyor ve eşit özgüllükte kazanırdı.
 * Sekme başlıkları bu kuralın dışındadır.
 */
.dj-account-auth button.button.woocommerce-form-login__submit,
.dj-account-auth button.button.woocommerce-form-register__submit {
	border: 1px solid var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition);
}

@media (hover: hover) {
	.dj-account-auth button.button.woocommerce-form-login__submit:hover,
	.dj-account-auth button.button.woocommerce-form-register__submit:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
		transform: none;
		box-shadow: none;
	}
}

.dj-account-auth button.button.woocommerce-form-login__submit:focus-visible,
.dj-account-auth button.button.woocommerce-form-register__submit:focus-visible {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

/*
 * Dokunmatik genişlikte misafir görünümünün küçük hedefleri (sekmeler 25–31,
 * “Parolanızı mı unuttunuz?” 17, “Beni hatırla” 28, göz 38 px) 44 px'e çıkar.
 * Dolgu negatif kenar boşluğuyla dengelenir: görünüm ve satır konumları aynı
 * kalır, yalnız basılabilir alan büyür.
 */
@media (max-width: 1023px) {
	.dj-account-auth__tab {
		min-height: 44px;
		margin-block: calc((44px - 1.2em) / -2);
	}

	.dj-account-auth .lost_password a {
		display: inline-block;
		padding-block: 13px;
		margin-block: -13px;
	}

	.dj-account-auth .woocommerce-form .form-row label.woocommerce-form-login__rememberme {
		min-height: 44px;
		margin-block: -8px;
	}

	.dj-account-auth .dj-auth__reveal {
		width: 44px;
		inset-inline-end: 3px;
	}
}

/* ------------------------------------------------------------------ */
/* “Hesabım” oturum açık görünümü — gezinme + içerik                   */
/* ------------------------------------------------------------------ */

/*
 * Şablonlar WooCommerce'indir (`navigation.php`, `dashboard.php`, `orders.php`,
 * `my-address.php`, `form-edit-address.php`, `form-edit-account.php`); hiçbiri
 * kopyalanmadı. Uç nokta adresleri, formlar, nonce ve doğrulama olduğu gibi
 * kalır — burada yalnız sunum var.
 *
 * Önce eklentinin yerleşimi (30 % / 68 % yüzdürme, altı çizili liste) ve
 * `.dj-entry__content`'in 860 tasarım px'lik yazı ölçüsü içeriği 1440'ta sol
 * yarıya sıkıştırıyordu. Kapsam `:has(.woocommerce-MyAccount-navigation)`:
 * misafir görünümü ve diğer sayfalar etkilenmez.
 *
 * Denetim ölçüleri (satır 48, alan 52, düğme 50) auth formundaki gibi sabit
 * px'tir — `--dj-u` 1440'ta 0,75'e inerken okunabilirlik tabanı korunur.
 */
.woocommerce-account .dj-main:has(.woocommerce-MyAccount-navigation) {
	/* Auth görünümüyle aynı: alt nefes güven bandının kendi üst boşluğudur. */
	padding-block-end: 0;
}

/*
 * Görünür sayfa başlığı yok (singular.php: `dj-entry--account`); yol izinden
 * hesap düzenine olan mesafe yol izinin kendi alt payıdır — sepet ve misafir
 * hesap görünümüyle aynı ritim. Başlık kabının payı sıfırlanır.
 */
.dj-entry--account .dj-entry__header {
	margin: 0;
}

.woocommerce-account .dj-entry__content:has(.woocommerce-MyAccount-navigation) {
	max-width: none;
	line-height: var(--dj-lh-normal);
}

.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: max(240px, calc(320 * var(--dj-u))) minmax(0, 1fr);
	column-gap: max(40px, calc(80 * var(--dj-u)));
	align-items: start;
}

/* Eklentinin temizleyici sözde öğeleri ızgarada boş öğe sayılır. */
.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	font-size: var(--dj-fs-16);
	color: var(--dj-ink);
}

/* --- Gezinme --- */

/*
 * Masaüstünde dikey liste: satır 48 px, hover `--dj-surface` (başlıktaki hesap
 * menüsüyle aynı), etkin satır sitenin ters çevirme standardında (siyah zemin,
 * beyaz metin). Çıkış sonda, üstünde ayraç — hesap menüsüyle aynı sıra.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	position: relative;
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.dj-entry__content .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: var(--dj-radius-pill);
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-medium);
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--dj-transition), color var(--dj-transition);
}

@media (hover: hover) {
	.dj-entry__content .woocommerce-MyAccount-navigation a:hover {
		background: var(--dj-surface);
	}
}

.dj-entry__content .woocommerce-MyAccount-navigation a:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-entry__content .woocommerce-MyAccount-navigation .is-active a,
.dj-entry__content .woocommerce-MyAccount-navigation .is-active a:hover {
	background: var(--dj-ink);
	color: var(--dj-white);
	font-weight: var(--dj-fw-semibold);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--dj-line);
}

.dj-entry__content .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--dj-muted);
}

/* --- İçerik tipografisi --- */

.woocommerce-account .woocommerce-MyAccount-content > p {
	max-width: 72ch;
	margin: 0 0 16px;
	line-height: var(--dj-lh-relaxed);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--dj-ink);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.woocommerce-account .woocommerce-MyAccount-content :is(h2, h3) {
	margin: 0 0 20px;
	font-size: var(--dj-fs-28);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
}

/* --- Bildirimler ve boş durumlar --- */

/*
 * WooCommerce düğmeyi metnin bazen önüne (“E-posta adresini onayla”), bazen
 * arkasına (“Henüz bir sipariş verilmedi.”) koyuyor; esnek satırda ilk durumda
 * düğme üstte, metin altta kalıyordu. İki sütunlu ızgara + `order` ile düğme
 * her zaman sağda, metin solda okunur. İşaretleme ve bağlantılar değişmez.
 */
.woocommerce-account .woocommerce-MyAccount-content :is(div.woocommerce-info, div.woocommerce-message) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 16px;
	padding: 20px 24px;
	line-height: var(--dj-lh-normal);
}

.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button {
	order: 1;
	float: none;
	margin: 0;
	min-height: 44px;
	padding: 0 22px;
	font-size: var(--dj-fs-15);
	white-space: nowrap;
}

/* --- Siparişler / indirmeler tablosu --- */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	font-size: var(--dj-fs-15);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background: var(--dj-surface-2);
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	text-align: start;
	white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table :is(th, td) {
	padding: 16px 20px;
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-weight: var(--dj-fw-semibold);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button {
	min-height: 40px;
	margin: 4px 8px 4px 0;
	padding: 0 18px;
	font-size: var(--dj-fs-14);
}

.woocommerce-account .woocommerce-Pagination {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

/* --- Adresler --- */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}

/*
 * Eklentinin temizleyicileri (`.woocommerce .col2-set::before`,
 * `.woocommerce-account .addresses .title::before` — 0,3,1) ızgara ve esnek
 * satırda boş öğe olup başlığı kartın ortasına itiyordu; özgüllük onu geçer.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	float: none;
	width: auto;
	margin-top: 0;
	padding: 24px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-card-radius);
}

/* Gönderim kapalıyken tek adres sarmalayıcısız gelir. */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-Address {
	max-width: 520px;
	margin-top: 24px;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, h3) {
	float: none;
	margin: 0;
	font-size: var(--dj-fs-24);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	float: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
}

.woocommerce-account .woocommerce-MyAccount-content address {
	margin: 0;
	font-style: normal;
	line-height: var(--dj-lh-relaxed);
	color: var(--dj-muted);
}

/* --- Formlar: adres düzenleme ve hesap bilgileri --- */

/*
 * Eklentinin `form-row-first/last` yüzdürmesi (47 %) yerine iki sütunlu ızgara.
 * Sınıflar WooCommerce'in ülke betiği tarafından değiştirildiğinde (ör. posta
 * kodu satırı tam genişliğe geçer) yerleşim sınıfı izler.
 */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	max-width: 760px;
}

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > * {
	grid-column: 1 / -1;
}

.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .form-row-first {
	grid-column: 1;
}

.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .form-row-last {
	grid-column: 2;
}

.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > .clear {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row::before,
.woocommerce-account .woocommerce-MyAccount-content form .form-row::after {
	content: none;
}

/* Etiket dili auth formuyla aynı: 15 / 600, koyu. */
.woocommerce-account .woocommerce-MyAccount-content form .form-row label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9375rem;
	font-weight: var(--dj-fw-semibold);
	line-height: 1.4;
	color: var(--dj-ink);
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row label .optional {
	font-weight: var(--dj-fw-regular);
	color: var(--dj-muted);
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row :is(input.input-text, select, textarea) {
	width: 100%;
	color: var(--dj-ink);
	font-family: inherit;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row :is(input.input-text, select):focus-visible {
	border-color: var(--dj-focus);
	outline: 2px solid var(--dj-focus);
	outline-offset: -1px;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

/* Görünen ad açıklaması: italik değil, küçük ve ikincil. */
.woocommerce-account #account_display_name_description {
	display: block;
	margin-top: 8px;
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.woocommerce-account #account_display_name_description em {
	font-style: normal;
}

/*
 * Parola değiştirme grubu: tarayıcının çerçeveli `fieldset`'i yerine üstte tek
 * ayraç ve başlık. `legend` yüzdürülerek çizginin üstünden alınır.
 */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	min-width: 0;
	margin: 12px 0 0;
	padding: 28px 0 0;
	border: 0;
	border-top: 1px solid var(--dj-line);
}

.woocommerce-account .woocommerce-EditAccountForm legend {
	float: left;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
}

.woocommerce-account .woocommerce-EditAccountForm fieldset > .form-row {
	clear: both;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset > .form-row + .form-row {
	margin-top: 20px;
}

.woocommerce-account .woocommerce-EditAccountForm > p:not(.form-row),
.woocommerce-account .woocommerce-address-fields > p {
	margin: 8px 0 0;
}

.woocommerce-account .woocommerce-address-fields > p {
	margin-top: 28px;
}

.woocommerce-account .woocommerce-MyAccount-content form button.button[type="submit"] {
	min-height: 50px;
	padding: 0 32px;
}

/* --- Sipariş detayı (sipariş olduğunda) --- */

.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-order-details, .woocommerce-customer-details) {
	margin-top: 40px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses::after {
	content: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
}

/* ------------------------------------------------------------------ */
/* Parolamı unuttum / parola sıfırlama                                 */
/*                                                                     */
/* Sıfırlama isteği gönderildikten sonra WooCommerce formu değil, yalnız*/
/* bildirimi ve açıklamasını basar. O durumda kabuk da olmadığı için    */
/* içerik kabın tamamına yayılıyordu; aynı kimlik kolonuna çekilir —    */
/* genişlik değeri kabuğun kendi tokenından okunur, yeni ölçü           */
/* üretilmez.                                                           */
/* ------------------------------------------------------------------ */

.dj-entry--auth .dj-entry__content > .woocommerce:not(:has(.dj-account-auth)) {
	width: min(var(--dj-account-col, 540px), 100%);
	margin-inline: auto;
}

.dj-entry--auth .dj-entry__content > .woocommerce:not(:has(.dj-account-auth)) > p {
	margin: 16px 0 0;
	font-size: var(--dj-fs-15);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
	text-align: center;
	text-wrap: balance;
}

/*                                                                     */
/* Bu uç nokta artık misafir “Hesabım” ekranıyla **aynı**               */
/* `.dj-account-auth` kabuğunu kullanıyor: kolon genişliği, etiket ve   */
/* alan tipografisi, alan yüksekliği, odak durumu, CTA ve ritim ortak   */
/* bileşenden gelir. Buradaki gövde sınıfına bağlı kopya kural kümesi   */
/* (540 px kolon, 23 px aralık, 1.4 satır yüksekliği, 56/54 px ölçüler) */
/* kaldırıldı — aynı değerleri iki yerde tutmak ekranların ayrışmasına  */
/* yol açıyordu.                                                        */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Oturum açık görünüm — tablet ve mobil                               */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	/*
	 * Gezinme yatay hap şeridi olur (arşivdeki alt kategori şeridiyle aynı
	 * davranış): ekran kenarına kadar akar, parmakla kaydırılır, etkin hap
	 * `account.js` ile görünür tutulur. Sayfa yatay taşmaz — kaydırma listenin içinde.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 8px;
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		padding-block: 2px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--dj-page-padding);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: none;
	}

	.dj-entry__content .woocommerce-MyAccount-navigation a {
		min-height: 44px;
		padding: 0 18px;
		border: 1px solid var(--dj-line);
		font-size: var(--dj-fs-15);
		white-space: nowrap;
	}

	.dj-entry__content .woocommerce-MyAccount-navigation .is-active a {
		border-color: var(--dj-ink);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-content :is(h2, h3) {
		font-size: 1.375rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content :is(div.woocommerce-info, div.woocommerce-message) {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px 18px;
	}

	.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button {
		justify-self: stretch;
	}

	.woocommerce-account .woocommerce-Addresses,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
		padding: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, h3) {
		font-size: 1.25rem;
	}

	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > :is(.form-row-first, .form-row-last) {
		grid-column: 1;
	}

	.woocommerce-account .woocommerce-EditAccountForm legend {
		font-size: 1.25rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content form button.button[type="submit"] {
		width: 100%;
	}
}

/*
 * Eklentinin küçük ekran tablosu (≤768, `woocommerce-smallscreen.css`) satırları
 * kart gibi yığar ama `tbody th`'yi gizler — WooCommerce 9.5'ten beri sipariş
 * numarası `th` hücresinde olduğu için numara ve sipariş bağlantısı mobilde
 * kayboluyordu. Hücre geri getirilir, diğer hücrelerle aynı “başlık: değer”
 * düzenini alır.
 */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody th {
		display: block;
		text-align: right;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td) {
		padding: 10px 16px;
		border-top: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody th::before,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: var(--dj-fw-semibold);
		color: var(--dj-muted);
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody :is(td.order-actions, td.woocommerce-orders-table__cell-order-actions)::before {
		content: none;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr {
		padding-block: 8px;
		border-top: 1px solid var(--dj-line);
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr:first-child {
		border-top: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr:nth-child(2n) :is(th, td) {
		background: transparent;
	}
}

/* ================================================================== */
/* Hesap Merkezi V2 — oturum açık kabuk                                */
/* ================================================================== */

/*
 * Yol izinden sonra aynı kabuk her uç noktada sabit kalır:
 *   karşılama satırı (tam genişlik)
 *   [gezinme paneli 260 px] [içerik]
 * Yol izi → karşılama mesafesi yol izinin kendi alt payıdır (sepet ve misafir
 * hesap görünümüyle aynı ritim); burada yeni bir değer yazılmaz. Karşılama →
 * düzen aralığı mevcut dar ekran satır aralığıyla (28 px) aynıdır.
 */
.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	grid-template-columns: 260px minmax(0, 1fr);
	column-gap: 40px;
	row-gap: 28px;
}

/* --- Karşılama satırı --- */

.dj-account-welcome {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface-2);
}

.dj-account-welcome__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--dj-line);
	border-radius: 50%;
	background: var(--dj-white);
	color: var(--dj-ink);
}

.dj-account-welcome__icon svg {
	width: 24px;
	height: 24px;
}

.dj-account-welcome__body {
	min-width: 0;
}

.dj-account-welcome__title {
	margin: 0;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.3;
	color: var(--dj-ink);
	overflow-wrap: anywhere;
}

.dj-account-welcome__text {
	margin: 2px 0 0;
	font-size: var(--dj-fs-14);
	line-height: 1.45;
	color: var(--dj-muted);
}

/* --- Gezinme paneli --- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 8px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	gap: 2px;
}

.dj-entry__content .woocommerce-MyAccount-navigation a {
	min-height: 44px;
	padding: 0 16px;
	font-size: var(--dj-fs-15);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 8px;
}

/* --- Pano: başlık + hızlı erişim kartları --- */

.woocommerce-account .woocommerce-MyAccount-content .dj-account-dashboard__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: var(--dj-fw-bold);
	line-height: 1.25;
}

.woocommerce-account .woocommerce-MyAccount-content .dj-account-dashboard__lead {
	margin: 6px 0 20px;
	font-size: var(--dj-fs-15);
	line-height: 1.5;
	color: var(--dj-muted);
}

/* İçerik alanının genel liste girintisini ezmek için kabuk seçicisiyle. */
.woocommerce-account .woocommerce-MyAccount-content .dj-account-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-account-card {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	min-height: 84px;
	padding: 18px 20px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
	color: var(--dj-ink);
	text-decoration: none;
	transition: border-color var(--dj-transition), background-color var(--dj-transition);
}

@media (hover: hover) {
	.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link:hover {
		border-color: var(--dj-ink);
	}
}

.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-account-card__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--dj-surface);
	color: var(--dj-ink);
}

.dj-account-card__icon svg {
	width: 22px;
	height: 22px;
}

.dj-account-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dj-account-card__title {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.3;
}

.dj-account-card__text {
	font-size: var(--dj-fs-14);
	line-height: 1.45;
	color: var(--dj-muted);
}

.dj-account-card__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--dj-muted);
}

.dj-account-card__arrow svg {
	width: 16px;
	height: 16px;
}

[dir="rtl"] .dj-account-card__arrow svg {
	transform: scaleX(-1);
}

/* --- Tablet ve mobil: tek sütun, gezinme dikey liste (kaydırma yok) --- */

@media (max-width: 1023px) {
	.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px 8px;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.dj-entry__content .woocommerce-MyAccount-navigation a {
		border: 0;
		white-space: normal;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		grid-column: 1 / -1;
		margin-top: 6px;
		padding-top: 8px;
		border-top: 1px solid var(--dj-line);
	}
}

@media (max-width: 767px) {
	.dj-account-welcome {
		gap: 12px;
		padding: 14px 16px;
	}

	.dj-account-welcome__icon {
		width: 40px;
		height: 40px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .woocommerce-MyAccount-content .dj-account-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link {
		min-height: 72px;
		padding: 16px;
	}
}

/* ================================================================== */
/* Hesap Merkezi V2.1 — mobil açılır gezinme + mikro düzeltmeler       */
/* ================================================================== */

/* Masaüstü: karşılama ve kartlar birkaç px sıkılır; mimari aynı. */
.dj-account-welcome {
	padding-block: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link {
	min-height: 68px;
	padding-block: 16px;
}

/* Gezinme düğmesi yalnız mobilde ve betik hazırken görünür. */
.dj-account-navtoggle {
	display: none;
}

@media (max-width: 767px) {
	/*
	 * Ritim: yol izi → (kabuk payı) karşılama → 16 → gezinme → 24 → içerik.
	 * Izgara satır aralığı yerine öğe payları kullanılır; açık gezinme
	 * düğmenin devamı olarak ona bitişik durur.
	 */
	.dj-entry__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		row-gap: 0;
	}

	.dj-account-welcome {
		margin-bottom: 16px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		margin-top: 24px;
	}

	.dj-account-navtoggle.is-ready {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 50px;
		padding: 0 16px;
		border: 1px solid var(--dj-line);
		border-radius: var(--dj-radius-md);
		background: var(--dj-white);
		color: var(--dj-ink);
		font-family: var(--dj-font);
		font-size: var(--dj-fs-15);
		font-weight: var(--dj-fw-semibold);
		text-align: start;
		cursor: pointer;
	}

	.dj-account-navtoggle.is-ready:focus-visible {
		outline: 2px solid var(--dj-focus);
		outline-offset: 2px;
	}

	.dj-account-navtoggle__icon {
		display: inline-flex;
		flex: 0 0 auto;
		color: var(--dj-muted);
		transition: transform var(--dj-transition);
	}

	.dj-account-navtoggle__icon svg {
		width: 16px;
		height: 16px;
	}

	.dj-account-navtoggle[aria-expanded="true"] .dj-account-navtoggle__icon {
		transform: rotate(180deg);
	}

	/* Kapalıyken liste çizilmez (varsayılan). */
	.dj-account-navtoggle.is-ready[aria-expanded="false"] + .woocommerce-MyAccount-navigation {
		display: none;
	}

	/* Açıkken düğme ve liste tek kart. */
	.dj-account-navtoggle.is-ready[aria-expanded="true"] {
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	.dj-account-navtoggle.is-ready[aria-expanded="true"] + .woocommerce-MyAccount-navigation {
		padding-top: 4px;
		border-top: 0;
		border-start-start-radius: 0;
		border-start-end-radius: 0;
	}

	/* Karşılama: iki satırı geçmeyen kompakt satır. */
	.dj-account-welcome__title {
		font-size: var(--dj-fs-15);
	}

	.dj-account-welcome__text {
		font-size: 0.8125rem;
	}

	/* Kartlar: kompakt ama rahat dokunma alanı. */
	.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link {
		min-height: 64px;
		gap: 12px;
		padding: 12px 14px;
	}

	.dj-account-card__icon {
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	.dj-account-card__icon svg {
		width: 20px;
		height: 20px;
	}

	.dj-account-card__title {
		font-size: var(--dj-fs-15);
	}

	.dj-account-card__text {
		font-size: 0.8125rem;
	}

	.dj-account-card__arrow svg {
		width: 14px;
		height: 14px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .dj-account-dashboard__lead {
		margin-bottom: 16px;
	}
}

/* ================================================================== */
/* Hesap Merkezi V2.2 — yalnız mobil (≤767) cila; masaüstü dondurulmuş */
/* ================================================================== */

@media (max-width: 767px) {
	/*
	 * Karşılama bir form kutusu değil, hesap başlığıdır: çerçeve kalkar,
	 * yalnız açık yüzey kalır. Tek çerçeveli, etkileşimli öğe altındaki
	 * gezinme düğmesidir.
	 */
	.dj-account-welcome {
		gap: 12px;
		margin-bottom: 12px;
		padding: 12px 14px;
		border-color: transparent;
		background: var(--dj-surface);
	}

	.dj-account-welcome__icon {
		width: 36px;
		height: 36px;
	}

	.dj-account-welcome__icon svg {
		width: 22px;
		height: 22px;
	}

	.dj-account-welcome__title {
		line-height: 1.25;
	}

	.dj-account-welcome__text {
		line-height: 1.35;
	}

	/* Düğme → içerik başlığı 20 px. */
	.woocommerce-account .woocommerce-MyAccount-content {
		margin-top: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .dj-account-dashboard__lead {
		margin: 4px 0 14px;
		font-size: var(--dj-fs-14);
	}

	/* Kartlar: daha kompakt, çerçeve çizgi renginin daha açık tonu. */
	.woocommerce-account .woocommerce-MyAccount-content .dj-account-cards {
		gap: 10px;
	}

	/* İçerik alanının genel `li` alt payı (≈6 px) kart listesinde sıfırlanır. */
	.woocommerce-account .woocommerce-MyAccount-content .dj-account-card {
		margin: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content a.dj-account-card__link {
		min-height: 60px;
		padding: 12px 14px;
		border-color: color-mix(in srgb, var(--dj-line) 65%, var(--dj-white));
	}

	.dj-account-card__icon {
		width: 36px;
		height: 36px;
	}

	.dj-account-card__title {
		line-height: 1.25;
	}

	.dj-account-card__text {
		line-height: 1.3;
	}

	/*
	 * Hizmet şeridi öncesi boşluk. Kök neden: şeridin genel üst dış payı
	 * (`--dj-content-trust-gap`, 40 px) + üst iç payı (40 px) = içerik
	 * sonundan ayraca 80 px (bütün sayfalarda aynı), panoda buna kart
	 * listesindeki `li` payı eklenerek 86 px. Oturum açık hesap sayfalarında
	 * mobilde aynı belirteç 16 px'e iner: ayraç içerikten 56 px sonra gelir.
	 * Şeridin kendisi değişmez.
	 */
	body.woocommerce-account:has(.woocommerce-MyAccount-navigation) {
		--dj-content-trust-gap: 16px;
	}
}