/* [MARKETING-VISUALS 20260816] Kullanıcının seçtiği 5 pazarlama görseli
   için section-bazlı yerleşim kuralları. Mevcut grid/section yapısı
   korunuyor, yalnızca görsel eklendiği yerlerde küçük düzenlemeler var. */

/* [HERO-MONITOR-ANGLE-FIX 20260817/20/20-v2] Der vermeintliche "Referenz-
   Screenshot" (stundo24.de) zeigte in Wirklichkeit NICHT das echte .monitor-
   CSS, sondern ein separates, verstecktes .reference-monitor-Div mit einem
   problembehafteten Foto (echte Firmenlogos + sichtbares Claude-Fenster,
   siehe Projekt-Memory) — deshalb ließ sich der Winkel per CSS nie treffen.
   Echte, saubere Quelle für den gewünschten 3D-Winkel: der unbenutzte
   Genspark-Entwurf 00_PROJE_MERKEZI/Genspark Landingpase/.../stundo24-v5/
   (styles.css .hero-monitor-shell) — dort rein CSS-basiert (kein Foto,
   echte Screenshots im Inneren), rotateY(-18deg) rotateX(4deg)
   skewY(-1.5deg) unter perspective:1800px. Werte 1:1 von dort übernommen,
   nur auf die hier vorhandenen Klassennamen (.monitor) angewendet. */
.product-stage{perspective:1800px}
/* .monitor-3d-group übernimmt dieselbe Breiten-Kaskade wie .monitor selbst
   (landing-monitor.css) — sonst hat der neue Wrapper keine Breitenvorgabe
   und schrumpft in .product-stage{display:grid;place-items:center} auf eine
   viel zu schmale, gestauchte Größe. */
.monitor-3d-group{position:relative;width:min(100%,600px);transform:rotateY(-18deg) rotateX(6deg);transform-style:preserve-3d}
.monitor-3d-group .monitor{width:100%}
/* [MONITOR-STAND-3D 20260820] .monitor-stand hing bisher an .product-stage's
   display:grid;place-items:center — dadurch war es automatisch zentriert,
   ganz ohne eigenes left. Als Kind von .monitor-3d-group fehlt dieser
   Grid-Kontext, das Ständer-Div fiel auf left:0 (linksbündig) zurück.
   Hier explizit zentriert, bestehendes translateY(42px) bleibt erhalten. */
.monitor-3d-group .monitor-stand{left:50%;transform:translate(-50%,42px)}
@media(max-width:680px){.monitor-3d-group .monitor-stand{transform:translate(-50%,32px) scale(.68)}}
@media(max-width:900px){.monitor-3d-group{width:min(100%,560px)}}
@media(max-width:680px){.monitor-3d-group{transform:rotateY(-10deg) rotateX(4deg)}}

/* [HERO-PREMIUM-POLISH 20260820] Nutzer-Vorgabe: NUR Hero, striktes Scope
   (alle Selektoren hier sind Hero-/Monitor-spezifisch, kein globales
   .section-shell, damit andere Sections unangetastet bleiben). */
.hero.section-shell{align-items:start;max-width:1240px}
/* Grid-Zellen sind exakt top-aligned (.hero-copy/.product-stage diff:0px).
   [REFERENCE-MONITOR-FRAME 20260820] Der frühere 22px-Kompensations-Versatz
   war für das rotateX-Transform des alten CSS-Monitors kalibriert — mit dem
   neuen Rahmenbild (kein 3D-Transform mehr) nicht mehr nötig, entfernt. */
.hero h1{font-size:clamp(42px,4.6vw,62px)}
.hero-text{font-size:17px}
.monitor{backface-visibility:hidden}
/* The black frame and stand stay static. The hero video is cropped and
   pre-projected frame-by-frame to the exact four glass corners. */
.reference-monitor-frame{position:relative;width:min(100%,660px);margin-left:auto;aspect-ratio:49/40;isolation:isolate}
.monitor-frame-base{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover}
.monitor-screen{position:absolute;z-index:1;inset:0;overflow:hidden;border-radius:14px;clip-path:polygon(7.65% 12.63%,92.96% 7.38%,92.04% 73.88%,6.02% 74.25%);backface-visibility:hidden}
.monitor-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;backface-visibility:hidden;transform:translateZ(0)}
.monitor-video-start{display:none;position:absolute;z-index:2;left:50%;top:43%;transform:translate(-50%,-50%);align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(8,22,39,.84);color:#fff;font:700 13px/1 Inter,"Segoe UI",Arial,sans-serif;box-shadow:0 12px 28px rgba(0,0,0,.28);cursor:pointer;white-space:nowrap;backdrop-filter:blur(7px)}
.monitor-video-start.is-visible{display:flex}
.monitor-video-start span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--orange);font-size:10px;padding-left:2px}
.monitor-video-start:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:900px){.reference-monitor-frame{width:min(100%,590px)}}
/* Ein einzelner, zweifarbiger Glow (Orange->Navy) statt reinem Orange-Pastell,
   Alpha direkt in den Farbstopps (~.22) statt einer separaten opacity-Regel. */
