/* ================================================
   GRKN Stats — style.css  v1.4.0
   Themes: dark | flat | glass
   Mobile: grkn-mobile-stack | grkn-mobile-2col | grkn-mobile-4col
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Barlow:wght@400;500&display=swap');

/* ================================================
   SHARED BASE
   ================================================ */
.grkn-stats-wrapper {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 36px 20px;
	overflow: hidden;
	box-sizing: border-box;
}
.grkn-stats-wrapper.grkn-has-bg {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.grkn-overlay { display: none; }
.grkn-has-bg .grkn-overlay {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
}




.grkn-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 960px;
	margin: 0 auto;
}

.grkn-card {
	padding: 20px 16px 16px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	cursor: default;
	box-sizing: border-box;
}

.grkn-card-text { display: block; }

.grkn-icon {
	font-size: 22px;
	margin-bottom: 8px;
	line-height: 1;
}
.grkn-sub {
	font-family: 'Barlow', sans-serif;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.grkn-number {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 5px;
	transition: color 0.3s ease;
}
.grkn-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@keyframes grkn-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}

/* ================================================
   THEME: DARK NEON
   ================================================ */
.grkn-theme-dark {
	background-color: #0a0e1a;
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 110%, rgba(190,0,255,0.18) 0%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 20% -10%, rgba(255,0,120,0.12) 0%, transparent 60%),
		linear-gradient(160deg, #0a0e1a 0%, #12183a 50%, #0a0e1a 100%);
}
.grkn-theme-dark::before {
	content:''; position:absolute; width:500px; height:500px; border-radius:50%;
	background:radial-gradient(circle,rgba(200,0,255,0.12) 0%,transparent 70%);
	top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:0;
}
.grkn-theme-dark.grkn-has-bg .grkn-overlay {
	background: linear-gradient(180deg,rgba(10,14,26,0.82) 0%,rgba(10,14,26,0.72) 50%,rgba(10,14,26,0.88) 100%);
}
.grkn-theme-dark .grkn-card {
	background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
	backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.grkn-theme-dark .grkn-card::before {
	content:''; position:absolute; top:0; left:0; right:0; height:2px;
	background:linear-gradient(90deg,#ff0080,#bf00ff,#ff0080); background-size:200% 100%;
	animation:grkn-shimmer 3s linear infinite;
}
.grkn-theme-dark .grkn-card::after {
	content:''; position:absolute; inset:0;
	background:radial-gradient(ellipse 60% 80% at 50% 120%,rgba(191,0,255,0.1) 0%,transparent 70%);
	pointer-events:none; opacity:0; transition:opacity 0.35s ease;
}
.grkn-theme-dark .grkn-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(191,0,255,0.25),0 4px 20px rgba(0,0,0,0.4); }
.grkn-theme-dark .grkn-card:hover::after { opacity:1; }
.grkn-theme-dark .grkn-icon   { color:#ffffff; }
.grkn-theme-dark .grkn-sub    { color:rgba(255,255,255,0.4); }
.grkn-theme-dark .grkn-number { color:#ffffff; text-shadow:0 0 30px rgba(191,0,255,0.5),0 0 60px rgba(255,0,128,0.2); }
.grkn-theme-dark .grkn-card:hover .grkn-number { color:#f0c0ff; text-shadow:0 0 20px rgba(191,0,255,0.8),0 0 60px rgba(255,0,128,0.4); }
.grkn-theme-dark .grkn-label  { color:rgba(255,255,255,0.55); }

/* ================================================
   THEME: FLAT WHITE
   ================================================ */
.grkn-theme-flat { background-color:#ffffff; }
.grkn-theme-flat.grkn-has-bg .grkn-overlay { background:rgba(255,255,255,0.82); }
.grkn-theme-flat .grkn-card {
	background:#ffffff; border:1px solid #e8e8e8; border-top:3px solid #111111;
	border-radius:2px; box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.grkn-theme-flat .grkn-card::before, .grkn-theme-flat .grkn-card::after { display:none; }
.grkn-theme-flat .grkn-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,0.10); }
.grkn-theme-flat .grkn-icon   { color:#111111; }
.grkn-theme-flat .grkn-sub    { color:#aaaaaa; }
.grkn-theme-flat .grkn-number { color:#111111; text-shadow:none; }
.grkn-theme-flat .grkn-label  { color:#555555; }

/* ================================================
   THEME: GLASS
   ================================================ */
.grkn-theme-glass {
	background-color:#1a2540;
	background-image:linear-gradient(135deg,#1a2540 0%,#2d1b4e 100%);
}
.grkn-theme-glass.grkn-has-bg .grkn-overlay {
	background:linear-gradient(180deg,rgba(15,20,40,0.55) 0%,rgba(30,15,55,0.55) 100%);
	backdrop-filter:blur(2px);
}
.grkn-theme-glass::after {
	content:''; position:absolute; inset:0;
	background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events:none; z-index:0;
}
.grkn-theme-glass .grkn-card {
	background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
	border-top:1px solid rgba(255,255,255,0.35); border-radius:16px;
	backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
	box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -1px 0 rgba(0,0,0,0.1);
}
.grkn-theme-glass .grkn-card::before {
	content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent); border-radius:50%;
}
.grkn-theme-glass .grkn-card::after {
	content:''; position:absolute; inset:0; border-radius:16px;
	background:rgba(255,255,255,0.04); opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.grkn-theme-glass .grkn-card:hover {
	transform:translateY(-5px); background:rgba(255,255,255,0.13);
	box-shadow:0 16px 48px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.25),inset 0 1px 0 rgba(255,255,255,0.25);
}
.grkn-theme-glass .grkn-card:hover::after { opacity:1; }
.grkn-theme-glass .grkn-icon   { color:rgba(255,255,255,0.9); }
.grkn-theme-glass .grkn-sub    { color:rgba(255,255,255,0.45); }
.grkn-theme-glass .grkn-number { color:#ffffff; text-shadow:0 2px 12px rgba(255,255,255,0.15); }
.grkn-theme-glass .grkn-card:hover .grkn-number { color:#e8d5ff; }
.grkn-theme-glass .grkn-label  { color:rgba(255,255,255,0.5); }

/* ================================================
   TABLET (768px altı) — her zaman 2 sütun
   ================================================ */
@media (max-width: 768px) {
	.grkn-grid          { grid-template-columns:repeat(2,1fr); gap:12px; }
	.grkn-stats-wrapper { padding:28px 16px; }
	.grkn-card          { padding:16px 12px 14px; }
}

/* ================================================
   MOBİL (600px altı) — 3 farklı düzen
   ================================================ */

/* --- STACK: tam alt alta --- */
@media (max-width: 600px) {
	.grkn-mobile-stack .grkn-grid {
		grid-template-columns: 1fr;
		gap: 10px;
		max-width: 420px;
	}
	.grkn-mobile-stack .grkn-stats-wrapper { padding:24px 16px; }
	.grkn-mobile-stack .grkn-card {
		padding: 18px 20px;
		text-align: center;
	}
	.grkn-mobile-stack .grkn-icon   { font-size:22px; margin-bottom:8px; }
	.grkn-mobile-stack .grkn-number { font-size:clamp(26px,8vw,40px); }
}

/* --- 2COL: 2x2 ızgara --- */
@media (max-width: 600px) {
	.grkn-mobile-2col .grkn-grid {
		grid-template-columns: repeat(2,1fr);
		gap: 10px;
	}
	.grkn-mobile-2col .grkn-stats-wrapper { padding:24px 12px; }
	.grkn-mobile-2col .grkn-card {
		padding: 16px 10px 14px;
		text-align: center;
	}
	.grkn-mobile-2col .grkn-icon   { font-size:18px; margin-bottom:6px; }
	.grkn-mobile-2col .grkn-number { font-size:clamp(22px,6vw,34px); }
	.grkn-mobile-2col .grkn-label  { font-size:11px; }
}

/* --- 4COL: 4 yan yana --- */
@media (max-width: 600px) {
	.grkn-mobile-4col .grkn-grid {
		grid-template-columns: repeat(4,1fr);
		gap: 6px;
	}
	.grkn-mobile-4col .grkn-stats-wrapper { padding:20px 8px; }
	.grkn-mobile-4col .grkn-card {
		padding: 12px 6px 10px;
		text-align: center;
	}
	.grkn-mobile-4col .grkn-icon   { font-size:14px; margin-bottom:4px; }
	.grkn-mobile-4col .grkn-sub    { font-size:7px; letter-spacing:0.1em; margin-bottom:2px; }
	.grkn-mobile-4col .grkn-number { font-size:clamp(16px,4vw,24px); margin-bottom:3px; }
	.grkn-mobile-4col .grkn-label  { font-size:9px; letter-spacing:0.08em; }
}

/* ================================================
   TRANSPARENT BACKGROUND
   Section arka planını tamamen kaldırır.
   Kartlar ve yazılar kalır, wrapper bg yok olur.
   ================================================ */
.grkn-bg-transparent {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
}
.grkn-bg-transparent::before,
.grkn-bg-transparent::after {
	display: none !important;
}
.grkn-bg-transparent .grkn-overlay {
	display: none !important;
}

/* ================================================
   SECTION COLOR OVERRIDE
   Kullanıcı renk seçtiğinde tema bg'sini sıfırla.
   PHP wrapper'a grkn-section-color class'ı ekler.
   ================================================ */
.grkn-section-color {
	background-color: transparent !important;
	background-image: none !important;
}
.grkn-section-color::before {
	display: none !important;
}