/* /entegrasyonlar: page-scoped layout and lightweight SVG motion. */
.int-page { --int-mint: #afe9d6; --int-sky: #93dcf0; }
.int-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px,6vw,80px); padding: 12px 0 84px; }
.int-page .int-hero h1 { font-size: clamp(44px,5.6vw,76px); line-height: 1.12; }
.int-hero .mp-lead { font-size: 17px; max-width: 510px; }
.int-hub { position: relative; padding: 27px; border: 1px solid var(--mp-line); border-radius: 30px; background: radial-gradient(ellipse at 80% 48%,#23435680,transparent 65%),linear-gradient(145deg,#1d2d4b,#111d35); box-shadow: 0 32px 80px -55px #02091f; }
.int-hub__heading,.int-hub__foot { display: flex; justify-content: space-between; color: #a9bbd0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.int-hub__canvas { position: relative; height: 350px; margin: 20px 0; background-image: radial-gradient(#b0d8df18 1px,transparent 1px); background-size: 18px 18px; }
.int-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.int-wire { stroke: #7fb8cc40; stroke-width: 1; }
.int-stream { stroke: var(--int-mint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 94; }
.int-stream path { animation: int-data-flow 5s linear infinite; }
.int-stream path:nth-child(2) { animation-delay: -1s; }
.int-stream path:nth-child(3) { animation-delay: -3s; }
.int-stream path:nth-child(4) { animation-delay: -2s; }
.int-stream path:nth-child(5) { animation-delay: -4s; }
.int-hub__sources { position: absolute; left: 0; width: 37%; height: 100%; display: grid; grid-template-rows: repeat(5,1fr); align-items: center; }
.int-hub__sources > span { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; border: 1px solid #99c7df2b; border-radius: 11px; background: #1b2d48; color: #e0ebf5; font-size: 12px; }
.int-hub__sources small { font-size: 9px; color: var(--int-sky); }
.int-hub__core { position: absolute; right: 0; top: 50%; width: 36%; padding: 26px 14px 16px; transform: translateY(-50%); background: #f1f8fc; border-radius: 20px; text-align: center; box-shadow: 0 0 60px #94e1dd16; }
.int-hub__core img { display: block; width: 100%; height: auto; }
.int-hub__core > span { display: block; color: #557289; font-size: 9px; line-height: 1.6; margin-top: 14px; }
.int-hub__ports { display: flex; gap: 5px; justify-content: center; margin-top: 16px; }
.int-hub__ports i { width: 4px; height: 4px; background: #299b93; border-radius: 50%; }
.int-hub__foot { border-top: 1px solid var(--mp-line); padding-top: 19px; align-items: center; }
.int-hub__foot > span:last-child { font-size: 20px; color: var(--int-mint); }
.int-catalog { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 54px; align-items: start; }
.int-index { position: sticky; top: 120px; }
.int-page .int-index h2 { font-size: 33px; margin-bottom: 32px; }
.int-index nav { display: grid; border-top: 1px solid var(--mp-line); }
.int-index nav a { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--mp-line); padding: 18px 6px; color: #b9c4dd; font-size: 13px; transition: color .25s,background .25s,padding .25s; }
.int-index nav a > span:first-child { color: #8198b5; font-size: 10px; }
.int-index nav a > span:last-child { margin-left: auto; opacity: .35; }
.int-index nav a:hover,.int-index nav a[aria-current] { color: var(--int-mint); background: #9bddce09; padding-inline: 12px; }
.int-index nav a[aria-current] > span:last-child { opacity: 1; }
.int-index__contact { margin-top: 28px; }
.int-cards { display: grid; gap: 26px; min-width: 0; }
.int-card { --int-accent: #93dcf0; scroll-margin-top: 120px; padding: 30px; border: 1px solid var(--mp-line); border-radius: 26px; background: linear-gradient(130deg,#1a2c48,#131e38); }
.int-card--akaryakit,.int-card--mazot { --int-accent: #afe9d6; background: linear-gradient(130deg,#17313f,#131e38); }
.int-card--uetds { --int-accent: #c2c5fb; }
.int-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 34px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a4b9d0; }
.int-card__name { border: 1px solid var(--mp-line); border-radius: 30px; padding: 7px 11px; color: var(--int-accent); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.int-card__body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 25px; align-items: center; }
.int-page .int-card h3 { font-size: clamp(25px,2.35vw,32px); line-height: 1.22; margin: 0 0 18px; letter-spacing: -.04em; }
.int-card p { font-size: 14px; line-height: 1.85; margin-bottom: 22px; }
.int-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 27px; }
.int-tags li { font-size: 10px; padding: 6px 9px; color: #c9d7e5; border: 1px solid var(--mp-line); border-radius: 6px; }
.int-card .mp-textlink { color: var(--int-accent) !important; font-size: 12px; }
.int-visual { color: var(--int-accent); background: radial-gradient(ellipse,#80c9c610,transparent 72%); min-width: 0; }
.int-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.int-visual > span { display: block; text-align: center; font-size: 9px; color: #a1b6cc; line-height: 1.8; margin-top: 15px; }
.int-map-grid,.int-chart-grid { stroke: #90c6dc15; stroke-width: 1; }
.int-route-base { stroke: #83cce333; stroke-width: 3; }
.int-route { stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 12 88; stroke-linecap: round; animation: int-data-flow 4s linear infinite; }
.int-map-point { fill: currentColor; stroke: #193048; stroke-width: 3; }
.int-vehicle rect { fill: #244960; stroke: #93dcf080; }
.int-vehicle path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.int-gauge-track { stroke: #9de4d417; stroke-width: 13; }
.int-gauge { stroke: currentColor; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 72 100; transform: rotate(-90deg); transform-origin: 140px 107px; animation: int-gauge-fill 5s ease-in-out infinite alternate; }
.int-fuel-icon { stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.int-small-line { stroke: #98bfd657; stroke-width: 4; stroke-linecap: round; }
.int-paper rect { fill: #26334f; stroke: #c2c5fb66; }
.int-paper path { stroke: #c2c5fb80; stroke-width: 3; stroke-linecap: round; }
.int-paper--back rect { fill: #1c2845; stroke: #c2c5fb25; }
.int-confirm circle { fill: #273d53; stroke: #b1e8d3; }
.int-confirm path { stroke: #b1e8d3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.int-sea-route { stroke: #93dcf03b; stroke-dasharray: 3 6; }
.int-ship { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; fill: #22455b; }
.int-waves { stroke: #93dcf05c; stroke-width: 1.5; animation: int-wave-drift 4s ease-in-out infinite alternate; }
.int-bars rect { fill: #afe9d6aa; transform-box: fill-box; transform-origin: center bottom; animation: int-bar-rise 4s ease-in-out infinite alternate; }
.int-bars rect:nth-child(even) { fill: #78bfd4; animation-delay: -2s; }
.int-chart-trend { stroke: #afe9d6; stroke-width: 1.5; stroke-dasharray: 4 4; }
.int-documents { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.int-documents p { margin: 22px 0; }
.int-documents__links { border-top: 1px solid var(--mp-line); }
.int-documents__links a { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--mp-line); padding: 20px 10px; font-size: 21px; letter-spacing: -.03em; transition: padding .25s, color .25s, background .25s; }
.int-documents__links a > span:last-child { color: var(--int-mint); font-size: 18px; }
.int-documents__links a:hover { padding-inline: 20px; background: #9bddce09; color: var(--int-mint); }
.int-motion-paused *, .int-motion-paused *::before { animation-play-state: paused !important; }
@keyframes int-data-flow { to { stroke-dashoffset: -100; } }
@keyframes int-gauge-fill { from { stroke-dasharray: 54 100; } to { stroke-dasharray: 78 100; } }
@keyframes int-wave-drift { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes int-bar-rise { from { transform: scaleY(.75); } to { transform: scaleY(1); } }
@media (max-width: 1100px) {
    .int-catalog { grid-template-columns: 200px minmax(0,1fr); gap: 30px; }
    .int-card { padding: 26px; }
    .int-card__body { grid-template-columns: 1.2fr 1fr; gap: 16px; }
    .int-hub { padding: 22px; }
    .int-hub__sources > span { font-size: 11px; gap: 8px; padding-inline: 9px; }
}
@media (max-width: 900px) {
    .int-hero { grid-template-columns: 1fr; gap: 40px; }
    .int-hero .mp-lead { max-width: 600px; }
    .int-hub { width: min(100%,580px); justify-self: center; }
    .int-catalog { grid-template-columns: 1fr; gap: 35px; }
    .int-index { position: static; }
    .int-index nav { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
    .int-index nav a { border: 1px solid var(--mp-line); border-radius: 30px; padding: 12px 16px; gap: 9px; }
    .int-index nav a:hover,.int-index nav a[aria-current] { padding-inline: 16px; }
    .int-index nav a > span:last-child { display: none; }
    .int-index__contact { display: none; }
    .int-documents { gap: 36px; }
}
@media (max-width: 580px) {
    .int-hero { padding-bottom: 45px; }
    .int-page .int-hero h1 { font-size: clamp(40px,10.7vw,60px); }
    .int-hub { padding: 20px 16px; border-radius: 22px; }
    .int-hub__canvas { height: 310px; }
    .int-hub__sources { width: 40%; }
    .int-hub__sources > span { font-size: 10px; gap: 7px; min-height: 43px; }
    .int-hub__sources small { font-size: 8px; }
    .int-hub__core { width: 36%; padding: 22px 10px 15px; border-radius: 15px; }
    .int-hub__core > span { font-size: 8px; }
    .int-card { padding: 23px; border-radius: 22px; }
    .int-card__top { font-size: 9px; margin-bottom: 26px; }
    .int-card__body { grid-template-columns: 1fr; gap: 22px; }
    .int-page .int-card h3 { font-size: 30px; }
    .int-visual { width: min(100%,260px); justify-self: center; }
    .int-visual > span { margin-top: 0; }
    .int-documents { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .int-page *, .int-page *::before { animation: none !important; transition: none !important; }
    .int-route,.int-stream { stroke-dasharray: none; }
}
@media print { .int-index { position: static; } .int-page * { animation: none !important; } .int-card { break-inside: avoid; } }