/* ICAO Level — icao.com.tr landing. "Şafak uçuşu": the app's dawn sky, chart texture, clouds and grain; runway, approach
 * lights and a plane for motion. Values come from brand/tokens.json and apps/web/src/ui/atmosfer.css. Two themes: the
 * light one (bare :root, the brand's own) and "the same flight at night" (dark tokens below). Components only read
 * tokens; the dark tokens apply when the system asks for dark and the visitor has not chosen light, or when the visitor
 * chose dark (data-theme on <html>, set by assets/js/tema.js before the first paint). Every continuous animation stops
 * under prefers-reduced-motion and while off-screen.
 * Page layout (section order and arrangement) follows the atpl.com.tr landing: hero with stats and a strip under it, a big
 * product screen, a bento of features, four steps, the exam's parts, prices, FAQ, the closing CTA, a four-column footer. */

:root {
  color-scheme: light;
  --sky: #D9E8FF; --sky-deep: #CFE3FF; --ground: #F3F6FB; --surface: #FFFFFF; --surface-muted: #EEF3FA;
  --line: #DCE5F1; --line-strong: #C9D6EA; --track: #E3EAF4;
  --ink: #0A1A33; --ink-muted: #435675; --ink-soft: #2A3C5A; --blue: #1B4DDB; --blue-soft: #E8EEFC;
  --amber: #FFC21A; --amber-soft: #FFF4E0; --amber-text: #8A5A00; --amber-deep: #5C3D00; --amber-line: #B07800;
  --asphalt: #1E2A3D; --night-line: #24344D; --on-ink-muted: #C9D6EA; --route-dash: #9DB3D3; --light-off: #D5DEEA;
  --success: #0F7B4F; --success-soft: #E3F6EC;

  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Card material, lit from above: a faint top-to-bottom tint, a 1px inner highlight on top and a slightly darker inner
   * edge at the bottom, an ink-tinted hairline, then a tight contact shadow and a long soft navy ambient one. */
  --kart-zemin: linear-gradient(180deg, #FFFFFF 0%, #FEFEFF 40%, #F8FAFD 100%);
  --kart-golge: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 26, 51, 0.035), 0 0 0 1px var(--kil), 0 1px 1px rgba(10, 26, 51, 0.05),
    0 3px 6px -3px rgba(10, 26, 51, 0.09), 0 24px 44px -28px rgba(16, 42, 94, 0.34);
  --kart-golge-yukari: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 26, 51, 0.035), 0 0 0 1px var(--kil-guclu), 0 1px 1px rgba(10, 26, 51, 0.05),
    0 6px 12px -6px rgba(10, 26, 51, 0.12), 0 34px 60px -30px rgba(16, 42, 94, 0.44);
  /* Flatter role for long lists (FAQ): the same hairline and contact, a shorter ambient. */
  --kart-golge-duz: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--kil), 0 1px 1px rgba(10, 26, 51, 0.05), 0 12px 24px -20px rgba(16, 42, 94, 0.3);
  /* Pricing at dusk: a warmer, deeper ambient. */
  --kart-golge-fiyat: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 26, 51, 0.04), 0 0 0 1px var(--kil), 0 1px 1px rgba(10, 26, 51, 0.06),
    0 4px 8px -4px rgba(10, 26, 51, 0.1), 0 30px 54px -30px rgba(38, 40, 66, 0.42);
  /* Night: deep navy, a soft glow where the light is (top right), a whisper of amber low left. */
  --gece-zemin: radial-gradient(110% 80% at 88% -8%, rgba(64, 112, 238, 0.32) 0%, rgba(64, 112, 238, 0) 60%),
    radial-gradient(90% 70% at 0% 108%, rgba(255, 194, 26, 0.06) 0%, rgba(255, 194, 26, 0) 60%),
    linear-gradient(180deg, var(--gece-1) 0%, var(--gece-2) 56%, var(--gece-3) 100%);
  /* A refined star field: one 260px tile of tiny stars at different sizes and strengths (a few warm, a few cool). */
  --gece-yildiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='%23fff'%3E%3Ccircle cx='172' cy='55' r='0.58' opacity='0.45'/%3E%3Ccircle fill='%23FFE3A6' cx='254' cy='241' r='1' opacity='0.55'/%3E%3Ccircle cx='81' cy='103' r='0.84' opacity='0.30'/%3E%3Ccircle cx='81' cy='57' r='0.82' opacity='0.22'/%3E%3Ccircle cx='229' cy='213' r='0.48' opacity='0.43'/%3E%3Ccircle fill='%23CFE0FF' cx='142' cy='209' r='1' opacity='0.55'/%3E%3Ccircle cx='182' cy='110' r='1' opacity='0.55'/%3E%3Ccircle cx='15' cy='41' r='0.55' opacity='0.29'/%3E%3Ccircle fill='%23CFE0FF' cx='59' cy='189' r='1' opacity='0.55'/%3E%3Ccircle cx='227' cy='122' r='0.73' opacity='0.27'/%3E%3Ccircle cx='83' cy='187' r='0.58' opacity='0.19'/%3E%3Ccircle fill='%23FFE3A6' cx='12' cy='223' r='0.65' opacity='0.44'/%3E%3Ccircle cx='98' cy='30' r='0.83' opacity='0.42'/%3E%3C/svg%3E");
  /* Big blue: a deeper base than the brand blue, soft light from the top left, a darker bottom edge. */
  --mavi-zemin: radial-gradient(110% 85% at 0% 0%, rgba(140, 180, 255, 0.12) 0%, rgba(140, 180, 255, 0) 62%),
    linear-gradient(180deg, rgba(8, 26, 92, 0) 52%, rgba(8, 26, 92, 0.24) 100%),
    linear-gradient(165deg, var(--mavi-1) 0%, var(--mavi-2) 46%, var(--mavi-3) 100%);
  --dugme-murekkep: linear-gradient(180deg, #1E3358 0%, #11264A 46%, #0A1A33 100%);
  --dugme-murekkep-golge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.32), 0 1px 1px rgba(10, 26, 51, 0.22),
    0 10px 20px -12px rgba(10, 26, 51, 0.7);
  --dugme-amber: linear-gradient(180deg, #FFD34D 0%, #FFC21A 52%, #F5B000 100%);
  --dugme-amber-golge: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(176, 120, 0, 0.22), 0 1px 2px rgba(92, 61, 0, 0.25),
    0 12px 26px -12px rgba(255, 194, 26, 0.55);
  --cam-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 249, 254, 0.88) 100%);
  --kucuk-golge: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(10, 26, 51, 0.05), 0 1px 2px rgba(10, 26, 51, 0.08), 0 8px 16px -10px rgba(10, 26, 51, 0.4);

  /* Dawn-to-night: the page background travels through one day as it scrolls (each section blends into the next).
   * Dawn = the hero sky; day = clear, airy near-white; afternoon/dusk = warmer and lower-key (prices, FAQ); after dark
   * = the dimmed ground under the closing night scene and the footer. */
  --safak-1: #C6DAF9; --safak-2: #D6E5FC; --safak-3: #E6EFFD;
  --gun-1: #F4F7FC; --gun-2: #F7F9FD; --gun-3: #F2F5FA;
  --ikindi-1: #F3F3F3; --ikindi-2: #F4EFE9;
  --aksam-1: #EFE9E3; --aksam-2: #E4E6EC;
  /* Section grounds: each section its own flat tint (alternating, warming toward the evening) so they read apart. */
  --zb-1: #F4F7FC; --zb-2: #EBF0F8; --zb-3: #F8FAFD; --zb-4: #EDF1F8; --zb-5: #F6F6F3; --zb-6: #F1ECE5; --zb-7: #F8F4EF;
  /* Hairlines tinted with the ink, not grey. */
  --kil: rgba(10, 26, 51, 0.075); --kil-guclu: rgba(10, 26, 51, 0.12);
  /* Blue and navy ramps for big surfaces. */
  --mavi-1: #2556E0; --mavi-2: #1E4BD2; --mavi-3: #1A41BA; --mavi-4: #14349A;
  --gece-1: #12274A; --gece-2: #0B1C38; --gece-3: #071429;

  /* Grain: static fractal noise, so big gradients do not band. Navy speckles for light surfaces, white for dark ones. */
  --gren-koyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .4 -.17'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --gren-acik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .24 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Contour lines (a topographic chart), white, very faint: for the big blue surfaces. */
  --kontur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 320' preserveAspectRatio='xMaxYMax slice'%3E%3Cpath d='M553 380 556 391 552 402 544 411 535 419 527 427 519 435 507 440 494 441 482 441 470 442 458 441 447 438 436 435 424 432 410 430 397 424 390 413 390 401 392 390 393 380 394 370 398 361 403 352 409 343 414 334 422 326 433 321 446 318 457 315 470 311 484 308 497 312 507 320 515 329 523 337 529 345 535 353 540 361 546 370ZM614 380 614 399 603 415 589 430 577 444 565 458 548 468 529 474 509 478 490 482 470 484 450 482 432 477 412 474 389 472 366 466 350 452 344 433 344 414 345 396 345 380 348 364 354 349 360 334 365 317 374 301 390 290 410 283 429 277 449 269 470 263 492 264 512 273 529 286 543 298 556 309 567 322 577 335 589 348 604 363ZM676 380 667 406 650 428 634 448 618 468 599 486 574 498 549 507 524 517 498 525 470 527 443 522 415 518 385 517 351 514 323 500 308 477 303 450 300 425 298 402 300 380 305 359 308 337 310 313 316 288 333 267 359 254 386 245 412 234 439 222 470 218 500 225 526 238 550 252 571 266 589 282 605 300 622 316 646 333 668 354ZM731 380 714 412 695 440 678 467 656 491 629 510 600 527 572 544 542 561 507 570 470 569 434 565 397 565 355 565 315 555 287 530 272 498 263 466 257 437 254 408 257 380 259 353 254 323 252 289 265 258 294 236 329 220 361 205 394 189 431 178 470 180 507 191 540 203 572 216 599 234 622 255 645 275 677 294 711 316 732 346ZM778 380 759 418 740 452 718 484 689 510 658 534 629 560 599 588 560 608 515 613 470 611 425 612 377 616 326 611 285 589 257 555 238 518 223 483 215 448 214 413 213 380 202 345 190 305 192 264 218 230 258 206 298 186 336 164 378 147 424 142 470 148 513 155 556 164 594 180 627 203 657 227 694 246 739 267 776 298 788 339ZM821 380 804 423 782 463 752 498 719 528 692 562 666 601 629 635 578 652 523 655 470 657 415 664 357 666 303 649 261 616 229 578 203 539 184 500 177 458 172 419 157 380 133 336 120 287 137 241 177 205 223 177 266 150 313 127 365 114 418 112 470 113 521 114 572 123 616 145 655 171 698 193 752 212 804 240 833 283 834 333ZM864 380 846 429 817 472 783 511 757 551 737 599 707 648 657 681 594 694 532 699 470 709 405 716 341 706 285 678 239 641 198 603 166 561 148 515 138 468 119 426 85 380 56 326 56 270 90 221 138 182 187 148 237 117 294 97 354 87 412 80 470 70 530 68 588 83 638 110 688 134 749 151 813 176 860 217 878 271 874 327Z' fill='none' stroke='%23fff' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");

  /* Theme roles. These are the light values; the night theme redefines them below. --ink-sabit is the ink on surfaces
   * that stay amber or light in both themes (amber buttons and badges, plane outlines, the phone's status bar). */
  --ink-sabit: #0A1A33;
  --ters-zemin: var(--ink); --ters-yazi: #fff;
  --dugme-murekkep-yazi: #fff; --dugme-murekkep-hover: 0 16px 28px -14px rgba(10, 26, 51, 0.55);
  --dugme-amber-hover: 0 18px 34px -12px rgba(255, 194, 26, 0.6);
  --cam-hover: #fff;
  --ust-zemin: linear-gradient(180deg, rgba(250, 251, 254, 0.86), rgba(246, 248, 252, 0.76));
  --ust-golge: inset 0 -1px 0 var(--kil), 0 12px 30px -26px rgba(10, 26, 51, 0.55);
  --hap-zemin: rgba(255, 255, 255, 0.7); --hap-golge: inset 0 0 0 1px rgba(10, 26, 51, 0.05);
  /* The hero sky: the dawn ramp, a warm glow on the horizon, a bright patch of sky top left. */
  --safak-4: #F1F4FB;
  --gok-ufuk: radial-gradient(130% 26% at 50% 78%, rgba(255, 208, 150, 0.2) 0%, rgba(255, 208, 150, 0.07) 45%, rgba(255, 208, 150, 0) 72%),
    radial-gradient(55% 30% at 78% 76%, rgba(255, 178, 110, 0.1) 0%, rgba(255, 178, 110, 0) 70%),
    radial-gradient(80% 50% at 12% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--safak-1) 0px, var(--safak-2) 240px, var(--safak-3) 520px, var(--safak-4) 74%, var(--gun-1) 100%);
  --gok-doku: var(--gren-koyu) 0 0 / 220px 220px;
  --harita-opak: 0.75; --harita-rapor-opak: 0.4; --bulut-uzak-opak: 0.75; --bulut-yakin-opak: 0.9;
  --gren-opak: 0.06;
  --gren-sabit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --cam-panel-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.48));
  --cam-panel-golge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px var(--kil), 0 14px 30px -24px rgba(16, 42, 94, 0.5);
  --ayirici: rgba(10, 26, 51, 0.07);
  /* Product frames. The screenshots themselves are always light (the app has one theme). */
  --cihaz-golge: inset 0 0 0 1px rgba(10, 26, 51, 0.06), 0 2px 4px -1px rgba(10, 26, 51, 0.1), 0 24px 48px -26px rgba(10, 26, 51, 0.45), 0 60px 90px -50px rgba(27, 64, 150, 0.6);
  --cubuk-zemin: linear-gradient(180deg, #F8FAFE, #EEF3FA); --adres-zemin: #fff;
  --telefon-golge: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 0 0 4px #050D1C, 0 2px 4px rgba(10, 26, 51, 0.2),
    0 40px 60px -30px rgba(10, 26, 51, 0.7), 0 20px 40px -20px rgba(27, 64, 150, 0.45);
  --durak-golge: 0 8px 18px -10px rgba(27, 77, 219, 0.6);
  /* Night surfaces (destination card, FAQ card, apron, closing scene). */
  --gece-kart-golge: inset 0 1px 0 rgba(160, 190, 255, 0.16), 0 0 0 1px rgba(10, 26, 51, 0.2), 0 2px 4px -1px rgba(10, 26, 51, 0.25), 0 28px 48px -26px rgba(10, 26, 51, 0.85);
  --gece-kart-golge-yukari: inset 0 1px 0 rgba(160, 190, 255, 0.16), 0 0 0 1px rgba(10, 26, 51, 0.2), 0 4px 8px -2px rgba(10, 26, 51, 0.25), 0 38px 60px -28px rgba(10, 26, 51, 0.9);
  --gece-panel-golge: inset 0 1px 0 rgba(160, 190, 255, 0.14), 0 0 0 1px rgba(10, 26, 51, 0.12), 0 2px 4px rgba(10, 26, 51, 0.12), 0 50px 80px -50px rgba(10, 26, 51, 0.85);
  --sss-kart-golge: inset 0 1px 0 rgba(160, 190, 255, 0.16), 0 0 0 1px rgba(10, 26, 51, 0.2), 0 2px 4px -1px rgba(10, 26, 51, 0.25), 0 28px 48px -26px rgba(26, 24, 50, 0.75);
  --final-ust-isik: rgba(70, 116, 240, 0.3); --final-ufuk-isik: rgba(255, 196, 130, 0.12);
  --final-1: var(--gece-3); --final-2: var(--gece-2); --final-3: #13284F; --final-4: #33507F;
  --final-golge: inset 0 1px 0 rgba(160, 190, 255, 0.14), 0 0 0 1px rgba(10, 26, 51, 0.12), 0 2px 4px rgba(10, 26, 51, 0.12), 0 50px 80px -50px rgba(18, 20, 42, 0.85);
  /* Report tabs, runway, level scale, prices, FAQ, footer. */
  --sekme-zemin: rgba(255, 255, 255, 0.72); --sekme-hover: #fff; --sekme-hover-golge: 0 8px 18px -14px rgba(10, 26, 51, 0.5);
  --sekme-secili-zemin: var(--dugme-murekkep); --sekme-secili-golge: var(--dugme-murekkep-golge);
  --isaret-mavi: var(--blue);
  --pist-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6);
  --olcek-zemin: linear-gradient(180deg, #F1F5FB 0%, #EAF0F8 100%); --olcek-golge: inset 0 0 0 1px rgba(10, 26, 51, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --hedef-golge: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(6, 20, 80, 0.3), 0 0 0 1px rgba(20, 52, 154, 0.35), 0 2px 4px -1px rgba(20, 52, 154, 0.35),
    0 16px 28px -16px rgba(20, 52, 154, 0.85);
  --hale-mavi: rgba(27, 77, 219, 0.16);
  --serit-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
  --serit-golge: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px var(--kil-guclu), 0 1px 1px rgba(10, 26, 51, 0.04);
  --mavi-kart-golge: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(6, 20, 80, 0.35), 0 0 0 1px rgba(20, 52, 154, 0.4), 0 2px 5px -2px rgba(20, 52, 154, 0.5),
    0 32px 56px -28px rgba(20, 52, 154, 0.8);
  --mavi-kart-golge-yukari: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(6, 20, 80, 0.35), 0 0 0 1px rgba(20, 52, 154, 0.4), 0 4px 10px -2px rgba(20, 52, 154, 0.5),
    0 40px 64px -28px rgba(20, 52, 154, 0.9);
  --ortak-zemin: rgba(255, 255, 255, 0.45);
  --sss-zemin: linear-gradient(180deg, #FFFFFF 0%, #FEFDFC 55%, #FAF9F8 100%);
  --arti-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%230A1A33' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --oynatici-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px -14px rgba(10, 26, 51, 0.8);
  --izgara-cizgi: rgba(27, 77, 219, 0.045);
  --alt-son: #E0E4EB;

  --egri-cikis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --egri-inis: cubic-bezier(0.22, 0.9, 0.3, 1);
  --kenar: 20px;
  --ust-bar: 68px;
}
@media (min-width: 820px) { :root { --kenar: 32px; --ust-bar: 76px; } }
/* The night theme, token by token: when the system is dark (unless the visitor chose light) and when the visitor chose
 * dark. The two blocks hold the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Text: tuned off-white for headings, blue-grey for body (>= 4.5:1 on every surface), a lighter brand blue for accents. */
    --ink: #E9EFF9; --ink-muted: #A3B3CD; --ink-soft: #C7D2E4; --blue: #8DB0FF; --blue-soft: rgba(120, 160, 255, 0.15);
    --amber-soft: rgba(255, 194, 26, 0.17); --amber-text: #FFD25E; --amber-deep: #FFE3A3; --amber-line: #E0A31A;
    --sky: #11264F; --sky-deep: #0E1F43; --ground: #09142C; --surface: #14243F; --surface-muted: #1C2D4E;
    --line: rgba(150, 180, 240, 0.14); --line-strong: rgba(150, 180, 240, 0.24); --track: #1B2B49;
    --night-line: #2B3E5E; --route-dash: #4A6290; --light-off: #33476A;
    --success: #5BD9A4; --success-soft: rgba(91, 217, 164, 0.13);
    /* The flight at night: late-evening blue over the hero with a last warm glow on the horizon, deep night through the
     * middle, a faint violet at "dusk" (prices, FAQ), the darkest ground under the footer. */
    --safak-1: #152E5E; --safak-2: #11264F; --safak-3: #0E1F43; --safak-4: #0B1937;
    --gun-1: #0A1631; --gun-2: #09142C; --gun-3: #081229;
    --ikindi-1: #091128; --ikindi-2: #0C1029;
    --aksam-1: #0B0E25; --aksam-2: #080C20; --alt-son: #060918;
    --zb-1: #0A1631; --zb-2: #0E1C3C; --zb-3: #09142C; --zb-4: #0D1A38; --zb-5: #091128; --zb-6: #0E1333; --zb-7: #0A0F28;
    --kil: rgba(150, 180, 240, 0.13); --kil-guclu: rgba(150, 180, 240, 0.22);
    --mavi-1: #2F63F2; --mavi-2: #2655E0; --mavi-3: #1F49C8; --mavi-4: #183CA8;
    --gece-1: #1B386E; --gece-2: #12294F; --gece-3: #0C1C3D;
    --gok-ufuk: radial-gradient(130% 30% at 50% 80%, rgba(255, 168, 110, 0.13) 0%, rgba(255, 168, 110, 0.045) 45%, rgba(255, 168, 110, 0) 72%),
      radial-gradient(55% 30% at 78% 78%, rgba(255, 140, 100, 0.08) 0%, rgba(255, 140, 100, 0) 70%),
      radial-gradient(80% 55% at 88% 0%, rgba(96, 140, 255, 0.24) 0%, rgba(96, 140, 255, 0) 70%),
      linear-gradient(180deg, var(--safak-1) 0px, var(--safak-2) 240px, var(--safak-3) 520px, var(--safak-4) 74%, var(--gun-1) 100%);
    --gok-doku: var(--gren-acik) 0 0 / 220px 220px, var(--gece-yildiz) 0 0 / 260px 260px;
    --harita-opak: 0.5; --harita-rapor-opak: 0.28; --bulut-uzak-opak: 0.08; --bulut-yakin-opak: 0.1;
    --gren-opak: 0.035;
    --gren-sabit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Material: dark cards with a hairline light border, a soft inner top highlight and dark ambient shadow. */
    --kart-zemin: linear-gradient(180deg, #16284A 0%, #132443 40%, #11203C 100%);
    --kart-golge: inset 0 1px 0 rgba(200, 220, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px var(--kil), 0 1px 1px rgba(0, 0, 0, 0.3),
      0 3px 6px -3px rgba(0, 0, 0, 0.4), 0 24px 44px -28px rgba(0, 0, 0, 0.75);
    --kart-golge-yukari: inset 0 1px 0 rgba(200, 220, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px var(--kil-guclu), 0 1px 1px rgba(0, 0, 0, 0.3),
      0 6px 12px -6px rgba(0, 0, 0, 0.45), 0 34px 60px -30px rgba(0, 0, 0, 0.85), 0 20px 60px -34px rgba(70, 116, 240, 0.4);
    --kart-golge-duz: inset 0 1px 0 rgba(200, 220, 255, 0.08), 0 0 0 1px var(--kil), 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 24px -20px rgba(0, 0, 0, 0.7);
    --kart-golge-fiyat: inset 0 1px 0 rgba(200, 220, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px var(--kil), 0 1px 1px rgba(0, 0, 0, 0.3),
      0 4px 8px -4px rgba(0, 0, 0, 0.4), 0 30px 54px -30px rgba(0, 0, 0, 0.8);
    /* Buttons: the ink button turns into its negative (a lit white pill); amber stays the rare accent. */
    --dugme-murekkep: linear-gradient(180deg, #FFFFFF 0%, #F1F5FC 50%, #DFE7F4 100%);
    --dugme-murekkep-yazi: #0A1A33;
    --dugme-murekkep-golge: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 26, 51, 0.16), 0 1px 1px rgba(0, 0, 0, 0.35), 0 10px 22px -12px rgba(140, 180, 255, 0.45);
    --dugme-murekkep-hover: 0 16px 30px -14px rgba(140, 180, 255, 0.55);
    --dugme-amber-golge: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(176, 120, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4),
      0 12px 30px -12px rgba(255, 194, 26, 0.5);
    --dugme-amber-hover: 0 18px 40px -12px rgba(255, 194, 26, 0.6);
    --cam-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
    --cam-hover: rgba(255, 255, 255, 0.11);
    --kucuk-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(150, 180, 240, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
    --ters-zemin: #E9EFF9; --ters-yazi: #0A1A33;
    --ust-zemin: linear-gradient(180deg, rgba(12, 26, 52, 0.86), rgba(9, 20, 42, 0.76));
    --ust-golge: inset 0 -1px 0 var(--kil), 0 12px 30px -26px rgba(0, 0, 0, 0.9);
    --hap-zemin: rgba(255, 255, 255, 0.07); --hap-golge: inset 0 0 0 1px rgba(150, 180, 240, 0.14);
    --cam-panel-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
    --cam-panel-golge: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px var(--kil), 0 14px 30px -24px rgba(0, 0, 0, 0.7);
    --ayirici: rgba(150, 180, 240, 0.12);
    /* The light screenshots sit in dark frames with a hairline and a soft blue glow, kept at full brightness. */
    --cihaz-golge: 0 0 0 1px rgba(150, 180, 240, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 24px 48px -26px rgba(0, 0, 0, 0.85), 0 50px 110px -50px rgba(70, 116, 240, 0.55);
    --cubuk-zemin: linear-gradient(180deg, #1D2E4E, #16253F); --adres-zemin: #0E1A32;
    --telefon-golge: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #050D1C, 0 0 0 1px rgba(150, 180, 240, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3),
      0 40px 60px -30px rgba(0, 0, 0, 0.85), 0 20px 70px -24px rgba(70, 116, 240, 0.45);
    --durak-golge: 0 8px 22px -10px rgba(70, 116, 240, 0.7);
    /* Night surfaces turn into lit panels on the dark ground: brighter navy, a light rim and a blue halo. */
    --gece-kart-golge: inset 0 1px 0 rgba(170, 200, 255, 0.2), 0 0 0 1px rgba(150, 180, 240, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.35), 0 28px 48px -26px rgba(0, 0, 0, 0.85),
      0 0 60px -24px rgba(70, 116, 240, 0.5);
    --gece-kart-golge-yukari: inset 0 1px 0 rgba(170, 200, 255, 0.2), 0 0 0 1px rgba(150, 180, 240, 0.26), 0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 38px 60px -28px rgba(0, 0, 0, 0.9),
      0 0 70px -22px rgba(70, 116, 240, 0.6);
    --gece-panel-golge: inset 0 1px 0 rgba(170, 200, 255, 0.18), 0 0 0 1px rgba(150, 180, 240, 0.14), 0 2px 4px rgba(0, 0, 0, 0.3), 0 50px 80px -50px rgba(0, 0, 0, 0.9),
      0 0 100px -40px rgba(70, 116, 240, 0.4);
    --sss-kart-golge: var(--gece-kart-golge);
    /* The closing runway is the brightest moment: a stronger sky glow, a warmer horizon and a halo around the panel. */
    --final-ust-isik: rgba(100, 150, 255, 0.5); --final-ufuk-isik: rgba(255, 196, 130, 0.24);
    --final-1: #10234A; --final-2: #142C58; --final-3: #1B3767; --final-4: #33507F;
    --final-golge: inset 0 1px 0 rgba(170, 200, 255, 0.24), 0 0 0 1px rgba(150, 180, 240, 0.22), 0 2px 4px rgba(0, 0, 0, 0.3), 0 50px 80px -50px rgba(0, 0, 0, 0.9),
      0 0 160px -30px rgba(70, 116, 240, 0.6);
    --sekme-zemin: rgba(255, 255, 255, 0.04); --sekme-hover: rgba(255, 255, 255, 0.08); --sekme-hover-golge: 0 8px 18px -14px rgba(0, 0, 0, 0.7);
    --sekme-secili-zemin: linear-gradient(180deg, #2A4C8E 0%, #213F7A 50%, #1B3466 100%);
    --sekme-secili-golge: inset 0 1px 0 rgba(190, 210, 255, 0.22), 0 0 0 1px rgba(140, 175, 255, 0.35), 0 10px 22px -12px rgba(70, 116, 240, 0.6);
    --isaret-mavi: #3D6BF0;
    --pist-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(150, 180, 240, 0.12);
    --olcek-zemin: linear-gradient(180deg, #1C2E50 0%, #182846 100%); --olcek-golge: inset 0 0 0 1px rgba(150, 180, 240, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hedef-golge: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(6, 20, 80, 0.3), 0 0 0 1px rgba(110, 150, 255, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4),
      0 16px 28px -16px rgba(0, 0, 0, 0.8), 0 0 30px -8px rgba(60, 110, 255, 0.55);
    --hale-mavi: rgba(70, 116, 240, 0.3);
    --serit-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    --serit-golge: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--kil-guclu), 0 1px 1px rgba(0, 0, 0, 0.25);
    --mavi-kart-golge: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(6, 20, 80, 0.35), 0 0 0 1px rgba(110, 150, 255, 0.5), 0 2px 5px -2px rgba(0, 0, 0, 0.5),
      0 32px 56px -28px rgba(0, 0, 0, 0.8), 0 0 90px -24px rgba(60, 110, 255, 0.6);
    --mavi-kart-golge-yukari: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(6, 20, 80, 0.35), 0 0 0 1px rgba(110, 150, 255, 0.55), 0 4px 10px -2px rgba(0, 0, 0, 0.5),
      0 40px 64px -28px rgba(0, 0, 0, 0.85), 0 0 100px -20px rgba(60, 110, 255, 0.7);
    --ortak-zemin: rgba(255, 255, 255, 0.035);
    --sss-zemin: linear-gradient(180deg, #172644 0%, #142240 55%, #121E3A 100%);
    --arti-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23E9EFF9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --oynatici-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(150, 180, 240, 0.18), 0 10px 22px -14px rgba(0, 0, 0, 0.8);
    --izgara-cizgi: rgba(140, 170, 255, 0.055);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Text: tuned off-white for headings, blue-grey for body (>= 4.5:1 on every surface), a lighter brand blue for accents. */
  --ink: #E9EFF9; --ink-muted: #A3B3CD; --ink-soft: #C7D2E4; --blue: #8DB0FF; --blue-soft: rgba(120, 160, 255, 0.15);
  --amber-soft: rgba(255, 194, 26, 0.17); --amber-text: #FFD25E; --amber-deep: #FFE3A3; --amber-line: #E0A31A;
  --sky: #11264F; --sky-deep: #0E1F43; --ground: #09142C; --surface: #14243F; --surface-muted: #1C2D4E;
  --line: rgba(150, 180, 240, 0.14); --line-strong: rgba(150, 180, 240, 0.24); --track: #1B2B49;
  --night-line: #2B3E5E; --route-dash: #4A6290; --light-off: #33476A;
  --success: #5BD9A4; --success-soft: rgba(91, 217, 164, 0.13);
  /* The flight at night: late-evening blue over the hero with a last warm glow on the horizon, deep night through the
   * middle, a faint violet at "dusk" (prices, FAQ), the darkest ground under the footer. */
  --safak-1: #152E5E; --safak-2: #11264F; --safak-3: #0E1F43; --safak-4: #0B1937;
  --gun-1: #0A1631; --gun-2: #09142C; --gun-3: #081229;
  --ikindi-1: #091128; --ikindi-2: #0C1029;
  --aksam-1: #0B0E25; --aksam-2: #080C20; --alt-son: #060918;
  --zb-1: #0A1631; --zb-2: #0E1C3C; --zb-3: #09142C; --zb-4: #0D1A38; --zb-5: #091128; --zb-6: #0E1333; --zb-7: #0A0F28;
  --kil: rgba(150, 180, 240, 0.13); --kil-guclu: rgba(150, 180, 240, 0.22);
  --mavi-1: #2F63F2; --mavi-2: #2655E0; --mavi-3: #1F49C8; --mavi-4: #183CA8;
  --gece-1: #1B386E; --gece-2: #12294F; --gece-3: #0C1C3D;
  --gok-ufuk: radial-gradient(130% 30% at 50% 80%, rgba(255, 168, 110, 0.13) 0%, rgba(255, 168, 110, 0.045) 45%, rgba(255, 168, 110, 0) 72%),
    radial-gradient(55% 30% at 78% 78%, rgba(255, 140, 100, 0.08) 0%, rgba(255, 140, 100, 0) 70%),
    radial-gradient(80% 55% at 88% 0%, rgba(96, 140, 255, 0.24) 0%, rgba(96, 140, 255, 0) 70%),
    linear-gradient(180deg, var(--safak-1) 0px, var(--safak-2) 240px, var(--safak-3) 520px, var(--safak-4) 74%, var(--gun-1) 100%);
  --gok-doku: var(--gren-acik) 0 0 / 220px 220px, var(--gece-yildiz) 0 0 / 260px 260px;
  --harita-opak: 0.5; --harita-rapor-opak: 0.28; --bulut-uzak-opak: 0.08; --bulut-yakin-opak: 0.1;
  --gren-opak: 0.035;
  --gren-sabit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Material: dark cards with a hairline light border, a soft inner top highlight and dark ambient shadow. */
  --kart-zemin: linear-gradient(180deg, #16284A 0%, #132443 40%, #11203C 100%);
  --kart-golge: inset 0 1px 0 rgba(200, 220, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px var(--kil), 0 1px 1px rgba(0, 0, 0, 0.3),
    0 3px 6px -3px rgba(0, 0, 0, 0.4), 0 24px 44px -28px rgba(0, 0, 0, 0.75);
  --kart-golge-yukari: inset 0 1px 0 rgba(200, 220, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px var(--kil-guclu), 0 1px 1px rgba(0, 0, 0, 0.3),
    0 6px 12px -6px rgba(0, 0, 0, 0.45), 0 34px 60px -30px rgba(0, 0, 0, 0.85), 0 20px 60px -34px rgba(70, 116, 240, 0.4);
  --kart-golge-duz: inset 0 1px 0 rgba(200, 220, 255, 0.08), 0 0 0 1px var(--kil), 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 24px -20px rgba(0, 0, 0, 0.7);
  --kart-golge-fiyat: inset 0 1px 0 rgba(200, 220, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px var(--kil), 0 1px 1px rgba(0, 0, 0, 0.3),
    0 4px 8px -4px rgba(0, 0, 0, 0.4), 0 30px 54px -30px rgba(0, 0, 0, 0.8);
  /* Buttons: the ink button turns into its negative (a lit white pill); amber stays the rare accent. */
  --dugme-murekkep: linear-gradient(180deg, #FFFFFF 0%, #F1F5FC 50%, #DFE7F4 100%);
  --dugme-murekkep-yazi: #0A1A33;
  --dugme-murekkep-golge: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(10, 26, 51, 0.16), 0 1px 1px rgba(0, 0, 0, 0.35), 0 10px 22px -12px rgba(140, 180, 255, 0.45);
  --dugme-murekkep-hover: 0 16px 30px -14px rgba(140, 180, 255, 0.55);
  --dugme-amber-golge: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(176, 120, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 30px -12px rgba(255, 194, 26, 0.5);
  --dugme-amber-hover: 0 18px 40px -12px rgba(255, 194, 26, 0.6);
  --cam-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
  --cam-hover: rgba(255, 255, 255, 0.11);
  --kucuk-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(150, 180, 240, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
  --ters-zemin: #E9EFF9; --ters-yazi: #0A1A33;
  --ust-zemin: linear-gradient(180deg, rgba(12, 26, 52, 0.86), rgba(9, 20, 42, 0.76));
  --ust-golge: inset 0 -1px 0 var(--kil), 0 12px 30px -26px rgba(0, 0, 0, 0.9);
  --hap-zemin: rgba(255, 255, 255, 0.07); --hap-golge: inset 0 0 0 1px rgba(150, 180, 240, 0.14);
  --cam-panel-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  --cam-panel-golge: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px var(--kil), 0 14px 30px -24px rgba(0, 0, 0, 0.7);
  --ayirici: rgba(150, 180, 240, 0.12);
  /* The light screenshots sit in dark frames with a hairline and a soft blue glow, kept at full brightness. */
  --cihaz-golge: 0 0 0 1px rgba(150, 180, 240, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 24px 48px -26px rgba(0, 0, 0, 0.85), 0 50px 110px -50px rgba(70, 116, 240, 0.55);
  --cubuk-zemin: linear-gradient(180deg, #1D2E4E, #16253F); --adres-zemin: #0E1A32;
  --telefon-golge: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #050D1C, 0 0 0 1px rgba(150, 180, 240, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3),
    0 40px 60px -30px rgba(0, 0, 0, 0.85), 0 20px 70px -24px rgba(70, 116, 240, 0.45);
  --durak-golge: 0 8px 22px -10px rgba(70, 116, 240, 0.7);
  /* Night surfaces turn into lit panels on the dark ground: brighter navy, a light rim and a blue halo. */
  --gece-kart-golge: inset 0 1px 0 rgba(170, 200, 255, 0.2), 0 0 0 1px rgba(150, 180, 240, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.35), 0 28px 48px -26px rgba(0, 0, 0, 0.85),
    0 0 60px -24px rgba(70, 116, 240, 0.5);
  --gece-kart-golge-yukari: inset 0 1px 0 rgba(170, 200, 255, 0.2), 0 0 0 1px rgba(150, 180, 240, 0.26), 0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 38px 60px -28px rgba(0, 0, 0, 0.9),
    0 0 70px -22px rgba(70, 116, 240, 0.6);
  --gece-panel-golge: inset 0 1px 0 rgba(170, 200, 255, 0.18), 0 0 0 1px rgba(150, 180, 240, 0.14), 0 2px 4px rgba(0, 0, 0, 0.3), 0 50px 80px -50px rgba(0, 0, 0, 0.9),
    0 0 100px -40px rgba(70, 116, 240, 0.4);
  --sss-kart-golge: var(--gece-kart-golge);
  /* The closing runway is the brightest moment: a stronger sky glow, a warmer horizon and a halo around the panel. */
  --final-ust-isik: rgba(100, 150, 255, 0.5); --final-ufuk-isik: rgba(255, 196, 130, 0.24);
  --final-1: #10234A; --final-2: #142C58; --final-3: #1B3767; --final-4: #33507F;
  --final-golge: inset 0 1px 0 rgba(170, 200, 255, 0.24), 0 0 0 1px rgba(150, 180, 240, 0.22), 0 2px 4px rgba(0, 0, 0, 0.3), 0 50px 80px -50px rgba(0, 0, 0, 0.9),
    0 0 160px -30px rgba(70, 116, 240, 0.6);
  --sekme-zemin: rgba(255, 255, 255, 0.04); --sekme-hover: rgba(255, 255, 255, 0.08); --sekme-hover-golge: 0 8px 18px -14px rgba(0, 0, 0, 0.7);
  --sekme-secili-zemin: linear-gradient(180deg, #2A4C8E 0%, #213F7A 50%, #1B3466 100%);
  --sekme-secili-golge: inset 0 1px 0 rgba(190, 210, 255, 0.22), 0 0 0 1px rgba(140, 175, 255, 0.35), 0 10px 22px -12px rgba(70, 116, 240, 0.6);
  --isaret-mavi: #3D6BF0;
  --pist-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(150, 180, 240, 0.12);
  --olcek-zemin: linear-gradient(180deg, #1C2E50 0%, #182846 100%); --olcek-golge: inset 0 0 0 1px rgba(150, 180, 240, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --hedef-golge: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(6, 20, 80, 0.3), 0 0 0 1px rgba(110, 150, 255, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4),
    0 16px 28px -16px rgba(0, 0, 0, 0.8), 0 0 30px -8px rgba(60, 110, 255, 0.55);
  --hale-mavi: rgba(70, 116, 240, 0.3);
  --serit-zemin: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  --serit-golge: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--kil-guclu), 0 1px 1px rgba(0, 0, 0, 0.25);
  --mavi-kart-golge: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(6, 20, 80, 0.35), 0 0 0 1px rgba(110, 150, 255, 0.5), 0 2px 5px -2px rgba(0, 0, 0, 0.5),
    0 32px 56px -28px rgba(0, 0, 0, 0.8), 0 0 90px -24px rgba(60, 110, 255, 0.6);
  --mavi-kart-golge-yukari: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(6, 20, 80, 0.35), 0 0 0 1px rgba(110, 150, 255, 0.55), 0 4px 10px -2px rgba(0, 0, 0, 0.5),
    0 40px 64px -28px rgba(0, 0, 0, 0.85), 0 0 100px -20px rgba(60, 110, 255, 0.7);
  --ortak-zemin: rgba(255, 255, 255, 0.035);
  --sss-zemin: linear-gradient(180deg, #172644 0%, #142240 55%, #121E3A 100%);
  --arti-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23E9EFF9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --oynatici-golge: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(150, 180, 240, 0.18), 0 10px 22px -14px rgba(0, 0, 0, 0.8);
  --izgara-cizgi: rgba(140, 170, 255, 0.055);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-bar) + 12px); }
body {
  margin: 0; background: var(--gun-2); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ters-zemin); color: var(--ters-yazi); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--kenar), 1240px); margin-inline: auto; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.3; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.7; }
.h2 { font-size: clamp(30px, 2.2vw + 20px, 50px); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.lead { font-size: clamp(16px, 0.3vw + 15px, 19px); line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.bolum-bas { display: grid; gap: 16px; max-width: 720px; }
.bolum-bas .lead { max-width: 620px; }


/* ---------- Buttons (the app's faces: ink, amber on ink, glass) */
.btn {
  --h: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 26px;
  border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--egri-cikis), box-shadow 160ms var(--egri-cikis), background-color 160ms;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 200ms var(--egri-cikis); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-sm { --h: 44px; padding: 0 18px; font-size: 15px; }
.btn-ink { background: var(--dugme-murekkep); color: var(--dugme-murekkep-yazi); box-shadow: var(--dugme-murekkep-golge); }
.btn-ink:hover { box-shadow: var(--dugme-murekkep-golge), var(--dugme-murekkep-hover); transform: translateY(-1px); }
.btn-amber { background: var(--dugme-amber); color: var(--ink-sabit); box-shadow: var(--dugme-amber-golge); }
.btn-amber:hover { transform: translateY(-1px); box-shadow: var(--dugme-amber-golge), var(--dugme-amber-hover); }
.btn-cam { background: var(--cam-zemin); color: var(--ink); box-shadow: var(--kucuk-golge); }
.btn-cam:hover { transform: translateY(-1px); background: var(--cam-hover); }


/* ---------- Header */
.ust {
  position: sticky; top: 0; z-index: 50; height: var(--ust-bar);
  transition: background-color 240ms, box-shadow 240ms, backdrop-filter 240ms;
}
.ust.dolu {
  background: var(--ust-zemin);
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: var(--ust-golge);
}
.ust-ic { height: 100%; display: flex; align-items: center; gap: 16px; }
.marka { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: 19px; letter-spacing: -0.03em; line-height: 1; flex: none; border-radius: 10px; }
.marka svg { width: 34px; height: 34px; }
.marka b { font-weight: 700; color: var(--ink); }
.marka span { font-weight: 400; color: var(--ink-muted); }
.menu-yatay { display: none; margin-left: auto; gap: 4px; }
.menu-yatay a, .ust-giris {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; color: var(--ink); transition: background-color 160ms;
}
.menu-yatay a:hover, .ust-giris:hover { background: var(--hap-zemin); }
/* The section in view (site.js sets aria-current): the hover pill, kept, with a short blue rule under the word. */
.menu-yatay a { position: relative; }
.menu-yatay a::after {
  content: ""; position: absolute; left: 50%; bottom: 7px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--blue);
  opacity: 0; transform: scaleX(0.4); transition: opacity 200ms, transform 260ms var(--egri-cikis);
}
.menu-yatay a[aria-current="true"] { background: var(--hap-zemin); box-shadow: var(--hap-golge); }
.menu-yatay a[aria-current="true"]::after { opacity: 1; transform: none; }
.ust-eylem { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ust-giris { display: none; }
.menu-ac { position: relative; }
.menu-ac summary {
  list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--cam-zemin); box-shadow: var(--kucuk-golge);
}
.menu-ac summary::-webkit-details-marker { display: none; }
.menu-ac summary:hover { background: var(--cam-hover); }
.menu-ac summary svg { width: 20px; height: 20px; }
.menu-ac .kapat { display: none; }
.menu-ac[open] .kapat { display: block; }
.menu-ac[open] .ac { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 2 * var(--kenar))); padding: 8px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--kart-golge-yukari); display: grid;
}
.menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 14px; text-decoration: none; font-weight: 500; }
.menu-panel a:hover { background: var(--surface-muted); }
.menu-panel a[aria-current="true"] { background: var(--surface-muted); color: var(--blue); }
.menu-panel hr { border: 0; height: 1px; background: var(--line); margin: 6px 8px; }
@media (min-width: 640px) { .ust-giris { display: inline-flex; } }
@media (min-width: 1060px) {
  .menu-yatay { display: flex; }
  .ust-eylem { margin-left: 8px; }
  .menu-ac { display: none; }
}


/* ---------- Hero: the dawn sky */
.kahraman { position: relative; isolation: isolate; margin-top: calc(-1 * var(--ust-bar)); padding: calc(var(--ust-bar) + 36px) 0 56px; overflow: hidden; }
.gok { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* Grain over the dawn sky, fading out before the hero ends so the day below starts without an edge. */
.gok::after {
  content: ""; position: absolute; inset: 0; background: var(--gok-doku);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}
.gok-ufuk {
  position: absolute; inset: 0; background: var(--gok-ufuk);
}
.gok-harita {
  position: absolute; right: 0; top: 0; width: min(760px, 120vw); aspect-ratio: 4 / 3; opacity: var(--harita-opak);
  background: url("../img/harita.svg") no-repeat right top / cover;
  -webkit-mask-image: radial-gradient(115% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 68%);
  mask-image: radial-gradient(115% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 68%);
}
.bulut {
  position: absolute; left: -20%; width: 140%; top: 0; height: 820px; pointer-events: none; will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
}
.bulut-uzak {
  opacity: var(--bulut-uzak-opak);
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)) no-repeat 9% 3% / clamp(300px, 30%, 620px) 150px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)) no-repeat 21% 0% / clamp(200px, 18%, 380px) 110px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) no-repeat 80% 14% / clamp(320px, 28%, 600px) 160px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) no-repeat 96% 6% / clamp(180px, 16%, 340px) 100px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) no-repeat 50% 44% / clamp(360px, 42%, 900px) 150px;
  animation: suruklen-uzak 140s ease-in-out infinite alternate;
}
.bulut-yakin {
  opacity: var(--bulut-yakin-opak);
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)) no-repeat 2% 30% / clamp(280px, 26%, 560px) 130px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) no-repeat 13% 27% / clamp(170px, 14%, 300px) 96px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)) no-repeat 70% 4% / clamp(260px, 22%, 460px) 120px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)) no-repeat 63% 0% / clamp(160px, 12%, 260px) 90px,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)) no-repeat 99% 56% / clamp(300px, 30%, 640px) 140px;
  animation: suruklen-yakin 84s ease-in-out infinite alternate;
}
@keyframes suruklen-uzak { from { transform: translate3d(-2.5%, 0, 0); } to { transform: translate3d(2.5%, 0, 0); } }
@keyframes suruklen-yakin { from { transform: translate3d(3.5%, 0, 0); } to { transform: translate3d(-3.5%, 0, 0); } }
.gren {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--gren-opak); background-size: 180px 180px;
  background-image: var(--gren-sabit);
}

