/* Countercue, countercue.ai
   Tasarım dili: websiteTemplate/Countercue Home.dc.html (lacivert #1A1B3A, amber #F2B33D,
   Inter Tight + IBM Plex Mono, ince #E6E6EC çizgiler). Çerçeve yok; tek CSS. */
:root {
  --ink: #1A1B3A; --ink-2: #4A4C70; --ink-3: #55577A; --muted: #6B6D88; --muted-2: #7C7E96;
  --line: #E6E6EC; --line-2: #EFEFF2; --bg: #FBFBF9; --bg-2: #F6F6F3; --panel: #F5F5F3;
  --amber: #F2B33D; --amber-2: #E9A722; --amber-dark: #C98F27; --navy: #1A1B3A; --navy-2: #14152E;
  --green: #1C7F5C; --green-soft: #EEF6F1;
  --sans: 'Inter Tight', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --max: 1240px; --pad: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: #3A3C6B; }
::selection { background: var(--amber); color: var(--ink); }
img { max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.mono { font-family: var(--mono); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; margin: 0; text-wrap: pretty; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; }
h3 { font-size: 21px; letter-spacing: -.02em; }
p { margin: 0; }
.lede { font-size: 16.5px; line-height: 1.55; color: var(--ink-3); max-width: 44ch; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--amber); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* Üst çubuk */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,251,249,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; row-gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { height: 24px; width: auto; display: block; }
.brand span { font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.site-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-2); flex: 1 1 auto; }
.site-nav a { color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
.dd { position: relative; }
.dd > button { font: inherit; background: none; border: none; color: var(--ink-2); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.dd > button svg { opacity: .55; }
.dd-menu { position: absolute; top: 26px; left: -20px; display: none; gap: 34px; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 44px rgba(26,27,58,.12); white-space: nowrap; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: flex; }
.dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* düğme ile menü arasındaki boşlukta hover kopmasın */
.dd-col { display: flex; flex-direction: column; gap: 10px; }
.dd-col .eyebrow { font-size: 10.5px; letter-spacing: .1em; margin: 0; }
.header-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.lang { display: flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }
.lang a { padding: 4px 5px; color: #A3A5B8; }
.lang a[aria-current] { color: var(--ink); font-weight: 500; }
.lang span { color: #C8C9D4; }
.btn { display: inline-block; background: var(--amber); color: var(--ink); font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--amber-2); color: var(--ink); }
.btn-lg { font-size: 16px; padding: 14px 26px; }
.link-ul { font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid #C9CAD6; padding-bottom: 2px; }
.link-ul:hover { border-color: var(--ink); }
.nav-toggle { display: none; }

/* Hero */
.hero .wrap { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(80px, 8.6vw, 128px); } /* alt dolgu, taşan rapor kartı ve rozeti de hesaba katar */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 24px; }
.hero .sub { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--ink-3); margin: 0 0 34px; max-width: 46ch; }
.hero .eyebrow { font-size: 11.5px; margin-bottom: 22px; }
.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stage { position: relative; padding: 8px 5% clamp(96px, 12vw, 150px) 0; }
.stage-back { position: absolute; left: 14%; right: -7%; top: 3%; bottom: -9%; background: var(--amber); border-radius: 26px; transform: rotate(2.4deg); z-index: 0; }
.app { position: relative; z-index: 2; margin-right: 6%; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 26px 60px -20px rgba(26,27,58,.28); overflow: hidden; transform: rotate(-1.2deg); transform-origin: 30% 60%; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.app-bar .brand img { height: 19px; } .app-bar .brand span { font-size: 15px; }
.app-bar small { font-size: 11.5px; color: var(--muted); }
.app-body { padding: 18px; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.app-head .k { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.app-head .v { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.pill { font-size: 11.5px; color: var(--ink-2); border: 1px solid #E4E4EC; border-radius: 8px; padding: 6px 12px; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.card-light { background: var(--panel); border-radius: 10px; padding: 16px; }
.card-light .t { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.card-light .s { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin-bottom: 14px; }
.funnel { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.funnel span { display: block; color: #fff; font-size: 11px; font-weight: 600; text-align: center; padding: 8px 0; border-radius: 7px; background: var(--navy); }
.funnel span:nth-child(1) { width: 100%; } .funnel span:nth-child(2) { width: 82%; background: #9092B8; } .funnel span:nth-child(3) { width: 64%; background: var(--amber); color: var(--ink); }
.card-dark { background: var(--navy); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; color: #fff; }
.card-dark .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-dark .t { font-size: 12.5px; color: rgba(255,255,255,.72); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 14px; } .spark i { width: 3px; background: var(--amber); }
.card-dark .b { font-size: 14px; line-height: 1.45; margin: 14px 0 20px; }
.bars { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; height: 74px; } .bars i { flex: 1; background: #4C4E7A; border-radius: 2px; }
.stream-t { font-size: 13px; font-weight: 600; margin: 20px 0 10px; }
.ev { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); }
.ev .ico { width: 30px; height: 30px; flex: 0 0 auto; background: var(--panel); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); }
.ev .txt { flex: 1; min-width: 0; } .ev .txt b { display: block; font-size: 12.5px; font-weight: 500; } .ev .txt small { display: block; font-size: 11px; color: var(--muted); }
.tag { font-size: 10.5px; color: var(--green); background: var(--green-soft); border-radius: 3px; padding: 4px 8px; }
.report-card { position: absolute; z-index: 3; right: -2%; bottom: -30px; width: min(48%, 282px); background: #fff; border: 1px solid #E9E9EE; border-radius: 10px; box-shadow: 0 30px 64px -18px rgba(26,27,58,.34); padding: 15px 16px 16px; transform: rotate(4deg); transform-origin: 80% 100%; }
.report-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-card .head b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.report-card .meta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); line-height: 1.7; }
.report-card img { height: 15px; width: auto; opacity: .9; }
.report-card hr { border: 0; height: 2px; background: var(--navy); margin: 10px 0 11px; }
.rc-h { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--ink-2); background: #F2F4F9; border-left: 2px solid var(--navy); padding: 6px 8px; margin-bottom: 11px; }
.rc-h.green { background: #F1F6F3; border-color: var(--green); margin: 11px 0 9px; }
.rc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rc-kpi { border: 1px solid #EBEBF0; border-top: 2px solid var(--navy); border-radius: 6px; padding: 8px 9px; }
.rc-kpi .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.rc-kpi .v { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.rc-ins { display: flex; flex-direction: column; gap: 7px; } .rc-ins div { font-size: 10.5px; line-height: 1.45; color: #3C3E60; }
.badge { position: absolute; z-index: 4; left: -4%; bottom: clamp(12px, 2vw, 30px); display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #EDEDF2; border-radius: 10px; box-shadow: 0 16px 34px -14px rgba(26,27,58,.26); padding: 11px 15px; }
.badge .ok { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.badge b { display: block; font-size: 12.5px; font-weight: 600; } .badge small { display: block; font-size: 11px; color: var(--muted); }

/* Bölümler */
.section { border-top: 1px solid var(--line); }
.section .wrap { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.section-head { max-width: 640px; margin-bottom: clamp(36px, 4vw, 60px); }
.alt { background: var(--bg-2); }
.dark { background: var(--navy); color: #fff; } .dark a { color: #fff; }
.darker { background: var(--navy-2); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.dark .eyebrow, .darker .eyebrow { color: var(--amber); } .darker .eyebrow { color: rgba(255,255,255,.5); }
.dark .lede, .darker .lede { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.6; }
.grid-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.grid-lines > div { background: #fff; padding: clamp(24px, 2.6vw, 38px); }
.num { font-family: var(--mono); font-size: 11px; color: var(--amber); margin-bottom: 20px; }
.grid-lines h3 { margin: 0 0 12px; } .grid-lines p { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid #E4E4EA; border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.card h3 { font-size: 19px; } .card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.card .foot { margin-top: auto; border-top: 1px solid var(--line-2); padding-top: 16px; }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 62px; } .mini-bars i { flex: 1; background: #E3E3E9; border-radius: 1px; }
.hour-bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; margin-bottom: 10px; } .hour-bars i { flex: 1; background: #E3E3E9; border-radius: 1px; }
.kv { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.meter { height: 6px; background: #F0F0F3; border-radius: 2px; margin: 8px 0; } .meter i { display: block; height: 6px; background: var(--amber); border-radius: 2px; }
.kpi2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi2 div { border: 1px solid var(--line-2); border-radius: 6px; padding: 10px; } .kpi2 small { font-size: 10px; color: var(--muted); display: block; } .kpi2 b { font-size: 17px; font-weight: 600; }
.demand { display: flex; flex-direction: column; gap: 9px; } .demand div { display: flex; align-items: center; gap: 10px; } .demand .meter { flex: 1; margin: 0; } .demand .meter i { background: #C6C7D2; } .demand div:first-child .meter i { background: var(--navy); } .demand span { font-family: var(--mono); font-size: 10px; color: var(--muted); width: 74px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips span { font-family: var(--mono); font-size: 10px; color: var(--ink-2); border: 1px solid #E4E4EC; border-radius: 2px; padding: 5px 8px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; }
.split h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; max-width: 22ch; margin-bottom: 22px; }
.bullets { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.bullets div { font-size: 15px; color: rgba(255,255,255,.86); border-left: 2px solid rgba(255,255,255,.2); padding-left: 14px; } .bullets div:first-child { border-color: var(--amber); }
.panel-dark { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: clamp(20px, 2.4vw, 30px); }
.panel-dark .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 12px; } .panel-dark .head b { font-size: 15px; } .panel-dark .head small { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.5); }
.dk { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; } .dk div { border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 16px; } .dk small { font-size: 11px; color: rgba(255,255,255,.6); display: block; margin-bottom: 8px; } .dk b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; display: block; } .dk em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.55); display: block; margin-top: 6px; } .dk em.up { color: var(--amber); }
.rows { display: flex; flex-direction: column; gap: 12px; } .rows div { display: flex; align-items: center; gap: 12px; } .rows span { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.55); width: 86px; } .rows .meter { flex: 1; height: 7px; background: rgba(255,255,255,.14); margin: 0; } .rows .meter i { height: 7px; background: rgba(255,255,255,.6); } .rows div:first-child .meter i { background: var(--amber); }
.grid-dark { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.grid-dark > div { background: var(--navy-2); padding: clamp(22px, 2.4vw, 32px); } .grid-dark h3 { font-size: 18px; margin-bottom: 12px; } .grid-dark p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.66); }
.deploy { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .deploy > div { border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; } .deploy > div > small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--amber); } .deploy > div > b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .deploy > div > p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.66); }
.setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 861px) { .setup .steps { order: -1; } }
.setup h2 { font-size: clamp(28px, 3.2vw, 42px); max-width: 22ch; margin-bottom: 18px; } .setup .lede { margin-bottom: 24px; }
.setup-link { margin-top: 22px; }
.setup .pos { font-size: 16.5px; line-height: 1.6; max-width: 44ch; border-top: 1px solid var(--line); padding-top: 24px; }
.steps { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.steps div { background: #fff; padding: 22px 26px; display: flex; align-items: baseline; gap: 16px; font-size: 15.5px; } .steps .num { margin: 0; }
.faq { max-width: 820px; margin: 0 auto; }
#faq .section-head { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } .faq details { border-top: 1px solid var(--line); padding: 18px 0; } .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--muted); } .faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }
.demo .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; padding-top: clamp(60px, 7vw, 104px); padding-bottom: clamp(60px, 7vw, 104px); }
.demo h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; max-width: 20ch; margin-bottom: 18px; }
.form { background: #fff; border-radius: 10px; padding: clamp(24px, 2.6vw, 34px); color: var(--ink); }
.form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 7px; } .form label span { font-size: 12.5px; color: var(--muted); } .form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font-family: var(--sans); font-size: 15px; padding: 11px 12px; border: 1px solid #DEDEE6; border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
.form .btn { margin-top: 22px; width: 100%; font-size: 16px; padding: 14px; }
.form .note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.form .ok { display: none; margin-top: 14px; padding: 12px 14px; background: var(--green-soft); color: var(--green); border-radius: 10px; font-size: 14px; }
.form.sent .ok { display: block; }

/* Alt bilgi */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.site-footer .wrap { padding-top: clamp(48px, 5vw, 76px); padding-bottom: 34px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px; }
.foot-grid > div { display: flex; flex-direction: column; gap: 11px; font-size: 14px; } .foot-grid a { color: var(--ink-2); }
.foot-grid .eyebrow { font-size: 10.5px; letter-spacing: .1em; margin: 0; }
.foot-tag { font-size: 13.5px; line-height: 1.55; color: var(--muted-2); max-width: 26ch; }
.foot-bar { margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* Kaydırma animasyonu */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal][data-shown] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-header.nav-open .site-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; order: 3; padding-top: 8px; }
  .nav-toggle { display: inline-flex; font: inherit; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; color: var(--ink-2); }
  .dd-menu { position: static; box-shadow: none; border: none; padding: 6px 0 0 12px; white-space: normal; flex-direction: column; gap: 16px; }
  .stage { padding-bottom: 120px; }
  .report-card { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 24px; transform: none; }
  .badge { position: relative; left: auto; bottom: auto; margin-top: 16px; display: inline-flex; }
}




/* ============ Hero: sağda yuvarlatılmış fotoğraf bloğu + üzerinde yüzen kartlar ============ */
/* Fotoğraf: Blake Wisz / Unsplash. Kartlar iki dilde konuşur: dönüşüm şeridi (konuşma → olay) ve
   temsili panel/rapor kartları (Firebase sürümündeki dil). */
.hero-grid { grid-template-columns: minmax(280px, 4fr) minmax(380px, 8fr); }
.stage { position: relative; aspect-ratio: 4 / 3; min-height: 480px; }
.photo { position: absolute; inset: 0 0 0 2%; transform: rotate(-1.6deg); z-index: 1; border-radius: 28px; overflow: hidden; background: #DDD9D0 url(hero-photo.jpg) center / cover no-repeat; box-shadow: 0 30px 70px -30px rgba(26,27,58,.45); }
@supports (background-image: url('x.webp')) { .photo { background-image: url(hero-photo.webp); } }
.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,27,58,.08) 0%, rgba(26,27,58,.30) 100%); }
.fc { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 50px -22px rgba(26,27,58,.45); font-size: 12px; z-index: 2; }
.fc-label { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
/* 1 · konuşma */
.fc.chat { left: -3%; top: 2%; width: 40%; padding: 11px 13px; border-left: 4px solid var(--amber); transform: rotate(-2deg); }
.bubble { position: relative; display: inline-block; max-width: 80%; font-size: 12.5px; line-height: 1.35; padding: 7px 11px; border-radius: 11px; }
.bubble.c { background: var(--panel); color: var(--ink); border-bottom-left-radius: 3px; }
.bubble.s { background: var(--navy); color: #fff; border-bottom-right-radius: 3px; margin-left: 20%; margin-top: 7px; }
.wave { display: block; width: 100%; height: 14px; margin-top: 9px; }
/* 2 · olay */
.fc.event { right: -4%; top: 6%; width: 42%; padding: 11px 13px; border-left: 4px solid var(--navy); transform: rotate(1.5deg); }
.chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-family: var(--mono); font-size: 10px; color: var(--ink-2); border: 1px solid #E4E4EC; border-radius: 4px; padding: 4px 7px; background: #fff; }
.chip b { color: var(--muted); font-weight: 500; margin-right: 4px; }
.chip.main { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 500; }
.quote { font-size: 10.5px; font-style: italic; color: var(--ink-3); margin-top: 8px; }
/* 3 · temsili panel (huni) */
.fc.panel { left: -4%; bottom: 6%; width: 36%; padding: 12px 13px; transform: rotate(-1.5deg); }
.fc.panel .t { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.fc.panel .s { font-size: 10.5px; line-height: 1.4; color: var(--ink-3); margin-bottom: 10px; }
.funnel { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.funnel span { display: block; color: #fff; font-size: 10px; font-weight: 600; text-align: center; padding: 6px 0; border-radius: 7px; background: var(--navy); }
.funnel span:nth-child(1) { width: 100%; } .funnel span:nth-child(2) { width: 82%; background: #9092B8; } .funnel span:nth-child(3) { width: 64%; background: var(--amber); color: var(--ink); }
/* 4 · operasyon raporu */
.fc.report { right: -2%; bottom: -12%; width: 42%; padding: 12px 13px; transform: rotate(2.5deg); }
.fc.report .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fc.report .head b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.fc.report .meta { font-family: var(--mono); font-size: 8.5px; color: var(--muted); line-height: 1.6; }
.fc.report img { height: 13px; width: auto; }
.fc.report hr { border: 0; height: 2px; background: var(--navy); margin: 8px 0; }
.rc-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--ink-2); background: #F2F4F9; border-left: 2px solid var(--navy); padding: 5px 7px; margin-bottom: 8px; }
.rc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rc-kpi { border: 1px solid #EBEBF0; border-top: 2px solid var(--navy); border-radius: 6px; padding: 6px 8px; }
.rc-kpi .l { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.rc-kpi .v { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
/* rozet + cihaz */
.badge { position: absolute; z-index: 3; left: 36%; bottom: -6%; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #EDEDF2; border-radius: 10px; box-shadow: 0 16px 34px -14px rgba(26,27,58,.26); padding: 9px 13px; }
.badge .ok { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.badge b { display: block; font-size: 12px; font-weight: 600; } .badge small { display: block; font-size: 10.5px; color: var(--muted); }
.device { position: absolute; z-index: 3; right: 30%; top: -14px; display: flex; align-items: center; gap: 9px; background: var(--navy); color: #fff; border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 11.5px; box-shadow: 0 14px 30px -14px rgba(26,27,58,.5); }
.device svg { flex: 0 0 auto; width: 40px; height: 18px; }
/* Platform bölümü: temsili panel (Firebase sürümü) */
.showcase-wrap { margin-top: clamp(28px, 3vw, 44px); }
.showcase { position: relative; max-width: 760px; margin: 0 auto; padding-bottom: 150px; }
.showcase .app { transform: none; margin-right: 12%; }
.showcase .report-card { right: 0; bottom: 20px; transform: rotate(2deg); }
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .stage { max-width: 640px; margin: 8px auto 0; } }
@media (max-width: 860px) {
  /* Telefon: fotoğraf üstte, kartlar 2 sütunlu ızgarada (eğimsiz, küçük) */
  .stage { aspect-ratio: auto; min-height: 0; padding: 0; margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .stage-back { display: none; }
  .photo { position: relative; inset: auto; grid-column: 1 / -1; height: 230px; border-radius: 18px; transform: none; }
  .stage .fc.chat, .stage .fc.event, .stage .fc.panel, .stage .fc.report, .stage .badge {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; margin: 0; }
  .stage .fc { padding: 10px 11px; box-shadow: 0 10px 24px -16px rgba(26,27,58,.35); }
  .stage .badge { grid-column: 1 / -1; justify-content: center; }
  .bubble { max-width: 100%; font-size: 11.5px; padding: 6px 9px; } .bubble.s { margin-left: 8%; }
  .chip { font-size: 9.5px; padding: 3px 6px; }
  .fc.panel { display: flex; flex-direction: column; } .fc.panel .funnel { margin-top: auto; margin-bottom: auto; }
  .fc.panel .s { font-size: 10px; margin-bottom: 8px; }
  .funnel span { padding: 7px 0; }
  .fc.report .meta { display: none; }
  .rc-kpis { gap: 5px; } .rc-kpi { padding: 5px 6px; min-width: 0; } .rc-kpi .l { font-size: 7px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-kpi .v { font-size: 13px; }
  .showcase { padding-bottom: 0; } .showcase .app { margin-right: 0; } .showcase .report-card { position: relative; transform: none; margin-top: 20px; }
}

/* ============ Platform alt sayfaları (nasıl çalışır / raporlar / uyarılar) ============ */
.site-nav a[aria-current], .dd.cur > button { color: var(--ink); font-weight: 500; }
.dd-col a[aria-current] { color: var(--amber-dark); }
.subnav { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.subnav .wrap { display: flex; align-items: center; gap: 22px; padding-top: 10px; padding-bottom: 10px; font-size: 13.5px; overflow-x: auto; }
.subnav .crumb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 6px; white-space: nowrap; }
.subnav a { color: var(--ink-2); white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.subnav a[aria-current] { color: var(--ink); border-color: var(--amber); font-weight: 500; }
.page-hero .wrap { padding-top: clamp(44px, 5.5vw, 80px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero-grid.plain { grid-template-columns: minmax(300px, 5fr) minmax(360px, 7fr); align-items: center; }
.page-hero h1 { font-size: clamp(34px, 4.4vw, 56px); }
.tag-dev { display: inline-block; vertical-align: middle; margin-left: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--amber-dark); background: #FBF1DA; border-radius: 4px; padding: 3px 8px; }
.page-visual { position: relative; }
/* Nasıl çalışır: küçük vitrin */
.showcase.small { max-width: 600px; margin: 0; padding-bottom: 110px; }
.showcase.small .app { margin-right: 14%; }
.showcase.small .report-card { right: 0; bottom: 0; transform: rotate(2deg); }
/* Raporlar: büyük rapor kartı, arkasında sarı blok */
.report-stage { position: relative; max-width: 440px; margin: 0 auto; padding: 24px 28px 28px 0; }
.report-stage .stage-back { position: absolute; left: 12%; right: 0; top: 8%; bottom: 0; transform: rotate(2.4deg); z-index: 0; border-radius: 20px; }
.report-card.big { position: relative; right: auto; bottom: auto; width: 100%; transform: rotate(-1.5deg); z-index: 1; padding: 22px 24px 24px; border-radius: 10px; }
.report-card.big .head b { font-size: 18px; } .report-card.big .meta { font-size: 10.5px; } .report-card.big img { height: 18px; }
.report-card.big .rc-h { font-size: 10px; } .report-card.big .rc-kpi { padding: 12px; } .report-card.big .rc-kpi .l { font-size: 9.5px; } .report-card.big .rc-kpi .v { font-size: 20px; }
.report-card.big .rc-ins div { font-size: 12.5px; }
.report-stage.on-dark { padding: 0; } .report-stage.on-dark .report-card { color: var(--ink); } .report-stage.on-dark .report-card.big { transform: rotate(1.5deg); }
/* Dönüşümlü metin/görsel satırları */
.rowalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.4vw, 48px) 0; border-top: 1px solid var(--line); }
.rowalt:nth-child(odd) .txt { order: 2; }
.rowalt h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; }
.rowalt .txt > p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 46ch; }
.rowalt .eyebrow { margin-bottom: 12px; }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 54px -26px rgba(26,27,58,.3); padding: 20px 22px; max-width: 520px; margin: 0 auto; }
.mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .mock-head b { font-size: 15px; } .mock-head small { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .mock-kpis.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
.mock-kpis div { border: 1px solid var(--line-2); border-top: 2px solid var(--navy); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.mock-kpis small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-kpis b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.mock-kpis em { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 3px; } .mock-kpis em.up { color: var(--green); } .mock-kpis em.down { color: var(--amber-dark); }
.mock-ins { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: #3C3E60; padding: 8px 0; border-top: 1px solid var(--line-2); }
.mock-ins i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 5px; } .mock-ins.warn i { background: #D9534F; }
.mock-rates { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.mock-rates div { display: grid; grid-template-columns: 112px 44px 1fr; align-items: center; gap: 10px; }
.mock-rates small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--muted); } .mock-rates b { font-size: 15px; } .mock-rates .meter { margin: 0; }
.mock-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.mock .chips { margin-bottom: 10px; }
.mock-prod { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.btn-sm { font-size: 12px; padding: 7px 12px; border-radius: 8px; }
.mock-rows { display: flex; flex-direction: column; } .mock-rows div { font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding: 7px 0; border-top: 1px solid var(--line-2); }
/* Uyarılar */
.alert-stack { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; }
.alert-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: 10px; padding: 14px 16px; box-shadow: 0 18px 40px -22px rgba(26,27,58,.3); }
.alert-card.amber { border-left-color: var(--amber); transform: translateX(18px); }
.alert-card:last-child { transform: translateX(-10px); }
.alert-card small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); margin-bottom: 5px; }
.alert-card b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.alert-card span { font-size: 12px; color: var(--ink-3); }
.rule-rows { display: flex; flex-direction: column; } .rule-rows div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); }
.rule-rows span { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; } .rule-rows b { font-size: 14px; font-weight: 500; }
.grid-lines.cols3 { grid-template-columns: repeat(3, 1fr); }
/* Altı yer: solda fotoğraf, sağda 2×3 kart; bölüm tek ekrana sığacak şekilde sıkı */
#values .wrap { padding-top: clamp(32px, 3.4vw, 56px); padding-bottom: clamp(32px, 3.4vw, 56px); }
#values .two { margin-bottom: clamp(16px, 1.8vw, 28px); align-items: center; }
#values .two h2 { font-size: clamp(28px, 2.8vw, 38px); }
#values .cards { gap: 10px; }
#values .card { padding: 16px 18px; gap: 8px; }
#values .card h3 { font-size: 17px; } #values .card p { font-size: 13px; line-height: 1.45; }
#values .card .foot { padding-top: 10px; }
#values .mini-bars { height: 36px; } #values .hour-bars { height: 34px; margin-bottom: 6px; }
#values .kpi2 div { padding: 7px 9px; } #values .kpi2 b { font-size: 15px; }
#values .meter { margin: 5px 0; } #values .demand { gap: 6px; }
#values .chips span { padding: 4px 7px; }
/* Altı yer: solda fotoğraf, sağda 2×3 kart */
.values-grid { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(420px, 7fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.values-grid .cards { grid-template-columns: repeat(2, 1fr); }
.vstage { position: relative; padding: 0 0 4% 4%; }
.vstage .stage-back { position: absolute; left: 0; right: 10%; top: 8%; bottom: 0; transform: rotate(-2.2deg); border-radius: 26px; z-index: 0; }
.vphoto { position: relative; z-index: 1; height: 100%; min-height: 420px; border-radius: 28px; transform: rotate(1.4deg); background: #DDD9D0 url(counter-photo.jpg) center / cover no-repeat; box-shadow: 0 30px 70px -30px rgba(26,27,58,.45); }
@supports (background-image: url('x.webp')) { .vphoto { background-image: url(counter-photo.webp); } }
/* Fotoğrafın sağ altında tablet: temsili komuta paneli. Ölçüler cqw → yazılar tabletle birlikte küçülür */
.tablet { position: absolute; z-index: 2; right: -10%; bottom: -1%; width: 82%; container-type: inline-size; background: #1B1C2E; border-radius: 4.2cqw; padding: 2.2cqw; box-shadow: 0 30px 60px -22px rgba(26,27,58,.6); transform: rotate(-3deg); }
.tablet .screen { background: #F7F7F5; border-radius: 2.6cqw; padding: 2.4cqw; font-family: var(--sans); color: var(--ink); line-height: 1.25; }
.tb-nav { display: flex; align-items: center; gap: 1.4cqw; overflow: hidden; background: #fff; border: 1px solid var(--line-2); border-radius: 1.6cqw; padding: 1.4cqw 2cqw; margin-bottom: 2cqw; }
.tb-brand { display: inline-flex; align-items: center; gap: 1cqw; font-size: 2.3cqw; font-weight: 600; letter-spacing: -.02em; } .tb-brand img { height: 2.4cqw; width: auto; }
.tb-tabs { display: flex; gap: .6cqw; margin-left: 1cqw; } .tb-tabs i { font-style: normal; white-space: nowrap; font-size: 1.7cqw; color: var(--muted); padding: .7cqw 1.1cqw; border-radius: 1cqw; } .tb-tabs i.on { background: var(--navy); color: #fff; }
.tb-pills { margin-left: auto; display: flex; gap: .8cqw; } .tb-pills i { font-style: normal; white-space: nowrap; font-size: 1.7cqw; color: var(--ink-2); border: 1px solid var(--line); border-radius: 1cqw; padding: .6cqw 1.3cqw; background: #fff; }
.tb-title { display: flex; align-items: baseline; gap: 1.6cqw; margin: .6cqw 0 1.8cqw .4cqw; } .tb-title b { font-size: 3.2cqw; letter-spacing: -.02em; } .tb-title small { font-size: 1.8cqw; color: var(--muted); }
.tb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; margin-bottom: 1.8cqw; }
.tb-kpis > div { position: relative; background: #fff; border: 1px solid var(--line-2); border-top: .5cqw solid var(--navy); border-radius: 1.6cqw; padding: 1.6cqw 1.8cqw; min-width: 0; }
.tb-kpis small { display: block; font-size: 1.7cqw; color: var(--muted); margin-bottom: .6cqw; } .tb-kpis b { display: block; font-size: 4.2cqw; font-weight: 700; letter-spacing: -.03em; }
.tb-kpis em { display: block; font-style: normal; font-family: var(--mono); font-size: 1.6cqw; margin-top: .6cqw; } .tb-kpis em.up { color: var(--green); } .tb-kpis em.down { color: var(--amber-dark); }
.tb-kpis svg { position: absolute; right: 1.6cqw; bottom: 1.8cqw; width: 34%; height: 4.4cqw; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tb-kpis > div:nth-child(2) svg { stroke: #9092B8; }
.tb-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin-bottom: 1.6cqw; } .tb-charts:last-child { margin-bottom: 0; }
.tb-panel { background: #fff; border: 1px solid var(--line-2); border-radius: 1.6cqw; padding: 1.8cqw 2cqw 1.6cqw; min-width: 0; }
.tb-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; margin-bottom: 1.6cqw; } .tb-ph b { font-size: 2cqw; font-weight: 600; white-space: nowrap; } .tb-ph span { font-size: 1.5cqw; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ph i { display: inline-block; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; margin: 0 .4cqw 0 .8cqw; vertical-align: middle; } .tb-ph i.n { background: var(--navy); } .tb-ph i.a { background: var(--amber); } .tb-ph i.g { background: #C6C7D2; }
.tb-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 12cqw; gap: 1.6cqw; } .tb-bars > div { flex: 1; display: flex; align-items: flex-end; gap: .4cqw; height: 100%; }
.tb-bars i { flex: 1; border-radius: .4cqw .4cqw 0 0; background: #C6C7D2; } .tb-bars i:first-child { background: var(--navy); } .tb-bars i:nth-child(2) { background: var(--amber); }
.tb-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 1.4cqw; color: var(--muted); margin-top: .8cqw; }
.tb-lines { display: block; width: 100%; height: 12cqw; fill: none; } .tb-lines .grid line { stroke: #EEEEF2; stroke-width: .6; } .tb-lines polyline { stroke-width: 1.5; stroke-linejoin: round; } .tb-lines .n { stroke: var(--navy); } .tb-lines .a { stroke: var(--amber); } .tb-lines .g { stroke: #C6C7D2; }
.tb-hbars { display: flex; flex-direction: column; gap: 1.2cqw; } .tb-hbars > div { display: grid; grid-template-columns: 9cqw 1fr 2.6cqw; align-items: center; gap: 1.2cqw; font-size: 1.6cqw; }
.tb-hbars span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-hbars i { display: flex; height: 1.8cqw; background: #F0F0F3; border-radius: .5cqw; overflow: hidden; } .tb-hbars b { display: block; height: 100%; background: var(--navy); } .tb-hbars b.a { background: var(--amber); } .tb-hbars em { font-style: normal; font-family: var(--mono); font-size: 1.5cqw; color: var(--muted); text-align: right; }
.tb-table { display: flex; flex-direction: column; gap: .8cqw; } .tb-table > div { display: grid; grid-template-columns: 9cqw repeat(3, 1fr); gap: .8cqw; align-items: center; font-size: 1.6cqw; }
.tb-table span { color: var(--ink-2); } .tb-table b { font-family: var(--mono); font-weight: 500; font-size: 1.6cqw; text-align: center; border-radius: .5cqw; padding: .5cqw 0; }
.tb-table b.h { background: #E3F0E9; color: var(--green); } .tb-table b.m { background: #FBF1DA; color: var(--amber-dark); } .tb-table b.l { background: #F8E3E2; color: #B3423E; }
/* Dönüşümlü metin/görsel satırları */
.rowalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.4vw, 48px) 0; border-top: 1px solid var(--line); }
.rowalt:nth-child(odd) .txt { order: 2; }
.rowalt h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; }
.rowalt .txt > p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 46ch; }
.rowalt .eyebrow { margin-bottom: 12px; }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 54px -26px rgba(26,27,58,.3); padding: 20px 22px; max-width: 520px; margin: 0 auto; }
.mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .mock-head b { font-size: 15px; } .mock-head small { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .mock-kpis.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
.mock-kpis div { border: 1px solid var(--line-2); border-top: 2px solid var(--navy); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.mock-kpis small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-kpis b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.mock-kpis em { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 3px; } .mock-kpis em.up { color: var(--green); } .mock-kpis em.down { color: var(--amber-dark); }
.mock-ins { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: #3C3E60; padding: 8px 0; border-top: 1px solid var(--line-2); }
.mock-ins i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 5px; } .mock-ins.warn i { background: #D9534F; }
.mock-rates { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.mock-rates div { display: grid; grid-template-columns: 112px 44px 1fr; align-items: center; gap: 10px; }
.mock-rates small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--muted); } .mock-rates b { font-size: 15px; } .mock-rates .meter { margin: 0; }
.mock-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.mock .chips { margin-bottom: 10px; }
.mock-prod { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.btn-sm { font-size: 12px; padding: 7px 12px; border-radius: 8px; }
.mock-rows { display: flex; flex-direction: column; } .mock-rows div { font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding: 7px 0; border-top: 1px solid var(--line-2); }
/* Uyarılar */
.alert-stack { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; }
.alert-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: 10px; padding: 14px 16px; box-shadow: 0 18px 40px -22px rgba(26,27,58,.3); }
.alert-card.amber { border-left-color: var(--amber); transform: translateX(18px); }
.alert-card:last-child { transform: translateX(-10px); }
.alert-card small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); margin-bottom: 5px; }
.alert-card b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.alert-card span { font-size: 12px; color: var(--ink-3); }
.rule-rows { display: flex; flex-direction: column; } .rule-rows div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); }
.rule-rows span { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; } .rule-rows b { font-size: 14px; font-weight: 500; }
.grid-lines.cols3 { grid-template-columns: repeat(3, 1fr); }
/* Altı yer: solda fotoğraf, sağda 2×3 kart; bölüm tek ekrana sığacak şekilde sıkı */
#values .wrap { padding-top: clamp(32px, 3.4vw, 56px); padding-bottom: clamp(32px, 3.4vw, 56px); }
#values .two { margin-bottom: clamp(16px, 1.8vw, 28px); align-items: center; }
#values .two h2 { font-size: clamp(28px, 2.8vw, 38px); }
#values .cards { gap: 10px; }
#values .card { padding: 16px 18px; gap: 8px; }
#values .card h3 { font-size: 17px; } #values .card p { font-size: 13px; line-height: 1.45; }
#values .card .foot { padding-top: 10px; }
#values .mini-bars { height: 36px; } #values .hour-bars { height: 34px; margin-bottom: 6px; }
#values .kpi2 div { padding: 7px 9px; } #values .kpi2 b { font-size: 15px; }
#values .meter { margin: 5px 0; } #values .demand { gap: 6px; }
#values .chips span { padding: 4px 7px; }
/* Altı yer: solda fotoğraf, sağda 2×3 kart */
.values-grid { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(420px, 7fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.values-grid .cards { grid-template-columns: repeat(2, 1fr); }
.vstage { position: relative; padding: 0 0 4% 4%; }
.vstage .stage-back { position: absolute; left: 0; right: 10%; top: 8%; bottom: 0; transform: rotate(-2.2deg); border-radius: 26px; z-index: 0; }
.vphoto { position: relative; z-index: 1; height: 100%; min-height: 420px; border-radius: 28px; transform: rotate(1.4deg); background: #DDD9D0 url(counter-photo.jpg) center / cover no-repeat; box-shadow: 0 30px 70px -30px rgba(26,27,58,.45); }
@supports (background-image: url('x.webp')) { .vphoto { background-image: url(counter-photo.webp); } }
/* Fotoğrafın sağ altında tablet: genel merkez görünümü */
.tablet { position: absolute; z-index: 2; right: -5%; bottom: 1%; width: 60%; background: #1B1C2E; border-radius: 14px; padding: 7px; box-shadow: 0 30px 60px -22px rgba(26,27,58,.6); transform: rotate(-3deg); }
.tablet .screen { background: #fff; border-radius: 9px; padding: 10px 11px 11px; }
.scr-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .scr-bar img { height: 11px; width: auto; } .scr-bar b { font-size: 11px; font-weight: 600; } .scr-bar small { margin-left: auto; font-family: var(--mono); font-size: 7.5px; color: var(--muted); letter-spacing: .04em; }
.scr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.scr-kpis div { border: 1px solid var(--line-2); border-top: 2px solid var(--navy); border-radius: 4px; padding: 6px 7px; min-width: 0; }
.scr-kpis small { display: block; font-family: var(--mono); font-size: 6.5px; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-kpis b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em; } .scr-kpis em { display: block; font-style: normal; font-family: var(--mono); font-size: 7.5px; color: var(--green); margin-top: 2px; }
.scr-sub { font-family: var(--mono); font-size: 7px; letter-spacing: .1em; color: var(--muted); margin-bottom: 5px; }
.scr-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-bottom: 8px; } .scr-bars i { flex: 1; background: #E3E3E9; border-radius: 1px; }
.scr-ins { display: flex; align-items: flex-start; gap: 6px; font-size: 9px; line-height: 1.35; color: #3C3E60; border-top: 1px solid var(--line-2); padding-top: 7px; } .scr-ins i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-top: 3px; }
/* Kıyas bölümü: sarı blok üzerine serilmiş altı şube kartı (koyu zeminde beyaz, eğik, üst üste) */
/* Kıyas bölümü: sarı blok üzerine serilmiş altı şube kartı (koyu zeminde beyaz, eğik, üst üste) */
.spread { position: relative; min-height: 520px; }
.spread .stage-back { position: absolute; left: 16%; right: -1.5%; top: 14%; bottom: 6%; transform: rotate(1.6deg); border-radius: 26px; z-index: 0; }
.bcard { position: absolute; width: 55%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px 15px 15px; box-shadow: 0 26px 50px -22px rgba(0,0,0,.55); z-index: 1; }
.bcard.b2 { left: 0; top: 0; transform: rotate(-1.5deg); }
.bcard.b3 { left: 44%; top: 1%; transform: rotate(1.2deg); }
.bcard.b4 { right: -1%; top: 30%; transform: rotate(1.5deg); }
.bcard.b5 { left: 1%; top: 60%; transform: rotate(1.2deg); }
.bcard.b6 { right: 1%; top: 62%; transform: rotate(-1.5deg); }
.bcard.b1 { left: 4%; top: 29%; width: 60%; transform: rotate(-1.2deg); z-index: 2; border: 2px solid var(--amber); box-shadow: 0 40px 80px -28px rgba(0,0,0,.7); }
.bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bh b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; } .bh small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tag-best { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--amber-dark); background: #FBF1DA; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.bk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.bk div { border: 1px solid var(--line-2); border-top: 2px solid var(--navy); border-radius: 6px; padding: 8px 9px; min-width: 0; }
.bk small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.bk em { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk em.up { color: var(--green); }
.bcard .meter { margin: 0; } .bcard.best .meter i { background: var(--amber); } .bcard:not(.best) .meter i { background: #C6C7D2; }
@media (max-width: 860px) { .spread { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .spread .stage-back { display: none; } .spread .bcard { position: relative; inset: auto; width: auto; transform: none; } .spread .bcard.b1 { grid-column: 1 / -1; order: -1; } .bh { flex-wrap: wrap; } }
/* Gizlilik bölümü: açık zemin, solda ilkeler, sağda sarı blok üstünde konuşma → olay kartı */
.privacy .plist > div { border-color: rgba(255,255,255,.18); } .privacy .plist > div:first-child { border-color: var(--amber); }
.privacy .plist b { color: #fff; } .privacy .plist p { color: rgba(255,255,255,.66); }
.priv-split { align-items: center; margin-bottom: clamp(24px, 3vw, 40px); }
.priv-split h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; max-width: 18ch; margin-bottom: 16px; }
.priv-split .lede { margin-bottom: 22px; }
.plist { display: flex; flex-direction: column; gap: 12px; }
.plist > div { border-left: 2px solid var(--line); padding-left: 14px; } .plist > div:first-child { border-color: var(--amber); }
.plist b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 2px; } .plist p { font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 46ch; }
.deploy.light { gap: 14px; } .deploy.light div { background: #fff; border: 1px solid var(--line); padding: 18px 22px; gap: 6px; } .deploy.light small { color: var(--amber-dark); } .deploy.light p { color: var(--ink-3); }
/* Kurulum seçenekleri: mini mimari akışı (cihaz → olaylar → depolama/analiz → panel) */
.arch-cards div.arch { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.arch .node { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 7px 10px; font-size: 11.5px; color: rgba(255,255,255,.88); white-space: nowrap; }
.arch .node.hot { border-color: var(--amber); background: rgba(242,179,61,.1); }
.arch .node.dev i { width: 18px; height: 9px; border-radius: 999px; background: var(--navy); border: 1.5px solid rgba(255,255,255,.55); position: relative; } .arch .node.dev i::after { content: ''; position: absolute; top: 2px; left: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--amber); }
.arch .lnk { position: relative; flex: 0 0 26px; height: 1px; background: rgba(255,255,255,.35); } .arch .lnk::after { content: ''; position: absolute; right: -1px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.arch .lnk:has(em) { flex-basis: 54px; }
.arch .lnk em { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; color: rgba(255,255,255,.55); white-space: nowrap; }
.arch .zone { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed rgba(255,255,255,.35); border-radius: 10px; padding: 14px 10px 8px; }
.arch .zone > small { position: absolute; top: -7px; left: 10px; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--amber); background: var(--navy-2); padding: 0 5px; }
.arch .zone.yours { border-color: var(--amber); } .arch .zone.yours > small { color: var(--amber); }
.arch-cards > div { padding: 18px 22px 18px; gap: 6px; } .arch-cards > div > b { font-size: 17px; } .arch-cards > div > p { font-size: 13.5px; }
.privacy .wrap { padding-top: clamp(40px, 4.2vw, 60px); padding-bottom: clamp(40px, 4.2vw, 60px); } .priv-split { margin-bottom: clamp(18px, 2.2vw, 28px); }
@media (max-width: 1024px) { .arch .lnk { flex-basis: 16px; } .arch .node { font-size: 11px; padding: 6px 8px; } }
.pshield { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.pshield svg { filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
@media (max-width: 860px) { .pshield { min-height: 0; padding: 12px 0 4px; } .pshield svg { width: 170px; height: 187px; } }
/* Nasıl çalışır sayfası: ana sayfa dili (fotoğraf bloğu + sarı zemin + yüzen kartlar) */
.how-stage { aspect-ratio: 4 / 3; min-height: 420px; }
.how-stage .stage-back { left: 12%; right: -2%; top: 8%; bottom: -3%; transform: rotate(1.8deg); }
.how-photo { inset: 0 0 0 4%; background-image: url(how-photo.jpg); }
@supports (background-image: url('x.webp')) { .how-photo { background-image: url(how-photo.webp); } }
.how-stage .fc.event { right: -3%; top: 5%; width: 46%; }
.fc.devcard { left: -4%; top: 12%; width: 40%; padding: 11px 13px; transform: rotate(-1.5deg); }
.fc.devcard small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.fc.devcard b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.fc.devcard .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); flex: 0 0 auto; }
.fc.devcard span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.how-stage .fc.report.small { right: -2%; bottom: 4%; width: 38%; transform: rotate(2deg); }
.how-stage .fc.report.small .head b { font-size: 12.5px; } .how-stage .fc.report.small hr { margin: 6px 0 8px; }
.how-stage .badge { left: 2%; bottom: 2%; }
.steps-cards .card { gap: 12px; } .steps-cards .num { margin-bottom: 0; }
.steps-cards .wave.big { display: block; width: 100%; height: 30px; margin-bottom: 8px; }
.steps-cards .chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
.mockstage { position: relative; padding: 0 5% 5% 0; }
.mockstage .stage-back { position: absolute; left: 10%; right: 0; top: 10%; bottom: 0; transform: rotate(1.8deg); border-radius: 20px; z-index: 0; }
.mockstage .mock { position: relative; z-index: 1; transform: rotate(-1.2deg); }
.rowalt:nth-child(odd) .mockstage .stage-back { left: 0; right: 10%; transform: rotate(-1.8deg); }
.rowalt:nth-child(odd) .mockstage { padding: 0 0 5% 5%; }
.rowalt:nth-child(odd) .mockstage .mock { transform: rotate(1.2deg); }
@media (max-width: 860px) {
  .how-stage { aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .how-stage .stage-back { display: none; }
  .how-photo { position: relative; inset: auto; grid-column: 1 / -1; height: 220px; border-radius: 18px; transform: none; }
  .how-stage .fc.event, .how-stage .fc.devcard, .how-stage .fc.report.small, .how-stage .badge { position: relative; inset: auto; width: auto; transform: none; margin: 0; }
  .how-stage .badge { grid-column: 1 / -1; justify-content: center; }
  .mockstage, .rowalt:nth-child(odd) .mockstage { padding: 0; } .mockstage .stage-back { display: none; } .mockstage .mock, .rowalt:nth-child(odd) .mockstage .mock { transform: none; }
}
/* Raporlar sayfası: giriş kartına yüzen parçalar, koyu bölümde sarı zemin */
.report-stage.hero-rs { padding: 24px 30px 120px 0; }
.report-stage.hero-rs .stage-back { left: 14%; right: -2%; top: 8%; bottom: 8%; }
.fc.selcard { left: -10%; bottom: -18%; width: 40%; padding: 11px 13px; transform: rotate(-2deg); z-index: 3; }
.fc.selcard small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; }
.fc.selcard div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 3px 0; color: var(--ink-2); }
.fc.selcard i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.fc.selcard i.on { background: var(--amber); border-color: var(--amber-dark); }
.report-stage.hero-rs .badge { left: auto; right: 0; bottom: -14%; transform: rotate(2deg); z-index: 3; }
.report-stage.on-dark .stage-back { position: absolute; left: 12%; right: -4%; top: 8%; bottom: -5%; transform: rotate(2deg); border-radius: 20px; z-index: 0; }
.report-stage.on-dark .report-card.big { z-index: 1; }
.cards .card .foot .funnel span { font-size: 10px; padding: 6px 0; }
.card .spark { display: block; width: 100%; height: 30px; margin-bottom: 8px; }
#triggers .cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { #triggers .cards.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #triggers .cards.three { grid-template-columns: 1fr; } }
/* Uyarılar sayfası */
.alert-stage { position: relative; max-width: 480px; margin: 0 auto; padding: 4% 6% 8% 0; }
.alert-stage .stage-back { position: absolute; left: 12%; right: 0; top: 12%; bottom: 0; transform: rotate(2deg); border-radius: 22px; z-index: 0; }
.alert-stage .alert-stack { position: relative; z-index: 1; }
.alert-stage .alert-card { transform: rotate(-1.5deg); } .alert-stage .alert-card.amber { transform: rotate(1.5deg) translateX(14px); } .alert-stage .alert-card:last-child { transform: rotate(-1deg) translateX(-8px); }
.devline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); } .devline .dot { width: 9px; height: 9px; border-radius: 50%; background: #C8433C; box-shadow: 0 0 0 3px rgba(200,67,60,.15); flex: 0 0 auto; }
.rule-stage { position: relative; max-width: 460px; margin: 0 auto; padding: 0 5% 6% 0; }
.rule-stage .stage-back { position: absolute; left: 12%; right: 0; top: 10%; bottom: 0; transform: rotate(2deg); border-radius: 20px; z-index: 0; }
.rule-card { position: relative; z-index: 1; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; box-shadow: 0 30px 60px -26px rgba(0,0,0,.7); transform: rotate(-1.5deg); }
.rule-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .rule-card .head b { font-size: 15px; } .rule-card .head small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--amber-dark); }
.rule-card .rule-rows div { border-top: 1px solid var(--line-2); } .rule-card .rule-rows span { color: var(--muted); } .rule-card .rule-rows b { color: var(--ink); }
@media (max-width: 860px) {
  .report-stage.hero-rs { padding: 0 0 12px; } .report-stage.hero-rs .stage-back { display: none; }
  .fc.selcard, .report-stage.hero-rs .badge { position: relative; inset: auto; width: auto; transform: none; margin-top: 10px; display: block; }
  .report-stage.hero-rs .badge { display: inline-flex; }
  .alert-stage { padding: 0; } .alert-stage .stage-back { display: none; } .alert-stage .alert-card, .alert-stage .alert-card.amber, .alert-stage .alert-card:last-child { transform: none; }
  .rule-stage { padding: 0; } .rule-stage .stage-back { display: none; } .rule-card { transform: none; }
}
/* Keşfet kartları */
.cards.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.explore-card { color: var(--ink); } .explore-card:hover { border-color: var(--navy); color: var(--ink); }
.explore-card .more { margin-top: auto; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid #C9CAD6; align-self: flex-start; padding-bottom: 2px; }
.cards .num { margin-bottom: -4px; }
@media (max-width: 1024px) { .grid-lines.cols3 { grid-template-columns: repeat(2, 1fr); } .values-grid { grid-template-columns: 1fr; } .vstage { max-width: 640px; margin: 0 auto; width: 100%; } .vphoto { min-height: 0; height: 320px; } .tablet { width: 64%; right: 0; bottom: -2%; } .hero-grid.plain { grid-template-columns: 1fr; } .page-visual { max-width: 600px; margin: 8px auto 0; } }
@media (max-width: 860px) {
  .showcase.small { padding-bottom: 0; } .showcase.small .app { margin-right: 0; }
  .rowalt:nth-child(odd) .txt { order: 0; }
  .mock-rates div { grid-template-columns: 92px 40px 1fr; }
  .alert-card.amber, .alert-card:last-child { transform: none; }
  .report-stage { padding: 12px 12px 12px 0; }
  .grid-lines.cols3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .values-grid .cards { grid-template-columns: 1fr; } .vstage { padding: 0; } .vstage .stage-back { display: none; } .tablet { display: none; } .vphoto { transform: none; height: 240px; border-radius: 18px; } }