/* Hallmark · genre: modern-minimal · page: deneme · design-system: design.md · designed-as-app
 *
 * Deneme sayfası: solda telefon (kurgusal "akış" uygulaması, içinde MİRA),
 * sağda canlı panel. Belirteçler ve yazı yüzleri design.md'den; mira ölçeği
 * sistemin kimlik motifi.
 *
 * Telefon çerçevesi BİLİNÇLİ İSTİSNA (design.md, hallmark kapı 47): ürün
 * sahibi deneme bölümünün "gerçek telefon gibi" olmasını istedi. Masaüstünde
 * sade, gerçek oranlı bir cihaz; telefonda çerçeve yok, uygulama tam ekran.
 */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-800-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-mono-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --renk-kagit: oklch(97.6% 0.005 255); --renk-kagit-2: oklch(99.3% 0.003 255);
  --renk-murekkep: oklch(23% 0.035 262); --renk-murekkep-2: oklch(41% 0.03 262); --renk-soluk: oklch(50% 0.025 262);
  --renk-cizgi: oklch(89.5% 0.01 262); --renk-kutu: oklch(95.2% 0.007 262);
  --renk-vurgu: oklch(52% 0.13 155); --renk-vurgu-ustu: oklch(99% 0.01 155);
  --renk-sessiz: oklch(64% 0.15 155); --renk-afis: oklch(76% 0.16 70); --renk-kart: oklch(60% 0.2 27);
  --renk-sessiz-yazi: oklch(45% 0.12 155); --renk-afis-yazi: oklch(50% 0.12 60); --renk-kart-yazi: oklch(48% 0.17 27);
  --renk-odak: oklch(55% 0.17 255);
  --renk-cihaz: oklch(18% 0.01 262); --renk-cihaz-kenar: oklch(34% 0.01 262);
  --renk-uygulama: #ffffff; --renk-uygulama-yazi: #15171c;
  --yazi-govde: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --yazi-veri: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --bosluk-3xs: 4px; --bosluk-2xs: 8px; --bosluk-xs: 12px; --bosluk-sm: 16px; --bosluk-md: 24px;
  --bosluk-lg: 32px; --bosluk-xl: 48px; --bosluk-2xl: 72px;
  --kose-kart: 16px; --kose-denetim: 12px; --kose-cip: 999px;
  --yumusak: cubic-bezier(0.16, 1, 0.3, 1); --sure-kisa: 160ms; --sure-orta: 320ms;
  --golge-yuzen: 0 24px 60px -18px oklch(20% 0.04 262 / .45);
  --cubuk-yukseklik: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --renk-kagit: oklch(16.5% 0.018 262); --renk-kagit-2: oklch(21% 0.02 262);
  --renk-murekkep: oklch(95.5% 0.008 262); --renk-murekkep-2: oklch(82% 0.015 262); --renk-soluk: oklch(71% 0.018 262);
  --renk-cizgi: oklch(31% 0.02 262); --renk-kutu: oklch(24.5% 0.02 262);
  --renk-vurgu: oklch(74% 0.15 155); --renk-vurgu-ustu: oklch(18% 0.03 155);
  --renk-sessiz: oklch(72% 0.15 155); --renk-afis: oklch(80% 0.15 70); --renk-kart: oklch(68% 0.18 27);
  --renk-sessiz-yazi: oklch(78% 0.13 155); --renk-afis-yazi: oklch(83% 0.13 75); --renk-kart-yazi: oklch(76% 0.14 27);
  --renk-odak: oklch(75% 0.13 255);
  --renk-cihaz: oklch(9% 0.005 262); --renk-cihaz-kenar: oklch(30% 0.01 262);
  --renk-uygulama: #0e0f12; --renk-uygulama-yazi: #eef0f4;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --renk-kagit: oklch(16.5% 0.018 262); --renk-kagit-2: oklch(21% 0.02 262);
  --renk-murekkep: oklch(95.5% 0.008 262); --renk-murekkep-2: oklch(82% 0.015 262); --renk-soluk: oklch(71% 0.018 262);
  --renk-cizgi: oklch(31% 0.02 262); --renk-kutu: oklch(24.5% 0.02 262);
  --renk-vurgu: oklch(74% 0.15 155); --renk-vurgu-ustu: oklch(18% 0.03 155);
  --renk-sessiz: oklch(72% 0.15 155); --renk-afis: oklch(80% 0.15 70); --renk-kart: oklch(68% 0.18 27);
  --renk-sessiz-yazi: oklch(78% 0.13 155); --renk-afis-yazi: oklch(83% 0.13 75); --renk-kart-yazi: oklch(76% 0.14 27);
  --renk-odak: oklch(75% 0.13 255);
  --renk-cihaz: oklch(9% 0.005 262); --renk-cihaz-kenar: oklch(30% 0.01 262);
  --renk-uygulama: #0e0f12; --renk-uygulama-yazi: #eef0f4;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--renk-kagit); color: var(--renk-murekkep); font: 1rem/1.55 var(--yazi-govde); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 2px; border-radius: 6px; }
