/*
Theme Name: Aile
Description: hukukdavasi.com için hafif tema. İki renk: koyu yeşil ve krem. Önce telefon; mektup gibi dar tek sütun.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: aile
*/

:root {
	--y: #1E3B2F;
	--c: #EFE9DC;
	--baslik: "Fraunces", Georgia, serif;
	--govde: "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;
	--ic: 1.4rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c); color: var(--y); font: 400 1.0625rem/1.65 var(--govde); padding-bottom: 5.5rem; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 500; line-height: 1.15; letter-spacing: 0; margin: 0 0 .7em; font-variation-settings: "SOFT" 0, "WONK" 0; }
h1 em, h2 em, h3 em { font-style: normal; font-weight: 650; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 3px; }
.atla { position: absolute; left: -999px; top: 0; background: var(--y); color: var(--c); padding: .5rem 1rem; z-index: 99; }
.atla:focus { left: 0; }

.kap { max-width: 40rem; margin: 0 auto; padding: 0 var(--ic); }
.bolum { padding: 4rem 0; position: relative; overflow: hidden; }
.krem { background: var(--c); color: var(--y); }
.yesil { background: var(--y); color: var(--c); }

.ust-satir { font-size: .92rem; letter-spacing: .02em; margin-bottom: 1.5rem; }
.yazi-link { font-family: var(--baslik); font-weight: 500; font-size: 1.15rem; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.yazi-link::after { content: " →"; font-style: normal; }
.dugme { display: inline-block; background: var(--y); color: var(--c); text-decoration: none; padding: .9rem 1.5rem; border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.yesil .dugme { background: var(--c); color: var(--y); }

/* ---------- Üst ---------- */
.ust { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.4rem var(--ic) 0; max-width: 72rem; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo .isaret { width: 2.6rem; height: 2.6rem; flex: none; }
.logo-yazi { display: flex; flex-direction: column; }
.logo-ad { font: italic 400 1.55rem/1 var(--baslik); letter-spacing: -.01em; }
.logo-alt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .3rem; }
.custom-logo { max-height: 3rem; width: auto; }
.ana-menu { width: 100%; border-top: 1px solid var(--y); border-bottom: 1px solid var(--y); }
.ana-menu ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .9rem; }
.ana-menu a { display: block; padding: .7rem 0; text-decoration: none; font-size: .86rem; white-space: nowrap; }
.ana-menu .current-menu-item a, .ana-menu a:hover { text-decoration: underline; text-underline-offset: .35em; }

/* ---------- Açılış ---------- */
.acilis { padding: 3rem 0 4.5rem; }
.acilis h1 { font-size: clamp(2.3rem, 10vw, 4.2rem); letter-spacing: -.005em; }
.acilis-metin { font-size: 1.12rem; max-width: 32rem; }
.acilis-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }
.acilis-kemer { position: absolute; right: -3.5rem; bottom: -1px; width: 12rem; height: 12rem; color: var(--y); opacity: .14; pointer-events: none; }

/* ---------- Alanlar ---------- */
.alanlar h2, .makaleler h2 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.alan-liste { margin: 2rem 0 0; }
.alan-liste > div { padding: 1.6rem 0; border-top: 1px solid rgba(239, 233, 220, .35); }
.alan-liste dt { font: 500 clamp(1.6rem, 6.5vw, 2.1rem)/1.15 var(--baslik); margin-bottom: .6rem; }
.alan-liste dd { margin: 0; font-size: 1.05rem; }
.alan-ek { padding-top: 1.6rem; border-top: 1px solid rgba(239, 233, 220, .35); font-size: 1.05rem; }

/* ---------- Hakkında ---------- */
.hakkinda blockquote { margin: 0 0 1.5rem; padding: 0; }
.hakkinda blockquote p { font: 500 clamp(1.5rem, 6vw, 2.2rem)/1.3 var(--baslik); }
.hakkinda blockquote p::before { content: "“"; display: block; font-size: 4rem; line-height: .6; margin-bottom: .6rem; font-style: normal; }

/* ---------- Makaleler ---------- */
.makale-liste { list-style: none; margin: 1.5rem 0 2rem; padding: 0; counter-reset: m; }
.makale-liste li { counter-increment: m; padding: 1rem 0 1rem 2.2rem; position: relative; }
.makale-liste li::before { content: counter(m); position: absolute; left: 0; top: 1.05rem; font: 500 1.2rem/1 var(--baslik); opacity: .8; }
.makale-liste a { font: 500 1.2rem/1.35 var(--baslik); text-decoration: none; }
.makale-liste a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- İletişim ---------- */
.iletisim h2 { font-size: clamp(2rem, 8.5vw, 3rem); }
.iletisim-bilgi dl { margin: 1.5rem 0 2rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: .7rem 1rem; }
.iletisim-bilgi dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .2rem; }
.iletisim-bilgi dd { margin: 0; font-family: var(--baslik); font-size: 1.15rem; line-height: 1.4; word-break: break-word; }
.iletisim-bilgi a { text-decoration: none; }

