/* Tolu Petrol — Görsel tasarım güncellemesi */
:root{
  --red:#c6102e;
  --red-bright:#ef2349;
  --red-deep:#85051f;
  --ink:#171c22;
  --surface:#f6f7f9;
  --shadow-lg:0 28px 80px rgba(29,9,14,.16);
}

body{overflow-x:hidden}
.site-header{box-shadow:0 1px 0 rgba(18,23,28,.05)}
.site-header.scrolled{box-shadow:0 14px 45px rgba(17,22,27,.09)}
.header-inner{height:90px}
.brand img{width:66px;height:48px}
.main-nav>a{font-weight:720}

/* Hero */
.visual-hero{min-height:760px;background:#a60727}
.visual-hero.has-image:before{
  background:
    linear-gradient(90deg,rgba(116,1,25,.97) 0%,rgba(170,9,42,.91) 38%,rgba(128,5,31,.48) 66%,rgba(38,20,24,.17) 100%),
    var(--hero-image) center/cover no-repeat;
  transform:scale(1.01);
}
.visual-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(98,0,22,.28));
}
.visual-hero .hero-pattern{opacity:.24}
.visual-hero .hero-pattern:after{width:720px;height:720px;border-width:1px;right:-105px;top:-105px;box-shadow:0 0 0 84px rgba(255,255,255,.035),0 0 0 170px rgba(255,255,255,.022)}
.visual-hero .hero-grid{grid-template-columns:1.08fr .92fr;padding-block:108px 145px;position:relative;z-index:2}
.visual-hero .hero-content{max-width:690px}
.visual-hero h1{font-size:clamp(48px,5.5vw,76px);text-wrap:balance;text-shadow:0 8px 30px rgba(72,0,18,.18)}
.visual-hero p{max-width:610px;font-size:19px}
.hero-proof{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:34px;color:rgba(255,255,255,.88);font-size:12px;font-weight:750}
.hero-proof span{display:inline-flex;align-items:center;gap:7px}
.hero-proof .icon{width:17px;height:17px}
.hero-showcase{width:100%;max-width:500px;position:relative;margin-left:auto;padding:24px 0 50px}
.hero-showcase-frame{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.36);border-radius:32px;background:rgba(255,255,255,.12);padding:9px;box-shadow:0 35px 90px rgba(53,0,13,.34);transform:rotate(1.5deg)}
.hero-showcase-frame:before{content:"";position:absolute;inset:9px;border-radius:24px;background:linear-gradient(180deg,transparent 48%,rgba(27,11,15,.28));z-index:1;pointer-events:none}
.hero-showcase-frame img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:24px}
.hero-open-badge{position:absolute;top:26px;right:26px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);padding:9px 13px;border-radius:999px;font-size:11px;font-weight:850;display:flex;align-items:center;gap:7px;box-shadow:0 10px 30px rgba(31,11,16,.14)}
.hero-open-badge i{width:8px;height:8px;border-radius:50%;background:#16a05d;box-shadow:0 0 0 5px rgba(22,160,93,.12)}
.hero-showcase .hero-floating-card{left:-38px;bottom:4px;z-index:3;padding:17px 20px;border:1px solid rgba(198,16,46,.08)}
.hero-quality-card{position:absolute;right:-26px;bottom:34px;z-index:3;background:rgba(31,36,42,.94);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:17px;padding:14px 17px;display:flex;align-items:center;gap:12px;box-shadow:0 22px 50px rgba(22,4,8,.28);backdrop-filter:blur(12px)}
.hero-quality-card>.icon{color:#ff4162;width:29px;height:29px}
.hero-quality-card span{display:flex;flex-direction:column;line-height:1.25}
.hero-quality-card strong{font-size:12px}.hero-quality-card small{font-size:10px;color:rgba(255,255,255,.63);margin-top:3px}
.visual-hero .hero-wave{height:110px;bottom:-65px}

/* Stats */
.stats-grid{border:1px solid rgba(33,38,43,.05);box-shadow:0 20px 65px rgba(26,11,15,.13)}
.stat-card{padding:30px 24px}
.stat-card strong{font-size:37px;letter-spacing:-.035em}

/* About */
.about-section{position:relative}
.about-section:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--red-soft);left:-230px;top:80px;filter:blur(2px)}
.about-visual{height:510px;border-radius:32px;background:#f3f4f6;box-shadow:var(--shadow-lg);overflow:hidden}
.about-photo{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.about-visual:hover .about-photo{transform:scale(1.025)}
.about-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(25,8,12,.2));pointer-events:none}
.about-shape{display:none}
.about-badge{right:auto;left:24px;top:24px;z-index:2;min-width:170px}
.about-badge strong{font-size:34px;line-height:1}
.about-badge span{max-width:130px;line-height:1.35;margin-top:7px}
.about-icon{z-index:2;right:24px;bottom:24px;width:92px;height:92px;border-radius:24px;border:7px solid rgba(255,255,255,.78)}
.about-icon .icon{width:44px;height:44px}