/* The plane and its contrail: one pass every 34 s, the first soon after the page opens (the app's H-Giris). */
.ucus { position: absolute; z-index: -1; left: -4%; width: 108%; top: calc(var(--ust-bar) + 20px); height: 0; transform: rotate(-2deg); pointer-events: none; }
@media (max-width: 1023px) { .ucus { display: none; } }
.iz, .iz-genis { position: absolute; left: 0; width: 100%; transform-origin: 0 50%; opacity: 0; }
.iz {
  top: -3px; height: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 45%, #000 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 45%, #000 55%, rgba(0, 0, 0, 0) 100%);
  animation: iz 34s linear 1.2s infinite;
}
.iz-genis {
  top: -8px; height: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
  animation: iz-genis 34s linear 1.2s infinite;
}
.tasiyici { position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 0; animation: tasi 34s linear 1.2s infinite; }
.tasiyici svg { position: absolute; left: -2px; top: -9px; width: 18px; height: 18px; transform: rotate(45deg); fill: var(--ink); opacity: 0.55; }
@keyframes tasi { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 1.5% { opacity: 1; } 30% { opacity: 1; transform: translate3d(100%, 0, 0); } 30.5%, 100% { opacity: 0; transform: translate3d(100%, 0, 0); } }
@keyframes iz { 0% { opacity: 0; transform: scale(0, 1); } 1.5% { opacity: 0.9; } 30% { opacity: 0.85; transform: scale(1, 1); } 64% { opacity: 0; transform: scale(1, 3.4); } 100% { opacity: 0; transform: scale(1, 3.4); } }
@keyframes iz-genis { 0%, 4% { opacity: 0; transform: scale(0, 0.6); } 8% { opacity: 0.55; } 33% { opacity: 0.5; transform: scale(0.94, 1); } 68% { opacity: 0; transform: scale(1, 2.2); } 100% { opacity: 0; transform: scale(1, 2.2); } }

