/* =========================================================================
 * CANAVART — ANA TASARIM SİSTEMİ
 * Bağımlılık: style.css (design tokens)
 * ========================================================================= */

/* ---- 1. TEMEL & TİPOGRAFİ ------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ca-font-display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 1rem;
}

p { margin: 0 0 1rem; }

a {
	color: var(--ca-gold);
	text-decoration: none;
	transition: color var(--ca-duration) var(--ca-ease);
}

a:hover { color: var(--ca-gold-bright); }

.ca-container {
	max-width: var(--ca-container);
	margin: 0 auto;
	padding: 0 var(--ca-space-md);
}

.ca-container--narrow { max-width: var(--ca-container-narrow); }

.ca-icon { vertical-align: middle; }

/* ---- 2. ETİKET, AYRAÇ, BUTONLAR -------------------------------------- */

.ca-label {
	font-size: var(--ca-fs-label);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	color: var(--ca-gold);
	font-weight: 400;
}

.ca-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 1.2rem auto;
}

.ca-ornament::before,
.ca-ornament::after {
	content: "";
	height: 1px;
	width: 70px;
	background: linear-gradient(90deg, transparent, var(--ca-gold));
}

.ca-ornament::after {
	background: linear-gradient(90deg, var(--ca-gold), transparent);
}

.ca-ornament span {
	width: 8px;
	height: 8px;
	border: 1px solid var(--ca-gold);
	transform: rotate(45deg);
}

.ca-btn-gold {
	display: inline-block;
	padding: 1.05rem 3rem;
	border: 1px solid var(--ca-gold);
	background: transparent;
	color: var(--ca-gold-bright);
	font-family: var(--ca-font-body);
	font-size: 0.78rem;
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.5s var(--ca-ease);
}

.ca-btn-gold:hover {
	background: var(--ca-gold);
	color: var(--ca-bg-deepest);
	box-shadow: 0 0 40px var(--ca-gold-glow);
}

/* Fildişi zeminlerde koyu buton varyantı */
.ca-btn-dark {
	display: inline-block;
	padding: 1.05rem 3rem;
	border: 1px solid var(--ca-ink);
	background: var(--ca-ink);
	color: var(--ca-ivory);
	font-size: 0.78rem;
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.5s var(--ca-ease);
}

.ca-btn-dark:hover {
	background: var(--ca-gold-dark);
	border-color: var(--ca-gold-dark);
	color: var(--ca-ivory);
}

/* ---- 3. HEADER -------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--ca-z-header);
	background: linear-gradient(180deg, rgba(12, 10, 8, 0.97), rgba(12, 10, 8, 0.92));
	backdrop-filter: blur(12px);
	border-bottom: var(--ca-border-gold);
	transition: box-shadow var(--ca-duration) var(--ca-ease);
}

.site-header.is-scrolled {
	box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.8);
}

.header-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.3rem var(--ca-space-md) 0.8rem;
	transition: padding var(--ca-duration) var(--ca-ease);
}

.is-scrolled .header-top { padding-top: 0.7rem; padding-bottom: 0.4rem; }

.header-socials { display: flex; gap: 0.9rem; }

.header-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--ca-text-muted);
	transition: all var(--ca-duration) var(--ca-ease);
}

.header-socials a:hover {
	color: var(--ca-gold);
	border-color: var(--ca-gold-faint);
}

.header-socials .ca-icon { width: 15px; height: 15px; }

.header-brand { text-align: center; }

.site-logo { display: inline-block; text-align: center; }

.site-logo img { max-height: 72px; width: auto; margin: 0 auto; }

.site-logo-text {
	display: block;
	font-family: var(--ca-font-display);
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	background: var(--ca-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.site-logo-tagline {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.6rem;
	letter-spacing: 0.55em;
	text-transform: uppercase;
	color: var(--ca-text-muted);
}

.header-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.3rem;
}

.header-action {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--ca-text-muted);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.header-action:hover { color: var(--ca-gold); }

.ca-cart-count {
	background: var(--ca-gold);
	color: var(--ca-bg-deepest);
	font-size: 0.65rem;
	font-weight: 500;
	border-radius: 50%;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.header-lang .ca-widget-title { display: none; }

/* ---- Ana menü ---- */

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0.8rem 0 1rem;
	display: flex;
	justify-content: center;
	gap: 3rem;
}

.main-nav a {
	position: relative;
	padding-bottom: 0.4rem;
	font-size: 0.8rem;
	letter-spacing: var(--ca-tracking-nav);
	text-transform: uppercase;
	color: var(--ca-text-muted);
}

.main-nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--ca-gold);
	transform: translateX(-50%);
	transition: width 0.4s var(--ca-ease);
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
	color: var(--ca-gold-bright);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after { width: 100%; }

/* Alt menü (dropdown) */
.main-nav li { position: relative; }

.main-nav ul ul {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	padding: 0.6rem 0;
	background: var(--ca-bg-raised);
	border: var(--ca-border-gold);
	box-shadow: var(--ca-shadow-card);
	opacity: 0;
	visibility: hidden;
	transition: all 0.35s var(--ca-ease);
	z-index: var(--ca-z-dropdown);
}

.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.main-nav ul ul a {
	display: block;
	padding: 0.55rem 1.4rem;
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

.main-nav ul ul a::after { display: none; }

.nav-toggle { display: none; }

/* ---- 4. HERO ----------------------------------------------------------- */

.ca-hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background-image:
		linear-gradient(180deg, rgba(12, 10, 8, 0.82), rgba(20, 16, 13, 0.92)),
		var(--ca-hero-image, radial-gradient(ellipse at 20% 20%, rgba(201, 164, 92, 0.07), transparent 50%));
	background-size: cover;
	background-position: center;
}

/* İç altın çerçeve — lüks hissiyatın anahtarı */
.ca-hero::before {
	content: "";
	position: absolute;
	inset: 28px;
	border: 1px solid var(--ca-gold-faint);
	pointer-events: none;
}

.ca-hero::after {
	content: "❖";
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 1rem;
	color: var(--ca-gold-dark);
	font-size: 0.9rem;
	background: var(--ca-bg-deepest);
}

.ca-hero-inner { max-width: 820px; padding: 4rem var(--ca-space-md); }

.ca-hero h1 {
	font-size: var(--ca-fs-hero);
	margin: 1.4rem 0 1.6rem;
	color: var(--ca-text);
}

.ca-hero h1 em {
	font-style: italic;
	background: var(--ca-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ca-hero p {
	max-width: 560px;
	margin: 0 auto 2.8rem;
	color: var(--ca-text-muted);
	font-size: 1.02rem;
}

.ca-hero-scroll {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--ca-gold-dark);
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* ---- 5. BÖLÜMLER -------------------------------------------------------- */

.ca-section { padding: var(--ca-space-xl) 0; }

.ca-section--dark { background: var(--ca-bg-deep); }

.ca-section--deep { background: var(--ca-bg-deepest); }

.ca-section--ivory {
	background: var(--ca-ivory);
	color: var(--ca-ink);
}

.ca-section-head { text-align: center; margin-bottom: 3.5rem; }

.ca-section-head h2 { font-size: var(--ca-fs-h2); }

.ca-section--ivory .ca-section-head h2 { color: var(--ca-ink); }

.ca-section-text {
	max-width: 620px;
	margin: 0.5rem auto 0;
	color: var(--ca-text-muted);
	font-size: 0.95rem;
}

.ca-section--ivory .ca-section-text { color: var(--ca-ink-muted); }

.ca-section-actions {
	display: flex;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 3.5rem;
	flex-wrap: wrap;
}

.ca-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.ca-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }

/* ---- 6. ÜRÜN KARTI ------------------------------------------------------ */

.ca-product-card {
	background: var(--ca-bg-raised);
	border: 1px solid rgba(201, 164, 92, 0.1);
	transition: transform 0.5s var(--ca-ease), border-color 0.5s var(--ca-ease), box-shadow 0.5s var(--ca-ease);
}

.ca-product-card:hover {
	transform: translateY(-6px);
	border-color: var(--ca-gold-glow);
	box-shadow: var(--ca-shadow-card);
}

.ca-card-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ca-bg-deepest);
}

