/* Asra Web Ajans — Seyhan petrolü, Çukurova güneşi, pamuk beyazı */
:root{
  --seyhan:#0E4A57;
  --seyhan-koyu:#08323B;
  --murekkep:#16212B;
  --pamuk:#F6F8F7;
  --sis:#DCE6E3;
  --gunes:#F4B400;
  --gunes-koyu:#C99200;
  --gri:#51606B;
  --cizgi:#C9D6D2;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --govde:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-kucuk:6px; --r-orta:12px; --r-buyuk:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--pamuk);color:var(--murekkep);font:400 1.0625rem/1.65 var(--govde);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--seyhan);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--seyhan-koyu);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gunes);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;color:var(--murekkep)}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.6rem,3vw,2.25rem)}
h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
.kap{width:min(1180px,100% - 32px);margin-inline:auto}
.dar{width:min(760px,100% - 32px)}
.atla{position:absolute;left:-999px;top:8px;background:var(--gunes);color:var(--murekkep);padding:8px 14px;z-index:99;border-radius:var(--r-kucuk)}
.atla:focus{left:12px}

/* Üst bar */
.ust{position:sticky;top:0;z-index:30;background:rgba(246,248,247,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--murekkep);font:600 1.15rem/1 var(--display)}
.logo svg{width:36px;height:36px}
.logo b{font-weight:800;color:var(--seyhan)}
.menu{display:flex;align-items:center;gap:4px}
.menu a{padding:8px 12px;border-radius:var(--r-kucuk);text-decoration:none;color:var(--murekkep);font-weight:500;font-size:.98rem}
.menu a:hover{background:var(--sis)}
.menu a[aria-current]{color:var(--seyhan);box-shadow:inset 0 -2px 0 var(--seyhan);border-radius:0}
.menu .menu-tel{margin-left:8px;background:var(--seyhan);color:#fff;font-weight:600;border-radius:999px;padding:9px 16px}
.menu .menu-tel:hover{background:var(--seyhan-koyu);color:#fff}
.menu-dugme{display:none;font:600 1rem var(--govde);background:none;border:1.5px solid var(--murekkep);border-radius:999px;padding:7px 16px;color:var(--murekkep);cursor:pointer}

/* Düğmeler */
.dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.dugme{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font:600 1rem var(--govde);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s}
.dugme-gunes{background:var(--gunes);color:var(--murekkep)}
.dugme-gunes:hover{background:var(--gunes-koyu);color:var(--murekkep)}
.dugme-cizgi{border-color:var(--seyhan);color:var(--seyhan);background:transparent}
.dugme-cizgi:hover{background:var(--seyhan);color:#fff}
.dugme-cizgi-acik{border-color:rgba(255,255,255,.7);color:#fff}
.dugme-cizgi-acik:hover{background:#fff;color:var(--seyhan)}
.tam{width:100%;margin-top:18px}
.metin-link{font-weight:600}

/* Kahraman */
.kahraman{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,88px);overflow:hidden}
.kahraman-ic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
.kahraman h1{font-size:clamp(3rem,8.4vw,6.6rem);line-height:.92;letter-spacing:-.045em;color:var(--seyhan);margin-bottom:.32em;font-variation-settings:"opsz" 96}
.kahraman-alt{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:34ch;color:var(--murekkep)}
.kahraman-liste{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:8px;color:var(--gri);font-size:.98rem}
.kahraman-liste li{padding-left:22px;position:relative}
.kahraman-liste li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--gunes)}

/* Vitrin: gerçek referans ekran görüntüleri üst üste */
.tarayici{margin:0;background:#fff;border-radius:var(--r-orta);overflow:hidden;box-shadow:0 1px 0 var(--cizgi),0 24px 48px -24px rgba(8,50,59,.45);border:1px solid var(--cizgi)}
.tarayici-ust{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#EEF2F1;border-bottom:1px solid var(--cizgi)}
.tarayici-ust i{width:9px;height:9px;border-radius:50%;background:#C3CFCB}
.tarayici-ust span{margin-left:10px;font-size:.72rem;color:var(--gri);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Kahraman sahnesi: elde telefon, ekranda referans siteler sırayla */
.sahne{position:relative;aspect-ratio:1/0.92;max-width:640px;margin-left:auto;width:100%}
.sahne::before{content:"";position:absolute;right:4%;top:6%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFE08A 0,var(--gunes) 55%,rgba(244,180,0,0) 72%);opacity:.55}
.sahne-masa{position:absolute;left:0;top:4%;width:70%}
.ekranlar{position:relative;aspect-ratio:1200/755;background:#fff}
.ekranlar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.ekranlar img.aktif{opacity:1}
.el{position:absolute;right:0;bottom:-8%;width:53%;aspect-ratio:340/520;transform:rotate(-7deg);transform-origin:50% 90%}
.el svg{position:absolute;inset:0;width:100%;height:100%}
.el-arka{z-index:1}.el-on{z-index:3;pointer-events:none}
.telefon-cerceve{position:absolute;z-index:2;left:22%;top:3.8%;width:56%;aspect-ratio:9/18.6;background:var(--murekkep);border-radius:12% / 6%;padding:3.2%;box-shadow:0 30px 60px -24px rgba(8,50,59,.6)}
.telefon-cerceve::before{content:"";position:absolute;top:2.1%;left:50%;transform:translateX(-50%);width:28%;height:2.4%;background:#000;border-radius:999px;z-index:2}
.telefon-ekran{position:relative;width:100%;height:100%;overflow:hidden;border-radius:9% / 4.4%;background:#fff}
.telefon-ekran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:translateY(100%);transition:transform .75s cubic-bezier(.7,0,.2,1)}
.telefon-ekran img.aktif{transform:translateY(0)}
.telefon-ekran img.cikis{transform:translateY(-24%);transition-duration:.75s;filter:brightness(.7)}
.sahne-etiket{position:absolute;left:4%;bottom:4%;z-index:4;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--cizgi);border-radius:999px;padding:8px 16px 8px 8px;box-shadow:0 14px 30px -18px rgba(8,50,59,.5);max-width:58%}
.sahne-etiket a{font-weight:600;color:var(--murekkep);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sahne-sektor{background:var(--seyhan);color:#fff;font-size:.78rem;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sahne-noktalar{position:absolute;left:4%;bottom:-3%;z-index:4;display:flex;gap:6px}
.sahne-noktalar button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--cizgi);cursor:pointer;transition:width .3s,background-color .3s}
.sahne-noktalar button[aria-selected="true"]{width:26px;background:var(--seyhan)}
@media (prefers-reduced-motion:no-preference){
  .el{animation:el-gelis 1s cubic-bezier(.2,.8,.2,1) .15s both}
  .sahne-masa{animation:masa-gelis .9s cubic-bezier(.2,.8,.2,1) both}
  .sahne-etiket{animation:masa-gelis .7s ease .6s both}
  @keyframes el-gelis{from{opacity:0;transform:translateY(22%) rotate(4deg)}to{opacity:1;transform:rotate(-7deg)}}
  @keyframes masa-gelis{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.telefon-ekran img,.ekranlar img{transition:none}}

/* Bloklar */
.blok{padding:clamp(52px,7vw,96px) 0}
.blok-sis{background:var(--sis)}
.blok-seyhan{background:var(--seyhan);color:#E9F1EF}
.blok-seyhan h2{color:#fff}
.blok-baslik{margin-bottom:28px}
.baslik-satir{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.baslik-satir .blok-baslik{margin:0}
.iki-kolon{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,72px)}
.iki-kolon.ters{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.iki-kolon.ters .yan{order:2}
.metin{max-width:68ch}
.metin h2{margin-top:1.4em}
.metin h2:first-child{margin-top:0}
.metin ul,.metin ol{padding-left:1.25em}
.metin li{margin-bottom:.4em}
.metin table{width:100%;border-collapse:collapse;margin:1em 0 1.6em;font-size:.97rem}
.metin th,.metin td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--cizgi);vertical-align:top}
.metin thead th{border-bottom:2px solid var(--seyhan);font-weight:600}

/* Hizmet listesi: kart değil, satır */
.hizmet-liste{border-top:2px solid var(--murekkep)}
.hizmet-satir{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:24px 4px;border-bottom:1px solid var(--cizgi);text-decoration:none;color:var(--murekkep);align-items:baseline}
.hizmet-ad{font:800 clamp(1.3rem,2.4vw,1.75rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--seyhan)}
.hizmet-ozet{color:var(--gri)}
.hizmet-satir:hover .hizmet-ad{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}

/* Referanslar */
.referans-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.referans-genis{grid-column:span 2;grid-row:span 2}
.referans h3,.referans-ad{font:600 1.15rem/1.3 var(--govde);letter-spacing:0;margin:14px 0 4px}
.referans h3 a,.referans-ad a{color:var(--murekkep);text-decoration:none}
.referans h3 a:hover,.referans-ad a:hover{text-decoration:underline}
.referans p{color:var(--gri);font-size:.95rem;margin:0}

/* Bölge hizmet blokları */
.bolge-hizmet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:2px solid var(--murekkep)}
.bolge-hizmet article{padding:26px 0;border-bottom:1px solid var(--cizgi)}
.bolge-hizmet h3{font:800 1.35rem/1.15 var(--display);letter-spacing:-.02em;color:var(--seyhan);margin-bottom:10px}
.bolge-hizmet p{color:var(--murekkep);margin-bottom:10px}
.ara-baslik{font-size:1.1rem;margin:22px 0 12px}
.kucuk-not{color:var(--gri)}
@media (max-width:760px){.bolge-hizmet{grid-template-columns:1fr}}

/* Referans grupları */
.blok-ince{padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--cizgi)}
.sektor{display:inline-block;font-size:.8rem;font-weight:600;color:var(--seyhan);background:var(--sis);border-radius:999px;padding:1px 9px;margin-right:4px}
.not-kutu{max-width:70ch;background:#fff;border-left:4px solid var(--gunes);padding:14px 18px;border-radius:0 var(--r-orta) var(--r-orta) 0;margin:-8px 0 30px;color:var(--gri)}
.sektor-filtre{margin-top:20px}

/* Süreç: gerçek sıra, numaralı */
.surec{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.surec li{counter-increment:s;border-top:2px solid rgba(255,255,255,.35);padding-top:18px}
.surec li::before{content:counter(s);display:block;font:800 2.6rem/1 var(--display);color:var(--gunes);margin-bottom:12px}
.surec b{display:block;font:600 1.2rem/1.3 var(--govde);color:#fff;margin-bottom:6px}
.surec span{color:#CFE0DC;font-size:.98rem}

/* Etiket listesi (il/ilçe) */
.etiket-liste{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
.etiket-liste a{display:inline-block;padding:6px 14px;border:1px solid var(--cizgi);border-radius:999px;background:#fff;text-decoration:none;color:var(--murekkep);font-size:.95rem}
.etiket-liste a:hover{border-color:var(--seyhan);color:var(--seyhan)}
.etiket-liste small{color:var(--gri);margin-left:4px}
.il-grup{margin-bottom:40px}
.il-grup h2{font-size:1.35rem;margin-bottom:14px}

/* Sayfa başı */
.sayfa-bas{padding:clamp(36px,6vw,72px) 0 clamp(24px,4vw,40px);border-bottom:1px solid var(--cizgi)}
.sayfa-bas h1{color:var(--seyhan);max-width:18ch}
.sayfa-bas p{font-size:1.15rem;max-width:62ch}
.sayfa-bas time,.yazi-kart time{display:block;color:var(--gri);font-size:.92rem;margin-bottom:10px}
.kirinti{padding-top:18px}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;font-size:.9rem;color:var(--gri)}
.kirinti li+li::before{content:"/";margin-right:6px;color:var(--cizgi)}
.kirinti a{color:var(--gri)}

/* Yan kutu */
.yan{align-self:start;position:sticky;top:92px;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-buyuk);padding:24px}
.yan-baslik{font:800 1.15rem/1.2 var(--display);margin-bottom:14px}
.tik-liste{list-style:none;padding:0;margin:0}
.tik-liste li{padding:9px 0 9px 28px;border-bottom:1px solid var(--sis);position:relative}
.tik-liste li:last-child{border-bottom:0}
.tik-liste li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--seyhan);border-bottom:2.5px solid var(--seyhan);transform:rotate(-45deg)}
.bilgi{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.bilgi dt{color:var(--gri);font-size:.92rem}
.bilgi dd{margin:0;font-weight:600}

/* SSS */
.sss h2{margin-bottom:20px}
.sss details{border-bottom:1px solid var(--cizgi);padding:4px 0}
.sss summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:600;font-size:1.08rem;position:relative}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--seyhan);border-bottom:2px solid var(--seyhan);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.sss details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sss details p{color:var(--gri);margin:0 0 18px}

/* Blog */
.yazi-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.yazi-kart{border-top:2px solid var(--murekkep);padding-top:18px}
.yazi-kart h2,.yazi-kart h3{font:600 1.2rem/1.3 var(--govde);letter-spacing:0;margin-bottom:8px}
.yazi-kart a{color:var(--murekkep);text-decoration:none}
.yazi-kart a:hover{color:var(--seyhan);text-decoration:underline}
.yazi-kart p{color:var(--gri);font-size:.97rem}
.yazi-govde{padding:40px 0 20px;font-size:1.1rem}
.yazi-govde p,.yazi-govde li{line-height:1.75}

/* CTA */
.cta{background:var(--seyhan-koyu);color:#E3EEEB;padding:clamp(44px,6vw,72px) 0}
.cta-ic{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:.3em}
.cta p{max-width:52ch;margin:0}
.cta-dugmeler{display:flex;gap:12px;flex-wrap:wrap}

/* İletişim */
.buyuk-tel{font:800 clamp(2rem,4vw,2.8rem)/1 var(--display);letter-spacing:-.02em}
.buyuk-tel a{text-decoration:none}
address{font-style:normal;margin-bottom:1em}
.form{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-buyuk);padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.form h2{font-size:1.5rem;margin:0}
.form label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.form input,.form select,.form textarea{font:400 1rem var(--govde);padding:12px 14px;border:1.5px solid var(--cizgi);border-radius:var(--r-kucuk);background:var(--pamuk);color:var(--murekkep)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--seyhan);outline:none;box-shadow:0 0 0 3px rgba(14,74,87,.18)}
.form-hata{color:#A4260B;margin:0;font-weight:600}
.harita iframe{display:block;width:100%;height:380px;border:0;filter:saturate(.8)}

/* Altbilgi */
.alt{background:var(--murekkep);color:#B9C7C3;padding:56px 0 0;font-size:.95rem}
.alt-ic{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.alt a{color:#E3EEEB;text-decoration:none;display:block;padding:3px 0}
.alt a:hover{color:var(--gunes)}
.alt address a{display:inline}
.alt-baslik{font:800 1.1rem/1.2 var(--display);color:#fff;margin-bottom:12px}
.alt-not{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding:18px 0 90px;font-size:.88rem}
.sabit-bar{display:none}

/* Mobil */
@media (max-width:960px){
  .kahraman-ic,.iki-kolon,.iki-kolon.ters{grid-template-columns:1fr}
  .iki-kolon.ters .yan{order:0;position:static}
  .sahne{max-width:560px;margin:10px auto 0}
  .referans-izgara,.yazi-izgara{grid-template-columns:1fr 1fr}
  .referans-genis{grid-column:span 2;grid-row:auto}
  .surec{grid-template-columns:1fr 1fr}
  .alt-ic{grid-template-columns:1fr 1fr}
  .menu-dugme{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--pamuk);border-bottom:1px solid var(--cizgi);flex-direction:column;align-items:stretch;padding:8px 16px 18px}
  .menu.acik{display:flex}
  .menu a{padding:13px 8px;border-bottom:1px solid var(--sis)}
  .menu a[aria-current]{box-shadow:none;font-weight:700}
  .menu .menu-tel{margin:12px 0 0;text-align:center}
}
@media (max-width:640px){
  body{font-size:1rem}
  .referans-izgara,.yazi-izgara,.surec,.alt-ic{grid-template-columns:1fr}
  .referans-genis{grid-column:auto}
  .hizmet-satir{grid-template-columns:1fr;gap:6px}
  .dugmeler .dugme{flex:1 1 100%}
  .el{width:58%;bottom:-4%}
  .sahne-etiket{max-width:62%;padding:6px 12px 6px 6px;font-size:.92rem}
  .sabit-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;box-shadow:0 -6px 20px rgba(8,50,59,.18)}
  .sabit-bar a{display:flex;align-items:center;justify-content:center;min-height:56px;font-weight:700;text-decoration:none;font-size:1.05rem}
  .sabit-bar a:first-child{background:var(--gunes);color:var(--murekkep)}
  .sabit-bar a:last-child{background:var(--seyhan);color:#fff}
}