.kahraman-izgara { display: grid; gap: 52px; }
.kahraman-metin { display: grid; gap: 22px; align-content: start; }
.kahraman h1 {
  font-size: clamp(40px, 3vw + 24px, 66px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; text-wrap: balance;
}
.kahraman h1 em { font-style: normal; color: var(--blue); position: relative; white-space: nowrap; }
/* A runway centreline under the word: amber dashes painted in, left to right. */
.kahraman h1 em::after {
  content: ""; position: absolute; left: 0.04em; right: 0.04em; bottom: -0.06em; height: 0.075em; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 0.42em, transparent 0.42em 0.62em);
  transform-origin: left; animation: ciz-cizgi 900ms var(--egri-inis) 520ms both;
}
@keyframes ciz-cizgi { from { transform: scaleX(0); } }
.kahraman .lead { max-width: 560px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; }
.not-satiri { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0; color: var(--ink-muted); }
.not-satiri span { display: inline-flex; align-items: center; gap: 8px; }
.not-satiri span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.22); }
/* The product shot. */
.kahraman-gorsel { position: relative; display: grid; gap: 28px; align-content: start; }

/* Hero entry: the blocks come in one after another (CSS only, so it never waits for the script). */
.giris > * { animation: sahne 620ms var(--egri-cikis) both; }
.giris > :nth-child(2) { animation-delay: 70ms; }
.giris > :nth-child(3) { animation-delay: 140ms; }
.giris > :nth-child(4) { animation-delay: 210ms; }
.giris > :nth-child(n + 5) { animation-delay: 280ms; }
@keyframes sahne { from { opacity: 0; transform: translate3d(0, 14px, 0); } }


