/* ============================================================
   VVVV — Premium Aydınlık Tema (Light)
   Beyaz zemin · Mor→Pembe→Turkuaz vurgular · Yumuşak gölgeler
   ============================================================ */

:root {
  color-scheme: light only;
  --bg: #f5f6fb;
  --bg2: #ffffff;
  --card: rgba(255, 255, 255, .82);
  --card-solid: #ffffff;
  --line: #e7e9f2;
  --line-soft: rgba(124, 58, 237, .22);
  --txt: #191531;
  --txt-soft: #3b3763;
  --mut: #6f7392;
  --g1: #7c3aed;
  --g2: #ec4899;
  --g3: #22c1dd;
  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --grad: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  --grad2: linear-gradient(135deg, var(--g1), var(--g2));
  --radius: 20px;
  --shadow: 0 18px 50px rgba(80, 60, 160, .14);
  --shadow-sm: 0 6px 20px rgba(80, 60, 160, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Animasyonlu arka plan blob'ları (yumuşak, açık) ---------- */
.bg-blobs { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .38; animation: blobFloat 16s ease-in-out infinite alternate; }
.blob.b1 { width: 480px; height: 480px; background: rgba(124, 58, 237, .35); top: -160px; left: -120px; }
.blob.b2 { width: 420px; height: 420px; background: rgba(236, 72, 153, .28); top: 26%; right: -140px; animation-delay: -5s; animation-duration: 20s; }
.blob.b3 { width: 380px; height: 380px; background: rgba(34, 193, 221, .26); bottom: -120px; left: 28%; animation-delay: -10s; animation-duration: 24s; }
@keyframes blobFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.15); }
  100% { transform: translate(-40px, 50px) scale(.95); }
}
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}

/* ---------- Genel ---------- */
a { color: var(--g1); text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--mut); }
.center { text-align: center; }

::selection { background: rgba(236, 72, 153, .22); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eceef6; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--g1), var(--g2)); border-radius: 99px; border: 2px solid #eceef6; }

/* ---------- Üst menü ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--line);
}
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 26px; }
.logo { font-size: 26px; font-weight: 900; letter-spacing: 4px; background: var(--grad); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 6s ease infinite; display: inline-flex; align-items: center; gap: 10px; }
.logo img { height: 34px; width: auto; }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--txt-soft); padding: 8px 14px; border-radius: 99px; font-size: 14.5px; font-weight: 600; transition: .2s; }
.nav-links a:hover { background: rgba(124, 58, 237, .1); color: var(--g1); }
.nav-links a.active { background: rgba(124, 58, 237, .14); color: var(--g1); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--txt); font-size: 20px; border-radius: 10px; padding: 4px 12px; cursor: pointer; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 20px 20px; gap: 6px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; animation: fadeDown .25s ease; }
  .nav-links a { padding: 12px 16px; }
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; border-radius: 99px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; font-family: inherit; color: #fff;
  background: var(--grad2); background-size: 150% 150%;
  transition: transform .22s, box-shadow .22s, background-position .4s;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 22px rgba(236, 72, 153, .28);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(236, 72, 153, .38); background-position: 100% 50%; opacity: 1; }
.btn:active { transform: translateY(0); }
.btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: .5s; }
.btn:hover::after { left: 130%; }
/* Gradyan (non-ghost) butonlar her bağlamda beyaz yazı — nav/footer/sidebar anchor renk kurallarını ez */
a.btn:not(.ghost), .nav-links a.btn:not(.ghost), .footer-grid a.btn:not(.ghost), .nav a.btn:not(.ghost) { color: #fff; }
a.btn:not(.ghost):hover, .nav a.btn:not(.ghost):hover { color: #fff; }
.btn.ghost { background: #fff; border: 1.5px solid var(--line); color: var(--txt); box-shadow: var(--shadow-sm); }
a.btn.ghost, .nav-links a.btn.ghost { color: var(--txt); }
.btn.ghost:hover { border-color: var(--g1); color: var(--g1); box-shadow: 0 10px 26px rgba(124, 58, 237, .18); }
.btn.small { padding: 8px 18px; font-size: 13.5px; }
.btn.big { padding: 17px 44px; font-size: 17px; }
.btn.danger { background: linear-gradient(135deg, #dc2626, #f87171); box-shadow: 0 8px 22px rgba(239,68,68,.28); }
.btn.success { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 8px 22px rgba(16,185,129,.28); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Kartlar ---------- */
.card {
  background: var(--card);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.card.hoverable:hover { transform: translateY(-6px); border-color: var(--line-soft); box-shadow: 0 22px 50px rgba(124, 58, 237, .16); }
.card.glow { position: relative; }
.card.glow::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius); z-index: -1;
  background: var(--grad); opacity: 0; transition: opacity .3s;
}
.card.glow:hover::before { opacity: .5; }

/* ---------- Hero ---------- */
.hero { padding: 90px 0 70px; text-align: center; position: relative; }
.hero h1 { font-size: clamp(34px, 6vw, 62px); font-weight: 900; line-height: 1.12; letter-spacing: -1px; margin-bottom: 20px; }
.hero p.lead { font-size: clamp(16px, 2.2vw, 20px); color: var(--mut); max-width: 640px; margin: 0 auto 34px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 99px;
  border: 1px solid var(--line-soft); background: rgba(124, 58, 237, .08);
  font-size: 13.5px; margin-bottom: 24px; color: var(--g1); font-weight: 600; animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 rgba(124,58,237,.25); } 50% { box-shadow: 0 0 22px rgba(124,58,237,.28); } }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Hero demo kutusu */
.hero-demo { max-width: 620px; margin: 46px auto 0; padding: 10px; border-radius: 24px; background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(236,72,153,.32), rgba(34,193,221,.28)); animation: floatY 6s ease-in-out infinite; box-shadow: var(--shadow); }
.hero-demo-inner { background: #fff; border-radius: 18px; padding: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-demo-inner input { flex: 1; min-width: 220px; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Bölümler ---------- */
.section { padding: 80px 0; }
.section-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; text-align: center; margin-bottom: 14px; letter-spacing: -.5px; }
.section-sub { text-align: center; color: var(--mut); max-width: 560px; margin: 0 auto 50px; }

.grid { display: grid; gap: 22px; }
.grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid.cols3, .grid.cols4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.cols3, .grid.cols4, .grid.cols2 { grid-template-columns: 1fr; } }

.feature-icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  font-size: 24px; background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(236,72,153,.14));
  border: 1px solid var(--line-soft); margin-bottom: 16px;
}
.card h3 { font-size: 17.5px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--mut); }

/* Sayaçlar */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-big { font-size: clamp(28px, 4vw, 44px); font-weight: 900; }

/* ---------- Fiyat kartları ---------- */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card .badge-top {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad2); color: #fff; padding: 5px 18px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(236,72,153,.3);
}
.price-card.highlight { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: 0 18px 44px rgba(236, 72, 153, .18); }
.price { font-size: 40px; font-weight: 900; margin: 10px 0 2px; }
.price small { font-size: 14px; color: var(--mut); font-weight: 500; }
.price-monthly { font-size: 13px; color: var(--g1); font-weight: 700; margin-bottom: 4px; }
.price-feats { list-style: none; margin: 18px 0 24px; flex: 1; }
.price-feats li { padding: 7px 0; font-size: 14px; color: var(--txt-soft); border-bottom: 1px dashed var(--line); display: flex; gap: 10px; align-items: flex-start; }
.price-feats li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; background: var(--grad2); border-radius: 6px; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/13px no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/13px no-repeat; }

