/*
Theme Name: Ooljee
Theme URI: https://ooljee.com.tr
Author: Ooljee Studio
Author URI: https://ooljee.com.tr
Description: OOLJEE için saf siyah-beyaz tema. Modüler bölüm yöneticisi, slider, font sistemi, WooCommerce tam uyumlu.
Version: 4.5.8
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: ooljee
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, woocommerce
*/

/* =========================================================
   RENK PALETİ — Saf Siyah-Beyaz
   Fontlar Customizer'dan değişir.
   ========================================================= */
:root {
	--ink:        #000000;
	--paper:      #ffffff;
	--bone:       #f0f0f0;
	--clay:       #333333;
	--clay-deep:  #1a1a1a;
	--burgundy:   #2a2a2a;
	--sand:       #cccccc;
	--muted:      #888888;
	--line:       rgba(0,0,0,.12);

	/* Fontlar — JS ile değiştirilir, varsayılan: */
	--font-body:   'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-accent: 'Fraunces', Georgia, serif;

	--ease: cubic-bezier(.4, 0, .2, 1);
	--pad-x: clamp(1.25rem, 4vw, 5rem);
	--pad-y: clamp(4rem, 10vw, 9rem);
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	max-width: 100vw;
}

body {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	overflow-x: hidden;
	max-width: 100vw;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

/* Hiçbir elementi viewport'tan taşmasın */
img, video, iframe, .marquee, section { max-width: 100%; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .25s; }
a:hover { opacity: .65; }
button { font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; }

/* VURGU — *kelime* için (italik değil, font değişir) */
.accent {
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--ink);
}

/* WordPress required */
.alignleft   { float: left;  margin: 0.5em 1.5em 0.5em 0; }
.alignright  { float: right; margin: 0.5em 0 0.5em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide   { width: 100%; }
.alignfull   { width: 100vw; margin-left: calc(50% - 50vw); }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}

.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .header { top: 46px; } }

/* =========================================================
   TOPBAR & HEADER
   ========================================================= */
.topbar {
	background: var(--ink); color: var(--paper);
	padding: .65rem var(--pad-x);
	display: flex; justify-content: space-between; align-items: center;
	font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
}
.topbar__msg { text-align: center; flex: 1; opacity: .9; }
.topbar__links { display: flex; gap: 1rem; }
.topbar__links a { color: var(--paper); opacity: .7; }
.topbar__links a:hover { opacity: 1; }
@media (max-width: 720px) { .topbar__links--left { display: none; } }

/* =========================================================
   HEADER v3.1 — Logo ortada üst + Menü altta + Sağda icons
   ========================================================= */
.header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
	transition: background .35s var(--ease), border-color .35s var(--ease);
}
.header.is-scrolled {
	background: rgba(255,255,255,.99);
	border-bottom-color: rgba(0,0,0,.2);
}

/* ÜST SIRA: Logo + Icons */
.header__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.4rem var(--pad-x) 1rem;
	gap: 2rem;
}
.header__left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* LOGO */
.brand {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: 1.95rem;
	letter-spacing: .35em;
	text-align: center;
	color: var(--ink);
	white-space: nowrap;
	display: block;
	text-transform: uppercase;
	text-decoration: none;
}
.brand--dual { display: inline-flex; align-items: center; gap: 14px; }
.brand__main {
	font-family: var(--font-accent);
	font-weight: 300; font-size: 1.95rem; letter-spacing: .35em;
	color: var(--ink); text-transform: uppercase; line-height: 1;
}
.brand__divider { width: 1px; height: 32px; background: var(--line); display: inline-block; }
.brand__secondary-img { max-height: 44px; width: auto; display: inline-block; }
.brand__main-img { max-height: 48px; width: auto; display: inline-block; }