@keyframes sahne-cihaz { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); } }
.tarayici {
  position: relative; width: calc(var(--t) * 100%); border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--cihaz-golge);
}
.tarayici-cubuk { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--cubuk-zemin); border-bottom: 1px solid var(--line); }
.tarayici-cubuk i { width: 9px; height: 9px; border-radius: 50%; background: var(--light-off); }
.tarayici-cubuk i:first-child { background: #F2B8B0; } .tarayici-cubuk i:nth-child(2) { background: #F5D58A; } .tarayici-cubuk i:nth-child(3) { background: #A9D8B8; }
.adres {
  margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; border-radius: 999px;
  background: var(--adres-zemin); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-muted);
}
.adres svg { width: 10px; height: 10px; }
.tarayici img { width: 100%; height: auto; aspect-ratio: 8 / 5; }
/* The showcase screen: the same report demo laid over the capture's right panel (1360 x 850: panel 604 x 732 at 692, 92,
 * corners 28). Transparent and unshadowed so its edges are the capture's own. */
.ekran-sahne { position: relative; }
.ekran-sahne .rapor-demo { position: absolute; left: 50.882%; top: 10.824%; width: 44.412%; border-radius: 4.64% / 3.83%; background: transparent; box-shadow: none; }
.tarayici .rapor-demo img { aspect-ratio: auto; }

/* Reveal on scroll (only when the script runs: .js on <html>). */
.js [data-belir] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 700ms var(--egri-cikis), transform 700ms var(--egri-cikis); }
.js [data-belir].gorundu { opacity: 1; transform: none; }

