/* misketim.com · /cozumler/arac-servis tanıtım sayfası (v4). Ortak değişkenler v4.css'ten; sektör vurgusu #0284c7 → #06b6d4.
   Hero film motorunun stili assets/film/film.css (dokunulmadı); burada yalnız sayfaya özgü bölümler. Önek: as- */
.as-sayfa{--s4-v1:#0284c7;--s4-v2:#06b6d4;--as-c:#0284c7}
.as-sayfa .s4-btn-ana{box-shadow:0 10px 24px -10px rgba(2,132,199,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.as-sayfa .s4-btn-ana:hover{box-shadow:0 16px 30px -12px rgba(2,132,199,.75),inset 0 1px 0 rgba(255,255,255,.22)}
.as-hero .eyebrow{flex-wrap:wrap;row-gap:4px}
.as-mobil-cta{display:none}

.as-bas{max-width:780px;margin:0 auto 56px}
.as-bas .s4-p{margin-inline:auto}

/* ── Atölyenizde bir gün ── */
.as-adimlar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.as-adimlar::before{content:"";position:absolute;left:10%;right:10%;top:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(2,132,199,.15),rgba(2,132,199,.55) 30%,rgba(6,182,212,.55) 70%,rgba(6,182,212,.15))}
.as-adim{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0 4px}
.as-no{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:17px;color:#fff;
  background:linear-gradient(135deg,var(--s4-v1),var(--s4-v2));box-shadow:0 0 0 6px #fff,0 12px 22px -10px rgba(2,132,199,.7);margin-bottom:20px}
.as-adim h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--s4-ink);margin:0 0 8px}
.as-adim p{font-size:15px;line-height:1.6;color:var(--s4-muted);margin:0 0 14px}
.as-adim-not{margin-top:auto;font-size:12px;font-weight:700;color:var(--as-c);background:rgba(2,132,199,.07);border:1px solid rgba(2,132,199,.14);border-radius:999px;padding:4px 10px}
.as-istasyonlar{margin-top:auto;display:flex;flex-wrap:wrap;gap:5px}
.as-istasyonlar span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:8px;padding:3px 8px;
  color:color-mix(in srgb,var(--r) 62%,#0b1220);background:color-mix(in srgb,var(--r) 12%,#fff)}
.as-istasyonlar span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--r)}

