/*
Theme Name:        Canavart
Theme URI:         https://canav.art
Author:            Canavart Atölyesi
Author URI:        https://canav.art
Description:       El yapımı deri kitap kaplamaları, cüzdanlar, kemerler, saat kayışları ve 3D figürler için tasarlanmış; karanlık, esrarengiz ve altın detaylı lüks e-ticaret teması. WooCommerce ile tam uyumludur.
Version:           1.0.0
Requires at least: 6.2
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       canavart
Tags:              e-commerce, dark, custom-menu, custom-logo, featured-images, translation-ready
*/

/* -------------------------------------------------------------------------
 * CANAVART TASARIM SİSTEMİ — DESIGN TOKENS
 * -------------------------------------------------------------------------
 * Tüm tema ve plugin stilleri bu değişkenlerden beslenir.
 * Marka rengini değiştirmek istersen SADECE burayı düzenlemen yeterli.
 * ---------------------------------------------------------------------- */

:root {
	/* ---- Zemin Katmanları (sıcak alt tonlu karanlık — düz siyah değil) ---- */
	--ca-bg-deepest:   #0c0a08;   /* Header, footer, hero zemini            */
	--ca-bg-deep:      #14100d;   /* Ana karanlık bölümler                  */
	--ca-bg-raised:    #1d1814;   /* Kartlar, yükseltilmiş yüzeyler         */
	--ca-bg-overlay:   rgba(12, 10, 8, 0.72); /* Görsel üstü karartma       */

	/* ---- Fildişi Katmanlar (kontrast/aydınlık bölümler) ---- */
	--ca-ivory:        #f4eee1;   /* Aydınlık bölüm zemini                  */
	--ca-ivory-soft:   #ece3cf;   /* Aydınlık kart zemini                   */
	--ca-parchment:    #e7d9b8;   /* PDF'teki "Concia" paneli tonu          */

	/* ---- Altın Paleti (mat, eskitilmiş şampanya altını) ---- */
	--ca-gold:         #c9a45c;   /* Ana vurgu: çizgiler, ikonlar, linkler  */
	--ca-gold-bright:  #e9d7a7;   /* Hover parıltısı, gradyan tepe noktası  */
	--ca-gold-dark:    #8a6c35;   /* Gölgeli altın, kenarlıklar             */
	--ca-gold-faint:   rgba(201, 164, 92, 0.18); /* İnce ayraç çizgileri    */
	--ca-gold-glow:    rgba(201, 164, 92, 0.35); /* Hover ışıması           */

	/* İşlemeli altın efekti — logo altı çizgiler, buton kenarları vb. */
	--ca-gold-gradient: linear-gradient(
		110deg,
		var(--ca-gold-dark)   0%,
		var(--ca-gold)        35%,
		var(--ca-gold-bright) 50%,
		var(--ca-gold)        65%,
		var(--ca-gold-dark)   100%
	);

	/* ---- Metin Renkleri ---- */
	--ca-text:         #eae3d4;   /* Karanlık zeminde ana metin             */
	--ca-text-muted:   #a99f8c;   /* Karanlık zeminde ikincil metin         */
	--ca-ink:          #241d15;   /* Aydınlık zeminde ana metin             */
	--ca-ink-muted:    #5d5344;   /* Aydınlık zeminde ikincil metin         */

	/* ---- Durum Renkleri ---- */
	--ca-success:      #7da87b;
	--ca-error:        #b3573f;
	--ca-sale:         #a4452c;   /* İndirim etiketi — bordo/kızıl          */

	/* ---- Tipografi ---- */
	--ca-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ca-font-body:    'Jost', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

	--ca-fs-hero:      clamp(2.6rem, 6vw, 4.5rem);
	--ca-fs-h1:        clamp(2.2rem, 4.5vw, 3.4rem);
	--ca-fs-h2:        clamp(1.8rem, 3.5vw, 2.6rem);
	--ca-fs-h3:        clamp(1.3rem, 2.2vw, 1.65rem);
	--ca-fs-body:      1rem;
	--ca-fs-small:     0.875rem;
	--ca-fs-label:     0.75rem;    /* Büyük harfli üst etiketler            */

	--ca-tracking-wide:   0.18em;  /* Etiketler: "HEDEFİMİZ" gibi           */
	--ca-tracking-nav:    0.12em;  /* Menü öğeleri                          */

	/* ---- Boşluk Ölçeği ---- */
	--ca-space-xs:     0.5rem;
	--ca-space-sm:     1rem;
	--ca-space-md:     2rem;
	--ca-space-lg:     4rem;
	--ca-space-xl:     7rem;      /* Bölümler arası cömert nefes alanı      */

	/* ---- Yapısal ---- */
	--ca-container:    1280px;
	--ca-container-narrow: 820px;
	--ca-radius:       2px;       /* Lüks his: keskine yakın, minimal yuvarlama */
	--ca-border-gold:  1px solid var(--ca-gold-faint);

	/* ---- Gölge & Derinlik ---- */
	--ca-shadow-card:  0 18px 45px -18px rgba(0, 0, 0, 0.65);
	--ca-shadow-gold:  0 0 0 1px var(--ca-gold-faint), 0 20px 50px -20px rgba(0, 0, 0, 0.8);

	/* ---- Hareket ---- */
	--ca-ease:         cubic-bezier(0.25, 0.46, 0.2, 1);
	--ca-duration:     0.45s;
	--ca-duration-slow: 0.9s;

	/* ---- Katman Düzeni ---- */
	--ca-z-header:     100;
	--ca-z-dropdown:   200;
	--ca-z-overlay:    900;
	--ca-z-modal:      1000;
}

/* -------------------------------------------------------------------------
 * TEMEL SIFIRLAMA & GÖVDE
 * (Detaylı stiller assets/css/main.css içinde — Adım 4)
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--ca-bg-deep);
	color: var(--ca-text);
	font-family: var(--ca-font-body);
	font-size: var(--ca-fs-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* ---- Marka kimlikli metin seçimi ---- */
::selection {
	background-color: var(--ca-gold);
	color: var(--ca-bg-deepest);
}

/* ---- Erişilebilirlik: klavye odak halkası (a11y) ---- */
:focus-visible {
	outline: 2px solid var(--ca-gold);
	outline-offset: 3px;
	border-radius: var(--ca-radius);
}

/* ---- Ekran okuyucu metinleri (WordPress standardı) ---- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--ca-bg-raised);
	clip-path: none;
	color: var(--ca-gold);
	display: block;
	font-size: var(--ca-fs-small);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--ca-z-modal);
}

/* ---- Hareket azaltma tercihi olan kullanıcılara saygı (a11y) ---- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}