.ca-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ca-ease);
}

.ca-product-card:hover .ca-card-media img { transform: scale(1.05); }

.ca-badge-sale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 0.3rem 0.7rem;
	background: var(--ca-sale);
	color: var(--ca-ivory);
	font-size: 0.62rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ca-card-body { padding: 1.4rem 1.5rem 1.6rem; text-align: center; }

.ca-card-body h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

.ca-card-body h3 a { color: var(--ca-text); }

.ca-card-body h3 a:hover { color: var(--ca-gold-bright); }

.ca-price { color: var(--ca-gold); letter-spacing: 0.05em; font-size: 0.95rem; }

.ca-price del { color: var(--ca-text-muted); margin-right: 0.5rem; font-size: 0.8rem; }

.ca-price ins { text-decoration: none; }

/* Fildişi zemin varyantı (mağaza sayfası) */
.ca-section--ivory .ca-product-card,
.ca-shop-context .ca-product-card {
	background: #fff;
	border-color: rgba(138, 108, 53, 0.2);
}

.ca-section--ivory .ca-product-card:hover,
.ca-shop-context .ca-product-card:hover { border-color: var(--ca-gold); }

.ca-section--ivory .ca-card-body h3 a,
.ca-shop-context .ca-card-body h3 a { color: var(--ca-ink); }

/* ---- 7. HİKÂYE BÖLÜMÜ ---------------------------------------------------- */

.ca-story {
	padding: var(--ca-space-xl) 0;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(201, 164, 92, 0.08), transparent 60%),
		linear-gradient(120deg, #171210 40%, #1e1712);
}

.ca-story-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.ca-story-media {
	aspect-ratio: 4 / 3;
	border: var(--ca-border-gold);
	background: linear-gradient(135deg, #2a2014, #171009 70%);
	overflow: hidden;
}

.ca-story-media img { width: 100%; height: 100%; object-fit: cover; }

.ca-panel {
	background: var(--ca-parchment);
	color: var(--ca-ink);
	padding: 3.2rem;
}

.ca-panel .ca-label { color: var(--ca-gold-dark); }

.ca-panel h2 { font-size: 2rem; margin: 0.8rem 0 1.2rem; color: var(--ca-ink); }

.ca-panel p { color: var(--ca-ink-muted); font-size: 0.93rem; }

.ca-stats {
	display: flex;
	gap: 3rem;
	margin-top: 2rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(138, 108, 53, 0.3);
}

.ca-stats strong {
	display: block;
	font-family: var(--ca-font-display);
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--ca-ink);
}

.ca-stats span {
	font-size: 0.68rem;
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	color: var(--ca-gold-dark);
}

/* ---- 8. DEĞERLER & YORUMLAR ---------------------------------------------- */

.ca-value-card {
	background: var(--ca-parchment);
	color: var(--ca-ink);
	padding: 2.4rem 2rem;
	text-align: center;
}

.ca-value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1.2rem;
	border: 1px solid var(--ca-gold-dark);
	border-radius: 50%;
	color: var(--ca-gold-dark);
}

.ca-value-card h3 { color: var(--ca-ink); font-size: 1.25rem; }

.ca-value-card p { color: var(--ca-ink-muted); font-size: 0.9rem; margin: 0; }

.ca-quote-card {
	margin: 0;
	padding: 2.2rem 2rem;
	background: var(--ca-bg-raised);
	border: 1px solid rgba(201, 164, 92, 0.12);
}

.ca-quote-card h3 { font-size: 1.15rem; color: var(--ca-gold-bright); }

.ca-quote-card p { color: var(--ca-text-muted); font-size: 0.9rem; }

.ca-quote-card footer {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--ca-gold-faint);
}

.ca-quote-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ca-gold);
	border-radius: 50%;
	font-family: var(--ca-font-display);
	font-size: 1.2rem;
	color: var(--ca-gold);
}

.ca-quote-card cite { font-style: normal; color: var(--ca-text); font-size: 0.9rem; }

.ca-quote-card cite small {
	display: block;
	color: var(--ca-text-muted);
	font-size: 0.75rem;
}

/* ---- 9. FOOTER ------------------------------------------------------------ */

.site-footer {
	position: relative;
	background: var(--ca-bg-deepest);
	border-top: var(--ca-border-gold);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 180px;
	height: 1px;
	background: var(--ca-gold-gradient);
}

.footer-brand { text-align: center; padding: 3.5rem 0 0; }

.site-logo--footer .site-logo-text { font-size: 1.5rem; }

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr 1.3fr;
	gap: 3rem;
	padding-top: 3rem;
	padding-bottom: 3.5rem;
}

.footer-heading {
	font-size: 1rem;
	letter-spacing: 0.1em;
	color: var(--ca-gold);
	margin-bottom: 1.2rem;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }

.footer-col li { margin-bottom: 0.65rem; }

.footer-col a { color: var(--ca-text-muted); font-size: 0.85rem; }

.footer-col a:hover { color: var(--ca-gold-bright); }

.footer-newsletter-text { color: var(--ca-text-muted); font-size: 0.85rem; }

/* E-bülten formu (widget içindeki input/button'ları hedefler) */
.footer-col--newsletter input[type="email"],
.footer-col--newsletter input[type="text"] {
	width: 100%;
	padding: 0.7rem 1rem;
	background: var(--ca-bg-raised);
	border: var(--ca-border-gold);
	color: var(--ca-text);
	font-family: var(--ca-font-body);
	font-size: 0.85rem;
}

.footer-col--newsletter input:focus { outline: none; border-color: var(--ca-gold); }

.footer-col--newsletter button,
.footer-col--newsletter input[type="submit"] {
	margin-top: 0.6rem;
	padding: 0.65rem 1.4rem;
	background: var(--ca-gold);
	border: none;
	color: var(--ca-bg-deepest);
	font-family: var(--ca-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ca-duration) var(--ca-ease);
}

.footer-col--newsletter button:hover,
.footer-col--newsletter input[type="submit"]:hover { background: var(--ca-gold-bright); }

.footer-bottom {
	max-width: var(--ca-container);
	margin: 0 auto;
	padding: 1.4rem var(--ca-space-md);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 1px solid rgba(201, 164, 92, 0.1);
	font-size: 0.75rem;
	color: var(--ca-text-muted);
}

.footer-payments { display: flex; gap: 0.8rem; }

.footer-payments span {
	padding: 0.25rem 0.6rem;
	border: var(--ca-border-gold);
	border-radius: var(--ca-radius);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	color: var(--ca-gold-dark);
	text-transform: uppercase;
}

/* ---- 10. GENEL SAYFA İÇERİĞİ (yasal sayfalar vb.) -------------------------- */