/* ---------- Form ---------- */
.talep { display: grid; gap: 1.1rem; background: var(--y); color: var(--c); padding: 1.5rem 1.25rem; border-radius: 1.25rem; }
.talep p { margin: 0; }
.talep-tuzak { position: absolute !important; left: -9999px; }
.talep-alan label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.talep-alan label span { font-weight: 400; opacity: .85; }
.talep input[type=text], .talep input[type=tel], .talep select, .talep textarea {
	width: 100%; font: 400 1rem/1.4 var(--govde); color: var(--y); background: var(--c);
	border: 1px solid var(--c); border-radius: .6rem; padding: .75rem .85rem; -webkit-appearance: none; appearance: none;
}
.talep select { background-image: linear-gradient(45deg, transparent 50%, var(--y) 50%), linear-gradient(-45deg, transparent 50%, var(--y) 50%); background-position: right 1.1rem center, right .8rem center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.talep textarea { resize: vertical; }
.talep ::placeholder { color: var(--y); opacity: .45; }
.talep input:focus, .talep select:focus, .talep textarea:focus { outline: 2px solid var(--c); outline-offset: 2px; }
.talep-onay { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; }
.talep-onay input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--c); flex: none; }
.talep button { font: 600 1rem/1 var(--govde); background: var(--c); color: var(--y); border: 0; border-radius: 999px; padding: .95rem 2rem; cursor: pointer; }
.talep button:hover { text-decoration: underline; }
.talep button:disabled { opacity: .6; cursor: wait; }
.talep-durum { font-family: var(--baslik); font-weight: 500; }

/* ---------- Yazı / sayfa ---------- */
.yazi { padding-top: 3rem; }
.yazi-bas { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--y); }
.yazi-bas h1 { font-size: clamp(2rem, 8vw, 3.2rem); margin: 0; }
.metin { font-size: 1.08rem; line-height: 1.75; }
.metin h2 { font-size: 1.75rem; margin-top: 2.4rem; }
.metin h3, .metin h4 { font-family: var(--baslik); font-size: 1.35rem; font-weight: 500; margin-top: 2rem; }
.metin a { text-decoration: underline; text-underline-offset: .2em; }
.metin blockquote { margin: 1.8rem 0; padding-left: 1.2rem; border-left: 3px solid currentColor; font: 500 1.2rem/1.5 var(--baslik); }
.metin img { display: block; margin: 1.5rem 0; border-radius: .75rem; }
.metin table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.metin th, .metin td { border-bottom: 1px solid var(--y); padding: .5rem; text-align: left; }
.arsiv { list-style: none; margin: 0; padding: 0; }
.arsiv li { padding: 1.3rem 0; border-bottom: 1px solid rgba(30, 59, 47, .25); }
.arsiv a { font: 500 1.4rem/1.3 var(--baslik); text-decoration: none; }
.arsiv p { margin: .5rem 0 0; font-size: .98rem; }
.nav-links { display: flex; gap: 1rem; margin-top: 2rem; }

/* ---------- Alt bilgi ---------- */
.alt { background: var(--y); color: var(--c); padding: 3rem 0 2.5rem; text-align: center; }
.alt .isaret { width: 3rem; height: 3rem; margin: 0 auto 1rem; display: block; }
.alt a { text-decoration: none; }
.alt-not { font-size: .875rem; opacity: .85; margin: 1.5rem 0 0; }

/* ---------- Yüzen iletişim: yuvarlak kapsül ---------- */
.cubuk {
	position: fixed; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
	display: flex; background: var(--y); color: var(--c); border: 1px solid var(--c); border-radius: 999px; padding: .3rem;
}
.cubuk a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 8.5rem; padding: .75rem 1.2rem; border-radius: 999px; text-decoration: none; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.cubuk a:first-child { background: var(--c); color: var(--y); }
.cubuk svg { width: 1.2rem; height: 1.2rem; flex: none; max-width: none; }

/* ================= Masaüstü ================= */
@media (min-width: 48rem) {
	:root { --ic: 2rem; }
	body { padding-bottom: 0; font-size: 1.125rem; }
	.bolum { padding: 6rem 0; }

	.ust { flex-direction: row; justify-content: space-between; padding-top: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--y); }
	.ana-menu { width: auto; border: 0; }
	.ana-menu ul { gap: 2rem; }
	.ana-menu a { font-size: 1rem; }

	.acilis { padding: 6rem 0 7rem; }
	.acilis .kap { max-width: 52rem; }
	.acilis-kemer { right: 4%; width: 26rem; height: 26rem; opacity: .1; }

	.alanlar .kap, .makaleler .kap { max-width: 64rem; }
	.alan-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
	.alan-liste > div { padding-top: 2rem; }

	.hakkinda .kap { max-width: 52rem; text-align: center; }

	.makale-liste { columns: 2; column-gap: 3rem; }
	.makale-liste li { break-inside: avoid; }

	.iletisim .kap { max-width: 64rem; }
	.iletisim-ic { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; align-items: start; }
	.talep { grid-template-columns: 1fr 1fr; padding: 2rem; column-gap: 1rem; }
	.talep-alan:has(textarea), .talep-alan:has(select), .talep-onay, .talep-gonder, .talep-durum { grid-column: 1 / -1; }

	.yazi .kap { max-width: 44rem; }

	.cubuk { bottom: 1.5rem; }
	body { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.metin iframe { max-width: 100%; border: 0; }
.metin p, .metin li, .metin div { text-align: left !important; }