/*==================================================
GREEN ASIST | 01-home-energy-bill.css 
Energy Consulting / Bill Analysis | Premium Analysis Spine
GA-WAY aligned layout revision | 5-5 balanced timeline
==================================================*/

.energy-bill-v3,
.energy-bill-v3 *{
    box-sizing:border-box;
}

.energy-bill-v3{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:100%;
    height:540px;
    min-height:540px;
    padding:0;

    background:
        radial-gradient(circle at 82% 48%, rgba(0,133,66,.038), transparent 34%),
        radial-gradient(circle at 13% 76%, rgba(0,133,66,.026), transparent 30%),
        linear-gradient(180deg,#ffffff 0%,#f7faf8 100%);

    border-top:1px solid rgba(17,24,25,.08);
    border-bottom:1px solid rgba(17,24,25,.08);
}

.energy-bill-v3::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(90deg,rgba(0,133,66,.032) 1px,transparent 1px),
        linear-gradient(180deg,rgba(0,133,66,.024) 1px,transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
}

.energy-bill-v3::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(0,133,66,0) 0%,
        rgba(0,133,66,.14) 26%,
        rgba(0,133,66,.22) 50%,
        rgba(0,133,66,.14) 74%,
        rgba(0,133,66,0) 100%
    );
}

.energy-bill-v3-shell{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;

    display:grid;
    grid-template-columns:minmax(0,40%) minmax(0,60%);
    gap:0;
    align-items:stretch;
}

/* ==============================
LEFT CONTENT | GA-WAY aligned
============================== */

.energy-bill-v3-copy{
    position:relative;
    min-width:0;
    overflow:visible;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    padding:56px 28px 68px clamp(42px,4vw,74px);
}

.energy-bill-v3-copy::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 16% 18%,rgba(0,133,66,.032),transparent 31%),
        radial-gradient(circle at 82% 82%,rgba(32,34,37,.014),transparent 28%);
}

.energy-bill-v3-copy > *{
    position:relative;
    z-index:2;
}

.energy-bill-v3-kicker{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin:0 0 24px;

    color:#07833a;

    font-size:12px;
    line-height:1;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.energy-bill-v3-kicker::before{
    content:"";
    width:34px;
    height:2px;
    background:#07833a;
}


 .energy-bill-v3-title{
    width:100%;
    max-width:720px;
    margin:0;

    color:#101820;

   
    font-size:clamp(2.35rem,2.62vw,3.05rem);
    font-weight:760;
    line-height:1.10;
    letter-spacing:-.056em;
    
}

.energy-bill-v3-title span{
    display:block;
}

.energy-bill-v3-title em{
    color:#07833a;
    font-style:normal;
}

.energy-bill-v3-benefits{
    width:100%;
    max-width:700px;

    margin-top:34px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
    row-gap:24px;
}

.energy-bill-v3-benefit{
    min-height:82px;

    display:grid;
    grid-template-columns:54px 1fr;
    gap:14px;
    align-items:start;
}

.energy-bill-v3-benefit .benefit-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#07833a;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(17,24,32,.08);

    box-shadow:
        0 12px 28px rgba(17,24,32,.065),
        inset 0 1px 0 rgba(255,255,255,1);
}

.energy-bill-v3 svg{
    width:32px;
    height:32px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.energy-bill-v3-benefit h3{
    margin:0 0 6px;

    color:#111816;

    font-size:15px;
    line-height:1.22;
    font-weight:760;
}

.energy-bill-v3-benefit p{
    margin:0;

    color:#151817;

    font-size:11.8px;
    line-height:1.48;
    font-weight:400;
}

.energy-bill-v3-actions{
    margin-top:32px;

    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.energy-bill-v3-primary,
.energy-bill-v3-secondary{
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:0 24px;

    border-radius:8px;

    text-decoration:none;

    font-size:14.5px;
    line-height:1;
    font-weight:600;

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease,
        background .24s ease,
        color .24s ease;
}

.energy-bill-v3-primary{
    min-width:250px;

    color:#fff;
    background:linear-gradient(135deg,#07933e 0%,#05752f 100%);
    box-shadow:0 16px 34px rgba(7,131,58,.22);
}

.energy-bill-v3-primary .btn-icon{
    display:grid;
    place-items:center;
}

.energy-bill-v3-primary .btn-icon svg{
    width:19px;
    height:19px;
    stroke-width:2;
}

.energy-bill-v3-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 42px rgba(7,131,58,.30);
}

.energy-bill-v3-secondary{
    min-width:205px;

    color:#111816;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(17,24,32,.10);
    box-shadow:0 12px 28px rgba(17,24,32,.055);
}

.energy-bill-v3-secondary span{
    font-size:20px;
    line-height:1;
    transform:translateY(-1px);
}

.energy-bill-v3-secondary:hover{
    transform:translateY(-2px);
    color:#07833a;
    border-color:rgba(7,131,58,.26);
    background:#fff;
}

/* ==============================
RIGHT ANALYSIS SPINE | expanded
============================== */

.energy-bill-v3-visual{
    position:relative;
    min-width:0;

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

     padding-right:clamp(70px,5vw,96px);
}

.energy-bill-v3-visual::before{
    content:"";
    position:absolute;
    left:40%;
    top:50%;
    width:520px;
    height:360px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,133,66,.042),transparent 70%);
    pointer-events:none;
}