.ca-page-hero {
	padding: 5rem 0 3rem;
	text-align: center;
	background: var(--ca-bg-deepest);
	border-bottom: var(--ca-border-gold);
}

.ca-page-hero h1 { font-size: var(--ca-fs-h1); margin: 0.8rem 0 0; }

.ca-entry-content {
	max-width: var(--ca-container-narrow);
	margin: 0 auto;
	padding: var(--ca-space-lg) var(--ca-space-md);
	color: var(--ca-text-muted);
	font-size: 0.95rem;
}

.ca-entry-content h2,
.ca-entry-content h3 { color: var(--ca-text); margin-top: 2.2rem; }

.ca-entry-content ul,
.ca-entry-content ol { padding-left: 1.4rem; }

.ca-entry-content li { margin-bottom: 0.5rem; }

.ca-entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.ca-entry-content th,
.ca-entry-content td {
	padding: 0.7rem 1rem;
	border: var(--ca-border-gold);
	text-align: left;
	font-size: 0.88rem;
}

.ca-entry-content th { color: var(--ca-gold); font-weight: 500; }

/* ---- 11. FORM TEMELLERİ ----------------------------------------------------- */

.ca-form input[type="text"],
.ca-form input[type="email"],
.ca-form input[type="password"],
.ca-form input[type="tel"],
.ca-form input[type="number"],
.ca-form select,
.ca-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--ca-bg-raised);
	border: var(--ca-border-gold);
	border-radius: var(--ca-radius);
	color: var(--ca-text);
	font-family: var(--ca-font-body);
	font-size: 0.9rem;
	transition: border-color var(--ca-duration) var(--ca-ease);
}

.ca-form input:focus,
.ca-form select:focus,
.ca-form textarea:focus {
	outline: none;
	border-color: var(--ca-gold);
}

/* ---- 12. SCROLL ANİMASYONLARI ----------------------------------------------- */

.ca-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--ca-duration-slow) var(--ca-ease), transform var(--ca-duration-slow) var(--ca-ease);
}

.ca-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Grid içindeki kartlara kademeli gecikme */
.ca-grid-4 .ca-reveal:nth-child(2),
.ca-grid-3 .ca-reveal:nth-child(2) { transition-delay: 0.12s; }

.ca-grid-4 .ca-reveal:nth-child(3),
.ca-grid-3 .ca-reveal:nth-child(3) { transition-delay: 0.24s; }

.ca-grid-4 .ca-reveal:nth-child(4) { transition-delay: 0.36s; }

/* ---- 10b. ARŞİV & BLOG LİSTESİ --------------------------------------- */

.ca-archive-section {
	padding: var(--ca-space-xl) 0;
	background: var(--ca-bg-deep);
}

.ca-page-summary {
	max-width: 640px;
	margin: 1.2rem auto 0;
	color: var(--ca-text-muted);
	font-size: var(--ca-fs-small);
	line-height: 1.8;
}

.ca-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--ca-space-md);
}

.ca-post-card {
	display: flex;
	flex-direction: column;
	background: var(--ca-bg-raised);
	border: var(--ca-border-gold);
	border-radius: var(--ca-radius);
	overflow: hidden;
	transition: border-color var(--ca-duration) var(--ca-ease),
	            box-shadow var(--ca-duration) var(--ca-ease),
	            transform var(--ca-duration) var(--ca-ease);
}

.ca-post-card:hover {
	border-color: var(--ca-gold);
	box-shadow: var(--ca-shadow-card);
	transform: translateY(-4px);
}

.ca-post-thumb {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ca-bg-deepest);
}

.ca-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ca-duration-slow) var(--ca-ease);
}

.ca-post-card:hover .ca-post-thumb img { transform: scale(1.05); }

.ca-post-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.8rem 1.6rem 1.6rem;
}

.ca-post-date {
	font-size: var(--ca-fs-label);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	color: var(--ca-gold);
}

.ca-post-title {
	margin: 0.7rem 0 0.9rem;
	font-family: var(--ca-font-display);
	font-size: var(--ca-fs-h3);
	line-height: 1.3;
}

.ca-post-title a {
	color: var(--ca-text);
	transition: color var(--ca-duration) var(--ca-ease);
}

.ca-post-title a:hover { color: var(--ca-gold-bright); }

.ca-post-excerpt {
	flex: 1;
	margin: 0 0 1.4rem;
	color: var(--ca-text-muted);
	font-size: 0.9rem;
	line-height: 1.75;
}

.ca-post-more {
	align-self: flex-start;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--ca-gold-faint);
	color: var(--ca-gold);
	font-size: var(--ca-fs-label);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	transition: border-color var(--ca-duration) var(--ca-ease),
	            color var(--ca-duration) var(--ca-ease);
}

.ca-post-more span[aria-hidden] {
	display: inline-block;
	margin-left: 0.4rem;
	transition: transform var(--ca-duration) var(--ca-ease);
}

.ca-post-more:hover {
	border-bottom-color: var(--ca-gold);
	color: var(--ca-gold-bright);
}

.ca-post-more:hover span[aria-hidden] { transform: translateX(4px); }

/* ---- 10c. SAYFALAMA (the_posts_pagination) --------------------------- */

.ca-archive-section .navigation.pagination {
	margin-top: var(--ca-space-lg);
}

.ca-archive-section .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ca-archive-section .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.9rem;
	border: var(--ca-border-gold);
	color: var(--ca-text-muted);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	transition: all var(--ca-duration) var(--ca-ease);
}

.ca-archive-section .page-numbers:hover {
	border-color: var(--ca-gold);
	color: var(--ca-gold-bright);
}

.ca-archive-section .page-numbers.current {
	background: var(--ca-gold);
	border-color: var(--ca-gold);
	color: var(--ca-bg-deepest);
}

.ca-archive-section .page-numbers.dots {
	border-color: transparent;
	pointer-events: none;
}

/* ---- 10d. SAYFA EKLERİ (page.php) ------------------------------------ */

.ca-page-media {
	padding: var(--ca-space-md) 0 0;
	background: var(--ca-bg-deep);
}

.ca-page-media img {
	width: 100%;
	height: auto;
	border: var(--ca-border-gold);
	border-radius: var(--ca-radius);
}

.ca-page-article { background: var(--ca-bg-deep); }

.ca-page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--ca-space-md);
	padding-top: 1.2rem;
	border-top: var(--ca-border-gold);
	font-size: 0.82rem;
}

.ca-page-links span { color: var(--ca-text-muted); }

.ca-page-links a {
	padding: 0.3rem 0.7rem;
	border: var(--ca-border-gold);
	color: var(--ca-gold);
}

.ca-page-links a:hover { border-color: var(--ca-gold); color: var(--ca-gold-bright); }

.ca-edit-link {
	margin-top: var(--ca-space-md);
	font-size: var(--ca-fs-label);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
}

.ca-edit-link a { color: var(--ca-gold-dark); }
.ca-edit-link a:hover { color: var(--ca-gold); }

/* Panelden doldurulmamış firma bilgisi yer tutucusu (Canavart Core) */
.ca-legal-missing {
	padding: 0.1em 0.5em;
	border: 1px dashed var(--ca-error);
	border-radius: var(--ca-radius);
	background: rgba(179, 87, 63, 0.12);
	color: var(--ca-error);
	font-size: 0.85em;
	font-style: normal;
	white-space: nowrap;
}

/* ---- 10e. BOŞ DURUM & 404 -------------------------------------------- */

