/**
 * KS Tokens — the single source of truth for the plugin's visual language.
 *
 * Loads before every other KS stylesheet, so buttons, inputs, the login popup,
 * toasts, confirm modal and side cart all derive from ONE place. Change a value
 * here (or override it live from the Customizer's Additional CSS) and the whole
 * UI follows — no hunting through component files.
 *
 * Brand colours track the Elementor globals so the plugin always matches the
 * theme; every other value is a plain, overridable custom property.
 *
 *   Override example (Appearance → Customize → Additional CSS):
 *     :root { --ks-radius-field: 6px; --ks-accent: #c2185b; }
 */

/* Declared on BOTH :root and body. Elementor defines its globals on the body
   (`.elementor-kit-…` class), and a custom property resolves its var() refs on
   the element it is DECLARED on — declared only at :root these bindings can't
   see the kit and silently collapse to their fallbacks (yaşandı: the page ran
   two different oranges for weeks). The body declaration re-resolves the whole
   chain where the kit is visible; :root stays as the Elementor-less fallback. */
:root,
body {
	/* ── Brand ─────────────────────────────────────────────────────────────
	   primary = the solid CTA fill ("Gelince Haber Ver" / add-to-cart action),
	   accent  = hover / stroke emphasis ("Hemen Satın Al"). Both follow the
	   Elementor global palette, with safe fallbacks if Elementor is absent. */
	--ks-primary: var(--e-global-color-primary, #000000);
	--ks-accent: var(--e-global-color-secondary, #da6900);
	--ks-primary-contrast: #ffffff;

	/* Secondary CTA — the auth switch buttons (Kayıt Ol / Giriş Yap). Tracks the
	   Elementor "Button Secondary" + "Button Secondary Hover" custom globals, with
	   hex fallbacks; retune them in Elementor and these follow. */
	--ks-secondary: var(--e-global-color-8a235d0, #232324);
	--ks-secondary-hover: var(--e-global-color-67d12b5, #000000);

	/* ── Neutrals ──────────────────────────────────────────────────────── */
	--ks-ink: #1a1a1a;          /* primary text (no kit counterpart; kit Text is #000) */
	--ks-muted: var(--e-global-color-01631af, #6a6a6a); /* secondary text / icons — kit "Muted" */
	--ks-line: #e0e0e0;         /* hairlines / separators */
	--ks-surface: #ffffff;      /* cards / fields background */

	/* ── Feedback ──────────────────────────────────────────────────────────
	   Validation + notices (inline field errors, popup notice cards). */
	--ks-danger: #c8321f;       /* error text / invalid borders */
	--ks-danger-soft: #fdeeec;  /* error notice background */
	--ks-ok: #1a7f37;           /* success text / satisfied password rule */
	--ks-ok-soft: #e9f5ec;      /* success notice background */
	--ks-warn: #a15c00;         /* warning text (bekleyen/iptal edilen sipariş) */
	--ks-warn-soft: #fdf2e3;    /* warning notice background */
	--ks-neutral-soft: #f4f4f4; /* neutral notice background (iade, geçersiz bağlantı) */

	/* ── Radii ─────────────────────────────────────────────────────────── */
	--ks-radius-pill: 999px;    /* buttons */
	--ks-radius-card: 16px;     /* popups / cards */
	--ks-radius-field: 10px;    /* inputs */

	/* ── Fields (inputs / selects / textareas) ─────────────────────────── */
	--ks-field-bg: var(--ks-surface);
	--ks-field-border-color: var(--e-global-color-dcb0b6a, #d9d9d9); /* kit "Border" */
	--ks-field-border-width: 1.5px;
	--ks-field-radius: var(--ks-radius-field);
	--ks-field-pad-y: 12px;
	--ks-field-pad-x: 14px;
	--ks-field-font-size: 16px; /* ≥16px so iOS doesn't zoom on focus */
	/* The stack the browser actually gives a form control here: the theme sets
	   it on `body, button, input, select, optgroup, textarea` and the site's
	   brand font (Elementor) only ever reaches `body`, so every real input on
	   the site — login popup, my-account, checkout — renders in this one.
	   Named here because select2 replaces the <select> with a <span>, which
	   would otherwise inherit the brand font and read as a different control
	   sitting between two inputs. Retune fields site-wide from this line. */
	--ks-field-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--ks-field-font-weight: 400;
	--ks-field-line-height: 1.4;
	--ks-field-letter-spacing: normal;
	--ks-field-focus-border: var(--ks-accent);
	--ks-field-focus-ring: color-mix(in srgb, var(--ks-accent) 16%, transparent);

	/* ── Buttons ───────────────────────────────────────────────────────────
	   THE store button standard — these are the exact metrics of the product
	   page's add-to-cart / buy-now / "Gelince Haber Ver" buttons, so every KS
	   button (side cart, confirm, login popup) matches them. Change once here. */
	--ks-btn-radius: var(--ks-radius-pill);
	--ks-btn-min-height: 46px;
	--ks-btn-pad-y: 0px;
	--ks-btn-pad-x: 24px;
	--ks-btn-font-size: 0.95em;
	--ks-btn-font-weight: 600;
	--ks-btn-letter-spacing: 0.3px;
	--ks-btn-line-height: 1.4;
	--ks-btn-text-transform: capitalize;
	--ks-btn-border-width: 1px;

	/* The "Sepete Ekle" submit look — gold fill + black label, orange + white on
	   hover. The fill tracks the Elementor "Button Primary" global, the SAME
	   source the product page's add-to-cart uses (frontend.css) — retune it in
	   the Elementor panel and the whole funnel follows. (It was pinned to a hex
	   copy here once; the operator later changed the global and the two yellows
	   silently drifted apart. Don't pin it again.) The orange+white hover is
	   this button's own identity (operatör, 12 Ağu 2026) — deliberately NOT the
	   product button's Button-Primary-Hover pattern. */
	--ks-submit-bg: var(--e-global-color-cdea875, #f3c924);
	--ks-submit-text: #000000;
	--ks-submit-hover-bg: var(--ks-accent);
	--ks-submit-hover-text: #ffffff;

	/* ── "Google ile devam et" button ──────────────────────────────────────
	   Custom-styled within Google's branding rules: the multi-colour "G" mark
	   sits on a white field, so the button stays white/neutral (the stroke +
	   text follow Google's light spec); shape/size come from --ks-btn-*. */
	--ks-google-bg: #ffffff;
	--ks-google-text: #1f1f1f;
	--ks-google-border: #747775;
	--ks-google-hover-bg: #f7f8f8;

	/* Optical vertical nudge (extra TOP padding). The font's natural flex-centre
	   already sits ~0.5px above the geometric centre, which reads as optically
	   centred for an icon-less label (the eye wants text a hair high). Measured
	   sweet spot between "1px top = looks low" and "2px bottom = looks high", so
	   we keep the natural position: 0. Bump this only if a label reads low. */
	--ks-btn-optical-nudge: 0px;
}