/* Raftel Laboratuvar: tek stil dosyası. Açık zemin, lacivert metin, tek mavi vurgu. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/instrument-sans-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/instrument-sans-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}

:root{
  color-scheme:light;
  --navy:#172943;
  --navy-deep:#0d1d31;
  --blue:#1770b3;
  --blue-strong:#115a92;
  --text:#44586a;
  --muted:#5b6e7f;
  --line:#e0e8ee;
  --line-strong:#c9d8e3;
  --pale:#f4f7f9;
  --tint:#eaf2f8;
  --font:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
  --px:max(var(--gutter),calc((100% - var(--max)) / 2));
  --radius:20px;
  --radius-sm:14px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --header-h:76px;
}

/* Temel */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 1.0625rem/1.65 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,figure,address{margin:0}
address{font-style:normal}
h1,h2,h3{color:var(--navy);font-weight:560;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.75rem + 2.6vw,4rem);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(1.875rem,1.45rem + 1.4vw,2.625rem);line-height:1.12;letter-spacing:-.022em}
h3{font-size:1.375rem;line-height:1.25;letter-spacing:-.012em;font-weight:600}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:30;padding:10px 16px;border-radius:10px;background:#fff;color:var(--navy);font-weight:600}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Düğmeler ve bağlantılar */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-size:.9375rem;font-weight:600;line-height:1;white-space:nowrap;transition:background-color .18s ease,box-shadow .18s ease,transform .16s var(--ease-out)}
.button:hover{background:var(--blue-strong)}
.button:active{transform:scale(.97)}
.button-quiet{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-strong)}
.button-quiet:hover{background:var(--pale);box-shadow:inset 0 0 0 1px var(--blue)}
.button-sm{min-height:42px;padding:0 18px;font-size:.875rem}
.text-link{color:var(--blue);font-size:.9375rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(23,112,179,.35);text-underline-offset:5px;transition:color .18s ease,text-decoration-color .18s ease}
.text-link:hover{color:var(--blue-strong);text-decoration-color:currentColor}