.ca-empty-state {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--ca-space-lg) var(--ca-space-md);
	text-align: center;
}

.ca-empty-state p {
	margin: 0 0 var(--ca-space-md);
	color: var(--ca-text-muted);
	line-height: 1.85;
}

.ca-404 {
	padding: var(--ca-space-xl) 0;
	background: var(--ca-bg-deepest);
	text-align: center;
}

.ca-404-code {
	display: block;
	font-family: var(--ca-font-display);
	font-size: clamp(5rem, 16vw, 11rem);
	line-height: 0.9;
	letter-spacing: 0.04em;
	background: var(--ca-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.85;
}

.ca-404-title {
	margin: 0.6rem 0 1.2rem;
	font-size: var(--ca-fs-h2);
}

.ca-404-text {
	max-width: 540px;
	margin: 0 auto var(--ca-space-md);
	color: var(--ca-text-muted);
	font-size: var(--ca-fs-small);
	line-height: 1.85;
}

.ca-404-search {
	max-width: 440px;
	margin: 0 auto var(--ca-space-md);
}

.ca-404-search form {
	display: flex;
	gap: 0.6rem;
}

.ca-404-search input[type="search"],
.ca-404-search input[type="text"] {
	flex: 1;
	padding: 0.85rem 1rem;
	background: var(--ca-bg-raised);
	border: var(--ca-border-gold);
	border-radius: var(--ca-radius);
	color: var(--ca-text);
	font-family: var(--ca-font-body);
	font-size: 0.9rem;
}

.ca-404-search input[type="search"]:focus,
.ca-404-search input[type="text"]:focus {
	outline: none;
	border-color: var(--ca-gold);
}

.ca-404-search button,
.ca-404-search input[type="submit"] {
	padding: 0.85rem 1.6rem;
	background: transparent;
	border: 1px solid var(--ca-gold);
	border-radius: var(--ca-radius);
	color: var(--ca-gold-bright);
	font-family: var(--ca-font-body);
	font-size: var(--ca-fs-label);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--ca-duration) var(--ca-ease);
}

.ca-404-search button:hover,
.ca-404-search input[type="submit"]:hover {
	background: var(--ca-gold);
	color: var(--ca-bg-deepest);
}

.ca-404-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ca-space-sm);
}

.ca-404-home {
	color: var(--ca-text-muted);
	font-size: var(--ca-fs-label);
	letter-spacing: var(--ca-tracking-wide);
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.2rem;
	transition: all var(--ca-duration) var(--ca-ease);
}

.ca-404-home:hover {
	color: var(--ca-gold);
	border-bottom-color: var(--ca-gold-faint);
}

/* ---- 10f. ARŞİV/404 RESPONSIVE --------------------------------------- */

@media (max-width: 640px) {

	.ca-archive-section { padding: var(--ca-space-lg) 0; }

	.ca-post-list { grid-template-columns: 1fr; }

	.ca-404 { padding: var(--ca-space-lg) 0; }

	.ca-404-search form { flex-direction: column; }

	.ca-404-actions { flex-direction: column; }

	.ca-404-actions .ca-btn-gold { width: 100%; }
}

/* ---- 1b. HEADER IZGARA SABİTLEME -------------------------------------
   Sorun: .header-top ızgarası "1fr auto 1fr" olarak tanımlı, ancak
   sosyal medya bağlantıları Özelleştirici'de boşsa o blok HİÇ
   basılmıyor. Izgarada 3 yerine 2 öğe kalınca logo 1. sütuna kayıyor
   ve ortalanmış görünmüyor.
 
   Çözüm: her öğeye sütununu açıkça söylüyoruz. Sosyal bağlantılar boş
   olsa bile logo daima ortada, aksiyonlar daima sağda kalır.
   -------------------------------------------------------------------- */
 
.header-socials { grid-column: 1; justify-self: start; }
.header-brand   { grid-column: 2; justify-self: center; }
.header-actions { grid-column: 3; justify-self: end; }
 
/* ---- 1c. HEADER İKON BOYUTLARI ---------------------------------------
   .ca-icon için genel bir boyut tanımlı değildi; yalnızca sosyal
   medya ikonları boyutlandırılmıştı. Hesap ve sepet ikonları bu
   yüzden tarayıcı varsayılanına düşüyordu.
   -------------------------------------------------------------------- */
 
.header-action .ca-icon {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
}
 
.nav-toggle .ca-icon {
	width: 22px;
	height: 22px;
}
 
/* Sepet ikonu ile sayaç arasını biraz daralt */
.header-action--cart { gap: 0.35rem; }
 
/* ---- 1d. LOGO ÖLÇÜSÜ --------------------------------------------------
   Özelleştirici'den yüklenen özel logonun yüksekliğini sabitler.
   Logo hâlâ büyük/küçük gelirse yalnızca aşağıdaki iki `max-height`
   değerini değiştirmeniz yeterlidir.
   -------------------------------------------------------------------- */
 
.site-header .site-logo img,
.site-header .custom-logo-link img,
.site-header img.custom-logo {
	max-height: 64px;
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
}
 
.is-scrolled .site-header .site-logo img,
.is-scrolled .site-header img.custom-logo {
	max-height: 48px;
	transition: max-height var(--ca-duration) var(--ca-ease);
}
 
/* ---- 1e. FOOTER KOLON DENGESİ ----------------------------------------
   Footer ızgarası kolon sayısına göre kendini toparlasın; bir menü
   konumu boşsa kalan kolonlar orantısız genişlemesin.
   -------------------------------------------------------------------- */
 
.footer-grid {
	align-items: start;
}
 
.footer-col--newsletter { min-width: 0; }
 
/* E-bülten alanına yerleştirilen widget'ın görselleri taşmasın */
.footer-col--newsletter img {
	max-width: 200px;
	height: auto;
}
 
/* ---- 1f. HEADER RESPONSIVE İNCE AYAR ---------------------------------- */
 
@media (max-width: 900px) {
 
	/* Mobilde hamburger 1. sütunu, logo 2., aksiyonlar 3. sütunu alır */
	.nav-toggle      { grid-column: 1; justify-self: start; }
	.header-socials  { display: none; }
	.header-brand    { grid-column: 2; }
	.header-actions  { grid-column: 3; }
 
	.header-action-label { display: none; }
 
	.site-header .site-logo img,
	.site-header img.custom-logo { max-height: 44px; }
}

/* ---- 14a. ÖNE ÇIKAN KARTLARDA HOVER ONARIMI ---------------------------
   Sorun: `.ca-reveal.is-visible { transform: none }` kuralı dosyada
   ürün kartı kuralından SONRA geldiği ve aynı özgüllüğe sahip olduğu
   için, hover'daki yukarı kalkma hareketini eziyordu. Mağaza
   sayfasındaki kartlarda `ca-reveal` sınıfı bulunmadığından sorun
   yalnızca ana sayfada görülüyordu.
 
   Çözüm: iki sınıfı birlikte hedefleyerek özgüllüğü yükseltiyoruz.
   -------------------------------------------------------------------- */
 
.ca-product-card.ca-reveal.is-visible:hover {
	transform: translateY(-6px);
}
 
/*
 * Giriş animasyonu (0.9s) hover için fazla ağır kalıyordu. Kart
 * göründükten sonra hover geçişini daha çevik bir süreye çekiyoruz.
 */
