/*
Theme Name: Aether
Theme URI: 
Author: 
Author URI: 
Description: 6PM ve Apple kalitesinde; glassmorphism tasarım diline sahip, limited-edition sokak modası dropları ile elektronik, mobilya ve aksesuar gibi çok kategorili ürünleri bir arada sunan, WooCommerce destekli özel (custom) e-ticaret temasıdır.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aether
Tags: e-commerce, woocommerce, custom-colors, custom-menu, dark-mode, glassmorphism
*/

/* =============================================================================
   1. TASARIM TOKEN'LARI (CSS DEĞİŞKENLERİ)
   -----------------------------------------------------------------------------
   Bütün tema bu tek token sistemi üzerine kurulu. Renk, tipografi, radius,
   gölge ve animasyon değerleri SADECE burada tanımlanır; başka hiçbir yerde
   "hardcoded" renk kullanılmaz. Karanlık mod, aynı değişken isimlerinin
   `.dark` sınıfı altında yeniden tanımlanmasıyla çalışır — JS sadece bir class
   toggle'lıyor, geri kalanı CSS cascade hallediyor.
   ========================================================================== */

:root {
	/* --- Yüzey & Metin Renkleri (Aydınlık Mod) --- */
	--color-bg: #f5f5f7;
	--color-bg-elevated: #ffffff;
	--color-surface: rgba(255, 255, 255, 0.72);
	--color-text-primary: #1d1d1f;
	--color-text-secondary: #6e6e73;
	--color-text-tertiary: #86868b;

	/* Marka vurgu rengi: Şimdilik premium/nötr bir varsayılan olarak Apple'ın
	   ikonik mavisiyle başlıyoruz. Kendi marka renginizi belirlediğinizde
	   sadece bu iki satırı değiştirmeniz yeterli — tüm tema otomatik güncellenir. */
	--color-accent: #0071e3;
	--color-accent-hover: #0077ed;

	--color-border: rgba(0, 0, 0, 0.08);
	--color-success: #1fae5f;
	--color-error: #d70015;
	--color-warning: #f5a623;

	/* --- Glassmorphism --- */
	--glass-bg: rgba(255, 255, 255, 0.65);
	--glass-bg-strong: rgba(255, 255, 255, 0.85);
	--glass-border: rgba(255, 255, 255, 0.45);
	--glass-blur: 20px;
	--glass-blur-strong: 32px;

	/* --- Gölgeler --- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08);
	--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-glass-hover: 0 20px 48px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);

	/* --- Aurora Arka Plan ---
	   Glassmorphism blur efekti, arkasında bulanıklaştıracak bir şey olmadan
	   (düz renk üstünde) neredeyse görünmez. Bu yumuşak, büyük, renkli
	   gradyan lekeleri camın ARKASINA anlam katıyor; body'ye background-image
	   olarak ekleniyor (bkz. aşağıdaki base stiller). */
	--aurora-bg:
		radial-gradient(ellipse 640px 640px at 10% 15%, rgba(0, 113, 227, 0.10), transparent 60%),
		radial-gradient(ellipse 560px 560px at 90% 10%, rgba(255, 95, 130, 0.08), transparent 60%),
		radial-gradient(ellipse 680px 680px at 50% 105%, rgba(130, 90, 255, 0.07), transparent 60%);

	/* --- Tipografi --- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* Editoryal/blog içerikleri için: Inter'in temiz "Apple" hissine karşılık,
	   sıcak ve karakterli bir serif — mağaza ve blog deneyimini kasıtlı olarak
	   birbirinden ayırır ama aynı token sistemine bağlı kalır. */
	--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* Akıcı (fluid) başlık ölçeği: viewport ile birlikte yumuşakça büyüyüp küçülür */
	--text-hero: clamp(2.75rem, 2rem + 4vw, 5.5rem);
	--text-display: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	--text-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--text-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

	/* --- Yarıçap (Radius) --- */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-2xl: 36px;
	--radius-full: 9999px;

	/* --- Hareket (Motion) --- */
	--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--duration-slow: 500ms;

	/* --- Katman (Z-Index) --- */
	--z-header: 100;
	--z-dropdown: 200;
	--z-modal: 300;
	--z-toast: 400;
}

