/* =========================================================================
   MAHİR DÜNDAR GAYRİMENKUL — TASARIM TOKEN'LARI
   Tek kaynak: renk, tipografi, boşluk, hareket, katman.
   Koyu tema varsayılan; açık tema tam ikinci bir tema olarak tanımlanır.
   ========================================================================= */

:root {
	/* --- Marka ------------------------------------------------------ */
	--md-accent:            #f47b20;
	--md-accent-hover:      #d96611;
	--md-accent-bright:     #fa8f3d;
	--md-accent-soft:       rgba(244, 123, 32, 0.12);
	--md-accent-line:       rgba(244, 123, 32, 0.38);
	--md-on-accent:         #101112;

	/* --- Durum renkleri --------------------------------------------- */
	--md-ok:                #3f9d6d;
	--md-ok-soft:           rgba(63, 157, 109, 0.14);
	--md-warn:              #d99a2b;
	--md-warn-soft:         rgba(217, 154, 43, 0.14);
	--md-danger:            #cf4b3f;
	--md-danger-soft:       rgba(207, 75, 63, 0.14);

	/* --- Tipografi --------------------------------------------------- */
	--md-font-display:      "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--md-font-body:         "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Akışkan ölçek: mobil → geniş masaüstü arasında kesintisiz. */
	--md-fs-display:        clamp(2.75rem, 1.15rem + 6.2vw, 5.5rem);   /*  44 → 88 */
	--md-fs-h1:             clamp(2.125rem, 1.15rem + 3.9vw, 4rem);    /*  34 → 64 */
	--md-fs-h2:             clamp(1.75rem, 1.1rem + 2.7vw, 3rem);      /*  28 → 48 */
	--md-fs-h3:             clamp(1.375rem, 1.05rem + 1.3vw, 2rem);    /*  22 → 32 */
	--md-fs-h4:             clamp(1.125rem, 1rem + 0.6vw, 1.5rem);     /*  18 → 24 */
	--md-fs-h5:             clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /*  17 → 20 */
	--md-fs-xl:             1.125rem;
	--md-fs-lg:             1.0625rem;
	--md-fs-base:           1rem;
	--md-fs-sm:             0.9375rem;
	--md-fs-xs:             0.8125rem;
	--md-fs-2xs:            0.6875rem;

	--md-lh-tight:          1.06;
	--md-lh-snug:           1.22;
	--md-lh-base:           1.62;

	--md-ls-display:        -0.03em;
	--md-ls-heading:        -0.022em;
	--md-ls-caps:           0.14em;

	/* --- Boşluk (8px ritmi) ------------------------------------------ */
	--md-s-1:  0.25rem;
	--md-s-2:  0.5rem;
	--md-s-3:  0.75rem;
	--md-s-4:  1rem;
	--md-s-5:  1.25rem;
	--md-s-6:  1.5rem;
	--md-s-8:  2rem;
	--md-s-10: 2.5rem;
	--md-s-12: 3rem;
	--md-s-16: 4rem;
	--md-s-20: 5rem;
	--md-s-24: 6rem;

	--md-section-y:         clamp(4.5rem, 7vw, 8.5rem);
	--md-section-y-sm:      clamp(3rem, 5vw, 5.5rem);

	/* --- Yerleşim ----------------------------------------------------- */
	--md-container:         1360px;
	--md-container-wide:    1600px;
	--md-container-text:    68ch;
	--md-gutter:            clamp(1.25rem, 4vw, 3rem);
	--md-grid-gap:          clamp(1rem, 1.6vw, 1.5rem);

	--md-header-h:          84px;
	--md-header-h-sticky:   66px;

	/* --- Köşe yarıçapı (mimari disiplin: keskin) ---------------------- */
	--md-r-xs:              2px;
	--md-r-sm:              4px;
	--md-r-md:              8px;
	--md-r-lg:              12px;
	--md-r-full:            999px;

	/* --- Hareket ------------------------------------------------------ */
	--md-dur-fast:          0.18s;
	--md-dur:               0.34s;
	--md-dur-slow:          0.62s;
	--md-ease:              cubic-bezier(0.22, 0.61, 0.36, 1);
	--md-ease-out:          cubic-bezier(0.16, 1, 0.3, 1);

	/* --- Katmanlar ----------------------------------------------------- */
	--md-z-base:            1;
	--md-z-sticky:          60;
	--md-z-header:          80;
	--md-z-drawer:          90;
	--md-z-modal:           100;
	--md-z-toast:           110;

	color-scheme: dark;
}

/* =========================================================================
   KOYU TEMA — varsayılan
   Zemin obsidyen, yüzeyler yukarı doğru aydınlanır, ayrım gölge değil çizgi.
   ========================================================================= */
