/*
 * TurkWeb Ağ Teması
 *
 * Mobil öncelikli. Önce telefon düzeni yazıldı, geniş ekran sonradan
 * eklendi — tersi yapıldığında telefonda hep bir şeyler taşar.
 *
 * Renk tek değişkenden gelir (--ana); eklentideki site ayarından
 * değiştirilince her yer birlikte değişir.
 */

:root {
	--ana: #1e73be;
	--ana-koyu: #145a97;
	--lacivert: #0d2237;
	--metin: #1c2733;
	--sonuk: #66788a;
	--cizgi: #e4ebf2;
	--zemin: #f4f7fa;
	--beyaz: #fff;
	--golge: 0 1px 2px rgba(13,34,55,.05), 0 6px 20px rgba(13,34,55,.06);
	--golge-2: 0 12px 40px rgba(13,34,55,.14);
	--yuvarlak: 16px;
	--kap: 1240px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--metin);
	background: var(--zemin);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 68px; /* mobil alt çubuk */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ana); text-decoration: none; }
a:hover { color: var(--ana-koyu); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
svg { fill: currentColor; }

.twa-kap { max-width: var(--kap); margin: 0 auto; padding: 0 16px; }

.twa-atla {
	position: absolute; left: -9999px; background: var(--lacivert); color: #fff;
	padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 200;
}
.twa-atla:focus { left: 0; top: 0; color: #fff; }

/* ==================================================================
 * Düğmeler
 * ============================================================== */
.twa-dugme {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: var(--ana); color: #fff !important; border: 1px solid var(--ana);
	border-radius: 11px; padding: 10px 18px; font-size: 15px; font-weight: 650;
	cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap;
	transition: background .14s, transform .1s;
}
.twa-dugme:hover { background: var(--ana-koyu); border-color: var(--ana-koyu); }
.twa-dugme:active { transform: translateY(1px); }
.twa-dugme-hayalet { background: transparent; color: var(--metin) !important; border-color: var(--cizgi); }
.twa-dugme-hayalet:hover { background: var(--zemin); border-color: var(--ana); color: var(--ana) !important; }
.twa-dugme-buyuk { padding: 14px 26px; font-size: 16.5px; border-radius: 13px; }

/* ==================================================================
 * Üst bölüm
 * ============================================================== */
.twa-ust { background: var(--beyaz); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 90; }
.twa-ust-ana .twa-kap { display: flex; align-items: center; gap: 18px; min-height: 66px; }

.twa-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.twa-logo img { max-height: 40px; width: auto; }
.twa-logo-isim { font-size: 20px; font-weight: 800; color: var(--lacivert); letter-spacing: -.02em; }

.twa-menu { flex: 1; min-width: 0; display: none; }
.twa-menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.twa-menu a {
	display: block; padding: 8px 13px; border-radius: 9px;
	color: var(--metin); font-size: 15px; font-weight: 550; white-space: nowrap;
}
.twa-menu a:hover { background: var(--zemin); color: var(--ana); }
.twa-menu .current-menu-item > a { color: var(--ana); background: #eaf3fc; }

.twa-ust-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.twa-ara-ac {
	background: none; border: 1px solid var(--cizgi); border-radius: 10px;
	width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--sonuk);
}
.twa-ara-ac:hover { border-color: var(--ana); color: var(--ana); }

.twa-ara-kutu { border-top: 1px solid var(--cizgi); background: var(--zemin); padding: 14px 0; }
.twa-ara-kutu[hidden] { display: none; }
.twa-ara-kutu form, .twa-ara-form { display: flex; gap: 8px; }
.twa-ara-kutu input, .twa-ara-form input {
	flex: 1; border: 1px solid var(--cizgi); border-radius: 11px;
	padding: 12px 15px; font-size: 16px; font-family: inherit; background: #fff;
}
.twa-ara-kutu input:focus, .twa-ara-form input:focus { outline: 0; border-color: var(--ana); }

/* Bölge şeridi — yatay kaydırmalı, telefonda çok işe yarıyor */
.twa-serit { background: var(--lacivert); }
.twa-serit-liste {
	display: flex; gap: 4px; overflow-x: auto; padding: 9px 0;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.twa-serit-liste::-webkit-scrollbar { display: none; }
.twa-serit-liste a {
	color: #cfe0f0; font-size: 14px; padding: 5px 13px; border-radius: 99px; white-space: nowrap;
}
.twa-serit-liste a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ==================================================================
 * Düzen
 * ============================================================== */
.twa-govde { padding: 20px 0 40px; }
.twa-duzen { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
.twa-tek-sutun .twa-sutun-ana { max-width: 900px; margin: 0 auto; }
.twa-sutun-ana { min-width: 0; }

/* ==================================================================
 * Manşet
 * ============================================================== */
.twa-manset {
	display: grid; gap: 20px; margin-bottom: 22px;
	background: linear-gradient(135deg, var(--lacivert), #16395a);
	border-radius: 20px; padding: 28px 24px; color: #fff; overflow: hidden;
}
.twa-manset h1 { font-size: 27px; color: #fff; margin-bottom: 8px; }
.twa-manset > .twa-manset-yazi > p { color: #c5d8e9; font-size: 16px; margin-bottom: 18px; }
.twa-manset-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.twa-manset .twa-dugme-hayalet { color: #fff !important; border-color: rgba(255,255,255,.3); }
.twa-manset .twa-dugme-hayalet:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.twa-manset-not { color: #9db8d0; font-size: 13.5px; margin: 14px 0 0; }

.twa-manset-one {
	display: block; border-radius: 15px; overflow: hidden;
	background: rgba(255,255,255,.07); color: #fff;
}
.twa-manset-one:hover { color: #fff; }
.twa-manset-gorsel { aspect-ratio: 16 / 9; overflow: hidden; }
.twa-manset-gorsel img, .twa-manset-gorsel .twa-kapak { width: 100%; height: 100%; object-fit: cover; }
.twa-manset-ic { padding: 16px 18px; }
.twa-manset-ic h2 { font-size: 19px; color: #fff; margin: 8px 0 6px; }
.twa-manset-ic p { color: #c5d8e9; font-size: 14.5px; margin: 0; }

.twa-rozet {
	display: inline-block; background: var(--ana); color: #fff;
	font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
	padding: 4px 11px; border-radius: 99px; text-transform: uppercase;
}

.twa-manset-satir { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; }
.twa-mini { background: var(--beyaz); border-radius: 13px; overflow: hidden; box-shadow: var(--golge); color: var(--metin); }
.twa-mini-gorsel { aspect-ratio: 16 / 9; overflow: hidden; }
.twa-mini-gorsel img, .twa-mini-gorsel .twa-kapak { width: 100%; height: 100%; object-fit: cover; }
.twa-mini span { display: block; padding: 11px 13px; font-size: 14.2px; font-weight: 600; line-height: 1.4; }

/* ==================================================================
 * Kartlar
 *
 * GÖRSEL STANDARDI: her kart görseli 16:9 çerçeveye oturur ve
 * ortadan kırpılır. Kullanıcı dikey telefon fotoğrafı da yüklese,
 * panorama da yüklese kart bozulmaz.
 * ============================================================== */
.twa-izgara { display: grid; gap: 16px; grid-template-columns: 1fr; }

.twa-kart {
	display: flex; flex-direction: column; background: var(--beyaz);
	border-radius: var(--yuvarlak); overflow: hidden; box-shadow: var(--golge);
	transition: transform .16s, box-shadow .16s;
}
.twa-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }

.twa-kart-gorsel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zemin); }
.twa-kart-gorsel img, .twa-kart-gorsel .twa-kapak { width: 100%; height: 100%; object-fit: cover; }
.twa-kart-tur {
	position: absolute; left: 11px; top: 11px; background: rgba(13,34,55,.82);
	color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 11px;
	border-radius: 99px; backdrop-filter: blur(4px);
}

/* Görseli olmayan içerik için desenli kapak */
.twa-kapak {
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--k1, #1e73be), var(--k2, #3d94e8));
	position: relative; overflow: hidden;
}
.twa-kapak::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 55%);
}
.twa-kapak span {
	font-size: 62px; font-weight: 800; color: rgba(255,255,255,.35);
	position: relative; z-index: 1; line-height: 1;
}

.twa-kart-ic { padding: 15px 17px 13px; display: flex; flex-direction: column; flex: 1; }
.twa-kart-baslik { font-size: 17.5px; margin: 0 0 7px; }
.twa-kart-baslik a { color: var(--metin); }
.twa-kart-baslik a:hover { color: var(--ana); }
.twa-kart-ozet { font-size: 14.6px; color: var(--sonuk); margin: 0 0 12px; flex: 1; }

.twa-kart-tarih {
	display: flex; align-items: center; gap: 7px; font-size: 13.4px;
	background: var(--zemin); padding: 8px 11px; border-radius: 10px; margin-bottom: 11px;
}
.twa-kart-tarih svg { width: 15px; height: 15px; color: var(--sonuk); flex: 0 0 15px; }

.twa-kart-alt { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--cizgi); padding-top: 11px; }
.twa-kart-yazar { display: flex; align-items: center; gap: 7px; font-size: 13.4px; color: var(--sonuk); min-width: 0; }
.twa-kart-yazar img { border-radius: 50%; width: 26px; height: 26px; }
.twa-kart-yazar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twa-kart-sayilar { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.twa-kart-yer { font-size: 12.4px; color: var(--sonuk); background: var(--zemin); padding: 3px 9px; border-radius: 99px; }

.twa-etki {
	display: inline-flex; align-items: center; gap: 5px; background: none;
	border: 1px solid var(--cizgi); border-radius: 9px; padding: 5px 10px;
	font-size: 13.4px; color: var(--sonuk); cursor: pointer; font-family: inherit;
	transition: all .14s;
}
.twa-etki svg { width: 15px; height: 15px; }
.twa-etki:hover { border-color: #e88; color: #c23b3b; }
.twa-etki.aktif { background: #fdecef; border-color: #e8a0a0; color: #c23b3b; }
.twa-etki-buyuk { padding: 10px 18px; font-size: 15px; border-radius: 11px; }
.twa-etki-buyuk svg { width: 18px; height: 18px; }

.twa-kart-yorum { display: inline-flex; align-items: center; gap: 5px; font-size: 13.4px; color: var(--sonuk); }
.twa-kart-yorum svg { width: 15px; height: 15px; }
.twa-kart-zaman { font-size: 12.4px; color: #9aa9b8; margin-top: 9px; }

/* ==================================================================
 * Reklam alanları
 *
 * Boş yerleşim hiç basılmaz (PHP tarafı). Basıldığında da içeriğe
 * karışmasın diye ince bir çerçeve ve "Reklam" etiketi var —
 * hem dürüstlük hem de mevzuat gereği.
 * ============================================================== */
.twa-reklam {
	position: relative; background: var(--beyaz); border: 1px solid var(--cizgi);
	border-radius: 13px; padding: 10px; text-align: center; overflow: hidden;
	margin-bottom: 16px;
}
.twa-reklam img { margin: 0 auto; border-radius: 8px; }
.twa-reklam-etiket {
	position: absolute; right: 8px; top: 8px; font-size: 9.5px; letter-spacing: .1em;
	text-transform: uppercase; color: #9aa9b8; background: rgba(255,255,255,.9);
	padding: 2px 7px; border-radius: 5px;
}
.twa-reklam-ust { margin-top: 14px; }
.twa-reklam-ust .twa-reklam { margin-bottom: 0; }
.twa-reklam-genis { margin: 18px 0; }
.twa-izgara-reklam { grid-column: 1 / -1; }
.twa-izgara-reklam .twa-reklam { margin-bottom: 0; }

.twa-yapiskan.aktif { position: sticky; top: 96px; }

.twa-mobil-reklam { position: fixed; left: 0; right: 0; bottom: 68px; z-index: 80; padding: 0 10px; }
.twa-mobil-reklam .twa-reklam { margin: 0; padding: 5px; border-radius: 11px; box-shadow: var(--golge-2); }
.twa-mobil-reklam:empty { display: none; }

/* ==================================================================
 * Yan sütun
 * ============================================================== */
.twa-sutun-yan { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.twa-yan-kutu { background: var(--beyaz); border-radius: var(--yuvarlak); padding: 18px; box-shadow: var(--golge); }
.twa-yan-kutu h3 { font-size: 16px; margin: 0 0 12px; }
.twa-katil { background: linear-gradient(135deg, var(--ana), #3d94e8); color: #fff; }
.twa-katil h3 { color: #fff; }
.twa-katil p { color: rgba(255,255,255,.9); font-size: 14.4px; }
.twa-katil .twa-dugme { background: #fff; color: var(--ana) !important; border-color: #fff; width: 100%; }
.twa-katil .twa-dugme:hover { background: #eaf3fc; }

.twa-etiketler { display: flex; flex-wrap: wrap; gap: 7px; }
.twa-etiketler a {
	font-size: 13.6px; background: var(--zemin); color: var(--metin);
	padding: 6px 13px; border-radius: 99px;
}
.twa-etiketler a:hover { background: var(--ana); color: #fff; }

/* ==================================================================
 * Tekil yazı
 * ============================================================== */
.twa-yazi { background: var(--beyaz); border-radius: var(--yuvarlak); padding: 22px 20px; box-shadow: var(--golge); }
.twa-yazi-bas h1 { font-size: 27px; margin: 10px 0 12px; }
.twa-yazi-bilgi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--sonuk); font-size: 13.8px; }
.twa-yazi-gorsel { margin: 18px 0; border-radius: 13px; overflow: hidden; aspect-ratio: 16 / 9; }
.twa-yazi-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.twa-yazi-ic { font-size: 17px; line-height: 1.75; }
.twa-yazi-ic img { border-radius: 12px; margin: 18px 0; }
.twa-yazi-alt { display: flex; gap: 9px; flex-wrap: wrap; border-top: 1px solid var(--cizgi); padding-top: 18px; margin-top: 22px; }

.twa-bilgi-kutu { background: var(--zemin); border-radius: 13px; padding: 15px 17px; margin: 20px 0; }
.twa-bilgi-satir { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14.8px; }
.twa-bilgi-satir + .twa-bilgi-satir { border-top: 1px solid var(--cizgi); }
.twa-bilgi-satir span { color: var(--sonuk); }

/* ==================================================================
 * Yorumlar
 * ============================================================== */
.twa-yorumlar { margin-top: 20px; }
.twa-yorum-bolum { background: var(--beyaz); border-radius: var(--yuvarlak); padding: 22px 20px; box-shadow: var(--golge); }
.twa-yorum-liste { list-style: none; margin: 0 0 24px; padding: 0; }
.twa-yorum-liste .comment-body { padding: 15px 0; border-bottom: 1px solid var(--cizgi); }
.twa-yorum-liste .avatar { border-radius: 50%; }
.twa-yorum-bolum textarea, .twa-yorum-bolum input[type=text], .twa-yorum-bolum input[type=email] {
	width: 100%; border: 1px solid var(--cizgi); border-radius: 11px;
	padding: 12px 14px; font-size: 16px; font-family: inherit;
}
.twa-yorum-bolum .submit {
	background: var(--ana); color: #fff; border: 0; border-radius: 11px;
	padding: 12px 24px; font-size: 15px; font-weight: 650; cursor: pointer;
}

/* ==================================================================
 * Sayfa, boş durum, sayfalama
 * ============================================================== */
.twa-sayfa { background: var(--beyaz); border-radius: var(--yuvarlak); padding: 24px 22px; box-shadow: var(--golge); }
.twa-sayfa-baslik { font-size: 26px; margin-bottom: 18px; }
.twa-sayfa-bas { margin-bottom: 20px; }
.twa-sayfa-bas h1 { font-size: 25px; }

.twa-bos { background: var(--beyaz); border-radius: var(--yuvarlak); padding: 44px 22px; text-align: center; box-shadow: var(--golge); }
.twa-bos h2 { font-size: 20px; }
.twa-bos p { color: var(--sonuk); }
.twa-bos-buyuk { padding: 70px 22px; margin: 30px 0; }
.twa-bos .twa-manset-dugmeler { justify-content: center; }

.twa-sayfalama { margin-top: 26px; }
.twa-sayfalama .nav-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.twa-sayfalama .page-numbers {
	display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 13px;
	background: var(--beyaz); border-radius: 11px; color: var(--metin); font-weight: 600; box-shadow: var(--golge);
}
.twa-sayfalama .page-numbers.current { background: var(--ana); color: #fff; }

/* ==================================================================
 * Alt bölüm
 * ============================================================== */
.twa-alt { background: var(--lacivert); color: #b8ccdf; margin-top: 40px; padding: 34px 0 18px; }
.twa-alt-ust { display: grid; gap: 26px; grid-template-columns: 1fr; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
.twa-alt-marka strong { color: #fff; font-size: 18px; display: block; margin-bottom: 6px; }
.twa-alt-marka p { font-size: 14.4px; margin-bottom: 14px; }
.twa-alt h4 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.twa-alt ul { list-style: none; margin: 0; padding: 0; }
.twa-alt li { padding: 4px 0; }
.twa-alt a { color: #b8ccdf; font-size: 14.4px; }
.twa-alt a:hover { color: #fff; }
.twa-alt-satir { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 16px; font-size: 13.4px; }
.twa-alt-not { color: #7f97ad; }

/* ==================================================================
 * Mobil alt çubuk — başparmağın yetiştiği yer
 * ============================================================== */
.twa-mobil-cubuk {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	background: var(--beyaz); border-top: 1px solid var(--cizgi);
	display: grid; grid-template-columns: repeat(5, 1fr);
	padding-bottom: env(safe-area-inset-bottom);
}
.twa-mobil-cubuk a {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 9px 4px; font-size: 10.8px; color: var(--sonuk); font-weight: 600;
}
.twa-mobil-cubuk svg { width: 21px; height: 21px; }
.twa-mobil-cubuk a.aktif, .twa-mobil-cubuk a:hover { color: var(--ana); }
.twa-mobil-ekle { color: var(--ana) !important; }
.twa-mobil-ekle svg {
	background: var(--ana); color: #fff; border-radius: 50%;
	width: 30px; height: 30px; padding: 5px; margin-top: -12px;
	box-shadow: 0 4px 12px rgba(30,115,190,.4);
}

/* ==================================================================
 * Ana ekrana ekle şeridi
 * ============================================================== */
.twa-kur-serit {
	position: fixed; left: 12px; right: 12px; bottom: 78px; z-index: 100;
	background: var(--lacivert); color: #fff; border-radius: 14px;
	padding: 13px 15px; display: flex; align-items: center; gap: 12px;
	box-shadow: var(--golge-2);
}
.twa-kur-ic { flex: 1; min-width: 0; }
.twa-kur-ic strong { display: block; font-size: 14.6px; }
.twa-kur-ic span { font-size: 12.8px; color: #b8ccdf; }
.twa-kur-kapat {
	background: none; border: 0; color: #b8ccdf; font-size: 22px;
	cursor: pointer; line-height: 1; padding: 0 4px;
}

/* ==================================================================
 * Geniş ekran
 * ============================================================== */
@media (min-width: 768px) {
	.twa-izgara { grid-template-columns: repeat(2, 1fr); }
	.twa-manset { grid-template-columns: 1fr 1fr; align-items: center; padding: 36px 32px; }
	.twa-manset h1 { font-size: 34px; }
	.twa-manset-satir { grid-template-columns: repeat(4, 1fr); }
	.twa-alt-ust { grid-template-columns: 2fr 1fr 1fr; }
	.twa-yazi { padding: 32px 34px; }
	.twa-yazi-bas h1 { font-size: 33px; }
	.twa-sayfa { padding: 32px 34px; }
}

@media (min-width: 1024px) {
	body { padding-bottom: 0; }
	.twa-menu { display: block; }
	.twa-mobil-cubuk { display: none; }
	.twa-mobil-reklam { display: none; }
	.twa-kur-serit { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
	.twa-duzen { grid-template-columns: minmax(0, 1fr) 336px; }
	.twa-izgara { grid-template-columns: repeat(2, 1fr); }
	.twa-govde { padding: 26px 0 50px; }
}

@media (min-width: 1280px) {
	.twa-izgara { grid-template-columns: repeat(3, 1fr); }
	.twa-tek-sutun .twa-izgara { grid-template-columns: repeat(3, 1fr); }
}

/* Hareket azaltma tercihi olan kullanıcılara saygı */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	.twa-kart:hover { transform: none; }
}

/* ==================================================================
 * PROFİL SAYFALARI (işletme ve üye)
 *
 * Düz metin sayfası olmasın diye: kapak alanı, yuvarlak logo,
 * hızlı eylem kutuları ve sayı şeridi. Ziyaretçi aradığı bilgiyi
 * (telefon, adres, saat) hiç okumadan görebiliyor.
 * ============================================================== */
.twa-profil-kapak {
	position: relative; height: 180px; overflow: hidden;
	background: linear-gradient(135deg, var(--lacivert), #1c4a72);
	margin-bottom: -60px;
}
.twa-profil-arka { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.2); transform: scale(1.1); }
.twa-profil-perde { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,34,55,.35), rgba(13,34,55,.85)); }
.twa-uye-kapak { background: linear-gradient(135deg, var(--ana), #6b4bd6); }

.twa-profil-bas {
	position: relative; z-index: 2; background: var(--beyaz);
	border-radius: var(--yuvarlak); box-shadow: var(--golge);
	padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
	margin-bottom: 16px;
}
.twa-profil-logo {
	width: 86px; height: 86px; border-radius: 22px; overflow: hidden;
	background: linear-gradient(135deg, var(--ana), #3d94e8);
	display: grid; place-items: center; flex: 0 0 86px;
	box-shadow: 0 6px 20px rgba(13,34,55,.18); border: 3px solid #fff; margin-top: -52px;
}
.twa-profil-logo img { width: 100%; height: 100%; object-fit: cover; }
.twa-profil-logo span { font-size: 36px; font-weight: 800; color: #fff; }
.twa-uye-avatar { border-radius: 50%; }
.twa-uye-avatar img { border-radius: 50%; }

.twa-profil-kimlik { flex: 1; min-width: 0; }
.twa-profil-kimlik h1 { font-size: 23px; margin: 0 0 8px; }
.twa-profil-etiket { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 13.6px; color: var(--sonuk); }
.twa-profil-etiket > a { background: #eaf3fc; color: var(--ana); padding: 4px 12px; border-radius: 99px; font-weight: 600; }
.twa-yer-etiket { background: var(--zemin); padding: 4px 12px; border-radius: 99px; }
.twa-takipci strong { color: var(--metin); }
.twa-seviye-rozet {
	background: linear-gradient(135deg, #b26a00, #e0a13a); color: #fff;
	padding: 4px 13px; border-radius: 99px; font-weight: 700; font-size: 12.6px;
}
.twa-uye-tarih { font-size: 13px; }
.twa-profil-eylem { display: flex; gap: 8px; }
.twa-profil-eylem .twa-dugme.aktif { color: var(--ana) !important; border-color: var(--ana); }

/* Hızlı eylem kutuları */
.twa-hizli-eylem { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 18px; }
.twa-eylem-kutu {
	background: var(--beyaz); border-radius: 14px; padding: 14px 12px;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	box-shadow: var(--golge); color: var(--metin); text-align: center;
	transition: transform .14s, box-shadow .14s;
}
.twa-eylem-kutu:hover { transform: translateY(-2px); box-shadow: var(--golge-2); color: var(--ana); }
.twa-eylem-kutu svg { width: 24px; height: 24px; color: var(--ana); }
.twa-eylem-kutu span { font-weight: 700; font-size: 14.4px; }
.twa-eylem-kutu small { color: var(--sonuk); font-size: 12.4px; }
.twa-wa svg { color: #25d366; }

.twa-profil-bolum { background: var(--beyaz); border-radius: var(--yuvarlak); padding: 20px; box-shadow: var(--golge); margin-bottom: 16px; }
.twa-profil-bolum > h2 { font-size: 18px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.twa-profil-bolum > h2 small {
	background: var(--zemin); color: var(--sonuk); font-size: 12.4px;
	padding: 2px 10px; border-radius: 99px; font-weight: 600;
}
.twa-profil-bolum .twa-izgara { grid-template-columns: 1fr; }
.twa-profil-bolum .twa-bos { box-shadow: none; background: var(--zemin); padding: 28px 18px; }

/* Üye sayıları */
.twa-uye-sayilar { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.twa-uye-sayi { background: var(--beyaz); border-radius: 14px; padding: 15px; text-align: center; box-shadow: var(--golge); }
.twa-uye-sayi b { display: block; font-size: 25px; color: var(--ana); line-height: 1.2; }
.twa-uye-sayi span { font-size: 12.6px; color: var(--sonuk); }

.twa-seviye-cubuk { background: var(--beyaz); border-radius: 14px; padding: 16px 18px; box-shadow: var(--golge); margin-bottom: 16px; }
.twa-seviye-ust { display: flex; justify-content: space-between; gap: 12px; font-size: 13.6px; margin-bottom: 9px; flex-wrap: wrap; }
.twa-seviye-ust span:first-child { font-weight: 700; }
.twa-seviye-ust span:last-child { color: var(--sonuk); }
.twa-cubuk { height: 9px; background: var(--zemin); border-radius: 99px; overflow: hidden; }
.twa-cubuk i { display: block; height: 100%; background: linear-gradient(90deg, var(--ana), #3d94e8); border-radius: 99px; }

@media (min-width: 700px) {
	.twa-profil-kapak { height: 230px; }
	.twa-profil-bas { flex-direction: row; text-align: left; padding: 22px 26px; }
	.twa-profil-logo { width: 104px; height: 104px; flex-basis: 104px; margin-top: -64px; }
	.twa-profil-etiket { justify-content: flex-start; }
	.twa-profil-eylem { margin-left: auto; }
	.twa-hizli-eylem { grid-template-columns: repeat(4, 1fr); }
	.twa-uye-sayilar { grid-template-columns: repeat(4, 1fr); }
	.twa-profil-bolum { padding: 24px 26px; }
	.twa-profil-bolum .twa-izgara { grid-template-columns: repeat(2, 1fr); }
	.twa-profil-kimlik h1 { font-size: 27px; }
}