/* ==========================================================================
   İçerik sayfaları katmanı
   style.css'ten SONRA yüklenir. Kapsam: iletişim, teklif, kurumsal metin ve
   yasal sayfalar. Mağaza şablonlarına dokunmaz.

   style.css'te `ul, ol { list-style: none }` sıfırlaması var; okuma
   sayfalarında madde işareti geri açılır, yoksa listeler paragraf yığınına
   dönüşüyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Okuma tipografisi

   Okuma sayfası kabın tamamını kullanır: eski 70ch sınırı 1440 piksellik
   ekranda sağ yarıyı boş bırakıyordu. İki sütuna akıtmak denendi ve
   bırakıldı: uzun yasal metinde okuyucu sol sütunu bitirip sayfanın en
   üstüne dönmek zorunda kalıyor.
   -------------------------------------------------------------------------- */

.sayfa-dar { width: 100%; font-size: var(--fs-lg); }

.sayfa-dar h1,
.sayfa-dar h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.sayfa-dar h3 { font-size: var(--fs-lg); font-weight: 700; }
.sayfa-dar h2 + p,
.sayfa-dar h3 + p { margin-top: 0; }

.sayfa-dar ul,
.sayfa-dar ol {
	list-style: disc;
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	display: grid;
	gap: 0.4rem;
}
.sayfa-dar ol { list-style: decimal; }
.sayfa-dar li { color: var(--text-2); }
.sayfa-dar strong,
.sayfa-dar b { color: var(--text); font-weight: 600; }
.sayfa-dar a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.sayfa-dar a:hover { color: var(--gold-hover); }
.sayfa-dar table { margin-bottom: 1rem; font-size: var(--fs-md); }
.sayfa-dar th,
.sayfa-dar td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sayfa-dar th { color: var(--text); font-weight: 600; }

/* Sayfa başlığı h1'dir; .section-head kuralı h2 için yazılmıştı. */
.section-head h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.025em; }

/* Yasal sayfaların üstündeki not. */
.yasal-not {
	max-width: 70ch;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold-deep);
	border-radius: var(--r-sm);
	background: var(--bg-soft);
	color: var(--text-2);
	font-size: var(--fs-sm);
}
.yasal-not a { color: var(--gold-deep); text-decoration: underline; }

/* --------------------------------------------------------------------------
   2. SSS akordeonu
   <details> kullanılıyor: JavaScript yüklenmese de açılıp kapanır, arama
   motoru ve ekran okuyucu içeriği kapalıyken de görür.
   -------------------------------------------------------------------------- */

.sss { display: grid; gap: 0.5rem; max-width: 70ch; }

.sss details {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg);
	overflow: hidden;
}
.sss details[open] { border-color: var(--line-strong); }

.sss summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 52px;
	padding: 0.875rem 1rem;
	cursor: pointer;
	color: var(--text);
	font-size: var(--fs-md);
	font-weight: 600;
	list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }

/* Artı/eksi göstergesi: ikon dosyası olmadan, saf CSS. */
.sss summary::after {
	content: "";
	flex: none;
	width: 12px; height: 12px;
	border-right: 2px solid var(--gold-deep);
	border-bottom: 2px solid var(--gold-deep);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--t-fast) var(--ease);
}
.sss details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.sss summary:hover { background: var(--bg-soft); }

.sss-govde { padding: 0 1rem 1rem; color: var(--text-2); }
.sss-govde p { margin-bottom: 0.75rem; }
.sss-govde p:last-child { margin-bottom: 0; }
.sss-govde ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.sss-govde strong { color: var(--text); font-weight: 600; }
.sss-govde a { color: var(--gold-deep); text-decoration: underline; }

/* --------------------------------------------------------------------------
   3. İletişim kartları
   -------------------------------------------------------------------------- */

/* Kart sayısı değişebiliyor (telefon, WhatsApp, e-posta, adres, saatler);
   sabit sütun sayısı yerine en dar okunabilir kart ölçüsü verilir. */
.iletisim-kartlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 0.75rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 560px) { .iletisim-kartlar { grid-template-columns: 1fr; } }

.bilgi-karti {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg-soft);
}
.bilgi-karti h2 { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.bilgi-karti p { color: var(--text-2); font-size: var(--fs-md); line-height: 1.55; }
.bilgi-karti p > a:not(.btn) { color: var(--text); font-weight: 600; }
.bilgi-karti p > a:not(.btn):hover { color: var(--gold-deep); }
.bilgi-karti .karti-not { color: var(--text-3); font-size: var(--fs-sm); }
.bilgi-karti .btn { width: 100%; }

/* Gün adı ile saat aynı satırda kalır: 1440'ta dört sütunlu ızgarada kart içi
   genişlik 190px ve "Pazartesi - Cuma  09:00 - 18:00" iki satıra kırılıyordu. */
.saatler { display: grid; gap: 0.35rem; }
.saatler li { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--text-2); font-size: var(--fs-sm); }
.saatler span { white-space: nowrap; }
.saatler b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. İletişim / teklif düzeni
   -------------------------------------------------------------------------- */

.iletisim-alt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
@media (max-width: 900px) { .iletisim-alt { grid-template-columns: 1fr; } }
.iletisim-alt > * { min-width: 0; }

.iletisim-form h2 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 0.5rem; }
.form-giris { max-width: 62ch; margin-bottom: 1.5rem; color: var(--text-2); }
.form-giris a { color: var(--gold-deep); text-decoration: underline; }