/* UTILITY ICONS (sağ) */
.utility { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }
.utility a, .utility button {
	position: relative;
	color: var(--ink);
	display: flex;
	align-items: center;
	transition: opacity .2s;
}
.utility a:hover, .utility button:hover { opacity: .65; }
.utility svg { width: 20px; height: 20px; stroke-width: 1.5; }
.cart-count {
	position: absolute; top: -8px; right: -10px;
	background: var(--ink); color: var(--paper);
	font-size: 10px; width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}

/* HAMBURGER (mobil) */
.menu-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: .4rem;
	color: var(--ink);
	display: none;
}
.menu-toggle svg { width: 24px; height: 24px; }

/* ALT SIRA: YATAY MENÜ (DESKTOP) */
.header__menu {
	border-top: 1px solid var(--line);
}
.header__menu--mobile { display: none; }

.main-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	max-width: 1400px;
	margin: 0 auto;
}
.main-menu > li {
	position: relative;
	padding: 1rem 0;
}
.main-menu > li > a {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	padding: .8rem 0;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: color .2s;
	position: relative;
}
.main-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .35s var(--ease);
}
.main-menu > li:hover > a::after,
.main-menu > li.is-open > a::after { transform: scaleX(1); }
.main-menu .menu-arrow {
	transition: transform .25s var(--ease);
}
.main-menu > li:hover .menu-arrow,
.main-menu > li.is-open .menu-arrow { transform: rotate(180deg); }

/* MEGA MENÜ */
.mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
	z-index: 50;
	width: max-content;
	max-width: min(1200px, 95vw);
}
.main-menu > li:hover > .mega-menu,
.main-menu > li.is-open > .mega-menu,
.main-menu > li:focus-within > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}

/* Mega menü içindeki ul varsayılan stilini sıfırla */
.main-menu .sub-menu,
.main-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mega-menu__inner {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 2.5rem 3rem;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,.15), 0 8px 20px -12px rgba(0,0,0,.08);
	min-width: 600px;
}
.mega-menu__columns {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2.5rem 3rem;
}
.mega-col > a {
	font-family: var(--font-accent);
	font-size: 1rem;
	font-weight: 400;
	color: var(--ink);
	text-decoration: none;
	display: block;
	padding-bottom: .75rem;
	margin-bottom: .75rem;
	border-bottom: 1px solid var(--line);
	letter-spacing: .01em;
}
.mega-col > a:hover { color: var(--clay); }
.mega-col__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.mega-col__list .mega-col__item a {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--muted);
	text-decoration: none;
	transition: color .2s, padding-left .2s;
	letter-spacing: .01em;
	display: inline-block;
}
.mega-col__list .mega-col__item a:hover {
	color: var(--ink);
	padding-left: 4px;
}

/* MOBİL/TABLET YATAY MENU (header altında) */
.header__menu--mobile {
	position: relative;
}
/* Sağ kenarda fade — sadece scroll varsa */
.header__menu--mobile::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 24px;
	background: linear-gradient(to right, transparent, var(--paper));
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity .2s;
}
.header__menu--mobile.has-overflow::after { opacity: 1; }