.ca-product-card.ca-reveal.is-visible {
	transition: transform 0.55s var(--ca-ease),
	            border-color 0.55s var(--ca-ease),
	            box-shadow 0.55s var(--ca-ease),
	            opacity var(--ca-duration-slow) var(--ca-ease);
}
 
/* ---- 14b. HERO ÇERÇEVESİ ----------------------------------------------
   Düz bir dikdörtgen yerine: köşelerde altın gönyeler, üst ve alt
   kenarın ortasında parlayan gradyan segmentler. Köşe gönyeleri tek
   bir öğe üzerinde dört ayrı arka plan katmanıyla çizilir; fazladan
   HTML gerekmez.
   -------------------------------------------------------------------- */
 
.ca-hero::before {
	background-image:
		/* Sol üst */
		linear-gradient(90deg,  var(--ca-gold), transparent),
		linear-gradient(180deg, var(--ca-gold), transparent),
		/* Sağ üst */
		linear-gradient(270deg, var(--ca-gold), transparent),
		linear-gradient(180deg, var(--ca-gold), transparent),
		/* Sol alt */
		linear-gradient(90deg,  var(--ca-gold), transparent),
		linear-gradient(0deg,   var(--ca-gold), transparent),
		/* Sağ alt */
		linear-gradient(270deg, var(--ca-gold), transparent),
		linear-gradient(0deg,   var(--ca-gold), transparent);
 
	background-size:
		96px 1px, 1px 96px,
		96px 1px, 1px 96px,
		96px 1px, 1px 96px,
		96px 1px, 1px 96px;
 
	background-position:
		top left,     top left,
		top right,    top right,
		bottom left,  bottom left,
		bottom right, bottom right;
 
	background-repeat: no-repeat;
}
 
/* Üst kenarın ortasındaki parlak segment — footer'daki ayracın eşi */
.ca-hero-inner::before {
	content: "";
	position: absolute;
	top: 28px;
	left: 50%;
	width: 200px;
	height: 1px;
	margin-left: -100px;
	background: var(--ca-gold-gradient);
	pointer-events: none;
}
 
/* Alt kenarda simetrik segment + eşkenar dörtgen */
.ca-hero-inner::after {
	content: "";
	position: absolute;
	bottom: 28px;
	left: 50%;
	width: 200px;
	height: 1px;
	margin-left: -100px;
	background: var(--ca-gold-gradient);
	pointer-events: none;
}
 
/* Üstteki eşkenar dörtgen süsü biraz büyütüp yumuşak nefes verelim */
.ca-hero::after {
	top: 15px;
	font-size: 1.05rem;
	color: var(--ca-gold);
	animation: ca-hero-glow 6s ease-in-out infinite;
}
 
@keyframes ca-hero-glow {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}
 
@media (prefers-reduced-motion: reduce) {
	.ca-hero::after { animation: none; opacity: 0.8; }
}
 
@media (max-width: 640px) {
 
	.ca-hero-inner::before,
	.ca-hero-inner::after { width: 120px; margin-left: -60px; }
 
	.ca-hero::before {
		background-size:
			52px 1px, 1px 52px, 52px 1px, 1px 52px,
			52px 1px, 1px 52px, 52px 1px, 1px 52px;
	}
}
 
/* ---- 14c. KAYDIRINCA KOMPAKT KILIÇ AMBLEMİ ----------------------------
   Sayfa kaydırıldığında geniş kelime logosu yerini dikey bir kılıç
   amblemine bırakır. Amblem CSS içine gömülü SVG'dir; ayrı dosya
   yüklemeye ve fazladan ağ isteğine gerek yoktur.
 
   Aynı görselin bağımsız dosyası: assets/img/canavart-kilic.svg
   -------------------------------------------------------------------- */
 
.site-logo {
	position: relative;
	transition: opacity var(--ca-duration) var(--ca-ease);
}
 
/* Kaydırıldığında kelime logosunu yumuşakça sil */
.is-scrolled .site-logo img,
.is-scrolled .site-logo .site-logo-text,
.is-scrolled .site-logo .site-logo-tagline {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ca-ease), visibility 0.3s;
}
 
/* Yerine kılıç amblemini getir */
.site-logo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%) scale(0.75);
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cdefs%3E%3ClinearGradient id=%22caGold%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23E8D5A8%22/%3E%3Cstop offset=%2245%25%22 stop-color=%22%23C9A45C%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%238C6B33%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M32 3 L37 20 L37 41 L27 41 L27 20 Z%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M32 8 L32 39%22 stroke=%22%230C0A08%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 opacity=%220.55%22/%3E%3Cpath d=%22M12 41 L52 41 L47 47 L17 47 Z%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M9 44 L12.5 40.5 L16 44 L12.5 47.5 Z%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M48 44 L51.5 40.5 L55 44 L51.5 47.5 Z%22 fill=%22url(%23caGold)%22/%3E%3Crect x=%2229.5%22 y=%2247%22 width=%225%22 height=%2210%22 rx=%221.2%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M32 55 L36 59 L32 63 L28 59 Z%22 fill=%22url(%23caGold)%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s var(--ca-ease) 0.1s,
	            transform 0.45s var(--ca-ease) 0.1s,
	            visibility 0.35s;
}
 
.is-scrolled .site-logo::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}
 
/* Kaydırma durumunda header yüksekliği kompakt kalsın */
.is-scrolled .header-brand { min-height: 40px; }
 
@media (prefers-reduced-motion: reduce) {
	.site-logo::after,
	.is-scrolled .site-logo img { transition-duration: 0.01ms; }
}
 
/* ---- 14d. ALTIN GRADYANLI SEPETE EKLE ---------------------------------
   Düz kenarlıklı buton yerine, üzerine gelince soldan sağa akan altın
   dolgu. Geçiş süresi bilinçli olarak uzun tutuldu; ani renk değişimi
   ucuz durur, yavaş akış pahalı hissettirir.
   -------------------------------------------------------------------- */
 
.ca-card-actions .button,
.ca-shop-context .ca-card-actions .button,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
	position: relative;
	overflow: hidden;
	z-index: 0;
	border: 1px solid var(--ca-gold);
	background: transparent;
	color: var(--ca-gold-bright);
	transition: color 0.5s var(--ca-ease),
	            border-color 0.5s var(--ca-ease),
	            box-shadow 0.5s var(--ca-ease),
	            transform 0.35s var(--ca-ease);
}
 
/* Soldan sağa açılan altın dolgu katmanı */
.ca-card-actions .button::before,
.woocommerce a.button.add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		var(--ca-gold-dark) 0%,
		var(--ca-gold) 38%,
		#e8d5a8 62%,
		var(--ca-gold) 100%
	);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--ca-ease);
}
 
.ca-card-actions .button:hover,
.ca-shop-context .ca-card-actions .button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover {
	color: var(--ca-bg-deepest);
	border-color: var(--ca-gold-bright);
	box-shadow: 0 6px 22px rgba(201, 164, 92, 0.22);
}
 
.ca-card-actions .button:hover::before,
.woocommerce a.button.add_to_cart_button:hover::before,
.woocommerce button.single_add_to_cart_button:hover::before {
	transform: scaleX(1);
}
 
/* Basılı tutarken hafif çöküş — dokunsal geri bildirim */
.ca-card-actions .button:active,
.woocommerce a.button.add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:active {
	transform: translateY(1px);
}
 
/* Sepete eklendi göstergesi */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--ca-gold-bright);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
 
/* ---- 14e. HESABIM SAYFALARI: KARANLIK TEMA ---------------------------- */
 
