/* Ana sayfa: "Hesap anında iki yaklaşım" karşılaştırma senaryosu (yaris.js). Ortak jetonlar style.css'ten gelir. */
[hidden] { display: none !important; }
.giris-alt { max-width: 62ch; margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--murekkep-2); }
.hiz { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 700 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; color: var(--soluk); }
.hiz button { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; padding: 7px 9px; background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--oluk-koyu); border-radius: 4px; cursor: pointer; }
.hiz button[aria-pressed="true"] { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); }
@media (max-width: 760px) { .hiz { margin-left: 0; } }
/* ---------- giriş: "Hesap anında iki yaklaşım" karşılaştırma senaryosu ---------- */
.yaris { margin-top: 28px; }
.yr-kontrol { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.yr-kontrol .hiz { margin-left: 0; }
.yr-saat { font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; color: var(--beyaz); background: var(--murekkep); padding: 7px 10px; border-radius: 4px; margin-left: auto; font-variant-numeric: tabular-nums; }
.yr-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.yr-kutu { background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 8px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); min-width: 0; }
.yr-kutu.payon { border-color: var(--nane-koyu); }
.yr-kutu.bitti { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nane) 28%, transparent); }
.yr-bas { display: flex; flex-direction: column; gap: 2px; }
.yr-bas b { font: 800 20px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--murekkep); }
.yr-kutu.payon .yr-bas b { color: var(--nane-koyu); }
.yr-bas span { font-size: 14px; color: var(--murekkep-2); line-height: 1.35; }
.yr-sahne { border-radius: 6px; overflow: hidden; }
.yr-svg { width: 100%; height: auto; display: block; }
.yr-zemin { fill: var(--zemin); stroke: var(--oluk-koyu); stroke-width: 1.5; }
.yr-duvar { fill: var(--kece); stroke: var(--murekkep); stroke-width: 1.5; }
.yr-et { font: 800 13px "Barlow Condensed", sans-serif; letter-spacing: .12em; fill: var(--murekkep); }
.yr-et.s { font-size: 10px; fill: var(--soluk); }
.yr-pc { fill: var(--murekkep-2); }
.yr-sandalye { fill: var(--oluk); stroke: var(--oluk-koyu); stroke-width: 1; }
.yr-masa { fill: var(--beyaz); stroke: var(--murekkep); stroke-width: 1.5; }
.yr-cihaz-g { fill: var(--murekkep); }
.yr-ek { fill: var(--oluk); }
.yr-ek.hesap { fill: var(--kehribar); }
.yr-ek.odendi { fill: var(--nane); }
.yr-mis { font: 800 11px "Barlow Condensed", sans-serif; fill: var(--beyaz); text-anchor: middle; dominant-baseline: central; }
.yr-iz { fill: none; stroke: var(--kehribar-koyu); stroke-width: 2; stroke-dasharray: 4 4; stroke-linejoin: round; opacity: .75; }
.yr-damga rect { fill: var(--beyaz); stroke: var(--nane-koyu); stroke-width: 2.5; }
.yr-damga text { font: 800 16px "Barlow Condensed", sans-serif; letter-spacing: .14em; fill: var(--nane-koyu); text-anchor: middle; dominant-baseline: central; }
.yr-damga { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.5) rotate(-6deg); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.yr-damga.goster { opacity: 1; transform: scale(1) rotate(-6deg); }
.yr-garson circle { fill: var(--murekkep); stroke: var(--beyaz); stroke-width: 2; }
.yr-garson text { font: 800 13px "Barlow Condensed", sans-serif; fill: var(--beyaz); text-anchor: middle; dominant-baseline: central; }
.yr-balon rect { fill: var(--beyaz); stroke: var(--murekkep); stroke-width: 1.5; }
.yr-balon text { font: 700 12px "Barlow", sans-serif; fill: var(--murekkep); dominant-baseline: central; }
.yr-balon { transition: opacity .2s linear; }
.yr-durum { margin: 0; min-height: 2.6em; font-size: 15px; line-height: 1.3; color: var(--murekkep); }
.yr-say { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--oluk-koyu); padding-top: 10px; }
.yr-say span { display: block; font: 700 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.yr-say b { display: block; margin-top: 3px; font: 800 24px/1 "Barlow Condensed", sans-serif; color: var(--murekkep); font-variant-numeric: tabular-nums; }
.yr-kutu.payon .yr-say b { color: var(--nane-koyu); }
.yr-sonuc { margin-top: 18px; background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 8px; padding: clamp(14px, 2vw, 24px); }
.yr-sonuc h3 { margin: 0 0 10px; font: 800 24px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.yr-lej { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font: 700 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.yr-lej span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.yr-lej .k::before { background: var(--murekkep-2); } .yr-lej .p::before { background: var(--nane); }
.yr-sat { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 4px 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--oluk); }
.yr-sat .ad { grid-row: span 2; font-size: 15px; color: var(--murekkep-2); }
.yr-cubuk { position: relative; height: 22px; background: var(--zemin); border-radius: 3px; display: flex; align-items: center; }
.yr-cubuk i { display: block; height: 100%; border-radius: 3px; min-width: 3px; transition: width .6s var(--ease); }
.yr-cubuk.k i { background: var(--murekkep-2); } .yr-cubuk.p i { background: var(--nane); }
.yr-cubuk b { position: absolute; left: 8px; font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; color: var(--murekkep); mix-blend-mode: normal; background: color-mix(in srgb, var(--beyaz) 82%, transparent); padding: 2px 5px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.yr-gunluk { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--oluk-koyu); }
.yr-gunluk label { font: 700 14px/1.3 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.yr-gunluk input[type=range] { width: 100%; margin: 10px 0 6px; accent-color: var(--nane-koyu); }
.yr-gunluk p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--murekkep-2); max-width: 70ch; }
.yr-sonuc .kartlar { margin-top: 16px; }
.yr-not { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--soluk); max-width: 90ch; }
@media (max-width: 760px) {
  .yr-ikili { grid-template-columns: 1fr; }
  .yr-saat { margin-left: 0; }
  .yr-sat { grid-template-columns: 1fr; }
  .yr-sat .ad { grid-row: auto; }
  .yr-say b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .yr-damga, .yr-cubuk i { transition: none; } }