:root,
:root[data-theme="dark"] {
	--md-bg:                #0b0c0d;
	--md-bg-alt:            #0e0f10;
	--md-surface:           #101112;
	--md-surface-2:         #181a1c;
	--md-surface-3:         #1d1f21;
	--md-surface-inset:     #0d0e0f;

	--md-text:              #f4f4f2;
	--md-text-2:            #a5a5a5;
	--md-text-3:            #747474;

	--md-border:            rgba(255, 255, 255, 0.10);
	--md-border-soft:       rgba(255, 255, 255, 0.06);
	--md-border-strong:     rgba(255, 255, 255, 0.18);

	--md-overlay:           rgba(8, 9, 10, 0.72);
	--md-glass:             rgba(11, 12, 13, 0.82);
	--md-scrim:             linear-gradient(180deg, rgba(11, 12, 13, 0) 0%, rgba(11, 12, 13, 0.28) 42%, rgba(11, 12, 13, 0.88) 100%);

	--md-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.4);
	--md-shadow-md:         0 12px 40px rgba(0, 0, 0, 0.46);
	--md-shadow-lg:         0 28px 80px rgba(0, 0, 0, 0.58);
	--md-glow:              0 8px 32px rgba(244, 123, 32, 0.14);

	/* Ters yüzey: koyu temada açık kutular (ör. istatistik bandı). */
	--md-invert-bg:         #f5f4f1;
	--md-invert-text:       #101112;

	color-scheme: dark;
}

/* =========================================================================
   AÇIK TEMA — kırık beyaz zemin, saf beyaz kart, siyah tipografi
   ========================================================================= */
:root[data-theme="light"] {
	--md-bg:                #f5f4f1;
	--md-bg-alt:            #efece6;
	--md-surface:           #ffffff;
	--md-surface-2:         #f7f6f3;
	--md-surface-3:         #efece6;
	--md-surface-inset:     #eae7e0;

	--md-text:              #101112;
	--md-text-2:            #5c5b58;
	--md-text-3:            #8a8885;

	--md-border:            #e5e3df;
	--md-border-soft:       #eeece8;
	--md-border-strong:     #d5d1c9;

	--md-overlay:           rgba(16, 17, 18, 0.55);
	--md-glass:             rgba(245, 244, 241, 0.86);
	--md-scrim:             linear-gradient(180deg, rgba(16, 17, 18, 0) 0%, rgba(16, 17, 18, 0.22) 40%, rgba(16, 17, 18, 0.82) 100%);

	--md-shadow-sm:         0 1px 2px rgba(16, 17, 18, 0.05);
	--md-shadow-md:         0 10px 34px rgba(16, 17, 18, 0.08);
	--md-shadow-lg:         0 26px 70px rgba(16, 17, 18, 0.12);
	--md-glow:              0 8px 32px rgba(244, 123, 32, 0.16);

	--md-accent-hover:      #d96611;
	--md-accent-soft:       rgba(244, 123, 32, 0.10);
	--md-accent-line:       rgba(244, 123, 32, 0.32);

	--md-invert-bg:         #101112;
	--md-invert-text:       #f4f4f2;

	color-scheme: light;
}

/* Sistem tercihi: kullanıcı açıkça seçmediyse işletim sistemini dinle. */
@media (prefers-color-scheme: light) {
	:root[data-theme="auto"] {
		--md-bg:            #f5f4f1;
		--md-bg-alt:        #efece6;
		--md-surface:       #ffffff;
		--md-surface-2:     #f7f6f3;
		--md-surface-3:     #efece6;
		--md-surface-inset: #eae7e0;
		--md-text:          #101112;
		--md-text-2:        #5c5b58;
		--md-text-3:        #8a8885;
		--md-border:        #e5e3df;
		--md-border-soft:   #eeece8;
		--md-border-strong: #d5d1c9;
		--md-overlay:       rgba(16, 17, 18, 0.55);
		--md-glass:         rgba(245, 244, 241, 0.86);
		--md-scrim:         linear-gradient(180deg, rgba(16, 17, 18, 0) 0%, rgba(16, 17, 18, 0.22) 40%, rgba(16, 17, 18, 0.82) 100%);
		--md-shadow-sm:     0 1px 2px rgba(16, 17, 18, 0.05);
		--md-shadow-md:     0 10px 34px rgba(16, 17, 18, 0.08);
		--md-shadow-lg:     0 26px 70px rgba(16, 17, 18, 0.12);
		--md-accent-hover:  #d96611;
		--md-accent-soft:   rgba(244, 123, 32, 0.10);
		--md-accent-line:   rgba(244, 123, 32, 0.32);
		--md-invert-bg:     #101112;
		--md-invert-text:   #f4f4f2;
		color-scheme: light;
	}
}

/* =========================================================================
   TERS BÖLÜM — tema ne olursa olsun karşıt zeminde çalışan alanlar.
   İstatistik bandı, kapanış CTA'sı ve footer bunu kullanır.
   ========================================================================= */
.md-invert {
	--md-bg:            #0b0c0d;
	--md-surface:       #101112;
	--md-surface-2:     #181a1c;
	--md-surface-3:     #1d1f21;
	--md-text:          #f4f4f2;
	--md-text-2:        #a5a5a5;
	--md-text-3:        #747474;
	--md-border:        rgba(255, 255, 255, 0.10);
	--md-border-soft:   rgba(255, 255, 255, 0.06);
	--md-border-strong: rgba(255, 255, 255, 0.18);

	background-color: var(--md-bg);
	color: var(--md-text);
	color-scheme: dark;
}