.woocommerce-account,
.woocommerce-account .ca-container,
.woocommerce-order-received,
.woocommerce-checkout {
	background: var(--ca-bg-deep);
	color: var(--ca-text);
}
 
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--ca-text);
}
 
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content li,
.woocommerce-account .woocommerce-MyAccount-content td {
	color: var(--ca-text-muted);
}
 
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--ca-gold); }
.woocommerce-account .woocommerce-MyAccount-content a:hover { color: var(--ca-gold-bright); }
 
/* Tablolar (siparişler, indirmeler) */
.woocommerce table.shop_table,
.woocommerce-account table.shop_table {
	background: var(--ca-bg-raised);
	border: 1px solid var(--ca-gold-faint);
	border-radius: var(--ca-radius);
	border-collapse: separate;
	color: var(--ca-text-muted);
}
 
.woocommerce table.shop_table th {
	background: rgba(201, 164, 92, 0.05);
	border-bottom: 1px solid var(--ca-gold-faint);
	color: var(--ca-gold);
	font-family: var(--ca-font-body);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
 
.woocommerce table.shop_table td {
	border-top: 1px solid rgba(201, 164, 92, 0.08);
}
 
/* Adres kutuları */
.woocommerce-account .woocommerce-Address,
.woocommerce-order-received .woocommerce-customer-details address,
.woocommerce-account address {
	padding: 1.4rem 1.6rem;
	background: var(--ca-bg-raised);
	border: 1px solid var(--ca-gold-faint);
	border-radius: var(--ca-radius);
	color: var(--ca-text-muted);
	font-style: normal;
	line-height: 1.9;
}
 
.woocommerce-account .woocommerce-Address-title h3 {
	color: var(--ca-gold);
	font-family: var(--ca-font-display);
}
 
/* Form alanları */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
	padding: 0.85rem 1rem;
	background: var(--ca-bg-deep);
	border: 1px solid var(--ca-gold-faint);
	border-radius: var(--ca-radius);
	color: var(--ca-text);
	font-family: var(--ca-font-body);
	transition: border-color var(--ca-duration) var(--ca-ease);
}
 
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-account input:focus {
	outline: none;
	border-color: var(--ca-gold);
}
 
.woocommerce form .form-row label,
.woocommerce-account label {
	color: var(--ca-text-muted);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}
 
.woocommerce form .form-row .required { color: var(--ca-gold); }
 
/* Bildirim kutuları */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	background: var(--ca-bg-raised);
	border-top: 2px solid var(--ca-gold);
	border-radius: var(--ca-radius);
	color: var(--ca-text-muted);
}
 
.woocommerce-error { border-top-color: var(--ca-error); }
 
.woocommerce-message a,
.woocommerce-info a { color: var(--ca-gold); }
 
/* Sipariş alındı ekranı */
.woocommerce-order .woocommerce-thankyou-order-received {
	padding: 1.6rem;
	background: var(--ca-bg-raised);
	border: 1px solid var(--ca-gold-faint);
	border-radius: var(--ca-radius);
	color: var(--ca-gold-bright);
	font-family: var(--ca-font-display);
	font-size: 1.3rem;
	text-align: center;
}
 
.woocommerce-order .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.6rem 0;
	padding: 0;
	list-style: none;
}
 
.woocommerce-order .woocommerce-order-overview li {
	flex: 1 1 160px;
	padding: 1.1rem 1.2rem;
	background: var(--ca-bg-raised);
	border: 1px solid var(--ca-gold-faint);
	border-radius: var(--ca-radius);
	color: var(--ca-text-muted);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-left-width: 0;
}
 
.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.5rem;
	color: var(--ca-text);
	font-family: var(--ca-font-display);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-transform: none;
}
 
.woocommerce-order h2,
.woocommerce-account h2,
.woocommerce-account h3 {
	color: var(--ca-gold);
	font-family: var(--ca-font-display);
}

/* ---- 15a. HERO SÜSLEMESİ: ARKA PLAN KUTUSU KALDIRILDI -----------------
   Sorun: ❖ süslemesi arkasındaki çerçeve çizgisini maskelemek için
   düz renkli bir arka plan kullanıyordu. Hero'nun zemini görsel
   olduğundan bu düz kutu belirgin bir dikdörtgen olarak görünüyor,
   nefes alma animasyonunda da birlikte yanıp sönüyordu.
 
   Çözüm: düz kutu yerine kenarları eriyen dairesel bir maske. Çizgi
   yine gizleniyor ama görünür bir kutu kenarı kalmıyor. Renk artık
   altın; parlama, Sepete Ekle butonundaki gradyanın tonlarıyla
   koyu altından açık şampanyaya gidip geliyor.
   -------------------------------------------------------------------- */
 
.ca-hero::after {
	top: 16px;
	padding: 0 0.9rem;
	line-height: 1;
	font-size: 1.15rem;
 
	/* Kenarları yumuşakça eriyen maske — sert kutu kenarı yok */
	background: radial-gradient(
		ellipse at center,
		rgba(12, 10, 8, 0.95) 30%,
		rgba(12, 10, 8, 0.65) 55%,
		rgba(12, 10, 8, 0) 78%
	);
 
	color: var(--ca-gold);
	animation: ca-hero-gleam 6s ease-in-out infinite;
}
 
@keyframes ca-hero-gleam {
 
	0%, 100% {
		color: var(--ca-gold-dark);
		text-shadow: none;
	}
 
	50% {
		color: #e8d5a8;
		text-shadow: 0 0 14px rgba(201, 164, 92, 0.55),
		             0 0 28px rgba(201, 164, 92, 0.22);
	}
}
 
@media (prefers-reduced-motion: reduce) {
	.ca-hero::after {
		animation: none;
		color: var(--ca-gold);
		text-shadow: none;
	}
}
 
/* ---- 15b. "KOLEKSİYONU KEŞFET" — AKAN ALTIN DOLGU ---------------------
   Sepete Ekle butonundaki gradyan geçişinin aynısı. Ani renk değişimi
   yerine soldan sağa açılan dolgu.
   -------------------------------------------------------------------- */
 
.ca-btn-gold {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: color 0.5s var(--ca-ease),
	            border-color 0.5s var(--ca-ease),
	            box-shadow 0.5s var(--ca-ease),
	            transform 0.35s var(--ca-ease);
}
 
.ca-btn-gold::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		var(--ca-gold-dark) 0%,
		var(--ca-gold) 38%,
		#e8d5a8 62%,
		var(--ca-gold) 100%
	);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--ca-ease);
}
 
.ca-btn-gold:hover {
	background: transparent;
	border-color: var(--ca-gold-bright);
	color: var(--ca-bg-deepest);
	box-shadow: 0 8px 30px rgba(201, 164, 92, 0.25);
}
 
.ca-btn-gold:hover::before { transform: scaleX(1); }
 
.ca-btn-gold:active { transform: translateY(1px); }
 
/* ---- 15c. HEADER: YATAY KILIÇ AMBLEMİ ---------------------------------
   Kaydırıldığında kelime logosunun yerini alan uzun kılıç. Genişliği
   kelime logosuna yakın, yüksekliği çok daha az — header böylece
   belirgin şekilde inceliyor.
 
   Bağımsız dosyası: assets/img/canavart-kilic-yatay.svg
   -------------------------------------------------------------------- */
 
