:root{
    --bg:#0A0F1A;
    --paper:#121A28;
    --paper-2:#1B2637;
    --ink:#F3F6FB;
    --ink-muted:#8B96AC;
    --brand:#3B82F6;
    --brand-dark:#1746A6;
    --brand-soft:rgba(59,130,246,.16);
    --edge:rgba(255,255,255,.10);
    --edge-strong:rgba(255,255,255,.18);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  ::selection{background:var(--brand); color:#fff;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  .mono{font-family:'JetBrains Mono',monospace;}
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1320px; margin:0 auto; padding:0 1.5rem;}

  /* ===== nav ===== */
  nav.topnav{padding:1.3rem 0; position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); z-index:50;}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;}
  .logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:.65rem;}
  .logo .sq{width:36px; height:36px; background:var(--ink); border-radius:12px; position:relative; flex:none; transform:rotate(-4deg);}
  .logo .sq::after{content:""; position:absolute; inset:7px; border:2px solid var(--brand); border-radius:7px;}
  .navlinks{display:flex; gap:.3rem; list-style:none; margin:0; padding:.35rem; background:var(--paper); border-radius:100px;}
  .navlinks a{font-size:.82rem; font-weight:600; padding:.55rem 1.1rem; border-radius:100px; display:block;}
  .navlinks a:hover{background:var(--ink); color:#fff;}
  .cta-mini{background:var(--brand); color:#fff; font-weight:700; font-size:.82rem; padding:.7rem 1.4rem; border-radius:100px; white-space:nowrap;}
  .cta-mini:hover{background:var(--brand-dark); color:#fff;}

  /* ===== HERO: overlapping rotated visual, oversized offset headline ===== */
  .hero{position:relative; padding:2.5rem 0 3.5rem; overflow:hidden;}
  .hero-blob{position:absolute; top:-10%; right:-8%; width:640px; height:640px; background:var(--brand-soft); border-radius:44% 56% 61% 39% / 49% 42% 58% 51%; z-index:0;}
  .hero-eyebrow{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.13em; color:var(--brand); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.4rem; background:var(--brand-soft); padding:.5rem 1rem; border-radius:100px;}
  .hero-eyebrow .d{width:7px;height:7px;background:var(--brand); border-radius:50%;}
  .hero-left{padding-left:.5rem;}
  .hero h1{font-size:clamp(2.5rem,5vw,4.3rem); line-height:.98; letter-spacing:-.02em; margin:0 0 1.6rem;}
  .hero h1 span{display:block;}
  .hero h1 .ind{margin-left:2.2rem;}
  .hero h1 .ol{color:var(--brand);}
  .hero p{color:var(--ink-muted); font-size:1.08rem; line-height:1.7; max-width:460px; margin-bottom:2.2rem;}
  .hero-actions{display:flex; gap:.8rem; flex-wrap:wrap;}
  .hero-actions a{padding:1rem 1.8rem; font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:.5rem; border-radius:100px;}
  .hero-actions a.primary{background:var(--ink); color:#fff;}
  .hero-actions a.primary:hover{background:var(--brand);}
  .hero-actions a.secondary{border:1.5px solid var(--edge); background:#fff;}
  .hero-actions a.secondary:hover{border-color:var(--brand); color:var(--brand);}

  .hero-right{position:relative;}
  .hv-visual{position:relative; height:480px;}
  .hv-main{
    position:absolute; top:0; right:0; width:88%; height:78%;
    background:
      linear-gradient(160deg, rgba(30,111,224,.38), transparent 55%),
      linear-gradient(-20deg, rgba(18,63,148,.45), transparent 50%),
      #0B121E;
    border-radius:36px; transform:rotate(4deg);
    box-shadow:0 50px 90px -40px rgba(30,111,224,.55);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .hv-main::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
    pointer-events:none; z-index:1;
  }
  .hv-main i{font-size:6rem; color:rgba(255,255,255,.16); transform:rotate(-4deg); position:relative; z-index:1;}
  .hv-main .scan{position:absolute; left:-10%; right:-10%; height:3px; background:linear-gradient(90deg, transparent, rgba(90,169,255,.85), transparent); animation:scandown 4s linear infinite; z-index:2;}
  @keyframes scandown{0%{top:-5%;} 100%{top:105%;}}
  .hv-hud-corner{position:absolute; width:20px; height:20px; z-index:3; border-color:rgba(255,255,255,.55); transform:rotate(-4deg);}
  .hv-hud-corner.tl{top:14%; left:9%; border-top:2px solid; border-left:2px solid;}
  .hv-hud-corner.tr{top:14%; right:9%; border-top:2px solid; border-right:2px solid;}
  .hv-hud-corner.bl{bottom:14%; left:9%; border-bottom:2px solid; border-left:2px solid;}
  .hv-hud-corner.br{bottom:14%; right:9%; border-bottom:2px solid; border-right:2px solid;}
  .hv-hud-top{position:absolute; top:13%; left:16%; right:16%; z-index:3; display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:.66rem; color:#D7E1F0; transform:rotate(-4deg);}
  .hv-hud-top .rec{display:flex; align-items:center; gap:.35rem; color:#FF6B5E; font-weight:700;}
  .hv-hud-top .rec .d{width:6px;height:6px;border-radius:50%; background:#FF6B5E; animation:blink 1.5s infinite;}
  .hv-hud-bottom{position:absolute; bottom:13%; left:16%; right:16%; z-index:3; display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:.62rem; color:#B8C4D8; transform:rotate(-4deg);}
  .hv-card2-outer{position:absolute; bottom:0; left:0; width:74%; height:54%;}
  .hv-card2-spinwrap{
    position:absolute; inset:0; border-radius:24px; padding:2px; overflow:hidden;
    box-shadow:0 40px 80px -25px rgba(59,130,246,.4), 0 30px 60px -28px rgba(0,0,0,.65);
  }
  .hv-card2-spin{
    position:absolute; inset:-75%; z-index:0;
    background:conic-gradient(from 0deg, transparent 0deg, var(--brand) 55deg, #8FC1FF 90deg, var(--brand) 125deg, transparent 180deg, transparent 360deg);
    animation:spinBorder 5s linear infinite;
  }
  @keyframes spinBorder{to{transform:rotate(360deg);}}
  .hv-card2{
    position:relative; z-index:1; width:100%; height:100%; border-radius:22px; overflow:hidden;
    background:var(--paper-2);
    display:flex; flex-direction:row;
  }
  .hv-card2 .announce-img{
    width:42%; flex:none; background-size:cover; background-position:center; position:relative;
  }
  .hv-card2 .announce-badge{
    position:absolute; top:.7rem; left:.7rem; background:rgba(11,15,20,.85);
    font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:700;
    padding:.32rem .6rem; border-radius:100px; letter-spacing:.05em;
  }
  .hv-card2 .announce-badge span{color:#fff; animation:blink 1.5s infinite;}
  .hv-card2 .announce-body{padding:1.2rem 1.3rem 1.4rem 1.3rem; display:flex; flex-direction:column; justify-content:center; gap:.45rem;}
  .hv-card2 .announce-body h4{font-size:1.02rem; margin:0; line-height:1.28; color:var(--ink);}
  .hv-card2 .announce-body p{font-size:.8rem; color:var(--ink-muted); margin:0; line-height:1.55;}
  .hv-card2 .announce-more{font-size:.78rem; color:var(--brand); font-weight:700; display:inline-flex; align-items:center; gap:.35rem; margin-top:.15rem;}
  .view-all{
    position:absolute; bottom:-16px; right:16px; z-index:3;
    background:var(--brand); color:#fff; font-size:.74rem; font-weight:700;
    padding:.5rem .95rem; border-radius:100px; display:inline-flex; align-items:center; gap:.4rem;
    box-shadow:0 14px 28px -10px rgba(59,130,246,.7); white-space:nowrap;
  }
  .view-all:hover{background:var(--brand-dark);}
  .hv-badge{
    position:absolute; top:8%; left:-4%; background:#fff; border:1px solid var(--edge); border-radius:16px;
    padding:.7rem 1rem; box-shadow:0 20px 40px -22px rgba(18,21,28,.3); display:flex; align-items:center; gap:.6rem;
    transform:rotate(-3deg);
  }
  .hv-badge .rec{color:#E4483A; display:flex; align-items:center; gap:.35rem; font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700;}
  .hv-badge .rec .d{width:6px;height:6px;border-radius:50%; background:#E4483A; animation:blink 1.5s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* ===== counters: floating pill row, offset ===== */
  .counter-row{position:relative; z-index:1; margin-top:3rem;}
  .counter-pill{
    background:#fff; border:1px solid var(--edge); border-radius:22px; padding:1.6rem;
    box-shadow:0 24px 50px -34px rgba(18,21,28,.25); height:100%;
  }
  .counter-pill:nth-child(2){margin-top:1.2rem;}
  .counter-pill:nth-child(3){margin-top:-.6rem;}
  .counter-pill:nth-child(4){margin-top:.8rem;}
  .counter-pill .n{font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:700;}
  .counter-pill .n .a{color:var(--brand);}
  .counter-pill .l{font-size:.76rem; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:.3rem;}

  /* ===== sections ===== */
  section{padding:6rem 0;}
  .sec-label{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.13em; color:var(--brand); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem; background:var(--brand-soft); padding:.45rem .9rem; border-radius:100px;}
  .sec-label .d{width:7px;height:7px;background:var(--brand); border-radius:50%;}
  .sec-head-split{margin-bottom:3.5rem;}
  .sec-head-split h2{font-size:clamp(1.9rem,3vw,2.6rem); margin:0; line-height:1.05;}
  .sec-head-split p{color:var(--ink-muted); line-height:1.7; margin:0; padding-bottom:.3rem;}

  /* ===== HAKKIMIZDA: offset asymmetric columns, rotated metric cards ===== */
  .metric-stack{display:flex; flex-direction:column; gap:1rem;}
  .metric-card{border:1px solid var(--edge); border-radius:20px; padding:1.5rem 1.7rem; background:#fff; box-shadow:0 20px 40px -32px rgba(18,21,28,.2);}
  .metric-card:nth-child(1){transform:rotate(-1.5deg); margin-left:1.2rem;}
  .metric-card:nth-child(2){transform:rotate(1.2deg);}
  .metric-card:nth-child(3){transform:rotate(-1deg); margin-left:.6rem;}
  .metric-card .mv{font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; color:var(--brand); line-height:1;}
  .metric-card .ml{font-size:.82rem; color:var(--ink-muted); margin-top:.4rem; font-weight:600;}

  /* ===== SERVICES: uneven bento grid, rounded, more variety, slight rotation on hover ===== */
  .svc-cell{
    border:1px solid var(--edge); border-radius:24px; padding:1.5rem; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between; background:#fff; height:100%;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:0 18px 40px -32px rgba(18,21,28,.18);
  }
  .svc-cell .wm-icon{position:absolute; right:-.8rem; bottom:-1.3rem; font-size:5rem; z-index:0; pointer-events:none; color:rgba(17,21,28,.045); transform:rotate(-8deg);}
  .svc-cell .svc-top, .svc-cell > div:last-child{position:relative; z-index:1;}
  .svc-cell:hover{transform:translateY(-5px) rotate(-.6deg); box-shadow:0 28px 55px -30px rgba(18,21,28,.3);}

  /* photo-backed cards: dark gradient overlay for text legibility */
  .svc-cell.has-photo{background-size:cover; background-position:center; border:none; color:#fff;}
  .svc-cell.has-photo::after{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(11,15,20,.32) 0%, rgba(11,15,20,.48) 60%, rgba(11,15,20,.68) 100%);
  }
  .svc-cell.has-photo h3{color:#fff;}
  .svc-cell.has-photo p{color:rgba(255,255,255,.72);}
  .svc-cell.has-photo .svc-top .num{color:rgba(255,255,255,.6);}
  .svc-cell.has-photo .svc-ic{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);}
  .svc-cell.has-photo .more{color:#fff;}
  .svc-cell.has-photo .wm-icon{display:none;}

  .svc-cell.c1{min-height:280px;}
  .svc-cell.c1:hover{transform:translateY(-5px) rotate(.6deg);}
  .svc-cell.c1 h3{font-size:1.5rem;}
  .svc-cell.c4{background:var(--brand-soft);}

  /* kamera card: simulated live feed (grain + scanline) instead of a static photo */
  .svc-cell.cam-live{
    background:
      linear-gradient(160deg, rgba(90,169,255,.16), transparent 55%),
      linear-gradient(-20deg, rgba(30,111,224,.2), transparent 50%),
      #0B121E;
    border:none; color:#fff;
  }
  .svc-cell.cam-live .noise-canvas{
    position:absolute; inset:0; width:100%; height:100%; z-index:0;
    opacity:.5; image-rendering:pixelated; mix-blend-mode:screen;
  }
  .svc-cell.cam-live::after{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(11,15,20,.10) 0%, rgba(11,15,20,.40) 65%, rgba(11,15,20,.62) 100%);
  }
  .svc-cell.cam-live .cam-scan{
    position:absolute; left:-10%; right:-10%; height:3px; z-index:1;
    background:linear-gradient(90deg, transparent, rgba(90,169,255,.85), transparent);
    animation:scandown 4.5s linear infinite;
  }
  @keyframes scandown{0%{top:-8%;} 100%{top:108%;}}
  .svc-cell.cam-live h3{color:#fff;}
  .svc-cell.cam-live p{color:rgba(255,255,255,.68);}
  .svc-cell.cam-live .svc-top .num{color:rgba(255,255,255,.55);}
  .svc-cell.cam-live .svc-ic{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);}
  .svc-cell.cam-live .more{color:#fff;}
  .svc-cell.cam-live .svc-top, .svc-cell.cam-live > div:last-child{z-index:2;}
  .svc-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .svc-top .num{font-family:'JetBrains Mono',monospace; font-size:.7rem; color:#9CA3AF; font-weight:600;}
  .svc-ic{width:40px;height:40px; background:var(--brand); color:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:none;}
  .svc-cell h3{font-size:1.02rem; margin:.9rem 0 .35rem;}
  .svc-cell p{font-size:.83rem; color:var(--ink-muted); line-height:1.55; margin:0;}
  a.svc-link{display:block; text-decoration:none; height:100%;}

  /* ===== NEDEN BİZ: staggered rounded cards, alternating rotation ===== */
  .why-cell{border:1px solid var(--edge); border-radius:24px; padding:2.2rem 1.9rem; background:#fff; box-shadow:0 20px 45px -34px rgba(18,21,28,.2); height:100%;}
  .why-col:nth-child(1) .why-cell{transform:rotate(-1.2deg);}
  .why-col:nth-child(2){margin-top:2.2rem;}
  .why-col:nth-child(2) .why-cell{background:var(--brand); border:none; transform:rotate(1deg);}
  .why-col:nth-child(2) .why-n{color:rgba(255,255,255,.5);}
  .why-col:nth-child(2) h4, .why-col:nth-child(2) p{color:#fff;}
  .why-col:nth-child(2) p{color:rgba(255,255,255,.85);}
  .why-col:nth-child(3) .why-cell{transform:rotate(-.8deg);}
  .why-n{font-family:'Space Grotesk',sans-serif; font-size:2.6rem; font-weight:700; color:var(--edge); line-height:1; margin-bottom:1rem;}
  .why-cell h4{font-size:1.08rem; margin-bottom:.6rem;}
  .why-cell p{color:var(--ink-muted); font-size:.9rem; line-height:1.65; margin:0;}

  /* ===== partners: gentle ticker in rounded pill track ===== */
  .partners-band{background:var(--paper); border-radius:32px; padding:2.4rem 0; overflow:hidden;}
  .p-track{display:inline-flex; animation:scroll-x 24s linear infinite; white-space:nowrap;}
  @keyframes scroll-x{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .p-track span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; color:#9CA3AF; padding:0 2.4rem;}

  /* ===== CTA: rounded blob card, overlapping form ===== */
  .cta-block{position:relative; padding:0;}
  .cta-shape{
    background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius:40px; position:relative; overflow:hidden; padding:3.5rem 3rem;
  }
  .cta-shape::after{content:""; position:absolute; top:-30%; left:-8%; width:340px; height:340px; background:rgba(255,255,255,.12); border-radius:50%;}
  .cta-shape h2{color:#fff; font-size:clamp(1.9rem,3.2vw,2.5rem); line-height:1.08; position:relative; z-index:1;}
  .cta-shape p{color:#DCEBFF; position:relative; z-index:1;}
  .cta-form-panel{
    background:#fff; border-radius:26px; padding:2.2rem; position:relative; z-index:1;
    box-shadow:0 40px 70px -30px rgba(0,0,0,.35); transform:rotate(1.2deg);
  }
  .form-control-custom{background:var(--paper); border:1px solid var(--edge); color:var(--ink); border-radius:12px; padding:.7rem .9rem; font-size:.9rem;}
  .form-control-custom:focus{background:#fff; border-color:var(--brand); box-shadow:0 0 0 .15rem rgba(30,111,224,.15);}
  .form-label-custom{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:700; margin-bottom:.35rem; display:block;}
  .btn-block-submit{background:var(--ink); color:#fff; border:none; padding:.9rem; font-weight:700; width:100%; border-radius:12px;}
  .btn-block-submit:hover{background:var(--brand);}

  /* ===== contact: offset rounded cards ===== */
  .c-cell{border:1px solid var(--edge); border-radius:20px; padding:1.6rem; background:#fff; box-shadow:0 18px 36px -30px rgba(18,21,28,.2); height:100%;}
  .c-col:nth-child(2) .c-cell{margin-top:1.4rem;}
  .c-col:nth-child(4) .c-cell{margin-top:-.8rem;}
  .c-cell i{color:var(--brand); font-size:1.3rem;}
  .c-cell .cl{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:700; margin-top:.8rem;}
  .c-cell .cv{font-size:.92rem; margin-top:.3rem; line-height:1.5;}
  .c-cell .cv a:hover{color:var(--brand);}

  /* ===== footer ===== */
  footer{background:var(--ink); color:#B8BEC9; padding:4rem 0 1.5rem; border-radius:40px 40px 0 0; margin-top:2rem;}
  footer .logo{color:#fff;}
  footer h5{font-family:'Space Grotesk',sans-serif; color:#fff; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1.1rem;}
  footer ul{list-style:none; padding:0; margin:0;}
  footer ul li{margin-bottom:.6rem;}
  footer ul li a{font-size:.86rem; color:#B8BEC9;}
  footer ul li a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.3rem; font-size:.76rem; font-family:'JetBrains Mono',monospace; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; color:#7C8496;}
  .footer-bottom .fb-left{flex:0 1 auto;}
  .footer-bottom .fb-center{flex:1 1 auto; text-align:center;}
  .footer-bottom .fb-right{flex:0 0 auto;}
  .footer-bottom .fb-credit{color:#7C8496; text-decoration:none; font-weight:600; letter-spacing:.03em; transition:color .15s;}
  .footer-bottom .fb-credit:hover{color:var(--brand, #fff);}

  @media (max-width: 991.98px){
    .wrap{padding:0 1rem;}
    .nav-inner{gap:.6rem; flex-wrap:nowrap;}
    .logo-img{height:36px;}
    .cta-mini{padding:.55rem .9rem; font-size:.76rem;}
    .hamburger-btn{width:38px; height:38px; font-size:1.1rem;}
    .hero-right{height:auto;}
    .hv-visual{height:300px; margin-top:2rem;}
    .hv-card2-outer{position:static; width:100%; height:auto; margin-top:1.4rem;}
    .hv-card2-spinwrap{position:relative; inset:auto; padding:2px;}
    .hv-card2{flex-direction:column;}
    .hv-card2 .announce-img{width:100%; aspect-ratio:16/9;}
    .hv-card2 .announce-body{padding:1.1rem 1.2rem 1.3rem;}
    .view-all{position:static; float:right; margin-top:.9rem;}
    .hero h1 .ind{margin-left:0;}
    .counter-row{margin-top:1.5rem;}
    .counter-pill:nth-child(n){margin-top:0;}
    .metric-card:nth-child(n){transform:none; margin-left:0;}
    .svc-cell.c1{min-height:220px;}
    .why-col:nth-child(n){margin-top:0;}
    .why-col .why-cell{transform:none;}
    .cta-shape{padding:2.2rem 1.4rem;}
    .cta-form-panel{transform:none;}
    .c-col:nth-child(n) .c-cell{margin-top:0;}
    .navlinks{display:none;}
  }
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

  @media (max-width: 420px){
    .c-col{flex:0 0 100%; max-width:100%;}
    .c-col:not(:first-child){margin-top:1rem !important;}
  }

  .navlinks li.dropdown{position:relative;}
  .navlinks .dropdown-menu{border-radius:18px; border:1px solid var(--edge); padding:.5rem; box-shadow:0 24px 50px -30px rgba(18,21,28,.35); margin-top:.7rem !important;}
  .navlinks .dropdown-item{border-radius:12px; font-size:.85rem; padding:.55rem .8rem; font-weight:500; color:var(--ink-muted);}
  .navlinks .dropdown-item:hover{background:var(--brand-soft); color:var(--brand);}
  .navlinks a.active{background:var(--ink); color:#fff;}

  /* ===== mobile hamburger menu ===== */
  .hamburger-btn{
    width:42px; height:42px; border-radius:12px; border:1px solid var(--edge);
    background:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; color:var(--ink); flex:none; transition:all .2s ease;
  }
  .hamburger-btn:hover{border-color:var(--brand); color:var(--brand);}
  .mobile-menu-panel{display:flex; flex-direction:column; gap:.2rem; padding:.5rem 0 1.3rem; border-top:1px solid var(--edge); margin-top:.3rem;}
  .mobile-menu-panel a{padding:.75rem .9rem; border-radius:12px; font-size:.92rem; font-weight:600; color:var(--ink-muted); display:block;}
  .mobile-menu-panel a:hover, .mobile-menu-panel a.active{background:var(--paper); color:var(--ink);}
  .mobile-menu-panel a.sub{padding-left:1.6rem; font-size:.85rem; font-weight:500; color:var(--ink-muted);}
  .mobile-menu-panel hr{border-color:var(--edge); margin:.4rem .9rem;}
  .mm-toggle{display:flex !important; align-items:center; justify-content:space-between;}
  .mm-chevron{transition:transform .25s ease; font-size:.8rem;}
  .mm-toggle[aria-expanded="true"] .mm-chevron{transform:rotate(180deg);}

  .logo-img{height:48px; width:auto; display:block;}
  footer .logo-img{height:42px;}


  /* ================= KOYU TEMA — DARK THEME OVERRIDES ================= */
  .logo-img{filter:brightness(0) invert(1);}

  nav.topnav{background:rgba(10,15,26,.85);}
  .navlinks a:hover{background:var(--brand); color:#fff;}
  .navlinks a.active{background:var(--brand); color:#fff;}
  .navlinks .dropdown-menu{background:var(--paper); border-color:var(--edge-strong); box-shadow:0 24px 50px -20px rgba(0,0,0,.6);}
  .navlinks .dropdown-item{color:var(--ink-muted);}
  .navlinks .dropdown-item:hover{background:var(--brand-soft); color:var(--brand);}

  .hamburger-btn{background:var(--paper); color:var(--ink);}
  .mobile-menu-panel a:hover, .mobile-menu-panel a.active{background:var(--paper);}

  .hero-actions a.primary{background:#fff; color:#0A0F1A;}
  .hero-actions a.primary:hover{background:var(--brand); color:#fff;}
  .hero-actions a.secondary{background:transparent; border-color:var(--edge-strong); color:var(--ink);}
  .hero-actions a.secondary:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-soft);}

  .hv-main{border:1px solid var(--edge-strong); box-shadow:0 50px 90px -35px rgba(59,130,246,.5);}
  .hv-badge{background:var(--paper); box-shadow:0 20px 40px -20px rgba(0,0,0,.55);}

  .counter-pill{background:var(--paper-2); box-shadow:0 24px 50px -28px rgba(0,0,0,.55);}
  .metric-card{background:var(--paper); box-shadow:0 20px 40px -26px rgba(0,0,0,.5);}

  .svc-cell{background:var(--brand-soft); box-shadow:0 18px 40px -26px rgba(0,0,0,.55);}
  .svc-cell:hover{box-shadow:0 28px 55px -24px rgba(0,0,0,.7);}
  .svc-cell .wm-icon{color:rgba(255,255,255,.05);}
  .svc-cell.cam-live{border:1px solid var(--edge-strong); box-shadow:0 26px 55px -26px rgba(59,130,246,.4);}
  .svc-cell.has-photo{box-shadow:0 18px 40px -26px rgba(0,0,0,.6);}

  .why-cell{background:var(--paper); box-shadow:0 20px 45px -28px rgba(0,0,0,.55);}
  .why-n{color:rgba(255,255,255,.12);}

  .c-cell{background:var(--paper); box-shadow:0 18px 36px -26px rgba(0,0,0,.55);}

  .cta-form-panel{background:var(--paper); border:1px solid var(--edge-strong); box-shadow:0 45px 85px -30px rgba(0,0,0,.75);}
  .form-control-custom{background:var(--paper-2);}
  .form-control-custom::placeholder{color:var(--ink-muted); opacity:.75;}
  .form-control-custom:focus{background:var(--paper-2); box-shadow:0 0 0 .15rem rgba(59,130,246,.25);}
  .btn-block-submit{background:var(--brand); color:#fff;}
  .btn-block-submit:hover{background:var(--brand-dark);}

  footer{background:#070A11; border-top:1px solid var(--edge);}

  .social-ic{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--edge-strong);
    display:flex; align-items:center; justify-content:center; color:var(--ink-muted);
    font-size:1rem; transition:all .2s ease;
  }
  .social-ic:hover{border-color:var(--brand); color:#fff; background:var(--brand);}

  /* ===== BLOG & GALERİ önizleme ===== */
  .blog-card{
    border:1px solid var(--edge); border-radius:22px; overflow:hidden; background:var(--paper);
    height:100%; display:flex; flex-direction:column; box-shadow:0 18px 40px -28px rgba(0,0,0,.55);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .blog-card:hover{transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(0,0,0,.65);}
  .blog-card .blog-cover{
    aspect-ratio:16/9; position:relative; background-size:cover; background-position:center;
    display:flex; align-items:flex-end; padding:1rem;
  }
  .blog-card .blog-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(6,9,15,.75) 100%);}
  .blog-card .blog-date{
    position:relative; z-index:1; font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:600;
    color:#fff; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); padding:.35rem .7rem; border-radius:100px;
    display:inline-flex; align-items:center; gap:.4rem;
  }
  .blog-card .blog-date .d{width:5px; height:5px; border-radius:50%; background:var(--brand);}
  .blog-card .blog-body{padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1;}
  .blog-card h4{font-size:1.05rem; line-height:1.3; margin:0;}
  .blog-card p{color:var(--ink-muted); font-size:.87rem; line-height:1.6; margin:0; flex:1;}
  .blog-card .blog-more{font-size:.82rem; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:.4rem;}

  .gal-mini-stack{display:flex; flex-direction:column; gap:1rem; height:100%;}
  .gal-mini-card{
    border:1px solid var(--edge); border-radius:22px; background:var(--paper); padding:1.3rem;
    box-shadow:0 18px 40px -28px rgba(0,0,0,.55); flex:1; display:flex; flex-direction:column; gap:.9rem;
    transition:transform .25s ease;
  }
  .gal-mini-card:hover{transform:translateY(-3px);}
  .gal-mini-card .gal-mini-top{display:flex; justify-content:space-between; align-items:center;}
  .gal-mini-card h5{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; margin:0; color:var(--ink);}
  .gal-mini-card .gal-mini-tag{font-family:'JetBrains Mono',monospace; font-size:.64rem; color:var(--brand); background:var(--brand-soft); padding:.3rem .6rem; border-radius:100px;}
  .gal-mini-thumbs{display:flex; gap:.5rem;}
  .gal-mini-thumbs .thumb{
    flex:1; aspect-ratio:1/1; border-radius:12px; background-size:cover; background-position:center;
    border:1px solid var(--edge);
  }

/* ===== bursabilisim tema eklentileri: blok motoru şablonları için ortak sınıflar ===== */
.feature-card{border:1px solid var(--edge); border-radius:20px; padding:1.6rem; background:var(--paper); box-shadow:0 20px 45px -28px rgba(0,0,0,.55); height:100%; position:relative; overflow:hidden;}
.feature-card .fc-icon{width:48px; height:48px; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem;}
.feature-card .fc-num{font-family:'Space Grotesk',sans-serif; font-size:2.2rem; font-weight:700; color:rgba(255,255,255,.12); line-height:1; margin-bottom:.6rem;}
.feature-card h4{font-size:1.05rem; margin-bottom:.5rem;}
.feature-card p{color:var(--ink-muted); font-size:.9rem; line-height:1.6; margin:0;}

.timeline-block .tl-wrap{position:relative;}
.timeline-block .tl-step{display:flex; gap:1.2rem; margin-bottom:1.8rem;}
.timeline-block .tl-marker{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:var(--brand); background:var(--brand-soft); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
.timeline-block .tl-step h4{font-size:1rem; margin-bottom:.3rem;}
.timeline-block .tl-step p{color:var(--ink-muted); font-size:.9rem; margin:0;}

.logos-block .p-track{display:flex; gap:3rem; align-items:center; animation:logoScroll 30s linear infinite; white-space:nowrap;}
.logos-block .p-track span{font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--ink-muted); font-size:1.1rem; letter-spacing:.05em;}
@keyframes logoScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.map-block .map-panel{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--edge); background:var(--paper); min-height:380px;}
.map-block iframe{width:100%; height:100%; min-height:380px; border:0; display:block;}

.cms-content h2, .cms-content h3{margin-top:2rem;}
.cms-content p{color:#A8B2C4; line-height:1.8;}

/* Sayaç (stats) bloğundaki ikonlar mockup'ta yoktu - koda dokunmadan gizlendi. */
.counter-pill i { display: none !important; }

/* FormBlockRenderer'ın ürettiği standart Bootstrap form elemanlarını
   .cta-form-panel içinde koyu temaya uydurmak için - form şablonunun
   kendi HTML'ini görmeden, en yaygın Bootstrap sınıf adları hedeflendi.
   Gerçek çıktıdaki sınıf adları farklıysa bu kural etkisiz kalır (zararsız). */
.cta-form-panel .form-control,
.cta-form-panel .form-select,
.cta-form-panel textarea {
  background: var(--paper-2);
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .9rem;
}
.cta-form-panel .form-control::placeholder { color: var(--ink-muted); opacity: .75; }
.cta-form-panel .form-control:focus,
.cta-form-panel .form-select:focus {
  background: var(--paper-2);
  border-color: var(--brand);
  box-shadow: 0 0 0 .15rem rgba(59,130,246,.25);
  color: var(--ink);
}
.cta-form-panel .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 700; margin-bottom: .35rem; }

/* KVKK onay metnindeki belge linkleri (FormBlockRenderer'ın {belgeler}
   yerine koyduğu <a data-bs-toggle="modal">) - bulunan gerçek sorun: bu
   temada linkler varsayılan olarak sıfırlanmış (renk/alt çizgi yok), bu
   yüzden tıklanabilir olduğu halde düz metinden ayırt edilemiyordu. Popup
   bloğu gibi AÇIK arka planlarda da çalışsın diye rengi hem koyu hem açık
   zeminde görünür kalacak şekilde brand rengiyle sabitledik. */
.form-check-label a { color: var(--brand); text-decoration: underline; cursor: pointer; }
.form-check-label a:hover { opacity: .85; }
.cta-form-panel .form-check-label a { color: #8fb3ff; }
.cta-form-panel button[type="submit"],
.cta-form-panel .btn {
  background: var(--brand); color: #fff; border: none; padding: .9rem; font-weight: 700; width: 100%; border-radius: 12px;
}
.cta-form-panel button[type="submit"]:hover,
.cta-form-panel .btn:hover { background: var(--brand-dark); color: #fff; }

/* .val-card - hakkimizda-koyu-banner.html'deki "Değerlerimiz" bölümünden,
   feature_list.php ikonlu modda kullanıyor. .svc-ic zaten yukarıda tanımlı. */
.val-card{border:1px solid var(--edge); border-radius:22px; padding:1.7rem; background:var(--paper); height:100%; box-shadow:0 18px 38px -30px rgba(0,0,0,.55); transition:transform .2s ease;}
.val-card:hover{transform:translateY(-4px);}
.val-card .svc-ic{margin-bottom:1rem;}
.val-card h4{font-size:1rem; margin-bottom:.5rem; color:var(--ink);}
.val-card p{color:var(--ink-muted); font-size:.87rem; line-height:1.6; margin:0;}

/* Galeri modu (featured_content.php) - 3'lü grid, kart başına 2x2 fotoğraf + lightbox */
.gal-post-card{background:var(--paper); border:1px solid var(--edge); border-radius:20px; padding:1.2rem; height:100%; display:flex; flex-direction:column; box-shadow:0 18px 38px -30px rgba(0,0,0,.55);}
.gal-post-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem;}
.gal-post-top h5{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; margin:0; color:var(--ink);}
.gal-post-grid{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem;}
.gal-post-thumb{aspect-ratio:1/1; border-radius:12px; background-size:cover; background-position:center; border:1px solid var(--edge); cursor:pointer; transition:opacity .15s ease;}
.gal-post-thumb:hover{opacity:.85;}
.gal-post-more{margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; color:var(--brand); font-weight:700; font-size:.85rem; text-decoration:none;}
.gal-post-more:hover{color:var(--brand-dark);}

.gal-lightbox .modal-content{background:transparent; border:none;}

/* KVKK/hukuki metin popup'ları BEYAZ arka planlı (Bootstrap varsayılanı),
   ama site genelinin metin renkleri (açık gri) KOYU zemin için tasarlanmış -
   burada miras kalınca neredeyse okunmaz oluyordu. Modal içeriğine, hangi
   genel kural miras kalırsa kalsın geçerli olacak okunaklı koyu renkler. */
.modal-content{color:#2b2f38;}
.modal-title{color:#12151c;}
.modal-body, .modal-body p, .modal-body li, .modal-body span, .modal-body div{color:#2b2f38;}
.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4{color:#12151c;}
.modal-body a{color:var(--brand);}
.gal-lightbox .gal-lightbox-img{width:100%; height:auto; max-height:85vh; object-fit:contain; border-radius:12px;}
.gal-lightbox .gal-lightbox-close{position:absolute; top:-2.2rem; right:0; opacity:1; z-index:2;}

/* FAQ akordiyonu - Bootstrap'in hazır bileşeni, koyu temaya özelleştirildi */
.faq-accordion{max-width:820px; margin-left:auto; margin-right:auto;}
.faq-accordion .accordion-item{background:var(--paper); border:1px solid var(--edge); border-radius:16px !important; margin-bottom:.9rem; overflow:hidden;}
.faq-accordion .accordion-button{background:var(--paper); color:var(--ink); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; padding:1.2rem 1.4rem; box-shadow:none !important;}
.faq-accordion .accordion-button:not(.collapsed){background:var(--paper-2); color:var(--brand);}
.faq-accordion .accordion-button::after{filter:invert(1) grayscale(1) brightness(1.6);}
.faq-accordion .accordion-button:focus{box-shadow:none;}
.faq-accordion .accordion-body{background:var(--paper); color:var(--ink-muted); font-size:.92rem; line-height:1.75; padding:0 1.4rem 1.3rem;}
.faq-accordion .accordion-body p:last-child{margin-bottom:0;}

/* ===== Blog / Foto Galeri liste-detay sayfaları için ek sınıflar ===== */
.chip-filter{display:inline-flex; align-items:center; border:1px solid var(--edge-strong); border-radius:100px; padding:.5rem 1.1rem; font-size:.82rem; color:var(--ink-muted); cursor:pointer; transition:all .2s; background:var(--paper);}
.chip-filter.active, .chip-filter:hover{border-color:var(--brand); color:#fff; background:var(--brand);}
a.chip-filter{text-decoration:none;}

.pagination-pill{display:inline-flex; gap:.5rem; align-items:center;}
.pagination-pill a{min-width:38px; height:38px; padding:0 .5rem; border-radius:100px; border:1px solid var(--edge); display:flex; align-items:center; justify-content:center; color:var(--ink-muted); font-size:.85rem; font-family:'JetBrains Mono',monospace; background:var(--paper); text-decoration:none;}
.pagination-pill a.active{background:var(--brand); color:#fff; border-color:var(--brand);}
.pagination-pill a:hover{border-color:var(--brand); color:var(--brand);}
.pagination-pill a.active:hover{color:#fff;}

.article-meta{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; color:var(--ink-muted); font-family:'JetBrains Mono',monospace; font-size:.78rem; margin:1.1rem 0 1.6rem;}
.article-meta span{display:inline-flex; align-items:center; gap:.4rem;}
.article-meta .cat{background:var(--brand-soft); color:var(--brand); padding:.35rem .8rem; border-radius:100px; font-weight:700; letter-spacing:.03em;}

.article-cover{width:100%; aspect-ratio:21/9; border-radius:24px; overflow:hidden; background-size:cover; background-position:center; margin-bottom:2rem; border:1px solid var(--edge-strong); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
@media (max-width:767.98px){ .article-cover{aspect-ratio:4/3;} }

/* Daha zengin .cms-content kuralları - önceki basit sürümün üzerine yazar (aynı dosyada sonra gelen kazanır) */
.cms-content{background:var(--paper); border:1px solid var(--edge); border-radius:22px; padding:2rem 2.2rem; box-shadow:0 18px 40px -32px rgba(0,0,0,.5);}
.cms-content h2{font-family:'Space Grotesk',sans-serif; font-size:1.4rem; color:var(--ink); margin:0 0 1rem;}
.cms-content h3{font-family:'Space Grotesk',sans-serif; font-size:1.12rem; color:var(--ink); margin:1.5rem 0 .7rem;}
.cms-content p{color:#A8B2C4; font-size:1rem; line-height:1.85; margin:0 0 1.1rem;}
.cms-content ul, .cms-content ol{color:var(--ink-muted); font-size:.97rem; line-height:1.8; margin:0 0 1.1rem; padding-left:1.3rem;}
.cms-content li{margin-bottom:.4rem;}
.cms-content li::marker{color:var(--brand);}
.cms-content a{color:var(--brand); text-decoration:underline;}

/* Zengin editörde resme uygulanan hizalama/lightbox - TEMEL işlev artık
   Core\Media::qlImageAssetsTag() üzerinden geliyor (layout.php'de dahil
   ediliyor, tema bağımsız). Burada sadece bursabilisim'e özel RÖTUŞ var
   (köşe yuvarlama, boşluk inceliği). */
.cms-content img.ql-img-left{border-radius:10px;}
.cms-content img.ql-img-right{border-radius:10px;}
.cms-content img.ql-img-center{border-radius:10px;}
.cms-content img:not([class*="ql-img-"]){max-width:100%; height:auto; border-radius:10px; margin:1rem 0;}
.cms-content strong{color:var(--ink);}
.cms-content blockquote{border-left:3px solid var(--brand); margin:1.4rem 0; padding:.4rem 0 .4rem 1.2rem; color:var(--ink); font-style:italic; font-size:1.02rem;}
.cms-content img{max-width:100%; height:auto; border-radius:16px; margin:.8rem 0;}

.cms-note{display:inline-flex; align-items:center; gap:.5rem; font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--ink-muted); background:var(--paper-2); border:1px dashed var(--edge-strong); padding:.5rem .9rem; border-radius:100px; margin-bottom:1rem;}
.cms-note i{color:var(--brand);}

.share-row{display:flex; align-items:center; gap:.6rem; margin-top:1.6rem;}
.share-row .lbl{font-size:.78rem; color:var(--ink-muted); font-weight:600; margin-right:.3rem;}

.sidebar-card{background:var(--paper); border:1px solid var(--edge); border-radius:20px; padding:1.4rem; box-shadow:0 16px 34px -30px rgba(0,0,0,.5);}
.sidebar-card h5{font-family:'Space Grotesk',sans-serif; font-size:.92rem; color:var(--ink); margin-bottom:1rem; text-transform:uppercase; letter-spacing:.04em;}
.sidebar-mini{display:flex; gap:.8rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--edge); text-decoration:none;}
.sidebar-mini:last-child{border-bottom:none;}
.sidebar-mini .sm-img{width:52px; height:52px; border-radius:12px; background-size:cover; background-position:center; flex:none;}
.sidebar-mini .sm-txt h6{font-size:.85rem; color:var(--ink); margin:0 0 .2rem; line-height:1.3;}
.sidebar-mini .sm-txt span{font-size:.68rem; color:var(--ink-muted); font-family:'JetBrains Mono',monospace;}

.gallery-card{border:1px solid var(--edge); border-radius:24px; overflow:hidden; background:var(--paper); height:100%; box-shadow:0 18px 40px -28px rgba(0,0,0,.55); transition:transform .25s ease;}
.gallery-card:hover{transform:translateY(-4px);}
.gallery-card .gc-cover{aspect-ratio:4/3; position:relative; background-size:cover; background-position:center;}
.gallery-card .gc-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(6,9,15,.8) 100%);}
.gallery-card .gc-count{position:absolute; top:.8rem; right:.8rem; z-index:1; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); color:#fff; font-family:'JetBrains Mono',monospace; font-size:.68rem; padding:.35rem .65rem; border-radius:100px; display:flex; align-items:center; gap:.35rem;}
.gallery-card .gc-sector{position:absolute; top:.8rem; left:.8rem; z-index:1; background:rgba(59,130,246,.35); backdrop-filter:blur(4px); color:#DCEBFF; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.05em; padding:.3rem .6rem; border-radius:100px;}
.gallery-card .gc-title{position:absolute; left:1rem; bottom:1rem; right:1rem; z-index:1; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; margin:0;}

.photo-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:1rem;}
.photo-grid .ph{border-radius:18px; overflow:hidden; background-size:cover; background-position:center; border:1px solid var(--edge); transition:transform .2s ease; cursor:pointer;}
.photo-grid .ph:hover{transform:scale(1.02);}
.photo-grid .ph.big{grid-column:span 2; grid-row:span 2;}
@media (max-width:767.98px){
  .photo-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .photo-grid .ph.big{grid-column:span 2; grid-row:span 1;}
}

/* Referanslar bloğu - references_grid (logo + firma adı kartı) */
.ref-logo-card{border:1px solid var(--edge); border-radius:18px; background:var(--paper); padding:1.6rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; height:100%; min-height:120px; transition:transform .2s ease, border-color .2s ease;}
.ref-logo-card:hover{transform:translateY(-3px); border-color:var(--brand);}
.ref-logo-card img{max-width:100%; max-height:48px; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.85;}
.ref-logo-card span{font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:600; color:var(--ink-muted); text-align:center;}

/* Destek sayfası - support_channels blok tipi + arama kutusu */
.support-card{border:1px solid var(--edge); border-radius:22px; padding:1.8rem; background:var(--paper); height:100%; box-shadow:0 18px 38px -30px rgba(0,0,0,.55); transition:transform .2s ease; display:flex; flex-direction:column; gap:1rem;}
.support-card:hover{transform:translateY(-4px); border-color:var(--brand);}
.support-card .svc-ic{width:46px; height:46px; font-size:1.25rem; margin-bottom:1.1rem;}
.support-card h4{font-size:1.05rem; margin:0; color:var(--ink); word-break:break-word;}
.support-card p{color:var(--ink-muted); font-size:.87rem; line-height:1.6; margin-bottom:1rem;}
.support-card .sc-action{font-size:.85rem; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;}
.support-card .sc-action-btn{margin-top:auto; align-self:flex-start; width:38px; height:38px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1rem; transition:background .2s ease, color .2s ease;}
.support-card:hover .sc-action-btn{background:var(--brand); color:#fff;}

.support-search{position:relative; max-width:560px;}
.support-search input{width:100%; background:var(--paper); border:1px solid var(--edge-strong); color:var(--ink); border-radius:100px; padding:1rem 1.4rem 1rem 3.2rem; font-size:.95rem;}
.support-search input::placeholder{color:var(--ink-muted);}
.support-search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 .18rem rgba(59,130,246,.2);}
.support-search i{position:absolute; left:1.3rem; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-size:1.05rem;}

.faq-cat-pill{display:inline-flex; align-items:center; gap:.4rem; font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--brand); background:var(--brand-soft); padding:.3rem .7rem; border-radius:100px; margin-bottom:.7rem; letter-spacing:.04em;}

/* pagehero + breadcrumb-pill - iç sayfalarda kullanılıyor ama daha önce
   style.css'e hiç eklenmemiş kalmış (bulunan gerçek eksik). */
.pagehero{position:relative; padding:2.2rem 0 2.4rem; overflow:hidden;}
.breadcrumb-pill{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-muted);
  background:var(--paper); padding:.5rem 1rem; border-radius:100px; margin-bottom:1.3rem;
  border:1px solid var(--edge);
}
.breadcrumb-pill a{color:var(--ink-muted); text-decoration:none;}
.breadcrumb-pill a:hover{color:var(--brand);}
.breadcrumb-pill .sep{opacity:.5;}
.breadcrumb-pill .cur{color:var(--brand); font-weight:700;}

/* Hizmet detay sayfası - "Diğer Kanallar" pilleri (gerçek veriden) */
.rel-pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--edge-strong); border-radius:100px; padding:.55rem 1.1rem; font-size:.83rem; color:var(--ink-muted); background:var(--paper); transition:all .2s; text-decoration:none;}
.rel-pill:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-soft);}

/* .feat-card - CKEditor içeriğine admin isterse elle ekleyebileceği ikonlu kart
   (mockup'taki "Neler Sunuyoruz" bölümü artık serbest içerik alanının parçası). */
.feat-card{border:1px solid var(--edge); border-radius:20px; padding:1.4rem 1.6rem; background:var(--paper); box-shadow:0 16px 34px -30px rgba(0,0,0,.5); display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem;}
.feat-card i{color:var(--brand); font-size:1.15rem; margin-top:.15rem;}
.feat-card h4{font-size:.98rem; margin-bottom:.3rem; color:var(--ink);}
.feat-card p{color:var(--ink-muted); font-size:.87rem; line-height:1.6; margin:0;}