.energy-bill-spine{
    position:relative;
    z-index:2;

    width:100%;
    max-width:none;
    height:330px;
}

.energy-bill-spine::before{
    content:"";
    position:absolute;
    left:15%;
    top:50%;
    width:70%;
    height:300px;
    transform:translateY(-50%);
    border-radius:50%;
    border:1px solid rgba(7,131,58,.052);
    background:radial-gradient(circle,rgba(7,131,58,.045),transparent 64%);
    pointer-events:none;
}

.spine-line{
    position:absolute;
    left:12px;
    right:22px;
    top:50%;

    height:4px;

    transform:translateY(-50%);
    border-radius:999px;

    background:
        linear-gradient(90deg,
        rgba(7,131,58,.045) 0%,
        rgba(7,131,58,.34) 5%,
        #07833a 12%,
        #07833a 88%,
        rgba(7,131,58,.34) 95%,
        rgba(7,131,58,.045) 100%);

    box-shadow:0 12px 34px rgba(7,131,58,.12);
}

.spine-line::before,
.spine-line::after{
    content:"";
    position:absolute;
    top:50%;

    width:16px;
    height:16px;

    transform:translateY(-50%);

    border-radius:70%;
    background:#fff;

    border:3px solid #07833a;
    box-shadow:0 0 0 4px rgba(7,131,58,.08);
}

.spine-line::before{
    left:-13px;
}

