/*
 * base.css — her sayfada yuklenen global stil.
 * Icerik: token'lar, reset, tipografi, container, her sablonda gecen bilesenler.
 *
 * Sablona ozel bilesenler kendi CSS dosyasinda durur.
 */

/* ═══════════════ Token'lar ═══════════════ */
:root {
	/* Marka — kaynak: logonun kendisinden okunan #018277 */
	--c-teal: #018277;
	--c-teal-deep: #06403b;
	--c-teal-dark: #04302c;
	--c-teal-mid: #0a4f48;
	--c-teal-line: #10574f;
	--c-mint: #5ce0d5;
	--c-mint-soft: #6fbcb1;
	--c-teal-pale: #a3ccc6;
	--c-teal-mist: #cfe6e2;

	/* Sicak taraf — pedodonti dunyasi */
	--c-cream: #fbf6ef;
	--c-cream-deep: #f0e6d8;
	--c-sand: #b08d5b;
	--c-sand-line: #ecdfcd;

	/* Notrler — duz gri degil, teal'e hafif kacik */
	--c-ink: #1d2b29;
	--c-body: #4d6360;
	--c-body-soft: #6b7d7a;
	--c-muted: #9bb0ad;
	--c-line: #dde5e3;
	--c-line-soft: #eaeeed;
	--c-mist: #f5f8f7;
	--c-white: #fff;

	/* Olcu */
	--container: 1280px;
	--gutter: 52px;
	--section-y: 84px;

	/* Yaricap */
	--r-card: 12px;
	--r-media: 10px;
	--r-btn: 6px;
	--r-pill: 999px;

	/* Tipografi */
	--font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Work Sans", -apple-system, "Segoe UI", Arial, sans-serif;

	/* Tip olcegi — masaustu */
	--t-h1: 60px;
	--t-h2: 40px;
	--t-h3: 24px;
	--t-lead: 18px;
	--t-body: 16.5px;
	--t-small: 14.5px;
	--t-eyebrow: 11.5px;
}

@media (max-width: 900px) {
	:root {
		--gutter: 24px;
		--section-y: 56px;
		--t-h1: 40px;
		--t-h2: 30px;
		--t-h3: 21px;
		--t-lead: 17px;
	}
}

/*
 * Iki renk dunyasi.
 *
 * Tasarimin omurgasi: ortodonti koyu teal, pedodonti krem. Ayni sablon
 * her iki dunyayi da basar — fark sadece bu degiskenlerde.
 * Kullanim: <section class="world world--ortho"> ... </section>
 */
.world--ortho {
	--w-bg: var(--c-teal-deep);
	--w-fg: var(--c-white);
	--w-body: var(--c-teal-pale);
	--w-accent: var(--c-mint);
	--w-accent-hover: #9ff0e6;
	--w-line: var(--c-teal-line);
	--w-media: #075c54;
	--w-btn-bg: var(--c-mint);
	--w-btn-fg: var(--c-teal-deep);
}

.world--pediatric {
	--w-bg: var(--c-cream);
	--w-fg: var(--c-ink);
	--w-body: var(--c-body-soft);
	--w-accent: var(--c-sand);
	--w-accent-hover: var(--c-teal-deep);
	--w-line: var(--c-sand-line);
	--w-media: var(--c-cream-deep);
	--w-btn-bg: var(--c-teal-deep);
	--w-btn-fg: var(--c-white);
}

.world {
	background: var(--w-bg);
	color: var(--w-fg);
}

/* ═══════════════ Reset ═══════════════ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

/* ═══════════════ Tipografi ═══════════════ */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--t-body);
	font-weight: 300;
	line-height: 1.7;
	color: var(--c-body);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--c-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--t-h1);
}

h2 {
	font-size: var(--t-h2);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

h3 {
	font-size: var(--t-h3);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--c-teal);
	text-decoration: none;
	transition: color .15s ease;
}

a:hover,
a:focus-visible {
	color: var(--c-teal-deep);
}

/*
 * Dunya icindeki duz baglar aksan rengini alir.
 * :where() ile ozgulluk sifirlanir — yoksa .world a (0,2,0) butonlarin
 * kendi renklerini (.btn--primary, 0,1,0) eziyor ve WhatsApp butonunun
 * yazisi kahverengi cikiyordu.
 */
:where(.world) a {
	color: var(--w-accent);
}

/*
 * Dunya icinde hover.
 *
 * Bu kural sart: temel a:hover kurali rengi --c-teal-deep'e cekiyor ve o renk
 * ortodonti dunyasinin zemininin ta kendisi — bag hover'da kayboluyordu.
 * Ozgullugu a:hover ile ayni (0,1,1), bu yuzden ondan SONRA gelmesi gerekir.
 */
:where(.world) a:hover,
:where(.world) a:focus-visible {
	color: var(--w-accent-hover);
}

:focus-visible {
	outline: 2px solid var(--c-teal);
	outline-offset: 3px;
}

strong,
b {
	font-weight: 600;
}

/* ═══════════════ Yerlesim ═══════════════ */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--section-y);
}

/* Tam genislikte iki yariya bolunen bloklar — hero, kurucular, iletisim. */
.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ═══════════════ Bilesenler ═══════════════ */

/* Ust etiket — her sablonda, her bolum basliginda. */
.eyebrow {
	font-family: var(--font-display);
	font-size: var(--t-eyebrow);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-teal);
}

.world .eyebrow {
	color: var(--w-accent);
}

/* Buton */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 15px 26px;
	border-radius: var(--r-btn);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn svg {
	flex: none;
}

.btn--primary {
	background: var(--c-teal-deep);
	color: var(--c-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--c-teal);
	color: var(--c-white);
}

.btn--mint {
	background: var(--c-mint);
	color: var(--c-teal-deep);
}

.btn--mint:hover,
.btn--mint:focus-visible {
	background: #7ceade;
	color: var(--c-teal-deep);
}

.btn--ghost {
	background: transparent;
	border: 1px solid var(--c-line);
	color: var(--c-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--c-teal);
	color: var(--c-teal);
}

/* Dunya icinde buton, dunyanin rengini alir. */
.world .btn--world {
	background: var(--w-btn-bg);
	color: var(--w-btn-fg);
}

/* Ok ile biten metin bagi */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--t-small);
	font-weight: 600;
}

/* Gorsel yer tutucu.
 * Fotograf gelene kadar duruyor; etiketi hangi cekim oldugunu yaziyor.
 * Gorseller yerlestikce bu bilesen tamamen silinecek. */
.ph {
	--ph-ink: rgb(29 43 41 / 34%);

	position: relative;
	background: var(--c-line);
	border-radius: var(--r-media);
	overflow: hidden;
}

.world--ortho .ph {
	--ph-ink: rgb(212 240 236 / 42%);
}

.world--pediatric .ph {
	--ph-ink: rgb(120 96 62 / 45%);
}

.world .ph {
	background: var(--w-media);
}

.ph::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px dashed var(--ph-ink);
	border-radius: 4px;
}

.ph__label {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ph-ink);
}

/* Erisilebilirlik */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 100;
	padding: 12px 20px;
	background: var(--c-teal-deep);
	color: var(--c-white);
	border-radius: 0 0 var(--r-btn) var(--r-btn);
	font-size: var(--t-small);
	font-weight: 600;
}

.skip-link:focus {
	top: 0;
	color: var(--c-white);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}