/* Üst menü */
.header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:var(--header-h);padding:0 var(--px);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s ease}
.header.is-stuck{border-bottom-color:var(--line)}
.logo{margin-right:auto;flex-shrink:0}
.logo img{width:140px;height:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{position:relative;padding:8px 0;color:var(--navy);font-size:.9375rem;font-weight:500}
.nav a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.nav a:not(.nav-contact):hover::after,.nav a:not(.nav-contact)[aria-current="page"]::after{transform:scaleX(1)}
.nav .nav-contact{padding:11px 20px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;transition:background-color .18s ease,transform .16s var(--ease-out)}
.nav .nav-contact:hover,.nav .nav-contact[aria-current="page"]{background:var(--blue-strong)}
.nav .nav-contact:active{transform:scale(.97)}
.menu-toggle{display:none}

/* Sayfa başı görselleri */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(420px,36vw,520px);padding:64px var(--px);background:#f5f8fa}
.hero-home{min-height:clamp(500px,44vw,640px)}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-light::after{background:linear-gradient(90deg,rgba(245,248,250,.92) 0%,rgba(245,248,250,.6) 38%,rgba(245,248,250,0) 62%)}
.hero-dark{background:var(--navy-deep)}
.hero-dark::after{background:linear-gradient(90deg,rgba(9,22,38,.8) 0%,rgba(9,22,38,.45) 45%,rgba(9,22,38,0) 75%)}
.hero-copy{max-width:600px}
.hero-home .hero-copy{max-width:690px}
.hero-dark h1{color:#fff}
.hero-copy p{margin-top:22px;max-width:50ch;font-size:1.125rem;line-height:1.6}
.hero-dark .hero-copy p{color:#d4e1ec}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media (prefers-reduced-motion:no-preference){.hero-img{animation:hero-in .9s var(--ease-out) both}}
@keyframes hero-in{from{opacity:0;transform:scale(1.03)}}

/* Bölümler */
.section{padding:clamp(64px,8vw,112px) var(--px)}
.section-pale{background:var(--pale)}
.section-title{margin-bottom:clamp(28px,3.5vw,44px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.5vw,44px)}

/* Marka daireleri */
.medallion{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:150px;height:150px;padding:28px;border-radius:50%;background:var(--navy)}
.medallion img{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain}
.medallion-nuve img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.medallion-firatmed img{mix-blend-mode:screen}
.medallion-brand img{filter:brightness(0) invert(1);height:96px;max-height:96px}
.medallion-ertgloves img{max-height:90px}
.brand-strip{padding:44px var(--px) 52px;border-bottom:1px solid var(--line)}
.strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.strip-head h2{font-size:1.0625rem;font-weight:600;letter-spacing:0}
.brand-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;justify-items:center;padding:0;list-style:none}
.brand-row .medallion{width:104px;height:104px;padding:18px;transition:background-color .18s ease,transform .16s var(--ease-out)}
.brand-row .medallion img{max-height:44px}
.brand-row .medallion-brand img{height:58px;max-height:58px}
.brand-row .medallion-ertgloves img{max-height:54px}
.brand-row .medallion:hover{background:#22395b}
.brand-row .medallion:active{transform:scale(.97)}

/* Bölüm başlığı */
.section-head h2+.section-lead{margin-top:14px}
.section-lead{max-width:60ch;font-size:1.0625rem}

/* Sektörler: dördü birden görünür, metin fotoğrafın koyu alt kısmında durur */
.sector-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.sector-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:430px;overflow:hidden;border-radius:var(--radius);background:var(--navy-deep);color:#d3dfea}
.sector-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.sector-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,29,49,0) 30%,rgba(13,29,49,.8) 62%,rgba(13,29,49,.95) 100%)}
.sector-card-body{min-height:196px;padding:24px 24px 28px}
.sector-card h3{color:#fff;font-size:1.375rem;letter-spacing:-.015em}
.sector-card p{margin-top:10px;font-size:.9375rem;line-height:1.55}

/* Ana sayfa ürün grupları: en büyük grup büyük karede */
.product-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(270px,auto));grid-template-areas:"sarf sarf ekipman ekipman" "sarf sarf cam eldiven";gap:20px}
.tile-sarf{grid-area:sarf}
.tile-ekipman{grid-area:ekipman}
.tile-cam{grid-area:cam}
.tile-eldiven{grid-area:eldiven}
.product-tile{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:270px;padding:16px;overflow:hidden;border-radius:var(--radius);background:var(--pale)}
.product-tile img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.product-tile-label{max-width:360px;padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(23,41,67,.08)}
.product-tile h3{font-size:1.125rem}
.product-tile p{margin-top:4px;color:var(--muted);font-size:.9375rem;line-height:1.5}
.tile-sarf .product-tile-label{padding:22px 24px}
.tile-sarf h3{font-size:1.5rem}
@media (hover:hover) and (pointer:fine){
  .product-tile:hover img{transform:scale(1.03)}
  .product-tile:hover h3{color:var(--blue)}
}

/* Faaliyet: ürün grupları katalog satırları */
.product-list{display:grid;gap:24px}
.product-info{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;scroll-margin-top:calc(var(--header-h) + 24px);transition:border-color .2s ease,box-shadow .2s ease}
/* Görsel satır yüksekliğini belirlemez, metnin yüksekliğine uyar */
.product-info>img{width:100%;height:0;min-height:100%;object-fit:cover}
.product-info-body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.5vw,48px)}
.product-info-body h3{font-size:1.625rem;font-weight:560;letter-spacing:-.02em}
.product-info-body>p{max-width:56ch;margin-top:10px}
.product-info ul{display:grid;gap:4px;margin-top:18px;padding-left:1.15em}
.product-info-body{min-height:340px}
.product-info li::marker,.form-intro li::marker{color:var(--blue)}
.product-info-body .product-note{margin-top:auto;padding-top:22px;color:var(--muted);font-size:.9375rem}
.product-note strong{color:var(--navy);font-weight:600}
.card-actions{display:flex;flex-wrap:wrap;gap:8px}
.product-info .card-actions{margin-top:20px}
.product-info:target,.brand-card:target{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,112,179,.12)}

