/*
Theme Name: Metin Sevendik — BI & Data Consultant
Theme URI: https://metinsevindik.net/
Author: Metin Sevendik
Description: Modern, responsive WordPress theme for a BI & Data consulting personal brand.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: metinsevindik
*/

:root{
  --navy:#071426;
  --navy-2:#0b1f3d;
  --blue:#1677ff;
  --blue-2:#3d9bff;
  --ink:#172033;
  --muted:#64748b;
  --line:#e5eaf1;
  --soft:#f6f8fb;
  --white:#fff;
  --radius:18px;
  --shadow:0 12px 40px rgba(7,20,38,.09);
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:20px;top:20px;z-index:9999;background:#fff;padding:10px 14px}

.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(229,234,241,.9)
}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content; height: 100%;}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;font-weight:900;font-size:19px;color:var(--navy);letter-spacing:-2px}
.brand-text strong{display:block;font-size:15px;letter-spacing:.13em;line-height:1.1}
.brand-text span{display:block;font-size:9px;letter-spacing:.22em;color:#738096;margin-top:3px}
.brand img{height: 100%;     max-height: 100px;}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:27px}
.main-nav a{font-size:13px;font-weight:650;color:#344157}
.main-nav a:hover{color:var(--blue)}
.header-cta,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue);color:#fff;border-radius:10px;padding:11px 17px;
  font-size:13px;font-weight:750;box-shadow:0 8px 20px rgba(22,119,255,.22);
  transition:.2s ease
}
.header-cta:hover,.btn-primary:hover{transform:translateY(-2px);background:#0d68eb;color:#fff}
.menu-toggle{display:none;border:0;background:none;font-size:24px}

.hero{
  position:relative;overflow:hidden;background:
  radial-gradient(circle at 78% 20%,rgba(37,129,255,.30),transparent 32%),
  linear-gradient(135deg,#061327 0%,#0a2040 55%,#08295c 100%);
  color:#fff;padding:78px 0 86px
}
.hero:before,.hero:after{content:"";position:absolute;inset:auto -10% -45% -10%;height:70%;
  background:repeating-radial-gradient(ellipse at 0 100%,transparent 0 26px,rgba(40,137,255,.13) 27px 28px,transparent 29px 55px);
  transform:rotate(-7deg);pointer-events:none}
.hero:after{inset:0 -20% auto 45%;height:100%;background:linear-gradient(125deg,transparent 55%,rgba(34,128,255,.08) 55% 56%,transparent 56% 62%,rgba(34,128,255,.06) 62% 63%,transparent 63%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.45fr;gap:58px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;border:1px solid rgba(71,157,255,.35);background:rgba(23,119,255,.10);color:#65adff;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hero h1{font-size:clamp(42px,5vw,67px);line-height:1.03;letter-spacing:-.055em;margin:18px 0 20px}
.hero h1 span{color:#2e91ff}
.hero p{font-size:17px;line-height:1.7;color:#cbd7e8;max-width:580px;margin:0 0 28px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(109,176,255,.65);color:#fff;border-radius:10px;padding:10px 17px;font-size:13px;font-weight:750}
.btn-secondary:hover{background:rgba(255,255,255,.07)}
.dashboard{
  border:1px solid rgba(105,177,255,.35);background:rgba(8,28,58,.75);border-radius:18px;padding:16px;
  box-shadow:0 25px 70px rgba(0,0,0,.25);transform:perspective(1100px) rotateY(-2deg)
}
.dash-top{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:13px}
.metric small{display:block;color:#9eb1c9;font-size:9px}.metric strong{display:block;font-size:19px;margin-top:3px}.metric em{font-size:9px;color:#55d38a;font-style:normal}
.dash-main{display:grid;grid-template-columns:1.45fr .8fr;gap:10px;margin-top:10px}
.chart,.donut,.source-flow{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:10px;padding:13px}
.chart h4,.donut h4,.source-flow h4{font-size:10px;margin:0;color:#d9e4f2}
.line-chart{height:150px;margin-top:10px;position:relative;overflow:hidden}
.line-chart:before{content:"";position:absolute;inset:15% 0 0;background:linear-gradient(180deg,rgba(35,139,255,.23),transparent);clip-path:polygon(0 75%,12% 62%,23% 70%,35% 39%,46% 52%,58% 30%,70% 43%,82% 12%,100% 25%,100% 100%,0 100%)}
.line-chart svg{position:absolute;inset:0;width:100%;height:100%}
.donut{display:flex;flex-direction:column}.donut-ring{width:92px;height:92px;border-radius:50%;margin:18px auto 12px;background:conic-gradient(#2d91ff 0 36%,#61b2ff 36% 64%,#8cc9ff 64% 86%,#294d7d 86%);position:relative}
.donut-ring:after{content:"";position:absolute;inset:20px;background:#102849;border-radius:50%}
.legend{display:grid;gap:6px;font-size:9px;color:#b9c7d8}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3c9cff;margin-right:5px}
.source-flow{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}.flow-item{text-align:center;font-size:9px;color:#bfd0e5}.flow-icon{width:30px;height:30px;border:1px solid #398eff;border-radius:8px;margin:0 auto 4px;display:grid;place-items:center;color:#55aaff}

.section{padding:84px 0}.section-soft{background:var(--soft)}
.section-head{margin-bottom:36px;display: grid;grid-auto-flow: column;}.kicker{color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.section-head .kicker_images {    display: grid;    grid-auto-flow: row;}
.section-title{font-size:36px;line-height:1.12;letter-spacing:-.035em;margin:8px 0 13px}
.section-lead{color:var(--muted);font-size:15px;margin:0}
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.service-card{padding:23px 19px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.2s ease;min-height:225px;display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c9d9ef}
.service-icon{width:38px;height:38px;border-radius:10px;background:#edf5ff;color:var(--blue);display:grid;place-items:center;font-weight:900;margin-bottom:17px}
.service-card h3{font-size:14px;margin:0 0 8px}.service-card p{font-size:11px;line-height:1.6;color:var(--muted);margin:0 0 15px}.service-link{margin-top:auto;color:var(--blue);font-size:12px;font-weight:800}

.case-section{background:linear-gradient(135deg,#0a1e3a,#0d2a52);color:#fff}
.case-grid{display:grid;grid-template-columns:1.05fr 2fr .75fr;gap:16px;align-items:stretch}
.case-intro h2{font-size:29px;line-height:1.1;margin:8px 0 14px}.case-intro p{font-size:13px;color:#c0cee0}.case-card{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);border-radius:12px;padding:22px}.case-card h3{font-size:14px;margin:0 0 11px}.case-card ul{margin:0;padding-left:18px;color:#c7d4e5;font-size:11px;line-height:1.8}.case-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-list{border-left:1px solid rgba(255,255,255,.12);padding-left:22px;display:grid;align-content:center;gap:22px}.stat strong{display:block;font-size:27px}.stat span{font-size:10px;color:#aebfd4}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff}.project-cover{height:160px;background:linear-gradient(135deg,#0b1f3d,#1769d5);position:relative;overflow:hidden}.project-cover:before{content:"";position:absolute;inset:30px;background:linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.1) 8% 9%,transparent 9% 18%,rgba(255,255,255,.08) 18% 19%,transparent 19%);opacity:.7}.project-body{padding:19px}.tag{display:inline-block;font-size:9px;font-weight:800;color:var(--blue);background:#edf5ff;padding:5px 8px;border-radius:999px}.project-body h3{font-size:16px;margin:10px 0 7px}.project-body p{font-size:12px;color:var(--muted);margin:0}

.expertise{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.expertise-box{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff;box-shadow:var(--shadow)}.stack{display:grid;gap:11px}.stack-row{display:flex;justify-content:space-between;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-size:12px;font-weight:700}.stack-row span{color:var(--blue)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.post-card{border:1px solid var(--line);border-radius:15px;overflow:hidden}.post-thumb{height:140px;background:linear-gradient(135deg,#092143,#277ce2)}.post-body{padding:18px}.post-body h3{font-size:15px;margin:8px 0}.post-body p{font-size:11px;color:var(--muted);margin:0}.post-meta{font-size:9px;color:#8290a3}

.cta{position:relative;overflow:hidden;background:#0a2a58;color:#fff;padding:34px 0}.cta:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(43,146,255,.35),transparent 30%);pointer-events:none}.cta-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:25px}.cta h2{font-size:23px;margin:0 0 5px}.cta p{margin:0;color:#c1d1e6;font-size:12px}

.site-footer{background:#061225;color:#fff;padding:44px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:35px}.site-footer h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#91a7c3}.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.site-footer li,.site-footer a{font-size:11px;color:#b8c6d7}.site-footer a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:35px;padding-top:18px;color:#778aa4;font-size:10px;display:flex;justify-content:space-between}

.page-wrap{padding:70px 0}.content-narrow{width:min(820px,100%);margin:auto}.content-narrow h1{font-size:44px;line-height:1.1}.content-narrow h2{margin-top:38px}.content-narrow p,.content-narrow li{font-size:15px;color:#526176}.post-header{margin-bottom:35px}.post-featured{border-radius:18px;margin-bottom:30px}.pagination{display:flex;gap:8px;margin-top:35px}.pagination a,.pagination span{padding:9px 13px;border:1px solid var(--line);border-radius:8px;font-size:12px}

@media(max-width:1050px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .case-grid{grid-template-columns:1fr 1.8fr}
  .stat-list{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:18px 0 0;display:flex}
}
@media(max-width:820px){
  .main-nav{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;border-bottom:1px solid var(--line);padding:15px 20px}
  .main-nav.is-open{display:block}.main-nav ul{display:grid;gap:15px}.menu-toggle{display:block}.header-cta{display:none}
  .hero{padding:58px 0}.hero-grid,.expertise{grid-template-columns:1fr}.dashboard{transform:none}.hero h1{font-size:46px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:1fr}.case-cols{grid-template-columns:1fr}
  .project-grid,.blog-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .container{width:min(var(--container),calc(100% - 28px))}
  .header-inner{height:68px}.brand-text strong{font-size:13px}
  .main-nav{top:68px}.hero h1{font-size:39px}.hero p{font-size:15px}
  .dash-top{grid-template-columns:1fr}.dash-main{grid-template-columns:1fr}.source-flow{display:none}
  .services-grid{grid-template-columns:1fr}.section{padding:62px 0}.section-title{font-size:29px}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid;gap:8px}
}

/* İLETİŞİM */
#iletisim.cta {
    padding: 100px 30px;
}

#iletisim .cta-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

#iletisim .contact-info h2 {
    margin: 15px 0 20px;
    font-size: 46px;
    line-height: 1.1;
}

#iletisim .contact-info p {
    max-width: 500px;
    color: #aebdd0;
    line-height: 1.7;
}


/* Contact Form 7 kutusu */

#iletisim .contact-form {
    padding: 35px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(96,165,250,.18);
    border-radius: 16px;
}


/* Form alanları */

#iletisim .contact-form label {
    display: block;
    margin-bottom: 6px;
    color: #cbd5e1;
    font-size: 14px;
}

#iletisim .contact-form input[type="text"],
#iletisim .contact-form input[type="email"],
#iletisim .contact-form input[type="tel"],
#iletisim .contact-form textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 13px 15px;
    margin-bottom: 15px;

    border: 1px solid rgba(148,163,184,.25);
    border-radius: 7px;

    background: rgba(255,255,255,.06);
    color: #fff;
}


/* Mesaj alanı */

#iletisim .contact-form textarea {
    min-height: 120px;
    resize: vertical;
}


/* Gönder butonu */

#iletisim .contact-form input[type="submit"] {
    padding: 13px 28px;

    border: 0;
    border-radius: 7px;

    background: #2563eb;
    color: #fff;

    font-weight: 700;
    cursor: pointer;

    transition: .2s;
}

#iletisim .contact-form input[type="submit"]:hover {
    background: #3b82f6;
}


/* Mobil */

@media (max-width: 800px) {

    #iletisim .cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #iletisim .contact-info h2 {
        font-size: 38px;
    }

    #iletisim .contact-form {
        padding: 25px;
    }

}



/* =========================================
   HERO CAROUSEL
========================================= */

.hero-carousel {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    padding: 0 !important;
}

.hero-slides {
    position: relative;
    min-height: 650px;
}

.hero-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transform: translateX(40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s;
}

.hero-slide.active {
    position: relative;

    opacity: 1;
    visibility: visible;

    transform: translateX(0);

    z-index: 2;
}

.hero-slide .hero-content {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity .7s ease .2s,
        transform .7s ease .2s;
}

.hero-slide.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide .dashboard,
.hero-slide .sharepoint-visual {
    opacity: 0;
    transform: translateX(50px) scale(.96);

    transition:
        opacity .8s ease .25s,
        transform .8s ease .25s;
}

.hero-slide.active .dashboard,
.hero-slide.active .sharepoint-visual {
    opacity: 1;
    transform: translateX(0) scale(1);
}


/* =========================================
   SHAREPOINT
========================================= */

.sharepoint-slide {
    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(20, 160, 110, .18),
            transparent 35%
        );
}

.sharepoint-eyebrow {
    color: #4ade80 !important;
}

.sharepoint-slide h1 span {
    color: #34d399;
}


/* SharePoint ekranı */

.sharepoint-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-window {
    width: 520px;

    overflow: hidden;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 35px 90px rgba(0,0,0,.45),
        0 0 80px rgba(34,197,94,.10);
}


/* Window header */

.sp-window-header {
    height: 58px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    background: #0d6b4c;

    color: white;
}

.sp-logo {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 12px;

    border-radius: 5px;

    background: rgba(255,255,255,.15);

    font-size: 19px;
    font-weight: 800;
}

.sp-title {
    flex: 1;

    font-size: 14px;
    font-weight: 600;
}

.sp-user {
    font-size: 12px;
}


/* Window body */

.sp-window-body {
    display: grid;
    grid-template-columns: 145px 1fr;

    min-height: 350px;

    background: #f7f9fb;
}

.sp-sidebar {
    padding: 18px 10px;

    background: #f0f3f5;

    border-right: 1px solid #e0e5e9;
}

.sp-side-item {
    padding: 11px 10px;

    margin-bottom: 4px;

    border-radius: 5px;

    color: #56616d;

    font-size: 11px;
}

.sp-side-item.active {
    background: #dff4eb;

    color: #087443;

    font-weight: 700;
}


/* Main */

.sp-content {
    padding: 28px;
}

.sp-welcome small {
    color: #0d8a5d;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.sp-welcome h3 {
    margin: 7px 0;

    color: #18232d;

    font-size: 22px;
}

.sp-welcome p {
    margin: 0;

    color: #7b8792;

    font-size: 12px;
}


/* Cards */

.sp-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 10px;

    margin-top: 28px;
}

.sp-card {
    padding: 16px 12px;

    background: white;

    border: 1px solid #e4e8ec;

    border-radius: 7px;

    box-shadow: 0 5px 15px rgba(0,0,0,.04);
}

.sp-card strong {
    display: block;

    color: #087443;

    font-size: 22px;
}

.sp-card span {
    color: #89939d;

    font-size: 9px;
}


/* Progress */

.sp-progress {
    margin-top: 25px;

    padding: 18px;

    background: white;

    border: 1px solid #e4e8ec;

    border-radius: 7px;
}

.sp-progress > div:first-child {
    display: flex;

    justify-content: space-between;

    color: #596570;

    font-size: 10px;
}

.sp-progress strong {
    color: #087443;
}

.progress-bar {
    height: 6px;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 5px;

    background: #e4ebe8;
}

.progress-bar span {
    display: block;

    width: 82%;
    height: 100%;

    border-radius: 5px;

    background: #16a36b;
}


/* Floating cards */

.sp-floating-card {
    position: absolute;

    padding: 13px 18px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 9px;

    background: rgba(15,35,45,.9);

    color: white;

    font-size: 11px;

    box-shadow: 0 15px 40px rgba(0,0,0,.25);

    backdrop-filter: blur(10px);

    animation: spFloat 4s ease-in-out infinite;
}

.sp-floating-card span {
    margin-right: 7px;

    color: #4ade80;
    font-weight: 800;
}

.sp-card-one {
    left: -20px;
    bottom: 70px;
}

.sp-card-two {
    right: -20px;
    top: 70px;

    animation-delay: 1s;
}

@keyframes spFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


/* =========================================
   CAROUSEL BUTTONS
========================================= */

.hero-prev,
.hero-next {
    position: absolute;

    top: 50%;

    z-index: 10;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    background: rgba(5,20,35,.65);

    color: white;

    cursor: pointer;

    transform: translateY(-50%);

    transition: .2s;
}

.hero-prev {
    left: 20px;
}

.hero-next {
    right: 20px;
}

.hero-prev:hover,
.hero-next:hover {
    background: #2563eb;

    border-color: #2563eb;
}


/* Dots */

.hero-dots {
    position: absolute;

    bottom: 28px;
    left: 50%;

    z-index: 10;

    display: flex;
    gap: 8px;

    transform: translateX(-50%);
}

.hero-dot {
    width: 28px;
    height: 4px;

    padding: 0;

    border: 0;

    border-radius: 4px;

    background: rgba(255,255,255,.25);

    cursor: pointer;

    transition: .3s;
}

.hero-dot.active {
    width: 48px;

    background: #2e91ff;
}


/* =========================================
   MOBIL
========================================= */

@media (max-width: 900px) {

    .hero-carousel,
    .hero-slides {
        min-height: auto;
    }

    .hero-slide {
        position: absolute;
    }

    .hero-slide.active {
        position: relative;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .sp-window {
        width: 100%;
        max-width: 520px;
    }

    .hero-prev {
        left: 10px;
    }

    .hero-next {
        right: 10px;
    }

    .sp-floating-card {
        display: none;
    }

}

@media (max-width: 600px) {

    .sp-window-body {
        grid-template-columns: 100px 1fr;
    }

    .sp-content {
        padding: 18px;
    }

    .sp-cards {
        gap: 5px;
    }

    .sp-card {
        padding: 12px 8px;
    }

    .sp-card strong {
        font-size: 17px;
    }

}


/* =========================================================
   KURUMSAL DENEYİM
========================================================= */

.experience-section {
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(46, 145, 255, 0.08),
      transparent 35%
    ),
    #f7f9fc;
}

.experience-head {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 42px;
}

.experience-card {
  position: relative;
  min-height: 135px;
  padding: 25px 22px 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 80, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(15, 45, 80, 0.05);
  overflow: hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.experience-card:hover {
  transform: translateY(-5px);
  border-color: rgba(46, 145, 255, 0.35);
  box-shadow: 0 16px 40px rgba(15, 45, 80, 0.10);
}

.experience-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    #1464c4,
    #2e91ff
  );
  opacity: 0;
  transition: opacity .25s ease;
}

.experience-card:hover::before {
  opacity: 1;
}

.experience-number {
  display: block;
  margin-bottom: 18px;
  color: #2e91ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.experience-card h3 {
  margin: 0;
  color: #102b4e;
  font-size: 17px;
  line-height: 1.35;
}

.experience-card p {
  margin: 10px 0 0;
  color: #718096;
  font-size: 13px;
}

.experience-card.featured {
  background:
    linear-gradient(
      145deg,
      #0d315b,
      #123f73
    );
  border-color: transparent;
}

.experience-card.featured h3 {
  color: #ffffff;
}

.experience-card.featured p,
.experience-card.featured .experience-number {
  color: #8bc5ff;
}

.experience-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 42px auto 0;
  padding: 18px 25px;
  max-width: 520px;
  border-top: 1px solid rgba(15, 45, 80, 0.10);
  color: #64748b;
}

.experience-footer strong {
  color: #1464c4;
  font-size: 30px;
  line-height: 1;
}

.experience-footer span {
  font-size: 14px;
}


/* TABLET */

@media (max-width: 1000px) {

  .experience-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .experience-card {
    min-height: 120px;
    padding: 20px 17px;
  }

  .experience-card h3 {
    font-size: 15px;
  }

  .experience-footer {
    text-align: left;
  }

}


@media (max-width: 480px) {

  .experience-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   HAKKIMDA
========================================================= */

.about-section {
  position: relative;
  overflow: hidden;
}

.about-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 75px;
  align-items: center;
}


/* FOTOĞRAF */

.about-photo-wrap {
  position: relative;
  max-width: 380px;
}

.about-photo {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #0d315b;
  box-shadow: 0 25px 60px rgba(15, 45, 80, .18);
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(7, 30, 58, .35)
    );
  pointer-events: none;
}

.about-photo img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center top;
}


/* FOTOĞRAF ALTINDAKİ ROZET */

.about-photo-badge {
  position: absolute;
  right: -25px;
  bottom: 30px;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 15px 20px;

  background: #ffffff;
  border-radius: 12px;

  box-shadow: 0 15px 35px rgba(15, 45, 80, .18);
}

.about-photo-badge strong {
  color: #1464c4;
  font-size: 28px;
  line-height: 1;
}

.about-photo-badge span {
  color: #53657a;
  font-size: 12px;
  font-weight: 600;
}


/* BAŞLIK */

.about-content .section-title span {
  color: #2e91ff;
}


/* UZMANLIK */

.about-skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0;
}

.about-skill {
  padding: 14px 15px;

  background: #ffffff;
  border: 1px solid rgba(15, 45, 80, .08);
  border-radius: 10px;
}

.about-skill strong {
  display: block;
  color: #102b4e;
  font-size: 14px;
}

.about-skill span {
  display: block;
  margin-top: 4px;
  color: #7a8797;
  font-size: 11px;
}


/* TELEFON */

.about-contact {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin: 5px 0 25px;
  padding: 12px 18px;

  background: rgba(46, 145, 255, .07);
  border: 1px solid rgba(46, 145, 255, .15);
  border-radius: 12px;
}

.about-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  color: #ffffff;
  background: #1464c4;
  border-radius: 50%;

  font-size: 17px;
}

.about-contact small {
  display: block;
  margin-bottom: 3px;

  color: #718096;
  font-size: 11px;
}

.about-contact a {
  color: #102b4e;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.about-contact a:hover {
  color: #1464c4;
}


/* TABLET */

@media (max-width: 900px) {

  .about-grid {
    grid-template-columns: 300px 1fr;
    gap: 45px;
  }

  .about-photo img {
    height: 390px;
  }

  .about-skills {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* MOBİL */

@media (max-width: 700px) {

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-photo-wrap {
    max-width: 320px;
    margin: 0 auto;
  }

  .about-photo img {
    height: 390px;
  }

  .about-photo-badge {
    right: -10px;
  }

  .about-content {
    text-align: left;
  }

  .about-skills {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 420px) {

  .about-skills {
    grid-template-columns: 1fr;
  }

  .about-photo img {
    height: 360px;
  }

}


/* =========================================================
   HEADER TELEFON
========================================================= */

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-left: 20px;
  padding: 9px 15px;

  color: #1464c4;
  background: rgba(46, 145, 255, .08);

  border: 1px solid rgba(46, 145, 255, .15);
  border-radius: 8px;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;

  transition: all .2s ease;
}

.header-phone-icon {
  font-size: 15px;
}

.header-phone:hover {
  color: #ffffff;
  background: #1464c4;
  border-color: #1464c4;
}


/* MOBİL */

@media (max-width: 700px) {

  .header-phone {
    padding: 8px 10px;
    margin-left: 8px;
  }

  .header-phone span:last-child {
    display: none;
  }

}