/* ---------- The night apron (how it works and the level scale) */
.apron {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 0; color: #fff;
  background: var(--gren-acik), var(--gece-yildiz),
    radial-gradient(60% 48% at 72% 0%, rgba(96, 140, 255, 0.24) 0%, rgba(96, 140, 255, 0.08) 45%, rgba(96, 140, 255, 0) 75%),
    radial-gradient(90% 60% at 30% 100%, rgba(255, 194, 26, 0.06) 0%, rgba(255, 194, 26, 0) 65%),
    linear-gradient(180deg, var(--gece-1) 0%, var(--gece-2) 48%, var(--gece-3) 100%);
  background-size: 220px 220px, 260px 260px, 100% 100%, 100% 100%, 100% 100%;
  padding: clamp(56px, 7vw, 96px) 0;
}
@media (min-width: 820px) {
  .apron {
    width: min(100% - 2 * var(--kenar), 1320px); margin-inline: auto; border-radius: 36px;
    box-shadow: var(--gece-panel-golge);
  }
}
.apron::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: linear-gradient(rgba(157, 179, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 179, 211, 0.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 70% at 72% 38%, #000, transparent); mask-image: radial-gradient(70% 70% at 72% 38%, #000, transparent);
}
.apron .wrap { width: min(100% - 2 * var(--kenar), 1180px); }
.apron .eyebrow { color: var(--amber); }
.apron .lead { color: var(--on-ink-muted); }


.damga {
  position: absolute; right: 2%; top: -18px; transform: rotate(6deg); padding: 9px 14px; border-radius: 10px; background: var(--dugme-amber); color: var(--ink-sabit);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), inset 0 0 0 3px rgba(176, 120, 0, 0.35), 0 12px 24px -12px rgba(176, 120, 0, 0.6);
}

.olcek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.olcek li { position: relative; display: grid; gap: 4px; padding: 10px 8px 12px; border-radius: 14px; background: var(--olcek-zemin); box-shadow: var(--olcek-golge); text-align: center; }
.olcek b { font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-muted); }
.olcek span { font-size: 11.5px; line-height: 1.25; color: var(--ink-muted); }
.olcek .hedef {
  background: var(--gren-acik), var(--mavi-zemin); background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%;
  box-shadow: var(--hedef-golge);
}
.olcek .hedef b, .olcek .hedef span { color: #fff; }
.olcek .hedef em { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); font-style: normal; font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0; padding: 2px 7px; border-radius: 6px; background: var(--amber); color: var(--ink-sabit); white-space: nowrap; }

/* ---------- Prices */
.fiyat-ucretsiz {
  margin-top: 24px; display: grid; gap: 14px; align-items: center; padding: 22px 24px; border-radius: 22px; background: var(--serit-zemin);
  box-shadow: var(--serit-golge); border: 0;
}
.fiyat-ucretsiz .ad { font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0; color: var(--success); }
.fiyat-ucretsiz p { color: var(--ink-muted); font-size: 15px; }
.fiyat-ucretsiz strong { color: var(--ink); }
.planlar { margin-top: 44px; display: grid; gap: 16px; }
.plan {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; align-content: start; padding: 26px 26px 28px; border-radius: 28px;
  background: var(--kart-zemin); box-shadow: var(--kart-golge-fiyat); transition: transform 240ms var(--egri-cikis), box-shadow 240ms;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--kart-golge-yukari); }
