/* Ortak temel: sıfırlama, demo çubuğu, yük diyagramı, yardımcılar.
   Her konsept kendi --tokens değerlerini tanımlar. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[id] { scroll-margin-top: 96px; }
/* Grid öğeleri içerikleri (tablo vb.) yüzünden taşmasın */
.load > *, .p-hero > *, .p-top > *, .p-grid > *, .ov > *, .feature > *, .about > *, .contact > *,
.finder > *, .hero__grid > *, .trust > *, .quote .wrap > *, .hero .wrap > *, .qform > *, .bigcta > * { min-width: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus, #F5C518); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Demo çubuğu */
.demo-bar {
  position: relative; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 7px 16px; background: #0A0A0B; color: #C9CCD1;
  font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.demo-bar a { text-decoration: none; color: #E8EAED; }
.demo-bar__switch { display: flex; gap: 4px; }
.demo-bar__switch a { padding: 3px 10px; border-radius: 999px; border: 1px solid #2E3136; }
.demo-bar__switch a[aria-current="page"] { background: #F5C518; color: #111; border-color: #F5C518; font-weight: 700; }
.demo-bar__note { margin-left: auto; color: #9097A0; }
@media (max-width: 720px) { .demo-bar__note { margin-left: 0; width: 100%; } }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,9,10,.94); display: none; align-items: center; justify-content: center; padding: 56px 64px; }
.lb.open { display: flex; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; background: #fff; }
.lb figcaption { color: #C9CCD1; font: 500 13px/1.4 system-ui, sans-serif; text-align: center; }
.lb button { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; }
.lb button:hover { background: #F5C518; color: #111; }
.lb__x { top: 16px; right: 16px; } .lb__p { left: 12px; top: 50%; translate: 0 -50%; } .lb__n { right: 12px; top: 50%; translate: 0 -50%; }
@media (max-width: 600px) { .lb { padding: 64px 8px; } .lb__p, .lb__n { top: auto; bottom: 12px; translate: none; } }

/* Referans görsel etiketi (tüm konseptler) */
.ref-badge { position: absolute; z-index: 3; left: 12px; top: 12px; font: 600 11px/1.3 system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: rgba(17,17,17,.78); padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.ph-sil { filter: brightness(0); opacity: .09; }
.ph-label { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; font: 600 12px/1.3 system-ui, sans-serif; text-align: center; padding: 6px 12px; border: 1px dashed currentColor; border-radius: 999px; white-space: nowrap; opacity: .7; }

/* Ortak ürün sayfası parçaları */
[data-photo-grid] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
[data-photo-grid] button { padding: 0; border: 0; cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; }
[data-photo-grid] img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
[data-photo-grid] button:hover img { transform: scale(1.05); }
@media (max-width: 760px) { [data-photo-grid] { grid-template-columns: 1fr 1fr; } }
[data-charts] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-card { margin: 0; }
.chart-card button { display: block; width: 100%; padding: 12px; background: #fff; border: 1px solid #E3E6EA; cursor: zoom-in; }
.chart-card img { width: 100%; }
.chart-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: 14px; flex-wrap: wrap; }
.chart-card figcaption span { opacity: .65; font-size: 13px; }
@media (max-width: 760px) { [data-charts] { grid-template-columns: 1fr; } }
[data-thumbs] .more { font-weight: 700; font-size: 16px; }

/* Kaydırma ile görünme */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Yük diyagramı */
[data-load-chart] svg { width: 100%; height: auto; }
.lc-grid { stroke: var(--chart-grid, #ddd); stroke-width: 1; }
.lc-label { fill: var(--chart-text, #777); font-size: 12px; font-family: inherit; }
.lc-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lc-line--1, .lc-key--1 { stroke: var(--chart-1, #F5C518); background: var(--chart-1, #F5C518); }
.lc-line--2, .lc-key--2 { stroke: var(--chart-2, #333); background: var(--chart-2, #333); }
.lc-dot { stroke-width: 2; stroke: var(--chart-bg, #fff); }
.lc-dot--1 { fill: var(--chart-1, #F5C518); }
.lc-dot--2 { fill: var(--chart-2, #333); }
.lc-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--chart-text, #777); }
.lc-key { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }

/* Yük tablosu */
[data-load-table] { overflow-x: auto; }
[data-load-table] table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
[data-load-table] caption { text-align: left; font-size: 13px; padding-bottom: 10px; opacity: .75; }
[data-load-table] th, [data-load-table] td { padding: 9px 12px; text-align: right; white-space: nowrap; }
[data-load-table] th:first-child { text-align: left; }

/* ===== Premium: Giriş Yap düğmesi ve bilgilendirme balonu ===== */
.login-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.login-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.login-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
body[data-concept="A"] .login-btn { height: 40px; padding: 0 14px; border: 1px solid rgba(237,235,230,.25); color: #EDEBE6; font: 700 12px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
body[data-concept="A"] .login-btn:hover { border-color: #F5C518; color: #F5C518; }
[data-theme="light"] body[data-concept="A"] .site-header:is(.is-scrolled, .solid) .login-btn { color: #16171A; border-color: #DCD7CE; }
body[data-concept="B"] .login-btn { height: 46px; padding: 0 16px; border: 1px solid #DDE3EA; border-radius: 4px; color: #0B2545; background: #fff; font: 600 15px "IBM Plex Sans", sans-serif; }
body[data-concept="B"] .login-btn:hover { border-color: #0B2545; }
body[data-concept="C"] .login-btn { height: 44px; padding: 0 18px; border: 1px solid #DEDAD2; border-radius: 999px; color: #111; background: #fff; font: 600 15px Inter, sans-serif; }
body[data-concept="C"] .login-btn:hover { border-color: #111; }
body[data-concept="B"] .site-header .wrap > .login-wrap { margin-right: -24px; }
@media (max-width: 1360px) { body[data-concept="A"] .login-btn { width: 40px; padding: 0; } body[data-concept="A"] .login-btn span { display: none; } }
@media (max-width: 1080px) { body[data-concept="A"] .login-btn { width: 44px; height: 44px; } }
@media (max-width: 1020px) {
  body[data-concept="B"] .login-btn, body[data-concept="C"] .login-btn { width: 44px; height: 44px; padding: 0; }
  body[data-concept="B"] .login-btn span, body[data-concept="C"] .login-btn span { display: none; }
  body[data-concept="B"] .login-wrap, body[data-concept="C"] .login-wrap { margin-left: auto; margin-right: 0; }
  body[data-concept="B"].is-premium .menu-btn, body[data-concept="C"].is-premium .menu-btn { margin-left: 8px; }
}

.login-tip { position: absolute; z-index: 70; top: calc(100% + 14px); right: -8px; width: 290px; max-width: calc(100vw - 32px); padding: 18px 18px 16px; background: #fff; color: #141518; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); font: 400 14px/1.5 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; animation: tipIn .5s cubic-bezier(.2,.8,.2,1) .6s both; white-space: normal; }
.login-tip::before { content: ""; position: absolute; top: -7px; right: 22px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.login-tip__k { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #F5C518; color: #141518; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }
.login-tip b { display: block; font-size: 17px; margin-bottom: 4px; }
.login-tip p { margin: 0 0 12px; color: #55585E; }
.login-tip__a { display: flex; gap: 12px; align-items: center; }
.login-tip__a button { border: 0; background: #141518; color: #fff; font: 600 13px Inter, sans-serif; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.login-tip__a a { font-size: 13px; font-weight: 600; color: #141518; }
body[data-concept="A"] .login-tip, body[data-concept="A"] .login-tip__a button { border-radius: 0; }
body[data-concept="B"] .login-tip, body[data-concept="B"] .login-tip__a button { border-radius: 6px; }
@keyframes tipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-tip { animation: none; } }
.site-header .logo { flex: 0 0 auto; }
@media (max-width: 1500px) { body[data-concept="A"].is-premium .site-nav { gap: 18px; } body[data-concept="A"].is-premium .site-nav a { font-size: 13px; letter-spacing: .04em; } body[data-concept="A"].is-premium .site-header .wrap { gap: 22px; } }
@media (max-width: 1240px) { body[data-concept="B"].is-premium .site-nav a { padding: 8px 10px; font-size: 14px; } }
@media (min-width: 1081px) and (max-width: 1260px) {
  body[data-concept="A"] .site-header .lang { display: none; }
  body[data-concept="A"] .site-header .logo img { height: 30px; }
  body[data-concept="A"] .site-nav { gap: 16px; }
  body[data-concept="A"] .site-nav a { font-size: 12.5px; letter-spacing: .03em; }
  body[data-concept="A"] .site-header .wrap { gap: 18px; }
  body[data-concept="A"] .hdr-right { gap: 10px; }
}
@media (max-width: 600px) {
  body[data-concept="A"] .site-header .wrap { padding-left: 16px; padding-right: 16px; gap: 10px; }
  body[data-concept="A"] .site-header .logo img { height: 30px; }
  body[data-concept="A"] .hdr-right { gap: 8px; }
}

/* Filigran: tüm sayfalarda, tıklamayı engellemez */
.wm { position: fixed; left: 12px; bottom: 8px; z-index: 40; pointer-events: none; font: 600 11px/1.3 system-ui, -apple-system, sans-serif; letter-spacing: .02em; color: rgba(20,21,24,.42); background: rgba(255,255,255,.55); padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(2px); }
body[data-concept="A"] .wm, .panel-dark .wm { color: rgba(237,235,230,.5); background: rgba(14,15,17,.45); }
@media (max-width: 600px) { .wm { font-size: 10px; max-width: 70vw; } }