/* ============================================================ HİZMET SAYFALARI TASARIM KATMANI — Ömer Nakliyat style.css üzerine ek çalışır. Her hizmet sayfası ile kendi vurgu rengini (--svc) alır. ============================================================ */ /* --- Hizmet vurgu renkleri --- */ body.svc-istanbul-ici{--svc:#1F5F8B;} body.svc-sehirler-arasi{--svc:#2B4C7E;} body.svc-ofis{--svc:#51589E;} body.svc-parca-esya{--svc:#1F7A6B;} body.svc-asansorlu{--svc:#C46A2B;} body.svc-paketleme{--svc:#A85268;} /* --- Hero: derinlik + hizmet vurgusu --- */ .page-hero{position:relative;overflow:hidden; background:linear-gradient(140deg,var(--ink) 0%,var(--pine-dark) 55%,var(--svc,#1F5F8B) 165%);} .page-hero::after{content:'';position:absolute;right:-120px;top:-130px;width:360px;height:360px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%);pointer-events:none;} .page-hero .eyebrow{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22); padding:6px 15px;border-radius:50px;} .page-hero h1{font-size:2.6rem;} .page-hero h1::after{content:'';display:block;width:64px;height:4px;border-radius:4px; background:var(--svc,#B8903E);margin-top:16px;} .page-hero .crumbs{display:inline-block;background:rgba(255,255,255,.08); border-radius:50px;padding:5px 15px;margin-top:20px;} /* --- İçerik bölüm başlıkları: vurgu çubuğu --- */ .content h2{position:relative;padding-left:16px;border-bottom:1px solid var(--border);} .content h2::before{content:'';position:absolute;left:0;top:4px;bottom:14px;width:5px;border-radius:4px; background:var(--svc,#1F5F8B);} /* --- check-item kartları --- */ .check-item{background:linear-gradient(180deg,var(--white),var(--paper)); transition:transform .2s,box-shadow .2s,border-color .2s;} .check-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--svc,#1F5F8B);} .check-item .tick{background:var(--svc,#1F5F8B);border-radius:50%;} /* --- Adım numaraları: halka tasarım --- */ .step .num{background:var(--white);color:var(--svc,#16456A);border:2px solid var(--svc,#B8903E); box-shadow:0 0 0 4px rgba(0,0,0,.04);box-shadow:0 0 0 4px color-mix(in srgb,var(--svc,#1F5F8B) 13%,transparent);} /* --- Dahil / dahil değil kutuları: üst şerit --- */ .inc-exc .box{position:relative;overflow:hidden;} .inc-exc .box::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;} .inc-exc .box:first-child::before{background:var(--pine);} .inc-exc .box:first-child h3{color:var(--pine-dark);} .inc-exc .box:last-child::before{background:var(--brass);} /* --- SSS: açılınca vurgulan --- */ .faq details{transition:background .2s,border-color .2s;} .faq summary:hover{background:rgba(255,255,255,.65);} .faq details[open]{background:var(--white);border-color:var(--svc,#1F5F8B);box-shadow:var(--shadow-sm);} .faq details[open] summary{color:var(--svc,#16456A);} /* --- Related kartları: ok + hover --- */ .related a{position:relative;background:linear-gradient(180deg,var(--white),var(--paper));transition:.2s;} .related a::after{content:'→';position:absolute;right:16px;top:15px; color:var(--svc,#1F5F8B);font-weight:600;transition:transform .2s;} .related a:hover{border-color:var(--svc,#1F5F8B);} .related a:hover::after{transform:translateX(4px);} /* --- CTA kutusu: hizmete özel geçiş + ışık efekti --- */ .cta-box{position:relative;overflow:hidden; background:linear-gradient(140deg,var(--ink) 0%,var(--svc,#16456A) 145%);} .cta-box::after{content:'';position:absolute;left:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%);pointer-events:none;} /* --- Erişilebilirlik --- */ a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--svc,#1F5F8B);outline-offset:2px;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} } /* --- Mobil ince ayar --- */ @media (max-width:700px){ .page-hero{padding:52px 0 44px;} .page-hero h1{font-size:1.9rem;} .page-hero h1::after{width:52px;} }