/* Kurumsal */
.page-intro h1{max-width:24ch;font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
.page-intro p{max-width:58ch;margin-top:24px;font-size:1.125rem}

/* Ana sayfa yol haritası.
   Katmanlar: gri yol ve mavi ilerleme en altta (z 0), noktalar ve kartlar üstte (li z 1).
   Noktaların beyaz dış halkası çizgiyle aralarında boşluk bırakır. */
.about-story-head p{max-width:62ch;margin-top:20px;font-size:1.125rem}
.story-line{--gap:24px;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:56px 0 0;padding:52px 0 0;list-style:none}
.story-line::before,.story-line::after{content:"";position:absolute;z-index:0;top:13px;left:calc((100% - 2 * var(--gap)) / 6);right:calc((100% - 2 * var(--gap)) / 6);height:4px;border-radius:4px}
.story-line::before{background:var(--line)}
.story-line::after{background:linear-gradient(90deg,#9fcdee,var(--blue) 55%,var(--navy));transform-origin:left}
.story-line li{position:relative;z-index:1}
.story-line li::before{content:"";position:absolute;top:-22px;left:50%;width:2px;height:22px;margin-left:-1px;background:var(--line-strong);transform-origin:top}
.story-dot{position:absolute;top:-52px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--blue),0 0 0 6px #fff}
.story-dot::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--blue)}
.story-card{height:100%;padding:28px 28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.story-card strong{display:block;color:var(--blue);font-size:clamp(2rem,1.6rem + 1.2vw,2.75rem);font-weight:560;line-height:1;letter-spacing:-.03em}
.story-card h3{margin-top:14px;font-size:1.125rem}
.story-card p{margin-top:6px;color:var(--muted);font-size:.9375rem;line-height:1.55}
/* Bugün: lacivert kart, dolu nokta ve devam eden dönemi anlatan hafif nabız */
.story-line li:last-child .story-card{border-color:var(--navy);background:var(--navy)}
.story-line li:last-child strong{color:#8fcaf3}
.story-line li:last-child h3{color:#fff}
.story-line li:last-child p{color:#c9d7e4}
.story-line li:last-child .story-dot{background:var(--blue);box-shadow:inset 0 0 0 0 var(--blue),0 0 0 6px #fff}
.story-line li:last-child .story-dot::after{inset:10px;background:#fff}
.story-line li:last-child .story-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:0}
.about-cta{margin-top:40px}

/* Koreografi: mavi çizgi her noktada kısa bir duraklama yapar; çizgi vardığında nokta
   hafif bir sıçramayla maviye döner, bağlantı uzar ve kart yükselir. --at: noktaya varış anı.
   Bölüm sayfa açıldığında zaten görünürse ya da hareketi azalt tercihi varsa animasyon oynamaz. */
@keyframes story-line-travel{
  0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  40%{transform:scaleX(.5)}
  52%{transform:scaleX(.5);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  92%,100%{transform:scaleX(1)}
}
@keyframes story-dot-on{0%{transform:scale(1);box-shadow:inset 0 0 0 2px var(--line-strong),0 0 0 6px #fff}45%{transform:scale(1.22)}100%{transform:scale(1);box-shadow:inset 0 0 0 3px var(--blue),0 0 0 6px #fff}}
@keyframes story-core-on{0%{transform:scale(.45);background:var(--line-strong)}100%{transform:scale(1);background:var(--blue)}}
@keyframes story-now-on{0%{transform:scale(1);background:#fff;box-shadow:inset 0 0 0 2px var(--line-strong),0 0 0 6px #fff}45%{transform:scale(1.25)}100%{transform:scale(1);background:var(--blue);box-shadow:inset 0 0 0 0 var(--blue),0 0 0 6px #fff}}
@keyframes story-now-core{0%{transform:scale(.45);background:var(--line-strong)}100%{transform:scale(1);background:#fff}}
@keyframes story-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes story-reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(28px)}}
@keyframes story-grow-y{from{transform:scaleY(0)}}
@keyframes story-grow-x{from{transform:scaleX(0)}}
@keyframes dot-pulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.4);opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .story-line li:last-child .story-dot::before{animation:dot-pulse 2.4s var(--ease-out) 1s infinite}
  .story-line li:nth-child(1){--at:.3s}
  .story-line li:nth-child(2){--at:1.18s}
  .story-line li:nth-child(3){--at:2.32s}

  /* Bekleme: gri yol ve gri, boş noktalar görünür; gidilecek yol belli olur */
  .about-animate.is-armed:not(.is-visible) h2{clip-path:inset(0 0 100% 0);transform:translateY(28px)}
  .about-animate.is-armed:not(.is-visible) .about-story-head p,
  .about-animate.is-armed:not(.is-visible) .about-cta,
  .about-animate.is-armed:not(.is-visible) .story-card{opacity:0;transform:translateY(18px)}
  .about-animate.is-armed:not(.is-visible) .story-line::after{transform:scaleX(0)}
  .about-animate.is-armed:not(.is-visible) .story-line li::before{transform:scaleY(0)}
  .about-animate.is-armed:not(.is-visible) .story-line li::after{transform:scaleY(0)}
  .about-animate.is-armed:not(.is-visible) .story-dot{background:#fff;box-shadow:inset 0 0 0 2px var(--line-strong),0 0 0 6px #fff}
  .about-animate.is-armed:not(.is-visible) .story-dot::after{transform:scale(.45);background:var(--line-strong)}
  .about-animate.is-armed:not(.is-visible) .story-line li:last-child .story-dot::before{animation:none}

  /* Oynatma */
  .about-animate.is-visible h2{animation:story-reveal .9s var(--ease-out) backwards}
  .about-animate.is-visible .about-story-head p{animation:story-rise .6s var(--ease-out) .15s backwards}
  .about-animate.is-visible .story-line::after{animation:story-line-travel 2.2s .3s backwards}
  .about-animate.is-visible .story-dot{animation:story-dot-on .55s var(--ease-out) var(--at) backwards}
  .about-animate.is-visible .story-dot::after{animation:story-core-on .45s var(--ease-out) var(--at) backwards}
  .about-animate.is-visible .story-line li:last-child .story-dot{animation-name:story-now-on}
  .about-animate.is-visible .story-line li:last-child .story-dot::after{animation-name:story-now-core}
  .about-animate.is-visible .story-line li:last-child .story-dot::before{animation-delay:3s}
  .about-animate.is-visible .story-line li::before{animation:story-grow-y .3s var(--ease-out) calc(var(--at) + .1s) backwards}
  .about-animate.is-visible .story-card{animation:story-rise .7s var(--ease-out) calc(var(--at) + .15s) backwards}
  .about-animate.is-visible .about-cta{animation:story-rise .6s var(--ease-out) 2.6s backwards}
}

/* Misyon, vizyon ve değerler */
.mv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.mv-grid article{padding:clamp(28px,3.5vw,44px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.mv-grid h3,.value-list h3{color:var(--blue);font-size:1rem;letter-spacing:0}
.mv-grid p{max-width:40ch;margin-top:12px;color:var(--navy);font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);font-weight:500;line-height:1.4;letter-spacing:-.01em}
.value-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin:48px 0 0;padding:0;list-style:none}
.value-list li{padding-top:20px;border-top:2px solid var(--line-strong)}
.value-list h3{color:var(--navy);font-size:1.125rem}
.value-list p{max-width:34ch;margin-top:8px}

/* Kariyer */
.career-card{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;padding:clamp(28px,4vw,48px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.career-card p{max-width:58ch;margin-top:12px}
.career-card .career-note{color:var(--muted);font-size:.875rem}
.career-card a:not(.button),.form-legal a,.legal-body a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(23,112,179,.35);text-underline-offset:4px}
.career-card .button{flex-shrink:0}
.form-legal{grid-column:1/-1;color:var(--muted);font-size:.875rem}

/* Yasal sayfalar */
.legal h1{font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
.not-found{min-height:56vh}
.not-found h1{max-width:20ch;font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem)}
.not-found p{max-width:52ch;margin-top:20px;font-size:1.125rem}
.legal-meta{margin-top:12px;color:var(--muted);font-size:.9375rem}
.legal-body{max-width:72ch;margin-top:32px}
.legal-body h2{margin-top:40px;font-size:1.375rem;font-weight:600;letter-spacing:-.01em}
.legal-body p,.legal-body ul{margin-top:12px}
.legal-body ul{padding-left:1.2em}
.legal-body li{padding:3px 0}
.legal-body li::marker{color:var(--blue)}

.order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.order-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(28px,3.5vw,44px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.order-card p{max-width:46ch}
.order-card .button{margin-top:auto}
.order-card-market{border-color:var(--navy);background:var(--navy);color:#c9d7e4}
.order-card-market img{width:170px;height:auto}
.order-card-market :focus-visible{outline-color:#fff}

/* Markalar */
.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.brand-card{display:flex;flex-direction:column;align-items:center;padding:40px 28px 28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:center;scroll-margin-top:calc(var(--header-h) + 24px);transition:border-color .2s ease,box-shadow .2s ease}
.brand-card .medallion{margin-bottom:28px}
.brand-card h2{font-size:1.5rem;letter-spacing:-.015em}
.brand-card p{max-width:32ch;margin:10px 0 24px;color:var(--muted);font-size:1rem;line-height:1.6}
.brand-card .card-actions{justify-content:center;margin-top:auto}

/* İletişim */
.contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.topic-note{margin-bottom:16px;padding:12px 16px;border-radius:12px;background:var(--tint);color:#20577f;font-size:.9375rem}
.contact-list{display:grid;gap:12px;padding:0;list-style:none}
.contact-item{display:block;padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .18s ease,background-color .18s ease}
.contact-item:hover{border-color:var(--line-strong);background:var(--pale)}
.contact-item span{display:block;color:var(--muted);font-size:.875rem}
.contact-item strong{display:block;margin-top:4px;color:var(--navy);font-size:clamp(1.25rem,1rem + .9vw,1.625rem);font-weight:500;letter-spacing:-.015em;overflow-wrap:anywhere}
.address-body h2{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.address-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.address-card .map{display:block;width:100%;aspect-ratio:16/10;border:0;background:var(--tint)}
.address-body{padding:28px 32px 32px;background:var(--pale)}
.address-body address{margin:12px 0 24px;line-height:1.7}

/* İletişim formu */
.form-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start;scroll-margin-top:var(--header-h)}
.form-intro p{max-width:42ch;margin-top:16px}
.form-intro h3{margin-top:32px;font-size:1.0625rem;font-weight:600;letter-spacing:0}
.form-intro ul{margin-top:12px;padding-left:1.15em}
.form-intro li{padding:3px 0}
.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-wide,.form-footer{grid-column:1/-1}
.field label{color:var(--navy);font-size:.9375rem;font-weight:600}
.field label span{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--navy);font:inherit;font-size:1rem;transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{min-height:150px;line-height:1.55;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,112,179,.16)}
.field [aria-invalid="true"]{border-color:#b42318}
.field [aria-invalid="true"]:focus{border-color:#b42318;box-shadow:0 0 0 3px rgba(180,35,24,.14)}
.field-help{color:var(--muted);font-size:.875rem}
.field-error{color:#b42318;font-size:.875rem;font-weight:500}
.form-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.form-status{color:var(--muted);font-size:.9375rem}

/* Sık sorulanlar */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-list{border-top:1px solid var(--line-strong)}
.faq-list details{border-bottom:1px solid var(--line-strong)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;color:var(--navy);font-size:1.125rem;font-weight:500;line-height:1.4;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--navy);transition:transform .2s var(--ease-out)}
.faq-icon::after{transform:rotate(90deg)}
.faq-list details[open] .faq-icon::after{transform:rotate(0)}
.faq-list details p{max-width:62ch;padding:0 48px 24px 0}
.faq-list a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}

/* Kapanış bandı ve alt bilgi */
.cta-section{padding:0 var(--px) clamp(56px,7vw,96px)}
.section-pale+.cta-section{padding-top:clamp(56px,7vw,96px)}
.cta-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px 56px;padding:clamp(36px,5vw,64px);border-radius:24px;background:var(--blue);color:#e6f0f9}
.cta-card h2{color:#fff}
.cta-card p{max-width:46ch;margin-top:14px}
.cta-card :focus-visible{outline-color:#fff}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cta-buttons{display:flex;flex-wrap:wrap;gap:12px}
.button-light{background:#fff;color:var(--navy)}
.cta-card .button-light{color:var(--blue-strong)}
.button-light:hover{background:#e3edf5}
.button-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.button-outline-light:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.cta-phone{font-size:.9375rem}
.cta-phone strong{color:#fff;font-weight:600}
.cta-phone:hover strong{text-decoration:underline;text-underline-offset:4px}
.footer{position:relative;isolation:isolate;overflow:hidden;padding:72px var(--px) 0;background:var(--navy-deep);color:#b8c7d6}
/* Giyimkent çevresinin sokak haritası, metin tarafında kaybolacak şekilde maskelenir. */
.footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/doku-giyimkent.svg") 70% 45%/cover no-repeat;opacity:.11;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 5%,#000 60%);mask-image:linear-gradient(90deg,transparent 5%,#000 60%)}
.footer :focus-visible{outline-color:#fff}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:40px}
.footer-brand img{width:130px;height:auto}
.footer-brand p{max-width:30ch;margin-top:18px;font-size:.9375rem}
.footer-col h2{margin-bottom:16px;color:#fff;font-size:.875rem;font-weight:600;letter-spacing:0}
.footer-col a,.footer-col address{display:block;margin-bottom:10px;font-size:.9375rem;line-height:1.6}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:56px;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.12);color:#8fa3b6;font-size:.875rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.footer-legal a{color:inherit}
.footer-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.made-by{display:inline-flex;align-items:center;gap:8px;letter-spacing:.025em;transition:color .18s ease}
.made-by:hover{color:#fff}
/* Logo maske olarak çizilir, böylece yazı rengini (currentColor) alır. */
.nimvola-logo{display:block;width:4.53rem;height:.9rem;background:currentColor;-webkit-mask:url("/assets/nimvola.svg") center/contain no-repeat;mask:url("/assets/nimvola.svg") center/contain no-repeat}

/* Tablet */
@media (max-width:1100px){
  .nav{gap:22px}
  .hero-copy{max-width:520px}
  .sector-grid,.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sector-card{min-height:400px}
  .product-info{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .cta-card{grid-template-columns:1fr}
}

/* Telefon */
@media (max-width:760px){
  :root{--header-h:66px}
  .logo img{width:118px}
  .menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff}
  .menu-toggle span{display:block;width:18px;height:1.5px;background:var(--navy);transition:transform .2s var(--ease-out)}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .nav{position:absolute;top:var(--header-h);left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(23,41,67,.08)}
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
  .nav .nav-contact{margin-top:18px;padding:14px 20px;border-bottom:0;text-align:center}

  .hero,.hero-home{flex-direction:column;align-items:stretch;min-height:0;padding:40px var(--gutter) 0}
  .hero::after{display:none}
  .hero-img{position:static;order:2;width:calc(100% + 2 * var(--gutter));max-width:none;height:auto;margin:36px calc(-1 * var(--gutter)) 0;aspect-ratio:4/3;object-position:95% center}
  .hero-copy p{font-size:1.0625rem}

  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .brand-strip{padding:32px var(--gutter) 40px}
  .brand-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
  .brand-row .medallion{width:88px;height:88px;padding:15px}
  .brand-row .medallion img{max-height:38px}
  .brand-row .medallion-brand img{height:50px;max-height:50px}

  .contact,.faq,.form-section,.history,.order-grid,.mv-grid,.value-list{grid-template-columns:1fr}
  .value-list{gap:20px;margin-top:32px}
  .career-card{flex-direction:column;align-items:flex-start}
  /* Yol haritası telefonda: kartlar alt alta; noktalar solda, aralarındaki çizgi sırayla uzar */
  .story-line{grid-template-columns:1fr;gap:20px;margin-top:40px;padding:0 0 0 44px}
  .story-line::before,.story-line::after{display:none}
  .story-dot{top:26px;left:-44px;margin-left:0}
  .story-line li::before{top:40px;left:-14px;width:14px;height:2px;margin-left:0;transform-origin:left}
  .story-line li:not(:last-child)::after{content:"";position:absolute;z-index:-1;top:56px;bottom:-46px;left:-30px;width:2px;background:linear-gradient(var(--blue),#9fcdee);transform-origin:top}
  .about-animate.is-armed:not(.is-visible) .story-line li::before{transform:scaleX(0)}
  .about-animate.is-visible .story-line li::before{animation-name:story-grow-x}
  .about-animate.is-visible .story-line li:not(:last-child)::after{animation:story-grow-y .7s var(--ease-in-out) calc(var(--at) + .25s) backwards}

  /* Sektörler yana kaydırılan şerit olur */
  .sector-grid{grid-template-columns:none;grid-auto-columns:82%;grid-auto-flow:column;gap:14px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .sector-grid::-webkit-scrollbar{display:none}
  .sector-card{min-height:420px;scroll-snap-align:start}

  .product-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-template-areas:"sarf sarf" "ekipman ekipman" "cam eldiven";gap:12px}
  .product-tile{min-height:220px;padding:10px}
  .tile-sarf{min-height:300px}
  .product-tile-label,.tile-sarf .product-tile-label{padding:12px 14px}
  .tile-sarf h3,.product-tile h3{font-size:1.0625rem}
  .tile-cam p,.tile-eldiven p{display:none}

  .brand-grid{grid-template-columns:1fr}
  .product-info{grid-template-columns:1fr}
  .product-info>img{height:auto;min-height:0;aspect-ratio:16/9}
  .product-info-body{min-height:0}
  .brand-card{padding:32px 24px 24px}
  .brand-card .medallion{width:124px;height:124px;padding:22px;margin-bottom:22px}
  .brand-card .medallion-brand img{height:78px;max-height:78px}
  .product-info-body{padding:24px}

  .cta-card{padding:32px 24px;border-radius:20px}
  .cta-buttons{flex-direction:column;align-self:stretch}
  .form-section,.contact-form{grid-template-columns:1fr}
  .contact-form{padding:22px}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .faq-list details p{padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button:active,.nav .nav-contact:active,.brand-row .medallion:active{transform:none}
  .product-tile img{transition:none}
}