/* ── iki sütunlu bölümler ── */
.as-iki{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
.as-ters{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.as-ters .as-metin{order:2}
.as-metin .s4-h2{font-size:clamp(30px,3.6vw,46px)}
.as-liste{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.as-liste li{position:relative;padding-left:32px;font-size:16px;line-height:1.6;color:var(--s4-muted)}
.as-liste li b{color:var(--s4-ink);font-weight:700}
.as-liste li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--s4-v1),var(--s4-v2)) center/100% no-repeat;box-shadow:0 4px 10px -4px rgba(2,132,199,.6)}
.as-liste li::after{content:"";position:absolute;left:6px;top:8.5px;width:8px;height:4.5px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* pencere çerçevesi (gerçek ekran kesitleri) */
.as-pencere{margin:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--s4-golge-b)}
.as-pencere-cubuk{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f6f7fa;border-bottom:1px solid #e9ecf2}
.as-pencere-cubuk i{width:10px;height:10px;border-radius:50%;background:#e1e4ea;flex:none}
.as-pencere-cubuk i:nth-child(1){background:#ff5f57}.as-pencere-cubuk i:nth-child(2){background:#febc2e}.as-pencere-cubuk i:nth-child(3){background:#28c840}
.as-pencere-cubuk span{margin:0 auto;font-size:12px;font-weight:500;color:#6b7385;background:#fff;border:1px solid #e6e9ef;border-radius:8px;padding:3px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.as-pencere img{display:block;width:100%;height:auto}
.as-gorsel{position:relative}
.as-gorsel::before,.as-genis::before{content:"";position:absolute;inset:8% -6% -6% 8%;z-index:-1;border-radius:40px;filter:blur(40px);
  background:radial-gradient(closest-side,rgba(6,182,212,.18),transparent),radial-gradient(closest-side at 30% 70%,rgba(2,132,199,.16),transparent)}
.as-blok{isolation:isolate;overflow:hidden}
.as-dar{max-width:470px;margin-inline:auto}
.as-genis{position:relative;max-width:1100px;margin:0 auto}

/* tablet kolajı */
.as-tabletler{display:grid;position:relative}
.as-tablet{grid-area:1/1;margin:0;padding:10px;border-radius:28px;background:linear-gradient(160deg,#1e293b,#0f172a);
  box-shadow:0 0 0 1px rgba(15,23,42,.2),0 30px 60px -24px rgba(15,23,42,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.as-tablet img{display:block;width:100%;height:auto;border-radius:19px}
.as-tablet-a{width:76%;justify-self:start;align-self:start;transform:rotate(-1.2deg)}
.as-tablet-b{width:64%;justify-self:end;align-self:start;margin-top:40%;transform:rotate(1.4deg)}

/* teklif alt kartları */
.as-kucuk-kartlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1100px;margin:36px auto 0}
.as-kucuk-kartlar>div{background:#fff;border:1px solid var(--s4-line-2);border-radius:18px;padding:20px 20px 22px}
.as-kucuk-kartlar h3{font-size:16.5px;font-weight:800;letter-spacing:-.015em;color:var(--s4-ink);margin:0 0 6px}
.as-kucuk-kartlar p{font-size:14.5px;line-height:1.6;color:var(--s4-muted);margin:0}

/* genel bakış */
.as-ciplar{list-style:none;margin:30px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px}
.as-ciplar li{font-size:13.5px;font-weight:700;color:var(--s4-ink-2);background:#fff;border:1px solid var(--s4-line-2);border-radius:999px;padding:7px 14px}
.as-dipnot{text-align:center;font-size:13.5px;color:var(--s4-soft);margin:16px 0 0}

/* ön muhasebeyle tek sistem (koyu) */
.as-grad-acik{background:linear-gradient(90deg,#7dd3fc,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.as-tek .s4-etiket{color:#7dd3fc}
.as-tek .s4-ikon{background:rgba(56,189,248,.12);color:#7dd3fc}
.as-akis{display:flex;align-items:center;justify-content:center;gap:0;max-width:900px;margin:0 auto}
.as-akis-kutu{display:inline-flex;align-items:center;gap:8px;flex:none;font-size:15px;font-weight:800;color:#e2e8f0;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 18px}
.as-akis-servis{color:#fff;background:linear-gradient(135deg,rgba(2,132,199,.55),rgba(6,182,212,.45));border-color:rgba(125,211,252,.4)}
.as-akis-servis img{width:28px;height:28px;border-radius:8px;background:#fff;margin:-4px 0 -4px -6px}
.as-akis-cizgi{position:relative;flex:1 1 70px;min-width:24px;height:2px;background:linear-gradient(90deg,rgba(125,211,252,.15),rgba(125,211,252,.6));overflow:hidden}
.as-akis-cizgi::after{content:"";position:absolute;top:-2px;left:-12px;width:12px;height:6px;border-radius:3px;background:#67e8f9;box-shadow:0 0 10px #67e8f9;animation:asAkis 2.4s linear infinite}
.as-akis-cizgi:nth-of-type(4)::after{animation-delay:.8s}.as-akis-cizgi:nth-of-type(6)::after{animation-delay:1.6s}
@keyframes asAkis{to{left:100%}}
@media (prefers-reduced-motion:reduce){.as-akis-cizgi::after{animation:none;display:none}}

@media (max-width:1100px){
  .as-adimlar{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px;margin:0 auto}
  .as-adimlar::before{left:22px;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:linear-gradient(180deg,rgba(2,132,199,.5),rgba(6,182,212,.3))}
  .as-adim{padding:0 0 30px 70px}
  .as-adim:last-child{padding-bottom:0}
  .as-no{position:absolute;left:0;top:0;margin:0}
  .as-adim h3{margin-top:10px}
  .as-kucuk-kartlar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1020px){
  .as-mobil-cta{display:flex;gap:10px;padding:4px 20px 28px;background:var(--s4-bg)}
  .as-mobil-cta .s4-btn{flex:1 1 0;padding:13px 12px;font-size:15px}
  .as-iki,.as-ters{grid-template-columns:minmax(0,1fr);gap:44px}
  .as-ters .as-metin{order:0}
}
@media (max-width:720px){
  .as-bas{margin-bottom:40px}
  .as-adim{padding-left:62px}
  .as-adim p{font-size:15px}
  .as-liste li{font-size:15.5px}
  .as-tablet{padding:7px;border-radius:20px}
  .as-tablet img{border-radius:14px}
  .as-tablet-a{width:84%}
  .as-tablet-b{width:70%;margin-top:46%}
  .as-pencere{border-radius:14px}
  .as-pencere-cubuk{height:28px;padding:0 10px;gap:5px}
  .as-pencere-cubuk i{width:8px;height:8px}
  .as-pencere-cubuk span{font-size:10.5px;padding:2px 10px}
  .as-kucuk-kartlar{grid-template-columns:minmax(0,1fr)}
  .as-akis{flex-direction:column;align-items:center}
  .as-akis-cizgi{flex:none;width:2px;height:22px;background:linear-gradient(180deg,rgba(125,211,252,.15),rgba(125,211,252,.6))}
  .as-akis-cizgi::after{display:none}
  .as-akis-kutu{min-width:200px;justify-content:center}
  .as-gorsel::before,.as-genis::before{inset:4%}
}