.spine-line::after{
    right:-13px;
    background:
        radial-gradient(circle at center, #07833a 0 4px, #ffffff 5px 100%);
}

/* center marker removed */
.spine-center{
    display:none;
}

.spine-item{
    position:absolute;

    width:148px;
    height:92px;
}

.spine-top{
    bottom:50%;
}

.spine-bottom{
    top:50%;
}

.spine-connector{
    position:absolute;
    left:50%;

    width:1px;

    background:#07833a;
    opacity:.78;
}

.spine-top .spine-connector{
    bottom:0;
    height:52px;
}

.spine-bottom .spine-connector{
    top:0;
    height:52px;
}

.spine-connector::before{
    content:"";
    position:absolute;
    left:50%;

    width:1px;
    height:1px;
    transform:translateX(-50%);

}

.spine-top .spine-connector::before{
    bottom:-3px;
}

.spine-bottom .spine-connector::before{
    top:-3px;
}

.spine-chip{
    position:absolute;
    left:50%;

    min-width:118px;
    height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 13px;

    transform:translateX(-50%);

    border-radius:14px;

    color:#111816;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(17,24,32,.08);

    box-shadow:
        0 15px 30px rgba(17,24,32,.09),
        inset 0 1px 0 rgba(255,255,255,1);

    font-size:12.5px;
    line-height:1;
    font-weight:660;
    white-space:nowrap;
}

.spine-top .spine-chip{
    top:0;
}

.spine-bottom .spine-chip{
    bottom:0;
}

.spine-chip span{
    width:26px;
    height:26px;

    display:grid;
    place-items:center;

    color:#07833a;
    flex:0 0 auto;
}

.spine-chip svg{
    width:32px;
    height:32px;
    stroke-width:1.0;
}

.spine-chip strong{
    font:inherit;
}

/* 5 top + 5 bottom balanced placement
   Top row: equal 18% rhythm
   Bottom row: equal 18% rhythm, optically staggered by +8%
   Right side intentionally keeps breathing room.
*/
.item-yekdem{left:4%; bottom:50%;}
.item-anomali{left:22%; bottom:50%;}
.item-ptf{left:40%; bottom:50%;}
.item-epdk{left:58%; bottom:50%;}
.item-osos{left:76%; bottom:50%;}

.item-ikili{left:10%; top:50%;}
.item-dagitim{left:28%; top:50%;}
.item-reaktif{left:46%; top:50%;}
.item-aktif{left:64%; top:50%;}
.item-mahsup{left:82%; top:50%;}

/* override wrong original top/bottom class behavior for 5-5 layout */
.item-osos{
    top:auto;
    bottom:50%;
}
.item-osos .spine-chip{
    top:0;
    bottom:auto;
}
.item-osos .spine-connector{
    top:auto;
    bottom:0;
}

.item-epdk{
    top:auto;
    bottom:50%;
}
.item-epdk .spine-chip{
    top:0;
    bottom:auto;
}
.item-epdk .spine-connector{
    top:auto;
    bottom:0;
}

.item-anomali{
    top:auto;
    bottom:50%;
}
.item-anomali .spine-chip{
    top:0;
    bottom:auto;
}
.item-anomali .spine-connector{
    top:auto;
    bottom:0;
}

.item-ptf{
    top:auto;
    bottom:50%;
}
.item-ptf .spine-chip{
    top:0;
    bottom:auto;
}
.item-ptf .spine-connector{
    top:auto;
    bottom:0;
}

.item-yekdem{
    top:auto;
    bottom:50%;
}
.item-yekdem .spine-chip{
    top:0;
    bottom:auto;
}
.item-yekdem .spine-connector{
    top:auto;
    bottom:0;
}

.item-ikili{
    bottom:auto;
    top:50%;
}
.item-ikili .spine-chip{
    bottom:0;
    top:auto;
}
.item-ikili .spine-connector{
    bottom:auto;
    top:0;
}

.item-dagitim{
    bottom:auto;
    top:50%;
}
.item-dagitim .spine-chip{
    bottom:0;
    top:auto;
}
.item-dagitim .spine-connector{
    bottom:auto;
    top:0;
}

.item-reaktif{
    bottom:auto;
    top:50%;
}
.item-reaktif .spine-chip{
    bottom:0;
    top:auto;
}
.item-reaktif .spine-connector{
    bottom:auto;
    top:0;
}

.item-aktif{
    bottom:auto;
    top:50%;
}
.item-aktif .spine-chip{
    bottom:0;
    top:auto;
}
.item-aktif .spine-connector{
    bottom:auto;
    top:0;
}

.item-mahsup{
    bottom:auto;
    top:50%;
}
.item-mahsup .spine-chip{
    bottom:0;
    top:auto;
}
.item-mahsup .spine-connector{
    bottom:auto;
    top:0;
}

/* connector length variations - refined */
.item-yekdem .spine-connector{height:62px;}
.item-anomali .spine-connector{height:58px;}
.item-ptf .spine-connector{height:66px;}
.item-epdk .spine-connector{height:50px;}
.item-osos .spine-connector{height:62px;}

.item-ikili .spine-connector{height:56px;}
.item-dagitim .spine-connector{height:78px;}
.item-reaktif .spine-connector{height:52px;}
.item-aktif .spine-connector{height:76px;}
.item-mahsup .spine-connector{height:84px;}

/* ==============================
RESPONSIVE
============================== */

/*==================================================
NOTE
Responsive rules for this HOME section are centralized in 07_home.css.
This file intentionally contains desktop/base section styling only.
==================================================*/

/*==================================================
RIGHT ANALYSIS SPINE | PREMIUM LINE ICON FINAL
Desktop/base visual refinement. Responsive layout remains in 07_home.css.
==================================================*/

.spine-chip{
    min-width:124px;
    height:44px;
    gap:11px;
    padding:0 15px;

    border-radius:13px;

    background:rgba(255,255,255,.96);
    border:1px solid rgba(17,24,32,.075);

    box-shadow:
        0 14px 30px rgba(17,24,32,.075),
        inset 0 1px 0 rgba(255,255,255,1);

    font-size:12.5px;
    font-weight:680;
    letter-spacing:-.012em;
}

.spine-chip .spine-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;

    display:grid;
    place-items:center;

    color:#07833a;
}

