@charset "utf-8";
/* ==================================================================
   YARDIM MASASI

   Devralınan sayfa `mods/help/display/default.html` içindeki tablo
   tabanlı blokları basıyordu ve ekranda üç şey vardı: "Yardım
   Masası" başlığı, KIRIK bir spacer.gif ikonu ve madde işaretli
   10 soruluk çıplak bir <ul>. Kart, açıklama, eylem ya da iletişim
   yolu yoktu; SSS listesi de tam genişlikte beyaz bir şeridin
   içinde duruyordu.

   Yeni düzen, müşterinin yardım sayfasına GELME SEBEPLERİNİ öne
   alır: soru sormak, açtığı talebi izlemek, siparişini aramak,
   uyumluluk doğrulamak. Kart dili Hesabım sayfasıyla aynı —
   iki sayfa arasında ikinci bir görsel dil tutulmuyor.

   Renkler ve ölçüler haustech2.css'teki değişkenlerden gelir.
   ================================================================== */

.hs-yardim { max-width: var(--hs-max, 1400px); margin: 0 auto; padding: 0 var(--hs-gutter, 16px) 40px; }

/* ---------- başlık ---------- */
.hs-yardim .yardim-bas { padding: 26px 0 20px; }
.hs-yardim .yardim-bas h1 {
	margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em;
	color: var(--hs-text, #1B222A);
}
.hs-yardim .yardim-bas p {
	margin: 5px 0 0; font-size: 14px; color: var(--hs-text-2, #59636E); max-width: 62ch;
}
.hs-yardim .yardim-bas .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hs-yardim .yardim-bas .btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 20px; border-radius: var(--hs-radius, 8px);
	font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
}
.hs-yardim .yardim-bas .btn-primary {
	background: var(--hs-red, #BB1319); color: #fff; border-color: var(--hs-red, #BB1319);
}
.hs-yardim .yardim-bas .btn-primary:hover { background: var(--hs-red-dark, #97070C); color: #fff; }
.hs-yardim .yardim-bas .btn-outline {
	background: var(--hs-surface, #fff); color: var(--hs-text, #1B222A);
	border-color: var(--hs-line, #E2E6EA);
}
.hs-yardim .yardim-bas .btn-outline:hover { border-color: var(--hs-red, #BB1319); color: var(--hs-red, #BB1319); }

/* ---------- kısayol kartları ----------
   Satır başı üç kart; Hesabım sayfasındaki kuralın aynısı.
   `auto-fill` bilerek kullanılmadı: kart sayısı oturum durumuna
   göre değiştiği için sayfa her ekranda başka türlü diziliyordu. */
.hs-yardim .yardim-kartlar {
	display: grid; gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hs-yardim .yardim-kart {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--hs-surface, #fff);
	border: 1px solid var(--hs-line, #E2E6EA);
	border-radius: var(--hs-radius-lg, 10px);
	padding: 20px; text-decoration: none; color: inherit;
}
.hs-yardim .yardim-kart:hover {
	border-color: var(--hs-red, #BB1319);
	box-shadow: var(--hs-shadow, 0 1px 2px rgba(16,21,26,.06), 0 2px 8px rgba(16,21,26,.05));
	text-decoration: none; color: inherit;
}
.hs-yardim .yardim-kart .ikon {
	flex: none; width: 52px; height: 52px; border-radius: 999px;
	background: var(--hs-red-soft, #FDECEC); color: var(--hs-red, #BB1319);
	display: grid; place-items: center;
}
.hs-yardim .yardim-kart .ikon svg { width: 24px; height: 24px; }
.hs-yardim .yardim-kart .govde { display: block; min-width: 0; }
.hs-yardim .yardim-kart .govde b {
	display: block; font-size: 16px; font-weight: 700; line-height: 1.3;
	color: var(--hs-text, #1B222A); margin-bottom: 4px;
}
.hs-yardim .yardim-kart:hover .govde b { color: var(--hs-red, #BB1319); }
.hs-yardim .yardim-kart .govde span {
	display: block; font-size: 13px; line-height: 1.55; color: var(--hs-text-2, #59636E);
}

/* ---------- bölüm başlığı (talepler + SSS ortak) ---------- */
.hs-yardim .yardim-talepler,
.hs-yardim .yardim-sss { margin-top: 28px; }
.hs-yardim .bas {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin-bottom: 12px;
}
.hs-yardim .bas h2 {
	margin: 0; font-size: 19px; font-weight: 700; color: var(--hs-text, #1B222A);
}
.hs-yardim .bas a { font-size: 13px; font-weight: 600; color: var(--hs-red, #BB1319); text-decoration: none; }
.hs-yardim .bas a:hover { text-decoration: underline; }

/* ---------- destek talepleri ---------- */
.hs-yardim .yardim-talepler .liste {
	background: var(--hs-surface, #fff);
	border: 1px solid var(--hs-line, #E2E6EA);
	border-radius: var(--hs-radius-lg, 10px);
	overflow: hidden;
}
.hs-yardim .talep {
	display: block; padding: 14px 18px; text-decoration: none; color: inherit;
	border-top: 1px solid var(--hs-line-soft, #EEF1F4);
}
.hs-yardim .talep:first-child { border-top: 0; }
.hs-yardim .talep:hover { background: var(--hs-bg, #F4F6F8); text-decoration: none; color: inherit; }
.hs-yardim .talep .konu {
	display: block; font-size: 14.5px; font-weight: 600; color: var(--hs-text, #1B222A);
}
.hs-yardim .talep:hover .konu { color: var(--hs-red, #BB1319); }
.hs-yardim .talep .alt {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 5px;
	font-size: 12.5px; color: var(--hs-text-2, #59636E);
}
.hs-yardim .talep .rozet {
	font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
	padding: 2px 8px; border-radius: 999px;
	background: var(--hs-bg, #F4F6F8); color: var(--hs-text-2, #59636E);
}
.hs-yardim .talep .rozet.d-open,
.hs-yardim .talep .rozet.d-process { background: #FDECEC; color: #97070C; }
.hs-yardim .talep .rozet.d-closed { background: #E9F4EC; color: #1E6B36; }

/* ---------- sık sorulanlar ----------
   Devralınan çıplak <ul> yerine ayrılmış satırlar. Madde işareti
   kaldırıldı: her satır zaten tıklanabilir bir hedef. */
.hs-yardim .yardim-sss ul {
	list-style: none; margin: 0; padding: 0;
	background: var(--hs-surface, #fff);
	border: 1px solid var(--hs-line, #E2E6EA);
	border-radius: var(--hs-radius-lg, 10px);
	overflow: hidden;
}
.hs-yardim .yardim-sss li { border-top: 1px solid var(--hs-line-soft, #EEF1F4); }
.hs-yardim .yardim-sss li:first-child { border-top: 0; }
/* `ul a` SART: once `.yardim-sss a` yaziliydi ve ayni ozgullukte
   (0,2,1) olup DAHA SONRA geldigi icin bolum basligindaki
   "Tumu ->" baglantisinin kirmizisini eziyordu -- SSS basliginin
   linki koyu, taleplerinki kirmizi cikiyordu. */
.hs-yardim .yardim-sss ul a {
	display: block; padding: 13px 18px; font-size: 14px; line-height: 1.5;
	color: var(--hs-text, #1B222A); text-decoration: none;
}
.hs-yardim .yardim-sss ul a:hover { background: var(--hs-bg, #F4F6F8); color: var(--hs-red, #BB1319); }

/* ---------- iletişim ---------- */
.hs-yardim .yardim-iletisim {
	margin-top: 28px; display: grid; gap: 20px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center;
	background: var(--hs-surface, #fff);
	border: 1px solid var(--hs-line, #E2E6EA);
	border-radius: var(--hs-radius-lg, 10px);
	padding: 22px;
}
.hs-yardim .yardim-iletisim h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.hs-yardim .yardim-iletisim p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--hs-text-2, #59636E); }
.hs-yardim .yollar { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-yardim .yol {
	display: block; padding: 12px 14px; text-decoration: none; color: inherit;
	border: 1px solid var(--hs-line, #E2E6EA); border-radius: var(--hs-radius, 8px);
	background: var(--hs-bg, #F4F6F8);
}
.hs-yardim .yol:hover { border-color: var(--hs-red, #BB1319); text-decoration: none; color: inherit; }
.hs-yardim .yol .etiket {
	display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--hs-text-3, #7F8B97);
}
.hs-yardim .yol .deger {
	display: block; margin-top: 3px; font-size: 14px; font-weight: 600;
	color: var(--hs-text, #1B222A); word-break: break-word;
}
.hs-yardim .yol:hover .deger { color: var(--hs-red, #BB1319); }

/* ---------- dar ekran ---------- */
@media (max-width: 980px) {
	.hs-yardim .yardim-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hs-yardim .yardim-iletisim { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 620px) {
	.hs-yardim .yardim-bas { padding: 18px 0 14px; }
	.hs-yardim .yardim-bas h1 { font-size: 23px; }
	.hs-yardim .yardim-kartlar { grid-template-columns: minmax(0, 1fr); }
	.hs-yardim .yardim-kart { padding: 14px; gap: 12px; }
	.hs-yardim .yardim-kart .ikon { width: 40px; height: 40px; }
	.hs-yardim .yardim-kart .ikon svg { width: 20px; height: 20px; }
	.hs-yardim .yollar { grid-template-columns: minmax(0, 1fr); }
	.hs-yardim .yardim-bas .btn { flex: 1 1 100%; }
}
/* ==================================================================
   HESAP KABUĞU İÇİNDE  (oturum açıkken)

   Sayfa `main.hs-body` ızgarasının sağ sütununda açılıyor. Sütunun
   kendi yatay boşluğu zaten var; buradaki gutter ikinci kez
   içeri itiyordu.

   Başlık da gizli: kabuk zaten "Hesabım" H1'ini basıyor
   (.hs-modul-baslik kuralı). Gizli başlığın üstündeki 26px dolgu
   ekranda boş bir beyaz alan bırakıyordu.
   ================================================================== */
html body.hs-hesap .hs-yardim { max-width: none; padding: 0 0 8px; }
html body.hs-hesap .hs-yardim .yardim-bas { padding: 0 0 16px; }
html body.hs-hesap .hs-yardim .yardim-bas p { margin-top: 0; }