svg.i { width: 1.25em; height: 1.25em; fill: currentColor; display: block; flex: none; }
[hidden] { display: none !important; }

/* ── Üst çubuk */
.cubuk { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--bosluk-xs);
  min-height: var(--cubuk-yukseklik); padding: 0 var(--bosluk-sm); background: var(--renk-kagit);
  border-bottom: 1px solid var(--renk-cizgi); }
.marka { display: inline-flex; align-items: center; gap: var(--bosluk-2xs); min-height: 44px; font-weight: 800;
  font-size: .9375rem; text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.marka::before { content: ""; width: 18px; height: 18px; border-radius: 6px;
  background: radial-gradient(circle, var(--renk-sessiz) 0 3.5px, transparent 4px), oklch(23% 0.035 262); }
.cubuk-baslik { font-size: .9375rem; color: var(--renk-soluk); margin-right: auto; }
.cubuk-dugme { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--bosluk-xs); white-space: nowrap;
  border: 1px solid var(--renk-cizgi); border-radius: var(--kose-cip); background: var(--renk-kagit-2); cursor: pointer;
  font-weight: 700; font-size: .875rem; }
.cubuk-dugme:hover { border-color: var(--renk-murekkep-2); }
.tema { width: 44px; padding: 0; }
.canli-cip { display: none; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--yazi-veri); font-size: .8125rem;
  font-variant-numeric: tabular-nums; color: var(--renk-murekkep-2); }
.panel-ac { display: none; }

/* ── Sahne: telefon + panel */
.sahne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bosluk-lg);
  width: min(100% - 32px, 1320px); margin: 0 auto; padding-block: var(--bosluk-md) var(--bosluk-xl); }
@media (min-width: 900px) {
  .sahne { grid-template-columns: auto minmax(0, 1fr); gap: var(--bosluk-xl); align-items: start; padding-top: var(--bosluk-sm); }
  .telefon { position: sticky; top: calc(var(--cubuk-yukseklik) + var(--bosluk-sm)); }
}

/* ── Cihaz (masaüstü). İçerik gerçek bir telefonun genişliğinde yerleşir:
   393 × 852 mantıksal piksel ekran (bugünkü 6,1 inç telefonlar), 11 px çerçeve.
   Cihaz BÜTÜN OLARAK ölçeklenir (panel.js, --olcek): ekran yüksekliğine sığar,
   büyük ekranda büyür. Eskiden yükseklik 560-820 px arasında sıkıştırılıyor,
   genişlik ondan türüyordu; ölçekli dizüstü ekranında içerik ~240 px'e inip
   küçük ve sıkışık görünüyordu (kullanıcı geri bildirimi, 26 Eylül). */
.cihaz-kap { width: calc(415px * var(--olcek, 1)); height: calc(874px * var(--olcek, 1)); margin-inline: auto; }
.cihaz { position: relative; width: 415px; height: 874px; transform: scale(var(--olcek, 1)); transform-origin: 0 0;
  padding: 11px; border-radius: 60px; background: var(--renk-cihaz);
  box-shadow: inset 0 0 0 1.5px var(--renk-cihaz-kenar), 0 0 0 1px oklch(0% 0 0 / .35), var(--golge-yuzen); }
