/* =========================================================================
   orhanaygunhafriyat.com — biçem

   🔴 PALET: kullanıcı "Lasmar'ın renkleri güzel, esinlenebilirsin" dedi.
   Alınan: koyu zemin + sarı vurgu. EKLENEN: kırmızı (#d12a1c) — firmanın
   kendi tabela rengi ve ana vurgusu. Yani Lasmar'ın kopyası değil:
   orada sarı tek başına vurguydu, burada kırmızı önde, sarı ikincil.
   Yaylalar'dan da ayrı (o lacivert + kırmızı).

   🔴 DESEN de farklı: Lasmar'da lastik dişi vardı, burada TOPRAK KATMANI
   (yatay şeritler — kazı kesiti).
   ========================================================================= */

@font-face{
  font-family:'AygunScript';
  src:url('/assets/fonts/aygun-script.woff2?v=2') format('woff2');
  font-weight:700; font-style:italic; font-display:swap;
  /* Yalnız "Orhan Aygün" harfleri gömülü */
}

*,*::before,*::after{box-sizing:border-box}

:root{
  --kirmizi:#d12a1c;  --kirmizi-koy:#a81f14;
  --sari:#f5b50a;     --sari-koy:#d49a00;
  --gece:#0e1114;     --kurum:#171b20;     --kurum-ac:#222930;
  --murekkep:#14181c; --duman:#6b7682;     --cizgi:#e3e7eb;
  --buz:#f4f6f8;      --kagit:#fff;
  --yuvarlak:14px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{margin:0;background:var(--kagit);color:var(--murekkep);
     font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-font-smoothing:antialiased}

h1,h2,h3{line-height:1.18;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(32px,5.2vw,54px);font-weight:800}
h2{font-size:clamp(24px,3.2vw,34px);font-weight:800}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
a{color:var(--kirmizi);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.kapsa{max-width:1180px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:-9999px;background:var(--sari);color:var(--gece);
      padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:99}
.atla:focus{left:0;top:0}

/* ---------------------------------------------------------------- desen */
/* 🔴 CSS GRADIENT, SVG PATTERN DEĞİL. SVG pattern'de `currentColor`
   tanımlandığı yerde çözülüyordu; kırmızı bandın üstüne lacivert çizgi
   basıyordu (ölçüldü 2026-10-05). Gradient'te `currentColor` elementin
   kendi rengi — her bağlamda doğru.
   Toprak katmanı: ince yatay çizgiler, SEYREK. Önceki hâli çok sıktı
   ("çok kötü" — kullanıcı), dokuma gibi görünüyordu. */
.desen{position:absolute;inset:0;pointer-events:none;
  color:rgba(245,181,10,.09);
  background-image:repeating-linear-gradient(180deg,
    currentColor 0 1px, transparent 1px 14px);}
.desen-bant{color:rgba(255,255,255,.085)}
.desen-kapak{color:rgba(245,181,10,.16)}
.desen-alt{color:rgba(255,255,255,.05)}

/* ---------------------------------------------------------------- marka
   🔴 LOGO GÖRSEL DEĞİL, METİN. Tek değişkenle (--mh) ölçekleniyor, her
   yoğunlukta keskin. Şeritli varyant kullanıcı beğenmediği için yok. */
.marka{display:inline-grid;justify-items:center;line-height:1;--mh:52px;
       text-decoration:none}
.marka:hover{text-decoration:none}
/* 🔴 MARKA SARI (kullanıcı istedi 2026-10-05). Tabela kırmızısı
   banda ve vurgulara kalıyor; marka sarıya geçti — koyu zeminde
   kırmızıdan daha yüksek karşıtlık veriyor. */
.marka .ad{font-family:'AygunScript',Georgia,serif;font-weight:700;font-style:italic;
           font-size:calc(var(--mh) * .78);color:var(--sari);
           text-shadow:0 2px 0 rgba(0,0,0,.32);padding-right:.06em}
.marka .is{font-weight:800;font-size:calc(var(--mh) * .30);
           letter-spacing:calc(var(--mh) * .105);
           text-indent:calc(var(--mh) * .105);
           margin-top:calc(var(--mh) * .07);white-space:nowrap;color:#fff}
.marka-alt{--mh:46px;margin-bottom:14px}

/* ---------------------------------------------------------------- üst şerit */
.ust-serit{background:var(--kurum);color:#c4ccd4;font-size:13.5px}
.ust-serit .kapsa{display:flex;justify-content:space-between;align-items:center;
                  gap:14px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.ust-serit a{color:#fff}
.ust-serit strong{color:var(--sari)}

/* ---------------------------------------------------------------- başlık */
.baslik{background:var(--gece);position:sticky;top:0;z-index:40;
        border-bottom:1px solid rgba(255,255,255,.08)}
.baslik .kapsa{display:flex;align-items:center;gap:20px;
               padding-top:12px;padding-bottom:12px}
.menu{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.menu a{color:#cdd5dd;font-size:15px;font-weight:600;padding:9px 13px;border-radius:9px}
.menu a:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.menu a[aria-current="page"]{color:var(--sari)}
.menu-dugme{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.2);
            color:#fff;width:42px;height:42px;border-radius:10px;cursor:pointer;padding:9px}
.menu-dugme svg{width:100%;height:100%}

@media (max-width:860px){
  .menu-dugme{display:block}
  .menu{display:none;margin-left:0;width:100%;flex-direction:column;gap:2px;
        padding-bottom:10px}
  .menu.acik{display:flex}
  .baslik .kapsa{flex-wrap:wrap}
  .marka{--mh:40px}
}

/* ---------------------------------------------------------------- kırıntı */
.kirinti{background:var(--buz);border-bottom:1px solid var(--cizgi);font-size:13.5px}
.kirinti .kapsa{display:flex;gap:8px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.kirinti a{color:var(--duman)}
.kirinti .simdi{color:var(--murekkep);font-weight:600}
.kirinti span{color:var(--cizgi)}
.kirinti .simdi{color:var(--murekkep)}

/* ---------------------------------------------------------------- kahraman
   🔴 TAM GENİŞLİK FOTOĞRAF — Ö13. Kaynaklar yatay 2040×1536, tavan 2048;
   Karayaka'da (tavan 800) ve Lasmar'da (hepsi dikey) bu mümkün değildi. */
.kahraman{position:relative;background:var(--gece);color:#fff;overflow:hidden;
          min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end}
.kahraman-foto{position:absolute;inset:0}
.kahraman-foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Yazının okunması için koyulaştırma — fotoğrafın üstünde metin varsa şart. */
.kahraman-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,17,20,.72) 0%,rgba(14,17,20,.34) 38%,
                                     rgba(14,17,20,.82) 100%)}
.kahraman-ic{position:relative;z-index:2;width:100%;padding:56px 0 46px}
.kahraman h1{color:#fff;max-width:17ch}
.kahraman h1 .vurgu{color:var(--sari)}
.kahraman .giris{font-size:clamp(16px,2vw,19px);color:#d3dae1;max-width:56ch;margin-bottom:26px}

.rozet{display:inline-block;background:var(--kirmizi);color:#fff;font-size:12.5px;
       font-weight:800;letter-spacing:.09em;text-transform:uppercase;
       padding:6px 13px;border-radius:999px;margin-bottom:18px}

.olcu{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;
      padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.olcu span{display:grid;font-size:13px;color:#9aa6b2}
.olcu b{font-size:23px;color:#fff;font-weight:800}

/* ---------------------------------------------------------------- bölüm */
.bolum{padding:clamp(48px,7vw,84px) 0;position:relative}
.bolum-buz{background:var(--buz)}
.bolum-baslik{text-align:center}
.bolum-giris{text-align:center;max-width:62ch;margin:0 auto 38px;color:var(--duman)}
.cubuk::after{content:"";display:block;width:54px;height:4px;border-radius:3px;
              background:var(--kirmizi);margin:14px auto 0}
.cubuk-k::after{content:"";display:block;width:34px;height:3px;border-radius:3px;
                background:var(--kirmizi);margin:10px 0 0}

/* ---------------------------------------------------------------- düğme */
.dugme{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;
       padding:13px 21px;border-radius:11px;border:1px solid transparent;cursor:pointer;
       transition:transform .16s ease,background .2s ease}
.dugme:hover{text-decoration:none;transform:translateY(-1px)}
.dugme svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2}
.dugme .ikon{fill:currentColor;stroke:none}
.dugme .ikon-wa{fill:currentColor;stroke:none}
.dugme-ana{background:var(--kirmizi);color:#fff}
.dugme-ana:hover{background:var(--kirmizi-koy)}
/* 🔴 KONTRAST: önce #25d366 üzerine koyu yeşil yazı vardı, OKUNMUYORDU
   (kullanıcı: "yeşil üzerine siyah olmamış"). Beyaz yazıyla #25d366 de
   yetersiz (~1,9:1). Zemin koyulaştırıldı: #0f9d4f + beyaz ≈ 5,2:1 —
   hem okunuyor hem WhatsApp yeşili olarak tanınıyor. */
.dugme-wa{background:#0b8441;color:#fff}
.dugme-wa:hover{background:#096e36}
.dugme-hayalet{border-color:rgba(255,255,255,.3);color:#fff}
.dugme-hayalet:hover{background:rgba(255,255,255,.1)}
.dugme-ters{background:var(--sari);color:var(--gece)}
.dugme-ters:hover{background:var(--sari-koy)}
.dugme-genis{width:100%;justify-content:center}
.cagri-dugmeler{display:flex;gap:11px;flex-wrap:wrap}

/* hayalet düğme açık zeminde */
.bolum .dugme-hayalet{border-color:var(--cizgi);color:var(--murekkep)}
.bolum .dugme-hayalet:hover{background:var(--buz)}

/* ---------------------------------------------------------------- hizmet */
.hizmet-izgara{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.hizmet-kart{position:relative;background:var(--kagit);border:1px solid var(--cizgi);
             border-radius:var(--yuvarlak);overflow:hidden;display:flex;flex-direction:column;
             transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hizmet-kart:hover{border-color:var(--kirmizi);box-shadow:0 14px 34px rgba(14,17,20,.11);
                   transform:translateY(-2px)}
.hizmet-kapak{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--buz)}
.hizmet-kapak img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hizmet-kart:hover .hizmet-kapak img{transform:scale(1.06)}
.kapak-grafik{display:grid;place-items:center;background:var(--kurum)}
.h-ikon{position:relative;z-index:2;width:58px;height:58px;color:var(--sari);
        transition:transform .4s ease}
.hizmet-kart:hover .h-ikon{transform:scale(1.08)}
.hizmet-govde{padding:18px 19px 20px;display:flex;flex-direction:column;flex:1}
.hizmet-govde p{color:var(--duman);font-size:14.5px;flex:1}
.hizmet-git{color:var(--kirmizi);font-weight:700;font-size:14px;
            display:inline-flex;align-items:center;gap:6px}
.hizmet-git svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.ortu{position:absolute;inset:0}

.temsili{margin-top:8px;font-size:12.5px;color:var(--duman)}

.harita{position:relative;aspect-ratio:4/3;margin:14px 0 10px;border-radius:10px;
         overflow:hidden;border:1px solid var(--cizgi);background:var(--buz)}
.harita iframe{display:block;width:100%;height:100%;border:0}
.harita-ac{display:flex;flex-direction:column;align-items:center;justify-content:center;
           gap:6px;width:100%;height:100%;padding:16px;cursor:pointer;border:0;
           background:none;font:inherit;font-weight:700;font-size:15px;
           color:var(--murekkep);text-align:center}
.harita-ac small{font-weight:400;font-size:12.5px;color:var(--duman)}
.harita-ac:hover{background:var(--kagit)}
.harita-ac:focus-visible{outline:2px solid var(--kirmizi);outline-offset:-3px}
.harita-not{margin:0 0 10px;font-size:13px;color:var(--duman)}

/* ---------------------------------------------------------------- bölge */
.bolge-izgara{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.bolge-kart{position:relative;background:var(--kagit);border:1px solid var(--cizgi);
            border-radius:var(--yuvarlak);padding:22px 20px;transition:border-color .2s ease}
.bolge-kart:hover{border-color:var(--kirmizi)}
.bolge-kart p{color:var(--duman);font-size:14.5px}
.merkez-rozet{display:inline-block;background:var(--sari);color:var(--gece);font-size:11px;
              font-weight:800;letter-spacing:.06em;text-transform:uppercase;
              padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:6px}

.bolge-serit{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
.bolge-serit a,.bolge-serit span{font-size:13px;font-weight:600;padding:6px 13px;
  border-radius:999px;background:rgba(255,255,255,.1);color:#dbe2e8}
.bolge-serit a:hover{background:var(--kirmizi);color:#fff;text-decoration:none}

/* ---------------------------------------------------------------- video */
.video-izgara{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.video{margin:0}
.video-ac{position:relative;display:block;border-radius:var(--yuvarlak);overflow:hidden;
          border:1px solid var(--cizgi)}
.video-ac img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.video-oynat{position:absolute;inset:0;display:grid;place-items:center;
             background:rgba(14,17,20,.3);transition:background .2s ease}
.video-ac:hover .video-oynat{background:rgba(209,42,28,.42)}
.video-oynat svg{width:58px;height:58px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.video figcaption{margin-top:9px;font-size:13.5px;color:var(--duman)}
.video iframe{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:var(--yuvarlak)}

/* ---------------------------------------------------------------- şerit
   🔴 LİSTE İKİ KEZ BASILI, `-50%` kaydırıyor — döngü dikissiz.
   Fareyle ve klavye odağında DURUYOR. */
.serit{position:relative;overflow:hidden;background:var(--kurum);
       border-top:1px solid rgba(255,255,255,.08);
       border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0}
.serit-ic{display:flex;gap:14px;width:max-content;animation:kay 46s linear infinite}
.serit:hover .serit-ic,.serit:focus-within .serit-ic{animation-play-state:paused}
.serit figure{margin:0;flex:0 0 auto;width:210px;aspect-ratio:16/10;
              border-radius:10px;overflow:hidden}
.serit img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes kay{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .serit-ic{animation:none;flex-wrap:nowrap;overflow-x:auto}
}

/* ---------------------------------------------------------------- çağrı bandı */
/* 🔴 PARALAKS (md.5): `background-attachment:fixed` + koyu örtü.
   Arka plan karesi YAZISIZ — gömük yazılı afiş olsaydı iki metin çakışırdı.
   Mobilde `scroll`a dönüyor: iOS'ta `fixed` zıplıyor. */
.bolum-cagri{position:relative;color:#fff;overflow:hidden;
  background:var(--kirmizi) url('/assets/img/is/kanal-kazisi.webp') center/cover fixed}
.bolum-cagri::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(168,31,20,.93),rgba(140,24,15,.95))}
.bolum-cagri>*{position:relative;z-index:2}
@media (max-width:860px){ .bolum-cagri{background-attachment:scroll} }
.bolum-cagri h2{color:#fff}
.bolum-cagri p{color:rgba(255,255,255,.9);margin:0;max-width:60ch}
.cagri{position:relative;z-index:2;display:flex;gap:30px;align-items:center;
       justify-content:space-between;flex-wrap:wrap}
/* 🔴 HOVER'I DA YAZ: `.bolum .dugme-hayalet:hover` açık zemin için
   `--buz` veriyor; bant kırmızı olduğu için orada beyaz yazı + açık
   zemin = yine okunmaz. Bant kendi hover'ını tanımlıyor. */
.bolum-cagri .dugme-hayalet{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.bolum-cagri .dugme-hayalet:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---------------------------------------------------------------- sss
   🔴 İKİ BAĞIMSIZ SÜTUN, ızgara DEĞİL — ızgarada açılan soru karşı sütunda
   boşluk bırakıyor (Helsan'da ölçüldü). */
.sss{display:grid;gap:13px;grid-template-columns:1fr 1fr;align-items:start}
.sss-sutun{display:grid;gap:13px;align-content:start}
@media (max-width:860px){ .sss{grid-template-columns:1fr} }
.sss details{background:var(--kagit);border:1px solid var(--cizgi);
             border-radius:11px;padding:14px 17px}
.sss summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";float:right;color:var(--kirmizi);font-weight:800}
.sss details[open] summary::after{content:"–"}
.sss p{margin:11px 0 0;color:var(--duman);font-size:14.5px}

/* ---------------------------------------------------------------- kutu/liste */
.kutu{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
      padding:22px 21px;margin-bottom:18px}
.ikili-blok{display:grid;gap:38px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
            align-items:start}
@media (max-width:900px){ .ikili-blok{grid-template-columns:1fr;gap:28px} }
.yan-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.yan-liste.duz li{font-size:15px;color:var(--duman)}
.liste-tik{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:9px}
.liste-tik li{position:relative;padding-left:27px;color:var(--duman)}
.liste-tik li::before{content:"";position:absolute;left:0;top:.52em;width:13px;height:9px;
  border-left:2.5px solid var(--kirmizi);border-bottom:2.5px solid var(--kirmizi);
  transform:rotate(-45deg)}

/* ---------------------------------------------------------------- form */
.form{display:grid;gap:15px}
/* 🔴 `align-content:start` ŞART: `.ikili` iki label'ı aynı yüksekliğe çekiyor;
   biri üç satırlıysa (etiket + kutu + yardım) öbürünün kutusu şişip aşağı
   kayıyor. Helsan'da ölçüldü 2026-10-03 (48,75px → 62,5px, 13px kayma). */
.form label{display:grid;gap:6px;align-content:start;font-weight:600;font-size:14.5px}
.form input,.form select,.form textarea{
  width:100%;padding:11px 13px;border:1px solid var(--cizgi);border-radius:9px;
  font:inherit;font-size:15px;color:var(--murekkep);background:var(--kagit)}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--kirmizi);outline-offset:1px;border-color:var(--kirmizi)}
.ikili{display:grid;gap:15px;grid-template-columns:1fr 1fr}
@media (max-width:620px){ .ikili{grid-template-columns:1fr} }
.form-not{font-size:13px;color:var(--duman);font-weight:400;margin:0}
.onay{grid-template-columns:auto 1fr !important;align-items:start}
.onay input{width:auto;margin-top:5px}
.onay span{font-size:13.5px;line-height:1.5;color:var(--duman);font-weight:400}
.uyari{padding:13px 17px;border-radius:9px;font-size:15px;margin:0 0 20px}
.uyari-iyi{background:#e7f7ee;color:#11633c;border:1px solid #b9e4cc}
.uyari-kotu{background:#fdecea;color:#92221a;border:1px solid #f5c6c1}

/* ---------------------------------------------------------------- altbilgi */
.altbilgi{position:relative;background:var(--gece);color:#aab4be;
          padding:52px 0 26px;overflow:hidden;margin-top:0}
.altbilgi .kapsa{position:relative;z-index:2}
.altbilgi h3{color:#fff;font-size:15px;margin-bottom:13px}
.altbilgi a{color:#cdd5dd}
.altbilgi a:hover{color:#fff}
.duzen{display:grid;gap:32px;grid-template-columns:1.5fr 1fr 1fr 1fr}
@media (max-width:900px){ .duzen{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .duzen{grid-template-columns:1fr} }
.alt-liste{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14.5px}
.tanit{font-size:14.5px}
.sade{color:#cdd5dd}
.alt-cizgi{display:flex;justify-content:space-between;align-items:center;gap:16px;
           flex-wrap:wrap;margin-top:34px;padding-top:18px;
           border-top:1px solid rgba(255,255,255,.1);font-size:13px}

/* ---------------------------------------------------------------- WhatsApp
   🔴 KIT İKİ BAĞLANTI BASIYOR (ortak/whatsapp.php): biri masaüstü
   (web.whatsapp.com), biri mobil (wa.me). Hangisinin görüneceğini SİTE
   seçiyor — bu kural yoksa İKİSİ BİRDEN çıkıyor. Yazılmadığında tam
   olarak bu oldu (2026-10-05, ilk çizimde iki WhatsApp düğmesi).

   ÇİFT SINIF (`.wa-mobil.wa-mobil`) BİLEREK: tek sınıfla yazılınca
   `.cagri-dugmeler .dugme` ve `.yuzen a` gibi kurallar özgüllükte yeniyor
   ve gizleme tutmuyor. Lasmar'da aynı ders alınmıştı. */
.wa-masaustu.wa-masaustu{display:none}
@media (min-width:601px){
  .wa-mobil.wa-mobil{display:none}
  .wa-masaustu.wa-masaustu{display:inline-flex}
  .yuzen .wa-masaustu.wa-masaustu{display:flex}
}

/* ---------------------------------------------------------------- yüzen çubuk
   🔴 ÇİFT SINIF (`.wa-mobil.wa-mobil`) gerekmiyor burada: `.menu a` kuralı
   yüzen çubuğu kapsamıyor çünkü `.yuzen` menünün dışında. Yine de seçici
   özgüllüğü düşük tutuldu ki ileride çakışmasın. */
.yuzen{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
       gap:1px;background:rgba(0,0,0,.15)}
.yuzen a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
         padding:14px 10px;font-weight:700;font-size:15px}
.yuzen a:hover{text-decoration:none}
.yuzen-tel{background:var(--kirmizi);color:#fff}
.yuzen-wa{background:#0b8441;color:#fff}
.yuzen svg{width:19px;height:19px;fill:currentColor}
@media (max-width:860px){
  .yuzen{display:flex}
  body{padding-bottom:54px}
}

/* ---------------------------------------------------------------- hareket
   🔴 GÖRÜNÜRLÜK BETİĞE BAĞLANMIYOR. Beliriş CSS `animation-timeline: view()`
   ile; desteklenmeyen tarayıcıda içerik olduğu gibi görünür, JS beklemiyor. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes belir{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
    .bel{animation:belir .6s ease both;animation-timeline:view();animation-range:entry 0% cover 24%}
  }
}