.header__menu--mobile .mobile-strip {
	list-style: none;
	margin: 0;
	display: flex;
	justify-content: center;          /* VARSAYILAN: ORTADA — tablet için */
	align-items: center;
	gap: clamp(1rem, 4vw, 2.5rem);    /* Tablette geniş, mobilde dar */
	padding: .85rem clamp(.75rem, 4vw, 2rem);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.header__menu--mobile .mobile-strip::-webkit-scrollbar { display: none; }
.header__menu--mobile .mobile-strip > li {
	flex-shrink: 0;
}
.header__menu--mobile .mobile-strip > li > a {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
	padding: .35rem 0;
}

/* TELEFON — font biraz daha küçük + sola dayalı (overflow olursa scroll) */
@media (max-width: 600px) {
	.header__menu--mobile .mobile-strip {
		justify-content: flex-start;     /* Telefonda sola dayalı (scroll için) */
		gap: 1.25rem;
		padding: .85rem 1rem;
	}
	.header__menu--mobile .mobile-strip > li > a {
		font-size: 9.5px;                /* Telefonda ufak */
		letter-spacing: .15em;
	}
}

/* ÇOK DAR EKRAN — son çare daha da ufak */
@media (max-width: 380px) {
	.header__menu--mobile .mobile-strip > li > a {
		font-size: 9px;
		letter-spacing: .12em;
	}
	.header__menu--mobile .mobile-strip {
		gap: 1rem;
	}
}

/* RESPONSIVE */
@media (max-width: 980px) {
	.header__menu--desktop { display: none; }
	.header__menu--mobile { display: block; }
	.menu-toggle--mobile { display: flex; }
	.utility__desktop { display: none; }
	.utility { gap: .9rem; }
	.header__top { padding: 1rem var(--pad-x) .75rem; }
}
@media (max-width: 540px) {
	.brand__main { font-size: 1.4rem; letter-spacing: .25em; }
	.brand__secondary-img, .brand__main-img { max-height: 36px; }
	.brand__divider { height: 24px; }
}

/* =========================================================
   MOBİL DRAWER + ACCORDION
   ========================================================= */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--paper);
	padding: 2rem 0 0;
	transform: translateX(-100%);
	transition: transform .5s var(--ease);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: transparent;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	padding: .5rem;
}
.drawer__brand {
	font-family: var(--font-accent);
	font-size: 1.6rem;
	letter-spacing: .35em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 2rem 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}
.drawer__nav {
	flex: 1;
	padding: 0 2rem;
}
.drawer__foot {
	margin-top: auto;
	padding: 2rem;
	font-size: 12px;
	color: var(--muted);
	letter-spacing: .05em;
	line-height: 1.7;
	border-top: 1px solid var(--line);
}
.drawer__foot a {
	color: var(--ink);
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	font-weight: 500;
	display: inline-block;
	margin-bottom: .5rem;
}

/* ACCORDION */
.drawer-accordion {
	list-style: none;
	padding: 0;
	margin: 0;
}
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}
.accordion-depth-0 > .accordion-header > a,
.accordion-depth-0 > a {
	font-family: var(--font-accent);
	font-size: 1.4rem;
	color: var(--ink);
	text-decoration: none;
	padding: 1rem 0;
	display: block;
	flex: 1;
	letter-spacing: -.01em;
}
.accordion-depth-1 > .accordion-header > a,
.accordion-depth-1 > a {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--ink);
	text-decoration: none;
	padding: .75rem 0;
	display: block;
	flex: 1;
}
.accordion-depth-2 > a,
.accordion-depth-2 > .accordion-header > a {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--muted);
	text-decoration: none;
	padding: .5rem 0 .5rem 1.5rem;
	display: block;
	letter-spacing: .02em;
}
.accordion-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: .5rem;
	color: var(--ink);
	transition: transform .25s var(--ease);
	flex-shrink: 0;
}
.accordion-toggle svg { display: block; }
.accordion-item.is-open > .accordion-header > .accordion-toggle {
	transform: rotate(45deg);
}
.accordion-content {
	list-style: none;
	padding: 0 0 .5rem 1rem;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s var(--ease);
}
.accordion-item.is-open > .accordion-content {
	max-height: 2000px;
}

/* =========================================================
   BUTONLAR
   ========================================================= */
.btn {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: 1.1rem 1.8rem;
	font-size: 11px; font-weight: 500; letter-spacing: .3em;
	text-transform: uppercase; text-decoration: none;
	transition: all .25s var(--ease); cursor: pointer; border: 0;
	font-family: var(--font-body);
}
.btn svg { width: 14px; height: 14px; }
.btn--primary { background: var(--paper); color: var(--ink); }
.btn--primary:hover { background: var(--bone); opacity: 1; }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.6); opacity: 1; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--clay-deep); opacity: 1; }

/* =========================================================
   HERO — Sol Foto Slider (4:5) + Sağ Yazı
   Responsive: Desktop sol/sağ, mobilde üst/alt
   ========================================================= */