/* Yan tuşlar: ses (sol), güç (sağ). */
.cihaz::before, .cihaz::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--renk-cihaz-kenar); }
.cihaz::before { left: -3px; top: 21%; height: 11%; box-shadow: 0 calc(-1 * 9%) 0 var(--renk-cihaz-kenar); }
.cihaz::after { right: -3px; top: 27%; height: 14%; }
.ekran { position: relative; height: 100%; border-radius: 50px; overflow: hidden; background: var(--renk-uygulama);
  display: flex; flex-direction: column; isolation: isolate; }
.durum-cubugu { flex: none; height: 50px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 26px 0 30px; color: var(--renk-uygulama-yazi); background: var(--renk-uygulama); font: 600 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; }
.durum-cubugu.kisa { background: #000; color: #fff; }
.ada { width: 104px; height: 30px; border-radius: 16px; background: #000; }
.simgeler { display: flex; justify-content: flex-end; gap: 5px; }
.simgeler svg.i { width: 16px; height: 16px; }
.simgeler svg.pil { width: 22px; }
.ekran iframe { flex: 1; width: 100%; border: 0; display: block; background: var(--renk-uygulama); }
.ev-cubugu { position: absolute; left: 50%; bottom: 7px; width: 132px; height: 5px; margin-left: -66px; border-radius: 3px;
  background: var(--renk-uygulama-yazi); opacity: .55; pointer-events: none; z-index: 2; }

.durum { display: flex; align-items: center; justify-content: center; gap: var(--bosluk-2xs); margin: var(--bosluk-xs) 0 0;
  font-size: .9375rem; color: var(--renk-murekkep-2); }
.nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--renk-soluk); flex: none; }
.nokta.calisiyor { background: var(--renk-sessiz); }
@media (prefers-reduced-motion: no-preference) {
  .nokta.yukleniyor { animation: nabiz 1s ease-in-out infinite alternate; }
  @keyframes nabiz { from { opacity: .3 } to { opacity: 1 } }
}

/* ── Panel */
.panel { min-width: 0; }
.panel-tutamak { display: none; }
.ust-etiket { margin: 0 0 var(--bosluk-3xs); font-size: .875rem; font-weight: 700;
  color: var(--renk-sessiz-yazi); }
h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
h1:focus { outline: none; }
.giris { margin: var(--bosluk-xs) 0 var(--bosluk-md); max-width: 62ch; color: var(--renk-murekkep-2); font-size: 1.0625rem; }
.giris b { color: var(--renk-murekkep); }
.izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bosluk-sm); }
@media (min-width: 1180px) {
  .izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .olay-kart { grid-row: span 2; }
}
.kart { background: var(--renk-kagit-2); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-kart); padding: var(--bosluk-sm); min-width: 0; }
.kart h2 { margin: 0; font-size: .875rem; font-weight: 700; color: var(--renk-murekkep-2); }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-xs); margin-bottom: var(--bosluk-2xs); }
.kucuk { font-size: .8125rem; color: var(--renk-soluk); }
.veri, .veri-satir { font-family: var(--yazi-veri); font-variant-numeric: tabular-nums; }

.kademe { font-size: .8125rem; font-weight: 700; padding: 3px 10px; border-radius: var(--kose-cip); background: var(--renk-kutu); color: var(--renk-soluk); }
.kademe.dusuk { background: color-mix(in oklch, var(--renk-sessiz) 16%, transparent); color: var(--renk-sessiz-yazi); }
.kademe.orta { background: color-mix(in oklch, var(--renk-afis) 20%, transparent); color: var(--renk-afis-yazi); }
.kademe.yuksek { background: color-mix(in oklch, var(--renk-kart) 16%, transparent); color: var(--renk-kart-yazi); }
.puan { margin: 0; font-family: var(--yazi-veri); font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.puan small { font-size: 1rem; color: var(--renk-soluk); font-weight: 500; margin-left: 4px; }

/* Mira ölçeği: dereceli çubuk. 5'te kısa, 10'da uzun çentik; bantlar eşik. */
.mira { position: relative; margin: var(--bosluk-sm) 0 var(--bosluk-md); }
.mira-cubuk { display: flex; gap: 2px; height: 10px; }
.mira-cubuk b { display: block; height: 100%; border-radius: 2px; }
.mira-cubuk .sessiz { flex: 35; background: var(--renk-sessiz); }
.mira-cubuk .afis { flex: 30; background: var(--renk-afis); }
.mira-cubuk .kart-b { flex: 36; background: var(--renk-kart); }
.mira-centik { height: 9px; margin-top: 3px;
  background:
    repeating-linear-gradient(90deg, var(--renk-murekkep-2) 0 1px, transparent 1px calc(10% - 0px)) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--renk-soluk) 0 1px, transparent 1px 5%) 0 0 / 100% 5px no-repeat; }
