/* OYP Sektör İş İlanları — şablonun (main.css) üstüne sade, mobil öncelikli ek stiller */
:root { --mavi: #2563eb; --mavi-k: #1d4ed8; --yesil: #16a34a; --yesil-a: #22c55e; --koyu: #0f172a; --metin: #334155; --soluk: #64748b; --cizgi: #e2e8f0; --zemin: #f8fafc; --r: 16px; }
body { color: var(--metin); background: #fff; }
b, strong { font-weight: 700; }
.oyp-soluk { color: var(--soluk); }

/* Logo */
.oyp-logo { text-decoration: none; }
.oyp-logo-kutu { background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; font: 800 18px/1 Montserrat, sans-serif; padding: 9px 10px; border-radius: 10px; letter-spacing: .5px; }
.oyp-logo-yazi { display: flex; flex-direction: column; font: 600 12px/1.1 Montserrat, sans-serif; color: var(--soluk); text-transform: uppercase; letter-spacing: .6px; }
.oyp-logo-yazi b { font-size: 16px; color: var(--koyu); text-transform: none; letter-spacing: 0; }
.main-navbar .nav-link.active { color: var(--mavi) !important; }

.oyp-bildirim { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-weight: 500; }
.oyp-bildirim.hata { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Hero */
.oyp-hero { background: linear-gradient(135deg, #e0ecff 0%, #f0fdf4 100%); padding: 48px 0 56px; }
.oyp-ust-etiket { display: inline-block; background: #dbeafe; color: var(--mavi-k); font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 20px; letter-spacing: .3px; }
.oyp-hero h1 { font: 800 clamp(34px, 6vw, 56px)/1.08 Montserrat, sans-serif; color: var(--koyu); margin: 16px 0 14px; letter-spacing: -1px; }
.oyp-hero h1 span { color: var(--yesil); }
.oyp-hero-alt { font-size: 17px; max-width: 560px; line-height: 1.55; }
.oyp-hero-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 16px; max-width: 600px; }
.oyp-buyuk-dugme { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r); color: #fff !important; text-decoration: none; box-shadow: 0 12px 24px rgba(37, 99, 235, .18); transition: transform .15s; }
.oyp-buyuk-dugme:hover { transform: translateY(-2px); }
.oyp-buyuk-dugme i { font-size: 26px; width: 34px; text-align: center; }
.oyp-buyuk-dugme b { display: block; font-size: 17px; }
.oyp-buyuk-dugme small { display: block; opacity: .9; font-size: 12.5px; line-height: 1.3; }
.oyp-buyuk-dugme.mavi { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.oyp-buyuk-dugme.yesil { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 12px 24px rgba(22, 163, 74, .2); }
.oyp-ara { display: flex; gap: 8px; background: #fff; padding: 8px; border-radius: var(--r); box-shadow: 0 10px 30px rgba(15, 23, 42, .08); max-width: 600px; }
.oyp-ara .form-select { border: 0; background-color: var(--zemin); }
.oyp-ara .btn { border-radius: 12px; padding: 0 18px; white-space: nowrap; }
.oyp-sayilar { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.oyp-sayilar b { display: block; font: 800 26px/1 Montserrat, sans-serif; color: var(--koyu); }
.oyp-sayilar span { font-size: 13px; color: var(--soluk); }
.oyp-sayilar.koyu > div { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 16px; }
.oyp-hero-gorsel img { width: 100%; height: auto; border-radius: 28px; box-shadow: 0 30px 60px rgba(15, 23, 42, .18); transform: rotate(2deg); }

/* Bölümler */
.oyp-bolum { padding: 40px 0; }
.oyp-bolum.gri { background: var(--zemin); }
.oyp-bolum-bas { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 12px; }
.oyp-bolum-bas h2, .oyp-bolum h2.text-center { font: 800 24px Montserrat, sans-serif; color: var(--koyu); margin: 0; }
.oyp-bolum-bas a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.oyp-alt-baslik { font: 800 20px Montserrat, sans-serif; color: var(--koyu); margin: 32px 0 14px; }
.oyp-sayfa-bas { background: linear-gradient(135deg, #e0ecff, #eef6ff); padding: 28px 0 22px; }
.oyp-sayfa-bas.yesil { background: linear-gradient(135deg, #dcfce7, #f0fdf4); }
.oyp-sayfa-bas h1 { font: 800 28px Montserrat, sans-serif; color: var(--koyu); margin: 0 0 4px; }
.oyp-sayfa-bas p { margin: 0; color: var(--soluk); }

.oyp-gruplar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.oyp-grup-kart { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border: 1px solid var(--cizgi); border-radius: var(--r); text-decoration: none; color: var(--koyu); background: #fff; transition: border-color .15s, box-shadow .15s; }
.oyp-grup-kart:hover { border-color: var(--mavi); box-shadow: 0 10px 24px rgba(37, 99, 235, .1); }
.oyp-grup-kart i { font-size: 24px; color: var(--mavi); margin-bottom: 6px; }
.oyp-grup-kart.yesil i { color: var(--yesil); }
.oyp-grup-kart small { color: var(--soluk); }

/* Kartlar */
.oyp-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.oyp-kart { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 16px; text-decoration: none; color: var(--metin); transition: border-color .15s, box-shadow .15s, transform .15s; }
.oyp-kart:hover { border-color: #93c5fd; box-shadow: 0 14px 30px rgba(15, 23, 42, .08); transform: translateY(-2px); color: var(--metin); }
.oyp-kart-ust { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.oyp-kart h3 { font: 700 17px/1.3 Montserrat, sans-serif; color: var(--koyu); margin: 0 0 4px; }
.oyp-firma { font-size: 13.5px; color: var(--soluk); }
.oyp-firma.buyuk { font-size: 15px; margin-bottom: 8px; }
.oyp-maas { font-weight: 800; color: var(--yesil); white-space: nowrap; font-size: 14.5px; }
.oyp-maas.kucuk { font-size: 13.5px; }
.oyp-maas.buyuk { font-size: 22px; }
.oyp-maas small { font-weight: 500; color: var(--soluk); font-size: 14px; }
.oyp-rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
.oyp-rozet { background: #eff6ff; color: #1e40af; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.oyp-rozet.eslesti { background: #dcfce7; color: #166534; }
.oyp-rozet.eslesti::before { content: '✓ '; }
.oyp-rozet.gri { background: #f1f5f9; color: var(--soluk); }
.oyp-kart-alt { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px dashed var(--cizgi); padding-top: 10px; margin-top: auto; }
.oyp-etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.oyp-etiket { font-size: 12px; font-weight: 600; color: var(--metin); background: #f1f5f9; padding: 4px 9px; border-radius: 8px; }
.oyp-etiket.yesil { background: #dcfce7; color: #166534; }
.oyp-etiket.mavi { background: #dbeafe; color: #1e40af; }
.oyp-etiket.turuncu { background: #ffedd5; color: #9a3412; }
.oyp-zaman { font-size: 12px; color: var(--soluk); white-space: nowrap; }
.oyp-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #22c55e); color: #fff; font: 800 19px/46px Montserrat, sans-serif; text-align: center; flex: none; }
.oyp-avatar.buyuk { width: 64px; height: 64px; line-height: 64px; font-size: 26px; }
.oyp-bos { background: var(--zemin); border: 1px dashed var(--cizgi); border-radius: var(--r); padding: 28px; text-align: center; color: var(--soluk); }
.oyp-adim { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 22px; height: 100%; }
.oyp-adim span { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--mavi); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.oyp-adim b { display: block; color: var(--koyu); font-size: 17px; margin-bottom: 4px; }
.oyp-adim p { margin: 0; color: var(--soluk); }

/* Süzgeç */
.oyp-suzgec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 10px; }
.oyp-suzgec .form-select { width: auto; min-width: 150px; flex: 1 1 150px; border-radius: 10px; }
.oyp-sonuc-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 12px; }
.oyp-ipucu { font-size: 14px; font-weight: 600; text-decoration: none; }
.oyp-sayfalar { display: flex; justify-content: center; gap: 16px; align-items: center; margin-top: 22px; }
.oyp-sayfalar a { font-weight: 700; text-decoration: none; }

/* Çip / seçim */
.oyp-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.oyp-cip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #cbd5e1; background: #fff; color: var(--metin); border-radius: 22px; padding: 9px 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; user-select: none; margin: 0; transition: background .12s, border-color .12s; -webkit-tap-highlight-color: transparent; }
.oyp-cip input { position: absolute; opacity: 0; pointer-events: none; }
.oyp-cip.on { background: var(--mavi); border-color: var(--mavi); color: #fff; }
.oyp-cip.on::before { content: '✓'; font-weight: 800; }
.oyp-oneri { border: 1.5px dashed #cbd5e1; background: #fff; color: var(--soluk); border-radius: 20px; padding: 5px 11px; font-size: 13px; font-weight: 600; }
.oyp-oneri:hover { border-color: var(--mavi); color: var(--mavi); }
.oyp-secim { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.oyp-secim.iki { grid-template-columns: 1fr 1fr; }
.oyp-secim.dort { grid-template-columns: repeat(4, 1fr); }
.oyp-secim label { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 12px 8px; font-weight: 600; cursor: pointer; margin: 0; background: #fff; min-height: 52px; line-height: 1.25; }
.oyp-secim label input { position: absolute; opacity: 0; pointer-events: none; }
.oyp-secim label.on { border-color: var(--mavi); background: #eff6ff; color: var(--mavi-k); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.oyp-secim.buyuk label { padding: 18px 8px; font-size: 16px; }
.oyp-secim.buyuk label i { font-size: 20px; }
.oyp-beceri-secici { display: flex; flex-direction: column; gap: 8px; }
.oyp-grup { border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 12px; background: #fff; }
.oyp-grup summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; color: var(--koyu); display: flex; align-items: center; gap: 10px; }
.oyp-grup summary::-webkit-details-marker { display: none; }
.oyp-grup summary::after { content: '▾'; margin-left: auto; color: var(--soluk); transition: transform .15s; }
.oyp-grup[open] summary::after { transform: rotate(180deg); }
.oyp-grup summary i { color: var(--mavi); width: 20px; text-align: center; }
.oyp-grup .oyp-cipler { padding-bottom: 14px; }
.oyp-grup-say { font-style: normal; background: var(--mavi); color: #fff; border-radius: 12px; font-size: 12px; padding: 1px 8px; }
.oyp-sayac { font-size: 13px; color: var(--mavi); font-weight: 700; margin-left: 6px; }

/* Anahtar (switch) */
.oyp-anahtar { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; font-weight: 500; }
.oyp-anahtar em { font-style: normal; }
.oyp-anahtar input { position: absolute; opacity: 0; pointer-events: none; }
.oyp-anahtar span { width: 46px; height: 26px; border-radius: 13px; background: #cbd5e1; position: relative; flex: none; transition: background .15s; }
.oyp-anahtar span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.oyp-anahtar input:checked + span { background: var(--yesil-a); }
.oyp-anahtar input:checked + span::after { transform: translateX(20px); }
.oyp-anahtar input:focus-visible + span { outline: 2px solid var(--mavi); outline-offset: 2px; }

/* Formlar */
.oyp-form-sayfa { background: var(--zemin); padding: 28px 0 48px; }
.oyp-form-kart { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--cizgi); border-radius: 20px; padding: 26px 22px; box-shadow: 0 14px 40px rgba(15, 23, 42, .05); }
.oyp-form-kart.dar { max-width: 420px; }
.oyp-form-kart.genis { max-width: 760px; }
.oyp-form-kart h1 { font: 800 26px Montserrat, sans-serif; color: var(--koyu); margin: 0 0 6px; }
.oyp-alan { padding: 16px 0; border-bottom: 1px solid #f1f5f9; }
.oyp-alan:last-of-type { border-bottom: 0; }
.oyp-etiket-baslik { display: block; font-weight: 700; color: var(--koyu); margin-bottom: 10px; font-size: 15.5px; }
.oyp-not-ekle { border: 1.5px dashed #93c5fd; background: #eff6ff; color: var(--mavi-k); font-weight: 700; border-radius: 12px; padding: 10px 14px; }
.oyp-onay { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.oyp-onay input { margin-top: 4px; }
.oyp-adet { display: flex; align-items: center; border: 1.5px solid #cbd5e1; border-radius: 12px; overflow: hidden; width: 150px; }
.oyp-adet button { width: 46px; height: 46px; border: 0; background: var(--zemin); font-size: 22px; font-weight: 700; }
.oyp-adet input { width: 58px; text-align: center; border: 0; font-weight: 800; font-size: 18px; }
.oyp-yayin { background: #f0fdf4; border-radius: 12px; padding: 14px !important; margin: 10px 0 16px; border: 0 !important; }
.form-control, .form-select { border-radius: 10px; }

/* Detay */
.oyp-geri { text-decoration: none; font-weight: 600; font-size: 14px; }
.oyp-detay { background: #fff; border: 1px solid var(--cizgi); border-radius: 20px; padding: 24px 22px; }
.oyp-detay h1 { font: 800 clamp(22px, 4vw, 30px)/1.2 Montserrat, sans-serif; color: var(--koyu); margin: 0 0 8px; }
.oyp-detay h2 { font: 700 17px Montserrat, sans-serif; color: var(--koyu); margin: 24px 0 10px; }
.oyp-eslesme { margin: 10px 0 0; color: #166534; font-weight: 600; }
.oyp-not-metin { background: var(--zemin); border-radius: 12px; padding: 14px; margin: 0; }
.oyp-bilgi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 20px 0 0; }
.oyp-bilgi > div { background: var(--zemin); border-radius: 12px; padding: 12px 14px; }
.oyp-bilgi dt { font-size: 12.5px; color: var(--soluk); font-weight: 600; }
.oyp-bilgi dd { margin: 2px 0 0; font-weight: 700; color: var(--koyu); }
.oyp-yan { position: sticky; top: 90px; background: #fff; border: 1px solid var(--cizgi); border-radius: 20px; padding: 20px; }
.oyp-sikayet { margin-top: 16px; font-size: 13px; color: var(--soluk); }
.oyp-sikayet summary { cursor: pointer; }
.oyp-basvurular { display: flex; flex-direction: column; gap: 10px; }
.oyp-basvuru { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; }
.oyp-basvuru.yeni { border-left: 4px solid var(--mavi); }
.oyp-basvuru.olumlu { border-left: 4px solid var(--yesil-a); }
.oyp-basvuru.olumsuz { opacity: .65; }
.oyp-basvuru a { text-decoration: none; }
.oyp-basvuru-dugme { display: flex; gap: 6px; align-items: center; }
.oyp-basvuru-dugme .form-select { width: auto; }

/* Panel */
.oyp-panel-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: 18px; padding: 18px; }
.oyp-tablo { display: flex; flex-direction: column; border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; background: #fff; }
.oyp-satir { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--metin); border-bottom: 1px solid #f1f5f9; }
.oyp-satir:last-child { border-bottom: 0; }
.oyp-satir:hover { background: var(--zemin); color: var(--metin); }
.oyp-satir b { display: block; color: var(--koyu); }
.oyp-satir small { color: var(--soluk); }
.oyp-durum { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 10px; background: #f1f5f9; white-space: nowrap; }
.oyp-durum.olumlu { background: #dcfce7; color: #166534; }
.oyp-durum.olumsuz { background: #fee2e2; color: #991b1b; }
.oyp-durum.goruldu { background: #dbeafe; color: #1e40af; }

.oyp-metin { max-width: 820px; }
.oyp-metin h1 { font: 800 26px Montserrat, sans-serif; color: var(--koyu); }
.oyp-metin h2 { font: 700 18px Montserrat, sans-serif; color: var(--koyu); margin-top: 22px; }
.oyp-alt-yazi { color: #94a3b8; font-size: 14px; }

@media (max-width: 575.98px) {
  .oyp-hero { padding: 26px 0 34px; }
  .oyp-hero-dugmeler { grid-template-columns: 1fr; }
  .oyp-kartlar { grid-template-columns: 1fr; }
  .oyp-secim.dort { grid-template-columns: 1fr 1fr; }
  .oyp-form-kart { padding: 20px 16px; border-radius: 16px; }
  .oyp-suzgec .form-select { flex: 1 1 45%; min-width: 0; }
  .oyp-yan { position: static; }
  .oyp-sayilar { gap: 18px; }
}

/* Google / Apple ile giriş */
.oyp-sosyal-dugmeler { display: grid; gap: 10px; margin: 6px 0 4px; }
.oyp-sosyal { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; font-weight: 600; font-size: 15.5px; }
.oyp-sosyal.google { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
.oyp-sosyal.google:hover { background: #f9fafb; color: #111827; }
.oyp-sosyal.apple { background: #000; color: #fff; border: 1px solid #000; }
.oyp-sosyal.apple:hover { background: #1f2937; color: #fff; }
.oyp-sosyal.apple i { font-size: 20px; }
.oyp-veya { display: flex; align-items: center; gap: 12px; color: var(--soluk); font-size: 13px; margin: 16px 0 14px; }
.oyp-veya::before, .oyp-veya::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
/* Doğrulama kodu */
.oyp-kod { text-align: center; font: 700 28px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 10px; }
/* Hesap satırları */
.oyp-hesap-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
/* Gezinti yolu ve iç bağlantılar (SEO) */
.oyp-yol { font-size: 14px; color: var(--soluk); }
.oyp-yol a { color: var(--mavi); text-decoration: none; }
.oyp-baglantilar { display: flex; flex-wrap: wrap; gap: 8px; }
.oyp-baglantilar a { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 20px; padding: 6px 12px; font-size: 14px; color: var(--metin); text-decoration: none; }
.oyp-baglantilar a:hover { border-color: var(--mavi); color: var(--mavi); }
.oyp-baglantilar small { color: var(--soluk); margin-left: 4px; }

/* ===================== Ana sayfa: hareketli sahne ve efektler ===================== */
.oyp-hero { position: relative; overflow: hidden; padding-bottom: 90px; }
.oyp-hero > .container { position: relative; z-index: 2; }
.oyp-hero-baloncuk { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.oyp-hero-baloncuk span { position: absolute; bottom: -60px; border-radius: 50%; border: 2px solid rgba(37, 99, 235, .18); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(191,219,254,.25) 60%, rgba(191,219,254,0)); }
.oyp-donen { display: flex; align-items: center; line-height: 28px; gap: 8px; font-weight: 700; color: var(--koyu); font-size: 17px; margin: -4px 0 12px; height: 28px; }
.oyp-donen em { font-style: normal; color: var(--soluk); font-weight: 600; }
.oyp-donen-kutu { position: relative; display: inline-block; height: 28px; overflow: hidden; min-width: 230px; }
.oyp-donen-kutu b { position: absolute; left: 0; top: 1px; line-height: 26px; white-space: nowrap; color: var(--mavi); background: #dbeafe; border-radius: 8px; padding: 1px 10px; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; padding: 0 10px; }
.oyp-donen-kutu b.gir { transform: translateY(110%); opacity: 0; }
.oyp-donen-kutu b.cik { transform: translateY(-110%); opacity: 0; }

.oyp-sahne-kap { position: relative; max-width: 580px; margin: 0 0 0 auto; }
.oyp-sahne { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 30px 60px rgba(15, 23, 42, .22); }
.oyp-yuzen { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.96); border-radius: 14px; padding: 10px 14px; box-shadow: 0 14px 30px rgba(15, 23, 42, .18); font-size: 13px; color: var(--metin); max-width: 260px; text-decoration: none; }
.oyp-yuzen b { display: block; color: var(--koyu); font-size: 14px; line-height: 1.25; }
.oyp-yuzen i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 16px; }
.oyp-yuzen.k1 { top: -26px; right: -18px; } .oyp-yuzen.k1 i { background: var(--yesil); }
.oyp-yuzen.k2 { bottom: -28px; left: -22px; } .oyp-yuzen.k2 i { background: var(--mavi); }
.oyp-yuzen.k3 { bottom: -26px; right: 24px; } .oyp-yuzen.k3 i { background: #f59e0b; }
.oyp-nabiz { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); margin-right: 4px; }
.oyp-dalga { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 70px; pointer-events: none; }
.oyp-dalga svg { position: absolute; bottom: 0; width: 200%; height: 100%; }

/* Kayan beceri şeridi */
.oyp-serit { background: var(--koyu); color: #e2e8f0; overflow: hidden; padding: 14px 0; white-space: nowrap; }
.oyp-serit-ic { display: inline-flex; gap: 34px; padding-right: 34px; font-weight: 600; font-size: 15px; }
.oyp-serit-ic span::before { content: "✦"; color: #22c55e; margin-right: 12px; }

/* Grup kartları ve adımlar */
.oyp-grup-kart { position: relative; overflow: hidden; transition: transform .2s, border-color .15s, box-shadow .2s; }
.oyp-grup-kart::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.12), transparent 70%); transition: transform .4s; }
.oyp-grup-kart:hover { transform: translateY(-4px); }
.oyp-grup-kart:hover::after { transform: scale(1.8); }
.oyp-grup-kart i { display: inline-block; width: fit-content; }
.oyp-adimlar { position: relative; }
.oyp-adim { position: relative; transition: transform .2s, box-shadow .2s; }
.oyp-adim:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15, 23, 42, .08); }
.oyp-adim .oyp-adim-ikon { position: absolute; top: 18px; right: 18px; font-size: 26px; color: #bfdbfe; }

/* Son çağrı */
.oyp-cagri { position: relative; overflow: hidden; background: linear-gradient(135deg, #1d4ed8, #16a34a); color: #fff; border-radius: 24px; padding: 34px 28px; text-align: center; }
.oyp-cagri h2 { font: 800 clamp(22px, 4vw, 30px) Montserrat, sans-serif; margin: 0 0 8px; color: #fff; }
.oyp-cagri p { color: #fff; opacity: .92; margin: 0 0 18px; }
.oyp-cagri .btn { font-weight: 700; padding: 12px 22px; border-radius: 12px; }
.oyp-cagri .oyp-hero-baloncuk span { border-color: rgba(255,255,255,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 70%); }

/* Kaydırınca belirme (JS sınıfı ekler; JS yoksa her şey görünür) */
.js-acik [data-gor] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js-acik [data-gor].gorundu { opacity: 1; transform: none; }

@media (max-width: 991px) {
  .oyp-sahne-kap { max-width: 520px; margin: 16px auto 10px; }
  .oyp-yuzen.k1 { right: -6px; } .oyp-yuzen.k2 { left: -6px; }
}
@media (max-width: 575px) {
  .oyp-donen { font-size: 15px; } .oyp-donen-kutu { min-width: 190px; }
  .oyp-yuzen { padding: 8px 10px; font-size: 12px; max-width: 210px; } .oyp-yuzen b { font-size: 13px; } .oyp-yuzen i { width: 28px; height: 28px; flex-basis: 28px; font-size: 13px; }
  .oyp-hero { padding-bottom: 70px; }
}

/* Animasyonlar sadece "hareketi azalt" kapalıyken */
@media (prefers-reduced-motion: no-preference) {
  .oyp-sahne .s-kol { transform-box: view-box; transform-origin: 108px 252px; animation: s-kol 3.2s ease-in-out infinite; }
  .oyp-sahne .s-huzme path { stroke-dasharray: 6 14; animation: s-huzme .5s linear infinite; }
  .oyp-sahne .s-serpinti circle { transform-box: fill-box; transform-origin: center; animation: s-serp .8s ease-out infinite; animation-delay: var(--g); }
  .oyp-sahne .s-kopukler circle { transform-box: fill-box; transform-origin: center; animation: s-kopuk 10s ease-in-out infinite; animation-delay: var(--g); }
  .oyp-sahne .s-parilti { animation: s-parilti 10s ease-in-out infinite; }
  .oyp-sahne .s-yildizlar path { transform-box: fill-box; transform-origin: center; animation: s-yildiz 10s ease-in-out infinite; animation-delay: var(--g); }
  .oyp-sahne .s-baloncuklar circle { transform-box: fill-box; transform-origin: center; animation: s-balon 4s ease-in infinite; animation-delay: var(--g); }
  .oyp-sahne .s-damla { animation: s-damla 1.6s ease-in infinite; animation-delay: var(--g); }
  .oyp-sahne .s-halka { transform-box: fill-box; transform-origin: center; animation: s-halka 2.4s ease-out infinite; }
  .oyp-sahne .s-h2 { animation-delay: 1.2s; }
  .oyp-sahne .s-led { animation: s-led 3s ease-in-out infinite; }
  .oyp-sahne .s-yanip { animation: s-led 1.2s steps(2) infinite; }
  .oyp-sahne .s-arac { animation: s-arac 10s ease-in-out infinite; }
  .oyp-yuzen { animation: yuz 5s ease-in-out infinite; }
  .oyp-yuzen.k2 { animation-delay: -1.7s; } .oyp-yuzen.k3 { animation-delay: -3.3s; }
  .oyp-yuzen.k1, .oyp-yuzen.k2, .oyp-yuzen.k3 { animation-name: yuz, belir; animation-duration: 5s, .7s; animation-iteration-count: infinite, 1; animation-fill-mode: none, backwards; }
  .oyp-yuzen.k1 { animation-delay: 0s, .4s; } .oyp-yuzen.k2 { animation-delay: -1.7s, .9s; } .oyp-yuzen.k3 { animation-delay: -3.3s, 1.4s; }
  .oyp-nabiz::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--yesil); animation: nabiz 1.6s ease-out infinite; }
  .oyp-hero-baloncuk span { animation: hero-balon linear infinite; }
  .oyp-dalga svg { animation: dalga 14s linear infinite; }
  .oyp-dalga svg + svg { animation-duration: 9s; animation-direction: reverse; }
  .oyp-serit-ic { animation: serit 40s linear infinite; }
  .oyp-serit:hover .oyp-serit-ic { animation-play-state: paused; }
  .oyp-grup-kart:hover i { animation: zipla .5s ease; }
  .oyp-buyuk-dugme { position: relative; overflow: hidden; }
  .oyp-buyuk-dugme::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: dugme-parla 4.5s ease-in-out infinite; }
  .oyp-buyuk-dugme.yesil::after { animation-delay: 2.2s; }
}
@keyframes s-kol { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes s-huzme { to { stroke-dashoffset: -20; } }
@keyframes s-serp { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(14px, -6px) scale(.3); opacity: 0; } }
@keyframes s-kopuk { 0% { transform: scale(0); opacity: 0; } 10% { transform: scale(1.15); opacity: 1; } 14%, 58% { transform: scale(1); opacity: 1; } 66%, 100% { transform: scale(.4) translateY(14px); opacity: 0; } }
@keyframes s-parilti { 0%, 60% { transform: skewX(-18deg) translateX(0); opacity: 0; } 62% { opacity: 1; } 76% { transform: skewX(-18deg) translateX(480px); opacity: 1; } 78%, 100% { transform: skewX(-18deg) translateX(480px); opacity: 0; } }
@keyframes s-yildiz { 0%, 72% { transform: scale(0) rotate(0); opacity: 0; } 78% { transform: scale(1.3) rotate(45deg); opacity: 1; } 86% { transform: scale(1) rotate(90deg); opacity: 1; } 94%, 100% { transform: scale(0) rotate(135deg); opacity: 0; } }
@keyframes s-balon { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x), -200px) scale(1.2); opacity: 0; } }
@keyframes s-damla { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
@keyframes s-halka { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes s-led { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes s-arac { 0%, 70%, 100% { transform: translateY(0); } 74% { transform: translateY(-2px); } 78% { transform: translateY(0); } }
@keyframes yuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes belir { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@keyframes nabiz { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@keyframes hero-balon { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(-50vh) translateX(18px); } 100% { transform: translateY(-110vh) translateX(-10px); opacity: 0; } }
@keyframes dalga { to { transform: translateX(-50%); } }
@keyframes serit { to { transform: translateX(-50%); } }
@keyframes zipla { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes dugme-parla { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }
/* İş türü kartları: 7 kart tek sırada (masaüstü), ikon renkli baloncukta */
@media (min-width: 992px) { .oyp-gruplar { grid-template-columns: repeat(7, 1fr); } }
.oyp-grup-kart i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; background: #dbeafe; margin-bottom: 8px; }
.oyp-grup-kart.yesil i { background: #dcfce7; }
.oyp-grup-kart:hover i { background: var(--mavi); color: #fff; }
.oyp-grup-kart.yesil:hover i { background: var(--yesil); }