.hero {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: auto;
	overflow: hidden;
}
@media (max-width: 980px) {
	.hero {
		grid-template-columns: 1fr;
	}
}

/* SOL: Foto Slider Alanı */
.hero__visual {
	position: relative;
	background: var(--burgundy);
	overflow: hidden;
	/* 4:5 dikey aspect ratio */
	aspect-ratio: 4/5;
	width: 100%;
}
@media (max-width: 980px) {
	.hero__visual {
		/* Mobilde de 4:5 dikey foto */
		aspect-ratio: 4/5;
		max-height: 90vh;
	}
}

.hero__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: var(--burgundy);
	color: rgba(255,255,255,.4);
}

/* Slider iç */
.hero__slider {
	position: relative;
	width: 100%;
	height: 100%;
}
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s var(--ease);
	pointer-events: none;
}
.hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Foto üzerinde opsiyonel overlay yazı */
.hero__slide-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2rem 1.5rem 1.5rem;
	background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
	z-index: 2;
	pointer-events: none;
}
.hero__slide-caption {
	font-family: var(--font-accent);
	font-size: clamp(.95rem, 1.4vw, 1.25rem);
	color: var(--paper);
	line-height: 1.3;
	max-width: 80%;
}

/* Slider okları */
.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.5);
	border: 1px solid rgba(255,255,255,.2);
	color: var(--paper);
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: background .2s, border-color .2s;
	opacity: 0;
}
.hero__visual:hover .hero__nav { opacity: 1; }
@media (max-width: 980px) {
	.hero__nav { opacity: 1; background: rgba(0,0,0,.4); }
}
.hero__nav:hover { background: var(--ink); border-color: var(--paper); }
.hero__nav--prev { left: 1rem; }
.hero__nav--next { right: 1rem; }
.hero__nav svg { width: 16px; height: 16px; }

/* Dots */
.hero__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .5rem;
	z-index: 5;
}
.hero__dot {
	width: 24px; height: 2px;
	background: rgba(255,255,255,.35);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background .2s, width .3s;
}
.hero__dot.is-active {
	background: var(--paper);
	width: 32px;
}

/* SAĞ: Yazı / İçerik */
.hero__copy {
	padding: clamp(2rem, 6vw, 5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	background: var(--ink);
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--sand);
	margin-bottom: 2rem;
}
.hero__eyebrow::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--sand);
}
.hero__title {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: clamp(2rem, 5.5vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--paper);
	margin: 0 0 2rem;
}
.hero__lede {
	max-width: 480px;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255,255,255,.75);
	margin: 0 0 2.5rem;
}
.hero__cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee {
	background: var(--bone);
	padding: 1rem 0; overflow: hidden;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.marquee__track {
	display: flex; white-space: nowrap;
	animation: marquee 35s linear infinite;
	font-family: var(--font-accent);
	font-size: 1.4rem;
	color: var(--ink);
}
.marquee__track > span { display: inline-flex; align-items: center; padding-right: 3rem; }
.marquee__track .dot {
	display: inline-block; width: 6px; height: 6px;
	background: var(--ink); border-radius: 50%;
	margin: 0 2rem; vertical-align: middle;
}
@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* =========================================================
   BÖLÜM BAŞLIKLARI
   ========================================================= */
.section-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	margin-bottom: 3rem; padding: 0 var(--pad-x); gap: 2rem;
}
.section-head h2 {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	margin: 0;
}
.section-head__link {
	font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px; white-space: nowrap;
}
.eyebrow {
	display: inline-block;
	font-size: 11px; letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 1.5rem;
}

/* =========================================================
   KATEGORİLER
   ========================================================= */