.mira-imlec { position: absolute; top: -5px; left: 0; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px;
  background: var(--renk-murekkep); box-shadow: 0 0 0 2px var(--renk-kagit-2); opacity: 0; }
.mira-imlec.gorunur { opacity: 1; }
/* design.md hareket kilidi: yalnız transform ve opacity. İmleç yerine anında
   oturur, saydamlıkla belirir. */
@media (prefers-reduced-motion: no-preference) { .mira-imlec { transition: opacity var(--sure-kisa); } }
.mira-etiket { position: relative; height: 16px; margin-top: 4px; font-family: var(--yazi-veri); font-size: .75rem; color: var(--renk-soluk); }
.mira-etiket span { position: absolute; transform: translateX(-50%); }
.mira-etiket span:first-child { transform: none; }
.mira-etiket span:last-child { transform: translateX(-100%); }

.bilesenler { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-2xs); }
.bilesenler li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr) 3em; gap: var(--bosluk-xs); align-items: center; font-size: .875rem; }
.bilesenler em { font-style: normal; font-family: var(--yazi-veri); font-size: .75rem; color: var(--renk-soluk); }
.bilesenler i { display: block; height: 6px; border-radius: 3px; background: var(--renk-kutu); overflow: hidden; }
.bilesenler b { display: block; height: 100%; width: 100%; background: var(--renk-murekkep); border-radius: 3px;
  transform: scaleX(0); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) { .bilesenler b { transition: transform var(--sure-orta) var(--yumusak); } }
.bilesenler .veri { text-align: right; font-size: .8125rem; }
.kanit { list-style: none; margin: var(--bosluk-xs) 0 0; padding: 0; display: grid; gap: 6px; }
.kanit li { font-size: .875rem; color: var(--renk-murekkep-2); background: var(--renk-kutu); border-radius: 10px; padding: 7px 10px; }

/* Olay akışı: MİRA'nın her kararı, zamanı ve ne yaptığıyla. */
.olaylar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-2xs); max-height: 560px; overflow: auto; }
.olaylar li.bos { font-size: .875rem; color: var(--renk-soluk); padding: var(--bosluk-2xs) 0; }
.olay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--bosluk-xs); padding: 10px 12px;
  border-radius: 12px; background: var(--renk-kutu); }
.olay .zaman { grid-row: span 3; font-family: var(--yazi-veri); font-size: .75rem; color: var(--renk-soluk); padding-top: 2px; font-variant-numeric: tabular-nums; }
.olay .baslik { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.olay .etiket { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: var(--kose-cip); }
.olay .etiket.dusuk { background: color-mix(in oklch, var(--renk-sessiz) 16%, transparent); color: var(--renk-sessiz-yazi); }
.olay .etiket.orta { background: color-mix(in oklch, var(--renk-afis) 20%, transparent); color: var(--renk-afis-yazi); }
.olay .etiket.yuksek { background: color-mix(in oklch, var(--renk-kart) 16%, transparent); color: var(--renk-kart-yazi); }
.olay .ayrinti { font-size: .8125rem; color: var(--renk-murekkep-2); overflow-wrap: anywhere; }
.olay .etki { font-size: .8125rem; color: var(--renk-sessiz-yazi); font-weight: 700; }
.olay .olay-karar { grid-column: 2; margin: 0; font-size: .8125rem; color: var(--renk-murekkep-2); }
@media (prefers-reduced-motion: no-preference) {
  .olay.yeni { animation: gir var(--sure-orta) var(--yumusak); }
  @keyframes gir { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
}

/* Denenecekler: MİRA'nın çıktısıyla işaretlenir. */
.senaryo { list-style: none; margin: 0 0 var(--bosluk-2xs); padding: 0; display: grid; gap: 2px; }
.senaryo li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--bosluk-2xs); align-items: start; padding: 6px 0; font-size: .9375rem; }
.senaryo li svg.i { width: 20px; height: 20px; margin-top: 1px; color: var(--renk-soluk); }
.senaryo li.tamam svg.i { color: var(--renk-sessiz); }
.senaryo li small { display: block; color: var(--renk-soluk); font-size: .8125rem; line-height: 1.35; }