.iletisim-yan {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg-soft);
}
.iletisim-yan h2 { font-size: var(--fs-md); font-weight: 700; }
.iletisim-yan h2 + p,
.iletisim-yan h2 + ul { margin-top: -0.35rem; }
.iletisim-yan p { color: var(--text-2); font-size: var(--fs-md); }
.iletisim-yan a:not(.btn) { color: var(--gold-deep); text-decoration: underline; }
.iletisim-yan .btn { margin-top: 0.25rem; }

.madde-listesi { display: grid; gap: 0.4rem; }
.madde-listesi li {
	position: relative;
	padding-left: 1rem;
	color: var(--text-2);
	font-size: var(--fs-md);
}
.madde-listesi li::before {
	content: "";
	position: absolute; left: 0; top: 0.65em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--gold);
}
.madde-listesi b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1rem; max-width: 62ch; }

.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-satir { grid-template-columns: 1fr; } }

.form-alan { display: grid; gap: 0.35rem; }
.form-alan label { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.form-alan label span { color: var(--danger); }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-md);
}
.form textarea { min-height: auto; resize: vertical; line-height: 1.55; }
.form input::placeholder,
.form textarea::placeholder { color: var(--text-3); }
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--text-2); }

/* Bal küpü: bot doldursun diye DOM'da durur, kimseye görünmez. */
.form-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-onay label { display: flex; gap: 0.625rem; align-items: start; color: var(--text-2); font-size: var(--fs-sm); }
.form-onay input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--gold-deep); }
.form-onay a { color: var(--gold-deep); text-decoration: underline; }

.form-gonder { display: grid; gap: 0.5rem; justify-items: start; }
.form-gonder small { color: var(--text-3); font-size: var(--fs-sm); }
@media (max-width: 560px) { .form-gonder .btn { width: 100%; } }

.form-bildirim {
	padding: 0.875rem 1rem;
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-radius: var(--r-sm);
	background: var(--bg-soft);
	font-size: var(--fs-md);
}
.form-bildirim.is-tamam { border-left-color: var(--success); }
.form-bildirim.is-hata  { border-left-color: var(--danger); }

/* --------------------------------------------------------------------------
   6. Harita
   -------------------------------------------------------------------------- */

.harita { margin-top: clamp(2rem, 4vw, 3rem); }
.harita h2 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 0.35rem; }
.harita p { max-width: 62ch; margin-bottom: 1rem; color: var(--text-2); }
.harita iframe {
	display: block;
	width: 100%;
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
}
@media (max-width: 560px) { .harita iframe { height: 300px; } }

/* ==========================================================================
   7. Hesabım
   Çekirdeğin `woocommerce-general` stili temada kapalı; hesap ekranı hiç
   biçimlendirilmemişti: giriş alanları tarayıcı varsayılanıyla, alt çizgi
   gibi görünüyordu. Ölçüler ödeme katmanıyla (assets/css/odeme.css) aynı
   tutuldu; iki form aynı siteye ait görünsün.
   ========================================================================== */

.woocommerce-account .woocommerce { display: grid; gap: 1.5rem; }

/* Giriş ve kayıt kutusu. */
.woocommerce-form-login,
.woocommerce-ResetPassword {
	display: grid;
	gap: 0.875rem;
	max-width: 30rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg-soft);
}

.woocommerce-account h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }

.woocommerce-account .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
}

.woocommerce-account .form-row label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text);
}
.woocommerce-account .form-row label .required { color: var(--danger); text-decoration: none; border: 0; }

.woocommerce-account input[type="text"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-md);
}
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	outline: none;
	border-color: var(--gold-deep);
	box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Parola alanının göz düğmesi kutunun içinde durur. */
.woocommerce-account .password-input { position: relative; display: block; }
.woocommerce-account .show-password-input {
	position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex; align-items: center; gap: 0.5rem;
	font-size: var(--fs-sm); color: var(--text-2);
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold-deep); }

.woocommerce-account .lost_password { margin: 0; font-size: var(--fs-sm); }
.woocommerce-account .lost_password a { color: var(--gold-deep); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Giriş yapıldıktan sonraki panel
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.25rem;
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--text-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bg); color: var(--text); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--dark); color: var(--on-dark); }

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; color: var(--text-2); }
.woocommerce-account .woocommerce-MyAccount-content p { margin-bottom: 1rem; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--gold-deep); text-decoration: underline; }
.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: var(--text); font-weight: 600; }

/* Sipariş tablosu: dar ekranda satır satır okunur. */
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
	padding: 0.65rem 0.5rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: var(--fs-md);
}
.woocommerce-account .woocommerce-orders-table th { color: var(--text); font-weight: 700; }

@media (min-width: 780px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 230px minmax(0, 1fr);
		align-items: start;
		gap: 2rem;
	}
	/* Giriş formu tek sütun kalır; ızgara yalnız panelde ikiye ayrılır. */
	.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.woocommerce-account .woocommerce-orders-table thead { display: none; }
	.woocommerce-account .woocommerce-orders-table tr { display: grid; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
	.woocommerce-account .woocommerce-orders-table td { border: 0; padding: 0; }
	.woocommerce-account .woocommerce-orders-table td::before { content: attr(data-title) ": "; color: var(--text-3); }
}