/* ---------- Rozetler ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.badge.ok { background: rgba(16, 185, 129, .12); color: #059669; border: 1px solid rgba(16, 185, 129, .28); }
.badge.warn { background: rgba(245, 158, 11, .12); color: #b45309; border: 1px solid rgba(245, 158, 11, .28); }
.badge.bad { background: rgba(239, 68, 68, .1); color: #dc2626; border: 1px solid rgba(239, 68, 68, .28); }
.badge.info { background: rgba(34, 193, 221, .12); color: #0e7490; border: 1px solid rgba(34, 193, 221, .28); }
.badge.grad { background: var(--grad2); color: #fff; }

/* ---------- Formlar ---------- */
label { display: block; font-size: 13.5px; color: var(--txt-soft); margin: 15px 0 6px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 12px 15px; border-radius: 13px; font-family: inherit;
  border: 1px solid var(--line); background: #fff; color: var(--txt);
  font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--g1); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
input::placeholder, textarea::placeholder { color: #a9adc5; }
textarea { min-height: 110px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--g1); }
.form-narrow { max-width: 440px; margin: 0 auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #d4d7e6; border-radius: 99px; transition: .25s; cursor: pointer; }
.switch .slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.switch input:checked + .slider { background: var(--grad2); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------- Uyarılar / flash ---------- */
.alert { padding: 13px 18px; border-radius: 14px; margin-bottom: 16px; font-size: 14.5px; animation: fadeDown .3s ease; }
.alert.ok { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); color: #047857; }
.alert.error { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); color: #b91c1c; }
.alert.warn { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); color: #92400e; }
.alert.info { background: rgba(34, 193, 221, .1); border: 1px solid rgba(34, 193, 221, .3); color: #0e7490; }

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
table.t { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; min-width: 640px; }
table.t th { text-align: left; padding: 13px 16px; color: var(--mut); font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--line); background: #fafbff; }
table.t td { padding: 13px 16px; border-bottom: 1px solid var(--line); }
table.t tr:last-child td { border-bottom: 0; }
table.t tr { transition: background .15s; }
table.t tbody tr:hover { background: rgba(124, 58, 237, .04); }

/* ---------- Panel düzeni ---------- */
.panel-wrap { display: flex; min-height: calc(100vh - 61px); position: relative; }
.sidebar {
  width: 256px; flex-shrink: 0; border-right: 1px solid var(--line);
  padding: 18px 14px 24px; background: linear-gradient(180deg, #ffffff, #fcfbff);
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 61px; align-self: flex-start; max-height: calc(100vh - 61px); overflow-y: auto;
}
.sidebar a { display: flex; align-items: center; gap: 12px; color: var(--txt-soft); padding: 10px 14px; border-radius: 13px; font-size: 14.5px; font-weight: 600; transition: .18s; position: relative; }
.sidebar a .ic { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; transition: transform .2s; }
.sidebar a:hover { background: rgba(124, 58, 237, .08); color: var(--g1); }
.sidebar a:hover .ic { transform: scale(1.15); }
.sidebar a.active { background: var(--grad2); color: #fff; box-shadow: 0 8px 20px rgba(124, 58, 237, .32); }
.sidebar a.active .ic { transform: scale(1.05); }
.sidebar a.admin-link { border: 1px dashed var(--line-soft); margin-top: 4px; color: var(--g1); }
.sidebar .sep { margin: 12px 8px 8px; border-top: 1px solid var(--line); }
.sidebar .sec-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--mut); padding: 14px 15px 4px; font-weight: 700; }
.sidebar .sec-label:first-child { padding-top: 4px; }
.panel-main { flex: 1; padding: 30px; min-width: 0; background: var(--bg); }
.panel-title { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }

/* Off-canvas çekmece (drawer) tetikleyicileri */
.drawer-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--txt); font-size: 19px; line-height: 1; border-radius: 11px; padding: 7px 12px; cursor: pointer; margin-right: 6px; }
.drawer-scrim { display: none; position: fixed; inset: 0; background: rgba(20, 16, 45, .42); backdrop-filter: blur(2px); z-index: 190; opacity: 0; transition: opacity .28s; }
.drawer-scrim.show { display: block; opacity: 1; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .drawer-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: 82%; max-width: 310px; max-height: none;
    transform: translateX(-104%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 60px rgba(60,40,120,.28); padding-top: 22px; border-right: 1px solid var(--line);
  }
  .sidebar.open { transform: translateX(0); }
  .panel-main { padding: 20px 16px calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Alt sekme çubuğu (mobil, uygulama tarzı) */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 26px rgba(80,60,160,.10);
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: 0; cursor: pointer; color: var(--mut); font-family: inherit;
    font-size: 10.5px; font-weight: 700; padding: 6px 2px; border-radius: 12px; transition: .18s;
  }
  .tabbar .ti { font-size: 20px; line-height: 1; transition: transform .2s; }
  .tabbar a.active { color: var(--g1); }
  .tabbar a.active .ti { transform: translateY(-2px) scale(1.12); }
  .tabbar a:active .ti, .tabbar button:active .ti { transform: scale(.9); }

  /* Mobil üst bar sadeleştirme */
  .nav .nav-inner { gap: 10px; padding: 10px 14px; }
  .nav .badge.grad, .nav .badge.info { display: none; }
  .nav .nowrap.small { display: none; }
  .nav-inner .flex { gap: 8px; }
}
@media (max-width: 460px) {
  .tabbar .tl { font-size: 9.5px; }
}

/* İstatistik mini kartları */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 980px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
.stat-card { padding: 20px; border-radius: 16px; }
.stat-card .v { font-size: 28px; font-weight: 900; }
.stat-card .l { font-size: 12.5px; color: var(--mut); margin-top: 2px; }

/* Grafik çubukları */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 10px 0; }
.bars .bar { flex: 1; background: var(--grad2); border-radius: 6px 6px 0 0; min-height: 3px; position: relative; opacity: .9; transition: .25s; animation: barGrow .8s ease backwards; }
.bars .bar:hover { opacity: 1; box-shadow: 0 0 14px rgba(236, 72, 153, .4); }
.bars .bar .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #191531; color: #fff; padding: 3px 9px; border-radius: 8px; font-size: 11.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s; }
.bars .bar:hover .tip { opacity: 1; }
@keyframes barGrow { from { transform: scaleY(0); transform-origin: bottom; } }
.hbar-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; font-size: 13.5px; }
.hbar-row .lbl { width: 120px; flex-shrink: 0; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-row .track { flex: 1; height: 10px; background: #eceef6; border-radius: 99px; overflow: hidden; }
.hbar-row .fill { height: 100%; background: var(--grad); border-radius: 99px; animation: fillGrow 1s ease backwards; }
@keyframes fillGrow { from { width: 0 !important; } }
.hbar-row .val { width: 56px; text-align: right; font-weight: 700; font-size: 13px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ---------- SSS akordiyon ---------- */
details.faq { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: #fff; overflow: hidden; transition: border-color .25s, box-shadow .25s; box-shadow: var(--shadow-sm); }
details.faq[open] { border-color: var(--line-soft); }
details.faq summary { padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-size: 22px; color: var(--g2); transition: transform .25s; flex-shrink: 0; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { padding: 0 22px 18px; color: var(--mut); font-size: 14.5px; }

/* ---------- Kopyalama / kod ---------- */
code, .code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; background: #f1f2f9; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; color: #0e7490; }
pre.code { padding: 18px; overflow-x: auto; line-height: 1.7; border-radius: 14px; background: #0f1226; color: #a5f3fc; border-color: #232645; }
.copy-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 8px 8px 18px; font-family: ui-monospace, monospace; font-size: 14px; box-shadow: var(--shadow-sm); }
.copy-chip button { border: 0; background: var(--grad2); color: #fff; border-radius: 99px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ---------- Toast ---------- */
#toast-box { position: fixed; bottom: 22px; right: 22px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 13px 20px; font-size: 14px; box-shadow: var(--shadow); animation: toastIn .3s ease; color: var(--txt); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }

/* ---------- Altbilgi ---------- */
footer.site-footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 46px 0 30px; background: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 14px; margin-bottom: 12px; }
.footer-grid a { display: block; color: var(--mut); font-size: 13.5px; padding: 4px 0; }
.footer-grid a:hover { color: var(--g1); }
.footer-bottom { text-align: center; color: var(--mut); font-size: 13px; border-top: 1px solid var(--line); padding-top: 22px; }

/* ---------- Sayfalama ---------- */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span { padding: 8px 15px; border-radius: 11px; border: 1px solid var(--line); color: var(--txt); font-size: 14px; background: #fff; }
.pager .cur { background: var(--grad2); border-color: transparent; color: #fff; font-weight: 700; }

/* ---------- Bio tema önizleme kartları ---------- */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.theme-pick label { margin: 0; cursor: pointer; }
.theme-pick input { display: none; }
.theme-thumb { height: 130px; border-radius: 14px; border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 700; transition: .2s; position: relative; overflow: hidden; }
.theme-pick input:checked + .theme-thumb { border-color: var(--g2); box-shadow: 0 0 22px rgba(236, 72, 153, .35); transform: scale(1.04); }
.theme-thumb .dot { width: 34px; height: 34px; border-radius: 50%; }
.theme-thumb .bar-demo { width: 70%; height: 9px; border-radius: 99px; }
.theme-thumb.locked { opacity: .5; }
.theme-thumb .lock { position: absolute; top: 7px; right: 9px; }

/* ---------- Yükleme animasyonu ---------- */
.spinner { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Marquee (kayan şerit) ---------- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 13px 0; background: rgba(124, 58, 237, .04); }
.marquee-inner { display: inline-block; animation: marq 26s linear infinite; }
.marquee-inner span { margin: 0 26px; color: var(--mut); font-size: 14px; }
.marquee-inner span b { color: var(--txt); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Adım kartları ---------- */
.steps { counter-reset: st; }
.step-card { position: relative; padding-top: 34px; }
.step-card::before { counter-increment: st; content: counter(st); position: absolute; top: -20px; left: 24px; width: 42px; height: 42px; border-radius: 50%; background: var(--grad2); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 17px; box-shadow: 0 6px 18px rgba(236, 72, 153, .35); }

/* ---------- Ufak yardımcılar ---------- */
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt1 { margin-top: 10px; } .mt2 { margin-top: 20px; } .mt3 { margin-top: 30px; } .mt4 { margin-top: 44px; }
.mb1 { margin-bottom: 10px; } .mb2 { margin-bottom: 20px; } .mb3 { margin-bottom: 30px; }
.w100 { width: 100%; }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   v2 bileşenleri (aydınlık uyarlama)
   ============================================================ */
.captcha-box { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(34,193,221,.07); border: 1px solid rgba(34,193,221,.28); }
.captcha-box label { margin: 0 0 8px; color: var(--txt); font-size: 14px; }
.captcha-box b { color: #0e7490; font-size: 17px; letter-spacing: 2px; }

.pw-meter { height: 6px; border-radius: 99px; background: #e7e9f2; overflow: hidden; margin-top: 8px; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .3s, background .3s; }
.pw-meter.w1 span { width: 25%; background: #ef4444; }
.pw-meter.w2 span { width: 50%; background: #f59e0b; }
.pw-meter.w3 span { width: 75%; background: #10b981; }
.pw-meter.w4 span { width: 100%; background: linear-gradient(90deg,#10b981,#22c1dd); }

.tfa-shield { width: 96px; height: 96px; margin: 0 auto 8px; position: relative; }
.tfa-shield .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.tfa-shield .ring.r1 { border-top-color: var(--g1); border-right-color: var(--g2); animation: tfaSpin 2.4s linear infinite; }
.tfa-shield .ring.r2 { inset: 10px; border-bottom-color: var(--g3); border-left-color: var(--g2); animation: tfaSpin 3s linear infinite reverse; }
.tfa-shield .core { position: absolute; inset: 22px; border-radius: 50%; background: linear-gradient(135deg,var(--g1),var(--g2)); display: grid; place-items: center; font-size: 30px; box-shadow: 0 0 30px rgba(236,72,153,.4); animation: tfaPulse 2s ease-in-out infinite; }
@keyframes tfaSpin { to { transform: rotate(360deg); } }
@keyframes tfaPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 26px rgba(236,72,153,.35); } 50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(236,72,153,.55); } }

.otp-inputs { display: flex; gap: 10px; justify-content: center; margin: 18px 0; }
.otp-inputs input { width: 48px; height: 58px; text-align: center; font-size: 26px; font-weight: 800; padding: 0; border-radius: 14px; caret-color: var(--g2); }
.otp-inputs input:focus { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(124,58,237,.28); }
.otp-inputs input.filled { border-color: var(--g2); background: rgba(236,72,153,.06); }

.notif-wrap { position: relative; }
.notif-bell { position: relative; background: #fff; border: 1px solid var(--line); color: var(--txt); border-radius: 12px; padding: 7px 12px; cursor: pointer; font-size: 17px; transition: .2s; box-shadow: var(--shadow-sm); }
.notif-bell:hover { border-color: var(--line-soft); }
.notif-badge { position: absolute; top: -6px; right: -6px; background: linear-gradient(135deg,#ec4899,#f43f5e); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; padding: 0 4px; animation: notifPop .3s ease; }
@keyframes notifPop { from { transform: scale(0); } }
.notif-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; max-width: 90vw; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); z-index: 200; overflow: hidden; display: none; animation: fadeDown .22s ease; }
.notif-panel.open { display: block; }
.notif-panel .nh { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.notif-panel .ni { padding: 12px 16px; border-bottom: 1px solid var(--line); display: block; color: var(--txt); transition: .15s; }
.notif-panel .ni:hover { background: rgba(124,58,237,.05); }
.notif-panel .ni.unread { background: rgba(124,58,237,.05); }
.notif-panel .ni .nt { font-size: 13.5px; font-weight: 600; }
.notif-panel .ni .nb { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.notif-panel .ni .nd { font-size: 11px; color: var(--mut); margin-top: 4px; }
.notif-empty { padding: 40px 20px; text-align: center; color: var(--mut); font-size: 14px; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge-card { padding: 16px; border-radius: 16px; border: 1px solid var(--line); text-align: center; transition: .25s; background: #fff; }
.badge-card.earned { border-color: var(--line-soft); box-shadow: 0 8px 24px rgba(124,58,237,.14); }
.badge-card.earned .bi { animation: badgeFloat 3s ease-in-out infinite; }
.badge-card.locked { opacity: .6; }
.badge-card.locked .bi { background: #eceef6; color: var(--mut); box-shadow: none; }
.badge-card .bi { width: 60px; height: 60px; display: inline-grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; color: #fff; background: var(--grad2); box-shadow: 0 10px 24px rgba(124,58,237,.28); }
.badge-card .bi .vic { width: 30px; height: 30px; }
/* Dashboard mini rozet madalyonu */
.mini-badge { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 14px; color: #fff; background: var(--grad2); box-shadow: 0 8px 18px rgba(124,58,237,.28); }
.mini-badge .vic { width: 22px; height: 22px; }
.badge-card .bn { font-size: 13.5px; font-weight: 700; }
.badge-card .bd { font-size: 11.5px; color: var(--mut); margin-top: 2px; }
@keyframes badgeFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(4deg); } }

.drag-handle { cursor: grab; color: var(--mut); padding: 0 6px; user-select: none; }
.drag-handle:active { cursor: grabbing; }
.block-row { transition: box-shadow .2s, transform .1s; background: #fff; }
.block-row.dragging { opacity: .5; box-shadow: var(--shadow); }
.block-row.drag-over { border-top: 2px solid var(--g2) !important; }

.phone-frame { width: 320px; max-width: 100%; margin: 0 auto; border: 10px solid #191531; border-radius: 36px; overflow: hidden; box-shadow: var(--shadow); background: #000; position: relative; }
.phone-frame::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 18px; background: #191531; border-radius: 0 0 14px 14px; z-index: 2; }
.phone-frame iframe { width: 100%; height: 560px; border: 0; display: block; background: #fff; }
.preview-sticky { position: sticky; top: 80px; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: 12.5px; background: rgba(124,58,237,.08); border: 1px solid var(--line-soft); color: var(--g1); }
.folder-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--txt); font-size: 13.5px; transition: .18s; background: #fff; }
.folder-pill:hover, .folder-pill.active { background: rgba(124,58,237,.1); border-color: var(--line-soft); color: var(--g1); }

.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.swatch { width: 34px; height: 34px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: .15s; box-shadow: var(--shadow-sm); }
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--g2); }

.session-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; margin-top: 10px; background: #fff; }
.session-card .sic { font-size: 26px; }
.session-card.current { border-color: var(--ok); }

.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; box-shadow: var(--shadow-sm); }
.seg a, .seg button { padding: 7px 16px; border-radius: 9px; font-size: 13.5px; border: 0; background: none; color: var(--mut); cursor: pointer; transition: .18s; }
.seg a.active, .seg button.active { background: var(--grad2); color: #fff; }

.confetti { position: fixed; top: -10px; width: 9px; height: 14px; z-index: 9999; pointer-events: none; animation: confFall linear forwards; }
@keyframes confFall { to { transform: translateY(105vh) rotate(720deg); opacity: .4; } }

/* ---------- Sosyal marka ikonları ---------- */
.brand-ico { display: inline-flex; align-items: center; justify-content: center; }
.brand-ico svg { width: 1em; height: 1em; display: block; }

/* ============================================================
   v4 — Zenginleştirilmiş animasyonlar & mikro etkileşimler
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Reveal varyantları */
  .reveal.rl { transform: translateX(-30px); }
  .reveal.rr { transform: translateX(30px); }
  .reveal.rz { transform: scale(.9); }
  .reveal.visible.rl, .reveal.visible.rr, .reveal.visible.rz { transform: none; }

  /* Butonlarda dalga (ripple) — JS ile tetiklenir */
  .btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.5); animation: rippleAnim .6s ease-out; pointer-events: none; }
  @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

  /* Kartlarda parlayan gradyan kenar (hover) */
  .card.shine { position: relative; overflow: hidden; }
  .card.shine::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(100deg, transparent, rgba(124,58,237,.12), transparent); transform: skewX(-20deg); transition: left .6s; }
  .card.shine:hover::after { left: 130%; }

  /* İkon zıplama (hover) */
  .feature-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .card.hoverable:hover .feature-icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

  /* Logo hafif nabız */
  .logo:hover { animation-duration: 2s; }

  /* Sidebar link kayma vurgusu */
  .sidebar a { position: relative; }
  .sidebar a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; border-radius: 99px; background: var(--grad2); transition: transform .2s; }
  .sidebar a:hover::before, .sidebar a.active::before { transform: translateY(-50%) scaleY(1); }

  /* Fiyat kartı vurgulanan üst kenar akışı */
  .price-card.highlight { position: relative; }
  .price-card.highlight::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 2px; background: linear-gradient(120deg,var(--g1),var(--g2),var(--g3),var(--g1)); background-size: 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderFlow 4s linear infinite; pointer-events: none; }
  @keyframes borderFlow { to { background-position: 300% 0; } }

  /* Rozet parıltısı */
  .stat-big, .stat-card .v { background-size: 200% auto; }

  /* Sayfa geçiş yumuşatma */
  .panel-main > .panel-head { animation: fadeDown .4s ease; }
  .stat-card { animation: cardUp .5s ease backwards; }
  .stat-card:nth-child(2){animation-delay:.06s}.stat-card:nth-child(3){animation-delay:.12s}.stat-card:nth-child(4){animation-delay:.18s}
  @keyframes cardUp { from { opacity: 0; transform: translateY(16px); } }

  /* Tablo satır girişi */
  table.t tbody tr { animation: rowIn .4s ease backwards; }

  /* Hover'da hafif yükselme — genel */
  .folder-pill, .badge-card, .session-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
  .folder-pill:hover { transform: translateY(-2px); }

  /* Toggle geçiş yumuşatma zaten var; ekstra parlama */
  .switch input:checked + .slider { box-shadow: 0 0 12px rgba(236,72,153,.4); }

  /* Yükleme skeleton parıltısı */
  .skeleton { background: linear-gradient(90deg,#eef0f7 25%,#f6f7fb 50%,#eef0f7 75%); background-size: 200% 100%; animation: skel 1.4s infinite; border-radius: 10px; }
  @keyframes skel { to { background-position: -200% 0; } }
}
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } }

/* QR stüdyo */
.qr-preview { display: grid; place-items: center; padding: 20px; background: #fff; border-radius: 18px; border: 1px solid var(--line); }
.qr-preview img { border-radius: 12px; max-width: 260px; width: 100%; }

/* WOW: lead/anket blokları (editör içi önizleme) */
.wow-hint { font-size: 12px; color: var(--g1); background: rgba(124,58,237,.07); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }

/* ============================================================
   v4 Tema Cilası — erişilebilirlik + premium dokunuşlar
   ============================================================ */

/* Klavye ile gezinenler için net, markalı odak halkası */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Fare tıklamasında istenmeyen odak halkasını gösterme */
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* İçeriğe atla bağlantısı (erişilebilirlik) */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 9999; background: var(--g1); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0; font-weight: 700; }
.skip-link:focus { left: 0; }

/* Sayfa üstü kaydırma ilerleme çubuğu */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9998; background: linear-gradient(90deg,var(--g1),var(--g2),var(--g3)); box-shadow: 0 0 10px rgba(124,58,237,.4); transition: width .1s linear; }

/* Seçim rengi markaya uygun */
::selection { background: rgba(124,58,237,.22); color: inherit; }

/* İnce, premium kart derinliği (hover) */
@media (prefers-reduced-motion: no-preference) {
  .card.hoverable { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
  .card.hoverable:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(124,58,237,.28); }

  /* Kopyalandı geri bildirimi (data-copy sonrası JS ekler) */
  .copied-pop { animation: copiedPop .9s ease; }
  @keyframes copiedPop { 0% { transform: scale(.9); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
}

/* Modern, ince kaydırma çubuğu (light theme) */
* { scrollbar-width: thin; scrollbar-color: #c9cbe0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#cdd0e6,#b9bcd8); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,var(--g1),var(--g2)); background-clip: content-box; }

/* ============================================================
   v5 — Destek sohbet baloncukları + Hızlı Yardım + rozet/onay
   ============================================================ */
.chat-thread { display: flex; flex-direction: column; gap: 12px; }
.chat-msg { display: flex; }
.chat-msg.from-me { justify-content: flex-end; }
.chat-msg.from-admin { justify-content: flex-start; }
.chat-bubble { max-width: 78%; padding: 12px 16px; border-radius: 18px; box-shadow: var(--shadow-sm); animation: bubbleIn .3s ease backwards; }
.chat-msg.from-me .chat-bubble { background: var(--grad2); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg.from-admin .chat-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.chat-who { font-size: 11.5px; font-weight: 700; opacity: .9; margin-bottom: 3px; }
.chat-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; }
.chat-msg.from-me .chat-text { color: #fff; }
.chat-time { font-size: 10.5px; opacity: .7; margin-top: 5px; text-align: right; }
.chat-reply textarea { min-height: 90px; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.help-panel { background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(34,193,221,.05)); }
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-item { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .2s; }
.help-item[open] { border-color: var(--line-soft); }
.help-item summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after { content: '＋'; color: var(--g1); font-weight: 700; transition: transform .25s; }
.help-item[open] summary::after { transform: rotate(45deg); }
.help-a { padding: 0 16px 14px; font-size: 13.5px; color: var(--txt-soft); line-height: 1.65; }

/* Doğrulama talep kartları (admin) */
.verify-card .vr-msg { background: #f6f6fc; border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-size: 13.5px; }
.vr-list { display: flex; flex-direction: column; gap: 14px; }
.vr-card { display: flex; flex-direction: column; gap: 14px; }
.vr-main { display: flex; gap: 16px; align-items: flex-start; }
.vr-badge { flex-shrink: 0; }
.vr-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vr-slug { font-weight: 700; }
.vr-msg { background: #f6f6fc; border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
.vr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px dashed var(--line); padding-top: 12px; }
.vr-actions select, .vr-actions input { width: auto; flex: 1; min-width: 130px; }
.badge-assign { display: flex; gap: 6px; align-items: center; }
.badge-cur { width: 24px; display: inline-flex; justify-content: center; }
.verify-card { border: 1px solid var(--line-soft); }

/* Fiyat kartı: tasarruf rozeti + hover derinlik */
.price-card { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px -20px rgba(124,58,237,.30); border-color: var(--line-soft); }
.price-save { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ok); background: rgba(16,185,129,.12); padding: 2px 9px; border-radius: 99px; }

@media (max-width: 560px) {
  .chat-bubble { max-width: 88%; }
  .vr-actions select, .vr-actions input, .vr-actions .btn { width: 100%; flex: none; }
}

/* Anasayfa "Yeni" tanıtım bandı */
.new-banner { text-align: center; }
.new-banner .pill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--grad2); padding: 5px 16px; border-radius: 99px; box-shadow: 0 6px 18px rgba(236,72,153,.32); animation: pulseGlow 3s ease-in-out infinite; }

/* Admin — kullanıcı sayfası rozet verme */
.badge-grant-list { display: flex; flex-direction: column; gap: 10px; }
.badge-grant-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.badge-grant-row .bg-cur { width: 26px; display: inline-flex; justify-content: center; }
.badge-grant-row .bg-slug { font-weight: 700; }
.badge-grant-row select { width: auto; flex: 1; min-width: 140px; }
@media (max-width: 560px) { .badge-grant-row select, .badge-grant-row .btn { width: 100%; flex: none; } }

/* ============================================================
   Tema Ayarları sayfası — hazır tema kartları + canlı önizleme
   ============================================================ */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.preset-item button { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: center; transition: .2s; font-family: inherit; }
.preset-item button:hover { border-color: var(--line-soft); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.preset-swatch { width: 100%; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.preset-name { font-size: 12px; font-weight: 700; color: var(--txt-soft); }

.tp-box { --tg1: var(--g1); --tg2: var(--g2); --tg3: var(--g3); --tang: 135deg; --trad: 20px; --tbr: 99px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.tp-hero { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-radius: var(--trad); background: linear-gradient(var(--tang), var(--tg1), var(--tg2), var(--tg3)); }
.tp-logo { font-weight: 900; letter-spacing: 3px; color: #fff; font-size: 22px; }
.tp-badge { background: rgba(255,255,255,.25); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 99px; }
.tp-title { font-size: 24px; font-weight: 800; margin: 18px 0 6px; }
.tp-grad { background: linear-gradient(var(--tang), var(--tg1), var(--tg2), var(--tg3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tp-muted { color: var(--mut); font-size: 14px; }
.tp-btns { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.tp-btn { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: #fff; padding: 11px 22px; border-radius: var(--tbr); background: linear-gradient(var(--tang), var(--tg1), var(--tg2)); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.tp-btn.ghost { background: #fff; color: var(--tg1); border: 1.5px solid var(--tg1); }
.tp-card { border: 1px solid var(--line); border-radius: var(--trad); padding: 16px; }
.tp-chip { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; padding: 3px 12px; border-radius: 99px; background: linear-gradient(var(--tang), var(--tg1), var(--tg2)); }
.tp-bar { height: 10px; border-radius: 99px; background: #eef0f7; margin-top: 12px; overflow: hidden; }
.tp-bar span { display: block; height: 100%; width: 68%; border-radius: 99px; background: linear-gradient(var(--tang), var(--tg1), var(--tg2), var(--tg3)); }

/* ============================================================
   v7 — Public/Auth modernizasyon: neon dokunuşlar + gradyan derinlik
   ============================================================ */
/* Kimlik doğrulama kartları — gradyan kenar + neon emblem */
.auth-wrap { position: relative; }
.auth-card { position: relative; overflow: visible; border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(124,58,237,.4); }
.auth-card::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: calc(var(--radius) + 2px); z-index: -1;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); background-size: 200% 200%;
  opacity: .5; filter: blur(1px); animation: gradShift 7s ease infinite;
}
.auth-emblem {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  font-size: 30px; margin: -50px auto 14px; background: var(--grad2); color: #fff;
  box-shadow: 0 14px 34px rgba(124,58,237,.45); animation: floatY 5s ease-in-out infinite;
}
.auth-card input { transition: border-color .2s, box-shadow .2s; }
.auth-card input:focus { box-shadow: 0 0 0 4px rgba(124,58,237,.12); }

/* Hero — neon gradyan hale (arka planda yumuşak ışıma) */
.hero::before {
  content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: min(760px, 92%); height: 340px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(124,58,237,.20), rgba(236,72,153,.12) 45%, transparent 70%);
  filter: blur(20px);
}
.hero h1 { text-shadow: 0 2px 40px rgba(124,58,237,.14); }

/* Bölüm başlıklarında yumuşak gradyan alt-çizgi */
.section-title { position: relative; }

/* Özellik ikonları — gradyan çip zemini */
.feature-icon {
  display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; font-size: 28px;
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.10));
  border: 1px solid var(--line-soft); margin-bottom: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .card.hoverable.glow:hover .feature-icon { animation: floatY 2.2s ease-in-out infinite; }
}

/* Butonlarda daha yumuşak neon parıltı */
.btn { box-shadow: 0 8px 22px rgba(124,58,237,.24), 0 2px 8px rgba(236,72,153,.18); }
.hero-demo { box-shadow: 0 30px 80px -30px rgba(124,58,237,.45); }

/* ============================================================
   Premium SVG ikon sistemi (.vic) — emoji yerine tutarlı ikonlar
   ============================================================ */
.vic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.sidebar a .vic { width: 19px; height: 19px; }
.tabbar .ti .vic { width: 21px; height: 21px; }
.btn .vic { width: 17px; height: 17px; vertical-align: -0.2em; }
.btn.small .vic { width: 15px; height: 15px; }
.panel-title .vic, h1 .vic, h2 .vic, h3 .vic { vertical-align: -0.14em; }
.feature-icon .vic { width: 28px; height: 28px; }
.ic-grad { color: var(--g1); }

/* Adım numaraları + CTA kartı (anasayfa) */
.step-card { position: relative; }
.step-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: var(--grad2); box-shadow: 0 8px 20px rgba(124,58,237,.3); margin-bottom: 14px; }
.cta-card { background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(236,72,153,.12), rgba(34,193,221,.1)); border: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.cta-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 20%, rgba(124,58,237,.14), transparent 45%), radial-gradient(circle at 80% 80%, rgba(236,72,153,.12), transparent 45%); }

/* ============================================================
   Cross-platform tema sağlamlığı — her cihazda tutarlı açık tema
   ============================================================ */
input, select, textarea, button { color-scheme: light; }
/* Tarayıcı otomatik-doldurma (autofill) koyu zeminini engelle */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--txt);
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  caret-color: var(--txt);
}
/* Tarih/saat seçici ikonlarını görünür tut */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
/* Görüntü alanı taşmasını her platformda engelle */
html, body { max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
/* iOS güvenli alan boşlukları */
@supports (padding: max(0px)) {
  .tabbar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}

/* API anahtar yönetimi */
.apikey-list { display: flex; flex-direction: column; gap: 10px; }
.apikey-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.apikey-row code { font-size: 12px; }

/* ============================================================
   v11 — Zeka paneli, istatistik, risk çubuğu
   ============================================================ */
.stat-num { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; }
.card.center .stat-num { margin-bottom: 2px; }
.risk-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.risk-bar > div { height: 100%; transition: width .6s cubic-bezier(.16,1,.3,1); border-radius: 99px; }

/* ============================================================
   v11 — Panel efekt düzeyi (full | subtle | off) + zengin mikro animasyonlar
   ============================================================ */
@keyframes vvRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vvPop  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.fx-full .panel-main > .card,
.fx-full .panel-main > .grid > .card,
.fx-full .panel-main > .panel-head { animation: vvRise .5s cubic-bezier(.16,1,.3,1) both; }
.fx-full .panel-main > .grid > .card:nth-child(2) { animation-delay: .05s; }
.fx-full .panel-main > .grid > .card:nth-child(3) { animation-delay: .1s; }
.fx-full .panel-main > .grid > .card:nth-child(4) { animation-delay: .15s; }
.fx-full .card { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.fx-full .card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fx-full .btn { transition: transform .18s ease, box-shadow .2s ease, opacity .2s ease; }
.fx-full .btn:not(.ghost):hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,58,237,.28); }
.fx-full .btn:active { transform: translateY(0) scale(.98); }
.fx-full .badge { transition: transform .18s ease; }
.fx-full .sidebar a { transition: background .2s ease, color .2s ease, padding-left .2s ease; }
.fx-full .sidebar a:hover { padding-left: 18px; }
.fx-subtle .panel-main > .card { animation: vvPop .35s ease both; }
.fx-off * { animation: none !important; }
/* Gradyan vurgulu kart başlığı (zengin görünüm) */
.panel-title { background: var(--grad); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 8s ease infinite; display: inline-block; }
.fx-off .panel-title { animation: none; }

/* ============================================================
   v11 — Bio sayfası giriş animasyonları (ziyaretçi açılışı)
   ============================================================ */
@keyframes vvFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes vvSlideUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes vvZoom    { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes vvBlur    { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes vvFlip    { from { opacity: 0; transform: perspective(800px) rotateX(-22deg); } to { opacity: 1; transform: none; } }
.vventer-fade    .wrap { animation: vvFade .8s ease both; }
.vventer-slideup .wrap { animation: vvSlideUp .7s cubic-bezier(.16,1,.3,1) both; }
.vventer-zoom    .wrap { animation: vvZoom .6s cubic-bezier(.16,1,.3,1) both; }
.vventer-blur    .wrap { animation: vvBlur .8s ease both; }
.vventer-flip    .wrap { animation: vvFlip .7s cubic-bezier(.16,1,.3,1) both; transform-origin: top center; }
/* Cascade: bloklar tek tek akar (render.php zaten animation-delay veriyor) */
.vventer-cascade .wrap > * { animation: vvSlideUp .6s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  [class*="vventer-"] .wrap, [class*="vventer-"] .wrap > * { animation: none !important; }
}

/* ============================================================
   v11 — Link yönlendirme (interstitial) temaları
   ============================================================ */
.itl { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.itl .itl-card { max-width: 560px; width: 100%; border-radius: 22px; padding: 44px 34px; text-align: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(30,20,70,.28); animation: vvZoom .5s cubic-bezier(.16,1,.3,1) both; }
.itl .itl-card h1 { font-size: 21px; margin: 8px 0 6px; }
.itl-dest { word-break: break-all; font-weight: 600; }
.itl-clean  { background: var(--bg); }
.itl-aurora { background: linear-gradient(135deg, #7c3aed, #ec4899 55%, #22c1dd); background-size: 220% 220%; animation: gradShift 12s ease infinite; }
.itl-sunset { background: linear-gradient(135deg, #ff6a88, #ff99ac 45%, #ffb199); background-size: 220% 220%; animation: gradShift 12s ease infinite; }
.itl-ocean  { background: linear-gradient(135deg, #2193b0, #6dd5ed); background-size: 220% 220%; animation: gradShift 14s ease infinite; }
.itl-galaxy { background: linear-gradient(135deg, #1f1c4d, #4b2e83 50%, #7c3aed); background-size: 220% 220%; animation: gradShift 14s ease infinite; }
.itl-forest { background: linear-gradient(135deg, #0f9b6c, #3ec6a0 55%, #a8e6cf); background-size: 220% 220%; animation: gradShift 14s ease infinite; }
.itl-mono   { background: #101018; }
.itl-galaxy .itl-card, .itl-mono .itl-card { background: rgba(20,18,40,.72); color: #f4f4fb; }
.itl-galaxy .itl-card .muted, .itl-mono .itl-card .muted { color: #b9b8d6; }
@media (prefers-reduced-motion: reduce) { .itl-card, [class*="itl-"] { animation: none !important; } }

/* ============================================================
   v12 — Premium cila: butonlar, hero, giriş/kayıt deneyimi
   (mevcut sınıfları güçlendirir; açık tema, emoji yok)
   ============================================================ */

/* --- Premium butonlar: canlı gradyan + odak halkası + CTA nabzı --- */
.btn:not(.ghost) { background-size: 220% 220%; animation: btnGrad 9s ease infinite; }
@keyframes btnGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.btn:focus-visible { outline: 3px solid rgba(124,58,237,.45); outline-offset: 2px; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.big { letter-spacing: .2px; }
.hero-cta .btn.big:not(.ghost), .cta-card .btn.big:not(.ghost) { animation: btnGrad 9s ease infinite, ctaPulse 3.4s ease-in-out infinite; }
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 12px 30px rgba(124,58,237,.30), 0 0 0 0 rgba(124,58,237,.30); }
  50%     { box-shadow: 0 16px 42px rgba(236,72,153,.40), 0 0 0 12px rgba(124,58,237,0); }
}
.hero-cta .btn.big.ghost:hover { transform: translateY(-2px); }

/* --- Hero premium: canlı başlık gradyanı, yumuşak giriş, rozet parıltısı --- */
.hero h1 .grad-text { background-size: 220% 220%; animation: gradShift 7s ease infinite; }
.hero h1 { animation: heroIn 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero-badge { position: relative; overflow: hidden; }
.hero-badge::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: badgeShine 5s ease-in-out infinite; }
@keyframes badgeShine { 0%,55% { left: -60%; } 78%,100% { left: 150%; } }
.hero-demo-inner input { transition: box-shadow .25s, border-color .25s; }

/* --- Scroll reveal: daha premium easing + hafif ölçek --- */
.reveal { transform: translateY(30px) scale(.985); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { transform: none; }

/* --- Giriş / Kayıt premium deneyim --- */
.auth-card { animation: authIn .75s cubic-bezier(.16,1,.3,1) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.auth-emblem { font-size: 0; }
.auth-emblem .vic { width: 30px; height: 30px; }
.auth-card label { font-weight: 600; font-size: 13.5px; }
.auth-card input:not([type=checkbox]):not([type=radio]) { border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.auth-card input:focus { border-color: var(--g1); box-shadow: 0 0 0 4px rgba(124,58,237,.14), 0 8px 22px -10px rgba(124,58,237,.5); }
.auth-trust { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); font-weight: 500; }
.auth-trust .vic { width: 15px; height: 15px; color: var(--g1); }
.auth-orb { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(70px); opacity: .35; z-index: -1; pointer-events: none; }
.auth-orb.o1 { background: rgba(124,58,237,.5); top: -80px; left: -90px; animation: floatY 9s ease-in-out infinite; }
.auth-orb.o2 { background: rgba(34,193,221,.42); bottom: -90px; right: -80px; animation: floatY 11s ease-in-out infinite reverse; }
.auth-card .btn.w100 { font-size: 16px; padding: 15px; }

@media (prefers-reduced-motion: reduce) {
  .btn:not(.ghost), .hero h1, .hero h1 .grad-text, .hero-badge::after, .hero-cta .btn.big:not(.ghost),
  .cta-card .btn.big:not(.ghost), .auth-card, .auth-orb { animation: none !important; }
}

/* ============================================================
   v13 — Premium karşılama / durum ekranları (.scr)
   ============================================================ */
.scr { position: relative; overflow-x: hidden; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(64px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.scr-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scr-orbs i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: blobFloat 18s ease-in-out infinite alternate; }
.scr-orbs i:nth-child(1) { width: 380px; height: 380px; background: rgba(124,58,237,.30); top: -120px; left: -100px; }
.scr-orbs i:nth-child(2) { width: 340px; height: 340px; background: rgba(236,72,153,.24); bottom: -120px; right: -80px; animation-delay: -6s; }
.scr-orbs i:nth-child(3) { width: 260px; height: 260px; background: rgba(34,193,221,.22); top: 40%; left: 55%; animation-delay: -11s; }
.scr .itl-card { position: relative; z-index: 1; max-width: 520px; padding: 40px 30px 32px; border: 1px solid rgba(255,255,255,.7); }
.scr-badge { position: relative; width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: var(--grad2); box-shadow: 0 14px 34px rgba(124,58,237,.32); animation: scrPop .6s cubic-bezier(.34,1.56,.64,1) both .08s; }
.scr-ring { position: absolute; inset: -7px; border-radius: 27px; border: 2px solid rgba(124,58,237,.22); animation: scrPulse 2.6s ease-out infinite; }
.scr-t-ok .scr-badge { background: linear-gradient(135deg, #10b981, #22c1dd); box-shadow: 0 14px 34px rgba(16,185,129,.3); }
.scr-t-ok .scr-ring { border-color: rgba(16,185,129,.25); }
.scr-t-warn .scr-badge { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 14px 34px rgba(245,158,11,.3); }
.scr-t-warn .scr-ring { border-color: rgba(245,158,11,.28); }
.scr-t-bad .scr-badge { background: linear-gradient(135deg, #ef4444, #ec4899); box-shadow: 0 14px 34px rgba(239,68,68,.3); }
.scr-t-bad .scr-ring { border-color: rgba(239,68,68,.25); }
.scr-t-info .scr-badge { background: linear-gradient(135deg, #3b82f6, #22c1dd); }
.scr-h { font-size: clamp(19px, 4.6vw, 23px); line-height: 1.3; margin: 4px 0 8px; letter-spacing: -.01em; animation: scrUp .55s cubic-bezier(.16,1,.3,1) both .14s; }
.scr-msg { color: var(--mut); font-size: 15px; margin: 0 auto; max-width: 400px; animation: scrUp .55s cubic-bezier(.16,1,.3,1) both .2s; }
.scr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; animation: scrUp .55s cubic-bezier(.16,1,.3,1) both .3s; }
.scr-actions .btn { min-height: 46px; min-width: 140px; justify-content: center; }
.scr-dest { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px; text-align: left; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: scrUp .55s cubic-bezier(.16,1,.3,1) both .24s; }
.scr-dest-ava { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--g1); background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.12)); }
.scr-dest-main { min-width: 0; flex: 1; }
.scr-dest-host { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--txt); }
.scr-dest-host .vic { color: var(--ok); flex: 0 0 auto; }
.scr-dest-path { font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-copy { flex: 0 0 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--txt-soft); cursor: pointer; display: grid; place-items: center; transition: .2s; }
.scr-copy:hover { color: var(--g1); border-color: var(--line-soft); transform: translateY(-1px); }
.scr-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.scr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: rgba(124,58,237,.08); color: var(--g1); }
.scr-chip.ok { background: rgba(16,185,129,.1); color: #047857; }
.scr-chip.warn { background: rgba(245,158,11,.12); color: #b45309; }
.scr-chip.bad { background: rgba(239,68,68,.1); color: #b91c1c; }
.scr-note { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 14px; padding: 12px 14px; border-radius: 14px; font-size: 13px; color: var(--txt-soft); background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.12); }
.scr-note .vic { flex: 0 0 auto; color: var(--g1); margin-top: 2px; }
.scr-form { margin-top: 18px; text-align: left; }
.scr-form .scr-pass { position: relative; }
.scr-form input[type=password], .scr-form input[type=text] { font-size: 16px; min-height: 50px; padding-right: 52px; text-align: left; }
.scr-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; color: var(--mut); cursor: pointer; border-radius: 10px; display: grid; place-items: center; }
.scr-eye:hover { color: var(--g1); }
.scr-form .btn { width: 100%; min-height: 50px; margin-top: 12px; justify-content: center; }
.scr-count { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 12px; font-weight: 800; margin-left: 4px; }
.scr-progress { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 18px; }
.scr-progress > b { display: block; height: 100%; width: 0; background: var(--grad2); transition: width 1s linear; }
.scr-brand { position: fixed; z-index: 1; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--txt-soft); text-decoration: none; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); white-space: nowrap; }
.scr-brand .vic { color: var(--g1); }
.scr-dark .scr-dest, .scr-dark .scr-copy { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #f4f4fb; }
.scr-dark .scr-dest-host { color: #fff; }
.scr-dark .scr-msg, .scr-dark .scr-dest-path { color: #c9c8e6; }
.scr-dark .scr-note { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #e4e3f7; }
.scr-dark .scr-orbs { display: none; }
@keyframes scrPop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes scrUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes scrPulse { 0% { transform: scale(.94); opacity: .9; } 80%, 100% { transform: scale(1.18); opacity: 0; } }
@media (max-width: 520px) {
  .scr .itl-card { padding: 30px 18px 24px; border-radius: 20px; }
  .scr-actions { flex-direction: column; }
  .scr-actions .btn { width: 100%; }
  .scr-brand { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .scr-badge, .scr-ring, .scr-h, .scr-msg, .scr-actions, .scr-dest, .scr-orbs i { animation: none !important; } }
.qr-inline { display: inline-block; width: 220px; max-width: 100%; padding: 6px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.qr-inline svg { display: block; width: 100%; height: auto; }

/* ============================================================
   v13 — QR Stüdyosu
   ============================================================ */
.vic.flip { transform: scaleX(-1); }
.qrs-quota { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 14px; color: var(--txt-soft); }
.qrs-quota .vic { color: var(--g1); }
.qrs-quota-bar { display: inline-block; width: 70px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.qrs-quota-bar i { display: block; height: 100%; background: var(--grad2); border-radius: 99px; }
.qrs-tabs { display: flex; gap: 6px; padding: 5px; margin: 4px 0 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); width: fit-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qrs-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--mut); text-decoration: none; white-space: nowrap; transition: .2s; min-height: 44px; }
.qrs-tabs a:hover { color: var(--txt); background: var(--bg); }
.qrs-tabs a.active { color: #fff; background: var(--grad2); box-shadow: 0 8px 20px rgba(124,58,237,.25); }
.qrs-crumb { margin: -4px 0 12px; }
.qrs-crumb a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--mut); text-decoration: none; }
.qrs-crumb a:hover { color: var(--g1); }
.qrs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.qrs-side { display: grid; gap: 18px; }
.qrs-sticky { position: sticky; top: 88px; }
.qrs-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 700; font-size: 13.5px; color: var(--txt-soft); margin: 18px 0 8px; }
.qrs-sub .vic { color: var(--g1); }
.qrs-fixed { padding: 14px; border-radius: 16px; margin-bottom: 6px; background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(236,72,153,.06)); border: 1px dashed rgba(124,58,237,.3); }
.qrs-fixed .qrs-sub { margin-top: 0; }
.qrs-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.qrs-preset span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrs-preset { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--txt-soft); transition: .2s; min-height: 44px; }
.qrs-preset i { width: 20px; height: 20px; border-radius: 7px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.qrs-preset:hover, .qrs-preset.on { border-color: var(--g1); color: var(--g1); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.qrs-seg, .qrs-types { display: flex; flex-wrap: wrap; gap: 8px; }
.qrs-seg label, .qrs-types label { margin: 0; cursor: pointer; position: relative; }
.qrs-seg input, .qrs-types input { position: absolute; opacity: 0; pointer-events: none; }
.qrs-seg span, .qrs-types span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--txt-soft); transition: .18s; }
.qrs-seg input:checked + span, .qrs-types input:checked + span { border-color: var(--g1); color: var(--g1); background: rgba(124,58,237,.06); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.qrs-seg input:focus-visible + span, .qrs-types input:focus-visible + span { outline: 2px solid var(--g1); outline-offset: 2px; }
.qrs-m, .qrs-e { width: 18px; height: 18px; display: inline-block; flex: 0 0 auto; }
.qrs-m-square { background: currentColor; clip-path: polygon(0 0,45% 0,45% 45%,0 45%,0 0, 55% 55%,100% 55%,100% 100%,55% 100%,55% 55%); }
.qrs-m-rounded { background: radial-gradient(circle at 25% 25%, currentColor 0 22%, transparent 23%), radial-gradient(circle at 75% 75%, currentColor 0 22%, transparent 23%), linear-gradient(currentColor, currentColor) 0 0/45% 45% no-repeat; border-radius: 5px; }
.qrs-m-dots { background: radial-gradient(circle at 25% 25%, currentColor 0 18%, transparent 19%), radial-gradient(circle at 75% 25%, currentColor 0 18%, transparent 19%), radial-gradient(circle at 25% 75%, currentColor 0 18%, transparent 19%), radial-gradient(circle at 75% 75%, currentColor 0 18%, transparent 19%); }
.qrs-m-diamond { background: currentColor; clip-path: polygon(25% 0,50% 25%,25% 50%,0 25%,25% 0, 75% 50%,100% 75%,75% 100%,50% 75%,75% 50%); }
.qrs-e { border: 3px solid currentColor; position: relative; }
.qrs-e::after { content: ''; position: absolute; inset: 3px; background: currentColor; }
.qrs-e-rounded { border-radius: 6px; } .qrs-e-rounded::after { border-radius: 2px; }
.qrs-e-circle { border-radius: 50%; } .qrs-e-circle::after { border-radius: 50%; }
.qrs-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.qrs-color { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--txt-soft); transition: opacity .2s; }
.qrs-color > span { display: flex; align-items: center; gap: 6px; }
.qrs-color input[type=color] { width: 100%; height: 40px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.qrs-color input[type=color]:disabled { opacity: .35; cursor: not-allowed; }
.qrs-color select { margin: 0; min-height: 40px; }
.qrs-color.is-off { opacity: .4; }
.qrs-check { flex-direction: row; align-items: center; cursor: pointer; display: inline-flex; gap: 8px; }
.qrs-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--g1); }
.qrs-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; position: sticky; bottom: 0; padding: 12px 0 2px; background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0)); }
.qrs-save .btn { min-height: 48px; min-width: 160px; justify-content: center; }
.qrs-preview { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.qrs-preview.is-transparent { background: repeating-conic-gradient(#eef0f6 0 25%, #fff 0 50%) 50% / 22px 22px; }
.qrs-preview img { width: 100%; height: 100%; object-fit: contain; padding: 4%; transition: opacity .2s, transform .35s cubic-bezier(.16,1,.3,1); }
.qrs-preview.is-busy img { opacity: .55; transform: scale(.985); }
.qrs-spin { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(124,58,237,.2); border-top-color: var(--g1); animation: spin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.qrs-preview.is-busy .qrs-spin { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.qrs-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.qrs-dl, .qrs-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.qrs-dl .btn, .qrs-actions .btn { min-height: 42px; }
.qrs-actions form { display: inline; margin: 0; }
.qrs-dl-static { align-items: center; margin-top: 18px; }
.qrs-dl-static select { width: auto; margin: 0; min-height: 46px; }
.qrs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qrs-kpis div { padding: 10px; border-radius: 12px; background: var(--bg); text-align: center; }
.qrs-kpis b { display: block; font-size: 20px; line-height: 1.2; }
.qrs-kpis span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mut); }
.qrs-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 14px; padding: 6px; border-radius: 12px; background: var(--bg); }
.qrs-bars i { flex: 1; min-width: 2px; border-radius: 4px 4px 2px 2px; background: var(--grad2); opacity: .85; transition: opacity .2s; }
.qrs-bars i:hover { opacity: 1; }
.qrs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: center; margin-bottom: 18px; background: linear-gradient(135deg, rgba(124,58,237,.07), rgba(236,72,153,.05) 60%, rgba(34,193,221,.06)); }
.qrs-hero h3 { display: flex; gap: 8px; align-items: center; font-size: 17px; }
.qrs-hero h3 .vic { color: var(--g1); }
.qrs-create { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 8px; }
.qrs-create input { margin: 0; min-height: 48px; }
.qrs-create .btn { min-height: 48px; white-space: nowrap; }
.qrs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.qrs-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.qrs-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.qrs-thumb { display: block; border-radius: 14px; background: #fff; border: 1px solid var(--line); padding: 4px; }
.qrs-thumb img { display: block; width: 100%; height: auto; }
.qrs-item-main { min-width: 0; display: grid; gap: 4px; align-content: start; }
.qrs-item-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrs-item-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.qrs-item-act { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.qrs-item-act form { display: inline; margin: 0; }
.qrs-item-act .btn { min-width: 44px; min-height: 40px; justify-content: center; }
.qrs-empty { padding: 48px 24px; }
.qrs-empty-ic { width: 72px; height: 72px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--grad2); box-shadow: 0 14px 34px rgba(124,58,237,.3); }
.qrs-editor fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qrs-types { margin-bottom: 6px; }
.qrs-err { margin-top: 10px; }
@media (max-width: 1100px) {
  .qrs-layout { grid-template-columns: 1fr; }
  .qrs-side { order: -1; }
  .qrs-sticky { position: static; }
  .qrs-preview { max-width: 340px; margin: 0 auto; }
  .qrs-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qrs-create { grid-template-columns: 1fr; }
  .qrs-grid { grid-template-columns: 1fr; }
  .qrs-item { grid-template-columns: 76px minmax(0, 1fr); }
  .qrs-colors { grid-template-columns: 1fr 1fr; }
  .qrs-tabs { width: 100%; }
  .qrs-tabs a { flex: 1; justify-content: center; }
  .qrs-save .btn { flex: 1; }
  .qrs-dl .btn { flex: 1; justify-content: center; white-space: nowrap; }
  .qrs-dl-static { display: grid; grid-template-columns: 1fr 1fr; }
  .qrs-dl-static select { grid-column: 1 / -1; width: 100%; }
}
.scr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.scr .itl-card { min-width: 0; width: 100%; }
.scr-form, .scr-pass, .scr-dest-main { min-width: 0; }
.scr-dark .scr-chip { color: #ddd0ff; background: rgba(167,139,250,.18); }
.scr-dark .scr-chip.ok { color: #86efac; background: rgba(16,185,129,.2); }
.scr-dark .scr-chip.warn { color: #fcd34d; background: rgba(245,158,11,.2); }

/* ============================================================
   v13 — Mobil deneyim iyileştirmeleri
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
a, button, label, summary, [role=button] { -webkit-tap-highlight-color: rgba(124,58,237,.12); touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
@media (max-width: 860px) {
  /* iOS Safari: 16px altındaki alanlarda odaklanınca sayfa yakınlaşmasın */
  input, select, textarea { font-size: 16px; }
  /* Rahat dokunma hedefleri (WCAG 2.5.5 — 44px) */
  .btn { min-height: 44px; }
  .btn.small { min-height: 40px; }
  .tabbar a, .tabbar button { min-height: 48px; }
  /* Geniş tablolar yatay kaydırılır, sayfa taşmaz */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .nav .nav-inner { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .panel-head { flex-wrap: wrap; gap: 12px; }
  .copy-chip { max-width: 100%; }
  .copy-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (hover: none) {
  .card:hover, .qrs-item:hover { transform: none; }
}
.scr-progress > b.scr-indeterminate { width: 40%; animation: scrSlide 1.6s ease-in-out infinite; }
@keyframes scrSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
/* Izgara öğeleri içerikle taşmasın (uzun anahtar/kod/URL satırları) */
.grid > *, .field-row > *, .stat-cards > * { min-width: 0; }
pre, pre.code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.apikey-row > div:first-child, .apikey-row code { min-width: 0; overflow-wrap: anywhere; }