.plan-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.plan-ad { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.plan-kim { padding: 4px 10px; border-radius: 999px; background: var(--surface-muted); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.plan-fiyat { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; white-space: nowrap; }
.plan-fiyat b { font-size: clamp(44px, 3vw + 24px, 58px); line-height: 1; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.plan-fiyat span { font-size: 16px; color: var(--ink-muted); }
.plan-alt { font-size: 15px; color: var(--ink-muted); }
.plan-alt strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* Launch prices: a fixed end date (data-bitis), counted down live; the prices after it are named, never struck
 * through. site.js hides every [data-lansman] once the date has passed. */
/* The launch countdown under the pricing heading (the atpl.com.tr pattern): a small label with a live dot, then
 * four dark tiles. */
.lansman { justify-self: center; margin-top: 16px; display: grid; justify-items: center; gap: 12px; }
.bolum-bas .lansman p { margin: 0; max-width: none; }
.bolum-bas .lansman .lansman-etiket {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.lansman-etiket i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18); animation: nabiz 1.6s ease-in-out infinite; }
.lansman-sayac { display: flex; align-items: center; gap: 8px; }
.lansman-sayac span {
  display: grid; justify-items: center; align-content: center; gap: 5px; width: 64px; height: 64px; border-radius: 12px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(170deg, #1F3B6B 0%, #14294D 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 20px -12px rgba(10, 26, 51, 0.7);
}
.lansman-sayac b { font-family: var(--font-mono); font-size: 24px; font-weight: 500; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lansman-sayac i { font-style: normal; font-size: 20px; font-weight: 700; color: var(--ink-muted); }
@media (max-width: 399px) { .lansman-sayac span { width: 58px; height: 58px; } .lansman-sayac { gap: 5px; } }
.plan-sonra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; color: var(--ink-muted); }
.plan-avantaj { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-soft); }
.plan-vurgu .plan-sonra { color: rgba(255, 255, 255, 0.84); }
.plan-vurgu .plan-avantaj { color: var(--mavi-3); background: #fff; }
[data-lansman][hidden] { display: none; }

/* The plan's Real Test allowance: its own box above the shared features (it is what sets the plans apart). */
.plan-prova {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 16px;
  background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--kil-guclu);
}
.plan-prova-sayi {
  flex: none; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: #fff;
  background: linear-gradient(165deg, var(--mavi-1), var(--mavi-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(20, 52, 154, 0.7);
}
.plan-prova-sayi.sinirsiz { font-size: 14px; letter-spacing: 0; }
.plan-prova b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.plan-prova small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.plan-vurgu .plan-prova { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.plan-vurgu .plan-prova b { color: #fff; }
.plan-vurgu .plan-prova-sayi { color: var(--mavi-3); background: #fff; box-shadow: 0 6px 14px -6px rgba(6, 20, 80, 0.5); }
.plan-vurgu .plan-prova small { color: rgba(255, 255, 255, 0.84); }
.plan ul { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }
.plan li b { display: block; font-weight: 600; }
.plan li strong { font-weight: 700; color: var(--ink); }
.plan-vurgu li strong { color: #fff; }
.plan li small { display: block; margin-top: 1px; font-size: 13.5px; color: var(--ink-muted); }
.plan-vurgu li small { color: rgba(255, 255, 255, 0.84); }
.plan-vurgu {
  isolation: isolate; background: var(--mavi-zemin); color: #fff;
  box-shadow: var(--mavi-kart-golge);
}
.plan-vurgu:hover {
  box-shadow: var(--mavi-kart-golge-yukari);
}
.plan-vurgu .plan-ad, .plan-vurgu .plan-fiyat span, .plan-vurgu .plan-alt { color: rgba(255, 255, 255, 0.9); }
.plan-vurgu .plan-alt strong { color: #fff; }
.plan-vurgu .plan-kim { background: rgba(255, 255, 255, 0.14); color: #fff; }
.plan-vurgu .plan-bas { padding-right: 104px; }
.plan-vurgu ul { border-top-color: rgba(255, 255, 255, 0.18); }
.plan-vurgu li svg { color: #fff; }
.plan-vurgu .damga { top: -14px; right: 18px; color: var(--mavi-3); background: #fff; box-shadow: inset 0 0 0 1px rgba(27, 64, 170, 0.18), 0 12px 24px -12px rgba(6, 20, 80, 0.55); font-weight: 600; }
.btn-beyaz { background: #fff; color: var(--mavi-3); box-shadow: 0 10px 24px -12px rgba(6, 20, 80, 0.6); }
.btn-beyaz:hover { background: #F2F6FF; }
/* Behind the content: grain, the contour lines and a faint glow low right. */
.plan-vurgu::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--gren-acik) 0 0 / 220px 220px, var(--kontur) right bottom / 100% 100% no-repeat,
    radial-gradient(60% 45% at 100% 100%, rgba(150, 190, 255, 0.14), transparent 70%);
}

.fiyat-dip { margin-top: 20px; display: grid; gap: 10px 32px; align-items: center; }
.fiyat-dip p { font-size: 14.5px; color: var(--ink-muted); max-width: 640px; }
.fiyat-giris a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 4px; font-weight: 600; color: var(--blue); text-decoration: none;
  border-radius: 8px;
}
.fiyat-giris a svg { width: 16px; height: 16px; transition: transform 200ms var(--egri-cikis); }
.fiyat-giris a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fiyat-giris a:hover svg { transform: translateX(3px); }
.fiyat-dip .fiyat-giris { color: var(--ink); font-size: 15px; white-space: nowrap; }
@media (min-width: 760px) {
  .fiyat-ucretsiz { grid-template-columns: auto 1fr auto; gap: 24px; }
  .fiyat-ortak { grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
  .fiyat-dip { grid-template-columns: 1fr auto; }
}
@media (min-width: 960px) { .planlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- FAQ */
.sss-izgara { display: grid; gap: 36px; }
.sss-liste { display: grid; gap: 10px; }
.sss-liste details { border-radius: 22px; background: var(--sss-zemin); box-shadow: var(--kart-golge-duz); }
.sss-liste summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 32px; gap: 16px; align-items: center; padding: 20px 22px; min-height: 64px;
  font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; border-radius: 22px;
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary:hover::after { background-color: var(--blue-soft); }
.sss-liste details { transition: box-shadow 240ms; }
.sss-liste details:hover { box-shadow: var(--kart-golge); }
.sss-liste summary::after {
  content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-muted) var(--arti-ikon) center / 14px no-repeat;
  transition: transform 260ms var(--egri-cikis), background-color 200ms;
}
.sss-liste details[open] summary::after { transform: rotate(45deg); background-color: var(--amber-soft); }
.sss-liste .cevap { padding: 0 22px 22px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.65; max-width: 720px; }
.sss-liste details[open] .cevap { animation: sahne 360ms var(--egri-cikis) both; }
/* The FAQ's side: heading, then a small card with the free start; both stay in view while the list scrolls. */
.sss-yan { display: grid; gap: 28px; align-content: start; }
.sss-kart {
  display: grid; gap: 10px; justify-items: start; padding: 24px; border-radius: 22px; color: #fff;
  background: var(--gren-acik), var(--gece-yildiz), var(--gece-zemin); background-size: 220px 220px, 260px 260px, 100% 100%, 100% 100%, 100% 100%;
  box-shadow: var(--sss-kart-golge);
}
.sss-kart-ust { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.sss-kart h3 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.sss-kart p:not(.sss-kart-ust) { font-size: 15px; line-height: 1.55; color: var(--on-ink-muted); }
.sss-kart .btn { margin-top: 6px; }
@media (min-width: 1000px) {
  .sss-izgara { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
  .sss-yan { position: sticky; top: calc(var(--ust-bar) + 32px); }
}

/* ---------- Footer: the night ground the page ends on, the same on every page; the one closing call to action
 * (Ücretsiz başla) sits under the brand line. */
.alt {
  position: relative; padding: 64px 0 36px; color: #E6EEFB;
  background: linear-gradient(180deg, #0E1628 0%, #0A111F 55%, #070C17 100%);
}
.alt-izgara { display: grid; gap: 40px; }
.alt .marka b { color: #fff; }
.alt .marka span { color: var(--on-ink-muted); }
.alt-marka p { margin-top: 14px; max-width: 340px; color: var(--on-ink-muted); font-size: 15px; line-height: 1.6; }
.alt-eylem { margin-top: 20px; }
.alt-sutunlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.alt h2 { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.alt ul { margin-top: 8px; display: grid; gap: 0; }
.alt ul a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: 15px; font-weight: 500; color: #E6EEFB; border-radius: 6px; transition: color 160ms; }
.alt ul a:hover { color: var(--amber); }
.alt-dip { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(157, 179, 211, 0.16); display: grid; gap: 10px; font-size: 13.5px; color: var(--on-ink-muted); }

/* ---------- Simple pages (yakında, 404) */
.basit { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - var(--ust-bar)); display: grid; align-items: center; padding: 56px 0 96px; margin-top: calc(-1 * var(--ust-bar)); padding-top: calc(var(--ust-bar) + 56px); }
.basit-kart { max-width: 640px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--kart-zemin); box-shadow: var(--kart-golge); display: grid; gap: 16px; }
.basit-kart h1 { font-size: clamp(32px, 2.4vw + 20px, 48px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; }
.basit-kart p { color: var(--ink-muted); }
.basit-kart .eylemler { margin-top: 8px; }
.cip { justify-self: start; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-text); }

/* ---------- Sample recording in the Part B card: the app's listening player, small (navy, amber disc, progress ring,
   the excerpt's own waveform). site.js sets --ilerleme (0..1) while it plays. */
.ornek { display: grid; gap: 8px; margin-top: 14px; }
.ornek-kayit {
  --ilerleme: 0; display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px;
  background: linear-gradient(180deg, #13284B 0%, #0A1A33 100%); box-shadow: var(--oynatici-golge);
}
.ornek-oynat {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: transparent; color: var(--ink-sabit);
}
.ornek-oynat::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #FFDB6B 0%, #FFC21A 55%, #F2AD00 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 160ms var(--egri-cikis);
}
.ornek-oynat:hover::before { transform: scale(1.05); }
.ornek-oynat:active::before { transform: scale(0.96); }
.ornek-oynat:focus-visible { outline-color: var(--amber); outline-offset: 2px; border-radius: 50%; }
.ornek-halka { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.ornek-halka circle { stroke: rgba(201, 214, 234, 0.18); }
.ornek-halka .ornek-ilerleme { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ilerleme) * 100); opacity: 0; transition: opacity 200ms; }
.ornek-kayit.caliyor .ornek-ilerleme, .ornek-kayit.basladi .ornek-ilerleme { opacity: 1; }
.ornek-ikon { position: relative; width: 16px; height: 16px; fill: currentColor; }
.ornek-ikon.oynat { margin-left: 2px; }
.ornek-ikon.duraklat, .ornek-kayit.caliyor .ornek-ikon.oynat { display: none; }
.ornek-kayit.caliyor .ornek-ikon.duraklat { display: block; }
.ornek-dalga { flex: 1 1 auto; min-width: 0; height: 22px; }
.ornek-dalga .sonuk { fill: rgba(201, 214, 234, 0.32); }
.ornek-dalga .dolu { fill: var(--amber); clip-path: inset(0 calc((1 - var(--ilerleme)) * 100%) 0 0); }
.ornek-sure { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--on-ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- Hero layout (copy, stats row; the product in a tilted instrument frame with two floating badges) */
.kahraman-izgara { gap: 64px; }
.istatistik {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; margin-top: 10px; padding-top: 26px;
  border-top: 1px solid var(--kil-guclu);
}
.istatistik b { display: block; font-size: clamp(30px, 1.6vw + 18px, 40px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.istatistik span { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.vitrin { position: relative; width: 100%; max-width: 500px; margin-inline: auto; animation: sahne-cihaz 900ms var(--egri-cikis) 160ms both; }
.cerceve {
  position: relative; padding: 14px 14px 16px; border-radius: 30px; background: var(--kart-zemin); box-shadow: var(--cihaz-golge);
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg);
}
.cerceve-ust {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 2px 8px 12px;
  font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.cerceve-ust .canli { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.cerceve-ust .canli i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.24); animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.cerceve img { width: 100%; border-radius: 20px; box-shadow: 0 0 0 1px var(--kil); }
/* The report demo: the app's own five tabs, each a real capture. The header (level card + tab bar) swaps with the tab, the
 * body scrolls like the app's. Transparent buttons sit over the captured tab bar (604 x 224 header: tabs 108 x 58 from
 * x 28, every 110; y 156.6). The tabs cycle on their own until the visitor touches the demo. */
.cerceve { transition: transform 600ms var(--egri-cikis); }
.cerceve:hover, .cerceve:focus-within { transform: none; }
.rapor-demo { position: relative; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--kil); }
.rapor-demo img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.rapor-demo [hidden] { display: none; }
.rd-ust { position: relative; }
.rd-sekmeler { position: absolute; inset: 0; }
.rd-sekmeler button {
  position: absolute; top: 69.9%; width: 17.88%; height: 25.9%; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.rd-sekmeler button:nth-child(1) { left: 4.636%; }
.rd-sekmeler button:nth-child(2) { left: 22.848%; }
.rd-sekmeler button:nth-child(3) { left: 41.06%; }
.rd-sekmeler button:nth-child(4) { left: 59.272%; }
.rd-sekmeler button:nth-child(5) { left: 77.483%; }
/* Phones get the app's own phone screen (390 x 374 header: tabs 66.8 x 58 from x 24, every 68.8; y 304), so the text
 * reads at its real size instead of a shrunken desktop capture. */
.rapor-demo picture { display: block; }
@media (max-width: 699px) {
  .rd-sekmeler button { top: 81.28%; width: 17.13%; height: 15.51%; }
  .rd-sekmeler button:nth-child(1) { left: 6.154%; }
  .rd-sekmeler button:nth-child(2) { left: 23.795%; }
  .rd-sekmeler button:nth-child(3) { left: 41.436%; }
  .rd-sekmeler button:nth-child(4) { left: 59.077%; }
  .rd-sekmeler button:nth-child(5) { left: 76.718%; }
  .rd-govde { aspect-ratio: 390 / 420; }
  /* The showcase: the desktop capture gives way to the phone screen under the browser bar. */
  .ekran-sahne > img { display: none; }
  .ekran-sahne .rapor-demo { position: static; width: 100%; border-radius: 0; }
  .ekran-sahne .rd-devam { display: inline-flex; }
}
.rd-sekmeler button[aria-selected="false"]:hover { background: rgba(23, 76, 216, 0.07); box-shadow: inset 0 0 0 1px rgba(23, 76, 216, 0.16); }
.rd-sekmeler button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* While the tabs cycle: an amber line fills under the selected tab for the time it stays. */
.rd-dolum { position: absolute; left: 18%; right: 18%; bottom: -5px; height: 3px; border-radius: 3px; background: rgba(255, 194, 26, 0.22); opacity: 0; overflow: hidden; }
.rd-dolum::after { content: ""; position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.rapor-demo[data-oto] .rd-sekmeler [aria-selected="true"] .rd-dolum { opacity: 1; }
.rapor-demo[data-oto] .rd-sekmeler [aria-selected="true"] .rd-dolum::after { animation: rd-dol var(--rd-sure, 4800ms) linear forwards; }
@keyframes rd-dol { to { transform: scaleX(1); } }
.rd-govde-kap { position: relative; }
/* No scrollbar: it would narrow the body against the header; the fade and the "Devamı" pill say there is more. The body
 * takes the wheel only after the visitor has clicked into the demo (data-elle): until then the page scrolls past it, and
 * at its ends the scroll carries on to the page. */
.rd-govde { aspect-ratio: 604 / 508; overflow: hidden; scrollbar-width: none; }
.rapor-demo[data-elle] .rd-govde { overflow-y: auto; }
.rd-govde::-webkit-scrollbar { display: none; }
.rd-govde:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rd-panel:not([hidden]) { animation: rd-gel 380ms var(--egri-cikis) both; }
@keyframes rd-gel { from { opacity: 0; transform: translateY(8px); } }
/* More below: a soft fade and a small "Devamı" pill, gone once the body is scrolled to its end. */
.rd-govde-kap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%); opacity: 0; transition: opacity 220ms ease;
}
.rd-devam {
  position: absolute; left: 50%; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px;
  border: 0; border-radius: 999px; font: 600 12px/1.4 var(--font-sans); color: #fff; background: rgba(10, 26, 51, 0.82); pointer-events: none; cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(10, 26, 51, 0.6); opacity: 0; transform: translate(-50%, 6px); transition: opacity 220ms ease, transform 220ms ease;
}
.rd-devam::before { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.rapor-demo[data-devam] .rd-govde-kap::after, .rapor-demo[data-devam] .rd-devam { opacity: 1; }
.rapor-demo[data-devam] .rd-devam { pointer-events: auto; }
.rd-devam:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.rapor-demo[data-devam] .rd-devam { transform: translate(-50%, 0); animation: rd-zipla 2.4s ease-in-out infinite; }
@keyframes rd-zipla { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 3px); } }
.rozet {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; border-radius: 18px;
  background: var(--cam-panel-zemin); box-shadow: var(--cam-panel-golge), 0 22px 40px -26px rgba(10, 26, 51, 0.55);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  animation: suzul 6s ease-in-out infinite;
}
.rozet-ikon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--dugme-amber); color: var(--ink-sabit); box-shadow: var(--dugme-amber-golge); }
.rozet-ikon.mavi { background: linear-gradient(165deg, var(--mavi-1), var(--mavi-3)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(20, 52, 154, 0.8); }
.rozet-ikon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rozet b { display: block; font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.rozet small { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.rozet-1 { top: -24px; left: -40px; }
.rozet-2 { bottom: -24px; right: -28px; animation-direction: reverse; }
@keyframes suzul { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } }
@media (min-width: 1024px) {
  .kahraman { padding: calc(var(--ust-bar) + 64px) 0 88px; }
  .ucus { top: calc(var(--ust-bar) + 22px); }
  .kahraman-izgara { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
}
@media (max-width: 1023px) { .rozet-1 { left: -18px; } .rozet-2 { right: -14px; } }
@media (max-width: 699px) {
  .cerceve { transform: none; padding: 10px 10px 12px; border-radius: 24px; }
  .cerceve-ust { justify-content: space-between; margin-left: 6px; }
  .rapor-demo { border-radius: 16px; }
  .rd-sekmeler button { border-radius: 10px; }
  .rozet { display: none; }
  .istatistik { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- The strip under the hero: four facts in a row */
.serit { position: relative; padding: 18px 0; background: var(--serit-zemin), linear-gradient(var(--gun-1), var(--gun-1)); box-shadow: inset 0 1px 0 var(--kil), inset 0 -1px 0 var(--kil); }
.serit-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.serit-ic span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0; color: var(--ink-soft); }
.serit-ic svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--blue); }
.serit-ic .nokta { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.2); }
@media (max-width: 699px) { .serit-ic { justify-content: flex-start; gap: 10px 18px; } .serit-ic .nokta { display: none; } }

/* ---------- Sections: the day, section by section; each its own flat tint so the sections read apart */
.bolum { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 112px) 0; }
#ekran { background: var(--zb-2); }
#ozellikler { background: var(--zb-3); }
#nasil-calisir { background: var(--zb-4); }
#fiyatlar { background: var(--zb-6); }
#sss { background: var(--zb-7); }
/* A hairline where one section's ground meets the next. */
.bolum + .bolum { box-shadow: inset 0 1px 0 var(--kil); }
/* Faint chart grid behind the product screen and the features, fading out at the edges. */
#ekran::before, #ozellikler::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--izgara-cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--izgara-cizgi) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
}
#ekran::before { -webkit-mask-image: radial-gradient(70% 55% at 50% 70%, #000 0%, rgba(0, 0, 0, 0.4) 50%, transparent 80%); mask-image: radial-gradient(70% 55% at 50% 70%, #000 0%, rgba(0, 0, 0, 0.4) 50%, transparent 80%); }
#ozellikler::before { -webkit-mask-image: radial-gradient(60% 50% at 85% 20%, #000 0%, rgba(0, 0, 0, 0.35) 50%, transparent 78%); mask-image: radial-gradient(60% 50% at 85% 20%, #000 0%, rgba(0, 0, 0, 0.35) 50%, transparent 78%); }
.ortali { margin-inline: auto; text-align: center; justify-items: center; }
.ortali .lead { margin-inline: auto; }

/* ---------- Showcase: the practice screen, big, in the browser frame */
.ekran-buyuk { margin-top: 48px; }
.ekran-buyuk .tarayici { width: 100%; border-radius: 22px; }
.ekran-buyuk .tarayici-cubuk { height: 40px; padding: 0 16px; }
.ekran-buyuk .tarayici-cubuk i { width: 10px; height: 10px; }
@media (max-width: 699px) {
  .ekran-buyuk { margin-top: 36px; }
  .ekran-buyuk .tarayici { border-radius: 14px; }
  .ekran-buyuk .tarayici-cubuk { height: 30px; padding: 0 10px; }
  .ekran-buyuk .adres { height: 20px; font-size: 10px; }
}

/* ---------- Features: bento grid */
.bento { margin-top: 48px; display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kart {
  position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 28px;
  background: var(--kart-zemin); box-shadow: var(--kart-golge); transition: transform 240ms var(--egri-cikis), box-shadow 240ms;
}
.kart:hover { transform: translateY(-3px); box-shadow: var(--kart-golge-yukari); }
.kart-genis { grid-column: span 4; } .kart-uzun { grid-column: span 2; } .kart-yarim { grid-column: span 3; } .kart-ucte { grid-column: span 2; }
.kart h3 { font-size: 21px; line-height: 1.22; font-weight: 700; letter-spacing: -0.02em; }
.kart p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.kart-bol { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 28px; align-items: center; }
.kart-bol > div:first-child { display: grid; gap: 10px; align-content: start; }
/* The night card: the re-scored suggestion. */
.kart-gece {
  color: #fff; background: var(--gren-acik), var(--gece-yildiz), var(--gece-zemin);
  background-size: 220px 220px, 260px 260px, 100% 100%, 100% 100%, 100% 100%; box-shadow: var(--gece-kart-golge);
}
.kart-gece:hover { box-shadow: var(--gece-kart-golge-yukari); }
.kart-gece p { color: var(--on-ink-muted); }
.kart .ornek { margin-top: 8px; }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kart-genis, .kart-uzun { grid-column: span 4; }
  .kart-yarim, .kart-ucte { grid-column: span 2; }
  .bento > .kart-ucte:nth-child(5) { grid-column: span 4; }
}
@media (max-width: 699px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kart-genis, .kart-uzun, .kart-yarim, .kart-ucte, .bento > .kart-ucte:nth-child(5) { grid-column: auto; }
  .kart { padding: 24px 22px; border-radius: 24px; }
  .kart-bol { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ---------- Feature cards: each shows its feature as the app does (a small piece of the real UI on top, then the
 * title and one line). Mockup values; the wording mirrors the app's report. */
.kart .kart-ust { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.kart h3 { margin-top: 6px; }
.kart-bol > div:first-child h3 { font-size: clamp(24px, 1.2vw + 12px, 30px); }
.kart-bol > div:first-child { align-self: start; padding-top: 6px; }
.m-ayrica { list-style: none; margin: 10px 0 0; padding: 14px 0 0; display: grid; gap: 9px; border-top: 1px solid var(--line); }
.m-ayrica li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.m-ayrica li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.m-ayrica b { font-weight: 600; color: var(--ink); }
/* "Ne dersen yükselir": the coach's list. */
.m-koc { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 26px 44px -30px rgba(10, 26, 51, 0.5); }
.kart .m-baslik { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--ink); }
.m-baslik b { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; background: var(--blue-soft); color: var(--blue); }
.m-yuk { display: grid; gap: 3px; padding: 11px 13px; border-radius: 14px; background: var(--surface-muted); }
.m-olcut { justify-self: start; margin-bottom: 3px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--blue-soft); color: var(--blue); }
.kart .m-dedin, .kart .m-de { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.45; }
.m-dedin span, .m-de span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.m-dedin s { color: var(--ink-muted); text-decoration-color: rgba(214, 72, 72, 0.75); text-decoration-thickness: 1.5px; }
.m-de b { font-weight: 600; color: var(--ink); }
.m-de mark { padding: 0 2px; border-radius: 4px; color: var(--success); background: linear-gradient(var(--success-soft), var(--success-soft)) no-repeat 0 0 / 100% 100%; }
.kart .m-neden { padding-left: 48px; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }
/* The corrections are marked one after another once the cards come into view. */
.js .bento:not(.gorundu) .m-de mark { background-size: 0 100%; }
.bento .m-de mark { transition: background-size 700ms var(--egri-cikis); }
.bento .m-yuk:nth-of-type(2) mark { transition-delay: 450ms; }
.bento .m-yuk:nth-of-type(3) mark { transition-delay: 800ms; }
.bento .m-yuk:nth-of-type(4) mark { transition-delay: 1150ms; }
/* The re-scored suggestion: 4 -> 5. */
.m-dogrula { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.m-seviye {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 38px; font-weight: 700; letter-spacing: -0.04em; color: #fff;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(201, 214, 234, 0.22);
}
.m-seviye-yeni { color: var(--ink-sabit); background: linear-gradient(160deg, #FFD966, #FFB800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 26px -10px rgba(255, 194, 26, 0.75); }
.m-ok { width: 40px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kart .m-rozet {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4; color: #8EF0C2; background: rgba(91, 217, 164, 0.14);
}
.m-rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5BD9A4; }
.kart-gece { grid-template-rows: repeat(4, auto) 1fr; }
.m-deseydin { align-self: end; margin-top: 10px; display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(201, 214, 234, 0.16); }
.kart .m-deseydin-ust { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.kart .m-deseydin p[lang] {
  font-size: 13.5px; line-height: 1.55; color: #E6EEFB;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.kart .m-deseydin-alt { font-family: var(--font-mono); font-size: 12px; color: var(--on-ink-muted); }
/* The question's trap. */
.m-tuzak { display: grid; gap: 6px; margin-bottom: 4px; padding: 14px 16px; border-radius: 16px; background: var(--amber-soft); box-shadow: inset 0 0 0 1px rgba(224, 163, 26, 0.28); }
.kart .m-tuzak-ust { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-text); }
.m-tuzak-ust::before { content: "!"; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: var(--ink-sabit); background: var(--amber); }
.kart .m-tuzak p:not(.m-tuzak-ust) { font-size: 14px; line-height: 1.5; color: var(--amber-deep); }
.m-tuzak b { font-weight: 700; }
/* Speech tempo. */
.m-tempo { display: grid; gap: 10px; margin-bottom: 4px; padding: 14px 16px; border-radius: 16px; background: var(--surface-muted); }
.kart .m-tempo-sayi { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.m-tempo-sayi b { font-family: var(--font-mono); font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.m-tempo-sayi span { font-size: 12px; color: var(--ink-muted); }
.m-tempo-sayi em { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--success); background: var(--success-soft); }
.m-tempo-olcek { position: relative; height: 8px; border-radius: 999px; background: var(--track); }
.m-tempo-olcek::before { content: ""; position: absolute; top: 0; bottom: 0; left: 22%; right: 24%; border-radius: inherit; background: var(--success-soft); box-shadow: inset 0 0 0 1px rgba(15, 123, 79, 0.25); }
.m-tempo-olcek i { position: absolute; top: -4px; left: 41%; width: 3px; height: 16px; border-radius: 2px; background: var(--ink); }
.m-tempo-ek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.m-tempo-ek dt { font-size: 11px; color: var(--ink-muted); }
.m-tempo-ek dd { margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.kart .ornek { margin: 0 0 4px; }
/* Picture follow-ups: the exchange. */
.m-takip { display: grid; gap: 8px; margin-bottom: 4px; }
.kart .m-balon { max-width: 90%; display: grid; gap: 2px; padding: 10px 13px; border-radius: 15px 15px 15px 5px; background: var(--surface-muted); }
.m-balon span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.m-balon q { quotes: none; font-size: 14px; line-height: 1.45; color: var(--ink); }
.kart .m-balon-sen { justify-self: end; border-radius: 15px 15px 5px 15px; background: var(--blue-soft); }
.kart .m-balon-takip { background: var(--surface); box-shadow: 0 0 0 1.5px var(--amber), 0 14px 26px -18px rgba(224, 163, 26, 0.6); }
.m-balon-takip span { color: var(--amber-text); }
.m-balon em { margin-top: 2px; font-size: 12px; font-style: normal; color: var(--ink-muted); }
/* The model answer, sentence by sentence against the answer's steps. */
.m-ornek { list-style: none; margin: 0 0 4px; padding: 14px 16px; display: grid; gap: 8px; border-radius: 16px; background: var(--surface-muted); counter-reset: adim; }
.m-ornek li { counter-increment: adim; display: grid; grid-template-columns: 22px 84px minmax(0, 1fr); gap: 10px; align-items: center; }
.m-ornek li::before { content: counter(adim); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--mavi-2); }
.m-ornek span { font-size: 11.5px; font-weight: 600; color: var(--blue); }
.m-ornek q { quotes: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--ink); }
@media (max-width: 699px) {
  .m-ornek li { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
  .m-ornek q { grid-column: 2; white-space: normal; }
  .kart .m-neden { padding-left: 0; }
  .m-yuk:nth-of-type(4) { display: none; }
  .kart .m-dedin, .kart .m-de { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- How it works + the level scale, on the night apron: the steps as a route on the left (numbered stops
 * joined by a dashed line, the last one amber), what the report measures on the right. */
.rota-izgara { margin-top: 48px; display: grid; gap: 40px; }
@media (min-width: 1024px) { .rota-izgara { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; }
.adim { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding-bottom: 30px; }
.adim:last-child { padding-bottom: 0; }
.adim-no {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(157, 179, 211, 0.3);
}
.adim:last-child .adim-no { background: var(--dugme-amber); color: var(--ink-sabit); box-shadow: var(--dugme-amber-golge); }
.adim h3 { align-self: end; padding-top: 10px; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.adim p { font-size: 15px; line-height: 1.6; color: var(--on-ink-muted); }
/* The route between the stops. */
.adim:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--route-dash) 0 5px, transparent 5px 10px); opacity: 0.6;
}
.seviye-blok {
  scroll-margin-top: calc(var(--ust-bar) + 24px); padding: 28px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); box-shadow: inset 0 0 0 1px rgba(157, 179, 211, 0.14);
}
.seviye-ust { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.seviye-blok h3 { margin-top: 8px; font-size: clamp(22px, 1vw + 14px, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.seviye-blok > p:not(.seviye-ust) { margin-top: 8px; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--on-ink-muted); }
@media (max-width: 599px) { .seviye-blok { padding: 22px 18px; border-radius: 22px; } }

/* ---------- The criteria tiles and the level scale on the apron */
.apron h2 { color: #fff; }
.olcut-k {
  display: grid; gap: 8px; align-content: start; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(157, 179, 211, 0.16);
  transition: transform 240ms var(--egri-cikis), box-shadow 240ms;
}
.olcut-k:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(157, 179, 211, 0.3); }
.olcut-izgara { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.olcut-k { padding: 18px 20px 20px; gap: 4px; }
.olcut-k b { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.olcut-k .en { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; color: #A9C2FF; }
.olcut-k .yer { justify-self: start; margin-top: 8px; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; background: rgba(141, 176, 255, 0.14); color: #C9D8FF; }
.olcut-k .yer.amber { background: rgba(255, 194, 26, 0.16); color: #FFD25E; }
.apron .olcek { margin-top: 26px; }
.apron .olcek li { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(157, 179, 211, 0.14); }
.apron .olcek b, .apron .olcek span { color: var(--on-ink-muted); }
.apron .olcek .hedef b, .apron .olcek .hedef span { color: #fff; }
@media (max-width: 560px) { .olcek { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } }
@media (max-width: 1023px) { .olcut-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .olcut-izgara { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Prices (layout: free tier, three plans, the notes under them) */
.fiyat-ucretsiz { max-width: 900px; margin-inline: auto; }
.planlar { margin-top: 28px; }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan ul { margin-top: 4px; }
.plan-hesap { font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0; color: var(--ink-muted); }
.plan-ozel { font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.plan-vurgu .plan-hesap, .plan-vurgu .plan-ozel { color: rgba(255, 255, 255, 0.86); }
.plan .btn { margin-top: auto; width: 100%; }
.fiyat-guven { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.fiyat-guven li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0; color: var(--ink-muted); }
.fiyat-guven svg { width: 16px; height: 16px; flex: none; color: var(--blue); }
.fiyat-dip { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; text-align: center; }
@media (max-width: 959px) { .planlar { max-width: 480px; margin-inline: auto; } }
/* Side by side, the three cards share their rows (subgrid): price, launch line, allowance box, list and button sit
 * on the same lines however long each card's texts run. Nine rows: head, price, after-launch, per day, the sum,
 * allowance, list, who it is for, button. */
@media (min-width: 960px) {
  .planlar { row-gap: 0; }
  .plan { display: grid; grid-row: span 9; grid-template-rows: subgrid; row-gap: 14px; align-content: stretch; }
  .plan .btn { align-self: end; }
}

/* ---------- FAQ (layout: the side stays in view while the list scrolls) */
@media (min-width: 1000px) { .sss-izgara { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* ---------- Closing: one line under the buttons */

/* ---------- Footer (layout: brand, three columns, then a bottom bar) */
.alt-dip a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.alt-dip a:hover { color: var(--amber); }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.alt-not { margin-top: 14px; font-size: 13px; color: rgba(201, 214, 234, 0.6); }
@media (min-width: 820px) {
  .alt-izgara { grid-template-columns: 1.3fr 2.7fr; gap: 64px; }
  .alt-sutunlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alt-dip { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Theme toggle (assets/js/tema.js). The header's round glass button (the menu button's face): a moon while the
   page is light, the sun while it is dark. On phones the main page has no room for it in the bar, so it sits in the menu
   as a labelled switch. Both are hidden until the script has run. */
.tema-dugme {
  position: relative; display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; background: var(--cam-zemin); box-shadow: var(--kucuk-golge); color: var(--ink);
}
.tema-js .tema-dugme { display: grid; }
.tema-dugme:hover { background: var(--cam-hover); }
.tema-dugme:focus-visible { border-radius: 50%; }
.tema-dugme svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 240ms, transform 420ms var(--egri-cikis); }
.tema-dugme .gunes, .tema-dugme[aria-pressed="true"] .ay { opacity: 0; transform: rotate(-70deg) scale(0.5); }
.tema-dugme[aria-pressed="true"] .gunes { opacity: 1; transform: none; }
@media (max-width: 639px) { .tema-js .tema-dugme-menulu { display: none; } }
.menu-tema { display: none; }
@media (max-width: 639px) { .tema-js .menu-tema { display: grid; } }
.menu-tema-dugme {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px 0 16px; border: 0;
  border-radius: 14px; background: transparent; font-weight: 500; text-align: left; cursor: pointer;
}
.menu-tema-dugme:hover { background: var(--surface-muted); }
.anahtar { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 200ms; }
.anahtar::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(10, 26, 51, 0.35); transition: transform 240ms var(--egri-cikis);
}
.menu-tema-dugme[aria-pressed="true"] .anahtar { background: var(--isaret-mavi); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.menu-tema-dugme[aria-pressed="true"] .anahtar::after { transform: translateX(16px); }

/* The switch itself: a gentle cross-fade of the whole page (View Transitions), or a short colour transition without them. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.tema-gecis, .tema-gecis *, .tema-gecis *::before, .tema-gecis *::after {
  transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, box-shadow 360ms ease, fill 360ms ease, stroke 360ms ease !important;
}

/* ---------- Hero: the "new" badge pointing to the Real Test */
.yeni-rozet {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--cam-panel-zemin); box-shadow: var(--cam-panel-golge); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
  line-height: 1.3; letter-spacing: -0.005em; transition: transform 200ms var(--egri-cikis), box-shadow 200ms;
}
.yeni-rozet:hover { transform: translateY(-1px); box-shadow: var(--cam-panel-golge), 0 14px 26px -18px rgba(10, 26, 51, 0.6); }
.yeni-etiket {
  flex: none; padding: 5px 11px; border-radius: 999px; background: var(--dugme-amber); color: var(--ink-sabit); box-shadow: var(--dugme-amber-golge);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
}
.yeni-rozet svg { flex: none; width: 16px; height: 16px; color: var(--blue); transition: transform 200ms var(--egri-cikis); }
.yeni-rozet:hover svg { transform: translateX(3px); }

/* ---------- The Real Test (#gercek-sinav): a night panel with the exam as a video call. The composed scene uses the
 * examiner as an abstract voice presence (the app's is an orb too) and an illustrated candidate with the camera analysis drawn as the
 * app draws it (kamera/cizim.ts: small white tracking points with a dark rim, a white corner bracket, the status pill). */
#gercek-sinav { background: var(--zb-1); padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 6vw, 88px); }
.prova {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: var(--gren-acik), var(--gece-yildiz),
    radial-gradient(55% 50% at 78% 18%, rgba(96, 140, 255, 0.3) 0%, rgba(96, 140, 255, 0.08) 45%, rgba(96, 140, 255, 0) 75%),
    radial-gradient(80% 60% at 10% 100%, rgba(255, 194, 26, 0.08) 0%, rgba(255, 194, 26, 0) 65%),
    linear-gradient(180deg, var(--gece-1) 0%, var(--gece-2) 52%, var(--gece-3) 100%);
  background-size: 220px 220px, 260px 260px, 100% 100%, 100% 100%, 100% 100%;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}
@media (min-width: 820px) {
  .prova { width: min(100% - 2 * var(--kenar), 1320px); margin-inline: auto; border-radius: 36px; box-shadow: var(--gece-panel-golge); }
}
.prova::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: linear-gradient(rgba(157, 179, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 179, 211, 0.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 60% at 75% 35%, #000, transparent); mask-image: radial-gradient(60% 60% at 75% 35%, #000, transparent);
}
.prova .wrap { width: min(100% - 2 * var(--kenar), 1180px); }
.prova .eyebrow { color: var(--amber); }
.prova .h2 { color: #fff; }
.prova .lead { color: var(--on-ink-muted); }
.prova-izgara { display: grid; gap: 56px; align-items: center; }
.prova-metin { display: grid; gap: 20px; align-content: start; }
.prova-metin .eylemler { margin-top: 6px; }
.prova-liste { margin-top: clamp(48px, 5vw, 72px); display: grid; gap: 28px 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prova-liste li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--on-ink-muted); }
.prova-liste b { display: block; margin-bottom: 1px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.prova-ikon {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--amber);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(157, 179, 211, 0.2);
}
.prova-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prova-gizlilik { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--on-ink-muted); }
.prova-gizlilik svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; }

/* The scene: the call, and three chips floating over its edges. */
.prova-sahne { position: relative; margin: 0; padding: 0 0 4px; }
.cagri {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 11; border-radius: 26px;
  background: radial-gradient(70% 62% at 40% 40%, #1B3A72 0%, #122A54 42%, #0D1F3E 70%, #0A1830 100%);
  box-shadow: inset 0 1px 0 rgba(160, 190, 255, 0.18), inset 0 0 0 1px rgba(157, 179, 211, 0.16), 0 2px 6px rgba(4, 10, 24, 0.35),
    0 40px 70px -34px rgba(2, 8, 22, 0.95), 0 0 0 10px rgba(255, 255, 255, 0.025);
}
.cagri::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7;
  background: var(--gece-yildiz); background-size: 260px 260px;
}
/* The examiner: an abstract voice presence, not a face (drawn by tools/svg.mjs). Back to front: a halo, a slow outer
 * ring, the approach-ring instrument with the part's progress in amber, a ring of voice bars, and the glass orb with
 * light flowing inside it. Everything that moves animates transform or opacity on its own element; only the bar ring
 * (small, flat fills) repaints. With reduced motion each part rests at its drawn frame. */
.gorevli { position: absolute; z-index: 1; left: 40%; top: 41%; width: 64%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.gorevli > * { position: absolute; }
.gorevli svg { display: block; overflow: visible; }
.gv-dis, .gv-halka { inset: 0; width: 100%; height: 100%; }
.gv-hale {
  inset: 4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64, 112, 255, 0.5) 0%, rgba(52, 100, 245, 0.42) 54%, rgba(40, 86, 230, 0.16) 70%, rgba(30, 72, 210, 0.05) 86%, rgba(27, 77, 219, 0) 100%);
  animation: gv-hale 2.8s ease-in-out infinite;
}
.gv-dis { animation: gv-don 120s linear infinite; }
/* The voice: every bar swells and settles on the same uneven beat; s0-s11 (distance from the top) delay it, so the
 * voice runs down both sides as a wave. */
.gv-spektrum { inset: 0; width: 100%; height: 100%; }
.gv-spektrum rect { transform-box: fill-box; transform-origin: 50% 100%; animation: gv-cubuk 1.4s ease-in-out infinite; }
.gv-spektrum .s1 { animation-delay: -0.08s; } .gv-spektrum .s2 { animation-delay: -0.16s; } .gv-spektrum .s3 { animation-delay: -0.24s; }
.gv-spektrum .s4 { animation-delay: -0.32s; } .gv-spektrum .s5 { animation-delay: -0.4s; } .gv-spektrum .s6 { animation-delay: -0.48s; }
.gv-spektrum .s7 { animation-delay: -0.56s; } .gv-spektrum .s8 { animation-delay: -0.64s; } .gv-spektrum .s9 { animation-delay: -0.72s; }
.gv-spektrum .s10 { animation-delay: -0.8s; } .gv-spektrum .s11 { animation-delay: -0.88s; }
.gv-kure {
  left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 92% at 50% 100%, #7FAEFF 0%, #3A70FF 17%, #1B4DDB 34%, #11309A 56%, #091B57 78%, #050D2D 100%);
  box-shadow: 0 0 34px 2px rgba(56, 108, 255, 0.45), 0 30px 60px -24px rgba(2, 8, 30, 0.95);
  animation: gv-nefes 2.8s ease-in-out infinite;
}
.gv-kure > * { position: absolute; inset: 0; }
.gv-kure svg { width: 100%; height: 100%; }
/* Light inside the glass: dawn rising from below (the page's own dawn-to-night sky, caught in a lens), two soft lights
 * drifting round, and a core that brightens with the voice. */
.gv-isik { inset: -10%; mix-blend-mode: screen; background: radial-gradient(36% 28% at 30% 34%, rgba(100, 152, 255, 0.5), rgba(100, 152, 255, 0)); animation: gv-don 18s linear infinite; }
.gv-isik-2 { background: radial-gradient(30% 24% at 72% 60%, rgba(156, 208, 255, 0.42), rgba(156, 208, 255, 0)); animation-duration: 25s; animation-direction: reverse; }
.gv-ufuk {
  animation: gv-salin 8s ease-in-out infinite alternate;
  background: radial-gradient(26% 2.4% at 50% 84%, rgba(255, 204, 92, 0.92), rgba(255, 176, 48, 0)), radial-gradient(62% 11% at 50% 72%, rgba(196, 222, 255, 0.42), rgba(196, 222, 255, 0)), radial-gradient(44% 9% at 50% 88%, rgba(255, 186, 40, 0.28), rgba(255, 186, 40, 0));
}
.gv-cekirdek { background: radial-gradient(42% 32% at 50% 68%, rgba(236, 244, 255, 0.6), rgba(130, 180, 255, 0.2) 50%, rgba(130, 180, 255, 0)); mix-blend-mode: screen; animation: gv-ses 2.8s ease-in-out infinite; }
.gv-gren { background: var(--gren-acik); background-size: 120px 120px; opacity: 0.55; mix-blend-mode: overlay; }
@keyframes gv-don { to { transform: rotate(360deg); } }
@keyframes gv-salin { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes gv-cubuk { 0%, 100% { transform: scaleY(0.55); } 20% { transform: scaleY(1); } 36% { transform: scaleY(0.72); } 54% { transform: scaleY(0.94); } 74% { transform: scaleY(0.62); } }
/* One speaking rhythm for the orb, its core and its halo: uneven, like syllables. */
@keyframes gv-nefes { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.018); } 26% { transform: scale(1.006); } 42% { transform: scale(1.026); } 58% { transform: scale(1.01); } 74% { transform: scale(1.022); } 88% { transform: scale(1.004); } }
@keyframes gv-ses { 0%, 100% { opacity: 0.7; } 14% { opacity: 0.95; } 26% { opacity: 0.78; } 42% { opacity: 1; } 58% { opacity: 0.82; } 74% { opacity: 0.96; } 88% { opacity: 0.74; } }
@keyframes gv-hale { 0%, 100% { opacity: 0.82; } 14% { opacity: 0.94; } 26% { opacity: 0.86; } 42% { opacity: 1; } 58% { opacity: 0.88; } 74% { opacity: 0.97; } 88% { opacity: 0.84; } }
.cagri-ust, .cagri-soz, .cagri-sen { position: absolute; z-index: 2; }
.cagri-ust { left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.cagri-bolum small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-muted); }
.cagri-bolum b { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.cagri-sag { display: flex; align-items: center; gap: 10px; }
.cagri-kayit {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 194, 26, 0.35);
}
.cagri-kayit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(255, 194, 26, 0.8); animation: nabiz 1.2s ease-in-out infinite; }
.cagri-sure { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
/* What the examiner is asking, with the app's name line and state pill. */
.cagri-soz {
  left: 16px; bottom: 16px; width: min(58%, 340px); display: grid; gap: 8px; padding: 12px 14px 13px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 30, 60, 0.72), rgba(10, 22, 46, 0.82));
  box-shadow: inset 0 1px 0 rgba(160, 190, 255, 0.14), inset 0 0 0 1px rgba(157, 179, 211, 0.18), 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cagri-kim { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--on-ink-muted); }
.cagri-kim b { font-size: 14px; font-weight: 600; color: #fff; }
.cagri-durum {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #E6EEFB;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.cagri-durum i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 194, 26, 0.7); }
.cagri-soz q { quotes: "“" "”"; font-size: 15px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
/* The candidate's tile: an illustration (no real face) with the camera analysis over it. */
.cagri-sen {
  right: 16px; bottom: 16px; width: 39%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #1A2440;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 34px -16px rgba(0, 0, 0, 0.9);
}
.yuz-svg { display: block; width: 100%; height: 100%; }
.yuz-analiz .yuz-iz circle { fill: rgba(255, 255, 255, 0.92); stroke: rgba(10, 26, 51, 0.45); stroke-width: 1.6; paint-order: stroke; animation: iz-parla 3.2s ease-in-out infinite; }
.yuz-analiz .yuz-iz circle:nth-child(3n + 1) { animation-delay: -1.1s; }
.yuz-analiz .yuz-iz circle:nth-child(3n + 2) { animation-delay: -2.2s; }
@keyframes iz-parla { 0%, 100% { fill-opacity: 0.92; } 50% { fill-opacity: 0.55; } }
.sen-hap {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.35; color: rgb(240, 245, 255); background: rgba(10, 26, 51, 0.78); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.85);
}
.sen-etiket {
  position: absolute; left: 8px; bottom: 7px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(10, 26, 51, 0.6);
}
/* Floating chips over the call's edges (the hero's badge material). */
.sahne-cip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; color: var(--ink);
  background: var(--cam-panel-zemin); box-shadow: var(--cam-panel-golge), 0 22px 40px -22px rgba(2, 8, 22, 0.8);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  animation: suzul 6s ease-in-out infinite;
}
.sahne-cip b { display: block; font-size: 13.5px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.sahne-cip small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--ink-muted); white-space: nowrap; }
.sahne-cip-ikon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--dugme-amber); color: var(--ink-sabit); box-shadow: var(--dugme-amber-golge); }
.sahne-cip-ikon.mavi { background: linear-gradient(165deg, var(--mavi-1), var(--mavi-3)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(20, 52, 154, 0.8); }
.sahne-cip-ikon.yesil { background: linear-gradient(150deg, #2EC4A6, #0E9479); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px -6px rgba(14, 148, 121, 0.7); }
.sahne-cip-ikon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sahne-cip-1 { right: -22px; bottom: 46%; }
.sahne-cip-2 { right: 24%; top: -28px; animation-direction: reverse; animation-delay: -2s; }
.sahne-cip-3 { left: -26px; top: 47%; animation-delay: -4s; }


@media (min-width: 1024px) {
  .prova-izgara { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; }
}
@media (max-width: 1023px) {
  .prova-sahne { max-width: 680px; margin-inline: auto; width: 100%; }
  .prova-liste { gap: 24px; }
}
@media (max-width: 699px) {
  .prova-izgara { gap: 40px; }
  .prova-liste { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cagri { aspect-ratio: 3 / 4; border-radius: 22px; }
  .gorevli { left: 40%; top: 48%; width: 80%; }
  .cagri-ust { padding: 14px; }
  .cagri-bolum b { font-size: 14px; }
  .cagri-sure { font-size: 17px; }
  .cagri-soz { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cagri-soz q { font-size: 14px; }
  .cagri-sen { right: 12px; bottom: auto; top: 66px; width: 44%; }
  /* The chips leave the call's edges and sit in a row under it. */
  .sahne-cipler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
  .sahne-cip { position: static; animation: none; padding: 7px 12px 7px 7px; }
  .sahne-cip-3 { display: none; }
  .sahne-cip-ikon { width: 28px; height: 28px; }
}

/* ---------- Motion off: reduced motion, a hidden tab, or a block scrolled out of view */
:root[data-gizli] *, :root[data-gizli] *::before, :root[data-gizli] *::after,
[data-ekran-disi], [data-ekran-disi] *, [data-ekran-disi] *::before, [data-ekran-disi] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js [data-belir] { opacity: 1; transform: none; }
}