.spine-chip .spine-icon svg{
    display:block;
    width:29px;
    height:29px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

.spine-chip strong{
    color:#151a18;
    font-weight:680;
}

@media(hover:hover) and (pointer:fine){

    .spine-chip{
        transition:
            transform .22s ease,
            border-color .22s ease,
            box-shadow .22s ease,
            background .22s ease;
    }

    .spine-chip:hover{
        transform:translateX(-50%) translateY(-2px);
        border-color:rgba(7,131,58,.18);
        background:#fff;

        box-shadow:
            0 18px 36px rgba(17,24,32,.095),
            0 0 0 1px rgba(7,131,58,.025),
            inset 0 1px 0 rgba(255,255,255,1);
    }
}

/*==================================================
PREMIUM ICON FAMILY | OPTICAL CONSISTENCY FINAL
==================================================*/

.spine-chip .spine-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
}

.spine-chip .spine-icon svg{
    width:28px;
    height:28px;
    stroke-width:1.55;
    overflow:visible;
}

/* Fine optical balance for visually dense symbols */
.item-dagitim .spine-icon svg,
.item-epdk .spine-icon svg{
    width:27px;
    height:27px;
}

.item-reaktif .spine-icon svg{
    width:29px;
    height:29px;
}

.item-aktif .spine-icon svg{
    width:26px;
    height:26px;
}

.item-mahsup .spine-icon svg{
    width:27px;
    height:27px;
}

/*==================================================
PREMIUM LINE ICONS | FINAL THIN-STROKE OPTICAL SYSTEM
==================================================*/

.spine-chip .spine-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:grid;
    place-items:center;
    color:#07833a;
}

.spine-chip .spine-icon svg{
    display:block;
    width:28px;
    height:28px;
    overflow:visible;

    fill:none;
    stroke:currentColor;
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

/* Dense symbols need a little more breathing room */
.item-dagitim .spine-icon svg,
.item-epdk .spine-icon svg{
    width:27px;
    height:27px;
    stroke-width:1.25;
}

.item-ikili .spine-icon svg{
    width:29px;
    height:29px;
    stroke-width:1.25;
}

.item-reaktif .spine-icon svg{
    width:29px;
    height:29px;
    stroke-width:1.4;
}

.item-aktif .spine-icon svg{
    width:26px;
    height:26px;
    stroke-width:1.4;
}

/* Netting: compact counter-flow arrows with two distinct greens */
.item-mahsup .spine-icon svg{
    width:28px;
    height:28px;
}

.item-mahsup .netting-arrow-a{
    stroke:#05752f;
}

.item-mahsup .netting-arrow-b{
    stroke:#54a96f;
}

/*==================================================
EPDK + BILATERAL ICON LEGIBILITY | FINAL V2
==================================================*/

.item-epdk .spine-icon svg{
    width:28px;
    height:28px;
    stroke-width:1.28;
}

.item-ikili .spine-icon svg{
    width:30px;
    height:30px;
    stroke-width:1.32;
}

/*==================================================
ENERGY ANALYSIS SPINE | VISUAL FINAL
- Thin unified icon family
- Clear handshake
- EPDK government building
- No connector dots on timeline
==================================================*/

.spine-chip .spine-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:grid;
    place-items:center;
    color:#07833a;
}

.spine-chip .spine-icon svg{
    display:block;
    width:28px;
    height:28px;
    overflow:visible;

    fill:none;
    stroke:currentColor;
    stroke-width:1.12;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

/* Optical balance */
.item-yekdem .spine-icon svg,
.item-anomali .spine-icon svg,
.item-ptf .spine-icon svg,
.item-osos .spine-icon svg{
    width:27px;
    height:27px;
}

.item-epdk .spine-icon svg,
.item-dagitim .spine-icon svg{
    width:28px;
    height:28px;
    stroke-width:1.02;
}

.item-ikili .spine-icon svg{
    width:31px;
    height:31px;
    stroke-width:1.08;
}

.item-reaktif .spine-icon svg{
    width:29px;
    height:29px;
    stroke-width:1.18;
}

.item-aktif .spine-icon svg{
    width:26px;
    height:26px;
    stroke-width:1.18;
}

.item-mahsup .spine-icon svg{
    width:29px;
    height:29px;
    stroke-width:1.12;
}

.item-mahsup .netting-arrow-a{
    stroke:#05752f;
}

.item-mahsup .netting-arrow-b{
    stroke:#54a96f;
}

/* Remove all connector/timeline dots */
.spine-connector::before,
.spine-connector::after,
.spine-item::before,
.spine-item::after{
    display:none !important;
    content:none !important;
}

/* Keep only clean vertical connector lines */
.spine-connector{
    background:#07833a;
    opacity:.72;
}