.screen-glow{background:radial-gradient(circle at 35% 35%,rgba(255,150,90,.22),transparent 60%),radial-gradient(circle at 70% 65%,rgba(16,37,63,.2),transparent 60%)}

/* [MONITOR-DARK-REDESIGN 20260820] Nutzer: "ich will DIESEN Monitor" (dunkles
   Referenz-Mockup, nicht nur der Winkel). Bisher hatten wir nur die 3D-Achse
   davon übernommen — jetzt auch Bezel-Farbe/-Form + Standfuß, damit unser
   Monitor optisch derselbe ist. Eigene echte STUNDO24-Screenshots bleiben im
   Inneren (keine erfundene "Benutzerdefinierter Inhalt"-Platzhalter-Optik). */
.monitor{background:linear-gradient(180deg,#0f1d3f 0%,#071226 100%);border-radius:20px;border:1px solid rgba(15,35,78,.9)}
.monitor::after{content:"";position:absolute;top:14px;right:20px;bottom:16px;width:12px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 70%);z-index:2;pointer-events:none}

/* Standfuß zurückgeholt (war zwischenzeitlich ausgeblendet) und im Farb-/
   Formstil des Referenz-Monitors neu gezeichnet: schlanker dunkler Hals +
   runde "Scharnier"-Blende oben + flacher ovaler Fuß unten. Bleibt Kind von
   .monitor-3d-group (dreht sich mit dem Bildschirm, siehe 20260820-Fix). */
.monitor-3d-group .monitor-stand{display:block;width:64px;height:88px;left:50%;background:linear-gradient(180deg,#17336f,#0a1731);border-radius:0 0 16px 16px;transform:translate(-50%,44px) skewX(-6deg)}
.monitor-3d-group .monitor-stand:before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2f4f96,#0a1731);clip-path:none}
.monitor-3d-group .monitor-stand:after{content:"";position:absolute;width:230px;height:16px;left:50%;bottom:-8px;transform:translateX(-50%) skewX(-10deg);border-radius:999px;background:linear-gradient(180deg,#18346f,#09162f);box-shadow:0 16px 28px rgba(8,25,57,.2)}
@media(max-width:680px){.monitor-3d-group .monitor-stand{transform:translate(-50%,34px) skewX(-6deg) scale(.72)}}

/* [DESK-ACCESSORIES 20260820] Klavye/Maus wieder sichtbar, aber bewusst
   dezent (niedrige opacity) — Nutzerwunsch: "nicht zu klar, leicht silik".
   Form/Position 1:1 aus tagesnachweis-landing-monitor-perspective.css
   übernommen (dort seit 20260816 nicht mehr verlinkt, Regeln blieben aber
   brauchbar liegen) — keine neue Form erfunden, nur reaktiviert + Opacity. */
.desk-keyboard{position:absolute;z-index:1;bottom:0;left:56%;width:195px;height:13px;border-radius:4px 4px 9px 9px;background:repeating-linear-gradient(90deg,#d8dde0 0 8px,#f8f9f9 8px 10px),linear-gradient(#fff,#cdd3d6);box-shadow:0 8px 12px rgba(18,38,57,.12);transform:translateX(-50%) skewX(18deg) rotate(-2deg);opacity:.45}
.desk-mouse{position:absolute;z-index:1;bottom:1px;left:83%;width:28px;height:15px;border-radius:50% 50% 45% 45%;background:linear-gradient(120deg,#fff,#cbd1d5);box-shadow:0 6px 10px rgba(18,38,57,.12);transform:rotate(-16deg);opacity:.45}
@media(max-width:680px){.desk-keyboard,.desk-mouse{display:none}}

/* Workflow: görsel + 4 adım kartı yan yana (masaüstü), altlı üstlü (mobil). */
.workflow-layout{display:grid;grid-template-columns:.9fr 1.3fr;gap:32px;align-items:start;margin-top:8px}
.workflow-visual{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 22px 44px rgba(16,37,63,.16)}
.workflow-layout .steps{margin-top:0;grid-template-columns:repeat(2,1fr)}

/* [WORKFLOW-VISUAL-STACK 20260820] Zweites Bild (Bauüberwachung-Signatur)
   unter dem ersten (Büro-zu-Baustelle), ungefähr auf Höhe der Karte
   "Mitarbeiter- & Bauüberwacher-Signatur" im Karten-Grid daneben. */
.workflow-visual-stack{display:flex;flex-direction:column;gap:16px}

/* [CAPABILITY-CARDS 20260817] 6 kart, numaralı rozet yok (bunlar sıralı
   adım değil, bağımsız yetenekler) — .steps'in kart görünümünü (arka
   plan/kenarlık/gölge) miras alıyor, yalnızca başlık/metin biraz büyütüldü. */
.capability-cards article{padding-top:24px}
.capability-cards span{display:none}
.capability-cards h3{margin-top:0;font-size:18px}
.capability-cards p{font-size:14px;line-height:1.6}
@media(max-width:900px){.workflow-layout{grid-template-columns:1fr}.workflow-visual{max-height:320px}}
@media(max-width:560px){.workflow-layout .steps{grid-template-columns:1fr}}

/* Feature-band: görsel sol kolonun üstünde, metinden önce.
   [FEATURE-VISUAL-ENLARGE 20260820] Bildspalte etwas breiter (Nutzer-
   Feedback: "1dakikanin altinda"-Grafik ruhig etwas größer). */
.feature-visual{width:100%;border-radius:16px;margin-bottom:24px;box-shadow:0 18px 36px rgba(0,0,0,.28)}
.feature-grid{grid-template-columns:1.05fr 1.15fr}

/* Demo-cards ve genel "başlık + yan görsel" deseni (section-heading içinde). */
.section-heading-with-visual{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;text-align:left}
.section-heading-visual{width:190px;border-radius:14px;box-shadow:0 18px 36px rgba(16,37,63,.18)}
@media(max-width:760px){.section-heading-with-visual{grid-template-columns:1fr}.section-heading-visual{width:100%;max-width:280px}}

/* Demo kartları: masaüstünde yatay sıra öncelikli (3 sütun), mobilde tek sütun. */
.demo-cards-list{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.demo-cards-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.demo-cards-list{grid-template-columns:1fr}}

/* Trust-band: demo ile pricing arası kompakt köprü görseli. */
.trust-band{padding-top:10px;padding-bottom:50px;text-align:center}
.trust-band-visual{width:100%;max-width:900px;border-radius:18px;box-shadow:0 22px 44px rgba(16,37,63,.14)}

/* Final-CTA: dezent arka plan fotoğrafı, koyu overlay ile okunabilirlik.
   [FINAL-CTA-COPY 20260817] sahada.jpeg artık .signature-band'de
   kullanıldığı için bu kural hiçbir elemente uygulanmıyor (dead, zararsız,
   ileride tekrar bir foto arka plan istenirse hazır kalsın diye durabilir). */
.final-cta-photo{background-image:linear-gradient(rgba(8,20,36,.86),rgba(8,20,36,.9)),url('../assets/landing/marketing-vor-ort.jpeg');background-size:cover;background-position:center}
.final-cta-trust{font-size:13px;color:#9fb0c2;margin:-8px 0 22px}

/* [SIGNATUR-BAND 20260817] Görsel + kısa metin, workflow-layout ile aynı
   yatay desen ama daha kompakt (tek amaç: Bauüberwacher imzasını görünür
   kılmak). */
.signature-band{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:60px;padding-bottom:60px}
.signature-band-visual{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 22px 44px rgba(16,37,63,.16)}
.signature-band-copy h2{font-size:clamp(26px,3vw,36px);letter-spacing:-1.2px;margin:8px 0 12px}
.signature-band-copy p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:900px){.signature-band{grid-template-columns:1fr}.signature-band-visual{order:-1}}

/* [FOOTER-COPYRIGHT 20260817] footer{display:flex;justify-content:space-between}
   in tagesnachweis-landing.css war für genau 3 Kinder ausgelegt (Brand/
   Tagline/Links-Div). Die neue Copyright-Zeile als 4. Kind würde diese
   Aufteilung verzerren — flex-wrap + volle Breite lässt sie stattdessen
   sauber in einer eigenen Zeile darunter erscheinen, ohne die bestehende
   3-Spalten-Anordnung anzufassen. */
footer{flex-wrap:wrap}
footer .footer-copyright{flex-basis:100%;text-align:center;margin-top:4px}
.mobile-nav-action{display:none}

/* [TRUST-FACTS 20260821] Yalnız doğrulanabilir ürün ve test bilgileri;
   sertifika veya kapsamı kanıtlanmamış güvenlik iddiası kullanılmaz. */
.trust-facts{background:#fff;border-top:1px solid #edf1f5;border-bottom:1px solid #e4eaf0}
.trust-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);padding-top:22px;padding-bottom:22px}
.trust-facts-grid>div{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:3px 22px;border-right:1px solid #e4eaf0}
.trust-facts-grid>div:first-child{padding-left:0}
.trust-facts-grid>div:last-child{padding-right:0;border-right:0}
.trust-facts-grid>div>span{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;margin-top:1px;border-radius:50%;background:#fff2e9;color:var(--orange);font-size:13px;font-weight:900}
.trust-facts-grid p{margin:0;min-width:0}
.trust-facts-grid strong{display:block;color:var(--navy);font-size:13px;line-height:1.35}
.trust-facts-grid small{display:block;margin-top:3px;color:#667587;font-size:11.5px;line-height:1.4}

/* [TYPOGRAPHY-HIERARCHY 20260821] Daha sakin satır uzunlukları ve
   başlık-aciklama-detay ayrımı; mevcut yerleşim ve görsel dil korunur. */
.hero-copy{max-width:535px}
.hero-text{max-width:500px;color:#526274;font-size:16.5px;line-height:1.72}
.hero-text strong{color:var(--navy);font-weight:800}
.section-heading .eyebrow,.feature-grid .eyebrow,.workflow-bridge .eyebrow{margin-bottom:13px}
.section-heading h2,.feature-band h2,.workflow-bridge h2,.final-cta h2{text-wrap:balance}
.section-heading>p:last-child{max-width:610px;margin-top:17px;margin-bottom:0;color:#526274}
.video-card-text strong,.capability-cards h3,.feature-cards h3{letter-spacing:-.15px}
.video-card-text small,.capability-cards p{color:#586879}
.feature-cards p{color:#d2dce6}
.feature-band .feature-grid>div>p:not(.eyebrow){max-width:500px;line-height:1.7}
.faq-list p{line-height:1.65}
.final-cta>div>p:not(.eyebrow):not(.final-cta-trust){max-width:620px;margin-left:auto;margin-right:auto;line-height:1.7}

/* [LANDING-PREMIUM-READABILITY 20260820] The landing keeps its existing
   structure, but uses fewer, larger information groups and a calmer rhythm. */
main > .section-shell:not(.hero){padding-top:88px;padding-bottom:88px}
.section-heading{max-width:650px}
.section-heading h2,.feature-band h2{letter-spacing:-2px}
.section-heading>p:last-child{font-size:17px;line-height:1.65}
.video-walkthrough .section-heading{max-width:720px}
.workflow-layout{grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;margin-top:36px}
.workflow-layout .steps{margin-top:0;grid-template-columns:repeat(2,1fr);gap:16px}
.capability-cards article{min-height:168px;padding:25px 24px;border-radius:14px}
.capability-cards h3{font-size:18px;line-height:1.25}
.capability-cards p{font-size:14px;line-height:1.6}
.feature-band{padding:105px 0}
.feature-grid{gap:64px}
.feature-cards article{padding:26px 24px;border-radius:14px}
.feature-cards h3{font-size:18px;line-height:1.25}
.feature-cards p{font-size:14px;line-height:1.6;color:#d2dce6}
.workflow-bridge{text-align:center;padding-top:76px!important;padding-bottom:76px!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.workflow-bridge h2{max-width:760px;margin:0 auto;font-size:clamp(28px,3.4vw,42px);letter-spacing:-1.8px;line-height:1.12}
.workflow-bridge-steps{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px;color:var(--navy);font-size:16px;font-weight:800}
.workflow-bridge-steps b{color:var(--orange);font-size:22px}
.plan-audience{min-height:42px;margin:8px 0 2px;color:var(--muted);font-size:14px;line-height:1.45}
.pricing-grid article{border-radius:16px;padding:34px 30px}
.pricing-grid .featured{box-shadow:0 22px 45px rgba(247,118,37,.18)}
.pricing-grid h3{font-size:24px}
.price b{font-size:38px}
@media(max-width:900px){main > .section-shell:not(.hero){padding-top:68px;padding-bottom:68px}.workflow-layout{gap:32px}.workflow-layout .steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){main > .section-shell:not(.hero){padding-top:56px;padding-bottom:56px}.workflow-layout .steps{grid-template-columns:1fr}.capability-cards article{min-height:0}.workflow-bridge-steps{align-items:flex-start;flex-direction:column;gap:10px;text-align:left}.workflow-bridge-steps b{display:none}.plan-audience{min-height:0}.pricing-grid article{padding:28px 22px}}

/* [PREMIUM-CARD-DEPTH 20260821]
   Daha belirgin sınır, kontrollü yükselme ve sakin gölge derinliği. */
.capability-cards article,
.pricing-grid article{
  border-color:#d4dce6;
  box-shadow:0 10px 26px rgba(16,37,63,.07);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.pricing-grid article:not(.featured){
  overflow:hidden;
  border-color:#c3cfdd;
  background:linear-gradient(180deg,#fff 0%,#f9fbfd 100%);
  box-shadow:0 15px 34px rgba(16,37,63,.10);
}
.pricing-grid article:not(.featured)::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--navy),#315779);
}
.pricing-grid article:not(.featured) h3,
.pricing-grid article:not(.featured) .price b{color:#0b2542}
.capability-cards article:hover,
.pricing-grid article:not(.featured):hover{
  border-color:#aebdce;
  box-shadow:0 22px 44px rgba(16,37,63,.15);
  transform:translateY(-4px);
}
.feature-cards article{
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px rgba(3,13,27,.16);
  transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.feature-cards article:hover{
  border-color:rgba(255,156,95,.62);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 38px rgba(3,13,27,.24);
  transform:translateY(-4px);
}
.pricing-grid .featured{
  background:linear-gradient(155deg,#173754 0%,#102943 100%);
  color:#fff;
  border-color:var(--orange);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.pricing-grid .featured h3,
.pricing-grid .featured .price b{color:#fff}
.pricing-grid .featured .plan-audience,
.pricing-grid .featured .price span,
.pricing-grid .featured .price-meta{color:#c8d4e1}
.pricing-grid .featured li{color:#eef4f9}
.pricing-grid .featured .button-primary{box-shadow:0 12px 26px rgba(247,118,37,.24)}
.pricing-grid .featured:hover{
  box-shadow:0 28px 54px rgba(247,118,37,.24);
  transform:translateY(-12px);
}
@media(max-width:680px){
  .pricing-grid .featured:hover{transform:translateY(-4px)}
}
@media(prefers-reduced-motion:reduce){
  .capability-cards article,
  .feature-cards article,
  .pricing-grid article{transition:none}
  .capability-cards article:hover,
  .feature-cards article:hover,
  .pricing-grid article:hover{transform:none}
}

/* [MOBILE-LANDING-POLISH 20260821] Telefon görünümünde tek kolon,
   okunabilir tipografi, güvenli yatay boşluklar ve dokunmatik hedefler. */
@media(max-width:680px){
  html,body{max-width:100%;overflow-x:hidden}
  .site-header{padding-left:18px;padding-right:18px}
  .main-nav{max-height:calc(100vh - 66px);overflow-y:auto;box-shadow:0 14px 30px rgba(16,37,63,.12)}
  .main-nav a{padding:7px 2px;font-size:15px}
  .hero.section-shell{grid-template-columns:1fr;gap:24px;padding-top:42px;padding-bottom:38px}
  .hero h1{font-size:clamp(35px,10.4vw,44px);line-height:1.04;letter-spacing:-2px}
  .hero h1>em{font-size:.82em;line-height:1.08}
  .hero-text{max-width:none;font-size:15.5px;line-height:1.68;margin:20px 0}
  .hero-actions,.hero-actions .button{width:100%}
  .hero-actions .button{min-height:50px}
  .product-stage{width:100%;min-height:0;margin:2px auto 0;padding:0}
  .reference-monitor-frame{width:100%;margin:0 auto}
  .screen-glow{width:82%;height:68%;left:9%;right:auto;top:8%}
  main > .section-shell:not(.hero){padding-left:20px;padding-right:20px}
  .section-heading h2,.feature-band h2,.final-cta h2{font-size:clamp(29px,8.5vw,37px);letter-spacing:-1.5px;line-height:1.12}
  .section-heading>p:last-child{font-size:15px;line-height:1.6}
  .video-cards{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .video-card-text{padding:16px 17px 18px}
  .workflow-layout{grid-template-columns:1fr;gap:28px;margin-top:30px}
  .workflow-visual{max-height:none}
  .workflow-layout .steps{grid-template-columns:1fr;gap:18px}
  .capability-cards article{padding:23px 21px}
  .feature-band{padding:62px 0}
  .feature-grid{grid-template-columns:1fr;gap:38px;padding-left:20px;padding-right:20px}
  .feature-visual{margin-bottom:21px}
  .feature-cards{grid-template-columns:1fr;gap:14px}
  .workflow-bridge{text-align:left}
  .workflow-bridge h2{font-size:clamp(28px,8vw,35px)}
  .pricing .section-heading{text-align:left}
  .pricing-grid{grid-template-columns:1fr;gap:22px}
  .pricing-grid article{padding:28px 22px}
  .pricing-grid .featured{transform:none;order:-1}
  .pricing-grid .featured:hover{transform:translateY(-4px)}
  .pricing-grid ul{min-height:0}
  .price b{font-size:34px}
  .enterprise{line-height:1.55}
  .faq{grid-template-columns:1fr;gap:24px;padding-left:20px;padding-right:20px}
  .faq-list details{padding:17px 0}
  .faq-list summary{font-size:15px;line-height:1.4}
  .faq-list p{margin-right:0;font-size:13.5px;line-height:1.65}
  .final-cta{padding:62px 20px}
  .final-cta>div>p:not(.eyebrow){font-size:15px;line-height:1.65}
  .final-cta .button{width:100%;min-height:50px}
  footer{padding:30px 20px;gap:16px}
  footer>div{flex-wrap:wrap;gap:12px 18px}
}

/* [TABLET-MOBILE-NAV 20260821] Navigasyonu tablet genişliğinde de güvenli
   biçimde toplar; mobilde giriş ve kayıt aksiyonlarını kaybetmez. */
@media(max-width:900px){
  body.nav-open{overflow:hidden}
  .site-header{padding-left:22px;padding-right:22px}
  .nav-toggle{display:block;min-width:48px;min-height:44px;margin-left:auto;border:1px solid #d5dde7;border-radius:8px;background:#fff;color:var(--navy);font-weight:800}
  .header-actions{display:none}
  .main-nav{display:none;position:absolute;top:82px;left:0;right:0;margin:0;padding:18px 22px 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(16,37,63,.14);flex-direction:column;gap:6px;max-height:calc(100vh - 82px);overflow-y:auto}
  .main-nav.open{display:flex}
  .main-nav a{display:flex;align-items:center;min-height:44px;padding:9px 10px;border-radius:8px;font-size:15px}
  .main-nav .mobile-nav-action{display:flex;margin-top:4px;border-top:1px solid var(--line);border-radius:0;padding-top:13px}
  .main-nav .mobile-nav-primary{justify-content:center;border:0;border-radius:8px;background:var(--orange);color:#fff;font-weight:800}
  .main-nav .mobile-nav-primary:hover{background:var(--orange-strong);color:#fff}
  .billing-toggle-btn{min-height:44px;padding-left:14px;padding-right:14px}
  .faq-list summary{min-height:48px;align-items:center}
  .trust-facts-grid{grid-template-columns:repeat(2,1fr);gap:0;padding-top:12px;padding-bottom:12px}
  .trust-facts-grid>div{padding:13px 18px;border-bottom:1px solid #e4eaf0}
  .trust-facts-grid>div:nth-child(2n){border-right:0}
  .trust-facts-grid>div:nth-child(n+3){border-bottom:0}
  .trust-facts-grid>div:first-child{padding-left:18px}
  .trust-facts-grid>div:last-child{padding-right:18px}
}
@media(max-width:680px){
  .site-header{padding-left:18px;padding-right:18px}
  .main-nav{top:66px;max-height:calc(100vh - 66px);padding-left:18px;padding-right:18px}
  .trust-facts-grid{grid-template-columns:1fr;padding:8px 20px}
  .trust-facts-grid>div,.trust-facts-grid>div:first-child,.trust-facts-grid>div:last-child{padding:12px 0;border-right:0;border-bottom:1px solid #e4eaf0}
  .trust-facts-grid>div:last-child{border-bottom:0}
  .trust-facts-grid strong{font-size:13.5px}
  .trust-facts-grid small{font-size:12px}
  .monitor-video-start{top:42%;min-height:44px;padding:0 14px;font-size:12px}
  .monitor-video-start span{width:22px;height:22px}
}
@media(hover:none){
  .video-card:hover,.capability-cards article:hover,.feature-cards article:hover,.pricing-grid article:hover{transform:none}
}