
/* Sakaryaspor Kart concept: homepage hero ONLY (original DidimBurada foundation intact) */
.sakarya-hero{
  --sk-green:#087335;
  isolation:isolate;
  display:block;
  position:relative;
  min-height:0;
  padding:44px clamp(22px,4.2vw,58px) 55px;
  overflow:hidden;
  border-radius:0 0 30px 30px;
  background:radial-gradient(ellipse at 82% 5%,rgba(16,177,89,.44),transparent 45%),
    radial-gradient(ellipse at 8% 95%,rgba(7,128,68,.32),transparent 46%),
    linear-gradient(119deg,#030b08 0%,#092a1b 52%,#020906 100%);
  color:#fff;
}
.sakarya-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.43;
  background:repeating-linear-gradient(108deg,transparent 0 37px,rgba(24,194,99,.07) 38px 40px,transparent 41px 81px),
  linear-gradient(150deg,transparent 30%,rgba(255,255,255,.04) 52%,transparent 70%)}
.sakarya-hero::after{content:"";position:absolute;left:-15%;bottom:-86px;width:133%;height:190px;border:1px solid rgba(49,232,128,.15);border-radius:50%;transform:rotate(-4deg);pointer-events:none}
.sakarya-ambient{position:absolute;border:1px solid rgba(40,201,103,.13);border-radius:50%;pointer-events:none}
.sakarya-ambient-one{width:620px;height:620px;right:-200px;top:-325px}
.sakarya-ambient-two{width:450px;height:450px;right:-95px;top:-210px}
.sakarya-hero-main{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr);gap:28px;align-items:center;position:relative;z-index:1}
.sakarya-hero-copy{min-width:0;position:relative;z-index:2}
.sakarya-eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(90,255,161,.24);background:rgba(41,178,100,.12);border-radius:999px;padding:9px 14px;font-size:11px;font-weight:850;letter-spacing:.13em;color:#b5f7d0}
.sakarya-pulse{width:8px;height:8px;background:#39f293;border-radius:50%;box-shadow:0 0 0 4px rgba(57,242,147,.16),0 0 16px #39f293}
.sakarya-hero .sakarya-lead{margin:26px 0 9px;color:#ceeadc;font-size:clamp(18px,2vw,23px);line-height:1.32;font-weight:600}
.sakarya-hero h1{margin:0 0 16px;color:#fff;font-size:clamp(39px,5vw,75px);line-height:.95;letter-spacing:-.058em;font-weight:950;overflow-wrap:normal}
.sakarya-hero h1 span{display:block;color:#4de08a;font-size:1.04em;letter-spacing:-.036em;text-shadow:0 8px 30px rgba(3,21,11,.2)}
.sakarya-hero .sakarya-description{max-width:600px;color:#d1ded6;line-height:1.65;font-size:clamp(14px,1.5vw,16px);margin:0 0 20px}
.sakarya-benefits{display:flex;gap:9px;flex-wrap:wrap}
.sakarya-benefits span{display:inline-flex;padding:9px 12px;border:1px solid rgba(120,239,172,.21);background:rgba(255,255,255,.07);border-radius:999px;color:#e8fff0;font-size:11px;font-weight:750;line-height:1.2}
.sakarya-card-stage{height:330px;min-width:0;position:relative;display:grid;place-items:center;perspective:1000px}
.sakarya-card-shadow{position:absolute;inset:80px 3% 15px;transform:rotate(-11deg);background:rgba(0,0,0,.52);border-radius:30px;filter:blur(24px)}
.sakarya-member-card{width:min(100%,430px);aspect-ratio:1.59;padding:24px;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;border-radius:25px;overflow:hidden;
 border:1px solid rgba(255,255,255,.42);box-shadow:0 26px 70px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.25);background:radial-gradient(circle at 100% 0%,#19ae62 0,transparent 32%),linear-gradient(124deg,#037035 0%,#0c4e30 46%,#07120f 47%,#010705 100%);transform:rotate(-9deg) translateY(-2px)}
.sakarya-member-card::before{content:"";position:absolute;inset:-90px -10px -90px 28%;transform:rotate(-15deg);z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.08) 32px,transparent 33px 55px)}
.sakarya-member-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(170deg,rgba(255,255,255,.22),transparent 28%,transparent 68%,rgba(0,0,0,.35))}
.sakarya-card-top{display:flex;gap:10px;align-items:center}
.sakarya-card-emblem{width:63px;height:63px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}
.sakarya-card-top b{font-size:22px;font-weight:950;letter-spacing:-.04em;line-height:1;color:#fff}
.sakarya-card-top b small{display:block;font-size:20px;font-weight:800;letter-spacing:.2em;margin-top:5px;color:#8ff3b8}
.sakarya-card-signal{margin-left:auto;align-self:flex-start;font-size:28px;color:#c3f9d6}
.sakarya-card-streak{position:absolute;left:13%;right:12%;top:54%;display:flex;align-items:center;gap:8px;opacity:.55}
.sakarya-card-streak i{display:block;width:33%;height:1px;background:linear-gradient(90deg,transparent,#acffd1,transparent)}
.sakarya-card-foot{display:flex;gap:12px;align-items:end;justify-content:space-between;color:#fff}
.sakarya-card-foot span{font-size:12px;letter-spacing:.07em;font-weight:900}
.sakarya-card-foot small{display:block;margin-top:6px;font-size:9px;font-weight:650;letter-spacing:.08em;color:#b3ecca}
.sakarya-card-foot strong{font-size:26px;letter-spacing:.02em;font-weight:950;opacity:.5}
.sakarya-card-float{position:absolute;right:0;bottom:4px;display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid rgba(170,249,197,.32);border-radius:14px;background:#fafffb;color:#125331;box-shadow:0 12px 30px rgba(0,0,0,.26);font-weight:900;font-size:11px;letter-spacing:.06em;transform:rotate(3deg);max-width:85%}
.sakarya-card-float b{font-size:18px;color:#159e52}
.sakarya-search-area{position:relative;z-index:2;margin-top:22px;padding:17px 20px 20px;border:1px solid rgba(199,255,226,.2);border-radius:20px;background:rgba(0,0,0,.24);backdrop-filter:blur(8px);box-shadow:0 18px 28px rgba(0,0,0,.09)}
.sakarya-search-title{display:flex;gap:8px;align-items:center;margin:0 0 12px;color:#d7ffe6;font-size:13px;font-weight:850;letter-spacing:.02em}
.sakarya-search-dot{font-size:22px;color:#53ec96;line-height:1}
.sakarya-hero .search-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(145px,.7fr) auto;gap:10px}
.sakarya-hero .search-panel input,.sakarya-hero .search-panel select{min-width:0;min-height:53px;border:1px solid rgba(14,63,39,.12);border-radius:13px;padding:0 16px;background:#fff;color:#172e20;outline-offset:2px}
.sakarya-hero .search-panel input:focus-visible,.sakarya-hero .search-panel select:focus-visible{outline:3px solid #40d38b}
.sakarya-hero .search-panel .primary{min-height:53px;border-radius:13px;background:linear-gradient(135deg,#26c66b,#087335);color:#fff;box-shadow:0 8px 18px rgba(5,73,39,.33);white-space:nowrap;font-weight:900}
.sakarya-hero .search-panel .primary:hover{filter:brightness(1.1)}
@media(max-width:850px){
 .sakarya-hero{padding:28px 19px 41px}
 .sakarya-hero-main{grid-template-columns:1fr;gap:10px}
 .sakarya-hero .sakarya-lead{margin:19px 0 7px}
 .sakarya-hero h1{font-size:clamp(38px,9vw,59px);margin-bottom:14px}
 .sakarya-card-stage{height:236px}
 .sakarya-member-card{width:min(77%,310px);padding:17px;border-radius:20px;transform:rotate(-7deg)}
 .sakarya-card-emblem{width:46px;height:46px}
 .sakarya-card-top b{font-size:16px}.sakarya-card-top b small{font-size:14px}
 .sakarya-card-foot span{font-size:9px}.sakarya-card-foot small{font-size:7px}.sakarya-card-foot strong{font-size:20px}
 .sakarya-card-float{right:5%;bottom:0;font-size:9px}
 .sakarya-search-area{margin-top:18px;padding:14px}
 .sakarya-hero .search-panel{grid-template-columns:minmax(0,1fr) minmax(110px,.66fr)}
 .sakarya-hero .search-panel input{grid-column:1/-1}
 .sakarya-hero .search-panel .primary{min-width:0;padding:0 14px}
}
@media(max-width:390px){
 .sakarya-hero{padding:22px 13px 36px}
 .sakarya-eyebrow{font-size:9px;padding:8px 10px}
 .sakarya-hero h1{font-size:clamp(32px,9.8vw,43px)}
 .sakarya-description{font-size:13px!important}
 .sakarya-benefits{gap:5px}.sakarya-benefits span{font-size:9px;padding:7px 8px}
 .sakarya-card-stage{height:180px}
 .sakarya-member-card{width:min(83%,290px)}
 .sakarya-hero .search-panel{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
 .sakarya-hero .search-panel input{grid-column:1/-1}
 .sakarya-hero .search-panel .primary{width:100%}
}
@media(prefers-reduced-motion:no-preference){.sakarya-member-card{animation:sakarya-enter .65s ease-out both}@keyframes sakarya-enter{from{opacity:0;transform:rotate(-5deg) translateY(20px)}to{opacity:1;transform:rotate(-9deg) translateY(-2px)}}}
