/* Ayrancı Rulman kurumsal site (Seçenek C: Vitrin)
   Koyu antrasit + logo kırmızısı; başlıklarda Barlow Condensed, metinde Barlow (SIL OFL). */
@font-face{font-family:Barlow;src:url(font/barlow-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(font/barlow-600.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:BarlowC;src:url(font/barlowc-600.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:BarlowC;src:url(font/barlowc-700.woff) format('woff');font-weight:700;font-display:swap}
:root{
  --koyu:#15161C; --koyu2:#23252E; --red:#E3141B; --red-d:#B80F15;
  --ink:#15161C; --mut:#5F626D; --mut-a:#B4B6C1; --bg:#F2F2F4; --line:#E3E3E8;
  --wrap:1240px; --g:28px;
  --f:Barlow,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --fc:BarlowC,'Arial Narrow',Barlow,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.6 var(--f)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em;max-width:70ch}
h1,h2,h3{font-family:var(--fc);font-weight:700;margin:0;letter-spacing:.004em;text-wrap:balance}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.w{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* ---------- Üst şerit ve menü ---------- */
.ust-bar{background:var(--koyu);color:var(--mut-a);font-size:14px}
.ust-bar .w{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:42px}
.ust-bar .sag{display:flex;gap:22px}
.ust-bar a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.ust-bar a:hover{color:#FFB3B5}
.ust-bar svg{width:15px;height:15px;color:var(--red)}
.ust{background:#fff;position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--line)}
.ust .w{display:flex;align-items:center;gap:30px;min-height:86px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin:0}
.logo img{width:46px;height:46px}
.logo span{font:700 24px/1 "Times New Roman",Times,"Liberation Serif",serif;color:#ED1C24;white-space:nowrap}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{font:600 18.5px var(--fc);letter-spacing:.01em;text-decoration:none;padding:10px 15px;color:var(--ink)}
.menu a:hover{color:var(--red)}
.menu a[aria-current="page"]{color:var(--red)}
.menu-btn{display:none;margin-left:auto;width:48px;height:46px;border:0;background:var(--koyu);color:#fff;cursor:pointer}
.menu-btn svg{width:22px;height:22px}

/* ---------- Düğmeler ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 18px/1.1 var(--fc);letter-spacing:.02em;text-decoration:none;padding:15px 28px;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn.k{background:var(--red);color:#fff}
.btn.k:hover{background:var(--red-d)}
.btn.b{background:#fff;color:var(--ink)}
.btn.b:hover{background:var(--red);color:#fff}
.btn.c{border-color:var(--koyu);color:var(--koyu);background:transparent}
.btn.c:hover{background:var(--koyu);color:#fff}
.btn[disabled]{opacity:.6;cursor:wait}
.dugmeler{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Ana sayfa slaytı ---------- */
.slider{background:var(--koyu);padding-top:36px}
.sahne{position:relative;aspect-ratio:960/339;overflow:hidden;background:#000}
.sahne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.sahne img.on{opacity:1}
.noktalar{display:flex;gap:8px;position:absolute;right:18px;bottom:12px;z-index:2}
.noktalar button{width:34px;height:16px;border:0;background:none;padding:6px 0;cursor:pointer}
.noktalar button::before{content:"";display:block;height:4px;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.noktalar button.on::before{background:#fff}
.alt-serit{display:grid;grid-template-columns:1.6fr 1fr;background:var(--koyu2);color:#fff}
.alt-serit .s1{padding:30px 36px}
.alt-serit h1{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;margin:0 0 8px;color:#fff}
.alt-serit p{margin:0;color:var(--mut-a)}
.alt-serit .s2{background:var(--red);padding:30px 36px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.alt-serit .s2 small{color:#FFD2D4;font-size:15px}
.alt-serit .s2 a{font:700 2rem var(--fc);text-decoration:none;color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ---------- Bölümler ---------- */
.bol{padding-block:92px}
.bol.gri{background:var(--bg)}
.bas{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
.bas h2{font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1}
.bas h2::after,.sayfa-bas h1::after,.cizgili::after{content:"";display:block;width:56px;height:5px;background:var(--red);margin-top:18px}
.bas p{color:var(--mut);margin:0}
.bas a{font:600 18px var(--fc);color:var(--red);text-decoration:none}
.bas a:hover{text-decoration:underline}

/* Ürün kartları */
.uk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line);border:2px solid var(--line)}
.uk a{background:#fff;text-decoration:none;position:relative;display:block;padding:22px 22px 72px;overflow:hidden;min-width:0}
.uk img{width:100%;aspect-ratio:1.46;object-fit:contain;transition:transform .35s ease}
.uk a:hover img{transform:scale(1.05)}
.uk h3{position:absolute;left:0;right:0;bottom:0;font-size:21px;line-height:1.15;padding:14px 22px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:60px}
.uk h3 svg{width:20px;flex:none;color:var(--red)}
.uk a:hover h3{background:var(--koyu);color:#fff}

/* Markalar: görseli olan marka banner kartı olur, olmayan adıyla yazılır */
.mrk{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center}
.marka{font:600 22px/1.2 var(--fc);color:var(--mut);margin-right:8px}
.marka.gorselli{order:-1;flex:0 0 calc((100% - 40px) / 3);margin:0 0 4px;color:var(--ink);min-width:0}
.marka.gorselli img{width:100%;aspect-ratio:960/339;object-fit:cover;filter:grayscale(1);opacity:.85;transition:filter .3s,opacity .3s}
.marka.gorselli:hover img{filter:none;opacity:1}
.marka.gorselli span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mrk.renkli .marka.gorselli{border:1px solid var(--line);background:#fff}
.mrk.renkli .marka.gorselli img{filter:none;opacity:1}
.mrk.renkli .marka.gorselli span{position:static;width:auto;height:auto;clip:auto;display:block;padding:12px 16px;font-size:20px;border-top:1px solid var(--line)}
.mrk.renkli .marka:not(.gorselli){background:var(--bg);padding:10px 18px;color:var(--ink);margin:0}

/* Koyu tanıtım bölümü */
.koyu{background:var(--koyu);color:#fff}
.koyu h2,.koyu h3{color:#fff}
.tanitim{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.yil{font:700 clamp(6rem,12vw,10rem)/.85 var(--fc);color:var(--red)}
.yil small{display:block;font:600 20px var(--f);color:#fff;margin-top:14px}
.tanitim h2{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.05;margin-bottom:18px}
.tanitim p{color:var(--mut-a);margin:0 0 22px}
.isaretli{list-style:none;padding:0;margin:0}
.isaretli li{padding:18px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:14px;align-items:center;font:600 20px var(--fc)}
.isaretli li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.isaretli svg{width:22px;flex:none;color:var(--red)}

/* İletişim şeridi (3 hücre) */
.ilt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border-bottom:2px solid var(--line)}
.ilt>div{background:#fff;padding:34px 30px;min-width:0}
.ilt small{color:var(--mut);font-size:15px;display:block;margin-bottom:6px}
.ilt b,.ilt a{font:700 24px/1.3 var(--fc);text-decoration:none;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ilt a:hover{color:var(--red)}

/* ---------- İç sayfa başlığı ---------- */
.sayfa-bas{background:var(--koyu);color:#fff;padding-block:56px 52px;position:relative;overflow:hidden}
.sayfa-bas::after{content:"";position:absolute;right:-90px;top:50%;width:360px;height:360px;transform:translateY(-50%);border-radius:50%;
  border:46px solid rgba(255,255,255,.035);box-shadow:inset 0 0 0 60px rgba(255,255,255,.02)}
.yol{font-size:15px;color:var(--mut-a);margin:0 0 14px}
.yol a{color:var(--mut-a);text-decoration:none}
.yol a:hover{color:#fff}
.sayfa-bas h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;color:#fff}
.sayfa-bas p{color:var(--mut-a);font-size:1.1rem;margin:22px 0 0;max-width:60ch;position:relative;z-index:1}

/* Ürünler sayfası */
.ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line);border:2px solid var(--line)}
.ul article{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px;align-items:center;padding:28px;scroll-margin-top:110px;min-width:0}
.ul img{width:100%;aspect-ratio:1.46;object-fit:contain}
.ul h2{font-size:26px;line-height:1.1;margin-bottom:10px}
.ul p{color:var(--mut);font-size:16px;margin:0 0 14px}
.ul ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ul li{font-size:14px;font-weight:600;background:var(--bg);padding:4px 12px}
.ul article:target{box-shadow:inset 0 0 0 3px var(--red)}

/* Kurumsal sayfa */
.iki{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}
.metin p{font-size:1.08rem;color:#33353F}
.metin p.giris{font:600 1.5rem/1.35 var(--fc);color:var(--ink);letter-spacing:.005em}
.firma-gorsel{margin:0 0 24px;position:relative}
.firma-gorsel img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg)}
.firma-gorsel figcaption{position:absolute;left:-24px;bottom:-24px;background:var(--red);color:#fff;padding:20px 26px;font:700 20px/1.1 var(--fc)}
.firma-gorsel figcaption b{display:block;font-size:52px;line-height:.9}
.kunye{margin:0;border-top:2px solid var(--koyu)}
.kunye div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.kunye dt{color:var(--mut)}
.kunye dd{margin:0;font-weight:600}
.ilkeler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:2px solid var(--line)}
.ilkeler div{background:#fff;padding:32px 30px}
.ilkeler svg{width:34px;height:34px;color:var(--red);margin-bottom:16px}
.ilkeler h3{font-size:24px;margin-bottom:8px}
.ilkeler p{color:var(--mut);margin:0;font-size:16px}

/* İletişim sayfası */
.iletisim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.bilgi dl{margin:0 0 26px;border-top:2px solid var(--koyu)}
.bilgi dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.bilgi dt{color:var(--mut)}
.bilgi dd{margin:0;font:700 21px/1.35 var(--fc);overflow-wrap:anywhere}
.bilgi dd a{text-decoration:none;font-variant-numeric:tabular-nums}
.bilgi dd a:hover{color:var(--red)}
.form{background:var(--bg);padding:34px}
.form h2{font-size:32px;margin-bottom:6px}
.form .alt{color:var(--mut);margin-bottom:22px;font-size:16px}
.alanlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.alanlar .tam{grid-column:1/-1}
label.a{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
label.a .z{color:var(--red)}
input,textarea{font:400 16px var(--f);color:var(--ink);background:#fff;border:1.5px solid #D5D6DD;border-radius:0;padding:12px 14px;width:100%}
input:focus,textarea:focus{border-color:var(--koyu);outline:none;box-shadow:0 0 0 3px rgba(21,22,28,.12)}
textarea{min-height:150px;resize:vertical}
.onay{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--mut);margin:18px 0 20px}
.onay input{width:18px;height:18px;margin-top:3px;accent-color:var(--red);flex:none}
.tuzak{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.durum{margin-top:16px;padding:14px 16px;font-weight:600;display:none}
.durum.ok{display:block;background:#E5F5EA;color:#166534}
.durum.hata{display:block;background:#FDE8E8;color:#B42318}
.harita{margin-top:64px;border:2px solid var(--line)}
.harita iframe{display:block;width:100%;height:440px;border:0;background:var(--bg)}
.harita .alt-satir{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 20px;background:#fff}
.harita .alt-satir a{font:700 18px var(--fc);color:var(--red);text-decoration:none}

/* ---------- Alt bölüm ---------- */
.alt-bolum{background:var(--koyu);color:#9C9EA9;font-size:15px}
.alt-bolum .w{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding-top:64px;padding-bottom:28px}
.alt-bolum .logo{background:#fff;padding:9px 13px;margin-bottom:18px}
.alt-bolum .logo img{width:38px;height:38px}
.alt-bolum .logo span{font-size:21px}
.alt-bolum h3{color:#fff;font-size:20px;margin-bottom:14px}
.alt-bolum ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alt-bolum a{text-decoration:none;color:#C9CAD2}
.alt-bolum a:hover{color:#fff}
.alt-bolum address{font-style:normal}
.telif{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;margin:16px 0 0;max-width:none;font-size:14px;color:#7D808C}

/* ---------- Duyarlı düzen ---------- */
@media (max-width:1060px){
  .ust .w{gap:20px}
  .menu a{padding:10px 10px}
  .uk{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tanitim{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tanitim .yil{grid-column:1/-1}
  .alt-serit{grid-template-columns:minmax(0,1fr)}
  .ul{grid-template-columns:minmax(0,1fr)}
  .alt-bolum .w{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .menu-btn{display:grid;place-items:center}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:6px max(var(--g),env(safe-area-inset-left)) 16px;box-shadow:0 1px 0 var(--line),0 18px 30px -18px rgba(0,0,0,.25)}
  .menu.acik{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:20px}
  .ust .btn{display:none}
  .bas,.iki,.iletisim{grid-template-columns:minmax(0,1fr)}
  .bas{gap:18px}
  .marka.gorselli{flex-basis:calc((100% - 20px) / 2)}
  .ilt,.ilkeler{grid-template-columns:minmax(0,1fr)}
  .firma-gorsel figcaption{left:16px}
}
@media (max-width:620px){
  :root{--g:18px}
  body{font-size:16px}
  .ust-bar .adr{display:none}
  .ust-bar .w{justify-content:center}
  .ust .w{min-height:68px}
  .logo img{width:38px;height:38px}
  .logo span{font-size:21px}
  .slider{padding-top:0}
  .slider .w{padding:0}
  .alt-serit .s1,.alt-serit .s2{padding:24px 18px}
  .uk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uk a{padding:12px 12px 58px}
  .uk h3{font-size:17px;padding:10px 12px;min-height:50px}
  .uk h3 svg{display:none}
  .bol{padding-block:64px}
  .marka.gorselli{flex-basis:100%}
  .tanitim{grid-template-columns:minmax(0,1fr);gap:28px}
  .ul article{grid-template-columns:minmax(0,1fr);padding:20px;gap:14px}
  .alanlar{grid-template-columns:minmax(0,1fr)}
  .form{padding:22px 18px}
  .kunye div,.bilgi dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .harita iframe{height:320px}
  .alt-bolum .w{grid-template-columns:minmax(0,1fr)}
  .dugmeler .btn{width:100%}
  .sayfa-bas{padding-block:40px 38px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sahne img,.uk img{transition:none}
}