/* =========================================================================
   Tasarım sistemi — Tailwind v4'ten vanilya CSS'e dönüştürülmüş.
   Renkler CSS değişkenleriyle, opaklık varyasyonları color-mix ile üretilir.
   ========================================================================= */:root, .dark {
  --radius: 0.8rem;
  --background: oklch(0.13 0.012 25);
  --foreground: oklch(0.97 0.005 25);
  --card: oklch(0.165 0.014 25);
  --card-foreground: oklch(0.97 0.005 25);
  --popover: oklch(0.165 0.014 25);
  --popover-foreground: oklch(0.97 0.005 25);
  --primary: oklch(0.63 0.22 25);
  --primary-hover: oklch(0.7 0.2 30);
  --primary-foreground: oklch(0.985 0.005 25);
  --secondary: oklch(0.22 0.018 25);
  --secondary-foreground: oklch(0.97 0.005 25);
  --muted: oklch(0.21 0.016 25);
  --muted-foreground: oklch(0.7 0.015 25);
  --accent: oklch(0.24 0.02 25);
  --accent-foreground: oklch(0.97 0.005 25);
  --destructive: oklch(0.63 0.22 25);
  --destructive-foreground: oklch(0.985 0.003 25);
  --border: oklch(0.25 0.016 25);
  --border-strong: oklch(0.34 0.025 25);
  --input: oklch(0.25 0.016 25);
  --ring: oklch(0.63 0.22 25);
  --success: oklch(0.7 0.18 28);
  --success-soft: oklch(0.22 0.03 25);
  --canvas-soft: oklch(0.15 0.014 25);
  --footer-surface: oklch(0.17 0.014 25);
  --footer-foreground: oklch(0.985 0 0);
  --font-sans: "Inter", sans-serif;
  --font-display: "Outfit", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: 0;
  line-height: 1.5;
}
img, svg { vertical-align: middle; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: inherit; }
.font-display { font-family: var(--font-display); }
.tabular-nums { font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------ */
/* Düzen yardımcıları                                                   */
/* ------------------------------------------------------------------ */
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
@supports (width: max-content) { .h-fit { height: max-content; } }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.place-items-center { place-items: center; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { right: 0; left: 0; }
.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.top-1\/3 { top: 33.3333%; }
.top-1\/4 { top: 25%; }
.top-3\.5 { top: 0.875rem; }
.top-4 { top: 1rem; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.left-3 { left: 0.75rem; }
.left-3.5 { left: 0.875rem; }
.right-4 { right: 1rem; }
.bottom-0 { bottom: 0; }
.bottom-4 { bottom: 1rem; }
.bottom-5 { bottom: 1.25rem; }
.bottom-\[14\%\] { bottom: 14%; }
.bottom-\[16\%\] { bottom: 16%; }
.left-\[5\%\] { left: 5%; }
.left-\[6\%\] { left: 6%; }
.right-\[4\%\] { right: 4%; }
.right-\[5\%\] { right: 5%; }
.top-\[17\%\] { top: 17%; }
.top-\[18\%\] { top: 18%; }
.top-\[34\%\] { top: 34%; }
.top-\[calc\(100\%\+6px\)\] { top: calc(100% + 6px); }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }
.z-\[70\] { z-index: 70; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.max-h-60 { max-height: 15rem; }
.max-h-\[calc\(100dvh-1\.5rem\)\] { max-height: calc(100dvh - 1.5rem); }
.max-h-\[calc\(100dvh-2rem\)\] { max-height: calc(100dvh - 2rem); }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-left { object-position: left; }
.min-h-screen { min-height: 100vh; }
.min-h-\[calc\(100vh-1\.5rem\)\] { min-height: calc(100vh - 1.5rem); }
.min-w-0 { min-width: 0; }
.min-w-\[3\.25rem\] { min-width: 3.25rem; }
.w-full { width: 100%; }
.w-px { width: 1px; }
.w-1\.5 { width: 0.375rem; }
.w-2 { width: 0.5rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-16 { width: 4rem; }
.w-24 { width: 6rem; }
.w-40 { width: 10rem; }
.w-44 { width: 11rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-\[7\.5rem\] { width: 7.5rem; }
.w-\[17rem\] { width: 17rem; }
.w-\[88\%\] { width: 88%; }
.w-\[calc\(100\%-1\.5rem\)\] { width: calc(100% - 1.5rem); }
.w-\[calc\(100\%-2rem\)\] { width: calc(100% - 2rem); }
.max-w-full { max-width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-\[220px\] { max-width: 220px; }
.max-w-\[400px\] { max-width: 400px; }
.max-w-\[85\%\] { max-width: 85%; }
.max-w-\[1440px\] { max-width: 1440px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.ml-auto { margin-left: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.text-\[13px\] { font-size: 13px; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
/* ------------------------------------------------------------------ */
/* Boşluk (padding / gap / space)                                       */
/* ------------------------------------------------------------------ */
.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-\[3px\] { padding: 3px; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-12 { padding-top: 3rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-3\.5 { padding-left: 0.875rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-9 { padding-left: 2.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-3\.5 { padding-right: 0.875rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-12 { padding-right: 3rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
/* ------------------------------------------------------------------ */
/* Tipografi                                                             */
/* ------------------------------------------------------------------ */
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-5xl { font-size: 3rem; }
.text-7xl { font-size: 4.5rem; }
.text-white { color: #fff; }
.text-white\/60 { color: color-mix(in oklab, #fff 60%, transparent); }
.text-white\/90 { color: color-mix(in oklab, #fff 90%, transparent); }
.text-\[\#25D366\] { color: #25D366; }
.normal-case { text-transform: none; }
.uppercase { text-transform: uppercase; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-4 { line-height: 1rem; }
.leading-5 { line-height: 1.25rem; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-\[0\.92\] { line-height: 0.92; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; }
.tracking-\[0\.14em\] { letter-spacing: 0.14em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[-0\.01em\] { letter-spacing: -0.01em; }
.tracking-\[-0\.03em\] { letter-spacing: -0.03em; }
.break-all { word-break: break-all; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
/* ------------------------------------------------------------------ */
/* Metin renkleri                                                       */
/* ------------------------------------------------------------------ */
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-primary\/80 { color: color-mix(in oklab, var(--primary) 80%, transparent); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-destructive { color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-success { color: var(--success); }
.text-footer-foreground { color: var(--footer-foreground); }
.text-card-foreground { color: var(--card-foreground); }
.line-through { text-decoration: line-through; }
/* ------------------------------------------------------------------ */
/* Arka plan renkleri                                                   */
/* ------------------------------------------------------------------ */
.bg-background { background-color: var(--background); }
.bg-background\/40 { background-color: color-mix(in oklab, var(--background) 40%, transparent); }
.bg-background\/50 { background-color: color-mix(in oklab, var(--background) 50%, transparent); }
.bg-background\/70 { background-color: color-mix(in oklab, var(--background) 70%, transparent); }
.bg-card { background-color: var(--card); }
.bg-card\/50 { background-color: color-mix(in oklab, var(--card) 50%, transparent); }
.bg-card\/60 { background-color: color-mix(in oklab, var(--card) 60%, transparent); }
.bg-card\/70 { background-color: color-mix(in oklab, var(--card) 70%, transparent); }
.bg-card\/80 { background-color: color-mix(in oklab, var(--card) 80%, transparent); }
.bg-card\/90 { background-color: color-mix(in oklab, var(--card) 90%, transparent); }
.bg-popover { background-color: var(--popover); }
.bg-muted { background-color: var(--muted); }
.bg-primary { background-color: var(--primary); }
.bg-primary\/5 { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/12 { background-color: color-mix(in oklab, var(--primary) 12%, transparent); }
.bg-primary\/15 { background-color: color-mix(in oklab, var(--primary) 15%, transparent); }
.bg-primary\/60 { background-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.bg-destructive { background-color: var(--destructive); }
.bg-destructive\/5 { background-color: color-mix(in oklab, var(--destructive) 5%, transparent); }
.bg-destructive\/10 { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
.bg-success-soft { background-color: var(--success-soft); }
.bg-canvas-soft { background-color: var(--canvas-soft); }
.bg-footer-surface { background-color: var(--footer-surface); }
.bg-foreground\/45 { background-color: color-mix(in oklab, var(--foreground) 45%, transparent); }
.bg-border-strong\/50 { background-color: color-mix(in oklab, var(--border-strong) 50%, transparent); }
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #fff; }
.bg-white\/10 { background-color: color-mix(in oklab, #fff 10%, transparent); }
.bg-\[\#0b141a\] { background-color: #0b141a; }
.bg-\[\#1f2c34\] { background-color: #1f2c34; }
.bg-\[\#005c4b\] { background-color: #005c4b; }
.bg-\[\#25D366\] { background-color: #25D366; }
.bg-\[\#25D366\]\/12 { background-color: color-mix(in oklab, #25D366 12%, transparent); }
/* Degradeler */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-from, transparent), var(--tw-to, transparent)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-from, transparent), var(--tw-to, transparent)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-from, transparent), var(--tw-to, transparent)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-from, transparent), var(--tw-to, transparent)); }
.from-primary { --tw-from: var(--primary); }
.from-primary\/15 { --tw-from: color-mix(in oklab, var(--primary) 15%, transparent); }
.from-primary\/20 { --tw-from: color-mix(in oklab, var(--primary) 20%, transparent); }
.to-primary\/5 { --tw-to: color-mix(in oklab, var(--primary) 5%, transparent); }
.to-primary\/70 { --tw-to: color-mix(in oklab, var(--primary) 70%, transparent); }
.to-primary-hover { --tw-to: var(--primary-hover); }
/* ------------------------------------------------------------------ */
/* Kenarlıklar                                                          */
/* ------------------------------------------------------------------ */
.border { border: 1px solid var(--border); }
.border-0 { border-width: 0; }
.border-b { border-bottom-width: 1px; }
.border-x { border-left-width: 1px; border-right-width: 1px; }
.border-dashed { border-style: dashed; }
.border-border { border-color: var(--border); }
.border-border\/45 { border-color: color-mix(in oklab, var(--border) 45%, transparent); }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }
.border-border\/70 { border-color: color-mix(in oklab, var(--border) 70%, transparent); }
.border-border-strong { border-color: var(--border-strong); }
.border-border-strong\/40 { border-color: color-mix(in oklab, var(--border-strong) 40%, transparent); }
.border-border-strong\/45 { border-color: color-mix(in oklab, var(--border-strong) 45%, transparent); }
.border-border-strong\/50 { border-color: color-mix(in oklab, var(--border-strong) 50%, transparent); }
.border-border-strong\/55 { border-color: color-mix(in oklab, var(--border-strong) 55%, transparent); }
.border-border-strong\/60 { border-color: color-mix(in oklab, var(--border-strong) 60%, transparent); }
.border-border-strong\/70 { border-color: color-mix(in oklab, var(--border-strong) 70%, transparent); }
.border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.border-primary\/35 { border-color: color-mix(in oklab, var(--primary) 35%, transparent); }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.border-primary\/45 { border-color: color-mix(in oklab, var(--primary) 45%, transparent); }
.border-primary\/50 { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.border-primary\/60 { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.border-input { border-color: var(--input); }
.border-destructive\/40 { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
.border-success\/40 { border-color: color-mix(in oklab, var(--success) 40%, transparent); }
.border-white\/10 { border-color: color-mix(in oklab, #fff 10%, transparent); }
.border-\[\#25D366\]\/35 { border-color: color-mix(in oklab, #25D366 35%, transparent); }
/* ------------------------------------------------------------------ */
/* Yarıçap                                                              */
/* ------------------------------------------------------------------ */
.rounded-sm { border-radius: calc(var(--radius) - 4px); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: calc(var(--radius) + 4px); }
.rounded-2xl { border-radius: calc(var(--radius) + 8px); }
.rounded-3xl { border-radius: calc(var(--radius) + 12px); }
.rounded-full { border-radius: 9999px; }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-b-full { border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; }
.rounded-t-2xl { border-top-left-radius: calc(var(--radius) + 8px); border-top-right-radius: calc(var(--radius) + 8px); }
.rounded-tl-sm { border-top-left-radius: calc(var(--radius) - 4px); }
.rounded-tr-sm { border-top-right-radius: calc(var(--radius) - 4px); }
.rounded-t-sm { border-top-left-radius: calc(var(--radius) - 4px); border-top-right-radius: calc(var(--radius) - 4px); }
/* ------------------------------------------------------------------ */
/* Gölgeler                                                            */
/* ------------------------------------------------------------------ */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-primary\/30 { box-shadow: 0 12px 40px -16px color-mix(in oklab, var(--primary) 30%, transparent); }
.shadow-primary\/40 { box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--primary) 40%, transparent); }
.shadow-primary\/50 { box-shadow: 0 10px 36px -12px color-mix(in oklab, var(--primary) 50%, transparent); }
.shadow-primary\/60 { box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--primary) 60%, transparent); }
.shadow-\[0_10px_30px_-14px\] { box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.3); }
.shadow-\[0_10px_36px_-12px\] { box-shadow: 0 10px 36px -12px rgb(0 0 0 / 0.3); }
.shadow-\[0_12px_40px_-16px\] { box-shadow: 0 12px 40px -16px rgb(0 0 0 / 0.3); }
.shadow-\[0_24px_60px_-24px\] { box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.4); }
.shadow-\[inset_0_1px_0_color-mix\(in_oklab\,var\(--primary\)_12\%\,transparent\)\] { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--primary) 12%, transparent); }
/* ------------------------------------------------------------------ */
/* Efektler ve animasyon yardımcıları                                   */
/* ------------------------------------------------------------------ */
.backdrop-blur { backdrop-filter: blur(8px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); }
.brightness-0 { filter: brightness(0); }
.invert { filter: invert(1); }
.logo-white { filter: brightness(0) invert(1); }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.cursor-pointer { cursor: pointer; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.resize-none { resize: none; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-95 { opacity: 0.95; }
.blur-3xl { filter: blur(64px); }
.rotate-\[6deg\] { rotate: 6deg; }
.rotate-\[7deg\] { rotate: 7deg; }
.-rotate-6 { rotate: -6deg; }
.-rotate-\[7deg\] { rotate: -7deg; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[border-color\,box-shadow\] { transition-property: border-color, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[border-color\,box-shadow\,background-color\] { transition-property: border-color, box-shadow, background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; }
.duration-200 { transition-duration: 200ms; }
.hover\:-translate-y-px\:hover { --tw-ty: -1px; translate: var(--tw-tx, 0) var(--tw-ty, 0); }
.hover\:-translate-y-0\.5\:hover { --tw-ty: -2px; translate: var(--tw-tx, 0) var(--tw-ty, 0); }
.translate-y-1\/2 { --tw-ty: 50%; translate: var(--tw-tx, 0) var(--tw-ty, 0); }
.-translate-x-1\/2 { --tw-tx: -50%; translate: var(--tw-tx, 0) var(--tw-ty, 0); }
.-translate-y-1\/2 { --tw-ty: -50%; translate: var(--tw-tx, 0) var(--tw-ty, 0); }
.rotate-180 { rotate: 180deg; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color, transparent); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-\[3px\] { --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color, transparent); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-border-strong\/60 { --tw-ring-color: color-mix(in oklab, var(--border-strong) 60%, transparent); }
.ring-white\/25 { --tw-ring-color: color-mix(in oklab, #fff 25%, transparent); }
.ring-primary\/15 { --tw-ring-color: color-mix(in oklab, var(--primary) 15%, transparent); }
.accent-\[var\(--primary\)\] { accent-color: var(--primary); }
/* ------------------------------------------------------------------ */
/* Etkileşim / durum sınıfları                                          */
/* ------------------------------------------------------------------ */
.hover\:bg-accent\:hover { background-color: var(--accent); }
.hover\:bg-muted:hover { background-color: var(--muted); }
.hover\:bg-primary\/10\:hover { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.hover\:bg-primary\/20:hover { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.hover\:bg-primary\/90\:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); }
.hover\:bg-white\/20\:hover { background-color: color-mix(in oklab, #fff 20%, transparent); }
.hover\:bg-\[\#1eb458\]\:hover { background-color: #1eb458; }
.hover\:bg-\[\#25D366\]\/20:hover { background-color: color-mix(in oklab, #25D366 20%, transparent); }
.hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.hover\:border-primary\/25\:hover { border-color: color-mix(in oklab, var(--primary) 25%, transparent); }
.hover\:border-\[\#25D366\]\/60\:hover { border-color: color-mix(in oklab, #25D366 60%, transparent); }
.hover\:text-foreground\:hover { color: var(--foreground); }
.hover\:text-primary\:hover { color: var(--primary); }
.hover\:text-white\:hover { color: #fff; }
.hover\:opacity-80\:hover { opacity: 0.8; }
.placeholder\:text-muted-foreground\/70\:\:placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.placeholder\:text-white\/40\:\:placeholder { color: color-mix(in oklab, #fff 40%, transparent); }
.focus\:border-primary\/60\:focus { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.focus\:border-\[\#25D366\]\/70\:focus { border-color: color-mix(in oklab, #25D366 70%, transparent); }
.focus\:ring-2\:focus { --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color, transparent); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-ring\/40\:focus { --tw-ring-color: color-mix(in oklab, var(--ring) 40%, transparent); }
.focus\:ring-\[\#25D366\]\/25\:focus { --tw-ring-color: color-mix(in oklab, #25D366 25%, transparent); }
/* ------------------------------------------------------------------ */
/* Responsive: sm >= 640px                                              */
/* ------------------------------------------------------------------ */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:rounded-3xl { border-radius: calc(var(--radius) + 12px); }
  .sm\:rounded-full { border-radius: 9999px; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:pb-10 { padding-bottom: 2.5rem; }
  .sm\:pt-6 { padding-top: 1.5rem; }
  .sm\:pt-16 { padding-top: 4rem; }
  .sm\:mt-7 { margin-top: 1.75rem; }
  .sm\:pl-7 { padding-left: 1.75rem; }
  .sm\:text-base { font-size: 1rem; }
  .sm\:text-sm { font-size: 0.875rem; }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:text-7xl { font-size: 4.5rem; }
  .sm\:h-12 { height: 3rem; }
  .sm\:w-12 { width: 3rem; }
  .sm\:w-56 { width: 14rem; }
  .sm\:min-h-\[calc\(100vh-3rem\)\] { min-height: calc(100vh - 3rem); }
  .sm\:h-\[520px\] { height: 520px; }
  .sm\:h-\[760px\] { height: 760px; }
  .sm\:h-\[1000px\] { height: 1000px; }
  .sm\:w-\[520px\] { width: 520px; }
  .sm\:w-\[760px\] { width: 760px; }
  .sm\:w-\[1000px\] { width: 1000px; }
}
/* ------------------------------------------------------------------ */
/* Responsive: md >= 768px                                              */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .md\:block { display: block; }
}
/* ------------------------------------------------------------------ */
/* Responsive: lg >= 1024px                                             */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:min-h-\[830px\] { min-height: 830px; }
  .lg\:mt-7 { margin-top: 1.75rem; }
  .lg\:pt-8 { padding-top: 2rem; }
  .lg\:pt-14 { padding-top: 3.5rem; }
  .lg\:pb-12 { padding-bottom: 3rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:text-\[5\.75rem\] { font-size: 5.75rem; }
}
/* ------------------------------------------------------------------ */
/* Alan adı fiyat bölümü — kutu boyutları                               */
/* ------------------------------------------------------------------ */
.h-1\.5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-28 { height: 7rem; }
.h-64 { height: 16rem; }
.h-72 { height: 18rem; }
.h-full { height: 100%; }
.h-\[15px\] { height: 15px; }
.h-\[52px\] { height: 52px; }
.h-\[380px\] { height: 380px; }
.h-\[420px\] { height: 420px; }
.h-\[560px\] { height: 560px; }
.h-\[740px\] { height: 740px; }
.w-\[380px\] { width: 380px; }
.w-\[560px\] { width: 560px; }
.w-\[740px\] { width: 740px; }
/* ------------------------------------------------------------------ */
/* Özel yardımcılar (Tailwind @utility karşılıkları)                    */
/* ------------------------------------------------------------------ */
.blueprint-grid {
  background-image: linear-gradient(to right, color-mix(in oklab, var(--border) 48%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--border) 48%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero-glow {
  background: radial-gradient(60% 55% at 50% 42%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 72%), radial-gradient(34% 30% at 50% 12%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%);
}
.float-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: linear-gradient(160deg, color-mix(in oklab, var(--card) 94%, transparent), color-mix(in oklab, var(--success-soft) 55%, transparent));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.float-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in oklab, var(--primary) 16%, transparent) 1px, transparent 1px);
  background-size: 13px 13px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(135deg, black 0%, transparent 55%);
  mask-image: linear-gradient(135deg, black 0%, transparent 55%);
  pointer-events: none;
}
.float-card::after {
  content: "";
  position: absolute;
  inset-inline: 18%;
  top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 60%, transparent), transparent);
  pointer-events: none;
}
.float-card:hover { translate: 0 -4px; rotate: 0deg; }
.drift { animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ticket-sheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
.ticket-face {
  position: relative;
  isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%), var(--card);
  -webkit-mask: radial-gradient(circle 0.7rem at 0 50%, transparent 98%, black 100%) left / 51% 100% no-repeat, radial-gradient(circle 0.7rem at 100% 50%, transparent 98%, black 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.7rem at 0 50%, transparent 98%, black 100%) left / 51% 100% no-repeat, radial-gradient(circle 0.7rem at 100% 50%, transparent 98%, black 100%) right / 51% 100% no-repeat;
}
.ticket-face::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--foreground) 7%, transparent), transparent);
  animation: ticket-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .drift, .ticket-face::before, .pack-badge::after, .animate-spin, .animate-pulse, .animate-ping { animation: none; }
}
/* ------------------------------------------------------------------ */
/* Yüzen kart giriş/çıkış animasyonu (WhatsApp)                         */
/* ------------------------------------------------------------------ */
@keyframes waDrop { from { opacity: 0; transform: translateY(-24px) scale(0.97); } to { opacity: 1; transform: none; } }
.wa-drop { animation: waDrop 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
/* ------------------------------------------------------------------ */
/* Radio renk girişi                                                   */
/* ------------------------------------------------------------------ */
input[type="color"] { padding: 2px; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--card); cursor: pointer; }
/* ------------------------------------------------------------------ */
/* Form alanı (floating label)                                         */
/* ------------------------------------------------------------------ */
.field {
  width: 100%;
  height: 52px;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
  background-color: color-mix(in oklab, var(--background) 50%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  outline: none;
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
  padding-top: 0.75rem;
  padding-bottom: 0;
}
.field:focus { border-color: color-mix(in oklab, var(--primary) 70%, transparent); background-color: color-mix(in oklab, var(--background) 80%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent); }
.field-pl { padding-left: 2.5rem; }
.field-pr { padding-right: 0.875rem; }
.field-pl3 { padding-left: 0.875rem; }
.field-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: var(--muted-foreground);
  pointer-events: none;
  transition: color 150ms;
}
.field-label {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 0 0.375rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  background: var(--card);
  pointer-events: none;
  transition: all 200ms;
}
.field-label-icon { left: 2rem; }
.field:focus ~ .field-label,
.field:not(:placeholder-shown) ~ .field-label { top: 0; font-size: 11px; font-weight: 700; transform: none; }
.field:focus ~ .field-label { color: var(--primary); }
.field:focus ~ .field-icon { color: var(--primary); }
.field-area {
  display: block;
  width: 100%;
  resize: none;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
  background-color: color-mix(in oklab, var(--background) 50%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  outline: none;
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
  padding: 1.25rem 0.875rem 0.75rem;
}
.field-area:focus { border-color: color-mix(in oklab, var(--primary) 70%, transparent); background-color: color-mix(in oklab, var(--background) 80%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent); }
.field-area-icon { padding-left: 2.5rem; }
.field-area-label { top: 0.875rem; transform: none; }
.field-area:focus ~ .field-label,
.field-area:not(:placeholder-shown) ~ .field-label { top: 0; transform: translateY(-50%); font-size: 11px; font-weight: 700; }
.field-area:focus ~ .field-label { color: var(--primary); }
.field-area-icon-el { top: 1rem; transform: none; }
.field-hint { margin-top: 0.375rem; padding-left: 0.25rem; font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
/* ------------------------------------------------------------------ */
/* Yönetim paneli girişleri / etiketleri                                */
/* ------------------------------------------------------------------ */
.input {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
  background-color: color-mix(in oklab, var(--card) 60%, transparent);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  outline: none;
  transition: border-color 150ms;
}
.input::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.input:focus { border-color: color-mix(in oklab, var(--primary) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent); }
.input-sm { width: 6rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.input-lg-pad { padding-left: 2.25rem; }
.label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.card {
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--border-strong) 45%, transparent);
  background-color: color-mix(in oklab, var(--card) 70%, transparent);
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px dashed color-mix(in oklab, var(--border-strong) 60%, transparent);
  background-color: color-mix(in oklab, var(--background) 40%, transparent);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.checkbox-pill input { width: 1rem; height: 1rem; accent-color: var(--primary); }
/* ------------------------------------------------------------------ */
/* Ülke seçimi                                                         */
/* ------------------------------------------------------------------ */
.country-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 52px;
  width: 7.5rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--border-strong) 60%, transparent);
  background-color: color-mix(in oklab, var(--background) 50%, transparent);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  outline: none;
}
.country-chev { margin-left: auto; color: var(--muted-foreground); transition: transform 200ms; flex-shrink: 0; }
.country-drop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: 17rem;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--border-strong);
  background-color: var(--popover);
  box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--primary) 40%, transparent);
}
.country-search { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding: 0.625rem 0.75rem; color: var(--muted-foreground); }
.country-q { width: 100%; background: transparent; font-size: 0.875rem; font-weight: 400; outline: none; color: var(--foreground); }
.country-list { max-height: 15rem; overflow-y: auto; padding: 0.25rem 0; margin: 0; list-style: none; }
.country-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--foreground);
  background: transparent;
  border: 0;
}
.country-opt:hover { background-color: var(--accent); }
.country-opt.active { background-color: color-mix(in oklab, var(--accent) 70%, transparent); font-weight: 700; }
.country-dial { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.country-empty { padding: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
/* ------------------------------------------------------------------ */
/* WhatsApp penceresi                                                  */
/* ------------------------------------------------------------------ */
.wa-drop { animation: waDrop 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.wa-input {
  width: 100%;
  resize: none;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #1f2c34;
  padding: 0.75rem 0.875rem;
  font-size: 0.875rem;
  color: #fff;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.wa-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.wa-input:focus { border-color: rgba(37, 211, 102, 0.7); box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.25); }
.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.75rem;
  border: 0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-foreground);
  background-image: linear-gradient(135deg, var(--primary), var(--primary-hover));
  box-shadow: 0 10px 28px -12px color-mix(in oklab, var(--primary) 70%, transparent);
  transition: filter 150ms;
}
.btn-wa:hover { filter: brightness(1.07); }
.btn-wa[disabled] { opacity: 0.5; cursor: not-allowed; }
/* ------------------------------------------------------------------ */
/* Yönetim paneli yardımcıları                                         */
/* ------------------------------------------------------------------ */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--foreground); padding: 0.5rem; border-radius: 0.5rem; }
.btn-icon:hover { background-color: var(--muted); }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  color: var(--foreground);
  transition: background-color 150ms;
}
.btn-outline:hover { background-color: var(--muted); }
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  border-radius: 9999px;
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  transition: color 150ms, background-color 150ms;
}
.tab-btn:hover { color: var(--foreground); }
.tab-btn.active { background-color: var(--primary); color: var(--primary-foreground); box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--primary) 60%, transparent); }
.unread-badge { border-radius: 9999px; background-color: var(--destructive); padding: 0 0.375rem; font-size: 10px; font-weight: 800; color: var(--destructive-foreground); }
.filter-pill {
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 50%, transparent);
  background-color: color-mix(in oklab, var(--card) 50%, transparent);
  padding: 0.375rem 0.75rem;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-foreground);
  transition: color 150ms;
}
.filter-pill:hover { color: var(--foreground); }
.filter-pill.active { border-color: color-mix(in oklab, var(--primary) 60%, transparent); background-color: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.theme-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 1px dashed color-mix(in oklab, var(--border) 45%, transparent);
  padding: 1rem;
  text-align: left;
  background: transparent;
  color: var(--foreground);
  transition: border-color 150ms, background-color 150ms;
}
.theme-card:hover { border-color: color-mix(in oklab, var(--primary) 25%, transparent); }
.theme-card.active { border-color: color-mix(in oklab, var(--primary) 45%, transparent); background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.theme-swatch { width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); flex-shrink: 0; }
/* ------------------------------------------------------------------ */
/* Butonlar ve kaplama katmanları                                      */
/* ------------------------------------------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 9999px;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-foreground);
  background-image: linear-gradient(to bottom right, var(--primary), var(--primary-hover));
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 9999px;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  background: transparent;
  transition: color 150ms, background-color 150ms;
}
.btn-ghost:hover { color: var(--primary); background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background-color: color-mix(in oklab, var(--foreground) 45%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wa-wrap { z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding: 0.75rem; }
@media (min-width: 640px) { .wa-wrap { padding: 1.5rem; } }
.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100% - 2rem);
  max-width: 28rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
/* ------------------------------------------------------------------ */
/* Yüzen bilgi kartları: yalnızca geniş ekranda (1400px+).             */
/* 1024-1366px laptoplarda orta içerikle çakışıp kaymış görünüyordu.   */
/* ------------------------------------------------------------------ */
.float-cards { display: none; }
@media (min-width: 1400px) { .float-cards { display: block; } }
/* ------------------------------------------------------------------ */
/* Derleme dışı kalmış eksik yardımcılar                               */
/* ------------------------------------------------------------------ */
.-translate-y-px { --tw-ty: -1px; translate: var(--tw-tx, 0) var(--tw-ty, 0); }
.-left-24 { left: -6rem; }
.-right-24 { right: -6rem; }
.m-0 { margin: 0; }
.mb-5 { margin-bottom: 1.25rem; }
/* ------------------------------------------------------------------ */
/* Overlay gizleme: .modal-wrap\/\.wa-wrap\/\.toast display kuralları      */
/* .hidden\'dan sonra geldiği için JS ile kapatma çalışmıyordu.        */
/* ------------------------------------------------------------------ */
.modal-wrap.hidden,
.wa-wrap.hidden,
.toast.hidden { display: none; }

/* ------------------------------------------------------------------ */
/* Fiyat bileti cilası                                                  */
/* ------------------------------------------------------------------ */
.ticket-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--primary); box-shadow: 0 0 8px color-mix(in oklab, var(--primary) 80%, transparent); }
.pack-badge { position: absolute; top: 0; right: 0; z-index: 1; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; font-size: 11px; font-weight: 800; color: var(--primary-foreground); background-image: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: 0 1rem 0 1rem; box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--primary) 70%, transparent); }
.old-price-top { font-size: 1.25rem; font-weight: 800; color: var(--muted-foreground); text-decoration: line-through; text-decoration-thickness: 2px; }
.price-tag { font-family: var(--font-sans); font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .price-tag { font-size: 3.75rem; } }
.cd-cell { border-radius: 0 0.9rem; background: linear-gradient(160deg, color-mix(in oklab, var(--primary) 14%, transparent), color-mix(in oklab, var(--card) 82%, transparent)); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }

/* ------------------------------------------------------------------ */
/* Telegram sohbet penceresi                                            */
/* ------------------------------------------------------------------ */
.tg-avatar { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0; overflow: hidden; border-radius: 9999px; background: #0e1621; }
.tg-avatar img { height: 100%; width: 100%; object-fit: contain; }
.tg-close { margin-left: auto; display: grid; place-items: center; height: 2rem; width: 2rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); border: 0; color: #fff; }
.tg-close:hover { background: rgba(255, 255, 255, 0.2); }
.tg-date { text-align: center; margin: 0 auto 12px; width: fit-content; font-size: 11px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.12); border-radius: 9999px; padding: 4px 12px; }
.tg-in { max-width: 85%; background: #182533; color: #fff; border-radius: 12px; border-top-left-radius: 4px; padding: 10px 14px; font-size: 13px; line-height: 1.45; }
.tg-out { max-width: 85%; margin-left: auto; margin-top: 12px; background: #2b5278; color: #fff; border-radius: 12px; border-top-right-radius: 4px; padding: 10px 14px; font-size: 13px; line-height: 1.45; }
.tg-time { display: block; text-align: right; font-size: 10px; opacity: 0.6; margin-top: 4px; }
.tg-preset { border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.1); background: #182533; padding: 0.375rem 0.75rem; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.tg-preset:hover { border-color: color-mix(in oklab, var(--primary) 60%, transparent); color: #fff; }
.tg-inputrow { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: #17212b; }
.tg-text { flex: 1; min-height: 44px; max-height: 120px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0e1621; color: #fff; padding: 10px 14px; font-size: 14px; }
.tg-text::placeholder { color: rgba(255, 255, 255, 0.4); }
.tg-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background-image: linear-gradient(135deg, var(--primary), var(--primary-hover)); cursor: pointer; }
.tg-send[disabled] { opacity: 0.45; cursor: not-allowed; }
.leaf-frame { border-radius: 0 1.5rem; }
@media (min-width: 640px) { .leaf-frame { border-radius: 0 2.25rem; } }
.icon-btn { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 9999px; color: #fff; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 150ms, transform 150ms; }
.icon-btn:hover { background: rgba(0, 0, 0, 0.62); }
@media (min-width: 640px) { .icon-btn { height: 2.75rem; width: 2.75rem; } }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.tracking-\[0\.08em\] { letter-spacing: 0.08em; }
.shadow-\[0_10px_36px_-10px\] { --tw-shadow: 0 10px 36px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-primary\/40 { --tw-shadow-color: color-mix(in oklab, var(--primary) 40%, transparent); }

/* ------------------------------------------------------------------ */
/* Arka plan: grid + fareyi takip eden isik                               */
/* ------------------------------------------------------------------ */
.hk-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%); mask-image: radial-gradient(circle at center, black 30%, transparent 80%); }
#hk-glow { position: absolute; width: 800px; height: 800px; background: radial-gradient(circle, color-mix(in oklab, var(--primary) 15%, transparent) 0%, transparent 60%); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s ease; }
#bg-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.hover\:bg-primary\/15:hover { background-color: color-mix(in oklab, var(--primary) 15%, transparent); }

/* ------------------------------------------------------------------ */
/* Rozet cam parlamasi (shine sweep)                                    */
/* ------------------------------------------------------------------ */
.pack-badge { overflow: hidden; }
.pack-badge::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(-120%); animation: badge-sheen 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes badge-sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(220%); } }

/* ------------------------------------------------------------------ */
/* Kucuk ekran inceltmeleri (420px alti)                                */
/* ------------------------------------------------------------------ */
@media (max-width: 420px) {
  .btn-primary, .btn-ghost { padding: 0 1rem; font-size: 0.8rem; }
  .ticket-face .font-display { font-size: 2.25rem; }
}