/* Toran Elektronik · September 2026
   Shared design system. All visible text stays in HTML; no external fonts or UI libraries. */
:root {
  --ink: #202226;
  --text: #44484f;
  --muted: #5b6068;
  --red: #cb1825;
  --red-hover: #ac1320;
  --soft: #f6f6f5;
  --line: #e1e2e3;
  --dark: #1b1e23;
  --radius: 20px;
  --max: 1280px;
  --header: 86px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body, input, textarea, select, button { font-family: var(--font); }
button, input, select, textarea { font-size: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, summary { cursor: pointer; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ba1422; outline-offset: 5px; }
.hero :focus-visible, .footer :focus-visible, .selector :focus-visible, .process-shell :focus-visible { outline-color: #ffb4b9; }
::selection { background: #f8cbd0; color: #16191f; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; }
h1 { font-size: clamp(40px, 4vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.15; letter-spacing: -.035em; }
h3 { font-size: 23px; line-height: 1.25; letter-spacing: -.025em; }
p { color: var(--text); }
p + p { margin-top: 18px; }
ul, ol { padding-left: 23px; }
address { font-style: normal; }
.icon { width: 22px; height: 22px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.container { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
.section { padding-block: 88px; }
.section.alt, .alt { background: var(--soft); }
.section-tight { padding-top: 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 44px; margin-bottom: 36px; }
.section-head > div { min-width: 0; }
.section-head h2 { max-width: 24ch; }
.section-head > p { max-width: 40ch; font-size: 17px; line-height: 1.7; }
.kicker, .eyebrow, .svc-topline, .article-kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.lead { font-size: 19px; line-height: 1.75; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 10px; min-height: 52px; padding: 14px 20px; font-size: 16px; line-height: 1.3; font-weight: 650; transition: background .2s, border-color .2s, box-shadow .2s; }
.btn .icon { width: 19px; height: 19px; }
.btn-primary { color: #fff; background: var(--red); }
.btn-primary:hover { background: var(--red-hover); box-shadow: 0 6px 20px #ac132022; }
.btn-secondary { background: #fff; color: var(--ink); border-color: #cbd0d5; }
.btn-secondary:hover { border-color: var(--red); }
.btn-glass { color: #fff; border-color: #ffffff70; background: #ffffff0d; }
.btn-glass:hover { background: #ffffff1a; border-color: #fff; }
.text-link, .card-link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; color: var(--red); }
.text-link:hover, .card-link:hover { color: var(--red-hover); }
.text-link .icon, .card-link .icon { width: 19px; height: 19px; transition: transform .2s; }
a:hover .card-link .icon, .text-link:hover .icon { transform: translateX(3px); }
.skip { position: fixed; top: -100px; left: 16px; padding: 12px 18px; z-index: 1000; background: #fff; box-shadow: 0 8px 30px #0003; border-radius: 8px; }
.skip:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Header and fully operable service menu */
.header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid #0000000d; }
.header.scrolled { box-shadow: 0 4px 24px #00000009; }
.nav { height: var(--header); display: flex; align-items: center; gap: 28px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; flex-shrink: 0; }
.brand img { width: 45px; height: 45px; border-radius: 12px; }
.brand > span { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; white-space: nowrap; }
.brand small { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .12em; font-weight: 650; color: #53585e; }
.navlinks { display: flex; align-items: center; gap: 23px; }
.navlinks > a, .dropbtn { display: inline-flex; align-items: center; gap: 5px; padding: 30px 0; border: 0; background: transparent; font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.dropbtn .icon { width: 15px; height: 15px; transition: transform .2s; }
.dropbtn[aria-expanded=true] .icon { transform: rotate(180deg); }
.navlinks > a:hover, .navlinks > a[aria-current], .dropbtn:hover, .dropbtn[data-current] { color: var(--red); }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% - 3px); left: -165px; width: 635px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 52px #11182724; }
.dropdown-menu > a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 10px; }
.dropdown-menu > a:hover, .dropdown-menu > a[aria-current] { background: #f9f0f1; color: var(--red); }
.nav-service-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--red); background: #faf0f1; border-radius: 10px; flex-shrink: 0; }
.dropdown-menu b { font-size: 15px; font-weight: 650; display: block; }
.dropdown-menu small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.dropdown-menu .menu-all { color: var(--red); font-size: 15px; font-weight: 650; justify-content: space-between; }
.phone-btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; white-space: nowrap; background: var(--red); color: #fff; font-size: 15px; font-weight: 650; padding: 12px 16px; border-radius: 10px; }
.phone-btn:hover { background: var(--red-hover); }
.phone-btn .icon { width: 18px; height: 18px; }
.menu-btn { display: none; background: #fff; width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line); padding: 10px; }

/* A single translucent hero system across ALL pages. Image/video stays outside the card. */
.hero { position: relative; display: flex; align-items: center; isolation: isolate; min-height: clamp(660px, 76svh, 780px); background: #20252b; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0b101729, #0b101703 75%); }
.hero-inner { position: relative; display: flex; align-items: center; padding-block: 66px 82px; }
.hero-card { width: min(600px, 50%); padding: 36px; border-radius: 22px; border: 1px solid #ffffff33; background: linear-gradient(135deg, rgba(18, 23, 31, .56), rgba(18, 23, 31, .38)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 20px 55px #050a111f; }
.hero-card h1 { color: #fff; font-size: clamp(40px, 3.7vw, 56px); line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.hero-card > p { color: #f1f2f4; font-size: 18px; line-height: 1.7; margin-top: 22px; max-width: 50ch; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; color: #fff; font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.hero-eyebrow::before { content: ""; display: block; width: 25px; height: 2px; background: #ff7d85; flex-shrink: 0; }
.hero-card .actions { margin-top: 28px; gap: 10px; }
.hero-card .btn { padding-inline: 17px; font-size: 15px; }
.breadcrumbs { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; color: #ecedef; font-size: 13px; line-height: 1.5; }
.breadcrumbs a { text-underline-offset: 3px; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; }
.hero--compact { min-height: 570px; }
.hero--compact .hero-inner { padding-block: 58px; }
.hero--compact .hero-card { width: min(630px, 55%); }
.hero--compact .hero-card h1 { font-size: clamp(38px, 3.45vw, 52px); }
.hero--home .hero-card { width: min(600px, 51%); }
.hero--home .hero-card h1 { font-size: clamp(42px, 3.45vw, 54px); }
.video-toggle { position: absolute; right: 0; bottom: 28px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid #ffffff75; border-radius: 100px; color: #fff; background: #151a21b3; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; }
.video-toggle:hover { background: #151a21e6; }
.video-toggle .icon { width: 17px; height: 17px; }
.info-wrap { position: relative; z-index: 2; margin-top: -24px; }
.info-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 35px #1b1e230a; }
.info-item { display: flex; align-items: center; gap: 14px; padding: 22px 28px; position: relative; }
.info-item + .info-item::before { content: ""; position: absolute; left: 0; width: 1px; height: 40px; background: var(--line); }
.info-icon { color: var(--red); display: flex; }
.info-icon .icon { width: 25px; height: 25px; }
.info-item b { display: block; font-size: 16px; line-height: 1.4; font-weight: 650; }
.info-item small { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* Seven services + a contact card: a complete two-row desktop grid. */
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.svc-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; min-width: 0; transition: border-color .2s, box-shadow .2s, transform .2s; }
.svc-card:hover { border-color: #c9ccd0; box-shadow: 0 10px 32px #20222610; transform: translateY(-3px); }
.svc-link { display: flex; flex-direction: column; height: 100%; }
.svc-media { position: relative; aspect-ratio: 4 / 3; background: #f2f3f4; overflow: hidden; }
.svc-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.svc-link:hover .svc-media > img { transform: scale(1.025); }
.svc-image-icon { position: absolute; left: 16px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: #171b22cc; border: 1px solid #ffffff66; }
.svc-image-icon .icon { width: 20px; height: 20px; }
.svc-body { display: flex; flex-direction: column; flex: 1; padding: 24px 22px; }
.svc-body .svc-topline { font-size: 12px; letter-spacing: .075em; margin-bottom: 12px; }
.svc-body h3 { font-size: 22px; min-height: 56px; }
.svc-body p { font-size: 16px; line-height: 1.65; margin-top: 12px; margin-bottom: 24px; }
.svc-body .card-link { margin-top: auto; font-size: 15px; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); }
.svc-support { display: flex; flex-direction: column; padding: 28px 25px; background: var(--dark); border-color: var(--dark); color: #fff; }
.support-symbol { display: grid; place-items: center; color: #fff; width: 52px; height: 52px; border: 1px solid #ffffff38; border-radius: 50%; margin-bottom: 26px; }
.support-symbol .icon { width: 26px; height: 26px; }
.svc-support .svc-topline { color: #ffc6cb; font-size: 12px; }
.svc-support h3 { font-size: 43px; line-height: 1.1; color: #fff; }
.svc-support p { color: #e7e8eb; font-size: 16px; margin-block: 18px 30px; }
.support-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 20px; border-top: 1px solid #ffffff33; font-size: 16px; font-weight: 650; margin-top: auto; }
.support-phone { margin-top: 12px; color: #e6e7ea; font-size: 15px; }
.svc-support:hover { border-color: #565c66; }

/* Real photography: natural proportions, no cropped shop or portrait photographs. */
.home-gallery-section { background: var(--soft); }
.home-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.home-gallery-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.home-gallery-card--wide { grid-column: 1 / -1; }
.home-gallery-media { background: #e9eaec; }
.home-gallery-media img { width: 100%; height: auto; object-fit: contain; }
.home-gallery-body { padding: 24px; }
.home-gallery-body h3 { font-size: 24px; }
.home-gallery-card--wide .home-gallery-body { text-align: center; }
.owner-profile-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 76px; align-items: center; }
.owner-profile-media { width: 100%; max-width: 440px; border-radius: 22px; overflow: hidden; background: #f3f3f2; }
.owner-profile-media img { width: 100%; height: auto; }
.owner-profile-copy h2 { margin-bottom: 24px; }
.owner-profile-copy > p { margin-bottom: 24px; }
.owner-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); padding-block: 24px; gap: 18px; margin-top: 28px; }
.owner-trust-row b { font-size: 17px; line-height: 1.45; display: block; }
.owner-trust-row span { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 5px; }
.home-owner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.owner-profile-note { padding: 18px 0; border-top: 1px solid var(--line); }
.owner-profile-note b, .owner-profile-note span { display: block; }
.owner-profile-note span { font-size: 15px; color: var(--muted); }
.owner-brand-signature { display: none; }
.toran-galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.tg-oge { padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; text-align: left; }
.tg-oge img { width: 100%; height: auto; transition: opacity .2s; }
.tg-oge:hover img { opacity: .9; }
.tg-etiket { display: block; font-size: 15px; line-height: 1.5; padding: 14px 16px; color: var(--text); }
.tg-dialog { width: min(1180px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 48px 54px 18px; border: 0; border-radius: 16px; background: #171b22; color: #fff; overflow: auto; }
.tg-dialog::backdrop { background: #080b11dd; }
.tg-dialog figure { display: grid; justify-items: center; }
.tg-dialog figure img { max-height: calc(100svh - 160px); width: auto; max-width: 100%; object-fit: contain; }
.tg-dialog figcaption { font-size: 15px; padding-top: 14px; text-align: center; color: #f1f2f3; }
.tg-dialog button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff40; background: #20252dee; color: #fff; border-radius: 50%; }
.tg-kapat { top: 7px; right: 7px; }
.tg-onceki { left: 6px; top: 45%; }
.tg-sonraki { right: 6px; top: 45%; }
.tg-onceki .icon { transform: rotate(180deg); }

/* Home diagnostic selector */
.diagnostic-section { background: var(--dark); color: #fff; }
.diagnostic-section h2, .diagnostic-section h3 { color: #fff; }
.diagnostic-section .kicker { color: #ffbbc1; }
.selector { display: grid; grid-template-columns: 265px minmax(0, 1fr); border: 1px solid #ffffff26; border-radius: 20px; overflow: hidden; }
.selector > * { min-width: 0; }
.selector-nav { display: flex; flex-direction: column; padding: 12px; background: #12151a; gap: 5px; }
.selector-btn { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #edeef0; font-size: 15px; font-weight: 550; padding: 15px 12px; min-height: 54px; }
.selector-btn .icon { width: 21px; height: 21px; }
.selector-btn.active { background: #fff; color: #202226; }
.selector-btn:not(.active):hover { background: #ffffff0d; }
.selector-content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 30px; height: 100%; }
.selector-copy h3 { font-size: 30px; margin-bottom: 18px; }
.selector-copy p { color: #eeeff1; font-size: 17px; }
.selector-copy ul { color: #e4e6e9; font-size: 16px; line-height: 1.8; padding-left: 20px; margin-block: 20px 25px; }
.selector-copy li::marker { color: #ff9aa4; }
.selector-image { border-radius: 14px; overflow: hidden; background: #242931; }
.selector-image img { width: 100%; height: auto; }

/* Service pages */
.scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.scope-card { padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.scope-no { display: inline-block; font-size: 14px; color: var(--red); font-weight: 650; padding-bottom: 24px; }
.scope-card h3 { font-size: 22px; min-height: 54px; margin-bottom: 14px; }
.scope-card p { font-size: 16px; line-height: 1.75; }
.product-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.product-tags span { padding: 8px 15px; border-radius: 100px; border: 1px solid #dadde1; font-size: 15px; color: #414650; background: #f8f8f8; }
.service-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 66px; align-items: center; }
.service-feature-media { border-radius: 20px; overflow: hidden; background: #eceeed; }
.service-feature-media img { width: 100%; height: auto; }
.service-feature-copy h2 { margin-bottom: 24px; max-width: 20ch; }
.service-feature-copy .lead { font-size: 18px; }
.service-feature-copy .text-link { margin-top: 28px; }

.process-shell { padding: 46px; border-radius: 22px; background: var(--dark); color: #fff; }
.process-shell h2, .process-shell h3 { color: #fff; }
.process-shell .kicker { color: #ffc2c8; }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.process-item { border-top: 1px solid #ffffff30; padding-top: 26px; }
.process-num { display: block; font-size: 14px; color: #f3b7bd; margin-bottom: 22px; }
.process-item h3 { font-size: 23px; margin-bottom: 14px; }
.process-item p { color: #e3e5e8; font-size: 16px; line-height: 1.7; }
.issue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.issue-card { border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.issue-card > .icon { color: var(--red); margin-bottom: 22px; width: 26px; height: 26px; }
.issue-card h3 { margin-bottom: 12px; }
.issue-card p { font-size: 16px; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.faq-layout > div:first-child p { margin-block: 22px; }
.faq-layout > div:first-child .text-link { margin-top: 24px; }
.faq-list { border-top: 1px solid #cbd0d3; }
.faq { border-bottom: 1px solid #cbd0d3; }
.faq summary { display: flex; gap: 22px; align-items: center; justify-content: space-between; list-style: none; padding: 23px 0; font-size: 18px; line-height: 1.5; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { flex: 0 0 26px; text-align: center; font-size: 24px; color: var(--red); font-weight: 400; transition: transform .15s; }
.faq[open] summary > span { transform: rotate(45deg); }
.faq[open] summary { color: var(--red); }
.faq .ans { padding: 0 35px 24px 0; }
.faq .ans p { font-size: 17px; line-height: 1.75; }
.related-section { padding-bottom: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.related-grid > a { display: flex; align-items: center; gap: 14px; padding: 23px; border: 1px solid var(--line); border-radius: 14px; font-size: 17px; font-weight: 600; }
.related-grid > a .icon:first-child { color: var(--red); }
.related-grid > a .icon:last-child { margin-left: auto; width: 18px; }
.related-grid > a:hover { border-color: #b8bbc0; background: var(--soft); }

/* About and shared editorial layouts */
.editorial-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.editorial-copy p { font-size: 18px; line-height: 1.8; }
.editorial-copy .lead { font-weight: 550; }
.expertise-list { border-top: 1px solid #d5d8dc; }
.expertise-list a { display: flex; gap: 18px; align-items: center; border-bottom: 1px solid #d5d8dc; padding-block: 19px; }
.expertise-list a > span { color: var(--red); font-size: 13px; }
.expertise-list b { font-size: 19px; font-weight: 600; }
.expertise-list .icon { margin-left: auto; }
.expertise-list a:hover { color: var(--red); }
.editorial-label { display: flex; align-items: center; gap: 12px; color: var(--red); font-size: 14px; }

/* Contact: readable form, direct WhatsApp action, no data collection by the site. */
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 85px; align-items: start; }
.contact-info h2 { margin-bottom: 32px; }
.contact-big-phone { display: block; font-size: clamp(28px, 2.7vw, 39px); line-height: 1.3; font-weight: 650; letter-spacing: -.035em; }
.contact-info > p { color: var(--muted); font-size: 15px; margin-top: 7px; }
.address-block { display: flex; gap: 17px; padding-block: 32px; margin-block: 28px; border-block: 1px solid var(--line); }
.address-block > .icon { color: var(--red); margin-top: 4px; }
.address-block h3 { font-size: 21px; margin-bottom: 12px; }
.address-block address { color: var(--text); font-size: 17px; line-height: 1.8; max-width: 30ch; }
.address-block .text-link { margin-top: 18px; }
.contact-panel { padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); }
.contact-panel h2 { font-size: 31px; line-height: 1.25; margin-bottom: 28px; }
.contact-form { display: grid; gap: 22px; }
.field { display: grid; gap: 9px; }
.field label { font-size: 16px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; padding: 14px 15px; background: #fff; border: 1px solid #bfc4ca; border-radius: 9px; color: #242830; font-size: 17px; line-height: 1.5; }
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #646a73; }
.contact-submit { justify-self: start; }
.form-note { display: block; color: #535a63; font-size: 14px; line-height: 1.6; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.real-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.real-showcase-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.real-showcase-media img { width: 100%; height: auto; }
.real-showcase-body { padding: 22px; }
.real-showcase-body h3 { font-size: 22px; }
.contact-gallery-section { background: var(--soft); }

/* Knowledge cards and long-form reading */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.article-card .article-media { margin: 0; overflow: hidden; }
.article-media img { width: 100%; height: auto; }
.article-card > :not(.article-media) { margin-inline: 24px; }
.article-card > .kicker, .article-card > .article-kicker, .article-card > .tag { margin-top: 22px; }
.article-card h3 { font-size: 23px; margin-top: 22px; margin-bottom: 16px; }
.article-card p { font-size: 16px; margin-bottom: 20px; }
.article-card .card-link { margin-block: auto 25px; padding-top: 20px; }
.tag { display: inline-block; font-size: 14px; color: var(--red); font-weight: 600; }
.featured-guide { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; align-items: center; }
.featured-guide-media img { width: 100%; height: auto; }
.featured-guide-copy { padding: 38px; }
.featured-guide-copy h3 { font-size: 32px; margin-bottom: 20px; }
.featured-guide-copy > p { font-size: 18px; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--muted); margin-block: 24px; }
.guide-meta span { border-left: 2px solid #d9bcc1; padding-left: 9px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.knowledge-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.knowledge-card-media img { width: 100%; height: auto; }
.knowledge-card-body { padding: 30px; }
.knowledge-card-body h3 { font-size: 28px; margin-bottom: 18px; }
.knowledge-card-body p { font-size: 17px; margin-bottom: 25px; }
.quick-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.quick-answer { border: 1px solid var(--line); padding: 26px; border-radius: 16px; }
.quick-answer b { display: block; font-size: 19px; line-height: 1.45; margin-bottom: 12px; }
.quick-answer p { font-size: 17px; }
.guide-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 70px; align-items: start; }
.guide-toc { position: sticky; top: 112px; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.guide-toc > span { display: block; font-size: 14px; font-weight: 700; color: var(--red); margin-bottom: 15px; }
.guide-toc > a { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; padding: 10px 0; }
.guide-toc > a > span { color: var(--muted); font-size: 13px; }
.guide-toc > a:hover, .guide-toc > a.active { color: var(--red); }
.guide-help { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 21px; font-size: 15px; }
.guide-help b { font-size: 17px; }
.guide-help p { font-size: 15px; margin-block: 10px 15px; }
.guide-help a { color: var(--red); font-weight: 600; }
.guide-article { min-width: 0; max-width: 880px; }
.guide-section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 20px; padding-block: 34px; border-bottom: 1px solid var(--line); }
.guide-section:first-child { padding-top: 0; }
.guide-section-no { font-size: 16px; color: var(--red); font-weight: 650; padding-top: 4px; }
.guide-section h2 { font-size: 30px; letter-spacing: -.025em; line-height: 1.25; margin-bottom: 22px; }
.guide-section p, .guide-article > p { font-size: 18px; line-height: 1.85; }
.guide-article > div > h2 { font-size: 30px; margin-block: 36px 24px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.detail-card { padding: 24px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; }
.detail-card b { display: block; font-size: 18px; margin-bottom: 12px; line-height: 1.5; }
.detail-card span { display: block; color: var(--text); font-size: 17px; line-height: 1.75; }
.inline-note { margin-block: 28px; padding: 22px 25px; border-left: 3px solid var(--red); background: var(--soft); font-size: 17px; line-height: 1.75; color: var(--text); }
.inline-note b, .inline-note strong { color: var(--ink); }
.guide-end { padding: 30px; background: var(--soft); border-radius: 18px; margin-top: 38px; }
.guide-end h2 { font-size: 30px; margin-bottom: 18px; }
.guide-end p { font-size: 18px; margin-bottom: 24px; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 65px; align-items: start; }
.legal-nav { position: sticky; top: 110px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.legal-nav a:hover { color: var(--red); }
.legal-prose { max-width: 850px; min-width: 0; }
.legal-prose h2 { font-size: 29px; line-height: 1.3; margin-block: 34px 18px; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p, .legal-prose li { font-size: 18px; line-height: 1.8; }
.legal-note { border-left: 3px solid var(--red); background: var(--soft); padding: 22px; font-size: 16px; margin-top: 28px; }
.notfound-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.notfound-links a { padding: 22px; border: 1px solid var(--line); border-radius: 14px; font-size: 17px; }
.notfound-links a:hover { border-color: var(--red); color: var(--red); }

/* Final contact invitation and footer */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 45px; background: #f6f3f3; border: 1px solid #e4dbdd; border-radius: 22px; padding: 46px; }
.cta h2 { max-width: 23ch; }
.cta p { margin-top: 20px; max-width: 54ch; font-size: 18px; }
.cta > .actions { flex-shrink: 0; flex-direction: column; gap: 16px; }
.cta-phone { display: inline-flex; gap: 10px; align-items: center; font-size: 18px; font-weight: 600; }
.cta-phone .icon { width: 18px; height: 18px; }
.footer { background: #191c21; color: #e2e4e7; padding-block: 64px 24px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr .95fr 1.1fr; gap: 46px; }
.footer .brand > span { font-size: 15px; color: #fff; }
.footer .brand small { color: #d0d3d8; font-size: 8px; }
.footer .brand img { width: 42px; height: 42px; }
.footer h2 { font-size: 16px; color: #fff; margin-bottom: 25px; letter-spacing: 0; }
.footer p { color: #d4d7dc; font-size: 15px; line-height: 1.8; margin-block: 24px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 15px; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.socials { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.socials a { display: inline-flex; gap: 5px; align-items: center; }
.socials .icon { width: 15px; height: 15px; }
.footer-phone { display: block; color: #fff; font-size: 22px; font-weight: 650; line-height: 1.3; margin-bottom: 22px; white-space: nowrap; }
.footer address { font-size: 15px; line-height: 1.8; }
.footer .text-link { color: #f4b4bd; font-size: 14px; margin-top: 20px; }
.copy { border-top: 1px solid #ffffff26; margin-top: 52px; padding-top: 23px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 13px; line-height: 1.7; color: #c1c5cc; }
.copy-divider { margin-inline: 12px; }
.mobile-quick-contact { display: none; }

/* Tablet. Break the service grid into two columns before text becomes cramped. */
@media (max-width: 1180px) {
  .nav { gap: 18px; }
  .navlinks { gap: 18px; }
  .navlinks > a, .dropbtn { font-size: 14px; }
  .brand > span { font-size: 15px; }
  .phone-btn { font-size: 14px; padding-inline: 13px; }
  .service-grid, .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-body h3 { min-height: 0; }
  .scope-card h3 { min-height: 0; }
  .svc-support { min-height: 430px; }
  .selector { grid-template-columns: 245px minmax(0, 1fr); }
  .selector-content { grid-template-columns: 1fr; }
  .selector-image { display: none; }
  .owner-profile-grid { gap: 48px; }
  .service-feature { gap: 42px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px; }
}
@media (max-width: 1080px) {
  :root { --header: 76px; }
  .container { width: min(calc(100% - 48px), var(--max)); }
  .nav { gap: 12px; }
  .brand { order: 1; }
  .phone-btn { order: 2; margin-left: auto; }
  .menu-btn { display: inline-grid; place-items: center; order: 3; }
  .navlinks { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 16px; max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: 0 0 16px 16px; box-shadow: 0 25px 45px #0002; z-index: 5; }
  .nav.open .navlinks { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .navlinks > a, .dropbtn { font-size: 16px; width: 100%; padding: 15px 12px; }
  .dropbtn { justify-content: space-between; }
  .dropdown-menu { position: static; width: 100%; box-shadow: none; padding: 8px; border-radius: 12px; background: #f7f7f7; }
  .dropdown-menu > a { padding: 12px 8px; }
  .dropdown-menu small { font-size: 13px; }
  .hero-card, .hero--home .hero-card { width: min(570px, 64%); padding: 30px; }
  .hero--compact .hero-card { width: min(620px, 67%); }
  .hero-card h1 { font-size: 46px; }
  .hero--home .hero-card h1 { font-size: 48px; }
  .hero-card > p { font-size: 18px; }
  .info-item { padding: 20px; }
  .info-item b { font-size: 15px; }
  .info-item small { font-size: 14px; }
  .owner-trust-row { grid-template-columns: 1fr; gap: 15px; }
  .owner-trust-row > div { display: flex; gap: 12px; align-items: baseline; }
  .owner-trust-row span { margin-top: 0; }
  .editorial-split, .contact-layout { gap: 42px; }
  .article-grid { gap: 18px; }
  .article-card > :not(.article-media) { margin-inline: 20px; }
  .article-card h3 { font-size: 21px; }
  .featured-guide-copy { padding: 28px; }
  .featured-guide-copy h3 { font-size: 28px; }
  .guide-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 36px; }
  .faq-layout { gap: 40px; }
  .cta { padding: 36px; gap: 32px; }
  .contact-big-phone { font-size: 30px; }
}
@media (max-width: 800px) {
  .section { padding-block: 64px; }
  .section-tight { padding-top: 0; }
  .section-head { display: block; margin-bottom: 28px; }
  .section-head > p { margin-top: 20px; max-width: 58ch; }
  .hero-card .actions { flex-direction: column; align-items: stretch; }
  .hero-card .btn { font-size: 16px; }
  .info-item { gap: 10px; padding: 18px 14px; }
  .info-icon { display: none; }
  .owner-profile-grid, .service-feature, .editorial-split, .contact-layout { grid-template-columns: 1fr; gap: 35px; }
  .owner-profile-media { margin-inline: auto; max-width: 430px; }
  .owner-trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .owner-trust-row > div { display: block; }
  .owner-trust-row span { margin-top: 5px; }
  .service-feature-media { max-width: 600px; }
  .service-feature-copy h2 { max-width: 23ch; }
  .process-shell { padding: 32px; }
  .process-grid { grid-template-columns: 1fr; gap: 26px; }
  .process-item { display: grid; grid-template-columns: 38px 1fr; column-gap: 15px; }
  .process-num { grid-row: span 2; margin: 0; padding-top: 4px; }
  .process-item h3 { font-size: 22px; }
  .issue-grid { gap: 14px; }
  .issue-card { padding: 22px; }
  .issue-card h3 { font-size: 21px; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-layout h2 br { display: none; }
  .related-grid { grid-template-columns: 1fr; gap: 12px; }
  .related-section { padding-bottom: 0; }
  .selector { grid-template-columns: 1fr; }
  .selector-nav { flex-direction: row; overflow-x: auto; scrollbar-width: thin; padding: 12px; max-width: 100%; gap: 8px; }
  .selector-btn { white-space: nowrap; flex: 0 0 auto; }
  .selector-content { grid-template-columns: 1fr 1fr; padding: 28px; }
  .selector-image { display: block; }
  .selector-copy h3 { font-size: 28px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: start; padding-bottom: 20px; }
  .article-card .article-media { grid-column: 1; grid-row: span 5; margin: 0; align-self: stretch; }
  .article-card .article-media img { object-fit: cover; width: 100%; height: 100%; }
  .article-card > :not(.article-media) { grid-column: 2; margin-inline: 24px; }
  .article-card h3 { margin-top: 22px; }
  .article-card .card-link { margin-bottom: 0; }
  .featured-guide { grid-template-columns: 1fr; }
  .featured-guide-media { max-height: none; }
  .knowledge-card-body { padding: 24px; }
  .knowledge-card-body h3 { font-size: 25px; }
  .guide-layout, .legal-layout { grid-template-columns: 1fr; gap: 35px; }
  .guide-toc, .legal-nav { position: static; }
  .guide-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .guide-toc > span { grid-column: 1 / -1; }
  .guide-help { display: none; }
  .guide-section p, .legal-prose p { font-size: 18px; }
  .cta { align-items: flex-start; flex-direction: column; }
  .cta > .actions { align-items: flex-start; }
  .toran-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: allow the copy to grow; no line clamping, clipping or fixed text heights. */
@media (max-width: 600px) {
  :root { --header: 72px; }
  body { font-size: 16px; }
  .container { width: calc(100% - 36px); }
  .section { padding-block: 52px; }
  .section-tight { padding-top: 0; }
  h2 { font-size: 32px; line-height: 1.18; }
  h3 { font-size: 22px; }
  .lead { font-size: 17px; line-height: 1.75; }
  .kicker { font-size: 12px; letter-spacing: .08em; }
  .section-head > p { font-size: 17px; }
  .brand { gap: 9px; }
  .brand img { width: 38px; height: 38px; border-radius: 10px; }
  .brand > span { font-size: 13px; }
  .brand small { font-size: 7px; letter-spacing: .09em; }
  .nav { gap: 8px; }
  .phone-btn { padding: 10px; min-height: 42px; width: 42px; }
  .phone-btn > span { display: none; }
  .menu-btn { width: 42px; height: 42px; padding: 9px; }
  .dropdown-menu { grid-template-columns: 1fr; }
  .dropdown-menu b { font-size: 16px; }
  .dropdown-menu small { font-size: 14px; }
  .hero, .hero--compact { min-height: 0; }
  .hero-inner, .hero--compact .hero-inner { padding-block: 225px 60px; display: block; }
  .hero-media img, .hero-media video { object-position: 70% center; }
  .hero-media::after { background: linear-gradient(180deg, #080c1000 20%, #080c101a 50%, #080c1052); }
  .hero[data-hero=intercom-diafon] .hero-media img { object-position: 82% center; }
  .hero[data-hero=hakkimizda] .hero-media img { object-position: 72% center; }
  .hero[data-hero=bilgisayar-teknik-servis] .hero-media img { object-position: 82% center; }
  .hero-card, .hero--home .hero-card, .hero--compact .hero-card { width: 100%; padding: 25px 23px; border-radius: 18px; background: linear-gradient(135deg, rgba(18, 23, 31, .60), rgba(18, 23, 31, .44)); }
  .hero-card h1, .hero--home .hero-card h1, .hero--compact .hero-card h1 { font-size: clamp(32px, 8.5vw, 43px); line-height: 1.13; letter-spacing: -.035em; }
  .hero-card > p { font-size: 17px; line-height: 1.7; margin-top: 18px; }
  .hero-eyebrow { font-size: 11px; margin-bottom: 16px; letter-spacing: .06em; gap: 9px; }
  .hero-eyebrow::before { width: 20px; }
  .breadcrumbs { font-size: 12px; gap: 7px; margin-bottom: 18px; }
  .hero-card .actions { margin-top: 24px; gap: 10px; }
  .hero-card .btn { min-height: 50px; padding: 13px 14px; font-size: 15px; }
  .hero--home .hero-inner { padding-bottom: 86px; }
  .video-toggle { bottom: 30px; min-height: 42px; }
  .info-wrap { margin-top: -18px; }
  .info-rail { grid-template-columns: 1fr; border-radius: 14px; }
  .info-item { padding: 15px 20px; gap: 14px; }
  .info-icon { display: flex; }
  .info-item b { font-size: 15px; }
  .info-item small { font-size: 14px; margin-top: 2px; }
  .info-item + .info-item::before { top: 0; left: 20px; right: 20px; height: 1px; width: auto; }
  .service-grid { grid-template-columns: 1fr; gap: 22px; }
  .svc-media { aspect-ratio: 4 / 3; }
  .svc-body { padding: 23px; }
  .svc-body .svc-topline { font-size: 12px; }
  .svc-body h3 { font-size: 25px; min-height: 0; }
  .svc-body p { font-size: 17px; margin-bottom: 24px; }
  .svc-body .card-link { font-size: 16px; }
  .svc-support { min-height: 370px; padding: 28px; }
  .svc-support h3 { font-size: 44px; }
  .svc-support p { font-size: 17px; }
  .scope-grid { grid-template-columns: 1fr; gap: 16px; }
  .scope-card { padding: 25px; }
  .scope-no { padding-bottom: 18px; }
  .scope-card h3 { font-size: 24px; }
  .scope-card p { font-size: 17px; }
  .product-tags { gap: 8px; }
  .product-tags span { font-size: 14px; padding: 8px 12px; }
  .home-gallery { grid-template-columns: 1fr; gap: 20px; }
  .home-gallery-card--wide { grid-column: auto; }
  .home-gallery-body { padding: 21px; }
  .home-gallery-body h3 { font-size: 22px; }
  .owner-profile-grid { gap: 28px; }
  .owner-profile-media { max-width: 400px; }
  .owner-profile-copy h2 { margin-bottom: 19px; }
  .owner-trust-row { grid-template-columns: 1fr; padding-block: 19px; gap: 16px; }
  .owner-trust-row > div { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
  .owner-trust-row b { font-size: 16px; }
  .owner-trust-row span { text-align: right; font-size: 14px; margin: 0; }
  .home-owner-actions .btn { font-size: 15px; padding-inline: 16px; }
  .selector { border-radius: 15px; }
  .selector-nav { padding: 10px; }
  .selector-btn { min-height: 50px; font-size: 15px; padding: 12px 14px; }
  .selector-content { grid-template-columns: 1fr; gap: 28px; padding: 24px 22px; }
  .selector-image { display: block; order: -1; }
  .selector-copy h3 { font-size: 28px; }
  .selector-copy p, .selector-copy ul { font-size: 17px; }
  .selector-copy .btn { width: 100%; }
  .service-feature { gap: 30px; }
  .service-feature-copy .lead { font-size: 17px; }
  .process-shell { padding: 28px 23px; border-radius: 17px; }
  .process-shell h2 { font-size: 30px; }
  .process-grid { gap: 25px; }
  .process-item { grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; }
  .process-item h3 { font-size: 21px; }
  .process-item p { font-size: 16px; }
  .issue-grid { grid-template-columns: 1fr; gap: 15px; }
  .issue-card { padding: 25px; }
  .issue-card > .icon { margin-bottom: 16px; }
  .issue-card h3 { font-size: 23px; }
  .issue-card p { font-size: 17px; }
  .faq summary { font-size: 17px; gap: 16px; padding-block: 21px; }
  .faq .ans { padding-right: 12px; }
  .faq .ans p { font-size: 17px; }
  .related-section { padding-bottom: 0; }
  .related-grid > a { font-size: 16px; padding: 20px; }
  .toran-galeri { grid-template-columns: 1fr; gap: 22px; }
  .tg-etiket { font-size: 15px; }
  .tg-dialog { padding: 54px 8px 16px; width: calc(100% - 16px); }
  .tg-dialog figure img { max-height: calc(100svh - 155px); }
  .tg-dialog .tg-onceki, .tg-dialog .tg-sonraki { top: auto; bottom: 8px; }
  .tg-dialog figcaption { padding-inline: 48px; min-height: 44px; font-size: 13px; }
  .editorial-copy p { font-size: 17px; }
  .expertise-list b { font-size: 18px; }
  .contact-panel { padding: 25px 22px; }
  .contact-panel h2 { font-size: 28px; }
  .contact-big-phone { font-size: 32px; }
  .field label { font-size: 16px; }
  .contact-submit { width: 100%; }
  .real-showcase-grid { grid-template-columns: 1fr; }
  .real-showcase-body h3 { font-size: 23px; }
  .article-grid { gap: 22px; }
  .article-card { display: flex; padding-bottom: 0; }
  .article-card .article-media img { height: auto; object-fit: contain; }
  .article-card > :not(.article-media) { margin-inline: 24px; }
  .article-card h3 { font-size: 25px; margin-top: 20px; }
  .article-card p { font-size: 17px; }
  .article-card .card-link { margin-bottom: 24px; }
  .featured-guide-copy, .knowledge-card-body { padding: 25px 23px; }
  .featured-guide-copy h3, .knowledge-card-body h3 { font-size: 27px; }
  .featured-guide-copy p { font-size: 17px; }
  .knowledge-grid, .quick-answer-grid { grid-template-columns: 1fr; }
  .quick-answer b { font-size: 19px; }
  .guide-toc { padding: 20px; grid-template-columns: 1fr; }
  .guide-toc > a { font-size: 16px; }
  .guide-section { grid-template-columns: 1fr; gap: 10px; padding-block: 30px; }
  .guide-section-no { font-size: 14px; }
  .guide-section h2 { font-size: 27px; }
  .guide-section p, .guide-article > p { font-size: 18px; line-height: 1.8; }
  .detail-grid { grid-template-columns: 1fr; gap: 16px; }
  .detail-card { padding: 23px; }
  .guide-end { padding: 24px; }
  .guide-end h2 { font-size: 28px; }
  .legal-prose h2 { font-size: 26px; }
  .legal-prose p, .legal-prose li { font-size: 17px; }
  .notfound-links { grid-template-columns: 1fr; }
  .cta { padding: 28px 24px; border-radius: 18px; gap: 28px; }
  .cta h2 { font-size: 30px; }
  .cta p { font-size: 17px; }
  .cta > .actions, .cta .btn { width: 100%; }
  .cta > .actions { align-items: center; }
  .footer { padding-block: 48px 92px; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }
  .footer .brand > span { font-size: 16px; }
  .footer .brand small { font-size: 8px; }
  .footer .brand img { width: 44px; height: 44px; }
  .footer h2 { margin-bottom: 20px; font-size: 17px; }
  .footer p, .footer ul, .footer address { font-size: 16px; }
  .footer ul { gap: 13px; }
  .footer-phone { font-size: 25px; }
  .footer .text-link, .socials { font-size: 15px; }
  .copy { margin-top: 35px; padding-top: 22px; flex-direction: column; gap: 10px; font-size: 13px; }
  .mobile-quick-contact { position: fixed; inset: auto 12px 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: 1fr 1fr; border-radius: 13px; box-shadow: 0 5px 24px #0003; overflow: hidden; background: var(--dark); color: #fff; border: 1px solid #ffffff2b; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .2s, transform .2s, visibility .2s; }
  .mobile-quick-contact.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-quick-contact a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; min-height: 52px; font-size: 15px; font-weight: 600; }
  .mobile-quick-contact a + a { background: var(--red); }
  .mobile-quick-contact .icon { width: 20px; height: 20px; }
}
@media (max-width: 359px) {
  .container { width: calc(100% - 28px); }
  .brand > span { font-size: 12px; }
  .brand small { font-size: 6.5px; }
  .brand img { width: 33px; height: 33px; }
  .phone-btn { display: none; }
  .menu-btn { margin-left: auto; }
  .hero-card, .hero--home .hero-card, .hero--compact .hero-card { padding: 23px 19px; }
  .hero-card h1, .hero--home .hero-card h1, .hero--compact .hero-card h1 { font-size: 31px; }
  .contact-big-phone { font-size: 28px; }
  .owner-trust-row > div { display: block; }
  .owner-trust-row span { text-align: left; }
}
/* The content, native FAQs and core links remain usable without JavaScript. */
html:not(.js) .dropdown:hover .dropdown-menu,
html:not(.js) .dropdown:focus-within .dropdown-menu { display: grid !important; }
html:not(.js) .video-toggle { display: none; }
@media (max-width: 1080px) {
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .nav { height: auto; min-height: var(--header); padding-block: 15px; flex-wrap: wrap; }
  html:not(.js) .navlinks { display: flex; position: static; width: 100%; order: 4; box-shadow: none; flex-wrap: wrap; border: 0; max-height: none; padding: 0; }
  html:not(.js) .navlinks > a { width: auto; font-size: 14px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .svc-card:hover, .svc-link:hover .svc-media > img, a:hover .card-link .icon { transform: none; }
}
@media print {
  .header, .footer, .mobile-quick-contact, .video-toggle, .hero-media, .guide-toc { display: none !important; }
  .hero { min-height: 0; background: #fff; }
  .hero-inner { padding: 20px 0; }
  .hero-card { width: 100% !important; background: #fff; color: #111; border: 1px solid #ccc; box-shadow: none; }
  .hero-card h1, .hero-card p, .hero-eyebrow, .breadcrumbs { color: #111; }
  .section { padding-block: 24px; }
  .guide-layout { display: block; }
}

/* 2026-09-20 / v3 — restored content, progressive motion, editorial gallery. */
:root { --ease-out: cubic-bezier(.22,1,.36,1); }
.header { transition: box-shadow .3s, background .3s; }
.header.scrolled { background: #ffffffed; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header::after { content: ''; position: absolute; bottom: -1px; left: 0; height: 2px; width: var(--scroll,0%); background: var(--red); pointer-events: none; }
.service-subnav { position: sticky; top: var(--header); z-index: 40; margin-top: 30px; border-block: 1px solid #e7e7e7; background: #fffffff2; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.service-subnav .container { display: flex; gap: 27px; align-items: center; min-height: 64px; overflow-x: auto; scrollbar-width: none; }
.service-subnav .container::-webkit-scrollbar { display: none; }
.service-subnav a { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; gap: 10px; min-height: 64px; font-size: 14px; font-weight: 600; white-space: nowrap; color: #555b63; }
.service-subnav a::after { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.service-subnav a:hover, .service-subnav a.active { color: var(--red); }
.service-subnav a.active::after { transform: scaleX(1); }
.service-subnav .subnav-contact { margin-left: auto; color: var(--red); }
.service-page main > section[id] { scroll-margin-top: 70px; }
.service-feature { align-items: start; }
.service-feature-media { max-height: 600px; }
.service-feature-media img { max-height: 600px; object-fit: cover; object-position: center 35%; }
.service-feature-copy { align-self: center; }
.service-feature-copy p { font-size: 18px; line-height: 1.8; }
.service-feature-copy p + p { margin-top: 18px; }
.service-feature-copy .lead { font-weight: 500; }
.scope-card h3 { min-height: 0; }
.scope-card p, .issue-card p { font-size: 17px; }
.service-knowledge-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.knowledge-side { position: sticky; top: calc(var(--header) + 95px); }
.knowledge-side h2 { max-width: 16ch; }
.knowledge-side .text-link { margin-top: 30px; font-size: 16px; max-width: 30ch; line-height: 1.55; }
.service-prose-block { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 20px; padding-block: 32px; border-top: 1px solid var(--line); }
.service-prose-block:first-child { padding-top: 0; border-top: 0; }
.service-prose-block:last-child { padding-bottom: 0; }
.prose-no { color: var(--red); font-size: 13px; font-weight: 650; padding-top: 6px; font-variant-numeric: tabular-nums; }
.service-prose-block h3 { font-size: 25px; margin-bottom: 16px; letter-spacing: -.025em; }
.service-prose-block p { font-size: 18px; line-height: 1.8; }
.service-prose-block p + p { margin-top: 14px; }
.usecase-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 34px; }
.usecase { position: relative; padding-top: 22px; border-top: 1px solid #cdced0; }
.usecase-index { display: block; margin-bottom: 24px; color: var(--red); font-size: 13px; font-weight: 650; }
.usecase h3 { font-size: 22px; margin-bottom: 16px; }
.usecase p { font-size: 17px; line-height: 1.8; }
.usecase::before { content: ''; position: absolute; top: -1px; left: 0; height: 2px; background: var(--red); width: 40px; transition: width .5s var(--ease-out); }
.usecase:hover::before { width: 100%; }
.service-page .process-shell { position: relative; overflow: hidden; }
.service-page .process-shell::before { content: ''; position: absolute; top: 0; left: 46px; width: 60px; height: 3px; background: #e55260; }
.process-item p { font-size: 17px; line-height: 1.8; }
.intake-section { padding-block: 70px 10px; }
.intake-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 65px; border-block: 1px solid var(--line); padding-block: 45px; }
.intake-panel h2 { font-size: 36px; margin-bottom: 20px; }
.intake-panel p { font-size: 17px; line-height: 1.8; }
.intake-list { border-left: 1px solid var(--line); padding-left: 45px; }
.intake-list h3 { font-size: 21px; }
.intake-list ul { margin: 18px 0 24px; font-size: 17px; color: var(--text); display: grid; gap: 9px; }
.intake-list li::marker { color: var(--red); }
.home-approach .text-link { margin-top: 24px; }
.home-process { padding-top: 0; }
.local-presence { background: #f8f8f7; }
.local-presence-panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 85px; }
.local-presence-panel h2 { max-width: 20ch; }
.local-presence-panel p { font-size: 18px; line-height: 1.8; }
.local-presence-panel .text-link { margin-top: 25px; }
.principles-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.principle { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.principle h3 { font-size: 23px; margin-bottom: 18px; }
.principle p { font-size: 17px; line-height: 1.8; }
.editorial-split > div > h2 + .lead { margin-top: 26px; font-size: 18px; line-height: 1.8; max-width: 38ch; }
.contact-context { margin-bottom: 28px; }
.contact-context p { font-size: 17px; line-height: 1.8; color: var(--text); }
.quick-answer .text-link { margin-top: 20px; }
.knowledge-context { padding-top: 65px; }

/* Photographs stay photographs: no visible captions or descriptive overlays. */
.home-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.home-gallery-card--wide { grid-column: auto; }
.home-gallery-card, .real-showcase-card { border: 0; position: relative; }
.home-gallery-media, .real-showcase-media { height: 100%; }
.home-gallery-media img { width: 100%; height: 270px; object-fit: cover; object-position: 50% 44%; }
.home-gallery-card--wide img { object-position: 50% 35%; }
.real-showcase-media img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 40%; }
.gallery-actions { display: flex; justify-content: flex-end; margin-top: 25px; }
.photo-link { display: block; position: relative; overflow: hidden; cursor: zoom-in; }
.photo-link img { transition: transform .9s var(--ease-out); }
.photo-link:hover img { transform: scale(1.035); }
.photo-expand { position: absolute; right: 17px; bottom: 17px; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #191e26a8; border: 1px solid #ffffff55; border-radius: 50%; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; translate: 0 8px; transition: opacity .3s,translate .3s; pointer-events: none; }
.photo-expand .icon { width: 18px; height: 18px; }
.photo-link:hover .photo-expand, .photo-link:focus-visible .photo-expand, .tg-oge:hover .photo-expand, .tg-oge:focus-visible .photo-expand { opacity: 1; translate: 0 0; }
.toran-galeri-section { background: #fff; }
.toran-galeri { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-auto-rows: clamp(180px,18vw,260px); gap: 18px; align-items: stretch; }
.tg-oge { display: block; position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 0; border-radius: 18px; background: #e9e9e7; text-align: left; cursor: zoom-in; }
.tg-oge:first-child { grid-row: span 2; }
.tg-oge img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s var(--ease-out),filter .5s; }
.tg-oge:first-child img { object-position: 50% 40%; }
.tg-oge:hover img { transform: scale(1.035); }
.tg-oge:focus-visible { outline-offset: 5px; }
.gallery-total { display: inline-grid; place-items: center; font-size: 12px; line-height: 1; width: 25px; height: 25px; border: 1px solid #d1d4d8; border-radius: 50%; color: var(--muted); }

/* Full-screen gallery: native modal, no image captions, keyboard and touch navigation. */
.tg-dialog { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; background: #11151a; color: #fff; overflow: hidden; }
.tg-dialog[open] { display: grid; grid-template-rows: 76px minmax(0,1fr) 98px; }
.tg-dialog::backdrop { background: #0b0e12e6; }
.viewer-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; gap: 20px; border-bottom: 1px solid #ffffff12; }
.viewer-brand { font-size: 14px; font-weight: 700; letter-spacing: .07em; }
.viewer-count { font-size: 14px; color: #d1d6df; font-variant-numeric: tabular-nums; margin-left: auto; }
.tg-dialog .tg-kapat, .tg-dialog .tg-onceki, .tg-dialog .tg-sonraki { display: grid; place-items: center; position: static; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff3b; border-radius: 50%; color: #fff; background: #202732; font-size: 25px; line-height: 1; cursor: pointer; transform: none; }
.tg-dialog button:hover { background: #354053; }
.tg-dialog :focus-visible { outline-color: #fff; outline-offset: 4px; }
.viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 86px; min-height: 0; overflow: hidden; touch-action: pan-y; }
.tg-dialog .viewer-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 45px #0004; user-select: none; -webkit-user-drag: none; }
.tg-dialog .tg-onceki, .tg-dialog .tg-sonraki { position: absolute; top: calc(50% - 22px); z-index: 2; }
.tg-dialog .tg-onceki { left: 24px; }
.tg-dialog .tg-sonraki { right: 24px; }
.viewer-thumbs { display: flex; justify-content: flex-start; align-items: center; gap: 9px; overflow-x: auto; padding: 12px max(20px,calc((100vw - 1230px)/2)); scrollbar-width: thin; scrollbar-color: #4a515d #15191f; border-top: 1px solid #ffffff12; }
.tg-dialog .viewer-thumb { position: static; display: block; flex: 0 0 66px; width: 66px; height: 58px; padding: 3px; background: none; border: 1px solid transparent; border-radius: 7px; opacity: .55; transition: opacity .2s,border-color .2s; }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.viewer-thumb[aria-current=true] { border-color: #fff; opacity: 1; }
.viewer-thumb:hover { opacity: 1; }

/* Motion is additive. With JS absent, failed, or reduced, every piece of content is visible. */
.reveal { opacity: 1; translate: 0 0; }
.motion-enabled .reveal { transition: opacity .7s var(--ease-out), translate .85s var(--ease-out); transition-delay: var(--reveal-delay,0ms); }
.motion-enabled .reveal.motion-pending { opacity: 0; translate: 0 28px; }
.motion-enabled .reveal.in { opacity: 1; translate: 0 0; }
[data-tilt] { position: relative; isolation: isolate; transform-style: preserve-3d; }
[data-tilt]::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(400px circle at var(--cx,50%) var(--cy,50%),#d3314012,transparent 66%); opacity: 0; transition: opacity .35s; }
[data-tilt]:hover::after { opacity: 1; }
.motion-enabled [data-tilt].tilt-ready { transform: perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition: box-shadow .35s,border-color .35s,opacity .7s var(--ease-out),translate .85s var(--ease-out); transition-delay: 0s,0s,var(--reveal-delay,0ms),var(--reveal-delay,0ms); }
.motion-enabled [data-tilt].tilt-ready:hover { box-shadow: 0 22px 44px #1c253316; border-color: #c9b3b7; }
[data-magnetic] { position: relative; }
.btn-primary .icon { transition: translate .25s var(--ease-out); }
.btn-primary:hover .icon { translate: 3px 0; }
.navlinks > a { position: relative; }
.navlinks > a::after { content: ''; height: 2px; position: absolute; bottom: 18px; left: 0; right: 0; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.navlinks > a:hover::after, .navlinks > a[aria-current]::after { transform: scaleX(1); }

@media (min-width: 901px) { html:not(.js) .toran-galeri .tg-oge:last-child { grid-column: 1 / -1; } }
@media (max-width: 1080px) {
 .service-knowledge-layout { gap: 50px; grid-template-columns: .8fr 1.2fr; }
 .principles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .usecase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
 .service-subnav .container { gap: 25px; }
 .home-gallery-media img { height: 270px; }
 .local-presence-panel { gap: 45px; }
 .navlinks > a::after { display: none; }
}
@media (max-width: 900px) {
 .service-knowledge-layout { grid-template-columns: 1fr; gap: 35px; }
 .knowledge-side { position: static; }
 .knowledge-side h2 { max-width: 23ch; }
 .knowledge-side .text-link { margin-top: 20px; max-width: none; }
 .service-feature-media, .service-feature-media img { max-height: 480px; }
 .intake-panel { gap: 35px; }
 .intake-list { padding-left: 28px; }
 .local-presence-panel { grid-template-columns: 1fr; gap: 30px; }
 .home-gallery { grid-template-columns: 1fr 1fr; }
 .home-gallery-card--wide { grid-column: 1 / -1; }
 .home-gallery-card--wide img { height: 310px; }
 .home-gallery-media img { height: 240px; }
 .toran-galeri { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; gap: 15px; }
 .service-subnav .container { min-height: 57px; }
 .service-subnav a { min-height: 57px; }
}
@media (max-width: 600px) {
 .service-subnav { margin-top: 22px; }
 .service-subnav .container { gap: 22px; width: 100%; padding-inline: 22px; }
 .service-subnav a { font-size: 13px; min-height: 54px; }
 .service-subnav .subnav-contact { display: none; }
 .service-feature-copy p, .service-prose-block p { font-size: 17px; line-height: 1.85; }
 .service-feature-media, .service-feature-media img { max-height: 410px; }
 .service-prose-block { grid-template-columns: 25px minmax(0,1fr); gap: 12px; padding-block: 27px; }
 .service-prose-block h3 { font-size: 23px; }
 .usecase-grid { grid-template-columns: 1fr; gap: 28px; }
 .usecase-index { margin-bottom: 16px; }
 .usecase h3 { font-size: 23px; margin-bottom: 12px; }
 .intake-section { padding-block: 45px 0; }
 .intake-panel { grid-template-columns: 1fr; gap: 27px; padding-block: 30px; }
 .intake-panel h2 { font-size: 30px; }
 .intake-list { border: 0; border-top: 1px solid var(--line); padding: 25px 0 0; }
 .principles-grid { grid-template-columns: 1fr; }
 .principle { padding: 25px; }
 .principle .scope-no { padding-bottom: 18px; }
 .local-presence-panel p { font-size: 17px; }
 .gallery-actions { justify-content: flex-start; }
 .home-gallery { gap: 12px; }
 .home-gallery-card { border-radius: 12px; }
 .home-gallery-card--wide img { height: 225px; object-position: center 30%; }
 .home-gallery-media img { height: 160px; }
 .real-showcase-grid { grid-template-columns: 1fr; gap: 15px; }
 .real-showcase-media img { height: 250px; }
 .toran-galeri-section .section-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 22px; }
 .toran-galeri-section h2 { max-width: 18ch; }
 .toran-galeri-section .btn { font-size: 14px; min-height: 45px; padding: 11px 14px; }
 .toran-galeri { grid-auto-rows: auto; gap: 12px; }
 .tg-oge { aspect-ratio: 4/3; border-radius: 12px; }
 .tg-oge:first-child { grid-column: 1/-1; grid-row: auto; aspect-ratio: 4/5; }
 .tg-oge img { height: 100%; }
 .photo-expand { width: 34px; height: 34px; right: 10px; bottom: 10px; opacity: 1; translate: 0 0; }
 .photo-expand .icon { width: 16px; height: 16px; }
 .tg-dialog[open] { grid-template-rows: 66px minmax(0,1fr) 86px; }
 .viewer-top { padding: 11px 16px; gap: 10px; }
 .viewer-brand { font-size: 11px; letter-spacing: .035em; }
 .viewer-count { font-size: 13px; }
 .viewer-stage { padding: 10px 10px 52px; }
 .tg-dialog .tg-kapat { width: 40px; height: 40px; font-size: 22px; }
 .tg-dialog .tg-onceki, .tg-dialog .tg-sonraki { top: auto; bottom: 0; width: 42px; height: 42px; }
 .tg-dialog .tg-onceki { left: calc(50% - 52px); }
 .tg-dialog .tg-sonraki { right: calc(50% - 52px); }
 .viewer-thumbs { gap: 7px; padding: 10px 16px; }
 .tg-dialog .viewer-thumb { width: 58px; flex-basis: 58px; height: 50px; }
 .motion-enabled .reveal.motion-pending { translate: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
 .reveal, .motion-enabled .reveal, .motion-enabled .reveal.motion-pending { opacity: 1 !important; translate: none !important; }
 [data-tilt], [data-magnetic], .motion-enabled .hero-media img, .motion-enabled .hero-media video, .tg-oge img, .photo-link img { transform: none !important; }
}
@media print {
 .service-subnav, .gallery-actions, [data-gallery-open], .photo-expand { display: none !important; }
 .reveal, .motion-enabled .reveal.motion-pending { opacity: 1 !important; translate: none !important; }
 .service-knowledge-layout, .local-presence-panel { display: block; }
 .knowledge-side { position: static; margin-bottom: 25px; }
}

.home-gallery-hidden { display: none !important; }

/* v5 · Mobile refinement. Content, card interactions and scroll reveals are retained. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.hero-media > picture { display: block; width: 100%; height: 100%; }
.hero-media img, .hero-media video { transform: none; }
.hero-card { background: linear-gradient(135deg,rgba(18,23,31,.52),rgba(18,23,31,.34)); }
.hero-card h1, .hero-card > p { text-shadow: 0 2px 12px #0005; }
.hero-card > p { color: #fafafa; }
.hero[data-hero="bilgisayar-teknik-servis"] .hero-media img { object-position: 75% 38%; }
.service-feature-media { max-width: none; max-height: none; align-self: center; }
.service-feature-media img { width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center; }
.service-feature { align-items: center; }
.process-visual-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: 42px; }
.process-visual { overflow: hidden; border-radius: 16px; margin: 0; }
.process-visual img { width: 100%; height: auto; object-fit: contain; }
.process-visual-layout .process-grid { grid-template-columns: 1fr; gap: 26px; }
.process-visual-layout .process-item { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 0 12px; }
.process-visual-layout .process-num { grid-row: span 2; margin: 0; padding-top: 3px; }
.process-visual-layout .process-item h3 { font-size: 22px; }
.process-visual-layout .process-item + .process-item { border-top: 1px solid #ffffff26; padding-top: 24px; }
.home-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.home-gallery-media, .home-gallery-media .photo-link { height: 100%; }
.home-gallery-media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center; }
.home-gallery-card:first-child img { object-position: center 32%; }
.gallery-actions { gap: 20px; }
.menu-backdrop { position: fixed; inset: var(--header) 0 0; z-index: 55; border: 0; background: #11182075; }
html.scroll-locked { scroll-behavior: auto; }
.navlinks, .selector-nav, .service-subnav .container, .viewer-thumbs { overscroll-behavior: contain; }
.selector-nav, .viewer-thumbs { touch-action: pan-x pinch-zoom; }
.viewer-stage { touch-action: pan-y pinch-zoom; }
.tg-dialog { padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }
.tg-dialog .tg-kapat, .tg-dialog .tg-onceki, .tg-dialog .tg-sonraki { width: 46px; height: 46px; flex-shrink: 0; }
.tg-dialog .viewer-count { white-space: nowrap; }

@media (max-width: 1080px) {
 .navlinks { max-height: calc(100dvh - var(--header) - 12px - env(safe-area-inset-bottom,0px)); scrollbar-width: thin; }
 .nav.open .navlinks { padding-bottom: max(16px,env(safe-area-inset-bottom,0px)); }
 .process-visual-layout { gap: 28px; }
 .dropdown-menu > a > span:last-child { min-width: 0; }
 .dropdown-menu b, .dropdown-menu small { overflow-wrap: anywhere; }
}
@media (max-width: 800px) {
 .service-feature { grid-template-columns: 1fr; }
 .service-feature-media { width: 100%; max-width: 640px; margin-inline: auto; }
 .service-feature-copy { width: 100%; }
 .process-visual-layout { grid-template-columns: 1fr; gap: 32px; }
 .process-visual { width: 100%; max-width: 640px; margin-inline: auto; }
 .process-visual-layout .process-grid { gap: 24px; }
 .home-gallery { gap: 14px; }
 .section-head > .btn { margin-top: 22px; }
 .toran-galeri-section .section-head > .btn { margin-top: 0; }
}
@media (max-width: 600px) {
 html { scroll-padding-top: calc(var(--header) + 14px); }
 .container { width: auto; margin-left: max(18px,env(safe-area-inset-left,0px)); margin-right: max(18px,env(safe-area-inset-right,0px)); }
 .header .nav { gap: 8px; }
 .header .brand { min-width: 0; flex-shrink: 1; }
 .header .brand > span { font-size: 13px; letter-spacing: -.02em; }
 .header .brand small { font-size: 7.5px; }
 .header .phone-btn, .header .menu-btn { width: 44px; height: 44px; min-height: 44px; flex-shrink: 0; }
 .navlinks { left: -2px; right: -2px; }
 .dropdown-menu { padding: 5px; }
 .dropdown-menu b { font-size: 15px; line-height: 1.4; }
 .dropdown-menu small { font-size: 13px; line-height: 1.45; }
 .dropdown-menu > a { min-height: 58px; gap: 10px; padding: 12px 8px; }
 .nav-service-icon { width: 34px; height: 34px; }
 /* A bounded photo above the copy shows the actual work, not a giant face crop.
    The glass card overlaps the bottom of the scene; the rest can grow naturally. */
 .hero, .hero--compact { --hero-scene: clamp(286px,81vw,410px); display: block; min-height: 0; background: #171c22; }
 .hero-media { height: var(--hero-scene); bottom: auto; }
 .hero-media picture, .hero-media img, .hero-media video { width: 100%; height: 100%; }
 .hero-media img, .hero-media video { object-fit: cover; object-position: center 35%; transform: none !important; }
 .hero[data-hero] .hero-media img { object-position: center 35%; }
 .hero--home .hero-media video { object-position: 64% 35%; }
 .hero-media::after { background: linear-gradient(180deg,transparent 60%,rgba(23,28,34,.12) 78%,#171c22 100%); }
 .hero-inner, .hero--compact .hero-inner { padding-block: calc(var(--hero-scene) - 42px) 40px; }
 .hero--home .hero-inner { padding-bottom: 40px; }
 .hero-card, .hero--home .hero-card, .hero--compact .hero-card { padding: 23px 22px; border-radius: 17px; border-color: #ffffff30; background: linear-gradient(135deg,rgba(18,23,31,.46),rgba(18,23,31,.26)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 14px 38px #070b1020; }
 .hero-card h1, .hero--home .hero-card h1, .hero--compact .hero-card h1 { font-size: clamp(31px,8.25vw,40px); line-height: 1.12; text-wrap: balance; }
 .hero-card > p { font-size: 17px; line-height: 1.7; margin-top: 17px; }
 .hero-eyebrow { font-size: 11px; line-height: 1.5; margin-bottom: 15px; }
 .breadcrumbs { font-size: 12px; gap: 6px; line-height: 1.6; margin-bottom: 17px; }
 .breadcrumbs a { padding-block: 3px; }
 .hero-card .actions { gap: 10px; margin-top: 24px; }
 .hero-card .btn { width: 100%; font-size: 15px; min-height: 50px; padding: 13px 12px; }
 .hero .video-toggle { bottom: auto; top: 14px; right: 0; height: 44px; min-height: 44px; font-size: 13px; padding: 10px 12px; background: #12171f99; }
 .info-wrap { margin-top: -18px; }
 .info-item { padding: 14px 18px; }
 .info-item small { color: #585e67; }
 .service-grid { gap: 20px; }
 .svc-media { aspect-ratio: 16/11; }
 .svc-body { padding: 22px; }
 .svc-body h3 { font-size: 25px; line-height: 1.23; }
 .svc-body p { font-size: 17px; line-height: 1.7; }
 .svc-support { min-height: 310px; }
 .scope-card { padding: 24px; }
 .service-feature { gap: 28px; }
 .service-feature-media { border-radius: 16px; max-height: none; }
 .service-feature-media img { height: auto; max-height: none; object-fit: contain; }
 .service-feature-copy p, .service-prose-block p { font-size: 17px; line-height: 1.8; }
 .service-feature-copy h2 { font-size: 31px; line-height: 1.18; }
 .service-feature-copy .text-link { line-height: 1.6; align-items: center; }
 .service-subnav .container { margin: 0; width: 100%; padding-inline: max(18px,env(safe-area-inset-left,0px)); gap: 24px; }
 .service-subnav a { font-size: 14px; min-height: 52px; }
 .service-subnav .container { min-height: 52px; scrollbar-width: thin; }
 .service-page main > section[id] { scroll-margin-top: 52px; }
 .selector-nav { gap: 7px; padding: 10px; scroll-padding: 10px; }
 .selector-btn { min-height: 48px; padding: 12px 13px; }
 .selector-content { padding: 21px; gap: 22px; }
 .selector-image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
 .home-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .home-gallery-media img { height: auto; aspect-ratio: 4/3; }
 .gallery-actions .btn { min-height: 48px; width: 100%; padding: 13px 12px; font-size: 15px; }
 .photo-expand { width: 32px; height: 32px; right: 8px; bottom: 8px; }
 .process-shell { padding: 26px 20px; }
 .process-visual-layout { gap: 27px; }
 .process-visual { border-radius: 12px; }
 .process-visual-layout .process-item { grid-template-columns: 25px minmax(0,1fr); gap: 0 10px; }
 .process-visual-layout .process-item h3 { font-size: 21px; line-height: 1.35; }
 .process-visual-layout .process-item p { font-size: 16px; line-height: 1.8; }
 .faq summary { min-height: 56px; font-size: 17px; line-height: 1.6; padding-block: 19px; }
 .faq summary > span { flex-shrink: 0; }
 .faq .ans { padding-right: 0; }
 .faq .ans p { font-size: 17px; }
 .contact-panel { padding: 24px 20px; }
 .field input, .field select, .field textarea { font-size: 17px; min-height: 50px; }
 .contact-submit { width: 100%; }
 .cta { padding: 28px 22px; }
 .cta > .actions { width: 100%; align-items: stretch; }
 .cta .btn { width: 100%; }
 .cta-phone { min-height: 44px; }
 .footer ul { gap: 0; }
 .footer ul a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; padding-block: 8px; }
 .socials a { min-height: 44px; align-items: center; }
 .mobile-quick-contact { bottom: max(10px,env(safe-area-inset-bottom,0px)); left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); z-index: 50; }
 .mobile-quick-contact a { min-height: 52px; font-size: 15px; }
 .tg-dialog[open] { grid-template-rows: 64px minmax(0,1fr) 84px; }
 .viewer-top { padding-inline: max(14px,env(safe-area-inset-left,0px)); }
 .viewer-brand { font-size: 11px; }
 .viewer-stage { padding: 10px 10px 56px; }
 .tg-dialog .tg-onceki { left: calc(50% - 53px); }
 .tg-dialog .tg-sonraki { right: calc(50% - 53px); }
 .viewer-thumbs { padding-inline: 14px; }
}
@media (max-width: 360px) {
 .container { margin-inline: max(14px,env(safe-area-inset-left,0px)); }
 .header .brand { gap: 7px; }
 .header .brand > span { font-size: 12px; }
 .header .brand small { font-size: 7px; letter-spacing: .045em; }
 .header .brand img { width: 34px; height: 34px; }
 .header .nav { gap: 6px; }
 .hero-card, .hero--home .hero-card, .hero--compact .hero-card { padding: 22px 18px; }
 .hero-card h1, .hero--home .hero-card h1, .hero--compact .hero-card h1 { font-size: 31px; }
 .hero-card > p { font-size: 16px; line-height: 1.75; }
 .hero-card .btn { font-size: 14px; }
 .home-gallery { gap: 10px; }
 .scope-card, .svc-body { padding: 22px 20px; }
 .viewer-top { gap: 8px; }
 .viewer-brand { font-size: 10px; letter-spacing: .02em; }
}
@media (max-height: 500px) and (orientation: landscape) {
 .service-subnav { position: static; }
 .mobile-quick-contact { display: none !important; }
 .tg-dialog[open] { grid-template-rows: 54px minmax(0,1fr) 66px; }
 .viewer-top { padding-block: 5px; }
 .viewer-stage { padding: 8px 70px; }
 .tg-dialog .tg-onceki, .tg-dialog .tg-sonraki { top: calc(50% - 23px); bottom: auto; }
 .tg-dialog .tg-onceki { left: 14px; }
 .tg-dialog .tg-sonraki { right: 14px; }
 .viewer-thumbs { padding-block: 7px; }
 .tg-dialog .viewer-thumb { height: 44px; flex-basis: 54px; }
}
@media (hover: none), (pointer: coarse) {
 [data-tilt] { transform: none !important; }
 [data-tilt]::after { display: none; }
 .photo-expand { opacity: 1; translate: none; }
}
@media print {
 .hero-media, .menu-backdrop { display: none !important; }
 .hero-inner, .hero--compact .hero-inner { padding-block: 16px; }
 .hero-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
 .process-visual-layout { display: block; }
 .process-visual { max-width: 420px; margin-bottom: 24px; }
}

/* Notch-aware header and navigation offsets. Env values are zero on regular screens. */
.header { padding-top: env(safe-area-inset-top,0px); }
.service-subnav { top: calc(var(--header) + env(safe-area-inset-top,0px)); }
.menu-backdrop { top: calc(var(--header) + env(safe-area-inset-top,0px)); }
@media (max-width:1080px) {
 .navlinks { max-height: calc(100dvh - var(--header) - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
}
@media (max-width:600px) {
 html { scroll-padding-top: calc(var(--header) + 14px + env(safe-area-inset-top,0px)); }
}

/* ═══ v5.1 · MOBİL KAYDIRMALI GALERİ ŞERİDİ ═══════════════════════════════
   Yalnız ≤600px. Masaüstü/tablet ızgarasına dokunulmaz.
   Ölçü kuralı: birinci kare tam görünür, ikincinin ~yarısı görünür kalır
   (kart 62vw · boşluk 12px · yan pay 18px → 390px'te 242px kart, 118px komşu). */
@media (max-width: 600px) {
  .home-gallery,
  .toran-galeri {
    --serit-bosluk: 12px;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--serit-bosluk);
    /* Kenardan taşırma YOK: şerit kabın içinde kalır. Kabın yan payı ekran
       genişliğine göre 14-18px arasında değiştiği için negatif pay sabitlenemez;
       sabitlenirse dar ekranda sayfa yatay taşar (320/360'ta 4px ölçüldü). */
    padding-block: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-gallery::-webkit-scrollbar,
  .toran-galeri::-webkit-scrollbar { width: 0; height: 0; display: none; }

  .home-gallery > .home-gallery-card,
  .toran-galeri > .tg-oge {
    /* 1. kare tam, 2. karenin yarısı görünür:  K = (kap - boşluk) / 1.5  */
    flex: 0 0 calc((100% - var(--serit-bosluk)) / 1.5);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 14px;
    overflow: hidden;
  }

  /* ızgaradan kalan kurallar şeritte geçersiz kılınır */
  .home-gallery > .home-gallery-card--wide,
  .toran-galeri > .tg-oge:first-child { grid-column: auto; grid-row: auto; }
  .toran-galeri > .tg-oge,
  .toran-galeri > .tg-oge:first-child { aspect-ratio: 4 / 3; height: auto; }
  .toran-galeri > .tg-oge img { height: 100%; }
  .home-gallery .home-gallery-media { height: 100%; }
  .home-gallery .home-gallery-media img,
  .home-gallery > .home-gallery-card--wide img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  }

  /* şeritte yatay olarak kadraj dışındaki kare "gizli" kalmasın */
  .home-gallery > .reveal,
  .toran-galeri > .reveal,
  .motion-enabled .home-gallery > .reveal.motion-pending,
  .motion-enabled .toran-galeri > .reveal.motion-pending { opacity: 1; translate: none; }

  /* kaydırma ilerleme çubuğu (JS üretir; JS yoksa hiç basılmaz) */
  .serit-ilerleme {
    height: 3px; margin-top: 15px; border-radius: 99px;
    background: var(--line); overflow: hidden;
  }
  .serit-ilerleme > i {
    display: block; height: 100%; border-radius: inherit;
    background: var(--red); width: 100%;
    transform-origin: left center;
    transition: transform .16s linear;
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .serit-ilerleme > i { transition: none; }
}
/* şerit dışı (masaüstü/tablet) ilerleme çubuğu görünmez */
@media (min-width: 601px) { .serit-ilerleme { display: none; } }

/* ═══ v5.1 · Çalışma saatleri ═════════════════════════════════════════════ */
.footer-saat { margin: 10px 0 14px; color: inherit; opacity: .85; font-size: 15px; line-height: 1.5; }
.footer-saat b { font-weight: 700; opacity: 1; }
.saat-satir { margin: 2px 0 4px; font-size: 17px; color: var(--ink); }
.saat-not { margin: 0; font-size: 15px; color: var(--muted); }

/* 23 Eyl 2026 — ana sayfadaki konum kartı: T "çok yukarda ve büyük olmuş" dedi.
   Kart footer'ın hemen üstüne kendi şeridine alındı ve genişliği sınırlandı;
   tam genişlikte harita çok geniş bir alanı gösterip mağazayı küçültüyordu. */
.konum-serit{ padding-top: 0; }
.konum-serit__kutu{ max-width: 720px; margin-inline: auto; }
@media (max-width: 760px){ .konum-serit__kutu{ max-width: none; } }