/* --- Karanlık Mod: Aynı token isimleri, farklı değerler ---
   dark-mode.js bu class'ı <html> elementine ekleyip çıkarıyor;
   sayfa yenilenmeden bütün renkler cascade ile güncelleniyor. */
.dark {
	--color-bg: #000000;
	--color-bg-elevated: #1d1d1f;
	--color-surface: rgba(29, 29, 31, 0.65);
	--color-text-primary: #f5f5f7;
	--color-text-secondary: #a1a1a6;
	--color-text-tertiary: #6e6e73;

	--color-accent: #2997ff;
	--color-accent-hover: #52a9ff;

	--color-border: rgba(255, 255, 255, 0.12);
	--color-success: #32d74b;
	--color-error: #ff453a;
	--color-warning: #ffd60a;

	--glass-bg: rgba(29, 29, 31, 0.55);
	--glass-bg-strong: rgba(29, 29, 31, 0.8);
	--glass-border: rgba(255, 255, 255, 0.09);

	/* Siyah zeminde renkler daha zengin okunur, o yüzden opaklığı biraz artırdık. */
	--aurora-bg:
		radial-gradient(ellipse 640px 640px at 10% 15%, rgba(41, 151, 255, 0.18), transparent 60%),
		radial-gradient(ellipse 560px 560px at 90% 10%, rgba(255, 95, 130, 0.12), transparent 60%),
		radial-gradient(ellipse 680px 680px at 50% 105%, rgba(150, 110, 255, 0.14), transparent 60%);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
	--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-glass-hover: 0 20px 48px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* =============================================================================
   2. TEMEL (BASE) STİLLER
   Not: Tailwind CDN'in kendi "preflight" reset'ini yüklediğini varsayıyoruz,
   bu yüzden burada sadece marka/premium detaylara odaklanıyoruz.
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

body {
	background-color: var(--color-bg);
	background-image: var(--aurora-bg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--duration-base) var(--ease-smooth),
		color var(--duration-base) var(--ease-smooth);
}

::selection {
	background-color: var(--color-accent);
	color: #ffffff;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: var(--radius-full);
	border: 2px solid var(--color-bg);
}

/* İlk sayfa yüklemesinde renklerin "çakmasını" (flash / cross-fade) engeller.
   Bu class functions.php'deki engelleyici script tarafından eklenir ve
   dark-mode.js tarafından ilk boyamadan hemen sonra kaldırılır. */
.no-transition,
.no-transition * {
	transition: none !important;
}

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

/* =============================================================================
   3. GLASSMORPHISM BİLEŞEN SINIFLARI
   Tailwind utility'leriyle birlikte kullanılmak üzere tasarlandı
   (örn: <div class="glass-card p-8 grid gap-4">).
   ========================================================================== */

.glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-glass);
	transition: background-color var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth),
		box-shadow var(--duration-base) var(--ease-smooth);
}

.glass-strong {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--glass-blur-strong));
	backdrop-filter: blur(var(--glass-blur-strong));
}

/* Ürün kartları, kategori kartları vb. için hover'da hafifçe yükselen versiyon */
.glass-card {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-glass);
	transition: transform var(--duration-base) var(--ease-smooth),
		box-shadow var(--duration-base) var(--ease-smooth),
		background-color var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth);
}

.glass-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-glass-hover);
}

/* header.php'de kullanılacak: kaydırdıkça bulanıklaşan sticky nav için hazır.
   JS tarafı (scroll listener) header.php ile birlikte bir sonraki adımda gelecek. */
.glass-header {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border-bottom: 1px solid var(--glass-border);
	transition: background-color var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth),
		box-shadow var(--duration-base) var(--ease-smooth);
}

.glass-header.is-scrolled {
	background: var(--glass-bg-strong);
	box-shadow: var(--shadow-sm);
}