/* ============================================================
   GOPOS BASE — v2 Aydınlık & Canlı (adisyo/menülux tarzı)
   İllüstrasyon dolu, modern, teknoloji hissi
   ============================================================ */

:root {
  /* ── Canlı Marka Paleti ────────────────────────────────── */
  --gp-primary:      #FF5722;   /* enerjik turuncu */
  --gp-primary-dark: #E8430F;
  --gp-primary-soft: #FFE7DC;
  --gp-primary-tint: #FFF3EE;

  --gp-purple:  #7C3AED;  --gp-purple-soft:#EEEAFE;
  --gp-teal:    #00C896;  --gp-teal-soft:  #E1FAF2;
  --gp-blue:    #2D7FF9;  --gp-blue-soft:  #E6F0FF;
  --gp-yellow:  #FFB800;  --gp-yellow-soft:#FFF4D6;
  --gp-pink:    #FF4D8D;  --gp-pink-soft:  #FFE5EE;
  --gp-cyan:    #06B6D4;  --gp-cyan-soft:  #DEF7FB;
  --gp-indigo:  #5B5BF5;  --gp-indigo-soft:#E8E8FE;

  /* ── Nötr (sıcak gri) ─────────────────────────────────── */
  --gp-ink:     #1E2340;   /* başlık koyu lacivert */
  --gp-ink-2:   #3A3F66;
  --gp-text:    #4A5070;   /* gövde metni */
  --gp-mute:    #8A90B0;   /* soluk */
  --gp-faint:   #B4B9D4;
  --gp-line:    #ECEEF7;   /* ince çizgi */
  --gp-line-2:  #E0E3F0;

  --gp-white:   #FFFFFF;
  --gp-bg:      #FFFFFF;
  --gp-bg-soft: #F6F7FC;   /* açık bölüm zemini */
  --gp-bg-tint: #F0F2FB;

  /* ── Gradyanlar ───────────────────────────────────────── */
  --grad-primary: linear-gradient(135deg, #FF8A4C 0%, #FF5722 100%);
  --grad-purple:  linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
  --grad-teal:    linear-gradient(135deg, #34E0C0 0%, #00C896 100%);
  --grad-blue:    linear-gradient(135deg, #5BA3FF 0%, #2D7FF9 100%);
  --grad-sunset:  linear-gradient(120deg, #FF5722 0%, #FF4D8D 50%, #7C3AED 100%);
  --grad-hero:    linear-gradient(180deg, #FFFFFF 0%, #F6F7FC 100%);
  --grad-text:    linear-gradient(120deg, #FF5722 0%, #FF4D8D 100%);

  /* ── Tipografi ────────────────────────────────────────── */
  --font-primary:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-secondary: 'Inter', system-ui, sans-serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:3.75rem; --text-7xl:4.5rem;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* ── Radius (yumuşak, oynak) ──────────────────────────── */
  --radius-sm:.5rem; --radius:.875rem; --radius-md:1.125rem; --radius-lg:1.5rem;
  --radius-xl:2rem; --radius-2xl:2.5rem; --radius-full:9999px;

  /* ── Renkli yumuşak gölgeler ──────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(30,35,64,.06);
  --shadow:     0 8px 24px rgba(30,35,64,.08);
  --shadow-lg:  0 18px 50px rgba(30,35,64,.10);
  --shadow-xl:  0 30px 70px rgba(30,35,64,.14);
  --shadow-primary: 0 16px 40px -8px rgba(255,87,34,.45);
  --shadow-purple:  0 16px 40px -8px rgba(124,58,237,.40);
  --shadow-teal:    0 16px 40px -8px rgba(0,200,150,.40);

  /* ── Geçişler ─────────────────────────────────────────── */
  --transition-fast:140ms cubic-bezier(.4,0,.2,1);
  --transition:240ms cubic-bezier(.4,0,.2,1);
  --transition-slow:420ms cubic-bezier(.4,0,.2,1);
  --transition-bounce:420ms cubic-bezier(.34,1.56,.64,1);

  --z-dropdown:100; --z-sticky:200; --z-fixed:300; --z-modal:400; --z-toast:500;

  --container-max:1200px;
  --container-pad:clamp(1.25rem,5vw,2.5rem);
  --header-height:76px;
  --section-py:clamp(4.5rem,9vw,8rem);
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
body {
  font-family:var(--font-primary);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--gp-text);
  background:var(--gp-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input,select,textarea { font-family:inherit; max-width:100%; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-primary); font-weight:800; line-height:1.12; color:var(--gp-ink); letter-spacing:-.025em; overflow-wrap:break-word; word-break:break-word; }
p { line-height:1.7; overflow-wrap:break-word; }

/* Hiçbir öğe ekranı yatay taşırmasın */
table { max-width:100%; }
.gp-shop-main, .gp-blog-main, .exp-panel, .tab-panel__content { min-width:0; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.is-hidden { display:none !important; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--gp-bg-soft); }
::-webkit-scrollbar-thumb { background:var(--gp-line-2); border-radius:var(--radius-full); border:2px solid var(--gp-bg-soft); }
::-webkit-scrollbar-thumb:hover { background:var(--gp-primary); }
::selection { background:var(--gp-primary); color:#fff; }
:focus-visible { outline:3px solid var(--gp-primary-soft); outline-offset:2px; }

/* ── Gradyan metin ────────────────────────────────────────── */
.text-gradient { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.text-gradient-sunset { background:var(--grad-sunset); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── Duotone İkon Sistemi ─────────────────────────────────── */
.gp-ico { width:1.5rem; height:1.5rem; }
.gp-ico .duo-bg { fill:currentColor; opacity:.16; stroke:none; }
.gp-ico .duo-fg { stroke:currentColor; }

/* Marka renkli vurgu sarmalayıcıları */
.ico-orange{ color:var(--gp-primary); }
.ico-purple{ color:var(--gp-purple); }
.ico-teal  { color:var(--gp-teal); }
.ico-blue  { color:var(--gp-blue); }
.ico-yellow{ color:var(--gp-yellow); }
.ico-pink  { color:var(--gp-pink); }
.ico-cyan  { color:var(--gp-cyan); }
.ico-indigo{ color:var(--gp-indigo); }