/* ============================================================================ Sagrosa — site.css Kaynak tasarım: taslaklar/11-holding/index.html (sahibinin onayladığı anasayfa; "Holding Kalıbı", RAPOR.md §4 Yön 1). Dil: tek yazı ailesi (Source Sans 3), beyaz zemin, lacivert birincil, bordo yalnız Gıda/Veracoa, altın yalnız ince detay, 0px köşe, düz kartlar; degrade yalnız fotoğraf üstü okunabilirlik için. Simge yazı tipi yok (satır içi SVG). RTL: yön özellikleri MANTIKSAL yazıldı (inline-start/end, block-start/end); yeterlidir. Fiziksel kalanlar: object-position (fotoğraf odağı), gölgeler, tarayıcı çerçevesi noktaları; [dir="rtl"] altında çevrilen degrade ve yön okları (transform: scaleX(-1)). Arapça: :lang(ar) → Noto Sans Arabic yığını, harf aralığı 0. Bölümler: 0 yazı tipleri (kendi sunucumuzdan) · 1 tokens · 2 base · 3 düğme ve bağlantılar · 4 header · 5 mega menü · 6 çekmece · 7 arama · 8 hero · 9 paneller · 10 bir bakışta · 11 kartlar ve ürün kaydırıcı · 12 haberler · 13 kariyer · 14 iletişim · 15 formlar · 16 footer · 17 çerez · 18 iç sayfa çerçevesi (sayfa başı, koyu bant başı, düzenler, metin+fotoğraf bloğu, liste türleri, kart türleri, içerik sütununda iletişim paneli, iletişim ve form bantları) · 19 yardımcılar · 20 bekliyor · 21 hareket · 22 duyarlı · 23 yazdırma Şablona özel ek stiller: css/sayfa-<şablon>.css (temel.njk dosya varsa bağlar); ortak kalıplar buraya yazılır. ========================================================================== */ /* 0. YAZI TİPLERİ ---------------------------------------------------------- Yazı tipleri KENDİ SUNUCUMUZDAN gelir: statik/fonts/*.woff2 → dist/fonts/. Sayfa hiçbir istek fonts.googleapis.com ya da fonts.gstatic.com adresine göndermez (ziyaretçinin IP'si üçüncü tarafa gitmez; KVKK ve çerez metinleriyle uyumlu). temel.njk, statik/fonts/ dolu olduğunda site.json'daki fonts.latinHref / languages[].fontHref bağlantılarını yok sayar. Source Sans 3 v19 DEĞİŞKEN yüzdür (wght 200–900): tek dosya bütün kalınlıkları verir, ayrı 300/400/500 dosyası gerekmez. unicode-range sayesinde tarayıcı yalnız sayfada geçen harflerin alt kümesini indirir: tr → latin + latin-ext (ş ğ İ latin-ext'te), de/en → latin, ru → latin + cyrillic. font-display:swap → metin ilk boyada sistem yazısıyla görünür, yüz gelince yerine geçer. ARAPÇA YÜZ BURADA DEĞİL: Noto Sans Arabic yalnız /ar/ sayfalarına bağlanan css/yazi-ar.css içindedir (aksi hâlde her sayfadaki dil değiştiricinin "العربية" etiketi 166 KB'lık indirmeyi tetiklerdi). Lisans ve kaynak: statik/fonts/KREDI.md (SIL Open Font License 1.1). Dosyalar Google Fonts'un yayınladığı woff2 alt kümelerinin birebir kopyasıdır; güncellemek için KREDI.md'deki adımları izleyin. */ /* latin */ @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* latin-ext */ @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* cyrillic */ @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} /* cyrillic-ext */ @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-sans-3-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} /* 1. TOKENS ---------------------------------------------------------------- */ :root{ /* Marka paleti — logodan ve kartvizitten ölçüldü (assets/brand/tokens.css) */ --gold-300:#e0d0a8; --gold-400:#cdbb92; --gold-500:#b8a880; --gold-600:#a39068; --gold-700:#8f7f57; --vgold-300:#f0d088; --vgold-500:#d8b068; --vgold-700:#b8904c; --leaf-400:#90a070; --leaf-500:#809058; --leaf-700:#5f6e3f; --bordo-900:#2c0c0c; --bordo-800:#381010; --bordo-700:#4a1616; --bordo-600:#5c1d1b; --bordo-500:#6e2622; --navy-900:#0b1526; --navy-800:#0e1c33; --navy-700:#17294a; --navy-600:#213760; --navy-500:#2a4270; --paper:#fbf8f2; --cream:#f5efe3; --sand:#e9e1d1; --stone:#8a8378; --ink-700:#3a352e; --ink:#1d1a16; /* 11-holding kurumsal zemin takımı */ --s-navy:#17294A; --s-navy-d:#0F1C36; --s-bordo:#4A1616; --s-bordo-d:#3A1010; --s-gold:#B8A880; --s-txt:#212529; --s-body:#5F6B7A; --s-hair:#E3E6EA; --s-band:#F4F5F7; --s-ph:#E9ECEF; --s-err:#A12A2A; --s-ok:#2F6B3A; --s-font-latin:'Source Sans 3', Arial, Helvetica, sans-serif; --s-font-arabic:'Source Sans 3', 'Noto Sans Arabic', system-ui, sans-serif; /* Latin önce: marka adları Latin fontla */ --s-font:var(--s-font-latin); --s-h:88px; /* header yüksekliği */ --s-cw:1200px; /* içerik genişliği (container = 1200 + 2×24 iç boşluk) */ } /* 2. BASE ------------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html.s-lock{overflow:hidden} body{font:400 16px/1.65 var(--s-font);color:var(--s-txt);background:#fff;min-height:100vh} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} svg{display:block} address{font-style:normal} [id]{scroll-margin-block-start:calc(var(--s-h) + 24px)} :focus-visible{outline:2px solid var(--s-navy);outline-offset:2px} .s-hero :focus-visible,.s-panel:focus-visible,.s-career :focus-visible,.s-cta :focus-visible{outline-color:#fff} .s-container{max-width:calc(var(--s-cw) + 48px);margin-inline:auto;padding-inline:24px} .s-sec{padding-block:96px} .s-sec--band,.s-band{background:var(--s-band)} .s-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--s-body)} .s-eyebrow::before{content:"";width:32px;height:1px;background:var(--s-gold);flex:none} .s-sec__title{font-size:40px;font-weight:400;line-height:1.15;margin-block-start:12px;letter-spacing:-.005em} .s-sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:44px} .s-sec__head .s-products__ctl{display:flex;gap:12px;padding-block-end:6px} .s-skip{position:absolute;inset-block-start:8px;inset-inline-start:-999px;z-index:100;background:#fff;color:var(--s-navy);padding:8px 16px;font-weight:500} .s-skip:focus{inset-inline-start:8px} /* Arapça: Latin önce (marka adları, telefon, e-posta Source Sans ile), Arap harfleri Noto Sans Arabic'e düşer. Bitişik yazıda harf aralığı harf bağlarını bozar → belge genelinde 0 (!important: sayfa CSS'lerindeki .08em değerlerini de kapatır). */ :lang(ar){font-family:var(--s-font-arabic);letter-spacing:0 !important} :lang(ar) body{font-size:17px;line-height:1.75} :lang(ar) .s-eyebrow,:lang(ar) .s-mega__heading,:lang(ar) .s-footer__heading,:lang(ar) .s-contact__list dt,:lang(ar) .s-contact__label,:lang(ar) .s-lang__link,:lang(ar) .s-lang__current,:lang(ar) .s-cookie__lock,:lang(ar) .s-footer__tel small,:lang(ar) .s-footer__mail small,:lang(ar) .s-drawer__heading,:lang(ar) .s-side__title,:lang(ar) .s-contact__map,:lang(ar) .s-sec--steps .s-list__item::before{text-transform:none} /* 3. DÜĞME VE BAĞLANTILAR -------------------------------------------------- */ .s-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding-inline:32px;font-size:15px;font-weight:500;line-height:1;border-radius:0;border:0;white-space:nowrap;text-align:center;transition:background .2s,color .2s,border-color .2s} .s-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8} .s-btn--navy{background:var(--s-navy);color:#fff} .s-btn--navy:hover{background:var(--s-navy-d)} .s-btn--bordo{background:var(--s-bordo);color:#fff} .s-btn--bordo:hover{background:var(--s-bordo-d)} .s-btn--white{background:#fff;color:var(--s-navy)} .s-btn--white:hover{background:var(--s-band)} .s-btn--ghost{border:2px solid #fff;color:#fff;background:transparent;height:52px;padding-inline:28px} .s-btn--ghost:hover{background:#fff;color:var(--s-navy)} .s-panel--gida .s-btn--ghost:hover{color:var(--s-bordo)} .s-btn--outline{border:1px solid var(--s-navy);color:var(--s-navy);background:#fff} .s-btn--outline:hover{background:var(--s-navy);color:#fff} .s-btn--md{height:52px;padding-inline:28px} .s-btn--sm{height:44px;padding-inline:20px;font-size:14px} .s-btn:disabled{opacity:.6;cursor:default} .s-tlink{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--s-navy);padding-block:4px} .s-tlink svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .2s} .s-tlink:hover svg{transform:translateX(4px)} [dir="rtl"] .s-tlink svg{transform:scaleX(-1)} [dir="rtl"] .s-tlink:hover svg{transform:scaleX(-1) translateX(4px)} .s-card__more{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--s-navy);margin-block-start:14px;padding-block:4px} .s-card__more::before{content:"";width:24px;height:1px;background:var(--s-gold);transition:width .25s} .s-card__more:hover::before{width:36px} .s-card__ext{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;margin-inline-start:-4px;opacity:.8} [dir="rtl"] .s-card__ext{transform:scaleX(-1)} .s-circ{width:48px;height:48px;border-radius:50%;border:1px solid var(--s-navy);color:var(--s-navy);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s} .s-circ:hover{background:var(--s-navy);color:#fff} .s-circ svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8} [dir="rtl"] .s-circ svg,[dir="rtl"] .s-hero__arrow svg{transform:scaleX(-1)} /* 4. HEADER ---------------------------------------------------------------- */ .s-header{position:fixed;inset-block-start:0;inset-inline:0;height:var(--s-h);z-index:50;color:#fff;transition:background .25s,color .25s} .s-header::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));z-index:-1;pointer-events:none;transition:opacity .25s} .s-header::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1px;background:var(--s-hair);opacity:0;transition:opacity .25s} .s-header.is-solid,.s-header--solid{background:#fff;color:var(--s-navy)} .s-header.is-solid::before,.s-header--solid::before{opacity:0} .s-header.is-solid::after,.s-header--solid::after{opacity:1} .s-header__bar{height:100%;display:flex;align-items:center} .s-logo{display:block;flex:none} .s-logo__img{height:40px;width:auto} .s-logo__img--dark{display:none} .s-header.is-solid .s-logo__img--light,.s-header--solid .s-logo__img--light{display:none} .s-header.is-solid .s-logo__img--dark,.s-header--solid .s-logo__img--dark{display:block} .s-nav{flex:1;display:flex;justify-content:center} .s-nav__list{display:flex} .s-nav__item{position:relative} .s-nav__link{display:flex;align-items:center;gap:6px;height:var(--s-h);padding-inline:15px;font-size:15px;font-weight:500;position:relative;white-space:nowrap} .s-nav__link::after{content:"";position:absolute;inset-inline:15px;inset-block-end:28px;height:2px;background:var(--s-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s} [dir="rtl"] .s-nav__link::after{transform-origin:100% 50%} .s-nav__item:hover>.s-nav__link::after,.s-nav__item:focus-within>.s-nav__link::after{transform:scaleX(1)} .s-nav__chev{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.7} .s-header__tools{display:flex;align-items:center;gap:12px;flex:none;margin-inline-start:auto} .s-header__sep{width:1px;height:20px;background:currentColor;opacity:.35} .s-header__icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center} .s-header__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round} .s-lang__list{display:flex;align-items:center;flex-wrap:wrap} .s-lang--compact .s-lang__link,.s-lang--compact .s-lang__current{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.06em;padding:8px 6px;text-transform:uppercase} .s-lang--compact .s-lang__current{text-decoration:underline;text-decoration-color:var(--s-gold);text-decoration-thickness:1px;text-underline-offset:6px} .s-lang--full .s-lang__list{gap:4px 18px} .s-lang--full .s-lang__link,.s-lang--full .s-lang__current{font-size:16px;font-weight:500;color:var(--s-navy);padding-block:6px;display:inline-block} .s-lang--full .s-lang__current{color:var(--s-body);font-weight:400} .s-burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px} .s-burger span{display:block;width:24px;height:2px;background:currentColor;transition:transform .25s,opacity .2s} .s-burger.is-x span:nth-child(1){transform:translateY(8px) rotate(45deg)} .s-burger.is-x span:nth-child(2){opacity:0} .s-burger.is-x span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* 5. MEGA MENÜ ------------------------------------------------------------- */ .s-mega{position:absolute;inset-block-start:100%;inset-inline-start:0;background:#fff;color:var(--s-txt);border-block-start:1px solid var(--s-hair);box-shadow:0 16px 32px rgba(23,41,74,.08);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s .2s} .s-nav__item:hover>.s-mega,.s-nav__item:focus-within>.s-mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s} .s-mega--wide{position:fixed;inset-inline:0;inset-block-start:var(--s-h)} .s-mega__grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:56px;padding-block:40px 44px} /* Mega menü: iş kolu sayısı değişirse (bir kol sayfası menüden çıkarılırsa) boş sütun kalmasın. */ .s-mega__grid:not([data-cols="2"]){grid-template-columns:1.1fr repeat(var(--s-mcols,2),1fr)} .s-mega__heading{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--s-body);margin-block-end:12px;padding-block-end:10px;border-block-end:1px solid var(--s-hair)} .s-mega__heading a:hover{color:var(--s-navy)} .s-mega__list a{display:block;padding-block:7px;font-size:16px;color:var(--s-txt);transition:color .15s} .s-mega__list a:hover{color:var(--s-navy);text-decoration:underline;text-decoration-color:var(--s-gold);text-underline-offset:4px} .s-mega__pic{aspect-ratio:16/9;overflow:hidden;background:var(--s-navy)} .s-mega__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 80%} .s-mega__text{font-size:15px;color:var(--s-body);margin-block-start:14px;line-height:1.55} .s-mega--drop{min-width:250px;padding-block:10px} .s-mega--drop .s-mega__list a{padding:9px 24px;font-size:15px} .s-mega--drop .s-mega__list a:hover{text-decoration:none;background:var(--s-band)} .s-mega__col--gida .s-mega__list a,.s-mega--drop [data-branch="gida"] a{color:var(--s-bordo)} /* 6. ÇEKMECE (mobil menü) -------------------------------------------------- */ .s-drawer{position:fixed;inset:0;background:#fff;z-index:45;padding:calc(var(--s-h) + 8px) 24px 40px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s} [dir="rtl"] .s-drawer{transform:translateX(-100%)} .s-drawer.is-open{transform:none;visibility:visible;transition:transform .3s} .s-drawer__item{border-block-end:1px solid var(--s-hair)} .s-drawer__row{display:flex;align-items:center;justify-content:space-between} .s-drawer__link{flex:1;display:block;padding-block:16px;font-size:20px;font-weight:500;color:var(--s-navy)} .s-drawer__acc{width:48px;height:56px;display:flex;align-items:center;justify-content:center;color:var(--s-navy)} .s-drawer__acc svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .25s} .s-drawer__item.is-open .s-drawer__acc svg{transform:rotate(180deg)} .s-drawer__sub{display:none;padding-block-end:14px;padding-inline-start:4px} .s-drawer__item.is-open .s-drawer__sub{display:block} .s-drawer__sublink{display:block;padding-block:8px;font-size:16px;color:var(--s-body)} .s-drawer__heading{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--s-body);margin-block:10px 4px} .s-drawer__heading:first-child{margin-block-start:0} .s-drawer__search{display:flex;gap:10px;margin-block-start:20px} .s-drawer__search .s-search__input{height:48px} .s-drawer__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 16px;margin-block-start:28px} .s-drawer__foot .s-lang--full{flex:1 1 100%} .s-drawer__site{font-size:13px;color:var(--s-body);margin-inline-start:auto} /* 7. ARAMA ----------------------------------------------------------------- */ .s-search{position:absolute;inset-block-start:100%;inset-inline:0;background:#fff;border-block:1px solid var(--s-hair);display:none;color:var(--s-txt)} .s-search.is-open{display:block} .s-search__form{display:flex;gap:12px;padding-block:16px} .s-search__input{flex:1;min-width:0;height:44px;border:1px solid var(--s-hair);border-radius:0;padding-inline:16px;font:inherit;font-size:16px;color:var(--s-txt);background:#fff;appearance:none} .s-search__input:focus-visible{outline:2px solid var(--s-navy);outline-offset:2px;border-color:var(--s-navy)} .s-notfound__search{display:flex;gap:12px;margin-block-start:32px;max-width:560px} /* 8. HERO ------------------------------------------------------------------ */ .s-hero{position:relative;height:100vh;min-height:640px;max-height:900px;background:var(--s-navy);overflow:hidden;color:#fff} .s-hero::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:260px;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.26) 50%,rgba(0,0,0,0) 100%);z-index:2;pointer-events:none} .s-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s;z-index:0;background:var(--s-navy)} .s-hero__slide--gida{background:var(--s-bordo)} .s-hero__slide.is-on{opacity:1;visibility:visible;z-index:1;transition:opacity 1s ease} .s-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .s-hero__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.36) 55%,rgba(0,0,0,.18) 100%)} .s-hero__slide--teknoloji::after{background:linear-gradient(90deg,rgba(15,28,54,.78) 0%,rgba(15,28,54,.52) 55%,rgba(15,28,54,.36) 100%)} .s-hero__slide--gida::after{background:linear-gradient(90deg,rgba(52,12,12,.74) 0%,rgba(52,12,12,.46) 60%,rgba(52,12,12,.3) 100%)} [dir="rtl"] .s-hero__slide::after{background:linear-gradient(270deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.36) 55%,rgba(0,0,0,.18) 100%)} [dir="rtl"] .s-hero__slide--teknoloji::after{background:linear-gradient(270deg,rgba(15,28,54,.78) 0%,rgba(15,28,54,.52) 55%,rgba(15,28,54,.36) 100%)} [dir="rtl"] .s-hero__slide--gida::after{background:linear-gradient(270deg,rgba(52,12,12,.74) 0%,rgba(52,12,12,.46) 60%,rgba(52,12,12,.3) 100%)} .s-hero__slide .s-container{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-block-start:var(--s-h)} .s-hero__text{max-width:780px;transform:translateY(24px);opacity:0;transition:opacity .6s .35s,transform .6s .35s} .s-hero__slide.is-on .s-hero__text{opacity:1;transform:none} .s-hero__eyebrow{color:rgba(255,255,255,.8);margin-block-end:14px} .s-hero__title{font-size:52px;font-weight:400;line-height:1.15;letter-spacing:-.005em;max-width:760px;text-wrap:pretty} .s-hero__lead{font-size:18px;line-height:1.55;max-width:560px;margin-block:20px 34px;opacity:.94} .s-hero__logo{height:84px;width:auto;margin-block-end:24px} .s-hero__ph-note{position:absolute;inset-block-end:72px;inset-inline-end:24px;z-index:2;color:rgba(255,255,255,.7)} .s-hero__arrow{position:absolute;inset-block-start:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);z-index:3;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s} .s-hero__arrow:hover{background:rgba(255,255,255,.3)} .s-hero__arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6} .s-hero__arrow--prev{inset-inline-start:40px} .s-hero__arrow--next{inset-inline-end:40px} .s-hero__dots{position:absolute;inset-block-end:32px;inset-inline:0;z-index:3;display:flex;justify-content:center;align-items:center;gap:4px} .s-hero__dot{width:28px;height:28px;position:relative;border-radius:50%} .s-hero__dot::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s} .s-hero__dot.is-on::before{background:#fff;transform:scale(1.25)} .s-hero__pause{width:40px;height:40px;margin-inline-start:10px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s} .s-hero__pause:hover{background:rgba(255,255,255,.2)} .s-hero__pause svg{width:12px;height:12px;fill:currentColor} .s-hero__ico-play{display:none} .s-hero__pause[aria-pressed="true"] .s-hero__ico-pause{display:none} .s-hero__pause[aria-pressed="true"] .s-hero__ico-play{display:block} /* 9. PANELLER (Faaliyet Alanlarımız) -------------------------------------- */ .s-sec--panels{padding-block-end:0} .s-panels{display:grid;grid-template-columns:1fr 1fr;height:480px;margin-block-start:44px} .s-panel{position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;background:var(--s-navy)} .s-panel--gida{background:var(--s-bordo)} .s-panel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s} .s-panel:hover .s-panel__img{transform:scale(1.03)} .s-panel::after{content:"";position:absolute;inset:0;background:rgba(23,41,74,.56)} .s-panel--gida::after{background:rgba(58,16,16,.62)} .s-panel__body{position:relative;z-index:1;padding:56px 64px;max-width:680px} .s-panel:first-child .s-panel__body{padding-inline-start:max(64px,calc((100vw - var(--s-cw)) / 2))} .s-panel__title{font-size:36px;font-weight:400;line-height:1.15} .s-panel__text{font-size:17px;line-height:1.55;max-width:520px;margin-block:14px 28px;opacity:.92} .s-panel__ph-note{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:1;color:rgba(255,255,255,.7)} /* 10. BİR BAKIŞTA (glance + stats) ---------------------------------------- */ .s-glance__grid{display:grid;grid-template-columns:7fr 5fr;gap:88px;align-items:center} .s-glance__text p{color:var(--s-body);margin-block-start:20px;font-size:17px} .s-glance__text .s-tlink{margin-block-start:24px} .s-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--s-hair);border:1px solid var(--s-hair)} .s-stat{background:#fff;padding:32px 28px 28px;min-height:176px} .s-stat--wide{grid-column:1/-1;min-height:0} .s-stat__value{display:flex;align-items:flex-end;height:48px;font-size:48px;font-weight:300;line-height:1;color:var(--s-navy);letter-spacing:-.01em} .s-stat__value--word{font-size:34px;line-height:1.1} .s-stat__label{display:block;font-size:15px;font-weight:500;margin-block-start:14px;color:var(--s-txt)} .s-stat__note{display:block;font-size:13px;color:var(--s-body);margin-block-start:3px;line-height:1.4} /* 11. KARTLAR VE ÜRÜN KAYDIRICI ------------------------------------------- */ .s-products{overflow:hidden} .s-products__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:0 8px;padding-inline-start:max(24px,calc((100% - var(--s-cw)) / 2));padding-inline-end:24px;scroll-padding-inline-start:max(24px,calc((100% - var(--s-cw)) / 2))} .s-products__track::-webkit-scrollbar{display:none} .s-products__track .s-card{flex:0 0 384px;scroll-snap-align:start} .s-card{min-width:0} .s-card__media{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--s-ph)} .s-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .s-card:hover .s-card__media img{transform:scale(1.03)} .s-card__media--screen{background:var(--s-navy)} .s-card__frame{position:absolute;inset-inline:9%;inset-block-start:11%;background:#fff;border:1px solid #CBD2DA;border-block-end:0} .s-card__frame::before{content:"";display:block;height:18px;border-block-end:1px solid #E3E6EA;background:radial-gradient(circle at 12px 9px,#C9D0D8 3px,transparent 3.5px),radial-gradient(circle at 26px 9px,#C9D0D8 3px,transparent 3.5px),radial-gradient(circle at 40px 9px,#C9D0D8 3px,transparent 3.5px),#F4F5F7} .s-card__frame img{width:100%;height:auto;transition:none} .s-card__media--ph{display:flex;align-items:flex-end;justify-content:flex-end;background:var(--s-band)} .s-card__media--ph .s-card__logo{position:absolute;inset:0;margin:auto;width:60%;height:auto;max-height:50%;object-fit:contain} .s-card__title{font-size:20px;font-weight:500;margin-block-start:20px;line-height:1.3} .s-card__kind,.s-card__role{font-size:14px;color:var(--s-body);margin-block-start:2px} .s-card__date{display:block;font-size:13px;color:var(--s-body);margin-block-start:18px;letter-spacing:.04em} .s-card__date+.s-card__title{margin-block-start:6px} .s-card__text{color:var(--s-body);margin-block-start:10px;font-size:15px;line-height:1.6} .s-card--gida .s-card__title,.s-card--gida .s-card__more,.s-card--bordo .s-card__title,.s-card--bordo .s-card__more{color:var(--s-bordo)} /* 12. HABERLER ------------------------------------------------------------- */ .s-news{border-block-start:1px solid var(--s-hair)} .s-news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .s-news-card__media{aspect-ratio:16/9;overflow:hidden;background:var(--s-ph)} .s-news-card__media img{width:100%;height:100%;object-fit:cover} .s-news-card__date{display:block;font-size:13px;color:var(--s-body);margin-block-start:18px;letter-spacing:.04em} .s-news-card__title{font-size:20px;font-weight:500;margin-block-start:6px;line-height:1.3} .s-news-card__title a:hover{color:var(--s-navy);text-decoration:underline;text-decoration-color:var(--s-gold);text-underline-offset:4px} .s-news-card__text{font-size:14px;color:var(--s-body);margin-block-start:6px} /* 13. KARİYER BANDI -------------------------------------------------------- */ .s-career{background:var(--s-navy);color:#fff;position:relative;z-index:2} .s-career__grid{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center} .s-career .s-eyebrow{color:rgba(255,255,255,.75)} .s-career .s-sec__title{color:#fff} .s-career__lead{font-size:18px;line-height:1.55;opacity:.9;margin-block:18px 34px;max-width:480px} .s-career__photo{height:560px;margin-block:-176px;overflow:hidden;background:var(--s-navy-d)} .s-career__photo img{width:100%;height:100%;object-fit:cover} .s-career__photo--ph{display:flex;align-items:flex-end;justify-content:flex-end;color:rgba(255,255,255,.7)} /* 14. İLETİŞİM ------------------------------------------------------------- */ .s-career+.s-contact{padding-block-start:176px} .s-contact__grid{display:grid;grid-template-columns:5fr 7fr;gap:88px;align-items:start} .s-contact__lead{color:var(--s-body);font-size:17px;margin-block-start:16px;max-width:520px} .s-contact__list{margin-block-start:8px} .s-contact__list dt{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--s-body);margin-block-start:26px} .s-contact__list dd{font-size:18px;color:var(--s-txt);margin-block-start:4px;line-height:1.5} .s-contact__list dd small{display:block;font-size:13px;font-weight:400;color:var(--s-body);line-height:1.4;margin-block-start:2px} .s-contact__list dd+dd small{margin-block-start:0} .s-contact__tel{font-size:28px;font-weight:500;color:var(--s-navy);line-height:1.2} .s-contact__list .s-contact__tel{font-size:28px} .s-contact__tel+.s-contact__tel{margin-block-start:14px} .s-contact__list dd a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--s-gold)} .s-contact__dir{font-size:14px;line-height:1.5;color:var(--s-body);margin-block-start:8px;max-width:520px} /* isteğe bağlı yol tarifi (directions) */ .s-contact__dir b{font-weight:500;color:var(--s-txt)} .s-contact__label{display:block;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--s-body)} .s-contact__hours{margin-block-start:26px} /* isteğe bağlı çalışma saatleri (hours) — dl dışında: 3 sütunlu panel ızgarası bozulmasın */ .s-contact__hours-text{font-size:17px;line-height:1.55;color:var(--s-txt);margin-block-start:4px;max-width:520px} .s-contact__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:36px} /* YOL TARİFİ KARTI — harita GÖMÜLMEZ (iframe yok, 7 Eylül kararı): boş gri yer tutucu yerine kasıtlı bir kart — üstte konum imi + etiket, altında adres bağlantısı (bolumler.njk). */ .s-contact__mapcol{display:flex;flex-direction:column;min-width:0;align-self:start;border:1px solid var(--s-hair);background:#fff} .s-contact__map{background:#fff;border-block-end:1px solid var(--s-hair);min-height:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:18px 24px;text-align:start;color:var(--s-navy);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .s-contact__map::before{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317294A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c4.4-4.6 6.6-8.1 6.6-11.1a6.6 6.6 0 1 0-13.2 0c0 3 2.2 6.5 6.6 11.1z'/%3E%3Ccircle cx='12' cy='10.2' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat} .s-contact__map::after{content:none} .s-contact__map .s-ph-note{text-transform:none;letter-spacing:0;font-weight:400;color:var(--s-body)} .s-contact__map-caption{font-size:13px;line-height:1.5;color:var(--s-body);margin-block-start:0;padding:16px 20px} /* 15. FORMLAR (tüm sayfalar için temel) ------------------------------------ */ .s-form-sec{padding-block:56px;border-block-start:1px solid var(--s-hair)} .s-form-sec__title{font-size:30px;font-weight:400;line-height:1.2} .s-form-sec__text{color:var(--s-body);font-size:17px;margin-block-start:12px;max-width:640px} .s-form{margin-block-start:28px;max-width:760px} .s-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px} .s-form__field--message,.s-form__field--product,.s-form__field--cvLink,.s-form__field--position{grid-column:1/-1} .s-form__label,.s-label{display:block;font-size:14px;font-weight:500;color:var(--s-txt);margin-block-end:6px} .s-form__req{color:var(--s-bordo);text-decoration:none;border:0;font-weight:500} .s-form__input,.s-input,.s-form select,.s-form textarea{display:block;width:100%;height:48px;border:1px solid #C9D0D8;border-radius:0;padding-inline:14px;font:inherit;font-size:16px;line-height:1.4;color:var(--s-txt);background:#fff;transition:border-color .15s} .s-form select{appearance:auto;cursor:pointer} .s-form__input--textarea,.s-form textarea{height:auto;min-height:140px;padding-block:12px;resize:vertical} .s-form__input::placeholder{color:#98A1AC} .s-form__input:hover,.s-form select:hover,.s-form textarea:hover{border-color:#AAB3BE} .s-form__input:focus-visible,.s-form select:focus-visible,.s-form textarea:focus-visible{outline:2px solid var(--s-navy);outline-offset:0;border-color:var(--s-navy)} .s-form__input.is-invalid,.s-form select.is-invalid,.s-form textarea.is-invalid{border-color:var(--s-err)} .s-form__error{display:block;font-size:13px;color:var(--s-err);margin-block-start:6px} .s-form__check,.s-form__consent-label{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--s-body);cursor:pointer} .s-form__check input,.s-form__consent-label input{width:18px;height:18px;flex:none;margin-block-start:2px;accent-color:var(--s-navy)} .s-form__consent{margin-block-start:22px} .s-form__consent-label a{color:var(--s-navy);text-decoration:underline;text-underline-offset:3px} .s-form__consent .s-form__error{margin-inline-start:30px} .s-form__note{font-size:13px;color:var(--s-body);margin-block-start:10px} .s-form__note small,.s-form__hint small{font-size:inherit} /* anlamsal; tarayıcının "smaller"ı 13px'i ~10px'e düşürmesin */ .s-form__actions{margin-block-start:22px} .s-form__hint{font-size:13px;color:var(--s-body);margin-block-start:12px;line-height:1.5} .s-form__status{margin-block-start:12px;font-size:14px;min-height:1.5em;color:var(--s-body)} .s-form__status--error{color:var(--s-err)} .s-form__status--ok{color:var(--s-ok)} /* 16. FOOTER --------------------------------------------------------------- */ .s-footer{border-block-start:1px solid var(--s-gold);padding-block:72px 32px;font-size:14px;background:#fff;color:var(--s-txt)} .s-footer__grid{display:grid;grid-template-columns:1.9fr 1fr 1.5fr 1.45fr 1.1fr 1.55fr;gap:32px} /* Onaylı oranlar 4 sütun içindir (marka + 4 + Bize Ulaşın = 6 hiza). Bir sayfa menüden çıkarılıp sütun boşalırsa footer.njk o sütunu basmaz; ızgara da sütun sayısına uyar, boş hücre kalmaz (--s-fcols şablondan). */ .s-footer__grid:not([data-cols="4"]){grid-template-columns:1.9fr repeat(var(--s-fcols,4),1fr) 1.55fr} .s-footer__grid[data-cols="0"]{grid-template-columns:1.9fr 1.55fr} /* hiç sütun kalmadıysa: marka + Bize Ulaşın */ .s-footer__logo{height:36px;width:auto} .s-footer__desc{color:var(--s-body);margin-block-start:22px;max-width:270px;line-height:1.55} .s-footer__heading{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--s-txt);margin-block-end:14px;white-space:nowrap} .s-footer__list a{display:block;padding-block:5px;color:var(--s-body);transition:color .15s} .s-footer__list a:hover{color:var(--s-navy)} .s-footer__addr p{color:var(--s-body);line-height:1.55} .s-footer__tel{font-size:22px;font-weight:500;color:var(--s-navy);margin-block-start:12px;line-height:1.2} .s-footer__addr .s-footer__tel{color:var(--s-navy)} .s-footer__tel small,.s-footer__mail small{display:block;font-size:12px;font-weight:400;color:var(--s-body);letter-spacing:.04em;text-transform:uppercase;margin-block-start:2px} .s-footer__mail{margin-block-start:12px} .s-footer__addr a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--s-gold)} .s-footer__social{display:flex;gap:10px;margin-block-start:22px} .s-footer__social-link{width:36px;height:36px;border:1px solid var(--s-hair);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--s-navy);transition:background .2s,color .2s,border-color .2s} a.s-footer__social-link:hover{background:var(--s-navy);border-color:var(--s-navy);color:#fff} .s-footer__social-link svg{width:16px;height:16px;fill:currentColor} .s-footer__legal{margin-block-start:56px;padding-block-start:24px;border-block-start:1px solid var(--s-hair);display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;font-size:13px;color:var(--s-body)} .s-footer__legal-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px} .s-footer__legal a,.s-footer__cookie-btn{color:var(--s-body);font-size:13px;line-height:1.65;padding:0;display:inline-block} .s-footer__legal a:hover,.s-footer__cookie-btn:hover{color:var(--s-navy)} /* 17. ÇEREZ KARTI ---------------------------------------------------------- */ .s-cookie{position:fixed;inset-inline-end:24px;inset-block-end:24px;width:360px;max-width:calc(100% - 48px);background:#fff;border:1px solid var(--s-hair);padding:20px;z-index:40;box-shadow:0 8px 24px rgba(23,41,74,.08);color:var(--s-txt)} .s-cookie[hidden]{display:none} .s-cookie__logo{height:20px;width:auto} .s-cookie__text{font-size:14px;color:var(--s-body);margin-block:12px 16px;line-height:1.5} .s-cookie__text a{color:var(--s-navy);text-decoration:underline;text-underline-offset:3px} .s-cookie__buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .s-cookie__btn{height:40px;background:var(--s-navy);color:#fff;font-size:13px;font-weight:500;transition:background .2s;padding-inline:4px} .s-cookie__btn:hover{background:var(--s-navy-d)} .s-cookie__btn--alt{background:#fff;color:var(--s-navy);border:1px solid var(--s-navy)} .s-cookie__btn--alt:hover{background:var(--s-band)} .s-cookie__buttons--two{grid-template-columns:1fr 1fr;margin-block-start:14px} .s-cookie__opts{margin-block-start:12px;border-block-start:1px solid var(--s-hair)} .s-cookie__opt{border-block-end:1px solid var(--s-hair);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px} .s-cookie__opt-label{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;cursor:pointer} .s-cookie__opt-text b{display:block;font-size:14px;font-weight:500;color:var(--s-txt)} .s-cookie__opt-text small{display:block;font-size:12px;color:var(--s-body);line-height:1.3} .s-cookie__opt input{width:18px;height:18px;accent-color:var(--s-navy);flex:none;margin:0} .s-cookie__lock{font-size:12px;color:var(--s-body);letter-spacing:.04em;text-transform:uppercase;flex:none} /* 18. İÇ SAYFA ÇERÇEVESİ (Koç / Sabancı iç sayfa kalıbı; ayrıntı css/sayfa-<şablon>.css) --- */ .s-body--inner .s-main{padding-block-start:var(--s-h)} .s-page-head{padding-block:32px 48px;background:#fff} .s-page-head--image{padding-block-end:0} .s-breadcrumb{font-size:13px;color:var(--s-body);margin-block-end:28px} .s-breadcrumb__list{display:flex;flex-wrap:wrap;gap:6px 8px} .s-breadcrumb__item+.s-breadcrumb__item::before{content:"/";margin-inline-end:8px;opacity:.5} .s-breadcrumb a:hover{color:var(--s-navy);text-decoration:underline;text-underline-offset:3px} .s-breadcrumb [aria-current]{color:var(--s-txt)} .s-page-head__logo{height:64px;width:auto;margin-block-end:20px} .s-page-head__title{font-size:44px;font-weight:400;line-height:1.15;letter-spacing:-.005em;margin-block-start:10px} .s-page-head__subtitle{font-size:20px;color:var(--s-body);margin-block-start:10px} .s-page-head__lead{font-size:18px;line-height:1.55;color:var(--s-body);margin-block-start:18px;max-width:720px} .s-page-head .s-btn{margin-block-start:28px} .s-page-head__figure{margin:40px auto 0;max-width:calc(var(--s-cw) + 48px);padding-inline:24px} .s-page-head__img{width:100%;height:auto;aspect-ratio:3/1;max-height:440px;object-fit:cover} .s-page-head__figure--screen{background:var(--s-navy);padding-block:40px} .s-page-head__figure--screen .s-page-head__img{aspect-ratio:auto;max-width:720px;margin-inline:auto;max-height:none} .s-page-head__figure--ph{height:240px;background:var(--s-band);display:flex;align-items:flex-end;justify-content:flex-end} .s-page-head--gida .s-eyebrow::before,.s-page-head--bordo .s-eyebrow::before{background:var(--s-bordo)} /* Koyu bant sayfa başı (.s-page-head--dark): şablon include öncesi {% set headDark = true %} verir (faaliyet, kariyer); beyaz metin, altın eyebrow çizgisi, beyaz düğme (sayfa-basi.njk s-btn--white basar). Kol rengi: --gida / --bordo. */ .s-page-head--dark{background:var(--s-navy);color:#fff} .s-page-head--dark.s-page-head--gida,.s-page-head--dark.s-page-head--bordo{background:var(--s-bordo)} .s-page-head--dark .s-breadcrumb{color:rgba(255,255,255,.72)} .s-page-head--dark .s-breadcrumb a:hover,.s-page-head--dark .s-breadcrumb [aria-current]{color:#fff} .s-page-head--dark .s-eyebrow{color:rgba(255,255,255,.8)} .s-page-head--dark .s-eyebrow::before{background:var(--s-gold)} .s-page-head--dark .s-page-head__title{color:#fff} .s-page-head--dark .s-page-head__subtitle{color:rgba(255,255,255,.8)} .s-page-head--dark .s-page-head__lead{color:rgba(255,255,255,.9)} .s-page-head--dark.s-page-head--gida .s-btn--white,.s-page-head--dark.s-page-head--bordo .s-btn--white{color:var(--s-bordo)} .s-page-head--dark :focus-visible{outline-color:#fff} .s-layout{display:grid;gap:64px;padding-block:56px 96px;align-items:start} .s-layout--sidebar{grid-template-columns:260px minmax(0,1fr)} .s-layout--sidebar-end{grid-template-columns:minmax(0,1fr) 280px} .s-layout--narrow{grid-template-columns:minmax(0,1fr)} .s-layout--narrow>.s-content{max-width:860px} /* dar düzen: içerik sayfa başıyla aynı başlangıç hizasında kalır, ortalanmaz */ .s-content{padding-block:56px 96px} .s-layout .s-content{padding-block:0} .s-content--narrow>*{max-width:760px} .s-side__title{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--s-body);padding-block-end:10px;border-block-end:1px solid var(--s-hair);margin-block-end:4px} .s-side__item a{display:block;padding:10px 0;color:var(--s-txt);border-block-end:1px solid var(--s-hair);transition:color .15s} .s-side__item a:hover{color:var(--s-navy)} .s-side__item.is-current a{color:var(--s-navy);font-weight:500;border-inline-start:2px solid var(--s-gold);padding-inline-start:12px} .s-side__ext{margin-block-end:24px} .s-content .s-sec{padding-block:0;margin-block-end:56px} .s-content .s-sec:last-child{margin-block-end:0} .s-content .s-sec__title{font-size:30px;margin-block:0 18px} .s-content .s-eyebrow+.s-sec__title{margin-block-start:12px} .s-sec__intro{color:var(--s-body);font-size:17px;margin-block-end:20px;max-width:720px} .s-sec__note{font-size:14px;color:var(--s-body);margin-block-start:16px} .s-sec--text .s-sec__body+.s-stats{margin-block-start:32px} .s-prose{color:var(--s-body);font-size:17px;line-height:1.7;max-width:760px} .s-prose>*+*{margin-block-start:1em} .s-prose h3{font-size:22px;font-weight:500;color:var(--s-txt);margin-block-start:1.6em} .s-prose h4{font-size:18px;font-weight:500;color:var(--s-txt);margin-block-start:1.4em} .s-prose ul{list-style:disc;padding-inline-start:1.25em} .s-prose ol{list-style:decimal;padding-inline-start:1.25em} .s-prose li+li{margin-block-start:.35em} .s-prose a{color:var(--s-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--s-gold)} .s-prose strong{color:var(--s-txt);font-weight:500} .s-prose dl{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;gap:10px 28px;border-block-start:1px solid var(--s-hair);padding-block-start:14px} .s-prose dt{font-weight:500;color:var(--s-txt)} .s-prose table{width:100%;border-collapse:collapse;font-size:15px} .s-prose th,.s-prose td{text-align:start;padding:10px 12px;border-block-end:1px solid var(--s-hair);vertical-align:top} .s-prose th{font-weight:500;color:var(--s-txt)} .s-prose blockquote{border-inline-start:2px solid var(--s-gold);padding-inline-start:20px;color:var(--s-txt)} .s-content .s-tlink{margin-block-start:20px} .s-list__item{padding-block:12px;border-block-end:1px solid var(--s-hair);color:var(--s-body)} .s-list__title{color:var(--s-txt);font-weight:500} .s-cards{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)} .s-cards--two-up,.s-cards--half-panels,.s-cards--slider{grid-template-columns:repeat(2,1fr)} .s-cards--news,.s-cards--links,.s-cards--people,.s-cards--grid{grid-template-columns:repeat(3,1fr)} .s-cards--links .s-card,.s-cards--people .s-card{border:1px solid var(--s-hair);padding:24px} .s-cards--links .s-card{transition:border-color .2s} .s-cards--links .s-card:hover{border-color:var(--s-navy)} .s-cards--links .s-card__title,.s-cards--people .s-card__title{margin-block-start:0} .s-cards--people .s-card__media{aspect-ratio:1/1} .s-cta{background:var(--s-navy);color:#fff;padding:48px 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:center} .s-cta--gida{background:var(--s-bordo)} .s-cta .s-eyebrow{color:rgba(255,255,255,.75)} .s-cta__title{font-size:28px;font-weight:400;line-height:1.2} .s-cta__text{margin-block-start:10px;opacity:.9;max-width:600px;font-size:17px} .s-cta .s-btn{margin-block-start:22px} .s-cta__photo{height:220px;overflow:hidden} .s-cta__photo img{width:100%;height:100%;object-fit:cover} .s-cta__photo--ph{background:rgba(255,255,255,.08);min-width:240px;display:flex;align-items:flex-end;justify-content:flex-end} .s-branch__products,.s-positions{margin-block-start:56px} .s-branch__product-list li a{display:block;padding-block:10px;border-block-end:1px solid var(--s-hair);color:var(--s-txt)} .s-branch__product-list li a:hover{color:var(--s-navy)} .s-positions__list{border-block-start:1px solid var(--s-hair)} .s-position{padding-block:20px;border-block-end:1px solid var(--s-hair)} .s-position__title{font-size:20px;font-weight:500} .s-position__meta{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:14px;color:var(--s-body);margin-block-start:6px} .s-position__meta dt{font-weight:500} .s-position__meta dt::after{content:":"} .s-position__text{color:var(--s-body);margin-block-start:8px} .s-empty{color:var(--s-body)} .s-legal__updated{font-size:14px;color:var(--s-body);margin-block-end:24px} .s-legal__note{font-size:14px;color:var(--s-body);padding:12px 16px;border:1px solid var(--s-hair);background:var(--s-band);margin-block-end:24px} .s-legal__note a{color:var(--s-navy);text-decoration:underline;text-underline-offset:3px} .s-content--legal .s-prose{font-size:16px} .s-content--legal .s-sec__title{font-size:24px} .s-thanks__text{font-size:18px;color:var(--s-body);max-width:640px} .s-thanks__actions,.s-notfound__actions{margin-block-start:28px} .s-page-head--404{padding-block:64px 24px} /* 18a. METİN + FOTOĞRAF BLOĞU — text bölümünde image / imageAlt (ya da yalnız imageBrief) varsa bolumler.njk .s-sec--media basar: metin 7/12, düz 4:3 fotoğraf 5/12 (Koç / Sabancı iç sayfa kalıbı); ≤900px alt alta, 16:9 */ .s-sec--media{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:start} .s-sec--media .s-sec__body{min-width:0} .s-sec--media .s-sec__figure{margin:0;padding-block-start:8px} .s-sec--media .s-sec__figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--s-ph)} .s-sec--media .s-sec__figure--ph{aspect-ratio:4/3;background:var(--s-ph);display:flex;align-items:flex-end;justify-content:flex-end} .s-sec--media .s-stats{grid-column:1/-1} /* 18b. LİSTE TÜRLERİ — list bölümü variant: steps (numaralı adımlar, 3 sütun) · columns (2 sütun) · spec (başlık/değer tablosu; öğeler {title, text}). Kol rengi: kapsayıcıdaki data-branch="gida" (faaliyet.njk, urun.njk) */ .s-sec--steps .s-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;counter-reset:adim;border-block-start:1px solid var(--s-hair)} .s-sec--steps .s-list .s-list__item{counter-increment:adim;padding-block:20px 26px;font-size:17px;line-height:1.45} .s-sec--steps .s-list__item::before{content:counter(adim,decimal-leading-zero);display:block;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--s-navy);margin-block-end:10px} [data-branch="gida"] .s-sec--steps .s-list__item::before{color:var(--s-bordo)} .s-sec--columns .s-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-block-start:1px solid var(--s-hair)} .s-sec--columns .s-list .s-list__item{padding-block:14px;font-size:17px} .s-sec--spec .s-list{border-block-start:1px solid var(--s-hair)} .s-sec--spec .s-list .s-list__item{display:grid;grid-template-columns:minmax(200px,3fr) minmax(0,7fr);gap:4px 32px;align-items:start;padding-block:14px;font-size:16px} .s-sec--spec .s-list__title{font-weight:500;color:var(--s-txt)} .s-sec--spec .s-list__text{color:var(--s-body)} /* 18c. TEK ÜRÜN KARTI — cards bölümü variant: feature (tek geniş kart: fotoğraf 7/12, metin 5/12) */ .s-cards.s-cards--feature{grid-template-columns:minmax(0,1fr)} .s-cards--feature .s-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:center} .s-cards--feature .s-card>*{min-width:0} .s-cards--feature .s-card__title{margin-block-start:0;font-size:28px;font-weight:400;line-height:1.2} .s-cards--feature .s-card__kind{font-size:15px;margin-block-start:6px} .s-cards--feature .s-card__text{font-size:17px;margin-block-start:16px} .s-cards--feature .s-card__more{margin-block-start:22px} /* 18d. İÇERİK SÜTUNUNDA İLETİŞİM PANELİ — contact bölümü bir .s-content içinde basılırsa (kurumsal, tesekkurler, yasal, 404): gri panel, üç sütun Adres · Telefon · E-posta (ızgara yerleşimi mevcut
üstünde), harita gizli; JSON'da showMap:false önerilir */ .s-content .s-contact{background:var(--s-band);padding:40px 48px} .s-content .s-contact__grid{display:block;max-width:none;padding-inline:0} .s-content .s-contact .s-sec__title{font-size:24px;margin-block-end:4px} .s-content .s-contact__lead{font-size:16px;margin-block-start:8px} .s-content .s-contact__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:0 32px;margin-block-start:24px} .s-content .s-contact__list dt{grid-row:1;margin-block-start:0;padding-block-end:8px;border-block-end:1px solid var(--s-hair)} .s-content .s-contact__list dt:nth-of-type(1){grid-column:1} .s-content .s-contact__list dt:nth-of-type(2){grid-column:2} .s-content .s-contact__list dt:nth-of-type(3){grid-column:3} .s-content .s-contact__addr{grid-column:1} .s-content .s-contact__tel{grid-column:2} .s-content .s-contact__mail{grid-column:3} .s-content .s-contact__list dd{font-size:16px;margin-block-start:12px;line-height:1.5} .s-content .s-contact__list .s-contact__tel{font-size:22px;font-weight:500;line-height:1.2} .s-content .s-contact__tel+.s-contact__tel,.s-content .s-contact__mail+.s-contact__mail{margin-block-start:10px} .s-content .s-contact__hours{margin-block-start:24px} .s-content .s-contact__hours-text{font-size:16px} .s-content .s-contact__ctas{margin-block-start:28px} .s-content .s-contact__mapcol,.s-content .s-contact__map,.s-content .s-contact__map-caption{display:none} /* 18e. BANTLAR — tam genişlik iletişim ve form bantları (faaliyet.njk ve urun.njk basar; başka şablonlar da kullanabilir): .s-band--contact kol renginde (lacivert; Gıda'da bordo: bölümün branch'i ya da kapsayıcının data-branch'i) — solda eyebrow, başlık, giriş ve beyaz düğme; sağda adres / telefon / e-posta; harita gizli (JSON: showMap:false + buttons) .s-band.s-band--form gri bant — başlık ve açıklama solda (4/12), form sağda (8/12) */ .s-band--contact .s-contact{padding-block:80px;background:var(--s-navy);color:#fff} .s-band--contact .s-contact--gida,[data-branch="gida"] .s-band--contact .s-contact{background:var(--s-bordo)} .s-band--contact .s-contact__grid{grid-template-columns:minmax(0,1fr);gap:0} .s-band--contact .s-contact__text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto auto 1fr;column-gap:88px;align-items:start} .s-band--contact .s-contact__text>*{grid-column:1} .s-band--contact .s-contact__text>.s-contact__list{grid-column:2;grid-row:1/6;margin-block-start:0} .s-band--contact .s-contact .s-eyebrow{color:rgba(255,255,255,.75)} .s-band--contact .s-contact .s-eyebrow::before{background:var(--s-gold)} .s-band--contact .s-contact .s-sec__title{color:#fff;font-size:40px;font-weight:400;line-height:1.15;margin-block:0} .s-band--contact .s-contact .s-eyebrow+.s-sec__title{margin-block-start:12px} .s-band--contact .s-contact__lead{color:rgba(255,255,255,.88)} .s-band--contact .s-contact__list dt,.s-band--contact .s-contact__label{color:rgba(255,255,255,.7)} .s-band--contact .s-contact__list dt:first-child{margin-block-start:4px} .s-band--contact .s-contact__list dd,.s-band--contact .s-contact__tel,.s-band--contact .s-contact__list .s-contact__tel,.s-band--contact .s-contact__hours-text,.s-band--contact .s-contact__dir b{color:#fff} .s-band--contact .s-contact__list dd small,.s-band--contact .s-contact__dir{color:rgba(255,255,255,.7)} .s-band--contact .s-contact__ctas{margin-block-start:40px} .s-band--contact .s-contact .s-btn{background:#fff;color:var(--s-navy)} .s-band--contact .s-contact .s-btn:hover{background:var(--s-band)} .s-band--contact .s-contact--gida .s-btn,[data-branch="gida"] .s-band--contact .s-contact .s-btn{color:var(--s-bordo)} .s-band--contact .s-contact__mapcol,.s-band--contact .s-contact__map,.s-band--contact .s-contact__map-caption{display:none} .s-band--contact :focus-visible{outline-color:#fff} .s-band--form .s-form-sec{border:0;padding-block:80px 88px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:64px;align-items:start} .s-band--form .s-form-sec__title{grid-column:1;font-size:36px;line-height:1.15;padding-inline-end:24px} .s-band--form .s-form-sec__text{grid-column:1;margin-block-start:16px;padding-inline-end:24px} .s-band--form .s-form{grid-column:2;grid-row:1/3;margin-block-start:0;max-width:none} .s-band--form .s-form__input,.s-band--form .s-form select,.s-band--form .s-form textarea{background:#fff} /* 19. YARDIMCILAR ---------------------------------------------------------- */ .s-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .s-form__honey{display:none} /* bal küpü (Netlify netlify-honeypot="botcheck") — asla görünmez */ .s-ph-note{display:block;font-size:12px;line-height:1.4;color:var(--s-body);opacity:.7;padding:8px 12px;max-width:320px;text-align:end} .s-nowrap{white-space:nowrap} /* 20. BEKLİYOR — sahibinden beklenen bilgi; build [BEKLİYOR: …] metnini bu etikete sarar (--yayin ile kalmamalı) */ .s-bekliyor{background:#FFF6D6;color:#6B5300;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .3em;outline:1px dashed #D9B84A;outline-offset:-1px;font-size:.92em;font-weight:400} /* 21. HAREKET -------------------------------------------------------------- */ .s-rv{opacity:0;transform:translateY(24px);transition:opacity .4s ease,transform .4s ease} .s-rv.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .s-rv{opacity:1;transform:none;transition:none} .s-hero__slide,.s-hero__text,.s-panel__img,.s-card__media img,.s-drawer,.s-mega{transition:none} } /* 22. DUYARLI -------------------------------------------------------------- */ @media (max-width:1399px){ .s-hero__arrow{width:56px;height:56px} .s-hero__arrow--prev{inset-inline-start:24px} .s-hero__arrow--next{inset-inline-end:24px} .s-hero__text{margin-inline-start:80px} .s-footer__grid{grid-template-columns:1.6fr 1fr 1.3fr 1.3fr 1fr} .s-footer__grid:not([data-cols="4"]){grid-template-columns:1.6fr repeat(var(--s-fcols,4),1fr)} .s-footer__grid[data-cols="0"]{grid-template-columns:1fr} .s-footer__reach{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;padding-block-start:24px;border-block-start:1px solid var(--s-hair)} .s-footer__reach .s-footer__heading{grid-column:1/-1;margin-block-end:0} .s-footer__reach .s-footer__social{margin-block-start:0} } /* Dar masaüstü bandı (1101–1279): en uzun menü etiketleri Rusçadadır ("Направления деятельности", "Продукты и решения") ve varsayılan aralıklarla üst bilgi taşar, dil değiştirici sağdan kırpılırdı. Bu bantta menü aralığını daraltıyoruz; 1280 ve üstünde ile 1100 ve altında (çekmece) hiçbir şey değişmez. 6 Eylül 2026 — beşinci dil (de) eklenince dil değiştiriciye bir kısa kod daha girdi (TR EN DE AR RU ≈ +27 px) ve Rusça menü 1101 px'te kap dolgusunu 2 px yiyordu. Araç aralığı 8 → 6 px, kısa kod dolgusu 4 → 3 px: 14 px kazanılır, Rusça yeniden 24 px kenar boşluğuyla sığar. Almanca ("Geschäftsbereiche", "Produkte & Lösungen") 1101 px'te Rusçadan 76 px kısadır, sorun çıkarmaz. */ @media (min-width:1101px) and (max-width:1279px){ .s-nav__link{padding-inline:7px;font-size:14px} .s-nav__link::after{inset-inline:7px} .s-header__tools{gap:6px} .s-lang--compact .s-lang__link,.s-lang--compact .s-lang__current{padding-inline:3px} } @media (max-width:1100px){ :root{--s-h:72px} .s-nav,.s-header__sep,.s-header__search-btn{display:none} .s-burger{display:flex} .s-logo__img{height:32px} .s-hero__arrow{display:none} .s-hero__text{margin-inline-start:0} .s-hero__title{font-size:42px} .s-hero__logo{height:72px} .s-glance__grid{grid-template-columns:1fr;gap:48px} .s-career__grid{grid-template-columns:1fr;gap:48px} .s-career__photo{height:auto;aspect-ratio:16/9;margin-block:0} .s-career+.s-contact{padding-block-start:96px} .s-contact__grid{grid-template-columns:minmax(0,1fr);gap:48px} .s-contact__map{min-height:0} .s-panel__body,.s-panel:first-child .s-panel__body{padding:48px} .s-cta{padding:40px} .s-sec--media{gap:28px 32px} .s-band--form .s-form-sec{column-gap:40px} .s-band--contact .s-contact__text{column-gap:48px} } @media (max-width:900px){ .s-layout--sidebar,.s-layout--sidebar-end{grid-template-columns:1fr;gap:40px} .s-layout--sidebar-end .s-side{order:2} .s-cards,.s-cards--news,.s-cards--links,.s-cards--people,.s-cards--grid{grid-template-columns:repeat(2,1fr)} .s-page-head__title{font-size:36px} .s-cta{grid-template-columns:1fr} .s-sec--media{grid-template-columns:1fr} .s-sec--media .s-sec__figure{padding-block-start:0} .s-sec--media .s-sec__figure img,.s-sec--media .s-sec__figure--ph{aspect-ratio:16/9} .s-sec--steps .s-list{grid-template-columns:repeat(2,minmax(0,1fr))} .s-sec--spec .s-list .s-list__item{grid-template-columns:minmax(0,1fr);gap:2px 0} .s-cards--feature .s-card{grid-template-columns:minmax(0,1fr);gap:0} .s-content .s-contact{padding:32px} .s-band--form .s-form-sec,.s-band--contact .s-contact__text{grid-template-columns:minmax(0,1fr);grid-template-rows:none} .s-band--form .s-form-sec>*,.s-band--form .s-form-sec__title,.s-band--form .s-form-sec__text,.s-band--form .s-form,.s-band--contact .s-contact__text>*,.s-band--contact .s-contact__text>.s-contact__list{grid-column:1;grid-row:auto;padding-inline-end:0} .s-band--form .s-form{margin-block-start:28px} .s-band--contact .s-contact__text>.s-contact__list{margin-block-start:32px} .s-band--contact .s-contact__ctas{order:9;margin-block-start:36px} } @media (max-width:768px){ .s-sec{padding-block:64px} .s-sec__title{font-size:30px} .s-sec__head{flex-direction:column;align-items:flex-start;gap:20px;margin-block-end:32px} .s-hero__title{font-size:32px} .s-hero__lead{font-size:16px;margin-block:16px 28px} .s-hero__logo{height:56px;margin-block-end:18px} .s-hero__slide .s-btn{width:100%} .s-hero__dots{inset-block-end:20px} .s-panels{grid-template-columns:1fr;height:auto} .s-panel{min-height:380px} .s-panel__body,.s-panel:first-child .s-panel__body{padding:40px 24px} .s-panel__title{font-size:28px} .s-panel__text{font-size:16px} .s-stat{padding:24px 20px 22px;min-height:0} .s-stat__value{font-size:40px;height:40px} .s-stat__value--word{font-size:28px} .s-products__track .s-card{flex-basis:min(384px,80vw)} .s-news__grid,.s-cards,.s-cards--two-up,.s-cards--half-panels,.s-cards--slider,.s-cards--news,.s-cards--links,.s-cards--people,.s-cards--grid{grid-template-columns:1fr} .s-contact__tel,.s-contact__list .s-contact__tel{font-size:24px} .s-contact__ctas .s-btn{flex:1 1 100%} .s-form__grid{grid-template-columns:1fr} .s-form-sec{padding-block:40px} .s-footer{padding-block:56px 24px} .s-footer__grid{grid-template-columns:1fr 1fr;gap:32px 24px} .s-footer__brand{grid-column:1/-1} .s-footer__heading{white-space:normal} .s-footer__reach{grid-template-columns:1fr} .s-footer__legal{flex-direction:column;gap:16px} .s-cookie{inset-inline:0;inset-block-end:0;width:auto;max-width:none;padding:14px 20px 16px;box-shadow:none;border-inline:0;border-block-end:0} .s-cookie__logo{height:18px} .s-cookie__text{font-size:13px;margin-block:10px 12px} .s-page-head{padding-block:24px 40px} .s-page-head--image{padding-block-end:0} /* fotoğraf bandı sayfa başının kendisi bitirir; üstteki genel kural ezmesin */ .s-page-head__title{font-size:30px} .s-page-head__lead{font-size:16px} .s-page-head__figure{margin-block-start:28px} .s-page-head__img{aspect-ratio:16/9} .s-layout,.s-content{padding-block:40px 64px} .s-content .s-sec__title{font-size:26px} .s-prose{font-size:16px} .s-prose dl{grid-template-columns:1fr;gap:2px 0} .s-prose dd+dt{margin-block-start:10px} .s-cta{padding:32px 24px} .s-cta__title{font-size:24px} .s-sec--steps .s-list,.s-sec--columns .s-list{grid-template-columns:minmax(0,1fr)} .s-sec--steps .s-list .s-list__item{padding-block:16px 18px;font-size:16px} .s-sec--columns .s-list .s-list__item{font-size:16px} .s-cards--feature .s-card__title{font-size:24px} .s-content .s-contact{padding:28px 20px} .s-content .s-contact__list{display:block;margin-block-start:16px} .s-content .s-contact__list dt{margin-block-start:20px;border:0;padding-block-end:0} .s-content .s-contact__list dd{margin-block-start:6px} .s-band--contact .s-contact,.s-band--form .s-form-sec{padding-block:56px 64px} .s-band--contact .s-contact .s-sec__title{font-size:30px} .s-band--form .s-form-sec__title{font-size:28px} .s-band--contact .s-contact .s-btn{width:100%} } /* Telefon üst bilgisi — beşinci dil (de) sonrası ölçüm, 6 Eylül 2026. Kompakt dil değiştirici beş kısa koda çıkınca (TR EN DE AR RU = 148,3 px) üst bilgi çubuğu telefonda kabına sığmıyordu: logo (155,5 px) + araçlar (204,3 px) 390 px'te 24 px'lik kap dolgusunu tüketiyor, logo ile seçici bitişiyor (aralık 0), 375 px'te menü düğmesi ekranın 9 px, 360 px'te 24 px, 320 px'te 64 px dışına taşıyordu. Taşma `document.scrollWidth` ile GÖRÜNMÜYOR çünkü `.s-header` position:fixed — bu yüzden önceki overflowX denetimlerinden geçmişti. Ölçülen düzeltme: logo 32 → 26 px, araç aralığı 12 → 8 px, kısa kod dolgusu 6 → 4 px ve harf aralığı .06 → .03em. Kazanç 60 px; dokunma hedefi 24,6 px (24 px alt sınırının üstünde) ve kap dolgusu 24 px kalır. Sonuç (logo→seçici aralığı / sağ kenar boşluğu): 360 → 9/24 · 375 → 24/24 · 390 → 39/24 · 414 → 63/24 · 429 → 78/24. 430 px ve üstü ile 1101 px bandı DEĞİŞMEDİ. */ @media (max-width:429px){ .s-logo__img{height:26px} .s-header__tools{gap:8px} .s-lang--compact .s-lang__link,.s-lang--compact .s-lang__current{padding-inline:4px;letter-spacing:.03em} } /* 360 px altında beş kısa kod fiziksel olarak sığmıyor (320 px'te menü düğmesi yine 7 px taşıyor). Bu bantta kompakt seçici gizlenir; diller çekmecedeki tam seçicide kendi yazımlarıyla (Türkçe · English · Deutsch · العربية · Русский) erişilebilir kalır. */ @media (max-width:359px){ .s-lang--compact{display:none} } /* 23. YAZDIRMA ------------------------------------------------------------- */ @media print{ .s-header,.s-drawer,.s-search,.s-cookie,.s-hero__arrow,.s-hero__dots,.s-products__ctl,.s-footer__social,.s-skip,.s-footer__cookie-btn{display:none !important} .s-body--inner .s-main{padding-block-start:0} body{color:#000;font-size:12pt} .s-hero{height:auto;min-height:0;color:#000;background:none} .s-hero__slide{position:static;opacity:1;visibility:visible} .s-hero__slide::after,.s-hero__img,.s-hero__slide:not(.is-on){display:none} .s-hero__text{opacity:1;transform:none} .s-panel,.s-career,.s-cta{color:#000;background:none;border:1px solid #999} .s-panel::after{display:none} .s-panel__img,.s-career__photo{display:none} .s-rv{opacity:1;transform:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555} .s-bekliyor{outline:1px dashed #999;background:none} .s-page-head--dark{background:none;color:#000} .s-sec--media{grid-template-columns:1fr} .s-content .s-contact{background:none;padding:0} .s-band--contact .s-contact{background:none;color:#000;border:1px solid #999} }