/* ============================================================
   RESCO CORPORATE TANITIM SITESI — sayfa stilleri
   Yerlesim microsoft.com modeli: buyuk hero slayti, urun kartlari, one cikan bloklar,
   bolge kartlari, koyu CTA bandi. Tipografi ve renkler rescotelecom.com ile AYNI:
   Sora baslik, Karla metin, JetBrains Mono etiket; koyu alanlar 155deg #1e3a5f -> #2360bd.
   Ust cubuk ve footer kurallari site-ortak.css'te (#site-ust / #site-alt).
   Kirilimlar: 960 (tablet), 880, 640 (mobil).
   ============================================================ */
:root{
  --ground:#FFFFFF; --soft:#F6F9FD; --ink:#0F1B2E; --ink2:#4E5F7A; --faint:#8A99B0;
  --line:#E3E9F3; --lac:#1e3a5f; --lac2:#2360bd; --mavi:#2F6FD0; --mavi-soft:#E8F0FC;
  --esqueire:#5B3FBF; --esqueire2:#8E7CF0; --telecom:#2F6FD0; --telecom2:#6FA3F2; --pos:#1F9D63; --pos2:#5FD39A;
  --golge:0 1px 2px rgba(15,27,46,.05), 0 10px 30px rgba(15,27,46,.08);
  --koyu:linear-gradient(155deg,var(--lac) 0%,var(--lac2) 55%,var(--lac2) 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 Karla,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:Sora,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.01em}
a{color:inherit}
img,svg{max-width:100%}
.k{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.etiket{font:700 11.5px/1 "JetBrains Mono",monospace;letter-spacing:.18em;color:var(--mavi);margin-bottom:14px;text-transform:uppercase}
.hero .etiket,.cta .etiket,.u-hero .etiket{color:#9DB8DC}
.btn{display:inline-block;border-radius:11px;padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none;text-align:center;border:1.5px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;transition:transform .16s,background .16s,border-color .16s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(47,111,208,.45);outline-offset:2px}
.btn-buyuk{padding:15px 30px;font-size:16.5px}
.btn-mavi{background:var(--mavi);color:#fff;border-color:var(--mavi)}
.btn-mavi:hover{background:var(--lac2);border-color:var(--lac2)}
.btn-cerceve{background:#fff;color:var(--mavi);border-color:var(--mavi)}
.btn-dolu{background:var(--lac);color:#fff;border-color:var(--lac)}
.btn-beyaz{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-beyaz:hover{background:rgba(255,255,255,.1)}
.btn-acik{background:#fff;color:var(--lac);border-color:#fff}
.btn-acik:hover{background:#EAF0FA}
.ci{display:flex;gap:12px;flex-wrap:wrap}
.ok::after{content:" \2192"}
.disa::after{content:" \2197";font-size:.85em}
.ayrinti{color:var(--mavi);font-weight:700;text-decoration:none}
.ayrinti:hover{text-decoration:underline}

/* ---------- HERO SLAYT (microsoft.com tarzi banner) ---------- */
.hero{background:var(--koyu);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,rgba(255,255,255,.10),transparent 60%),radial-gradient(40% 50% at 10% 90%,rgba(127,224,168,.12),transparent 60%);pointer-events:none}
.hero .slayt{display:none;padding:72px 0 96px;position:relative}
.hero .slayt.acik{display:block;animation:slayt-gir .45s ease}
@keyframes slayt-gir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-ic{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1,.hero .h1{font-size:clamp(30px,4.6vw,54px);font-weight:800;line-height:1.08;margin:0 0 18px}
.hero p{font-size:18px;color:rgba(255,255,255,.84);max-width:54ch;margin:0 0 28px}
.hero-gorsel{position:relative}
.hero-gorsel svg{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}
.hero-kontrol{position:absolute;left:0;right:0;bottom:22px;z-index:2}
.hero-kontrol .k{display:flex;align-items:center;gap:10px}
.hero-kontrol button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;width:38px;height:38px;cursor:pointer;font:700 16px/1 Karla,sans-serif;display:inline-grid;place-items:center;transition:background .16s}
.hero-kontrol button:hover{background:rgba(255,255,255,.24)}
.noktalar{display:flex;gap:8px;margin:0 6px}
.noktalar button{width:12px;height:12px;padding:0;border-width:0;background:rgba(255,255,255,.35)}
.noktalar button[aria-current="true"]{background:#fff;width:28px}
[data-durdur] .oynat,[data-durdur].duruk .duraklat{display:none}
[data-durdur].duruk .oynat{display:inline}
.hero-kontrol .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- SAYILAR ---------- */
.sayilar{background:#fff;border-bottom:1px solid var(--line)}
.sayilar-ic{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:26px 24px}
.sayilar-ic>div{padding:8px 4px}
.sayilar-ic b{display:block;font:800 30px/1.1 Sora,sans-serif;color:var(--lac)}
.sayilar-ic small{display:block;margin-top:6px;font:700 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.sayilar.koyu{background:var(--koyu);border:0;color:#fff}
.sayilar.koyu b{color:#fff}
.sayilar.koyu small{color:#9DB8DC}

/* ---------- BOLUM ---------- */
.bolum{padding:76px 0}
.bolum-soft{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bolum h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.15}
.ozet{color:var(--ink2);font-size:18px;max-width:62ch;margin:12px 0 0}
.ortala{text-align:center}
.ortala .ozet{margin-left:auto;margin-right:auto}

/* ---------- URUN KARTLARI ---------- */
.urunler{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.urun{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--golge);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.urun:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(15,27,46,.06),0 18px 40px rgba(15,27,46,.12)}
.urun-gorsel{height:190px;display:grid;place-items:center;padding:22px}
.urun-gorsel svg{width:100%;height:100%;max-height:150px}
.urun-gorsel.esqueire{background:linear-gradient(135deg,var(--esqueire),var(--esqueire2))}
.urun-gorsel.telecom{background:linear-gradient(135deg,var(--telecom),var(--telecom2))}
.urun-gorsel.pos{background:linear-gradient(135deg,var(--pos),var(--pos2))}
.urun-ic{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.urun h3{font-size:20px}
.urun .alt{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin:6px 0 10px}
.urun p{color:var(--ink2);margin:0 0 18px;flex:1}
.urun .ci{gap:8px 16px;align-items:center}

/* ---------- ONE CIKAN BLOKLAR ---------- */
.one{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0}
.one+.one{border-top:1px solid var(--line)}
.one.ters .one-gorsel{order:2}
.one-gorsel{border-radius:22px;padding:32px;box-shadow:var(--golge)}
.one-gorsel svg{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.22))}
.one-gorsel.esqueire{background:linear-gradient(135deg,var(--esqueire),var(--esqueire2))}
.one-gorsel.telecom{background:linear-gradient(135deg,var(--telecom),var(--telecom2))}
.one-gorsel.pos{background:linear-gradient(135deg,var(--pos),var(--pos2))}
.one h3{font-size:clamp(24px,2.8vw,32px);font-weight:800;line-height:1.15}
.one .etiket{margin-bottom:12px}
.one p{color:var(--ink2);font-size:17px;margin:12px 0 18px}
.one ul{list-style:none;margin:0 0 24px;padding:0}
.one li{padding:6px 0 6px 30px;position:relative;font-weight:500}
.one li::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;background:var(--mavi-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6FD0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- ULKELER / SIRKETLER ---------- */
.ulkeler{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.ulke{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;box-shadow:var(--golge)}
.ulke .bayrak{width:44px;height:30px;display:block;border-radius:5px;overflow:hidden;box-shadow:0 1px 3px rgba(15,27,46,.25);margin-bottom:14px}
.ulke .bayrak svg{width:100%;height:100%;display:block}
.ulke h3{font-size:19px}
.ulke .sehir{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--mavi);text-transform:uppercase;margin:6px 0 10px}
.ulke .firma{font-weight:700;margin:0 0 4px}
.ulke p{color:var(--ink2);margin:0;font-size:14.5px}
.ulke .adres{margin-top:10px;font-size:13.5px;line-height:1.5}
.ulke a{display:inline-block;margin-top:12px;color:var(--mavi);text-decoration:none;font-weight:700;font-size:14px;word-break:break-all}
.ulke a:hover{text-decoration:underline}

/* ---------- NEDEN / DEGERLER / OZELLIKLER ---------- */
.nedenler,.ozellikler,.adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.degerler{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.kart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--golge)}
.kart .ik{width:44px;height:44px;border-radius:12px;background:var(--mavi-soft);color:var(--mavi);display:grid;place-items:center;margin-bottom:16px}
.kart .ik svg{width:24px;height:24px}
.kart h3{font-size:18px;margin-bottom:8px}
.kart p{color:var(--ink2);margin:0;font-size:15px}
.u-esqueire .kart .ik{background:#EEE9FC;color:var(--esqueire)}
.u-telecom .kart .ik{background:var(--mavi-soft);color:var(--telecom)}
.u-pos .kart .ik{background:#E6F6EE;color:var(--pos)}
.adim .no{font:800 13px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--mavi);margin-bottom:12px}
.adim .no::before{content:"0"}

/* ---------- CTA BANDI ---------- */
.cta{background:var(--koyu);color:#fff;padding:68px 0;text-align:center;position:relative;overflow:hidden}
.cta h2{font-size:clamp(26px,3.2vw,38px);font-weight:800}
.cta p{color:rgba(255,255,255,.84);font-size:18px;max-width:56ch;margin:14px auto 28px}
.cta .ci{justify-content:center}

/* ---------- URUN SAYFASI ---------- */
.u-hero{background:var(--koyu);color:#fff;padding:72px 0 64px;position:relative;overflow:hidden}
.u-hero.esqueire{background:linear-gradient(155deg,#2E1F6E 0%,#5B3FBF 60%,#7A5FE0 100%)}
.u-hero.telecom{background:linear-gradient(155deg,#1e3a5f 0%,#2360bd 60%,#2F6FD0 100%)}
.u-hero.pos{background:linear-gradient(155deg,#0F4D34 0%,#1F9D63 60%,#2BB877 100%)}
.u-hero .hero-ic{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.u-hero h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;line-height:1.08;margin:0 0 18px}
.u-hero p{font-size:18px;color:rgba(255,255,255,.86);max-width:54ch;margin:0 0 28px}
.u-hero .etiket{color:rgba(255,255,255,.72)}
.u-hero .hero-gorsel svg{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.3))}
.u-hero .btn-acik{color:var(--ink)}
.kim{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:38px}
.kim .kart p{font-size:16px}
.rozetler{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rozet{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 8px;background:#fff;font-weight:700;font-size:14px}
.rozet svg{width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(15,27,46,.12)}

/* ---------- SIRKET ---------- */
.sayfa-bas{background:var(--soft);border-bottom:1px solid var(--line);padding:64px 0 56px}
.sayfa-bas h1{font-size:clamp(30px,4.2vw,48px);font-weight:800;line-height:1.1}
.sayfa-bas .ozet{font-size:19px}
.misyon{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.misyon blockquote{margin:0;font:600 clamp(20px,2.4vw,26px)/1.4 Sora,sans-serif;color:var(--lac);border-left:4px solid var(--mavi);padding-left:22px}
.tarih{list-style:none;margin:38px 0 0;padding:0;border-left:2px solid var(--line)}
.tarih li{position:relative;padding:0 0 26px 30px}
.tarih li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--mavi);box-shadow:0 0 0 4px #fff}
.tarih .yil{font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--mavi);display:block;margin-bottom:6px}
.tarih p{margin:0;color:var(--ink2)}

/* ---------- ILETISIM ---------- */
.iletisim-ic{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:8px}
.form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--golge)}
.form h2{font-size:24px;margin-bottom:6px}
.form label{display:block;font-weight:700;font-size:14px;margin:16px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff}
.form textarea{min-height:140px;resize:vertical}
.form .iki{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .gizli{font-size:13px;color:var(--faint);margin:14px 0 0}
.form .btn{margin-top:20px}
.tesekkur{display:none;margin-top:16px;background:#E6F6EE;border:1px solid #B9E8CE;color:#0F4D34;border-radius:10px;padding:12px 14px;font-size:14.5px}
.tesekkur.acik{display:block}
.kanallar{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.kanallar li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fff}
.kanallar b{font-family:Sora,sans-serif}
.kanallar a{color:var(--mavi);text-decoration:none;font-weight:700}
.ofisler{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ofisler .ulke{padding:18px}
.ofisler .ulke .bayrak{width:36px;height:24px;margin-bottom:10px}
.ofisler .ulke h3{font-size:17px}

/* ---------- YASAL ---------- */
.yasal-ic{max-width:800px}
.yasal-ic h2{font-size:24px;margin:38px 0 10px;scroll-margin-top:90px}
.yasal-ic p{color:var(--ink2);margin:0}

/* ---------- RESPONSIVE: tablet (<=960) ---------- */
@media (max-width:960px){
  .hero-ic,.u-hero .hero-ic{grid-template-columns:1fr;gap:32px}
  .hero-gorsel{max-width:560px;margin:0 auto;width:100%}
  .hero .slayt{padding:56px 0 92px}
  .one{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .one.ters .one-gorsel{order:0}
  .one-gorsel{padding:24px}
  .ulkeler,.degerler{grid-template-columns:1fr 1fr}
  .iletisim-ic,.misyon,.kim{grid-template-columns:1fr}
}
/* ---------- RESPONSIVE: kucuk tablet (<=880) ---------- */
@media (max-width:880px){
  .urunler,.nedenler,.ozellikler,.adimlar{grid-template-columns:1fr 1fr}
  .sayilar-ic{grid-template-columns:repeat(2,1fr)}
  .sayilar-ic.uc{grid-template-columns:repeat(3,1fr)}
}
/* ---------- RESPONSIVE: mobil (<=640) ---------- */
@media (max-width:640px){
  .bolum{padding:52px 0}
  .urunler,.nedenler,.ozellikler,.adimlar,.ulkeler,.degerler,.ofisler,.form .iki{grid-template-columns:1fr}
  .sayilar-ic,.sayilar-ic.uc{grid-template-columns:1fr 1fr;padding:18px 16px}
  .sayilar-ic b{font-size:26px}
  .hero .slayt{padding:44px 0 92px}
  .hero p,.u-hero p,.cta p,.ozet{font-size:16px}
  .ci .btn{width:100%}
  .hero-kontrol .k{justify-content:center}
  .form{padding:22px}
  .cta{padding:52px 0}
  .u-hero{padding:52px 0 48px}
  .sayfa-bas{padding:48px 0 40px}
}