.site-logo::after {
	/* Dikey hançer yerine yatay kılıç */
	width: 320px;
	height: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 420 64%22 width=%22420%22 height=%2264%22 role=%22img%22 aria-label=%22Canavart%22%3E%3Cdefs%3E%3ClinearGradient id=%22caSwordGold%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23E8D5A8%22/%3E%3Cstop offset=%2242%25%22 stop-color=%22%23C9A45C%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%238C6B33%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22caSwordFade%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%25%22 stop-color=%22%238C6B33%22 stop-opacity=%220%22/%3E%3Cstop offset=%2235%25%22 stop-color=%22%23C9A45C%22 stop-opacity=%220.9%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23E8D5A8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M10 32 L18 24 L26 32 L18 40 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Crect x=%2224%22 y=%2229%22 width=%2234%22 height=%226%22 rx=%222.5%22 fill=%22url(%23caSwordGold)%22/%3E%3Cg stroke=%22%230C0A08%22 stroke-width=%221.1%22 opacity=%220.45%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M31 29.5 L31 34.5%22/%3E%3Cpath d=%22M38 29.5 L38 34.5%22/%3E%3Cpath d=%22M45 29.5 L45 34.5%22/%3E%3Cpath d=%22M52 29.5 L52 34.5%22/%3E%3C/g%3E%3Cpath d=%22M58 14 L66 14 L70 32 L66 50 L58 50 L62 32 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Cpath d=%22M62 8 L66.5 12.5 L62 17 L57.5 12.5 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Cpath d=%22M62 47 L66.5 51.5 L62 56 L57.5 51.5 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Cpath d=%22M70 26 L392 29.6 L416 32 L392 34.4 L70 38 Z%22 fill=%22url(%23caSwordFade)%22/%3E%3Cpath d=%22M78 32 L386 32%22 stroke=%22%230C0A08%22 stroke-width=%221.3%22 opacity=%220.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
	transform: translate(-50%, -50%) scaleX(0.9);
}
 
.is-scrolled .site-logo::after {
	transform: translate(-50%, -50%) scaleX(1);
}
 
.is-scrolled .header-brand { min-height: 34px; }
 
@media (max-width: 900px) {
	.site-logo::after { width: 210px; height: 32px; }
}
 
@media (max-width: 640px) {
	.site-logo::after { width: 160px; height: 26px; }
}
 
/* ---- 15d. YUKARI DÖN BUTONU (hançer amblemi) --------------------------
   Sayfa belirli bir mesafe kaydırıldığında sağ altta belirir. Hançerin
   ağzı yukarı bakar; üzerine gelindiğinde hafifçe yukarı sıçrar.
   Öğeyi main.js oluşturur.
   -------------------------------------------------------------------- */
 
.ca-to-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	background: rgba(20, 16, 13, 0.82);
	border: 1px solid var(--ca-gold-faint);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: opacity 0.45s var(--ca-ease),
	            transform 0.45s var(--ca-ease),
	            visibility 0.45s,
	            border-color 0.45s var(--ca-ease),
	            box-shadow 0.45s var(--ca-ease);
}
 
.ca-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
 
.ca-to-top::before {
	content: "";
	width: 26px;
	height: 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22 width=%2264%22 height=%2264%22 role=%22img%22 aria-label=%22Canavart%22%3E%3Cdefs%3E%3ClinearGradient id=%22caGold%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23E8D5A8%22/%3E%3Cstop offset=%2245%25%22 stop-color=%22%23C9A45C%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%238C6B33%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M32 3 L37 20 L37 41 L27 41 L27 20 Z%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M32 8 L32 39%22 stroke=%22%230C0A08%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 opacity=%220.55%22/%3E%3Cpath d=%22M12 41 L52 41 L47 47 L17 47 Z%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M9 44 L12.5 40.5 L16 44 L12.5 47.5 Z%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M48 44 L51.5 40.5 L55 44 L51.5 47.5 Z%22 fill=%22url(%23caGold)%22/%3E%3Crect x=%2229.5%22 y=%2247%22 width=%225%22 height=%2210%22 rx=%221.2%22 fill=%22url(%23caGold)%22/%3E%3Cpath d=%22M32 55 L36 59 L32 63 L28 59 Z%22 fill=%22url(%23caGold)%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.45s var(--ca-ease);
}
 
.ca-to-top:hover {
	border-color: var(--ca-gold);
	box-shadow: 0 0 26px rgba(201, 164, 92, 0.22);
}
 
.ca-to-top:hover::before { transform: translateY(-3px); }
 
.ca-to-top:focus-visible {
	outline: 2px solid var(--ca-gold);
	outline-offset: 3px;
}
 
@media (max-width: 640px) {
	.ca-to-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}
 
	.ca-to-top::before { width: 22px; height: 22px; }
}
 
@media (prefers-reduced-motion: reduce) {
	.ca-to-top { transition-duration: 0.01ms; }
	.ca-to-top:hover::before { transform: none; }
}

/* ---- 16a. HAYALET ALANIN KALDIRILMASI ---------------------------------
   Sorun: kaydırma durumunda kelime logosu `opacity: 0` ve
   `visibility: hidden` ile gizleniyordu. Bu iki özellik öğeyi görünmez
   yapar ama KAPLADIĞI ALANI BOŞALTMAZ. Header, görünmeyen 64 piksellik
   logonun yüksekliğini taşımaya devam ediyor, kılıç amblemi de bu boş
   alanın üzerine biniyordu. Kılıç ile menü arasındaki fazla boşluğun
   asıl kaynağı buydu.
 
   Çözüm: gizlerken yüksekliği de sıfıra indiriyoruz. Kılıç mutlak
   konumlandırıldığı için, sarmalayıcıya yalnızca amblem kadar bir
   asgari yükseklik veriyoruz.
   -------------------------------------------------------------------- */
 
.site-logo {
	display: block;
	transition: min-height 0.45s var(--ca-ease);
}
 
.site-logo img,
.site-logo .site-logo-text,
.site-logo .site-logo-tagline {
	transition: max-height 0.4s var(--ca-ease),
	            opacity 0.3s var(--ca-ease),
	            margin 0.4s var(--ca-ease),
	            visibility 0.3s;
}
 
.is-scrolled .site-logo img,
.is-scrolled .site-logo .site-logo-text,
.is-scrolled .site-logo .site-logo-tagline {
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}
 
/* Kelime logosu metin olarak basılıyorsa satır yüksekliği de sıfırlanmalı */
.is-scrolled .site-logo .site-logo-text,
.is-scrolled .site-logo .site-logo-tagline {
	display: block;
	line-height: 0;
	font-size: 0;
}
 
/* Amblem mutlak konumlu olduğundan sarmalayıcıya yükseklik veriyoruz */
.is-scrolled .site-logo { min-height: 30px; }
 
/* ---- 16b. KOMPAKT ÖLÇÜLER ---------------------------------------------
   Kaydırma durumunda header'ın her katmanı daralır: üst şerit dolgusu,
   amblem yüksekliği ve menü dolgusu. Menü yazı boyutu okunaklılığı
   korumak için değiştirilmez.
   -------------------------------------------------------------------- */
 
.is-scrolled .header-top {
	padding-top: 0.4rem;
	padding-bottom: 0.1rem;
}
 
.main-nav ul {
	transition: padding 0.45s var(--ca-ease);
}
 
.is-scrolled .main-nav ul {
	padding-top: 0.3rem;
	padding-bottom: 0.55rem;
}
 
.is-scrolled .header-brand { min-height: 0; }
 
