/* Alpas Group — portal-boost.css  (portal.css'den SONRA yüklenir / loads after portal.css)
   Amaç: büyük ürün görselleri, daha az baskın renk alanı, mobilde tam genişlik. */

/* ---------- Ürün kartı: görsel tarafı büyür ---------- */
.work{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.work.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.work.flip .work-fig{order:2}
.work.flip .work-body{order:1}
.work-fig,.work-media{display:block;min-width:0}

/* ---------- Ahi Plus (phones): açık zemin, büyük telefonlar ---------- */
.media.phones{
  --soft:color-mix(in srgb,var(--tone) 9%,#F4F1EA);
  position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,2vw,28px);
  width:100%;aspect-ratio:auto;min-height:0;height:auto;
  padding:clamp(22px,4vw,48px) clamp(10px,3vw,40px) 0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tone) 22%,#fff) 0%,transparent 62%),
    var(--soft);
  border-radius:clamp(14px,2vw,26px);
}
.media.phones img{position:relative!important;inset:auto!important;transform:none!important;
  display:block;height:auto!important;max-width:none;filter:drop-shadow(0 22px 28px rgba(18,17,15,.22))}
.media.phones .p1{width:clamp(150px,41%,420px)!important;margin-bottom:0}
.media.phones .p2{width:clamp(150px,41%,420px)!important;margin-bottom:clamp(-4px,-1vw,0px);transform:translateY(clamp(14px,3vw,40px))!important}
.media.phones.is-empty img{display:none}

/* ---------- Pencere (Vision X) ve kapak görselleri ---------- */
.media.window{width:100%;padding:clamp(14px,3vw,36px);border-radius:clamp(14px,2vw,26px);
  background:color-mix(in srgb,var(--tone) 70%,#fff)}
.media.window .frame{width:100%}
.media.window .frame img{width:100%;height:auto;display:block}
.media.cover{width:100%;border-radius:clamp(14px,2vw,26px)}

/* ---------- Telefon / tablet ---------- */
@media (max-width:860px){
  .work,.work.flip{grid-template-columns:1fr;gap:20px}
  .work.flip .work-fig,.work .work-fig{order:0}
  .work.flip .work-body,.work .work-body{order:1}
  .media.phones{padding:22px 8px 0;gap:6px;border-radius:16px}
  .media.phones .p1,.media.phones .p2{width:47%!important}
  .media.phones .p2{transform:translateY(18px)!important}
  .media.window{padding:12px;border-radius:16px}
}
@media (max-width:420px){
  .media.phones{padding-top:18px}
  .media.phones .p1,.media.phones .p2{width:48.5%!important}
}

/* ---------- Üst bölüm (hero) ---------- */
.hero h1{font-size:clamp(2.3rem,7.2vw,5.6rem);line-height:1.02;text-wrap:balance}
.hero-copy p{max-width:56ch}
@media (max-width:640px){
  .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
  .hero-actions .pill{flex:1 1 100%;justify-content:center;text-align:center}
}

/* ---------- Footer ---------- */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,3vw,48px)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{text-decoration:none}
.foot-col a:hover{text-decoration:underline}
.foot-all-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Hero ürün listesi: koyu kırmızı, kontur çizgilerinde kaybolmaz ---------- */
.index li{border-bottom:1px solid var(--line)}      /* çizgi li'de durur; büyüyen bağlantıyla birlikte uzamaz */
.index li a{
  border-bottom:0;color:#A81B22;
  text-shadow:0 0 7px var(--paper),0 0 3px var(--paper),0 0 1px var(--paper);   /* kontur çizgileri yazıyı kesmesin */
  transition:padding .3s,color .3s,transform .3s;transform-origin:left center;
}
.index li a span{color:var(--red);opacity:.75;text-shadow:inherit}
.index li a:hover,.index li a:focus-visible{padding-left:12px;color:var(--red);transform:scale(1.04)}
.index li a:hover span,.index li a:focus-visible span{opacity:1}
@media (prefers-reduced-motion:reduce){.index li a{transition:color .2s}.index li a:hover,.index li a:focus-visible{transform:none}}