.categories { padding: var(--pad-y) 0; }
.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 0 var(--pad-x);
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cat-grid { grid-template-columns: 1fr; } }
.cat {
	position: relative; display: block; text-decoration: none;
	color: var(--paper); overflow: hidden;
}
.cat__inner { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.cat__bg {
	position: absolute; inset: 0; background: var(--clay);
	transition: transform .8s var(--ease);
}
.cat__bg img {
	width: 100%; height: 100%; object-fit: cover;
	/* RENKLİ — grayscale yok */
}
.cat:hover .cat__bg { transform: scale(1.06); }
.cat__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.7));
}
.cat__arrow {
	position: absolute; top: 1.5rem; right: 1.5rem;
	width: 36px; height: 36px;
	border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--paper);
}
.cat__arrow svg { width: 14px; height: 14px; stroke-width: 1.5; }
.cat__caption {
	position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
	display: flex; justify-content: space-between; align-items: flex-end;
}
.cat__title {
	font-family: var(--font-accent);
	font-weight: 300; font-size: 1.5rem;
	margin: 0; color: var(--paper);
}
.cat__num {
	font-size: 10px; letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	font-family: var(--font-body);
}
.bg-skull { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); }
.bg-horn { background: linear-gradient(135deg, #444, #1a1a1a); }
.bg-statue { background: linear-gradient(135deg, #555, #2a2a2a); }
.bg-leather { background: linear-gradient(135deg, #333, #000); }

/* Admin uyarısı - kategori görseli eksik */
.cat__admin-notice {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	color: rgba(255,255,255,.5);
	z-index: 3;
	text-align: center;
}
.cat__admin-notice span {
	font-size: 10px;
	letter-spacing: .25em;
	text-transform: uppercase;
}
.cat-admin-bar {
	max-width: 600px;
	margin: 2rem auto 0;
	padding: 1rem 1.5rem;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: .75rem;
	color: #5c4a00;
	font-size: 13px;
}
.cat-admin-bar svg { flex-shrink: 0; color: #ffc107; }
.cat-admin-bar strong { font-weight: 600; }
.cat-admin-bar__link {
	margin-left: auto;
	padding: .5rem 1rem;
	background: #1a1612;
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cat-admin-bar__link:hover { opacity: .8; color: #fff; }
.cat-admin-bar small {
	font-size: 11px;
	color: #999;
	font-weight: normal;
}
@media (max-width: 600px) {
	.cat-admin-bar { flex-wrap: wrap; }
	.cat-admin-bar__link { margin-left: 0; width: 100%; text-align: center; }
}

/* =========================================================
   ÜRÜN KARTLARI / SLİDER
   ========================================================= */
.products { padding: var(--pad-y) 0; background: transparent; }
.prod-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem 1.5rem;
	padding: 0 var(--pad-x);
}
@media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

.product, .ooljee-product-card {
	display: block; position: relative; isolation: isolate;
	text-decoration: none; color: inherit;
}
.product__main-link { color: inherit; text-decoration: none; }
.product__main-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.product__hover { z-index: 2; }
.product__icon-btn, .product__btn { position: relative; z-index: 2; }
.products-carousel .product__media,
.section-products .product__media {
	position: relative; aspect-ratio: 4/5; overflow: hidden;
	background: var(--paper); margin-bottom: 1rem;
}
.products-carousel .product__bg { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.products-carousel .product__bg img {
	width: 100%; height: 100%; object-fit: cover;
}
.ooljee-product-card:hover .product__bg--primary { transform: scale(1.04); }
.product__tag {
	position: absolute; top: 1rem; left: 1rem;
	padding: 4px 10px;
	background: var(--ink); color: var(--paper);
	font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
	z-index: 3;
}
.product__tag--new { background: var(--clay); }
.product__tag--sold { background: var(--muted); }
.product__hover {
	position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
	display: flex; gap: .5rem;
	opacity: 0; transform: translateY(10px);
	transition: all .4s var(--ease);
	pointer-events: none;
}
.product:hover .product__hover, .ooljee-product-card:hover .product__hover {
	opacity: 1; transform: translateY(0); pointer-events: auto;
}
@media (hover: none) {
	.product__hover { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
.product__btn {
	flex: 1; background: var(--ink); color: var(--paper);
	padding: .8rem; font-size: 10px; letter-spacing: .25em;
	text-transform: uppercase; text-align: center;
}
.product__btn:hover { background: var(--clay-deep); opacity: 1; color: var(--paper); }
.product__icon-btn {
	width: 38px; height: 38px;
	background: var(--paper); color: var(--ink);
	display: flex; align-items: center; justify-content: center;
}
.product__icon-btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
.product__cat {
	font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
	color: var(--muted); margin-bottom: .4rem;
}
.product__name {
	font-family: var(--font-accent);
	font-weight: 400; font-size: 1.1rem;
	margin: 0 0 .3rem; color: var(--ink);
}
.product__price {
	font-family: var(--font-accent);
	font-size: 14px; color: var(--ink);
}

/* Ürün Slider (carousel) */
.products--slider .slider-wrap { padding: 0 var(--pad-x); overflow: hidden; }
.slider-track {
	display: flex; gap: 1.5rem;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding-bottom: 1rem;
	scrollbar-width: none; -ms-overflow-style: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-item { flex: 0 0 calc(25% - 1.125rem); scroll-snap-align: start; }
@media (max-width: 1100px) { .slider-item { flex: 0 0 calc(33.333% - 1rem); } }
@media (max-width: 800px) { .slider-item { flex: 0 0 calc(50% - .75rem); } }
@media (max-width: 540px) { .slider-item { flex: 0 0 80%; } }

/* =========================================================
   HAKKIMIZDA / ATÖLYE
   ========================================================= */
.about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	padding: var(--pad-y) var(--pad-x);
	align-items: center;

	/* Customizer ayarlanabilir font boyutları */
	--about-title-size: clamp(2rem, 4vw, 3rem);
	--about-text-size: 15px;
	--about-text-line: 1.85;
	--about-btn-size: 11px;
}

/* MOBİL: Önce yazı, sonra slider */
@media (max-width: 900px) {
	.about {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	/* Sıralama: copy (yazı) önce, visual (slider) sonra */
	.about__copy { order: 1; }
	.about__visual { order: 2; }
	/* Mobilde slider biraz daha kompakt */
	.about__copy h2 { margin-bottom: 1rem; }
	.about__copy p:last-of-type { margin-bottom: 1rem; }
	.about__cta { margin-top: 1rem; margin-bottom: .5rem; }
}

.about__visual {
	position: relative;
	background: var(--bone);
	aspect-ratio: 4/5;
	overflow: hidden;
	width: 100%;
}
.about__visual img.about__single {
	width: 100%; height: 100%; object-fit: cover;
}

/* ATÖLYE SLIDER */
.about__slider {
	position: relative;
	width: 100%;
	height: 100%;
}
.about__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s var(--ease);
	pointer-events: none;
}
.about__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.about__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Atölye slider okları */
.about__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.5);
	border: 1px solid rgba(255,255,255,.2);
	color: var(--paper);
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: background .2s, border-color .2s, opacity .2s;
	opacity: 0;
	padding: 0;
}
.about__visual:hover .about__nav { opacity: 1; }
@media (max-width: 980px) {
	.about__nav { opacity: 1; background: rgba(0,0,0,.4); }
}
.about__nav:hover { background: var(--ink); border-color: var(--paper); }
.about__nav--prev { left: 1rem; }
.about__nav--next { right: 1rem; }
.about__nav svg { width: 16px; height: 16px; }

/* Atölye dots */
.about__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .5rem;
	z-index: 5;
}
.about__dot {
	width: 24px; height: 2px;
	background: rgba(255,255,255,.35);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background .2s, width .3s;
}
.about__dot.is-active {
	background: var(--paper);
	width: 32px;
}

/* Boş placeholder (admin için) */
.about__placeholder {
	width: 100%; height: 100%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 1rem;
	color: var(--muted);
	background: var(--bone);
	text-align: center;
	padding: 2rem;
}
.about__placeholder p { margin: 0; font-size: 14px; }
.about__placeholder a {
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
}

.about__signature {
	position: absolute;
	bottom: 1.5rem;
	right: 1.5rem;
	font-family: var(--font-accent);
	font-size: 1.6rem;
	color: var(--paper);
	opacity: .9;
	z-index: 6;
	text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.about__copy h2 {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: var(--about-title-size);
	margin: 0 0 2rem;
}
.about__copy p {
	font-size: var(--about-text-size);
	line-height: var(--about-text-line);
	color: var(--muted); margin: 0 0 1.5rem;
}
.about__cta { margin-top: 1.5rem; }
.about__cta.btn {
	font-size: var(--about-btn-size);
}

/* =========================================================
   INSTAGRAM
   ========================================================= */
.press { padding: var(--pad-y) var(--pad-x); background: var(--bone); }
.press__head { text-align: center; margin-bottom: 3rem; }
.press__head h3 {
	font-family: var(--font-accent);
	font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0;
}
.insta-grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem;
}
@media (max-width: 800px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
.ig {
	aspect-ratio: 1; position: relative; overflow: hidden;
	display: block; background: var(--clay);
}
.ig__icon {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--paper); opacity: 0;
	background: rgba(0,0,0,.4); transition: opacity .3s;
}
.ig:hover .ig__icon { opacity: 1; }
.ig img {
	width: 100%; height: 100%; object-fit: cover;
}
/* Instagram embed feed iframe için */
.insta-embed {
	width: 100%; min-height: 600px; border: 0;
}

/* =========================================================
   BÜLTEN
   ========================================================= */
.newsletter {
	background: var(--ink); color: var(--paper);
	padding: var(--pad-y) var(--pad-x);
	text-align: center; position: relative; overflow: hidden;
}
.newsletter__inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.newsletter .eyebrow { color: var(--sand); }
.newsletter h2 {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin: 1rem 0; color: var(--paper);
}
.newsletter p { color: rgba(255,255,255,.7); margin: 0 0 2rem; line-height: 1.8; }
.newsletter__form {
	display: flex; max-width: 460px; margin: 0 auto;
	border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 4px;
}
.newsletter__form input {
	flex: 1; background: transparent; border: 0;
	padding: .8rem 0;
	font-family: var(--font-body);
	font-size: 14px; color: var(--paper); outline: none;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.5); }
.newsletter__form button {
	background: transparent; border: 0; color: var(--paper);
	padding: .8rem 1rem; font-size: 11px; letter-spacing: .3em;
	text-transform: uppercase; cursor: pointer;
	display: flex; align-items: center; gap: .5rem;
}
.newsletter__small {
	margin-top: 1rem; font-size: 11px; letter-spacing: .1em;
	color: rgba(255,255,255,.4);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
	background: var(--ink); color: rgba(255,255,255,.7);
	padding: var(--pad-y) var(--pad-x) 2rem;
}
.footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
	gap: 3rem; margin-bottom: 4rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 540px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand .brand {
	color: var(--paper); font-size: 1.6rem;
	text-align: left; margin-bottom: 1rem;
}
.footer__brand p {
	font-size: 13px; line-height: 1.7;
	margin: 0 0 1.5rem; color: rgba(255,255,255,.5);
}
.footer__social { display: flex; gap: .8rem; }
.footer__social a {
	width: 36px; height: 36px;
	border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--paper);
}
.footer__social a:hover { background: var(--paper); color: var(--ink); opacity: 1; }
.footer__social svg { width: 14px; height: 14px; }
.footer h4 {
	font-family: var(--font-body);
	font-size: 11px; letter-spacing: .3em;
	text-transform: uppercase; color: var(--paper);
	margin: 0 0 1.2rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .6rem; }
.footer ul a { font-size: 13px; color: rgba(255,255,255,.6); }
.footer ul a:hover { color: var(--paper); opacity: 1; }
.footer__contact p { font-size: 13px; line-height: 1.7; margin: 0 0 1rem; color: rgba(255,255,255,.6); }
.footer__contact strong {
	display: block; color: var(--paper); font-weight: 500;
	font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
	margin-bottom: .3rem;
}
.footer__bottom {
	display: flex; justify-content: space-between;
	font-size: 11px; letter-spacing: .1em;
	color: rgba(255,255,255,.4);
	flex-wrap: wrap; gap: 1rem;
}
.footer__bottom a { color: rgba(255,255,255,.4); margin-left: 1.5rem; }
.footer__bottom a:hover { color: var(--paper); opacity: 1; }

/* =========================================================
   SAYFA İÇERİĞİ
   ========================================================= */
.page-content {
	padding: var(--pad-y) var(--pad-x);
	max-width: 1400px; margin: 0 auto;
}
.page-header {
	text-align: center; margin-bottom: 4rem;
	padding-bottom: 3rem; border-bottom: 1px solid var(--line);
}
.page-header h1 {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: clamp(2rem, 5vw, 4rem);
	margin: 0;
}
.entry-content { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.8; }
.entry-content h2 { font-family: var(--font-accent); font-weight: 300; font-size: 2rem; margin: 3rem 0 1rem; }
.entry-content p { margin-bottom: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.marquee__track { animation: none !important; }
	.slider-slide { animation: none !important; }
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

/* =========================================================
   YUKARI ÇIK BUTONU
   ========================================================= */
.scroll-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 90;
	width: 48px;
	height: 48px;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .25s;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.scroll-top:hover {
	background: var(--clay-deep);
}
.scroll-top svg { width: 20px; height: 20px; }

/* WhatsApp butonu varsa çakışmasın diye sol tarafta dursun */
@media (max-width: 600px) {
	.scroll-top {
		bottom: 1.25rem;
		left: 1.25rem;
		right: auto;
		width: 44px;
		height: 44px;
	}
}

/* =========================================================
   TERMİN BİLGİSİ (ürün sayfası)
   ========================================================= */
.ooljee-termin {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin: 1.25rem 0;
	padding: .9rem 1.1rem;
	background: var(--bone);
	border-left: 2px solid var(--ink);
	border-radius: 0 4px 4px 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--clay);
}
.ooljee-termin svg { flex-shrink: 0; margin-top: 2px; color: var(--ink); }

/* =========================================================
   AÇILIR BİLGİ EKRANI (Popup)
   ========================================================= */
.ooljee-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.ooljee-popup[hidden] { display: none; }
.ooljee-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	opacity: 0;
	transition: opacity .35s var(--ease);
}
.ooljee-popup.is-open .ooljee-popup__overlay { opacity: 1; }
.ooljee-popup__box {
	position: relative;
	background: var(--paper);
	max-width: 460px;
	width: 100%;
	padding: 2.5rem 2.25rem;
	border-radius: 8px;
	box-shadow: 0 30px 70px rgba(0,0,0,.3);
	transform: translateY(20px) scale(.97);
	opacity: 0;
	transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.ooljee-popup.is-open .ooljee-popup__box {
	transform: translateY(0) scale(1);
	opacity: 1;
}
.ooljee-popup__close {
	position: absolute;
	top: 1rem; right: 1rem;
	background: transparent;
	border: 0;
	color: var(--muted);
	cursor: pointer;
	padding: .3rem;
	transition: color .2s;
}
.ooljee-popup__close:hover { color: var(--ink); }
.ooljee-popup__title {
	font-family: var(--font-accent);
	font-weight: 300;
	font-size: 1.7rem;
	margin: 0 0 1rem;
	color: var(--ink);
}
.ooljee-popup__text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--clay);
	margin-bottom: 1.75rem;
}
.ooljee-popup__btn {
	width: 100%;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	padding: 1rem;
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
	transition: background .25s;
}
.ooljee-popup__btn:hover { background: var(--clay-deep); }

@media (max-width: 480px) {
	.ooljee-popup__box { padding: 2rem 1.5rem; }
	.ooljee-popup__title { font-size: 1.4rem; }
}