/* Visual service cards */
.services-visual-section{position:relative;overflow:hidden}
.services-visual-section:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:110px solid rgba(198,16,46,.035);right:-220px;top:-240px}
.service-card{padding:0;min-height:410px;border-radius:24px;overflow:hidden;background:#fff}
.service-card-media{height:185px;position:relative;display:block;overflow:hidden;background:#eee}
.service-card-media:after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(26,7,11,.2));pointer-events:none}
.service-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-card:hover .service-card-media img{transform:scale(1.06)}
.service-card .service-icon{position:absolute;left:20px;bottom:18px;z-index:2;width:58px;height:58px;margin:0;background:#fff;color:var(--red);box-shadow:0 12px 30px rgba(41,8,15,.18)}
.service-card-body{padding:25px 25px 27px;display:flex;flex:1;flex-direction:column}
.service-card-body h3{font-size:21px;margin:0 0 10px}
.service-card-body p{color:var(--muted);font-size:14px;margin:0 0 22px}
.service-card-body>a{margin-top:auto;color:var(--red);font-weight:750;display:flex;align-items:center;gap:8px;font-size:14px}

/* Dark visual story */
.visual-story-section{padding:95px 0;background:linear-gradient(135deg,#181d23,#0e1216);color:#fff;position:relative;overflow:hidden}
.visual-story-section:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(198,16,46,.34),transparent 68%);right:-150px;top:-250px}
.visual-story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center;position:relative;z-index:1}
.visual-story-image{position:relative}
.visual-story-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:29px;border:1px solid rgba(255,255,255,.15);box-shadow:0 35px 90px rgba(0,0,0,.32)}
.visual-story-label{position:absolute;left:22px;bottom:-22px;background:#fff;color:var(--ink);padding:15px 20px;border-radius:15px;display:flex;align-items:center;gap:11px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.visual-story-label>span{width:30px;height:30px;background:var(--red);color:#fff;border-radius:50%;display:grid;place-items:center}
.visual-story-copy h2{font-size:clamp(35px,4vw,53px);line-height:1.12;letter-spacing:-.04em;margin:0 0 20px}
.visual-story-copy>p{color:rgba(255,255,255,.66);font-size:17px;margin:0}
.experience-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.experience-features div{padding:18px 14px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}
.experience-features strong{color:#ff4566;font-size:20px}.experience-features span{font-size:11px;color:rgba(255,255,255,.75);font-weight:700;margin-top:3px}

/* Network */
.network-showcase{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;background:linear-gradient(135deg,#bd0d2d,#79031c);color:#fff;border-radius:30px;overflow:hidden;margin-bottom:36px;box-shadow:0 30px 70px rgba(105,4,28,.2)}
.network-copy{padding:48px 20px 48px 48px}
.network-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#ffcad4}
.network-copy h3{font-size:clamp(28px,3vw,39px);line-height:1.17;letter-spacing:-.035em;margin:14px 0}
.network-copy p{color:rgba(255,255,255,.72);margin:0 0 26px;max-width:530px}
.network-art{align-self:stretch;min-height:390px;padding:24px 24px 24px 0}
.network-art img{width:100%;height:100%;object-fit:cover;border-radius:24px}

/* Station visual cards */
.station-grid{gap:24px}
.station-card{padding:0;min-height:460px;border-radius:24px;background:#fff}
.station-card:before{display:none}
.station-card-media{height:190px;position:relative;display:block;overflow:hidden;background:#f2d6dc}
.station-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(27,8,13,.42));pointer-events:none}
.station-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.station-card:hover .station-card-media img{transform:scale(1.055)}
.station-card-media .station-city{position:absolute;left:16px;bottom:15px;z-index:2;background:rgba(255,255,255,.94);padding:7px 10px;border-radius:8px;color:var(--red);box-shadow:0 6px 22px rgba(31,8,13,.12)}
.station-card-media .station-status{position:absolute;right:15px;top:15px;z-index:2;background:rgba(255,255,255,.93);display:flex;align-items:center;gap:6px;color:#117a43;box-shadow:0 7px 25px rgba(20,10,12,.11)}
.station-card-media .station-status i{width:7px;height:7px;border-radius:50%;background:#17a15b}
.station-card-body{padding:25px;display:flex;flex-direction:column;flex:1;position:relative}
.station-card .station-pin{position:absolute;right:22px;top:-24px;width:49px;height:49px;margin:0;border:5px solid #fff;border-radius:15px;box-shadow:0 12px 28px rgba(104,4,28,.19)}
.station-card h3{padding-right:45px;margin-top:3px;font-size:20px}
.station-card-body>p{color:var(--muted);font-size:14px;margin:0 0 16px}
.station-card .station-link{margin-top:auto}

/* News */
.news-card{border-radius:24px}
.news-image{height:220px;position:relative}
.news-image-label{position:absolute;left:16px;bottom:15px;background:rgba(255,255,255,.92);color:var(--red);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:7px}
.news-content{padding:26px}

/* Inner page hero images */
.page-hero{isolation:isolate;background:#9a0825}
.page-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(115,1,25,.97),rgba(174,10,43,.86) 52%,rgba(82,2,20,.48)),url('../img/hero-station.svg') center 56%/cover no-repeat}
.page-hero:after{z-index:-1}
.page-hero-services:before{background:linear-gradient(90deg,rgba(104,1,23,.97),rgba(173,10,42,.82),rgba(55,4,15,.45)),url('../img/service-fuel.svg') center/cover no-repeat}
.page-hero h1{text-shadow:0 7px 26px rgba(70,0,15,.22)}

/* Inner detail visuals */
.service-detail-visual{position:relative;border-radius:28px;box-shadow:var(--shadow-lg);background:#eee}
.service-detail-visual:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);pointer-events:none}
.service-detail-icon{position:absolute;right:22px;bottom:22px;width:68px;height:68px;border-radius:18px;background:#fff;color:var(--red);display:grid;place-items:center;box-shadow:0 16px 38px rgba(44,7,15,.22)}
.service-detail-icon .icon{width:34px;height:34px}
.station-detail-image{box-shadow:var(--shadow-lg);border:1px solid #fff}
.article-cover{min-height:330px;background:#f2d5db}
.aside-card{background:linear-gradient(145deg,#fafafa,#f0f1f3);border:1px solid #e7e9ec}
.contact-info{position:relative;padding-top:265px}
.contact-info:before{content:"";position:absolute;left:0;right:0;top:0;height:225px;border-radius:24px;background:url('../img/about-station.svg') center/cover no-repeat;box-shadow:0 20px 55px rgba(32,11,16,.12)}
.contact-form{background:#fff;border:1px solid #e8e9eb;box-shadow:0 24px 65px rgba(27,11,15,.09)}

/* Footer visual depth */
.footer-cta{position:relative;overflow:hidden;background:linear-gradient(115deg,#c6102e,#8e071f)}
.footer-cta:before{content:"";position:absolute;inset:0;background:url('../img/network-map.svg') 86% 42%/560px auto no-repeat;opacity:.13}
.footer-cta-inner{position:relative;z-index:1}
.site-footer{background:linear-gradient(145deg,#151a20,#0d1115)}

@media(max-width:1060px){
  .visual-hero .hero-grid{gap:35px}
  .hero-showcase .hero-floating-card{left:-10px}
  .hero-quality-card{right:-5px}
  .network-copy{padding:38px 15px 38px 38px}
  .service-card{min-height:400px}
}

@media(max-width:900px){
  .header-inner{height:84px}
  .visual-hero{min-height:700px}
  .visual-hero .hero-grid{grid-template-columns:1fr;padding-top:82px}
  .visual-hero .hero-content{max-width:760px}
  .visual-hero .hero-visual{display:none}
  .visual-hero.has-image:before{background:linear-gradient(90deg,rgba(119,1,26,.96),rgba(169,9,41,.88),rgba(102,3,27,.52)),var(--hero-image) 66% center/cover no-repeat}
  .about-visual{height:430px}
  .visual-story-grid{grid-template-columns:1fr;gap:65px}
  .visual-story-image{max-width:720px}
  .network-showcase{grid-template-columns:1fr}
  .network-copy{padding:42px 42px 18px}
  .network-art{padding:15px 28px 28px;min-height:320px}
  .contact-info{padding-top:290px}
  .contact-info:before{height:245px}
}

@media(max-width:680px){
  .header-inner{height:72px}
  .visual-hero{min-height:670px}
  .visual-hero .hero-grid{padding:75px 0 118px}
  .visual-hero h1{font-size:42px}
  .hero-proof{gap:10px 15px;margin-top:27px}
  .hero-proof span{font-size:11px}
  .stats-grid{border-radius:17px}
  .stat-card{padding:23px 10px}
  .about-visual{height:340px;border-radius:24px}
  .about-badge{left:15px;top:15px;padding:14px 16px;min-width:145px}
  .about-badge strong{font-size:28px}
  .about-icon{width:74px;height:74px;right:16px;bottom:16px;border-width:5px}
  .about-icon .icon{width:35px;height:35px}
  .service-card{min-height:auto}
  .service-card-media{height:205px}
  .visual-story-section{padding:75px 0 86px}
  .visual-story-grid{gap:55px}
  .visual-story-image img{border-radius:22px}
  .visual-story-label{left:14px;right:14px;bottom:-25px;justify-content:center}
  .visual-story-copy h2{font-size:35px}
  .experience-features{grid-template-columns:1fr;gap:8px}
  .experience-features div{flex-direction:row;align-items:center;gap:14px;padding:13px 15px}
  .experience-features span{margin:0}
  .network-showcase{border-radius:23px}
  .network-copy{padding:32px 24px 8px}
  .network-copy h3{font-size:29px}
  .network-art{min-height:255px;padding:16px}
  .network-art img{border-radius:17px}
  .station-card{min-height:445px}
  .station-card-media{height:195px}
  .page-hero:before{background-position:64% center}
  .contact-info{padding-top:235px}
  .contact-info:before{height:195px;border-radius:18px}
  .article-cover{min-height:230px}
}