.ikili { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bosluk-sm) var(--bosluk-md); }
.ikili .genis { grid-column: 1 / -1; }
.ikili h2 { margin-bottom: 4px; }
.veri-satir { margin: 0; font-size: .9375rem; }
#dis { font-size: 1.125rem; color: var(--renk-sessiz-yazi); }
#dis.uyari { color: var(--renk-kart-yazi); }
.cipler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cipler li { font-size: .8125rem; font-weight: 700; padding: 4px 10px; border-radius: var(--kose-cip); background: var(--renk-murekkep); color: var(--renk-kagit-2); }
.cipler li.bos { background: none; color: var(--renk-soluk); font-weight: 400; padding-left: 0; }

.kontroller { display: flex; flex-wrap: wrap; gap: var(--bosluk-2xs); margin: var(--bosluk-md) 0 var(--bosluk-2xs); }
.kontroller button { min-height: 44px; padding: 0 var(--bosluk-sm); border-radius: var(--kose-denetim); cursor: pointer; font-weight: 700;
  font-size: .9375rem; background: var(--renk-kagit-2); border: 1px solid var(--renk-murekkep-2); white-space: nowrap; }
.kontroller button:hover { background: var(--renk-kutu); }
.kontroller button[aria-pressed="true"] { background: var(--renk-murekkep); color: var(--renk-kagit-2); border-color: var(--renk-murekkep); }
.acilir { margin: var(--bosluk-sm) 0 0; font-size: .9375rem; color: var(--renk-murekkep-2); max-width: 70ch; }
.acilir summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--renk-murekkep); font-weight: 700; }
.acilir ul { margin: var(--bosluk-2xs) 0 0; padding-left: 20px; }
.acilir li { margin: 4px 0; }
.atif { margin: var(--bosluk-md) 0 0; font-size: .8125rem; color: var(--renk-soluk); line-height: 1.6; max-width: 80ch; }

/* ── Telefon genişliği: çerçeve yok, uygulama tam ekran; panel alttan açılır.
   Ziyaretçinin kendi telefonu zaten telefon (design.md). */
@media (max-width: 899px) {
  body { height: 100dvh; overflow: hidden; }
  .cubuk { position: fixed; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .cubuk-baslik { display: none; }
  .canli-cip { display: inline-flex; margin-left: auto; }
  .panel-ac { display: inline-grid; }
  .sahne { position: fixed; inset: calc(var(--cubuk-yukseklik) + env(safe-area-inset-top, 0px)) 0 0; width: auto; margin: 0; padding: 0; display: block; }
  .telefon, .cihaz-kap, .cihaz, .ekran { height: 100%; }
  .cihaz-kap { width: auto; }
  .cihaz { width: auto; transform: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .cihaz::before, .cihaz::after, .durum-cubugu, .ev-cubugu { display: none; }
  .ekran { border-radius: 0; }
  .durum { display: none; }
  .perde { position: fixed; inset: 0; z-index: 40; background: oklch(10% 0.02 262 / .45); }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 86dvh; overflow: auto; overscroll-behavior: contain;
    background: var(--renk-kagit); border-radius: 20px 20px 0 0; padding: 0 var(--bosluk-sm) calc(var(--bosluk-lg) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--golge-yuzen); transform: translateY(105%); visibility: hidden; }
  .panel.acik { transform: none; visibility: visible; }
  @media (prefers-reduced-motion: no-preference) { .panel { transition: transform var(--sure-orta) var(--yumusak), visibility 0s linear var(--sure-orta); }
    .panel.acik { transition: transform var(--sure-orta) var(--yumusak); } }
  .panel-tutamak { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; height: 44px;
    margin: 0 calc(-1 * var(--bosluk-sm)); background: var(--renk-kagit); }
  .panel-tutamak span { width: 40px; height: 5px; border-radius: 3px; background: var(--renk-cizgi); }
  .panel-kapat { position: absolute; right: 6px; top: 0; width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; background: none; cursor: pointer; color: var(--renk-murekkep-2); }
  h1 { font-size: 1.75rem; }
  .olaylar { max-height: none; }
}