/* ---- 16c. AMBLEM: KIRPILMIŞ SÜRÜM -------------------------------------
   Önceki SVG'nin alt ve üst kenarlarında boş pay vardı; görüntü
   alanını (viewBox) çizime tam oturacak şekilde daralttık. Böylece
   amblem aynı görsel boyutta dururken daha az dikey yer kaplıyor.
   -------------------------------------------------------------------- */
 
.site-logo::after {
	width: 300px;
	height: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 7 420 50%22 role=%22img%22 aria-label=%22Canavart%22%3E%3Cdefs%3E%3ClinearGradient id=%22caSwordGold%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23E8D5A8%22/%3E%3Cstop offset=%2242%25%22 stop-color=%22%23C9A45C%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%238C6B33%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22caSwordFade%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%25%22 stop-color=%22%238C6B33%22 stop-opacity=%220%22/%3E%3Cstop offset=%2235%25%22 stop-color=%22%23C9A45C%22 stop-opacity=%220.9%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23E8D5A8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M10 32 L18 24 L26 32 L18 40 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Crect x=%2224%22 y=%2229%22 width=%2234%22 height=%226%22 rx=%222.5%22 fill=%22url(%23caSwordGold)%22/%3E%3Cg stroke=%22%230C0A08%22 stroke-width=%221.1%22 opacity=%220.45%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M31 29.5 L31 34.5%22/%3E%3Cpath d=%22M38 29.5 L38 34.5%22/%3E%3Cpath d=%22M45 29.5 L45 34.5%22/%3E%3Cpath d=%22M52 29.5 L52 34.5%22/%3E%3C/g%3E%3Cpath d=%22M58 14 L66 14 L70 32 L66 50 L58 50 L62 32 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Cpath d=%22M62 8 L66.5 12.5 L62 17 L57.5 12.5 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Cpath d=%22M62 47 L66.5 51.5 L62 56 L57.5 51.5 Z%22 fill=%22url(%23caSwordGold)%22/%3E%3Cpath d=%22M70 26 L392 29.6 L416 32 L392 34.4 L70 38 Z%22 fill=%22url(%23caSwordFade)%22/%3E%3Cpath d=%22M78 32 L386 32%22 stroke=%22%230C0A08%22 stroke-width=%221.3%22 opacity=%220.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
}
 
@media (max-width: 900px) {
 
	.site-logo::after { width: 200px; height: 22px; }
 
	.is-scrolled .site-logo { min-height: 22px; }
}
 
@media (max-width: 640px) {
 
	.site-logo::after { width: 150px; height: 18px; }
 
	.is-scrolled .site-logo { min-height: 18px; }
 
	.is-scrolled .header-top {
		padding-top: 0.35rem;
		padding-bottom: 0.05rem;
	}
}

/* ---- 17a. AMBLEMİN DİKEY DENGESİ --------------------------------------
   Sorun: dolgu değerleri kâğıt üzerinde eşitti, ancak menü bağlantısının
   satır kutusunda yazı tipinden gelen yaklaşık 5 piksellik bir üst boşluk
   (leading) var. Bu görünmez pay, amblemin ALTINDAKİ boşluğu üstündekinden
   fazla gösteriyor ve amblem yukarı kaymış gibi duruyordu.
 
   Çözüm: üst dolguyu bu payı telafi edecek kadar artırıyoruz. Toplam
   header yüksekliğine etkisi ~5 pikseldir; kompaktlık korunur.
   -------------------------------------------------------------------- */
 
.is-scrolled .header-top {
	padding-top: 0.72rem;
	padding-bottom: 0.1rem;
}
 
@media (max-width: 640px) {
 
	.is-scrolled .header-top {
		padding-top: 0.6rem;
		padding-bottom: 0.05rem;
	}
}
 
/* ---- 17b. FİLTRE KOLONUNUN ÜRÜN IZGARASIYLA HİZALANMASI ---------------
   Sağ sütunda ürün kartlarından önce bir araç çubuğu (sonuç sayısı +
   sıralama menüsü) bulunuyor. Sol sütunda böyle bir satır olmadığı için
   filtre kutusu, kartlardan yaklaşık bir araç çubuğu boyu yukarıda
   başlıyordu.
 
   Çözüm: filtre kolonuna araç çubuğu yüksekliği kadar üst boşluk
   veriyoruz. Değer tek bir değişkende toplandı; araç çubuğu ölçüsü
   değişirse yalnızca burası güncellenir.
 
   Hesap: select dolgusu (0.55rem x 2) + satır yüksekliği (~1.2rem)
          + kenarlıklar (2px) + araç çubuğu alt boşluğu (1.6rem)
   -------------------------------------------------------------------- */
 
.ca-shop-layout {
	--ca-toolbar-offset: 4.05rem;
}
 
@media (min-width: 901px) {
 
	.ca-shop-sidebar {
		padding-top: var(--ca-toolbar-offset);
	}
}
 
/*
 * Mobilde araç çubuğu ile filtre kolonu alt alta gelir; boşluk gereksizdir.
 */
@media (max-width: 900px) {
 
	.ca-shop-sidebar { padding-top: 0; }
}
 
/* ---- 17c. ARAÇ ÇUBUĞU İNCE AYARI --------------------------------------
   Sonuç sayısı metnini sıralama menüsüyle aynı optik hizaya getirir.
   -------------------------------------------------------------------- */
 
.ca-shop-toolbar {
	min-height: 2.45rem;
}
 
.ca-shop-context .woocommerce-result-count {
	margin: 0;
	line-height: 1.2;
}

/* ---- 13. RESPONSIVE ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.ca-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {

	.ca-grid-3 { grid-template-columns: 1fr; }
	.ca-story-wrap { grid-template-columns: 1fr; gap: 2rem; }

	/* Mobil header: [menü] [logo] [aksiyonlar] */
	.header-top {
		grid-template-columns: auto 1fr auto;
		gap: 0.8rem;
	}

	.header-socials { display: none; }

	.header-action-label { display: none; }

	.site-logo-text { font-size: 1.5rem; }

	.site-logo-tagline { display: none; }

	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		background: transparent;
		border: var(--ca-border-gold);
		color: var(--ca-gold);
		cursor: pointer;
	}

	.nav-toggle-close { display: none; }

	body.nav-open .nav-toggle-open { display: none; }

	body.nav-open .nav-toggle-close { display: inline-flex; }

	.main-nav {
		position: fixed;
		inset: 0;
		top: 0;
		padding-top: 110px;
		background: rgba(12, 10, 8, 0.98);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--ca-ease);
		z-index: -1;
	}

	body.nav-open .main-nav {
		opacity: 1;
		visibility: visible;
	}

	body.nav-open { overflow: hidden; }

	.main-nav ul {
		flex-direction: column;
		align-items: center;
		gap: 1.6rem;
		padding: 2rem 0;
	}

	.main-nav a { font-size: 1rem; }

	.main-nav ul ul {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		border: none;
		box-shadow: none;
		background: transparent;
		text-align: center;
		padding: 0.6rem 0 0;
	}
}

@media (max-width: 640px) {
	.ca-grid-4 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.footer-bottom { justify-content: center; text-align: center; }
	.ca-panel { padding: 2rem 1.5rem; }
	.ca-stats { gap: 1.5rem; flex-wrap: wrap; }
	.ca-hero::before { inset: 14px; }
	.ca-section-actions .ca-btn-gold { width: 100%; text-align: center; }
}